.mqtt-main { max-width: 1440px; }
.visible-link { display: inline; }
.monitor-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 36px;
  padding-bottom: 30px;
  margin-bottom: 0;
}
.lead { max-width: 760px; margin: 11px 0 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.broker-indicator { min-width: 255px; display: flex; align-items: center; gap: 13px; padding: 14px 0 14px 20px; border-left: 1px solid var(--line); }
.broker-dot { width: 13px; height: 13px; flex: 0 0 auto; border-radius: 50%; background: #9da4a0; box-shadow: 0 0 0 5px #edf0ee; }
.broker-indicator.online .broker-dot { background: #24a15c; box-shadow: 0 0 0 5px #dff3e7; }
.broker-indicator.offline .broker-dot { background: var(--red); box-shadow: 0 0 0 5px var(--red-soft); }
.broker-indicator span, .broker-indicator strong, .broker-indicator small { display: block; }
.broker-indicator span { color: var(--muted); font-size: 11px; font-weight: 750; text-transform: uppercase; }
.broker-indicator strong { margin-top: 3px; font-size: 16px; }
.broker-indicator small { margin-top: 2px; color: var(--muted); }
.monitor-summary { display: grid; grid-template-columns: repeat(4, 1fr); padding: 0; margin: 0 0 42px; border-bottom: 1px solid var(--line); background: #eef2ef; }
.monitor-summary div { min-width: 0; padding: 20px 22px; border-right: 1px solid #d8ded9; }
.monitor-summary div:last-child { border-right: 0; }
.monitor-summary span, .monitor-summary strong, .monitor-summary small { display: block; }
.monitor-summary span { color: var(--muted); font-size: 12px; font-weight: 700; }
.monitor-summary strong { margin-top: 6px; font-size: 27px; }
.monitor-summary small { margin-top: 3px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.table-scroll { width: 100%; overflow-x: auto; border-top: 1px solid var(--line); }
.device-table { width: 100%; min-width: 900px; border-collapse: collapse; table-layout: fixed; }
.device-table th { padding: 11px 10px; color: var(--muted); font-size: 11px; text-align: left; text-transform: uppercase; border-bottom: 1px solid var(--line); }
.device-table td { height: 62px; padding: 10px; border-bottom: 1px solid var(--line); font-size: 13px; vertical-align: middle; }
.device-table th:nth-child(1) { width: 90px; }
.device-table th:nth-child(2) { width: 170px; }
.device-table th:nth-child(3) { width: 170px; }
.device-table th:nth-child(4) { width: 195px; }
.device-table th:nth-child(5) { width: 65px; }
.device-table th:nth-child(6) { width: 75px; }
.device-table th:nth-child(7) { width: 110px; }
.device-name strong, .device-name span { display: block; }
.device-name span, .topic-cell, .empty-table { color: var(--muted); }
.device-name span { margin-top: 2px; font-size: 11px; }
.topic-cell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: Consolas, monospace; font-size: 11px; }
.status-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 750; }
.status-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #999; }
.status-chip.online::before { background: #27a05d; }
.status-chip.offline::before { background: var(--red); }
.empty-table { text-align: center; }
.message-heading { align-items: flex-end; }
.stream-actions, .live-switch { display: flex; align-items: center; gap: 10px; }
.live-switch { min-height: 38px; color: var(--muted); font-size: 12px; font-weight: 700; }
.live-switch input { width: 18px; min-height: 18px; accent-color: #235d40; }
.filter-bar { display: grid; grid-template-columns: minmax(280px, 1fr) 230px 190px; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.filter-bar label { display: grid; gap: 5px; }
.filter-bar label > span { color: var(--muted); font-size: 11px; font-weight: 700; }
.message-list { min-height: 240px; }
.message-row { width: 100%; min-height: 68px; display: grid; grid-template-columns: 92px 122px minmax(140px, .65fr) minmax(210px, .8fr) minmax(240px, 1.3fr); align-items: center; gap: 14px; padding: 10px 8px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.message-row:hover { background: #f0f4f1; }
.message-time { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 12px; }
.message-type { font-size: 11px; font-weight: 800; text-transform: uppercase; }
.message-type.telemetry { color: #276b82; }
.message-type.status { color: #2d7650; }
.message-type.config { color: #78559e; }
.message-type.alarm { color: #b73b33; }
.message-device strong, .message-device span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.message-device span { margin-top: 2px; color: var(--muted); font-size: 11px; }
.message-topic, .message-preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.message-topic { font: 11px Consolas, monospace; color: #3f5047; }
.message-preview { color: var(--muted); font: 11px Consolas, monospace; }
.empty-messages { margin: 0; padding: 55px 20px; color: var(--muted); text-align: center; }
.payload-dialog { width: min(850px, calc(100vw - 28px)); max-width: calc(100vw - 28px); max-height: calc(100vh - 28px); padding: 22px; overflow-x: hidden; border: 1px solid var(--line); border-radius: 8px; color: var(--text); box-shadow: 0 22px 70px rgba(20,29,24,.24); }
.payload-dialog::backdrop { background: rgba(18,27,22,.46); }
.payload-dialog .dialog-heading, .payload-dialog .dialog-heading > div { min-width: 0; }
#payload-topic { overflow-wrap: anywhere; }
.payload-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 18px 0; background: var(--line); border: 1px solid var(--line); }
.payload-meta div { min-width: 0; padding: 10px; background: #f8faf8; }
.payload-meta dt { color: var(--muted); font-size: 10px; text-transform: uppercase; }
.payload-meta dd { margin: 4px 0 0; overflow-wrap: anywhere; font-size: 12px; font-weight: 700; }
.payload-dialog pre { max-height: 430px; margin: 0; padding: 16px; overflow: auto; border: 1px solid #d7ddd8; border-radius: 6px; background: #111915; color: #dfe9e2; font: 12px/1.55 Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }

@media (max-width: 900px) {
  .monitor-summary { grid-template-columns: 1fr 1fr; }
  .monitor-summary div:nth-child(2) { border-right: 0; }
  .monitor-summary div:nth-child(-n+2) { border-bottom: 1px solid #d8ded9; }
  .filter-bar { grid-template-columns: 1fr 1fr; }
  .search-field { grid-column: 1 / -1; }
  .message-row { grid-template-columns: 80px 105px minmax(130px, .7fr) minmax(180px, 1fr); }
  .message-preview { display: none; }
}

@media (max-width: 620px) {
  .visible-link { display: inline; }
  .monitor-heading { align-items: stretch; flex-direction: column; gap: 20px; }
  .broker-indicator { padding-left: 0; border-left: 0; }
  .monitor-summary { grid-template-columns: 1fr 1fr; }
  .monitor-summary div { padding: 15px; }
  .monitor-summary strong { font-size: 23px; }
  .message-heading { align-items: stretch !important; flex-direction: column !important; }
  .stream-actions { justify-content: space-between; }
  .filter-bar { grid-template-columns: 1fr; }
  .search-field { grid-column: auto; }
  .message-row { grid-template-columns: 72px 93px minmax(0, 1fr); gap: 8px; }
  .message-topic, .message-preview { display: none; }
  .payload-dialog { width: calc(100vw - 28px); padding: 16px; }
  #payload-topic { font-size: 19px; }
  .payload-meta { grid-template-columns: 1fr 1fr; }
  .payload-dialog .dialog-actions { flex-wrap: wrap; }
}