:root {
  color-scheme: dark;
  --bg: #081013;
  --rail: #0a1316;
  --surface: #0e191d;
  --surface-2: #122126;
  --surface-3: #17292d;
  --border: #22383d;
  --border-strong: #315158;
  --text: #e7f1ed;
  --muted: #789094;
  --muted-2: #526b70;
  --lime: #b9ff69;
  --cyan: #73e4d0;
  --amber: #f7c56d;
  --red: #ff8787;
  --mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--bg); scrollbar-gutter: stable; }
html:has(dialog[open]) { overflow: hidden; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font: 14px var(--sans); }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(115,228,208,.024) 1px, transparent 1px), linear-gradient(90deg,rgba(115,228,208,.024) 1px,transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(90deg, transparent 10%, #000 60%);
}
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.shell { position: relative; display: grid; grid-template-columns: 244px minmax(0, 1fr); min-height: 100vh; }
.rail { position: sticky; top: 0; z-index: 10; display: flex; flex-direction: column; height: 100vh; padding: 29px 18px 24px; background: rgba(10,19,22,.97); border-right: 1px solid var(--border); }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 8px; color: var(--text); text-decoration: none; }
.brand-mark, .login-mark { display: grid; flex: 0 0 auto; place-items: center; width: 48px; height: 48px; color: var(--lime); background: linear-gradient(135deg,#20372b,#0c1918); border: 1px solid #4c735c; box-shadow: 0 0 28px rgba(185,255,105,.08); font: 550 19px var(--mono); letter-spacing: -3px; }
.brand-mark span, .login-mark span { color: var(--cyan); }
.brand b { display: block; font: 550 14px var(--mono); letter-spacing: 1.2px; }
.brand small { display: block; margin-top: 6px; color: var(--muted); font: 9px var(--mono); letter-spacing: 1.35px; }
.rail-label, .section-kicker, .metric-label, .eyebrow, .breadcrumb, .nav-key, .top-chip, .time, .footer, .stack-form label, .dialog-form label, .add-modem-form label { font-family: var(--mono); font-size: 10px; letter-spacing: 1.25px; }
.rail-label { display: flex; justify-content: space-between; margin: 40px 16px 14px; color: #5d7478; }
.rail-label span { color: #49625f; }
.nav { display: grid; gap: 5px; }
.nav a { display: grid; grid-template-columns: 22px minmax(0,1fr) auto; align-items: center; gap: 12px; min-height: 46px; padding: 10px 14px; color: #8fa2a3; border: 1px solid transparent; border-radius: 4px; text-decoration: none; font-size: 12px; font-weight: 550; transition: .16s ease; }
.nav a:hover { color: var(--text); background: #122126; }
.nav a.active { color: var(--lime); background: #192923; border-color: #3b5d43; }
.nav-icon { font: 19px/1 var(--mono); text-align: center; }
.nav-key { color: #526d65; font-size: 9px; }
.rail-bottom { margin-top: auto; padding: 20px 10px 4px; }
.rail-pulse { display: flex; align-items: center; gap: 11px; color: #6d8588; font: 9px/1.6 var(--mono); letter-spacing: 1px; }
.rail-pulse span { display: grid; }
.rail-pulse strong { color: var(--lime); font-weight: 550; }
.rail-pulse i, .top-chip i, .heading-note i { width: 8px; height: 8px; background: var(--lime); border-radius: 50%; box-shadow: 0 0 12px var(--lime); }
.logout { margin-top: 24px; padding: 0; color: #71898b; background: none; border: 0; font: 10px var(--mono); letter-spacing: 1.2px; }
.logout:hover { color: var(--lime); }

.main { min-width: 0; padding: 0 38px 28px; }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; height: 76px; background: rgba(8,16,19,.97); border-bottom: 1px solid var(--border); }
.breadcrumb { color: #688185; }
.breadcrumb span { margin: 0 10px; color: var(--lime); }
.breadcrumb strong { color: #a7b9b6; font-weight: 500; }
.topbar-right { display: flex; align-items: center; gap: 14px; }
.topbar-right .time { margin-right: 6px; }
.compose-trigger { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; }
.compose-trigger > span:first-child { font-size: 13px; line-height: 1; }
.notify { position: relative; }
.notify-btn { position: relative; display: grid; width: 38px; height: 36px; padding: 0; place-items: center; color: #8fa9a4; background: #10201d; border: 1px solid #29483b; border-radius: 3px; }
.notify-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.notify-btn:hover, .notify-btn[aria-expanded="true"] { color: var(--lime); border-color: #4c735c; }
.notify-btn.has-unread { color: var(--cyan); }
.notify-badge { position: absolute; top: -7px; right: -7px; min-width: 19px; height: 19px; padding: 0 5px; color: #0b1512; background: var(--cyan); border: 2px solid var(--bg); border-radius: 10px; font: 550 9px/15px var(--mono); text-align: center; }
.notify-badge.bump { animation: badge-bump .45s ease; }
@keyframes badge-bump { 40% { transform: scale(1.35); } }
.notify-panel { position: absolute; top: calc(100% + 10px); right: 0; z-index: 40; width: min(380px, calc(100vw - 32px)); overflow: hidden; background: #0f1b1f; border: 1px solid #3a5e4c; border-radius: 4px; box-shadow: 0 24px 60px #000a; }
.notify-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.notify-head strong { display: block; margin-top: 5px; font-size: 14px; }
.sound-toggle { padding: 6px 8px; color: var(--lime); background: #162820; border: 1px solid #3b6041; border-radius: 2px; font: 9px var(--mono); letter-spacing: .6px; }
.sound-toggle.off { color: #8a9b9c; background: #161f22; border-color: #33474b; }
.notify-list { display: grid; max-height: min(420px, 60vh); overflow: auto; }
.notify-list > .empty-state { margin: 14px; }
.notify-item { padding: 12px 16px; border-bottom: 1px solid var(--border); }
.notify-item.unread { background: rgba(115,228,208,.045); }
.notify-item.fresh { animation: fresh-flash 1.6s ease 2; }
.notify-item-top { display: flex; justify-content: space-between; gap: 10px; }
.notify-item-top time { flex: none; color: #617a7d; font: 9px var(--mono); }
.notify-item p { display: -webkit-box; margin: 7px 0 9px; overflow: hidden; color: #bfcecb; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.notify-item-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.notify-item-foot small { overflow: hidden; color: #617a7d; font: 9px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.notify-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: #0b171b; }
.notify-foot button { padding: 0; color: #86aaa4; background: none; border: 0; font: 9px var(--mono); letter-spacing: .8px; }
.notify-foot button:disabled { color: #4c6366; cursor: default; }
.notify-foot button:not(:disabled):hover, .notify-foot a:hover { color: var(--lime); }
.notify-foot a { color: #86aaa4; text-decoration: none; font: 9px var(--mono); letter-spacing: .8px; }
.time { color: #607b7e; }
.top-chip { display: flex; align-items: center; gap: 8px; padding: 7px 10px; color: var(--lime); background: #10231e; border: 1px solid #29483b; }
.top-chip i { width: 5px; height: 5px; }
.page { min-height: calc(100vh - 154px); }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; min-height: 204px; padding: 50px 4px 35px; }
.page-heading h1 { margin: 14px 0 9px; font-size: clamp(36px, 4vw, 58px); line-height: 1; letter-spacing: -2.4px; font-weight: 550; }
.page-heading p { max-width: 620px; margin: 0; color: #809799; font-size: 13px; line-height: 1.65; }
.eyebrow { display: flex; align-items: center; gap: 10px; color: var(--lime); }
.tiny-line { width: 24px; height: 1px; background: var(--lime); }
.overview-heading { position: relative; overflow: hidden; }
.live-orbit { position: relative; display: grid; place-items: center; width: 190px; height: 110px; margin-right: 28px; }
.live-orbit::before, .live-orbit::after, .live-orbit span { content: ""; position: absolute; border: 1px solid #315c51; border-radius: 50%; transform: scaleY(.45) rotate(-15deg); }
.live-orbit::before { width: 85px; height: 85px; }
.live-orbit::after { width: 150px; height: 150px; opacity: .45; }
.live-orbit span { width: 205px; height: 205px; opacity: .18; }
.live-orbit i { width: 28px; height: 28px; background: radial-gradient(circle,#d5ffa7,#89d45c 25%,#213b2c 70%); border: 1px solid var(--lime); border-radius: 50%; box-shadow: 0 0 30px rgba(185,255,105,.42); }
.live-orbit b { position: absolute; right: 0; top: 0; color: #587872; font: 9px var(--mono); letter-spacing: 1px; }
.heading-note { display: flex; align-items: center; gap: 9px; color: var(--lime); font: 10px var(--mono); letter-spacing: 1.1px; white-space: nowrap; }
.heading-actions { display: flex; align-items: center; gap: 18px; }

.metrics { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px; overflow: hidden; background: var(--border); border: 1px solid var(--border); border-radius: 5px; }
.metric { min-height: 130px; padding: 23px 22px 20px; background: #0d181c; }
.metric-label { color: #6c8588; }
.metric > div { display: flex; align-items: baseline; gap: 10px; margin-top: 10px; }
.metric strong { font: 500 41px var(--mono); letter-spacing: -3px; }
.metric-tail { color: #60787b; font: 10px var(--mono); letter-spacing: 1px; }
.metric small { display: flex; align-items: center; gap: 8px; margin-top: 8px; color: #6c8587; font: 10px var(--mono); }
.dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; }
.dot.green { background: var(--lime); }
.dot.cyan { background: var(--cyan); }
.dot.amber { background: var(--amber); }

.dashboard-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-top: 14px; }
.modem-monitor { grid-column: 1 / -1; }
.card { overflow: hidden; background: linear-gradient(145deg,#101c20,#0d181c); border: 1px solid var(--border); border-radius: 5px; box-shadow: 0 18px 50px rgba(0,0,0,.1); }
.card-head, .content-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 80px; padding: 19px 22px; border-bottom: 1px solid var(--border); }
.card-head h2, .content-head h2, .route-guide h2, .docs-intro h2, .form-surface h2 { margin: 6px 0 0; font-size: 18px; letter-spacing: -.45px; font-weight: 550; }
.card-head p { margin: 6px 0 0; color: var(--muted); font-size: 11px; }
.section-kicker { color: var(--lime); font-size: 9px; }
.section-kicker.cyan { color: var(--cyan); }
.text-link { color: #86aaa4; text-decoration: none; font: 9px var(--mono); letter-spacing: .8px; }
.text-link:hover { color: var(--lime); }
.status-chip, .scanning-label { flex: 0 0 auto; padding: 6px 8px; color: var(--lime); background: #162820; border: 1px solid #3b6041; font: 9px var(--mono); letter-spacing: .75px; }
button.status-chip { cursor: pointer; }
.availability { padding: 17px 22px; border-bottom: 1px solid var(--border); }
.availability > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; }
.availability strong { font: 550 21px var(--mono); }
.availability span { color: #667f81; font: 9px var(--mono); letter-spacing: 1px; text-transform: uppercase; }
.availability-track { height: 4px; margin-top: 13px; overflow: hidden; background: #1f3234; }
.availability-track i { display: block; width: 0; height: 100%; background: linear-gradient(90deg,var(--cyan),var(--lime)); transition: width .3s ease; }
.overview-modem-table { overflow-x: auto; }
.overview-modem-head, .monitor-row { display: grid; grid-template-columns: minmax(210px,1.5fr) minmax(125px,.75fr) minmax(120px,.65fr) minmax(80px,.45fr) minmax(90px,.5fr); align-items: center; gap: 15px; min-width: 720px; }
.overview-modem-head { min-height: 40px; padding: 9px 22px; color: #5f797c; background: #0b171b; border-bottom: 1px solid var(--border); font: 9px var(--mono); letter-spacing: 1px; }
.monitor-list { display: grid; max-height: 285px; min-width: 720px; overflow: auto; }
.monitor-row { min-height: 66px; padding: 13px 22px; border-bottom: 1px solid var(--border); }
.monitor-row:last-child { border-bottom: 0; }
.monitor-name { display: flex; align-items: center; gap: 9px; min-width: 0; font-weight: 550; }
.monitor-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.monitor-row small { display: block; margin: 5px 0 0 16px; color: #6a8486; font: 9px var(--mono); }
.monitor-meta { color: #779391; font: 9px/1.6 var(--mono); text-transform: uppercase; }
.monitor-number { color: #d5e1dd; font: 550 12px var(--mono); }
/* Five bars, so a 100% reading fills every one of them. */
.signal-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 15px; vertical-align: middle; }
.signal-bars i { display: block; width: 3px; background: #36504f; border-radius: 1px; }
.signal-bars i:nth-child(1) { height: 4px; }
.signal-bars i:nth-child(2) { height: 6px; }
.signal-bars i:nth-child(3) { height: 9px; }
.signal-bars i:nth-child(4) { height: 12px; }
.signal-bars i:nth-child(5) { height: 15px; }
.signal-bars i.on { background: var(--lime); }
.status-light { flex: none; width: 7px; height: 7px; background: #657679; border-radius: 50%; }
.status-light.online { background: var(--lime); box-shadow: 0 0 10px rgba(185,255,105,.8); }
.status-light.probing, .status-light.reconnecting, .status-light.offline { background: var(--amber); animation: pulse 1.6s infinite; }
.status-light.disabled { background: #566568; animation: none; }
@keyframes pulse { 50% { opacity: .35; } }
.stream-card { min-height: 390px; }
.compact-list { max-height: 310px; overflow: auto; }
.empty-state { padding: 24px 14px; color: #60797c; background: #0d171b; border: 1px dashed #294247; font: 10px/1.7 var(--mono); text-align: center; }

.message-list { display: grid; gap: 8px; }
.message-card { padding: 13px 14px; background: #122025; border: 1px solid #263d42; border-radius: 3px; }
.compact-list .message-card { border-width: 0 0 1px; border-radius: 0; padding: 15px 22px; background: transparent; }
.message-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.message-number { overflow: hidden; color: var(--cyan); font: 11px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.message-status { display: inline-flex; align-items: center; gap: 6px; color: var(--lime); font: 9px var(--mono); letter-spacing: .5px; text-transform: uppercase; }
.message-status.queued, .message-status.sending { color: var(--amber); }
.message-status.unknown, .message-status.failed { color: var(--red); }
.message-body { margin: 9px 0; color: #bfcecb; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; white-space: pre-wrap; }
.message-foot { display: flex; justify-content: space-between; gap: 8px; color: #617a7d; font: 9px var(--mono); }
.message-actions { display: flex; align-items: center; gap: 6px; margin-top: 11px; padding-top: 10px; border-top: 1px solid #263b3f; }
.message-action { padding: 5px 8px; color: #8fa9a4; background: #162629; border: 1px solid #2e494d; border-radius: 2px; font: 8px var(--mono); letter-spacing: .55px; }
.message-action:hover { color: var(--lime); border-color: #52765a; }
.message-action.retry { margin-left: auto; color: var(--amber); border-color: #66553a; }
.attempt-label { margin-left: auto; color: #6c8587; font: 8px var(--mono); letter-spacing: .5px; }
.message-action.retry + .attempt-label, .retry-state + .attempt-label { margin-left: 0; }
.message-action.is-busy, .message-action:disabled { display: inline-flex; align-items: center; gap: 6px; cursor: progress; opacity: .9; }
.message-action.is-busy:hover { color: var(--amber); border-color: #66553a; }
.retry-state { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 5px 8px; color: var(--amber); background: #211e15; border: 1px solid #4d4230; border-radius: 2px; font: 8px var(--mono); letter-spacing: .55px; }
.retry-state.ok { color: var(--lime); background: #15241c; border-color: #35553d; }
.retry-state.bad { color: var(--red); background: #2a1c20; border-color: #5a353a; }
.spinner { display: inline-block; flex: none; width: 9px; height: 9px; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.unread-dot { display: inline-block; width: 6px; height: 6px; margin-right: 7px; background: var(--cyan); border-radius: 50%; box-shadow: 0 0 8px rgba(115,228,208,.7); vertical-align: 1px; }
.message-card.unread { border-color: #2f5553; }
.message-card.fresh { animation: fresh-flash 1.6s ease 2; }
@keyframes fresh-flash { 0%, 100% { box-shadow: inset 3px 0 0 transparent; background-color: transparent; } 35% { box-shadow: inset 3px 0 0 var(--cyan); background-color: rgba(115,228,208,.08); } }
.error-note { color: #ff9d9d; }
.compact-list .message-body { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.micro-note { margin-top: 8px; color: #6b8384; font: 9px/1.5 var(--mono); }

.summary-strip { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin-bottom: 14px; overflow: hidden; background: var(--border); border: 1px solid var(--border); border-radius: 5px; gap: 1px; }
.summary-strip > div { display: flex; align-items: center; justify-content: space-between; gap: 15px; min-height: 64px; padding: 15px 19px; background: #0e1a1e; }
.summary-strip span { color: #678084; font: 9px var(--mono); letter-spacing: 1px; }
.summary-strip strong { color: #c9d8d4; font: 12px var(--mono); }
.modem-table { display: grid; }
.modem-row { display: grid; grid-template-columns: minmax(230px,1.5fr) minmax(120px,.65fr) minmax(145px,.75fr) minmax(110px,.65fr) auto; align-items: center; gap: 18px; min-height: 78px; padding: 15px 22px; border-bottom: 1px solid var(--border); }
.modem-row:last-child { border-bottom: 0; }
.modem-row:hover { background: rgba(115,228,208,.025); }
.modem-primary { min-width: 0; }
.modem-primary > div { display: flex; align-items: center; gap: 9px; font-weight: 550; }
.modem-primary > div span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modem-primary small, .modem-cell small { display: block; margin-top: 6px; color: #617b7e; font: 9px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modem-cell span { display: block; color: #a8bab7; font: 10px var(--mono); text-transform: uppercase; }
.connection-state { display: inline-flex; align-items: center; gap: 7px; color: var(--lime) !important; }
.connection-state.offline, .connection-state.reconnecting, .connection-state.probing { color: var(--amber) !important; }
.connection-state.disabled { color: #718184 !important; }
.edit-button { min-width: 66px; padding: 8px 10px; color: #a7c5bd; background: #162629; border: 1px solid #315056; border-radius: 3px; font: 9px var(--mono); letter-spacing: .6px; }
.edit-button:hover { color: var(--lime); border-color: #537b5a; }
.discovery-card { margin-top: 14px; }
.call-history-card { margin-top: 14px; }
.call-list { display: grid; }
.call-row { display: grid; grid-template-columns: minmax(180px,1.1fr) minmax(150px,.9fr) minmax(120px,.65fr) minmax(190px,1fr) auto; align-items: center; gap: 14px; min-height: 68px; padding: 12px 20px; border-bottom: 1px solid var(--border); }
.call-row:last-child { border-bottom: 0; }
.call-row.active { background: rgba(115,228,208,.045); box-shadow: inset 3px 0 0 var(--cyan); }
.call-row strong, .call-row b { display: block; color: #c8d8d4; font: 550 11px var(--mono); overflow-wrap: anywhere; }
.call-row small { display: block; margin-top: 5px; color: #668083; font: 9px/1.4 var(--mono); }
.call-state { color: var(--lime) !important; text-transform: uppercase; }
.call-state.ringing { color: var(--cyan) !important; }
.call-state.missed, .call-state.rejected { color: var(--red) !important; }
.call-actions { display: flex; justify-content: flex-end; gap: 6px; }
.call-actions button { padding: 6px 9px; font-size: 8px; }
.scanning-label { color: var(--cyan); background: #112522; border-color: #305b54; }
.discovered-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; padding: 18px 22px 0; }
.discovered-list > .empty-state { grid-column: 1 / -1; }
.discovered-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; width: 100%; padding: 14px; color: var(--text); background: #122126; border: 1px solid #2a4549; border-radius: 3px; text-align: left; }
.discovered-row:hover { background: #172c2b; border-color: #578565; }
.discovered-row strong { display: block; font: 550 11px var(--mono); }
.discovered-row small { display: block; margin-top: 5px; color: #708b8d; font: 9px var(--mono); }
.compatible-badge { flex: none; color: var(--lime); font: 9px var(--mono); letter-spacing: .6px; }
.add-modem-form { display: grid; grid-template-columns: minmax(200px,1.3fr) minmax(160px,1fr) 110px minmax(150px,.8fr) auto; align-items: end; gap: 9px; padding: 18px 22px 22px; }
.add-modem-form label { display: grid; gap: 8px; color: #789294; font-size: 9px; }

.messages-card { min-height: 610px; }
.tabs { display: flex; min-height: 62px; padding: 0 20px; border-bottom: 1px solid var(--border); }
.tab { position: relative; display: flex; align-items: center; padding: 0 18px; color: #6b8587; background: none; border: 0; text-decoration: none; font: 10px var(--mono); letter-spacing: 1px; }
.tab::after { content: ""; position: absolute; right: 18px; bottom: -1px; left: 18px; height: 2px; background: transparent; }
.tab.active { color: var(--lime); }
.tab.active::after { background: var(--lime); }
.tab span { display: inline-grid; min-width: 22px; height: 20px; margin-left: 8px; place-items: center; color: #829b98; background: #17272a; border: 1px solid #2b4246; }
.tab-panel { padding: 18px 20px 22px; }
.tab-panel.table-panel { padding: 0; }
.table-toolbar { display: none; }
.table-wrap { overflow-x: auto; }
.message-table { width: 100%; min-width: 820px; border-collapse: collapse; table-layout: fixed; }
.message-table th { height: 42px; padding: 0 12px; color: #5f797c; background: #0b171b; border-bottom: 1px solid var(--border); font: 400 9px var(--mono); letter-spacing: 1px; text-align: left; white-space: nowrap; }
.message-table th:nth-child(1) { width: 150px; }
.message-table th:nth-child(2) { width: 16%; }
.message-table th:nth-child(4) { width: 17%; }
.message-table th:nth-child(5) { width: 11%; }
.message-table th:nth-child(6) { width: 13%; }
.message-table th:first-child, .message-table td:first-child { padding-left: 22px; }
.message-table th:last-child, .message-table td:last-child { padding-right: 22px; }
.sort-button { display: inline-flex; align-items: center; gap: 7px; padding: 0; color: inherit; background: none; border: 0; font: inherit; letter-spacing: inherit; }
.sort-button:hover, th[aria-sort="ascending"] .sort-button, th[aria-sort="descending"] .sort-button { color: var(--lime); }
.sort-button i::after { content: "↕"; opacity: .45; }
th[aria-sort="ascending"] .sort-button i::after { content: "▲"; opacity: 1; font-size: 8px; }
th[aria-sort="descending"] .sort-button i::after { content: "▼"; opacity: 1; font-size: 8px; }
.message-table td { padding: 13px 12px; vertical-align: top; border-bottom: 1px solid var(--border); }
.message-table tbody tr:hover td { background: rgba(115,228,208,.025); }
.message-table tr.unread td { background: rgba(115,228,208,.045); }
.message-table tr.fresh td { animation: fresh-row 1.6s ease 2; }
@keyframes fresh-row { 35% { background-color: rgba(115,228,208,.12); } }
.message-table.is-loading tbody { opacity: .55; transition: opacity .15s; }
.message-table td small { display: block; margin-top: 5px; overflow: hidden; color: #617a7d; font: 9px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.cell-number { color: var(--cyan); font: 11px var(--mono); overflow-wrap: anywhere; }
.body-link { display: -webkit-box; width: 100%; padding: 0; overflow: hidden; color: #bfcecb; background: none; border: 0; font: 12px/1.5 var(--sans); text-align: left; overflow-wrap: anywhere; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.body-link:hover { color: var(--text); text-decoration: underline; text-decoration-color: #3f6e66; }
.sim-number { display: block; color: #cfe0db; font: 11px var(--mono); overflow-wrap: anywhere; }
.sim-number.muted { color: #5e7779; }
.cell-date time { color: #9fb2ae; font: 10px var(--mono); }
.row-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.row-buttons .message-action.retry, .row-buttons .retry-state { margin-left: 0; }
.danger-action { min-width: 24px; color: #d99a9a; border-color: #5a353a; font-size: 11px; line-height: 1; }
.danger-action:hover { color: var(--red); border-color: #8a4a52; }
.empty-row td { padding: 18px 22px; }
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 14px 22px 18px; color: #6c8587; font: 9px var(--mono); letter-spacing: .8px; }
.pager-size, .table-toolbar label { display: flex; align-items: center; gap: 8px; }
.pager select, .table-toolbar select { padding: 6px 8px; color: var(--text); background: #0b171b; border: 1px solid #294146; border-radius: 3px; font: 10px var(--mono); }
.pager-nav { display: flex; align-items: center; gap: 6px; }
.pager-nav button { min-width: 30px; padding: 6px 9px; color: #a7c5bd; background: #162629; border: 1px solid #315056; border-radius: 3px; font: 9px var(--mono); letter-spacing: .6px; }
.pager-nav button:hover:not(:disabled) { color: var(--lime); border-color: #537b5a; }
.pager-nav button:disabled { color: #43585b; border-color: #22383d; cursor: default; }
.pager-page { min-width: 86px; color: #a8bab7; text-align: center; }
.stack-form { display: grid; gap: 16px; padding: 22px; }
.stack-form label, .dialog-form label { display: grid; gap: 8px; color: #789294; font-size: 9px; }
.stack-form input, .stack-form select, .stack-form textarea, .dialog-form input, .dialog-form select, .add-modem-form input { width: 100%; min-width: 0; padding: 12px; color: var(--text); background: #0b171b; border: 1px solid #294146; border-radius: 3px; outline: none; font: 12px var(--mono); transition: border-color .15s; }
.stack-form input:focus, .stack-form select:focus, .stack-form textarea:focus, .dialog-form input:focus, .dialog-form select:focus, .add-modem-form input:focus { border-color: var(--lime); }
.stack-form textarea { height: 136px; resize: vertical; line-height: 1.55; }
.stack-form input::placeholder, .stack-form textarea::placeholder, .dialog-form input::placeholder, .add-modem-form input::placeholder { color: #496368; }
.character-meter { display: flex; align-items: center; gap: 12px; }
.character-meter > div { flex: 1; height: 3px; overflow: hidden; background: #26393c; }
.character-meter i { display: block; width: 0; height: 100%; background: var(--lime); transition: width .15s; }
.character-meter span { color: #70888b; font: 9px var(--mono); }
.segment-chip { padding: 3px 6px; color: var(--lime) !important; background: #162820; border: 1px solid #3b6041; letter-spacing: .5px; white-space: nowrap; }
.segment-chip.multi { color: var(--amber) !important; background: #211e15; border-color: #4d4230; }
.form-note { margin: 0; color: #627b7e; font: 9px/1.6 var(--mono); }
.form-error { margin: 0; padding: 10px 12px; color: #ffd1d1; background: #3a2227; border: 1px solid #a6535a; font: 10px/1.5 var(--mono); overflow-wrap: anywhere; }

.primary, .secondary, .danger { padding: 11px 14px; border: 1px solid transparent; border-radius: 3px; font: 550 10px var(--mono); letter-spacing: .7px; white-space: nowrap; }
.primary { color: #102016; background: var(--lime); border-color: var(--lime); }
.primary:hover { background: #d2ff9c; }
.primary:disabled { cursor: progress; opacity: .75; }
.primary[aria-busy="true"] { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.secondary { color: var(--lime); background: #182b23; border-color: #41644a; }
.secondary:hover { background: #243d2d; }
.danger { color: var(--red); background: #2a1c20; border-color: #653a40; }
.danger:hover { background: #40262b; }
.icon-btn { display: grid; width: 30px; height: 30px; padding: 0; place-items: center; color: var(--lime); background: #162724; border: 1px solid #33504d; font-size: 18px; }
.icon-btn:hover { background: #223b35; }
.row-actions { display: flex; align-items: center; gap: 6px; }
.row-delete { color: #d99a9a; background: #1e1a1c; border-color: #4a3036; }
.row-delete:hover { color: var(--red); background: #2a1c20; }
.sim-tag, .sim-missing { display: block; margin-top: 6px; padding: 0; color: #9fd8cc; background: none; border: 0; font: 9px var(--mono); letter-spacing: .5px; text-align: left; }
.sim-missing { color: var(--amber); }
.sim-missing:hover { text-decoration: underline; }

.routing-summary { margin-bottom: 14px; }
.settings-tabs { min-height: 64px; margin-bottom: 14px; background: #0e1a1e; border: 1px solid var(--border); border-radius: 5px; }
.settings-panel { padding: 0; }
.settings-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding: 18px 3px 22px; }
.settings-toolbar h2 { margin: 6px 0 5px; font-size: 22px; letter-spacing: -.6px; }
.settings-toolbar p { margin: 0; color: #789092; font-size: 11px; line-height: 1.55; }
.routing-layout { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(300px,.65fr); gap: 14px; }
.pool-list, .hook-list { display: grid; }
.pool-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.2fr) auto auto; align-items: center; gap: 18px; min-height: 86px; padding: 16px 22px; border-bottom: 1px solid var(--border); }
.pool-row:last-child { border-bottom: 0; }
.pool-name strong { display: block; overflow: hidden; font: 550 13px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.pool-name small, .pool-members small { display: block; margin-top: 7px; overflow: hidden; color: #627c7e; font: 9px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.pool-members span { display: block; color: #a5b8b4; font: 10px var(--mono); }
.pool-state { color: var(--lime); font: 9px var(--mono); text-align: right; }
.pool-state.paused { color: var(--amber); }
.route-guide { padding: 23px; }
.route-guide h2 { margin-bottom: 24px; }
.route-guide ol { display: grid; gap: 24px; margin: 0; padding: 0; list-style: none; counter-reset: route; }
.route-guide li { position: relative; display: grid; gap: 6px; padding-left: 42px; counter-increment: route; }
.route-guide li::before { content: "0" counter(route); position: absolute; left: 0; top: 0; color: var(--lime); font: 10px var(--mono); }
.route-guide li::after { content: ""; position: absolute; left: 25px; top: 5px; width: 8px; height: 1px; background: #4b6a64; }
.route-guide li b { font-size: 12px; }
.route-guide li span { color: #789092; font-size: 11px; line-height: 1.6; }

.integration-card { min-height: 650px; }
.integration-tabs { min-height: 68px; }
.integration-panel { padding: 24px; }
.integration-grid { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(300px,.65fr); gap: 24px; }
.content-head { min-height: 64px; padding: 0 0 16px; }
.hook-list { gap: 8px; }
.hook-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 13px 14px; background: #122126; border: 1px solid #294146; border-radius: 3px; }
.hook-row strong { display: block; max-width: 450px; overflow: hidden; font: 550 11px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.hook-row small { display: block; margin-top: 6px; color: #657f81; font: 9px var(--mono); }
.form-surface { align-self: start; padding: 22px; background: #101d21; border: 1px solid var(--border); }
.form-surface > div > p { margin: 9px 0 0; color: #71898b; font-size: 11px; line-height: 1.6; }
.subhead { margin: 22px 0 10px; padding-top: 18px; color: #607c7d; border-top: 1px solid var(--border); font: 9px var(--mono); letter-spacing: 1.2px; }
.docs-panel { max-width: 1060px; }
.docs-intro { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 8px 0 24px; }
.docs-intro p { max-width: 650px; margin: 10px 0 0; color: #789092; line-height: 1.65; }
code { color: #aeeedb; font-family: var(--mono); }
.security-badge { padding: 9px 11px; color: var(--cyan); background: #102522; border: 1px solid #2d544e; font: 9px var(--mono); letter-spacing: .9px; }
.code-block { overflow: hidden; margin-bottom: 22px; background: #071114; border: 1px solid #294146; border-radius: 4px; }
.code-block > div { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; color: #688184; background: #0d1a1e; border-bottom: 1px solid #263d42; font: 9px var(--mono); letter-spacing: 1px; }
.copy-code { padding: 4px 8px; color: var(--lime); background: #162820; border: 1px solid #385b40; font: 9px var(--mono); }
.code-block pre { overflow-x: auto; margin: 0; padding: 18px; color: #bbd0ca; font: 11px/1.8 var(--mono); }
.endpoint-table { overflow: hidden; border: 1px solid var(--border); border-radius: 4px; }
.endpoint-row { display: grid; grid-template-columns: 78px minmax(240px,.8fr) minmax(220px,1fr); align-items: center; gap: 14px; min-height: 54px; padding: 11px 15px; color: #849b9b; border-bottom: 1px solid var(--border); font-size: 11px; }
.endpoint-row:last-child { border-bottom: 0; }
.endpoint-row.heading { min-height: 42px; color: #5f797c; background: #0b171b; font: 9px var(--mono); letter-spacing: 1px; }
.method { width: 42px; padding: 5px 0; color: var(--cyan); background: #112522; border: 1px solid #2c5650; font: 8px var(--mono); text-align: center; }
.method.post { color: var(--lime); background: #17271f; border-color: #3b5c40; }
.method.delete { width: 50px; color: var(--red); background: #2a1c20; border-color: #5a353a; }

.health-strip { padding: 11px 12px; color: #9fc4af; background: #152721; border: 1px solid #335348; font: 10px/1.5 var(--mono); overflow-wrap: anywhere; }
.detail-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.detail-item { min-width: 0; padding: 10px 11px; background: #122126; border: 1px solid #294146; }
.detail-item small { display: block; margin-bottom: 5px; color: #708c89; font: 9px var(--mono); letter-spacing: 1px; }
.detail-item strong { display: block; color: #e0ebe7; font: 11px/1.4 var(--mono); overflow-wrap: anywhere; }
.detail-item strong.missing { color: #5e7779; }
.detail-item em { display: block; margin-top: 4px; color: #6f8a88; font: normal 9px/1.4 var(--mono); }
.route-member small { display: block; margin-top: 4px; color: #6f8a88; font-size: 9px; }
.sim-field { display: grid; gap: 7px; }
#messageDialog { width: min(95vw, 660px); }
.channel-dialog { width: min(95vw,760px); }
.call-settings { display: grid; gap: 13px; margin: 2px 0 0; padding: 16px; background: #0b171b; border: 1px solid #294146; }
.call-settings legend { padding: 0 8px; color: var(--cyan); font: 9px var(--mono); letter-spacing: 1px; }
.call-settings textarea { height: 74px; }
.call-choice-row .check { align-items: start; padding: 10px; background: #122126; border: 1px solid #294146; }
.call-choice-row .check:has(input:disabled), .call-settings > label:has(input:disabled), .call-settings > label:has(textarea:disabled) { opacity: .5; }
.call-dialog { width: min(94vw,440px); text-align: center; }
.call-dialog .dialog-head { text-align: left; }
.call-orbit { position: relative; display: grid; width: 88px; height: 88px; margin: 2px auto 0; place-items: center; }
.call-orbit::before, .call-orbit::after { content: ''; position: absolute; inset: 8px; border: 1px solid rgba(115,228,208,.42); border-radius: 50%; animation: call-pulse 1.6s ease-out infinite; }
.call-orbit::after { animation-delay: .55s; }
.call-orbit i { position: absolute; inset: 20px; background: #15342f; border: 1px solid #3e7066; border-radius: 50%; }
.call-orbit span { position: relative; color: var(--cyan); font-size: 25px; }
.call-party strong { display: block; color: #e4efeb; font: 550 22px var(--mono); overflow-wrap: anywhere; }
.call-party small { display: block; margin-top: 7px; color: #6f8a88; font: 9px var(--mono); }
.call-dialog .health-strip { text-align: center; }
@keyframes call-pulse { 0% { opacity: .85; transform: scale(.75); } 100% { opacity: 0; transform: scale(1.35); } }
.message-full { background: #0b171b; border: 1px solid #294146; }
.message-full-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; color: #6c8587; border-bottom: 1px solid #22383d; font: 9px var(--mono); letter-spacing: .8px; }
.message-full p { max-height: 260px; margin: 0; padding: 14px 12px; overflow: auto; color: #dbe8e4; font-size: 13px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.dialog-actions-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; margin-left: auto; }
.dialog-actions-end .message-action.retry, .dialog-actions-end .retry-state { margin-left: 0; }
.route-members { display: grid; gap: 7px; }
.route-member { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 11px; color: #a7bbb7; background: #122126; border: 1px solid #294146; font: 10px var(--mono); }
.route-member span:last-child { color: #6e8988; text-transform: uppercase; }

.footer { display: flex; justify-content: space-between; gap: 20px; margin-top: 34px; padding-top: 21px; color: #536e72; border-top: 1px solid var(--border); font-size: 9px; }
.toast-stack { position: fixed; right: 22px; bottom: 22px; z-index: 55; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; width: min(360px, calc(100vw - 32px)); pointer-events: none; }
.toast-stack[popover] { inset: auto 22px 22px auto; margin: 0; padding: 0; overflow: visible; color: inherit; background: transparent; border: 0; }
.toast { max-width: 100%; padding: 14px 18px; color: var(--lime); background: #1d372b; border: 1px solid #628c5e; box-shadow: 0 12px 35px #0008; opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; pointer-events: auto; font: 11px/1.5 var(--mono); overflow-wrap: anywhere; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast.error { color: #ffd1d1; background: #3a2227; border-color: #a6535a; }
.inbound-toast { width: 100%; color: var(--text); background: #102426; border-color: #3d7a70; }
.toast-kicker { display: flex; align-items: center; gap: 8px; color: var(--cyan); font: 9px var(--mono); letter-spacing: 1px; }
.toast-kicker i { width: 6px; height: 6px; background: var(--cyan); border-radius: 50%; box-shadow: 0 0 10px var(--cyan); }
.inbound-toast strong { display: block; margin-top: 8px; color: var(--cyan); font: 550 12px var(--mono); }
.inbound-toast p { display: -webkit-box; margin: 6px 0 0; overflow: hidden; color: #c6d6d2; font: 12px/1.5 var(--sans); -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.toast-actions { display: flex; align-items: center; gap: 6px; margin-top: 12px; }
.toast-actions button { padding: 5px 9px; color: #9fd8cc; background: #142f2e; border: 1px solid #2f5b55; border-radius: 2px; font: 8px var(--mono); letter-spacing: .6px; }
.toast-actions button:hover { color: var(--lime); border-color: #52765a; }
.toast-actions .toast-close { width: 24px; margin-left: auto; padding: 3px 0; font-size: 13px; line-height: 1; }
.login-overlay { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; background: rgba(4,9,12,.93); backdrop-filter: blur(8px); }
.login-overlay.hidden { display: none; }
.login-card { width: min(100%,410px); padding: 34px; background: linear-gradient(145deg,#13231e,#0c171a); border: 1px solid #345444; box-shadow: 0 25px 80px #0008; }
.login-mark { width: 58px; height: 58px; margin-bottom: 28px; }
.login-card h2 { margin: 12px 0 8px; font-size: 31px; letter-spacing: -1.2px; }
.login-card p { margin: 0 0 24px; color: #7e9697; font-size: 12px; line-height: 1.6; }
.login-card label { display: grid; gap: 8px; color: #9fb1ad; font: 10px var(--mono); letter-spacing: 1px; }
.login-card input { padding: 13px; color: white; background: #0b1518; border: 1px solid #34534c; outline: none; }
.login-card input:focus { border-color: var(--lime); }
.login-card button { width: 100%; margin-top: 19px; }
.login-card small { display: block; min-height: 12px; margin-top: 10px; color: var(--red); }

dialog { width: min(95vw,570px); padding: 0; color: var(--text); background: #0f1b1f; border: 1px solid #4a7157; box-shadow: 0 35px 100px #000b; }
dialog::backdrop { background: #050a0cbb; backdrop-filter: blur(4px); }
.dialog-form { display: grid; gap: 16px; padding: 25px; }
.dialog-form textarea { width: 100%; min-width: 0; height: 128px; padding: 12px; color: var(--text); background: #0b171b; border: 1px solid #294146; border-radius: 3px; outline: none; resize: vertical; font: 12px/1.55 var(--mono); transition: border-color .15s; }
.dialog-form textarea:focus { border-color: var(--lime); }
.dialog-form textarea::placeholder { color: #496368; }
.compose-context { padding: 11px 12px; background: #122126; border: 1px solid #294146; border-left: 2px solid var(--cyan); }
.compose-context small { display: block; color: #708c89; font: 9px var(--mono); letter-spacing: .8px; overflow-wrap: anywhere; }
.compose-context p { display: -webkit-box; margin: 7px 0 0; overflow: hidden; color: #bfcecb; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; white-space: pre-wrap; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.confirm-body { margin: 0; color: #a2b8b3; font-size: 13px; line-height: 1.6; }
.dialog-head { display: flex; align-items: start; justify-content: space-between; gap: 15px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.dialog-head h3 { margin: 7px 0 0; font-size: 21px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dialog-form .check { display: flex; align-items: center; gap: 9px; color: #a2b8b3; letter-spacing: 0; }
.dialog-form .check input { width: auto; accent-color: var(--lime); }
.dialog-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; }
.dialog-actions.end { justify-content: flex-end; }

@media (max-width: 1180px) {
  .shell { grid-template-columns: 74px minmax(0,1fr); }
  .rail { padding: 24px 10px; }
  .brand { justify-content: center; padding: 0; }
  .brand > span:last-child, .rail-label, .nav a span:nth-child(2), .nav-key, .rail-pulse span, .logout { display: none; }
  .nav { margin-top: 36px; }
  .nav a { display: flex; justify-content: center; padding: 11px; }
  .rail-bottom { display: flex; justify-content: center; padding: 0; }
  .main { padding: 0 25px 24px; }
  .dashboard-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .modem-row { grid-template-columns: minmax(210px,1.5fr) repeat(3,minmax(100px,.7fr)) auto; }
}

@media (max-width: 900px) {
  .metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .routing-layout, .integration-grid { grid-template-columns: 1fr; }
  .messages-card { min-height: auto; }
  .add-modem-form { grid-template-columns: 1fr 1fr; }
  .modem-row { grid-template-columns: minmax(200px,1.5fr) 1fr auto; }
  .modem-row .hide-tablet { display: none; }
  .call-row { grid-template-columns: minmax(160px,1fr) minmax(120px,.8fr) auto; }
  .call-row .call-meta, .call-row .call-automation { display: none; }
  .pool-row { grid-template-columns: minmax(0,1fr) minmax(0,1.2fr) auto; }
  .pool-state { display: none; }
}

@media (max-width: 760px) {
  .table-toolbar { display: flex; padding: 12px 14px 4px; color: #6c8587; font: 9px var(--mono); letter-spacing: 1px; }
  .message-table { min-width: 0; table-layout: auto; }
  .message-table thead { display: none; }
  .message-table, .message-table tbody, .message-table tr, .message-table td { display: block; width: 100%; }
  .message-table tr { padding: 12px 14px; border-bottom: 1px solid var(--border); }
  .message-table td, .message-table td:first-child, .message-table td:last-child { padding: 4px 0; border: 0; }
  .message-table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 3px; color: #5f797c; font: 8px var(--mono); letter-spacing: 1px; }
  .message-table tr.unread, .message-table tr.fresh { background: rgba(115,228,208,.045); }
  .message-table tr.unread td, .message-table tbody tr:hover td { background: none; }
  .row-buttons { justify-content: flex-start; margin-top: 8px; }
  .pager { padding: 12px 14px 16px; }
  .empty-row td, .empty-row td:first-child { padding: 14px; }
}

@media (max-width: 680px) {
  .shell { display: block; }
  .rail { position: sticky; display: flex; flex-direction: row; align-items: center; height: 60px; padding: 9px 13px; border-right: 0; border-bottom: 1px solid var(--border); }
  .brand-mark { width: 40px; height: 40px; font-size: 16px; }
  .nav { display: flex; flex: 1; justify-content: flex-end; gap: 2px; margin: 0; }
  .nav a { min-height: 40px; padding: 8px 9px; }
  .nav-icon { font-size: 17px; }
  .rail-bottom { display: none; }
  .main { padding: 0 14px 20px; }
  .topbar { top: 60px; height: 55px; }
  .time { display: none; }
  .topbar-right { gap: 10px; }
  .notify { position: static; }
  .notify-panel { position: fixed; top: 124px; right: 16px; left: 16px; width: auto; }
  .heading-actions { align-items: start; flex-direction: column; gap: 12px; }
  .toast-stack, .toast-stack[popover] { inset: auto 16px 16px 16px; width: auto; align-items: stretch; }
  .page-heading { align-items: start; min-height: 175px; padding: 36px 3px 28px; }
  .page-heading h1 { font-size: 38px; }
  .page-heading > .primary, .page-heading > .secondary, .heading-note { margin-top: 6px; }
  .live-orbit { display: none; }
  .metrics, .dashboard-grid, .summary-strip { grid-template-columns: 1fr; }
  .modem-monitor { grid-column: auto; }
  .metric { min-height: 110px; }
  .modem-row { grid-template-columns: minmax(0,1fr) auto; gap: 12px; }
  .modem-row .modem-cell { display: none; }
  .discovered-list { grid-template-columns: 1fr; padding: 14px 14px 0; }
  .add-modem-form { grid-template-columns: 1fr; padding: 14px; }
  .pool-row { grid-template-columns: minmax(0,1fr) auto; padding: 14px; }
  .pool-members, .pool-state { display: none; }
  .tabs { overflow-x: auto; padding: 0 8px; }
  .tab { flex: 0 0 auto; padding: 0 12px; }
  .tab-panel, .integration-panel { padding: 14px; }
  .docs-intro { align-items: start; flex-direction: column; }
  .endpoint-table { overflow-x: auto; }
  .endpoint-row { min-width: 650px; }
  .footer { flex-wrap: wrap; }
  .two-col, .detail-grid { grid-template-columns: 1fr; }
  .settings-toolbar { align-items: start; flex-direction: column; }
}

@media (max-width: 460px) {
  .nav a { padding: 8px 6px; }
  .top-chip { display: none; }
  .page-heading { display: grid; }
  .page-heading > .primary, .page-heading > .secondary { justify-self: start; }
  .summary-strip > div { min-height: 55px; }
  .card-head { padding: 17px 16px; }
  .compact-list .message-card, .monitor-row { padding-right: 16px; padding-left: 16px; }
  .compose-label { display: none; }
  .compose-trigger { padding: 9px 11px; }
  .dialog-form { padding: 18px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .message-card.fresh, .notify-item.fresh, .notify-badge.bump { animation: none; }
  .call-orbit::before, .call-orbit::after { animation: none; }
  .spinner { animation-duration: 1.6s; }
  .toast { transition: none; }
}

/* ---- Automation rules ---- */
.toolbar-actions { display: flex; flex: none; flex-wrap: wrap; gap: 10px; }
.rule-list { display: grid; }
.rule-row { display: grid; grid-template-columns: auto minmax(0,1.3fr) minmax(0,1fr) minmax(120px,.55fr) auto; align-items: center; gap: 18px; min-height: 80px; padding: 14px 22px; border-bottom: 1px solid var(--border); }
.rule-row:last-child { border-bottom: 0; }
.rule-row.paused .rule-main, .rule-row.paused .rule-action, .rule-row.paused .rule-stats { opacity: .55; }
.rule-main > div { display: flex; align-items: center; gap: 9px; min-width: 0; }
.rule-main strong { overflow: hidden; font-weight: 550; text-overflow: ellipsis; white-space: nowrap; }
.rule-main small, .rule-action small, .rule-stats small { display: block; margin-top: 6px; overflow: hidden; color: #627c7e; font: 9px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.rule-action span, .rule-stats span { display: block; overflow: hidden; color: #a8bab7; font: 10px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.rule-kind { flex: none; padding: 3px 6px; border: 1px solid; font: 8px var(--mono); letter-spacing: .6px; }
.rule-kind.forward { color: var(--cyan); background: #102522; border-color: #2d5650; }
.rule-kind.reply { color: var(--lime); background: #162820; border-color: #3b6041; }
.switch { position: relative; display: inline-block; flex: none; width: 38px; height: 22px; }
.switch input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; cursor: pointer; opacity: 0; }
.switch span { position: absolute; inset: 0; background: #1b2a2d; border: 1px solid #33494d; border-radius: 11px; transition: background .15s, border-color .15s; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; background: #6f8a8c; border-radius: 50%; transition: left .15s, background .15s; }
.switch input:checked + span { background: #22402c; border-color: #4c7a55; }
.switch input:checked + span::after { left: 19px; background: var(--lime); }
.switch input:focus-visible + span { outline: 2px solid var(--lime); outline-offset: 2px; }
#ruleDialog { width: min(95vw, 660px); }
.segmented { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border: 1px solid #294146; border-radius: 3px; }
.dialog-form .segmented label { position: relative; display: block; }
.segmented input { position: absolute; opacity: 0; }
.segmented span { display: block; padding: 10px; color: #8fa9a4; background: #0b171b; font: 10px var(--mono); letter-spacing: .8px; text-align: center; cursor: pointer; }
.segmented label + label span { border-left: 1px solid #294146; }
.segmented input:checked + span { color: #102016; background: var(--lime); font-weight: 550; }
.segmented input:focus-visible + span { outline: 2px solid var(--cyan); outline-offset: -2px; }
.rule-section { display: grid; gap: 12px; min-width: 0; margin: 0; padding: 14px; border: 1px solid #22383d; }
.rule-section textarea { height: 76px; }
.rule-section legend { padding: 0 6px; color: var(--lime); font: 9px var(--mono); letter-spacing: 1.1px; }
.placeholder-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.placeholder-chips span { color: #627b7e; font: 9px var(--mono); letter-spacing: 1px; }
.placeholder-chips button { padding: 4px 7px; color: #9fd8cc; background: #122126; border: 1px solid #294146; border-radius: 2px; font: 10px var(--mono); }
.placeholder-chips button:hover { color: var(--lime); border-color: #4c7a55; }
.rule-test { display: grid; gap: 10px; padding: 14px; background: #0b171b; border: 1px dashed #294146; }
.rule-test-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; }
.rule-test-head small { color: #6c8587; font: 9px var(--mono); }
.rule-test > button { justify-self: start; }
.rule-test-result { display: grid; gap: 6px; padding: 10px 12px; color: #bfcecb; background: #122126; border: 1px solid #294146; font: 11px/1.55 var(--mono); overflow-wrap: anywhere; }
.rule-test-result.yes { border-color: #4c7a55; }
.rule-test-result.yes strong { color: var(--lime); }
.rule-test-result.no { border-color: #66553a; }
.rule-test-result.no strong { color: var(--amber); }
.rule-test-result.error { color: #ffd1d1; background: #3a2227; border-color: #a6535a; }
.rule-test-result p { margin: 0; }
.rule-test-result blockquote { margin: 0; padding: 8px 10px; color: var(--text); background: #0b171b; border-left: 2px solid var(--cyan); font: 12px/1.5 var(--sans); white-space: pre-wrap; }
.rule-test-result small { color: #8fa6a8; font-size: 10px; }

/* ---- Route membership ---- */
.picker-field { display: grid; gap: 8px; }
.picker-label { color: #789294; font: 9px var(--mono); letter-spacing: 1.25px; }
.modem-picker { display: grid; gap: 6px; max-height: 280px; overflow: auto; }
.dialog-form .modem-pick { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; background: #122126; border: 1px solid #294146; cursor: pointer; letter-spacing: 0; }
.dialog-form .modem-pick input { width: auto; padding: 0; accent-color: var(--lime); }
.modem-pick:has(input:checked) { background: #15261e; border-color: #4c7a55; }
.modem-pick b { display: block; overflow: hidden; color: var(--text); font: 550 12px var(--sans); text-overflow: ellipsis; white-space: nowrap; }
.modem-pick small { display: block; margin-top: 3px; overflow: hidden; color: #6f8a88; font: 9px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.modem-pick em { color: #7f9a97; font: normal 8px var(--mono); letter-spacing: .5px; text-align: right; }
.dialog-form .modem-pick.locked { cursor: not-allowed; opacity: .65; }
.modem-pick.locked em { color: var(--amber); }

/* ---- Reports ---- */
.report-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 16px; margin-bottom: 14px; padding: 14px 16px; background: #0e1a1e; border: 1px solid var(--border); border-radius: 5px; }
.preset-group { display: flex; flex-wrap: wrap; overflow: hidden; border: 1px solid #294146; border-radius: 3px; }
.preset-group button { padding: 9px 12px; color: #8fa9a4; background: #0b171b; border: 0; border-right: 1px solid #294146; font: 10px var(--mono); letter-spacing: .7px; }
.preset-group button:last-child { border-right: 0; }
.preset-group button:hover:not([aria-checked="true"]) { color: var(--lime); background: #122126; }
.preset-group button[aria-checked="true"] { color: #102016; background: var(--lime); font-weight: 550; }
.custom-range { display: flex; flex-wrap: wrap; gap: 10px; }
.custom-range label, .filter-select, .audit-filters label { display: grid; gap: 6px; color: #789294; font: 9px var(--mono); letter-spacing: 1px; }
.report-filters input, .report-filters select, .audit-filters input, .audit-filters select { padding: 8px 10px; color: var(--text); background: #0b171b; border: 1px solid #294146; border-radius: 3px; outline: none; font: 11px var(--mono); color-scheme: dark; }
.report-filters input:focus, .report-filters select:focus, .audit-filters input:focus, .audit-filters select:focus { border-color: var(--lime); }
#reportRefresh { margin-left: auto; }
.report-panel { display: grid; gap: 18px; min-width: 0; padding: 18px 20px 22px; }
.tab-panel.report-panel[hidden] { display: none; }
.report-card.is-loading .report-panel { opacity: .55; transition: opacity .15s; }
.kpi-row { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 1px; overflow: hidden; background: var(--border); border: 1px solid var(--border); border-radius: 4px; }
.kpi { min-width: 0; padding: 16px 18px; background: #0d181c; }
.kpi-label { color: #6c8588; font: 9px var(--mono); letter-spacing: 1.1px; text-transform: uppercase; }
.kpi strong { display: block; margin-top: 8px; font: 550 26px/1.1 var(--sans); letter-spacing: -.4px; }
.kpi small { display: block; margin-top: 6px; color: #6c8587; font: 10px/1.4 var(--mono); }
.chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.chart-grid.three { grid-template-columns: repeat(3, minmax(0,1fr)); }
.chart-card {
  /* Categorical slots from the validated dark palette, checked against this surface. */
  --viz-surface: #0f1b1f; --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500;
  position: relative; min-width: 0; margin: 0; padding: 16px 18px 12px; background: var(--viz-surface); border: 1px solid var(--border); border-radius: 4px;
}
.chart-card figcaption { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: 8px 14px; }
.chart-card h4 { margin: 0; color: var(--text); font-size: 13px; font-weight: 550; }
.chart-card figcaption small { display: block; margin-top: 5px; color: #6f8a8c; font: 9px var(--mono); letter-spacing: .8px; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; color: #a8bab7; font: 10px var(--mono); }
.chart-legend i, .chart-tip-row i { display: inline-block; width: 14px; height: 2px; margin-right: 6px; border-radius: 1px; vertical-align: middle; }
.chart-plot { position: relative; margin-top: 10px; outline: none; touch-action: pan-y; }
.chart-plot:focus-visible { outline: 1px solid var(--lime); outline-offset: 4px; }
.chart-plot svg { display: block; overflow: visible; }
.chart-grid-line { stroke: #1b2e31; stroke-width: 1; }
.chart-axis-line { stroke: #2d474b; stroke-width: 1; }
.chart-tick { fill: #6f8a8c; font: 9px var(--mono); font-variant-numeric: tabular-nums; }
.chart-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chart-area { opacity: .1; }
.chart-dot { stroke: var(--viz-surface); stroke-width: 2; }
.chart-cross line { stroke: #4d6a6e; stroke-width: 1; }
.chart-tip { position: absolute; top: 44px; z-index: 3; min-width: 150px; padding: 9px 11px; background: #132428; border: 1px solid #2f4a4f; box-shadow: 0 10px 28px #0008; font: 10px var(--mono); pointer-events: none; }
.chart-tip-title { margin-bottom: 7px; color: #8fa6a8; letter-spacing: .5px; }
.chart-tip-row { display: flex; align-items: center; gap: 2px; margin-top: 4px; }
.chart-tip-row strong { min-width: 34px; color: var(--text); font-size: 12px; font-weight: 550; font-variant-numeric: tabular-nums; }
.chart-tip-row span { color: #9fb2ae; }
.report-section { min-width: 0; }
.report-section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.report-section-head h3 { margin: 5px 0 0; font-size: 15px; font-weight: 550; }
.report-columns { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); gap: 18px; }
.report-table { width: 100%; border-collapse: collapse; border: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.report-table th, .report-table td { padding: 9px 12px; color: #bfcecb; border-bottom: 1px solid var(--border); font: 11px var(--mono); text-align: right; white-space: nowrap; }
.report-table thead th { color: #5f797c; background: #0b171b; font-size: 9px; font-weight: 400; letter-spacing: 1px; }
.report-table th:first-child, .report-table td:first-child { text-align: left; }
.report-table tbody th { color: #d5e1dd; font-weight: 400; }
.report-table td.zero { color: #4a6164; }
.report-table tfoot th, .report-table tfoot td { color: var(--text); background: #0d181c; border-top: 1px solid var(--border-strong); font-weight: 550; }
.report-list { display: grid; gap: 6px; }
.report-item { display: grid; grid-template-columns: 70px minmax(110px,.6fr) minmax(0,1.6fr) auto auto; align-items: center; gap: 12px; padding: 10px 12px; background: #122025; border: 1px solid #263d42; }
.report-item-body { overflow: hidden; color: #bfcecb; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.report-item time { color: #6c8587; font: 9px var(--mono); }
.audit-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 14px; }
.audit-filters .grow { flex: 1 1 240px; }
.audit-filters #auditExport { align-self: end; padding: 8px 10px; }
.audit-table th, .audit-table td { text-align: left; }
.audit-table td { vertical-align: top; white-space: normal; }
.audit-table td small { display: block; margin-top: 4px; color: #627c7e; font: 9px var(--mono); }
.audit-table th:nth-child(1) { width: 130px; }
.audit-table th:nth-child(2) { width: 210px; }
.audit-table th:nth-child(3) { width: 150px; }
.audit-action { font-size: 10px; }
.audit-detail { color: #c6d6d2 !important; font-family: var(--sans) !important; font-size: 12px !important; line-height: 1.5; overflow-wrap: anywhere; }
.actor-badge { display: inline-block; padding: 3px 6px; border: 1px solid; font: 8px var(--mono); letter-spacing: .6px; }
.actor-badge.portal { color: var(--lime); background: #162820; border-color: #3b6041; }
.actor-badge.api { color: var(--cyan); background: #102522; border-color: #2d5650; }
.actor-badge.system { color: #a8bab7; background: #162226; border-color: #33474b; }
.actor-badge.anonymous { color: #ffb3b3; background: #2a1c20; border-color: #5a353a; }

@media (max-width: 1320px) {
  .kpi-row { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 1180px) {
  .chart-grid.three { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .rule-row { grid-template-columns: auto minmax(0,1.3fr) minmax(0,1fr) auto; }
  .rule-stats { display: none; }
}
@media (max-width: 900px) {
  .chart-grid, .chart-grid.three, .report-columns { grid-template-columns: 1fr; }
  .report-item { grid-template-columns: 70px minmax(0,1fr) auto; }
  .report-item-body, .report-item time { display: none; }
  #reportRefresh { margin-left: 0; }
}
@media (max-width: 680px) {
  .rule-row { grid-template-columns: auto minmax(0,1fr) auto; padding: 14px; }
  .rule-action { display: none; }
  .kpi-row { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .report-panel { padding: 14px; }
  .report-filters { padding: 12px; }
  .preset-group button { padding: 8px 9px; }
}

/* Cross-border forwarding matrix and number formats */
.automation-grid { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(300px,1fr); align-items: start; gap: 14px; margin-top: 14px; }
.matrix-wrap { overflow-x: auto; }
.forward-matrix { width: 100%; border-collapse: collapse; font: 10px var(--mono); }
.forward-matrix th, .forward-matrix td { padding: 10px 12px; text-align: left; vertical-align: top; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.forward-matrix th:last-child, .forward-matrix td:last-child { border-right: 0; }
.forward-matrix thead th { color: var(--cyan); background: #0b171b; font-weight: 550; letter-spacing: .8px; white-space: nowrap; }
.forward-matrix tbody th { color: var(--lime); background: #0d181c; font-weight: 550; letter-spacing: .8px; white-space: nowrap; }
.forward-matrix th small { display: block; margin-top: 4px; color: #627c7e; font-size: 9px; font-weight: 400; letter-spacing: 0; }
.forward-matrix .matrix-corner { color: #627c7e; font-weight: 400; font-size: 9px; }
.forward-matrix td.domestic { background: rgba(255,255,255,.015); }
.matrix-cell { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; min-width: 104px; }
.matrix-rule { max-width: 170px; padding: 5px 8px; overflow: hidden; color: #bfe9df; background: #102522; border: 1px solid #2d5650; border-radius: 2px; font: 10px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.matrix-rule:hover, .matrix-rule:focus-visible { color: var(--lime); border-color: #4c7a55; }
.matrix-rule.paused { color: #7d9496; background: transparent; border-style: dashed; }
.matrix-rule.warn { color: var(--amber); background: #2a2417; border-color: #66553a; }
.matrix-add { width: 26px; height: 26px; padding: 0; color: #6f8a8c; background: transparent; border: 1px dashed #33494d; border-radius: 2px; font: 13px/1 var(--mono); }
.matrix-add:hover, .matrix-add:focus-visible { color: var(--lime); border: 1px solid #4c7a55; }
.matrix-note { padding: 14px 22px 18px; }
.number-form .country-toggles { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.number-form .country-toggles legend { margin-bottom: 8px; padding: 0; }
.stack-form .country-toggle { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 12px; padding: 12px; color: #c9d8d4; background: #122126; border: 1px solid #294146; cursor: pointer; font: 12px var(--sans); letter-spacing: 0; }
.stack-form .country-toggle input, .stack-form .check input { width: auto; padding: 0; accent-color: var(--lime); }
.stack-form .country-toggle:has(input:checked) { background: #152a22; border-color: #4c7a55; }
.country-toggle b { margin-right: 6px; color: var(--lime); font: 550 12px var(--mono); }
.country-toggle small { display: block; margin-top: 4px; color: #627c7e; font: 9px var(--mono); }
.stack-form .check { display: flex; align-items: center; gap: 9px; color: #a2b8b3; font: 12px var(--sans); letter-spacing: 0; }
.form-actions { display: flex; justify-content: flex-end; }
.country-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dialog-form .country-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; color: #a8bab7; background: #122126; border: 1px solid #294146; border-radius: 2px; cursor: pointer; font: 11px var(--mono); letter-spacing: 0; }
.dialog-form .country-chip input { width: auto; padding: 0; accent-color: var(--lime); }
.dialog-form .country-chip:has(input:checked) { color: var(--lime); background: #152a22; border-color: #4c7a55; }
.dialog-form .country-chip.unavailable { color: var(--amber); border-color: #66553a; }
.rule-main small.rule-warning { color: var(--amber); }
.rule-row.has-warning { box-shadow: inset 2px 0 0 var(--amber); }
@media (max-width: 1100px) { .automation-grid { grid-template-columns: 1fr; } }

/* ---- MSG4wrd worker bridge ---- */
.msg4wrd-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1px; margin-bottom: 14px; overflow: hidden; background: var(--border); border: 1px solid var(--border); border-radius: 5px; }
.msg4wrd-metrics article { min-width: 0; padding: 17px 19px; background: #0e1a1e; }
.msg4wrd-metrics span, .msg4wrd-metrics small { display: block; color: #678084; font: 9px var(--mono); letter-spacing: 1px; }
.msg4wrd-metrics strong { display: block; margin: 8px 0 6px; color: var(--text); font: 550 25px/1 var(--sans); }
.msg4wrd-metrics article:last-child small:not(:empty) { color: var(--amber); }
.msg4wrd-card { min-width: 0; }
.msg4wrd-panel { min-width: 0; }
.tab-panel.msg4wrd-panel[hidden] { display: none; }
.msg4wrd-worker-head, .msg4wrd-worker-row { display: grid; grid-template-columns: minmax(210px,1.35fr) minmax(150px,.85fr) minmax(160px,.9fr) minmax(160px,1fr) minmax(150px,.85fr) minmax(132px,.6fr); align-items: center; gap: 16px; }
.msg4wrd-worker-head { padding: 11px 20px; color: #5f797c; background: #0b171b; border-bottom: 1px solid var(--border); font: 9px var(--mono); letter-spacing: 1px; }
.msg4wrd-worker-row { min-height: 104px; padding: 15px 20px; border-bottom: 1px solid var(--border); }
.msg4wrd-worker-row:last-child { border-bottom: 0; }
.msg4wrd-worker-row:hover { background: rgba(115,228,208,.025); }
.msg4wrd-worker-row > div { min-width: 0; }
.msg4wrd-cell-label { display: none; margin-bottom: 7px; color: #587276; font: 8px var(--mono); letter-spacing: .9px; }
.msg4wrd-worker-row strong, .msg4wrd-worker-row b { display: block; overflow-wrap: anywhere; color: #d5e1dd; font: 550 12px/1.4 var(--sans); }
.msg4wrd-worker-row small, .msg4wrd-worker-main span { display: block; margin-top: 5px; overflow-wrap: anywhere; color: #6f8a8c; font: 9px/1.45 var(--mono); }
.msg4wrd-worker-main span { color: var(--cyan); }
.msg4wrd-worker-row .connection-state { display: inline-block; }
.connection-state.paused { color: #8da0a0; background: #182326; border-color: #34484b; }
.msg4wrd-actions { display: grid; align-content: center; gap: 6px; }
.msg4wrd-actions .edit-button { width: 100%; min-height: 34px; text-align: left; }
.msg4wrd-actions .edit-button.accent { color: var(--lime); background: #182b23; border-color: #41644a; }
.msg4wrd-actions .edit-button.accent:hover { background: #243d2d; }
.msg4wrd-actions .edit-button:disabled { cursor: not-allowed; opacity: .42; }
.msg4wrd-traffic b { color: var(--lime); font-family: var(--mono); }
.msg4wrd-card .content-head { padding: 19px 20px; border-bottom: 1px solid var(--border); }
.msg4wrd-card .content-head p { margin: 5px 0 0; color: #70888a; font-size: 11px; }
.msg4wrd-job-head, .msg4wrd-job-row { display: grid; grid-template-columns: minmax(120px,.95fr) minmax(120px,.9fr) minmax(150px,1.25fr) minmax(78px,.55fr) minmax(130px,1fr) minmax(130px,.85fr); align-items: center; gap: 12px; }
.msg4wrd-job-head { padding: 10px 20px; color: #5f797c; background: #0b171b; border-bottom: 1px solid var(--border); font: 9px var(--mono); letter-spacing: 1px; }
.msg4wrd-job-row { min-height: 76px; padding: 12px 20px; border-bottom: 1px solid var(--border); }
.msg4wrd-job-row:last-child { border-bottom: 0; }
.msg4wrd-job-row > div { min-width: 0; }
.msg4wrd-job-row strong, .msg4wrd-job-row b { display: block; overflow: hidden; color: #cbdad6; font: 550 11px/1.4 var(--sans); text-overflow: ellipsis; white-space: nowrap; }
.msg4wrd-job-row small { display: block; margin-top: 4px; overflow: hidden; color: #647d80; font: 9px/1.4 var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.msg4wrd-job-action { display: grid; align-content: center; }
.msg4wrd-job-action .secondary { width: 100%; min-height: 36px; }
.msg4wrd-auto-state { display: inline-flex; width: max-content; padding: 5px 7px; color: #71898b; background: #142125; border: 1px solid #2d4145; font: 8px var(--mono); letter-spacing: .7px; }
.job-state, .direction-chip { display: inline-block; padding: 3px 6px; color: #a8bab7; background: #172529; border: 1px solid #34494d; font: 8px var(--mono); letter-spacing: .7px; }
.job-state.delivered, .direction-chip.inbound { color: var(--lime); background: #15271d; border-color: #3b6041; }
.job-state.pending, .direction-chip.status { color: var(--amber); background: #2a2417; border-color: #66553a; }
.job-state.dead { color: #ffb3b3; background: #2a1c20; border-color: #66383e; }
.direction-chip.outbound { color: var(--cyan); background: #102522; border-color: #2d5650; }
.msg4wrd-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 11px 14px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.msg4wrd-filters label { display: grid; gap: 6px; color: #789294; font: 9px var(--mono); letter-spacing: 1px; }
.msg4wrd-filters .grow { flex: 1 1 240px; }
.msg4wrd-filters input, .msg4wrd-filters select { padding: 8px 10px; color: var(--text); background: #0b171b; border: 1px solid #294146; border-radius: 3px; outline: none; font: 11px var(--mono); color-scheme: dark; }
.msg4wrd-filters input:focus, .msg4wrd-filters select:focus { border-color: var(--lime); }
.msg4wrd-filters > button { min-height: 36px; }
.msg4wrd-history-table th, .msg4wrd-history-table td { text-align: left; vertical-align: top; white-space: normal; }
.msg4wrd-history-table td small { display: block; margin-top: 4px; color: #637d80; font: 9px var(--mono); }
.msg4wrd-history-table code { color: #c9d8d4; font-size: 10px; }
.msg4wrd-history-table time { color: #8da2a1; font-size: 10px; }
.msg4wrd-history-detail { min-width: 230px; color: #b8c9c5 !important; font-family: var(--sans) !important; line-height: 1.5; overflow-wrap: anywhere; }
.msg4wrd-history-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 20px; color: #6f888a; border-top: 1px solid var(--border); font: 9px var(--mono); letter-spacing: .8px; }
#msg4wrdWorkerDialog { width: min(96vw,1040px); max-height: 94vh; overflow: hidden; }
.msg4wrd-worker-form { display: block; max-height: 94vh; padding: 0; overflow: hidden; }
.msg4wrd-wizard-head { min-height: 74px; margin: 0; padding: 18px 20px; background: #101e22; }
.msg4wrd-wizard-head h3 { margin-top: 5px; }
.msg4wrd-wizard-head p { margin: 5px 0 0; color: #6f898b; font: 10px var(--mono); }
.msg4wrd-draft { display: flex; align-items: center; gap: 14px; color: #5e797c; font: 9px var(--mono); letter-spacing: 1px; }
.msg4wrd-wizard-grid { display: grid; grid-template-columns: 205px minmax(0,1fr); min-height: 610px; }
.msg4wrd-step-rail { display: flex; flex-direction: column; gap: 4px; padding: 17px 12px; background: #0a1519; border-right: 1px solid var(--border); }
.msg4wrd-step { display: grid; grid-template-columns: 31px minmax(0,1fr); gap: 2px 10px; align-items: center; padding: 10px; color: #668083; background: transparent; border: 1px solid transparent; text-align: left; }
.msg4wrd-step:hover { color: #a9bfba; background: #102024; border-color: #20373b; }
.msg4wrd-step > span { grid-row: 1 / 3; display: grid; place-items: center; width: 29px; height: 29px; color: #718b8b; background: #111f23; border: 1px solid #2a4246; font: 9px var(--mono); }
.msg4wrd-step b { font: 550 10px var(--mono); letter-spacing: .8px; }
.msg4wrd-step small { color: #536e72; font: 8px var(--mono); }
.msg4wrd-step.active { color: var(--lime); background: #14241e; border-color: #385a42; }
.msg4wrd-step.active > span, .msg4wrd-step.done > span { color: #102016; background: var(--lime); border-color: var(--lime); }
.msg4wrd-step.done b { color: #aac1bc; }
.msg4wrd-rail-note { margin: auto 8px 3px; color: #4f696c; font: 8px/1.6 var(--mono); letter-spacing: .6px; }
.msg4wrd-wizard-stage { display: flex; min-width: 0; max-height: calc(94vh - 74px); flex-direction: column; overflow: hidden; }
.msg4wrd-wizard-panel { display: grid; flex: 1 1 auto; grid-auto-rows: max-content; align-content: start; gap: 14px; min-height: 0; padding: 24px 27px 18px; overflow-y: auto; }
.msg4wrd-wizard-panel[hidden] { display: none; }
.msg4wrd-step-heading { margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid #21373c; }
.msg4wrd-step-heading > span { color: var(--cyan); font: 8px var(--mono); letter-spacing: 1.2px; }
.msg4wrd-step-heading h4 { margin: 6px 0 4px; color: #deebe7; font: 550 19px var(--sans); }
.msg4wrd-step-heading p { margin: 0; color: #6f898b; font: 11px/1.5 var(--sans); }
.msg4wrd-uid-box { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; gap: 11px; align-items: center; padding: 13px; background: #11231f; border: 1px solid #3a5b48; }
.msg4wrd-uid-mark { display: grid; place-items: center; width: 32px; height: 32px; color: var(--lime); background: #162d25; border: 1px solid #42644c; font: 15px var(--mono); }
.msg4wrd-uid-box small { display: block; color: #6c8884; font: 8px var(--mono); letter-spacing: .8px; }
.msg4wrd-uid-box small b { color: var(--lime); font-weight: 550; }
.msg4wrd-uid-box code { display: block; margin-top: 5px; color: #d7e6e2; font: 11px var(--mono); overflow-wrap: anywhere; }
.msg4wrd-uid-box p { grid-column: 2 / -1; margin: 0; color: #607b79; font: 9px/1.5 var(--mono); }
.msg4wrd-advanced { background: #0c181c; border: 1px solid #294146; }
.msg4wrd-advanced summary { padding: 11px 12px; color: #7d9996; cursor: pointer; font: 9px var(--mono); letter-spacing: .8px; }
.msg4wrd-advanced[open] summary { border-bottom: 1px solid #294146; }
.msg4wrd-advanced > .two-col { padding: 12px; }
.msg4wrd-choice-fieldset, .msg4wrd-target-card { min-width: 0; margin: 0; padding: 14px; background: #0d191d; border: 1px solid #294146; }
.msg4wrd-choice-fieldset legend, .msg4wrd-target-card legend { padding: 0 6px; color: #789294; font: 8px var(--mono); letter-spacing: 1px; }
.msg4wrd-target-card legend b { margin-right: 7px; color: var(--lime); }
.msg4wrd-country-choice { grid-template-columns: repeat(3,1fr); }
.msg4wrd-target-stack { display: grid; grid-template-columns: minmax(0,1fr); gap: 11px; margin-top: 13px; }
.msg4wrd-target-stack.dual { grid-template-columns: repeat(2,minmax(0,1fr)); }
.msg4wrd-target-card { display: grid; grid-template-columns: minmax(0,1fr); align-content: start; gap: 13px; }
.msg4wrd-target-card > .msg4wrd-target-choice { align-self: start; }
.msg4wrd-target-choice { grid-template-columns: 1fr 1.35fr; }
.msg4wrd-target-card > div[data-msg4wrd-target-fields] { display: grid; gap: 9px; }
.msg4wrd-target-card > div[data-msg4wrd-target-fields][hidden] { display: none; }
.msg4wrd-info-box { margin: 13px 0 0; padding: 11px 12px; color: #8fa8a3; background: #102024; border-left: 2px solid var(--cyan); font: 10px/1.5 var(--sans); }
.msg4wrd-available-bar { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; padding: 10px 12px; background: #0b171b; border: 1px solid #294146; }
.msg4wrd-available-bar span { color: var(--lime); font: 9px var(--mono); letter-spacing: .7px; }
.msg4wrd-available-bar small { color: #668083; font: 8px var(--mono); }
.msg4wrd-binding-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.msg4wrd-binding { display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-rows: auto auto; align-items: center; gap: 11px 12px; min-width: 0; padding: 13px; background: #122126; border: 1px solid #294146; }
.msg4wrd-binding:has(input:checked) { background: #152a22; border-color: #4c7a55; }
.msg4wrd-binding > label { grid-column: 1; grid-row: 1; display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 10px; min-width: 0; color: var(--text); font-family: var(--sans); letter-spacing: 0; cursor: pointer; }
.msg4wrd-binding input { width: auto; padding: 0; accent-color: var(--lime); }
.msg4wrd-binding b { display: block; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.msg4wrd-binding small { display: block; margin-top: 3px; overflow: hidden; color: #6f8a88; font: 9px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.msg4wrd-binding select { grid-column: 1 / -1; grid-row: 2; width: 100%; padding: 8px; color: var(--text); background: #0b171b; border: 1px solid #294146; font: 9px var(--mono); }
.msg4wrd-modem-online { grid-column: 2; grid-row: 1; color: var(--lime); font: 8px var(--mono); letter-spacing: .6px; white-space: nowrap; }
.msg4wrd-modem-online::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 6px; background: currentColor; border-radius: 50%; }
.msg4wrd-modem-online.offline { color: #778b8b; }
.msg4wrd-review-grid { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(250px,.65fr); gap: 10px; }
.msg4wrd-review-box { min-width: 0; padding: 13px; background: #0d191d; border: 1px solid #294146; }
.msg4wrd-review-box.wide { grid-column: 1 / -1; }
.msg4wrd-review-box header { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid #23393d; }
.msg4wrd-review-box header b { color: #9bb0ac; font: 9px var(--mono); letter-spacing: .8px; }
.msg4wrd-review-box header button { color: var(--cyan); background: transparent; border: 0; font: 8px var(--mono); letter-spacing: .7px; }
.msg4wrd-review-box dl { display: grid; gap: 8px; margin: 11px 0 0; }
.msg4wrd-review-box dl > div { display: grid; grid-template-columns: 105px minmax(0,1fr); gap: 10px; font: 10px/1.4 var(--mono); }
.msg4wrd-review-box dt { color: #668083; }
.msg4wrd-review-box dd { margin: 0; color: #c5d5d1; overflow-wrap: anywhere; }
.msg4wrd-review-box.identity dl { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 0; }
.msg4wrd-review-box.identity dl > div { display: block; min-width: 0; padding: 0 12px; border-left: 1px solid #23393d; }
.msg4wrd-review-box.identity dl > div:first-child { padding-left: 0; border-left: 0; }
.msg4wrd-review-box.identity dl > div:last-child { padding-right: 0; }
.msg4wrd-review-box.identity dd { margin-top: 6px; }
.msg4wrd-summary-route { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; gap: 11px; align-items: center; padding: 12px 0; color: #c5d5d1; border-bottom: 1px solid #23393d; font: 10px var(--mono); }
.msg4wrd-summary-route:last-child { border-bottom: 0; }
.msg4wrd-summary-route > b { color: var(--lime); }
.msg4wrd-summary-route i { display: none; }
.msg4wrd-summary-route small { display: block; margin-top: 3px; color: #668083; font-size: 8px; }
.msg4wrd-summary-route > span:last-child { padding: 5px 7px; color: #9fc4b8; background: #132820; border: 1px solid #3f6648; font-size: 8px; letter-spacing: .4px; white-space: nowrap; }
.msg4wrd-ready-box { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 11px; margin-top: 11px; padding: 12px; color: #9fc4b8; background: #132820; border: 1px solid #3f6648; font: 10px/1.5 var(--sans); }
.msg4wrd-ready-box b { color: var(--lime); font: 9px var(--mono); letter-spacing: .7px; }
.msg4wrd-wizard-error { margin: 0 20px 8px; }
.msg4wrd-wizard-actions { flex: 0 0 auto; align-items: center; margin: auto 0 0; padding: 13px 18px; background: #0b171b; border-top: 1px solid var(--border); }
.msg4wrd-step-progress { color: #597477; font: 8px var(--mono); letter-spacing: .8px; }

@media (max-width: 1320px) {
  .msg4wrd-worker-head { display: none; }
  .msg4wrd-worker-row { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .msg4wrd-worker-row .msg4wrd-cell-label { display: block; }
  .msg4wrd-actions { grid-column: 1 / -1; grid-template-columns: repeat(3,minmax(0,1fr)); }
  .msg4wrd-actions .edit-button { text-align: center; }
}
@media (max-width: 1100px) {
  .msg4wrd-job-head { display: none; }
  .msg4wrd-job-row { grid-template-columns: repeat(3,minmax(0,1fr)); align-items: start; gap: 17px 14px; padding: 16px 20px; }
  .msg4wrd-job-row .msg4wrd-cell-label { display: block; }
}
@media (max-width: 900px) {
  .msg4wrd-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .msg4wrd-worker-row { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .msg4wrd-actions { grid-column: 1 / -1; }
  .msg4wrd-job-row { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .msg4wrd-job-action { grid-column: 1 / -1; }
  .msg4wrd-job-action .msg4wrd-cell-label { display: none; }
  .msg4wrd-history-table, .msg4wrd-history-table tbody { display: block; width: 100%; }
  .msg4wrd-history-table thead { display: none; }
  .msg4wrd-panel .table-wrap:has(.msg4wrd-history-table) { overflow-x: hidden; }
  .msg4wrd-history-table tbody { display: grid; gap: 9px; padding: 12px; }
  .msg4wrd-history-table tbody tr { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px 16px; padding: 13px; background: #101d21; border: 1px solid #294146; }
  .msg4wrd-history-table tbody td { display: grid; min-width: 0; padding: 0; color: #b8c9c5; border: 0; text-align: left; white-space: normal; }
  .msg4wrd-history-table tbody td::before { content: attr(data-label); margin-bottom: 6px; color: #587276; font: 8px var(--mono); letter-spacing: .9px; }
  .msg4wrd-history-table tbody td:nth-child(4), .msg4wrd-history-table tbody td:nth-child(6) { grid-column: 1 / -1; padding-top: 10px; border-top: 1px solid #23393d; }
  .msg4wrd-history-detail { min-width: 0; }
  .msg4wrd-history-table .empty-row { display: block; }
  .msg4wrd-history-table .empty-row td { display: block; }
  .msg4wrd-history-table .empty-row td::before { display: none; }
  #msg4wrdWorkerDialog { width: min(97vw,760px); }
  .msg4wrd-wizard-grid { grid-template-columns: 1fr; }
  .msg4wrd-step-rail { display: grid; grid-template-columns: repeat(4,1fr); padding: 8px; border-right: 0; border-bottom: 1px solid var(--border); }
  .msg4wrd-step { grid-template-columns: 27px minmax(0,1fr); padding: 7px; }
  .msg4wrd-step > span { width: 25px; height: 25px; }
  .msg4wrd-step small, .msg4wrd-rail-note { display: none; }
  .msg4wrd-wizard-stage { max-height: calc(94vh - 132px); }
  .msg4wrd-target-stack.dual, .msg4wrd-binding-list, .msg4wrd-review-grid { grid-template-columns: 1fr; }
  .msg4wrd-review-box.wide { grid-column: auto; }
  .msg4wrd-review-box.identity dl { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px 0; }
  .msg4wrd-review-box.identity dl > div:nth-child(odd) { padding-left: 0; border-left: 0; }
}
@media (max-width: 600px) {
  .msg4wrd-worker-row { grid-template-columns: 1fr; gap: 13px; }
  .msg4wrd-job-row { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px 12px; }
  .msg4wrd-actions { grid-template-columns: 1fr; }
  .msg4wrd-card .content-head { display: grid; grid-template-columns: 1fr; gap: 13px; align-items: start; }
  .msg4wrd-card .content-head > button { width: 100%; }
  .msg4wrd-job-action { grid-column: 1 / -1; }
  .msg4wrd-history-table tbody { padding: 10px; }
  #msg4wrdWorkerDialog { width: 100vw; max-width: none; max-height: 100dvh; border-right: 0; border-left: 0; }
  .msg4wrd-worker-form { max-height: 100dvh; }
  .msg4wrd-wizard-head { min-height: 68px; padding: 14px; }
  .msg4wrd-wizard-head p, .msg4wrd-draft > span { display: none; }
  .msg4wrd-step-rail { gap: 3px; }
  .msg4wrd-step { display: flex; justify-content: center; padding: 6px; }
  .msg4wrd-step b { display: none; }
  .msg4wrd-wizard-stage { max-height: calc(100dvh - 119px); }
  .msg4wrd-wizard-panel { padding: 17px 14px 12px; }
  .msg4wrd-country-choice { grid-template-columns: 1fr; }
  .msg4wrd-country-choice label + label span { border-top: 1px solid #294146; border-left: 0; }
  .msg4wrd-target-choice { grid-template-columns: 1fr; }
  .msg4wrd-target-choice label + label span { border-top: 1px solid #294146; border-left: 0; }
  .msg4wrd-uid-box { grid-template-columns: 31px minmax(0,1fr); }
  .msg4wrd-uid-box > button { grid-column: 2; width: max-content; }
  .msg4wrd-uid-box p { grid-column: 1 / -1; }
  .msg4wrd-binding { grid-template-columns: 1fr; }
  .msg4wrd-binding > label, .msg4wrd-modem-online, .msg4wrd-binding select { grid-column: 1; }
  .msg4wrd-modem-online { grid-row: 2; padding-left: 27px; }
  .msg4wrd-binding select { grid-row: 3; }
  .msg4wrd-binding select { width: 100%; }
  .msg4wrd-review-grid { grid-template-columns: 1fr; }
  .msg4wrd-review-box.wide { grid-column: auto; }
  .msg4wrd-review-box.identity dl { grid-template-columns: 1fr; gap: 9px; }
  .msg4wrd-review-box.identity dl > div { padding: 0 0 9px; border-bottom: 1px solid #23393d; border-left: 0; }
  .msg4wrd-review-box.identity dl > div:last-child { padding-bottom: 0; border-bottom: 0; }
  .msg4wrd-summary-route { grid-template-columns: 30px minmax(0,1fr); }
  .msg4wrd-summary-route i, .msg4wrd-summary-route > span:last-child { display: none; }
  .msg4wrd-ready-box { grid-template-columns: 1fr; }
  .msg4wrd-step-progress { display: none; }
  .msg4wrd-wizard-actions { padding: 11px; }
  .msg4wrd-wizard-actions > .danger { order: 2; }
  .msg4wrd-wizard-actions .dialog-actions-end { width: 100%; }
  .msg4wrd-wizard-actions .dialog-actions-end button { flex: 1; }
  .msg4wrd-filters > label, .msg4wrd-filters > button { width: 100%; }
}

/* ---- Live outbound flow ---- */
.dispatch-flow-card { margin-top: 14px; }
.dispatch-flow-state { flex: none; padding: 6px 9px; color: #71898b; background: #142125; border: 1px solid #2d4145; font: 9px var(--mono); letter-spacing: .8px; }
.dispatch-flow-state.active { color: var(--lime); background: #162820; border-color: #3b6041; }
.dispatch-flow { display: grid; grid-template-columns: minmax(155px,1fr) minmax(74px,.45fr) minmax(210px,1.3fr) minmax(74px,.45fr) minmax(155px,1fr); grid-template-rows: auto auto; align-items: center; gap: 13px 16px; padding: 22px; }
.dispatch-node { display: flex; min-width: 0; align-items: center; gap: 13px; min-height: 72px; padding: 14px; background: #0c181c; border: 1px solid #294146; }
.dispatch-node-icon { display: grid; flex: none; place-items: center; width: 36px; height: 36px; color: #789294; background: #132328; border: 1px solid #30494e; font: 17px var(--mono); }
.dispatch-node small, .dispatch-retry small { display: block; color: #627d80; font: 8px var(--mono); letter-spacing: 1px; }
.dispatch-node strong, .dispatch-retry strong { display: block; margin-top: 6px; overflow: hidden; color: #d5e1dd; font: 550 12px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.dispatch-node.complete .dispatch-node-icon { color: var(--lime); background: #162820; border-color: #3b6041; }
.dispatch-connector { position: relative; display: grid; gap: 7px; min-width: 0; text-align: center; }
.dispatch-connector i { position: relative; display: block; height: 1px; overflow: visible; background: #345157; }
.dispatch-connector i::before { content: ""; position: absolute; top: -3px; right: -1px; width: 7px; height: 7px; border-top: 1px solid #527379; border-right: 1px solid #527379; transform: rotate(45deg); }
.dispatch-connector i::after { content: ""; position: absolute; top: -3px; left: 0; width: 7px; height: 7px; background: var(--cyan); border-radius: 50%; box-shadow: 0 0 11px rgba(115,228,208,.8); opacity: 0; }
.dispatch-connector span { color: #4f696d; font: 7px var(--mono); letter-spacing: .8px; }
.dispatch-flow.active .dispatch-node.queue, .dispatch-flow.active .dispatch-node.route { border-color: #3b5d58; box-shadow: inset 0 0 0 1px rgba(115,228,208,.035); }
.dispatch-flow.active .dispatch-node.queue .dispatch-node-icon, .dispatch-flow.active .dispatch-node.route .dispatch-node-icon { color: var(--cyan); border-color: #397066; }
.dispatch-flow.active .dispatch-connector i::after { opacity: 1; animation: dispatch-travel 1.7s linear infinite; }
.dispatch-retry { grid-column: 3; grid-row: 2; display: grid; grid-template-columns: 31px minmax(0,1fr); gap: 2px 10px; align-items: center; padding: 10px 12px; color: var(--amber); background: #241f14; border: 1px solid #66553a; }
.dispatch-retry-arrow { grid-row: 1 / 3; display: grid; place-items: center; width: 29px; height: 29px; color: var(--amber); border: 1px solid #66553a; font: 16px var(--mono); }
.dispatch-retry strong { color: #f1d59c; }
.dispatch-retry > span:last-child { grid-column: 2; color: #927f5d; font: 8px var(--mono); }
.dispatch-flow.retrying .dispatch-retry { animation: retry-glow 1.7s ease-in-out infinite; }
@keyframes dispatch-travel { from { left: 0; } to { left: calc(100% - 7px); } }
@keyframes dispatch-travel-down { from { top: 0; } to { top: calc(100% - 7px); } }
@keyframes retry-glow { 50% { border-color: #aa8950; box-shadow: 0 0 18px rgba(247,197,109,.08); } }

/* ---- Focused automation workspace and rule wizard ---- */
.automation-view-tabs { display: flex; gap: 1px; margin-bottom: 14px; overflow-x: auto; background: var(--border); border: 1px solid var(--border); }
.automation-view-tabs button { flex: 0 0 auto; min-height: 42px; padding: 9px 16px; color: #789094; background: #0c171b; border: 0; font: 9px var(--mono); letter-spacing: 1px; }
.automation-view-tabs button:hover { color: var(--text); background: #122126; }
.automation-view-tabs button.active { color: var(--lime); background: #182920; box-shadow: inset 0 -2px 0 var(--lime); }
.automation-view[hidden] { display: none; }
.automation-tool-card { max-width: 980px; margin: 0 auto; }
.automation-view .summary-strip { margin-bottom: 14px; }
#ruleDialog { width: min(96vw, 960px); max-height: 94vh; overflow: hidden; }
.rule-wizard-form { display: block; max-height: 94vh; padding: 0; overflow: hidden; }
.rule-wizard-head { min-height: 74px; margin: 0; padding: 18px 20px; background: #101e22; }
.rule-wizard-head h3 { margin-top: 5px; }
.rule-wizard-head p { margin: 5px 0 0; color: #6f898b; font: 10px var(--mono); }
.rule-wizard-grid { display: grid; grid-template-columns: 190px minmax(0,1fr); min-height: 590px; }
.rule-step-rail { display: flex; flex-direction: column; gap: 4px; padding: 17px 12px; background: #0a1519; border-right: 1px solid var(--border); }
.rule-step { display: grid; grid-template-columns: 31px minmax(0,1fr); gap: 2px 10px; align-items: center; padding: 10px; color: #668083; background: transparent; border: 1px solid transparent; text-align: left; }
.rule-step:hover { color: #a9bfba; background: #102024; border-color: #20373b; }
.rule-step > span { grid-row: 1 / 3; display: grid; place-items: center; width: 29px; height: 29px; color: #718b8b; background: #111f23; border: 1px solid #2a4246; font: 9px var(--mono); }
.rule-step b { font: 550 10px var(--mono); letter-spacing: .8px; }
.rule-step small { color: #536e72; font: 8px var(--mono); }
.rule-step.active { color: var(--lime); background: #14241e; border-color: #385a42; }
.rule-step.active > span, .rule-step.done > span { color: #102016; background: var(--lime); border-color: var(--lime); }
.rule-step.done b { color: #aac1bc; }
.rule-rail-note { margin: auto 8px 3px; color: #4f696c; font: 8px/1.6 var(--mono); letter-spacing: .6px; }
.rule-wizard-stage { display: flex; min-width: 0; max-height: calc(94vh - 74px); flex-direction: column; overflow: hidden; }
.rule-wizard-panel { display: grid; flex: 1 1 auto; grid-auto-rows: max-content; align-content: start; gap: 14px; min-height: 0; padding: 24px 27px 18px; overflow-y: auto; }
.rule-wizard-panel[hidden] { display: none; }
.rule-kind-choice span { min-height: 76px; padding: 14px; text-align: left; }
.rule-kind-choice b, .rule-kind-choice small { display: block; }
.rule-kind-choice b { font: 550 10px var(--mono); letter-spacing: .6px; }
.rule-kind-choice small { margin-top: 7px; color: #698285; font: 9px/1.4 var(--sans); letter-spacing: 0; }
.rule-kind-choice input:checked + span small { color: #31513d; }
.rule-review-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.rule-review-item { min-width: 0; padding: 11px 12px; background: #0d191d; border: 1px solid #294146; }
.rule-review-item.wide { grid-column: 1 / -1; }
.rule-review-item span { display: block; color: #637d80; font: 8px var(--mono); letter-spacing: .9px; }
.rule-review-item strong { display: block; margin-top: 7px; color: #c9d8d4; font: 500 11px/1.45 var(--sans); overflow-wrap: anywhere; white-space: pre-wrap; }
.rule-wizard-error { margin: 0 20px 8px; }
.rule-wizard-actions { flex: 0 0 auto; align-items: center; margin: auto 0 0; padding: 13px 18px; background: #0b171b; border-top: 1px solid var(--border); }
.rule-step-progress { color: #597477; font: 8px var(--mono); letter-spacing: .8px; }

/* MSG4wrd worker actions are icon-only, with keyboard-accessible labels/tooltips. */
.msg4wrd-actions { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.worker-action-icon { position: relative; display: grid; flex: 0 0 auto; place-items: center; width: 38px; height: 38px; padding: 0; color: #90aaa7; background: #122126; border: 1px solid #30474b; }
.worker-action-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.worker-action-icon:hover, .worker-action-icon:focus-visible { color: var(--cyan); background: #192b2f; border-color: #47706b; outline: none; }
.worker-action-icon.accent { color: var(--lime); background: #182b23; border-color: #41644a; }
.worker-action-icon:disabled { cursor: not-allowed; opacity: .4; }

@media (max-width: 900px) {
  .dispatch-flow { grid-template-columns: 1fr 46px 1fr; grid-template-rows: auto 46px auto auto; }
  .dispatch-node.queue { grid-column: 1; grid-row: 1; }
  .dispatch-connector:nth-of-type(2) { grid-column: 2; grid-row: 1; }
  .dispatch-node.route { grid-column: 3; grid-row: 1; }
  .dispatch-connector:nth-of-type(4) { grid-column: 3; grid-row: 2; width: 16px; height: 30px; justify-self: center; }
  .dispatch-connector:nth-of-type(4) i { width: 1px; height: 30px; }
  .dispatch-connector:nth-of-type(4) i::before { top: auto; right: -3px; bottom: 1px; border-top: 0; border-right: 1px solid #527379; border-bottom: 1px solid #527379; transform: rotate(45deg); }
  .dispatch-connector:nth-of-type(4) i::after { top: 0; left: -3px; }
  .dispatch-connector:nth-of-type(4) span { display: none; }
  .dispatch-flow.active .dispatch-connector:nth-of-type(4) i::after { animation-name: dispatch-travel-down; }
  .dispatch-node.complete { grid-column: 3; grid-row: 3; }
  .dispatch-retry { grid-column: 1 / 3; grid-row: 3; }
  .rule-wizard-grid { grid-template-columns: 1fr; }
  .rule-step-rail { display: grid; grid-template-columns: repeat(4,1fr); padding: 8px; border-right: 0; border-bottom: 1px solid var(--border); }
  .rule-step { grid-template-columns: 27px minmax(0,1fr); padding: 7px; }
  .rule-step > span { width: 25px; height: 25px; }
  .rule-step small, .rule-rail-note { display: none; }
  .rule-wizard-stage { max-height: calc(94vh - 132px); }
  .msg4wrd-actions { grid-column: 1 / -1; justify-content: flex-end; }
}
@media (max-width: 600px) {
  .automation-toolbar > button { width: 100%; }
  .automation-view-tabs button { padding-right: 12px; padding-left: 12px; }
  .dispatch-flow { grid-template-columns: 1fr; grid-template-rows: repeat(6,auto); padding: 14px; }
  .dispatch-node.queue, .dispatch-node.route, .dispatch-node.complete, .dispatch-retry { grid-column: 1; }
  .dispatch-node.queue { grid-row: 1; }
  .dispatch-connector:nth-of-type(2) { grid-column: 1; grid-row: 2; width: 16px; height: 30px; justify-self: center; }
  .dispatch-connector:nth-of-type(2) i { width: 1px; height: 30px; }
  .dispatch-connector:nth-of-type(2) i::before { top: auto; right: -3px; bottom: 1px; border-top: 0; border-right: 1px solid #527379; border-bottom: 1px solid #527379; transform: rotate(45deg); }
  .dispatch-connector:nth-of-type(2) i::after { top: 0; left: -3px; }
  .dispatch-connector:nth-of-type(2) span { display: none; }
  .dispatch-flow.active .dispatch-connector:nth-of-type(2) i::after { animation-name: dispatch-travel-down; }
  .dispatch-node.route { grid-row: 3; }
  .dispatch-retry { grid-row: 4; }
  .dispatch-connector:nth-of-type(4) { grid-column: 1; grid-row: 5; }
  .dispatch-node.complete { grid-row: 6; }
  #ruleDialog { width: 100vw; max-width: none; max-height: 100dvh; border-right: 0; border-left: 0; }
  .rule-wizard-form { max-height: 100dvh; }
  .rule-wizard-head { min-height: 68px; padding: 14px; }
  .rule-wizard-head p { display: none; }
  .rule-step-rail { gap: 3px; }
  .rule-step { display: flex; justify-content: center; padding: 6px; }
  .rule-step b { display: none; }
  .rule-wizard-stage { max-height: calc(100dvh - 119px); }
  .rule-wizard-panel { padding: 17px 14px 12px; }
  .rule-kind-choice { grid-template-columns: 1fr; }
  .rule-kind-choice label + label span { border-top: 1px solid #294146; border-left: 0; }
  .rule-review-grid { grid-template-columns: 1fr; }
  .rule-review-item.wide { grid-column: auto; }
  .rule-step-progress { display: none; }
  .rule-wizard-actions { padding: 11px; }
  .rule-wizard-actions > .danger { order: 2; }
  .rule-wizard-actions .dialog-actions-end { width: 100%; }
  .rule-wizard-actions .dialog-actions-end button { flex: 1; }
  .msg4wrd-actions { grid-template-columns: none; }
}

@media (prefers-reduced-motion: reduce) {
  .dispatch-flow.active .dispatch-connector i::after, .dispatch-flow.retrying .dispatch-retry { animation: none; }
  .dispatch-flow.active .dispatch-connector i::after { left: 50%; }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .dispatch-flow.active .dispatch-connector:nth-of-type(4) i::after { top: 50%; left: -3px; }
}
@media (max-width: 600px) and (prefers-reduced-motion: reduce) {
  .dispatch-flow.active .dispatch-connector:nth-of-type(2) i::after { top: 50%; left: -3px; }
}

/* =============================================================================
   SIGNAL LEDGER — Concept D
   A disciplined telecom ledger with a compact dock, continuous event surfaces,
   and equivalent light/dark themes. This final layer intentionally replaces the
   original control-room skin while preserving its component behavior.
   ============================================================================= */
:root,
html[data-theme="light"] {
  color-scheme: light;
  --bg: #eceff1;
  --rail: #151719;
  --surface: #ffffff;
  --surface-2: #f6f8fa;
  --surface-3: #e7ebef;
  --border: #d4d9df;
  --border-strong: #aab3bd;
  --text: #151719;
  --text-soft: #3f4851;
  --muted: #66717d;
  --muted-2: #8a949f;
  --lime: #16865c;
  --cyan: #245bff;
  --amber: #d75d16;
  --red: #c94040;
  --accent-soft: #e8eeff;
  --success-soft: #e6f4ed;
  --warning-soft: #fff0e6;
  --danger-soft: #fbeaec;
  --overlay: rgba(18,23,28,.48);
  --shadow: 0 18px 48px rgba(35,43,52,.14);
}
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #11161b;
  --rail: #0c0f12;
  --surface: #171d23;
  --surface-2: #1d252d;
  --surface-3: #25303a;
  --border: #34414c;
  --border-strong: #53616d;
  --text: #f2f5f7;
  --text-soft: #c7d0d8;
  --muted: #9da8b3;
  --muted-2: #74808c;
  --lime: #55d393;
  --cyan: #6c94ff;
  --amber: #ff9b59;
  --red: #ff7474;
  --accent-soft: #202c4d;
  --success-soft: #183328;
  --warning-soft: #3a291e;
  --danger-soft: #3a2226;
  --overlay: rgba(0,0,0,.68);
  --shadow: 0 20px 55px rgba(0,0,0,.28);
}

html { background: var(--bg); }
body { background: var(--bg); color: var(--text); font-size: 13px; }
body::before { display: none; }
button, input, select, textarea { color: var(--text); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* Application shell */
.shell { grid-template-columns: 58px minmax(0,1fr); }
.rail { z-index: 35; width: 58px; padding: 8px 7px 10px; background: var(--rail); border-color: #2b3035; }
.brand { justify-content: center; min-height: 42px; padding: 0; }
.brand-mark { width: 36px; height: 36px; color: #fff; background: #245bff; border: 0; border-radius: 5px; box-shadow: none; font: 550 14px var(--sans); letter-spacing: -.8px; }
.brand-mark span { color: #fff; }
.brand-copy, .rail-label { display: none; }
.nav { gap: 6px; margin-top: 20px; }
.nav a { position: relative; display: grid; grid-template-columns: 1fr; width: 44px; min-height: 42px; padding: 0; place-items: center; color: #aab1b8; background: transparent; border: 0; border-radius: 5px; }
.nav a:hover { color: #fff; background: #252a30; }
.nav a.active { color: #fff; background: #245bff; border: 0; box-shadow: none; }
.nav-icon { font: 17px/1 var(--mono); }
.nav a:last-child .nav-icon { font-size: 11px; font-weight: 550; }
.nav-text { position: absolute; left: calc(100% + 10px); z-index: 60; width: max-content; max-width: 180px; padding: 7px 9px; color: #fff; background: #151719; border: 1px solid #343a40; border-radius: 4px; box-shadow: 0 8px 24px #0004; font-size: 11px; pointer-events: none; opacity: 0; transform: translateX(-3px); transition: opacity .12s, transform .12s; }
.nav a:hover .nav-text, .nav a:focus-visible .nav-text { opacity: 1; transform: translateX(0); }
.rail-bottom { display: grid; justify-items: center; gap: 13px; padding: 0 0 4px; }
.rail-pulse { justify-content: center; }
.rail-pulse span { display: none; }
.rail-pulse i { width: 8px; height: 8px; background: #55d393; box-shadow: none; }
.logout { display: grid; width: 38px; height: 36px; margin: 0; place-items: center; color: #aab1b8; border-radius: 4px; font-size: 18px; }
.logout:hover { color: #fff; background: #252a30; }

.main { min-width: 0; padding: 0; }
.topbar { height: 58px; padding: 0 18px; background: color-mix(in srgb,var(--surface) 96%,transparent); border-color: var(--border); }
.command-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.command-brand { color: var(--text); font-size: 17px; font-weight: 550; letter-spacing: -.6px; text-decoration: none; }
.command-identity > span { padding-left: 12px; color: var(--muted); border-left: 1px solid var(--border); font-size: 11px; font-weight: 550; }
.breadcrumb { padding-left: 12px; border-left: 1px solid var(--border); font: 10px var(--mono); letter-spacing: 0; }
.breadcrumb strong { color: var(--muted); font-weight: 500; text-transform: none; }
.topbar-right { gap: 9px; }
.time { color: var(--muted); font-size: 9px; letter-spacing: 0; }
.top-chip { gap: 6px; padding: 0 9px; color: var(--lime); background: transparent; border: 0; font: 10px var(--sans); letter-spacing: 0; }
.top-chip i { width: 7px; height: 7px; box-shadow: none; }
.theme-toggle, .notify-btn { display: grid; width: 36px; height: 34px; padding: 0; place-items: center; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; }
.theme-toggle { position: relative; grid-template-columns: 1fr; font-size: 16px; }
.theme-toggle:hover, .notify-btn:hover, .notify-btn[aria-expanded="true"] { color: var(--cyan); background: var(--accent-soft); border-color: var(--cyan); }
.theme-toggle .theme-sun, .theme-toggle .theme-moon { grid-area: 1 / 1; transition: opacity .15s, transform .15s; }
html[data-theme="light"] .theme-moon, html[data-theme="dark"] .theme-sun { opacity: 0; transform: scale(.6) rotate(30deg); }
html[data-theme="light"] .theme-sun, html[data-theme="dark"] .theme-moon { opacity: 1; transform: none; }
.notify-badge { color: #fff; background: var(--red); border-color: var(--surface); }
.compose-trigger { min-height: 34px; padding: 7px 11px; }

.section-nav { position: sticky; top: 58px; z-index: 25; display: flex; height: 43px; padding: 0 18px; overflow-x: auto; background: color-mix(in srgb,var(--surface) 97%,transparent); border-bottom: 1px solid var(--border); scrollbar-width: none; }
.section-nav::-webkit-scrollbar { display: none; }
.section-nav a { position: relative; display: flex; flex: 0 0 auto; align-items: center; padding: 0 16px; color: var(--muted); text-decoration: none; font-size: 12px; font-weight: 550; white-space: nowrap; }
.section-nav a::after { content: ""; position: absolute; right: 16px; bottom: -1px; left: 16px; height: 2px; background: transparent; }
.section-nav a:hover { color: var(--text); }
.section-nav a.active { color: var(--cyan); }
.section-nav a.active::after { background: var(--cyan); }

/* Page rhythm and shared surfaces */
.page { min-height: calc(100vh - 101px); padding: 0 18px 28px; }
.page-heading { min-height: 116px; padding: 27px 2px 20px; align-items: center; }
.page-heading h1 { margin: 6px 0 5px; font-size: clamp(25px,3vw,34px); line-height: 1.1; letter-spacing: -.9px; }
.page-heading p { max-width: 720px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.eyebrow { gap: 8px; color: var(--cyan); font-family: var(--sans); font-size: 10px; font-weight: 550; letter-spacing: 0; }
.tiny-line { width: 18px; background: var(--cyan); }
.heading-note { color: var(--lime); font-family: var(--sans); font-size: 10px; letter-spacing: 0; }
.heading-note i { box-shadow: none; }
.card, .spectrum-panel, .ledger-card, .ledger-views, .ledger-inspector { background: var(--surface); border: 1px solid var(--border); border-radius: 5px; box-shadow: none; }
.card { background-image: none; }
.card-head, .content-head { min-height: 66px; padding: 15px 17px; border-color: var(--border); }
.card-head h2, .content-head h2, .route-guide h2, .docs-intro h2, .form-surface h2 { color: var(--text); font-size: 16px; letter-spacing: -.25px; }
.card-head p, .content-head p { color: var(--muted) !important; }
.section-kicker { color: var(--muted); font-family: var(--sans); font-size: 9px; font-weight: 550; letter-spacing: .1px; text-transform: none; }
.section-kicker.cyan { color: var(--cyan); }
.status-chip, .scanning-label, .security-badge { color: var(--lime); background: var(--success-soft); border-color: color-mix(in srgb,var(--lime) 38%,var(--border)); border-radius: 3px; font-size: 9px; letter-spacing: 0; }
.text-link { color: var(--cyan); font-family: var(--sans); letter-spacing: 0; }
.text-link:hover { color: var(--text); }
.empty-state { color: var(--muted); background: var(--surface-2); border-color: var(--border-strong); font-family: var(--sans); font-size: 11px; }

/* Signal spectrum */
.spectrum-panel { margin-bottom: 12px; overflow: hidden; }
.spectrum-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 62px; padding: 12px 15px; border-bottom: 1px solid var(--border); }
.spectrum-head h2 { margin: 0; font-size: 14px; letter-spacing: -.15px; }
.spectrum-head p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
.spectrum-key { display: flex; flex-wrap: wrap; gap: 12px; color: var(--muted); font-size: 9px; }
.spectrum-key span { display: flex; align-items: center; gap: 5px; }
.spectrum-key i { width: 7px; height: 7px; background: var(--lime); border-radius: 50%; }
.spectrum-key i.warning { background: var(--amber); }
.spectrum-key i.offline { background: var(--red); }
.spectrum-channels { display: grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); }
.spectrum-channel { min-width: 0; padding: 11px 13px 8px; border-right: 1px solid var(--border); }
.spectrum-channel:last-child { border-right: 0; }
.spectrum-channel header { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 8px; }
.spectrum-channel header > span { display: flex; align-items: center; gap: 6px; color: var(--text-soft); font: 9px var(--mono); }
.spectrum-channel header strong { overflow: hidden; color: var(--text); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.spectrum-channel header small { color: var(--muted); font: 8px var(--mono); }
.spectrum-wave { display: flex; height: 38px; margin: 8px 0 5px; align-items: end; gap: 2px; overflow: hidden; }
.spectrum-wave i { flex: 1 1 2px; min-width: 1px; max-width: 4px; background: color-mix(in srgb,var(--cyan) 70%,var(--surface)); border-radius: 1px 1px 0 0; }
.spectrum-channel.offline .spectrum-wave i, .spectrum-channel.disabled .spectrum-wave i { background: var(--border-strong); opacity: .5; }
.spectrum-channel.reconnecting .spectrum-wave i, .spectrum-channel.probing .spectrum-wave i { background: color-mix(in srgb,var(--amber) 75%,var(--surface)); }
.spectrum-channel footer { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font: 8px var(--mono); }
.spectrum-channel footer b { color: var(--lime); font-weight: 550; }
.spectrum-channel.offline footer b, .spectrum-channel.reconnecting footer b { color: var(--red); }

/* Compact operating summary */
.metrics { margin-bottom: 12px; background: var(--border); border-color: var(--border); border-radius: 5px; }
.metric { min-height: 82px; padding: 13px 15px; background: var(--surface); }
.metric-label { color: var(--muted); font-family: var(--sans); font-size: 9px; font-weight: 550; letter-spacing: 0; text-transform: none; }
.metric > div { gap: 7px; margin-top: 5px; }
.metric strong { color: var(--text); font: 550 24px var(--sans); letter-spacing: -.7px; }
.metric-tail { color: var(--muted); font-size: 9px; letter-spacing: 0; text-transform: lowercase; }
.metric small { margin-top: 3px; color: var(--muted); font: 9px var(--sans); }

/* Live ledger master-detail workspace */
.ledger-workspace { display: grid; grid-template-columns: 186px minmax(520px,1fr) 250px; align-items: stretch; gap: 8px; min-height: 480px; margin-bottom: 12px; }
.ledger-views, .ledger-inspector { min-width: 0; overflow: hidden; }
.ledger-side-head, .ledger-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 55px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.ledger-side-head h2, .ledger-head h2 { margin: 0; font-size: 13px; }
.ledger-side-head span, .ledger-live { color: var(--muted); font-size: 9px; }
.ledger-views > button, .ledger-views > a { display: flex; width: 100%; min-height: 38px; padding: 8px 12px; align-items: center; justify-content: space-between; color: var(--text-soft); background: transparent; border: 0; border-left: 3px solid transparent; text-decoration: none; font-size: 10px; text-align: left; }
.ledger-views > button:hover, .ledger-views > a:hover { color: var(--text); background: var(--surface-2); }
.ledger-views > button.active { color: var(--cyan); background: var(--accent-soft); border-left-color: var(--cyan); }
.ledger-views b { color: var(--muted); font: 8px var(--mono); }
.ledger-card { min-width: 0; overflow: auto; }
.ledger-head p { margin: 3px 0 0; color: var(--muted); font-size: 9px; }
.ledger-live { display: flex; align-items: center; gap: 6px; color: var(--lime); }
.ledger-live i { width: 7px; height: 7px; background: var(--lime); border-radius: 50%; }
.ledger-column-head, .ledger-row { display: grid; grid-template-columns: 68px 110px minmax(115px,.8fr) minmax(135px,.85fr) minmax(190px,1.5fr) 84px; align-items: center; gap: 10px; min-width: 780px; }
.ledger-column-head { min-height: 34px; padding: 7px 12px; color: var(--muted); background: var(--surface-2); border-bottom: 1px solid var(--border); font: 8px var(--sans); font-weight: 550; }
.ledger-rows { min-width: 780px; }
.ledger-row { width: 100%; min-height: 43px; padding: 6px 12px; color: var(--text-soft); background: transparent; border: 0; border-bottom: 1px solid var(--border); font-size: 9px; text-align: left; }
.ledger-row:hover { background: var(--surface-2); }
.ledger-row.selected { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--cyan); }
.ledger-row time { color: var(--muted); font: 8px var(--mono); }
.ledger-type { display: flex; align-items: center; gap: 7px; color: var(--text); font-weight: 550; }
.ledger-type i { display: grid; width: 19px; height: 19px; place-items: center; color: var(--cyan); background: var(--accent-soft); border-radius: 3px; font: normal 10px var(--mono); }
.ledger-party, .ledger-route, .ledger-detail { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ledger-party { font-family: var(--mono); }
.ledger-detail { color: var(--text); }
.ledger-inspector > .empty-state { margin: 12px; }
.inspector-body { padding: 17px 15px; }
.inspector-symbol { display: grid; width: 40px; height: 40px; place-items: center; color: var(--cyan); background: var(--accent-soft); border: 1px solid color-mix(in srgb,var(--cyan) 30%,var(--border)); border-radius: 50%; font-size: 17px; }
.inspector-symbol.failed, .inspector-symbol.offline { color: var(--red); background: var(--danger-soft); }
.inspector-body h3 { margin: 13px 0 7px; overflow-wrap: anywhere; font-size: 16px; }
.inspector-body dl { display: grid; gap: 0; margin: 18px 0; }
.inspector-body dl > div { padding: 10px 0; border-top: 1px solid var(--border); }
.inspector-body dt { color: var(--muted); font-size: 8px; }
.inspector-body dd { margin: 5px 0 0; color: var(--text-soft); font-size: 10px; line-height: 1.5; overflow-wrap: anywhere; }
.inspector-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.inspector-actions:has(:only-child) { grid-template-columns: 1fr; }

/* Buttons, fields, tabs and tables */
.primary, .secondary, .danger { min-height: 34px; padding: 8px 11px; border-radius: 4px; font-family: var(--sans); font-size: 10px; font-weight: 550; letter-spacing: 0; }
.primary { color: #fff; background: #245bff; border-color: #245bff; }
.primary:hover { color: #fff; background: #1749dc; border-color: #1749dc; }
.secondary { color: var(--text); background: var(--surface); border-color: var(--border-strong); }
.secondary:hover { color: var(--cyan); background: var(--accent-soft); border-color: var(--cyan); }
.danger { color: var(--red); background: var(--danger-soft); border-color: color-mix(in srgb,var(--red) 45%,var(--border)); }
.danger:hover { color: #fff; background: var(--red); }
.tabs { min-height: 48px; padding: 0 12px; background: var(--surface); border-color: var(--border); }
.tab { padding: 0 13px; color: var(--muted); font-family: var(--sans); font-size: 10px; font-weight: 550; letter-spacing: 0; }
.tab::after { right: 13px; left: 13px; }
.tab.active { color: var(--cyan); }
.tab.active::after { background: var(--cyan); }
.tab span { color: var(--muted); background: var(--surface-2); border-color: var(--border); }
.summary-strip, .msg4wrd-metrics { background: var(--border); border-color: var(--border); border-radius: 5px; }
.summary-strip > div, .msg4wrd-metrics article { background: var(--surface); }
.summary-strip span, .msg4wrd-metrics span, .msg4wrd-metrics small { color: var(--muted); }
.summary-strip strong, .msg4wrd-metrics strong { color: var(--text); }
.message-table th, .report-table th, .overview-modem-head, .msg4wrd-worker-head, .msg4wrd-job-head, .endpoint-row.heading { color: var(--muted); background: var(--surface-2); border-color: var(--border); font-family: var(--sans); font-weight: 550; letter-spacing: 0; text-transform: none; }
.message-table td, .report-table td, .monitor-row, .modem-row, .call-row, .pool-row, .rule-row, .hook-row, .job-row, .msg4wrd-worker-row, .msg4wrd-job-row { color: var(--text-soft); border-color: var(--border); }
.message-table tbody tr:hover, .monitor-row:hover, .modem-row:hover, .msg4wrd-worker-row:hover { background: var(--surface-2); }
.message-table tbody tr.unread { background: var(--accent-soft); }
.body-link, .cell-number, .monitor-number, .modem-primary > div, .call-row strong, .call-row b, .msg4wrd-worker-row strong, .msg4wrd-worker-row b, .msg4wrd-job-row strong, .msg4wrd-job-row b { color: var(--text); }
.cell-sim small, .cell-status small, .cell-date small, .modem-primary small, .modem-cell small, .call-row small, .msg4wrd-worker-row small, .msg4wrd-worker-main span, .msg4wrd-job-row small { color: var(--muted); }
.pager, .report-filters, .audit-filters, .msg4wrd-filters { color: var(--muted); background: var(--surface-2); border-color: var(--border); }
.pager button, .message-action, .edit-button, .copy-code, .worker-action-icon { color: var(--text-soft); background: var(--surface); border-color: var(--border-strong); border-radius: 3px; }
.pager button:hover, .message-action:hover, .edit-button:hover, .copy-code:hover, .worker-action-icon:hover { color: var(--cyan); background: var(--accent-soft); border-color: var(--cyan); }
.table-toolbar, .settings-toolbar { color: var(--text); }
.table-toolbar select, .pager select, .report-filters input, .report-filters select, .audit-filters input, .audit-filters select, .msg4wrd-filters input, .msg4wrd-filters select,
.stack-form input, .stack-form select, .stack-form textarea, .dialog-form input, .dialog-form select, .dialog-form textarea, .add-modem-form input, .msg4wrd-binding select { color: var(--text); background: var(--surface); border-color: var(--border-strong); border-radius: 4px; color-scheme: inherit; }
.stack-form input::placeholder, .stack-form textarea::placeholder, .dialog-form input::placeholder, .dialog-form textarea::placeholder, .add-modem-form input::placeholder { color: var(--muted-2); }
.stack-form label, .dialog-form label, .add-modem-form label, .custom-range label, .filter-select, .audit-filters label, .msg4wrd-filters label { color: var(--muted); font-family: var(--sans); font-size: 9px; font-weight: 550; letter-spacing: 0; }
.stack-form input:focus, .stack-form select:focus, .stack-form textarea:focus, .dialog-form input:focus, .dialog-form select:focus, .dialog-form textarea:focus, .add-modem-form input:focus, .report-filters input:focus, .report-filters select:focus, .audit-filters input:focus, .audit-filters select:focus, .msg4wrd-filters input:focus, .msg4wrd-filters select:focus { border-color: var(--cyan); outline: 2px solid color-mix(in srgb,var(--cyan) 18%,transparent); outline-offset: 0; }

/* Existing operational components translated into the ledger palette */
.availability, .monitor-row, .message-actions, .notify-head, .notify-item, .dialog-head, .report-section, .endpoint-row, .code-block > div, .route-guide li, .subhead { border-color: var(--border); }
.availability-track { background: var(--surface-3); }
.availability-track i { background: var(--cyan); }
.monitor-row small, .monitor-meta, .message-foot, .micro-note, .form-note, .route-guide span { color: var(--muted); }
.message-card, .discovered-row, .rule-review-item, .msg4wrd-review-box, .msg4wrd-choice-fieldset, .msg4wrd-target-card, .msg4wrd-binding, .stack-form .country-toggle, .dialog-form .modem-pick { color: var(--text-soft); background: var(--surface-2); border-color: var(--border); }
.message-body, .message-full p, .confirm-body { color: var(--text-soft); }
.message-number { color: var(--cyan); }
.message-status { color: var(--lime); }
.message-status.queued, .message-status.sending, .message-status.ringing, .message-status.reconnecting { color: var(--amber); }
.message-status.failed, .message-status.unknown, .message-status.offline, .message-status.rejected, .message-status.missed { color: var(--red); }
.connection-state { color: var(--lime) !important; }
.connection-state.offline, .connection-state.reconnecting, .connection-state.probing { color: var(--amber) !important; }
.status-light.online { background: var(--lime); box-shadow: none; }
.status-light.offline { background: var(--red); }
.status-light.probing, .status-light.reconnecting { background: var(--amber); }
.notify-panel, .notify-foot { color: var(--text); background: var(--surface); border-color: var(--border); box-shadow: var(--shadow); }
.notify-item.unread { background: var(--accent-soft); }
.notify-item p { color: var(--text-soft); }
.notify-item-top time, .notify-item-foot small { color: var(--muted); }
.sound-toggle { color: var(--lime); background: var(--success-soft); border-color: var(--lime); }
.code-block { background: var(--rail); border-color: var(--border-strong); }
.code-block pre { color: #d6dde3; }
.endpoint-row code, .method { color: var(--text-soft); }
.method.get { color: var(--cyan); }
.method.post { color: var(--lime); }
.method.delete { color: var(--red); }
.chart-card, .kpi-row > div, .report-section, .form-surface { color: var(--text); background: var(--surface-2); border-color: var(--border); }
.chart-card figcaption, .kpi-row span, .kpi-row small { color: var(--muted); }
.chart-card strong, .kpi-row strong { color: var(--text); }
.chart-bar { background: var(--cyan); }
.dispatch-flow-card { margin-top: 12px; }
.dispatch-flow-state, .dispatch-node, .dispatch-node-icon { color: var(--muted); background: var(--surface-2); border-color: var(--border); }
.dispatch-node strong, .dispatch-retry strong { color: var(--text); }
.dispatch-connector i { background: var(--border-strong); }
.dispatch-retry { color: var(--amber); background: var(--warning-soft); border-color: var(--amber); }
.automation-view-tabs { background: var(--border); border-color: var(--border); }
.automation-view-tabs button { color: var(--muted); background: var(--surface); }
.automation-view-tabs button:hover { color: var(--text); background: var(--surface-2); }
.automation-view-tabs button.active { color: var(--cyan); background: var(--accent-soft); box-shadow: inset 0 -2px 0 var(--cyan); }

.health-strip { color: var(--text-soft); background: var(--success-soft); border-color: color-mix(in srgb,var(--lime) 35%,var(--border)); }
.detail-item { color: var(--text-soft); background: var(--surface-2); border-color: var(--border); }
.detail-item small, .detail-item em, .route-member small { color: var(--muted); }
.detail-item strong { color: var(--text); }
.detail-item strong.missing { color: var(--muted-2); }
.call-settings { background: var(--surface-2); border-color: var(--border); }
.call-settings legend { color: var(--cyan); font-family: var(--sans); font-weight: 550; letter-spacing: 0; }
.call-choice-row .check { color: var(--text-soft); background: var(--surface); border-color: var(--border); }
.message-full, .compose-context, .route-member { color: var(--text-soft); background: var(--surface-2); border-color: var(--border); }
.message-full-head { color: var(--muted); border-color: var(--border); }
.compose-context p { color: var(--text-soft); }
.compose-context small { color: var(--muted); }
.character-meter > div { background: var(--surface-3); }
.character-meter i { background: var(--cyan); }
.segment-chip { color: var(--muted); background: var(--surface-2); border-color: var(--border); }
.switch span { background: var(--surface-3); border-color: var(--border-strong); }
.switch input:checked + span { background: var(--accent-soft); border-color: var(--cyan); }
.switch input:checked + span::after { background: var(--cyan); }
.segmented span { color: var(--muted); background: var(--surface); border-color: var(--border); }
.segmented input:checked + span { color: #fff; background: #245bff; }
.picker-field, .rule-section { color: var(--text-soft); }
.picker-label { color: var(--muted); }
.modem-picker, .route-members { border-color: var(--border); }
.stack-form .country-toggle:has(input:checked), .dialog-form .modem-pick:has(input:checked), .msg4wrd-binding:has(input:checked) { background: var(--accent-soft); border-color: var(--cyan); }
.country-toggle b, .dialog-form .country-chip:has(input:checked) { color: var(--cyan); }
.dialog-form .country-chip { color: var(--text-soft); background: var(--surface-2); border-color: var(--border); }
.dialog-form .country-chip:has(input:checked) { background: var(--accent-soft); border-color: var(--cyan); }
.form-error { color: var(--red); background: var(--danger-soft); border-color: color-mix(in srgb,var(--red) 38%,var(--border)); }

/* Drawers and modal hierarchy */
dialog { width: min(620px,calc(100vw - 58px)); max-width: none; max-height: 100dvh; margin: 0 0 0 auto; overflow-y: auto; overscroll-behavior: contain; color: var(--text); background: var(--surface); border: 0; border-left: 1px solid var(--border-strong); border-radius: 0; box-shadow: -24px 0 70px rgba(0,0,0,.22); }
dialog::backdrop { background: var(--overlay); backdrop-filter: blur(2px); }
.dialog-form { min-height: 100%; padding: 22px; background: var(--surface); }
.dialog-head { color: var(--text); background: var(--surface); }
.dialog-head h3 { color: var(--text); font-size: 19px; }
.dialog-actions { position: sticky; bottom: 0; z-index: 2; margin: 8px -22px -22px; padding: 13px 22px; background: var(--surface); border-top: 1px solid var(--border); }
.icon-btn { color: var(--muted); background: var(--surface-2); border-color: var(--border); }
.icon-btn:hover { color: var(--red); border-color: var(--red); }
#ruleDialog, #msg4wrdWorkerDialog { width: min(960px,calc(100vw - 58px)); max-height: 100dvh; }
.channel-dialog { width: min(760px,calc(100vw - 58px)); }
.rule-wizard-form, .msg4wrd-worker-form { max-height: 100dvh; background: var(--surface); }
.rule-wizard-head, .msg4wrd-wizard-head, .rule-wizard-actions, .msg4wrd-wizard-actions { background: var(--surface); border-color: var(--border); }
.rule-step-rail, .msg4wrd-step-rail { background: var(--surface-2); border-color: var(--border); }
.rule-step, .msg4wrd-step { color: var(--muted); }
.rule-step:hover, .msg4wrd-step:hover { color: var(--text); background: var(--surface); border-color: var(--border); }
.rule-step > span, .msg4wrd-step > span { color: var(--muted); background: var(--surface); border-color: var(--border); }
.rule-step.active, .msg4wrd-step.active { color: var(--cyan); background: var(--accent-soft); border-color: color-mix(in srgb,var(--cyan) 38%,var(--border)); }
.rule-step.active > span, .rule-step.done > span, .msg4wrd-step.active > span, .msg4wrd-step.done > span { color: #fff; background: #245bff; border-color: #245bff; }
#confirmDialog { width: min(440px,calc(100vw - 28px)); max-height: max-content; margin: auto; border: 1px solid var(--border-strong); border-radius: 6px; box-shadow: var(--shadow); }
#confirmDialog .dialog-form { min-height: 0; }
.call-dialog { width: min(390px,calc(100vw - 28px)); max-height: max-content; margin: 72px 18px auto auto; border: 1px solid var(--border-strong); border-radius: 6px; box-shadow: var(--shadow); }
.call-dialog .dialog-form { min-height: 0; }
.call-dialog .dialog-actions { margin-right: -22px; margin-bottom: -22px; margin-left: -22px; }
.call-visual { background: var(--surface-2); border-color: var(--border); }
.call-avatar { color: #fff; background: #245bff; border-color: #245bff; box-shadow: none; }
.login-overlay { background: var(--overlay); backdrop-filter: blur(6px); }
.login-card { color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 7px; box-shadow: var(--shadow); }
.login-card p, .login-card label { color: var(--muted); }
.login-card input { color: var(--text); background: var(--surface-2); border-color: var(--border-strong); }
.login-mark { color: #fff; background: #245bff; border: 0; box-shadow: none; }
.login-mark span { color: #fff; }

/* Theme-specific cleanup for generated reports and dense tools */
html[data-theme="light"] .chart-grid svg text { fill: #66717d; }
html[data-theme="light"] .chart-grid svg line { stroke: #d4d9df; }
html[data-theme="light"] .forward-matrix thead th, html[data-theme="light"] .forward-matrix tbody th { background: var(--surface-2); }
html[data-theme="light"] .forward-matrix th, html[data-theme="light"] .forward-matrix td { border-color: var(--border); }
html[data-theme="light"] .msg4wrd-history-table tbody tr { background: var(--surface-2); border-color: var(--border); }
html[data-theme="light"] .msg4wrd-history-table tbody td { color: var(--text-soft); }

@media (max-width: 1180px) {
  .ledger-workspace { grid-template-columns: 175px minmax(0,1fr); }
  .ledger-inspector { grid-column: 1 / -1; }
  .ledger-inspector .inspector-body { display: grid; grid-template-columns: 44px minmax(150px,.7fr) minmax(280px,1.3fr) auto; align-items: center; gap: 14px; }
  .ledger-inspector .inspector-body h3 { margin: 0; }
  .ledger-inspector .inspector-body > .message-status { align-self: center; justify-self: start; }
  .ledger-inspector .inspector-body dl { grid-column: 3; grid-row: 1 / span 2; margin: 0; }
  .ledger-inspector .inspector-body dl > div { padding: 4px 0; border: 0; }
  .ledger-inspector .inspector-actions { grid-column: 4; grid-row: 1 / span 2; }
}

@media (max-width: 900px) {
  .topbar { padding: 0 12px; }
  .command-identity > span, .breadcrumb, .time { display: none; }
  .section-nav { padding: 0 8px; }
  .page { padding-right: 12px; padding-left: 12px; }
  .page-heading { min-height: 104px; }
  .ledger-workspace { grid-template-columns: 1fr; }
  .ledger-views { display: flex; overflow-x: auto; }
  .ledger-views .ledger-side-head { flex: 0 0 120px; border-right: 1px solid var(--border); border-bottom: 0; }
  .ledger-views > button, .ledger-views > a { flex: 0 0 auto; width: auto; border-bottom: 2px solid transparent; border-left: 0; white-space: nowrap; }
  .ledger-views > button.active { border-bottom-color: var(--cyan); border-left: 0; }
  .ledger-inspector { grid-column: auto; }
  .ledger-inspector .inspector-body { display: block; }
  .ledger-inspector .inspector-body h3 { margin: 13px 0 7px; }
  .ledger-inspector .inspector-body dl { margin: 18px 0; }
  .ledger-inspector .inspector-body dl > div { padding: 10px 0; border-top: 1px solid var(--border); }
  .spectrum-channels { grid-template-columns: repeat(2,minmax(190px,1fr)); }
}

@media (max-width: 680px) {
  .shell { display: block; }
  .rail { position: fixed; top: auto; right: 0; bottom: 0; left: 0; z-index: 55; display: block; width: auto; height: 58px; padding: 6px 8px; border-top: 1px solid #2b3035; border-right: 0; }
  .rail .brand, .rail-bottom { display: none; }
  .nav { display: grid; grid-template-columns: repeat(7,1fr); gap: 3px; margin: 0; }
  .nav a { width: auto; min-width: 0; height: 46px; min-height: 0; margin: 0 auto; }
  .nav a.active { background: #245bff; }
  .nav-text { display: none; }
  .nav-icon { font-size: 15px; }
  .topbar { position: sticky; top: 0; height: 54px; }
  .command-brand { font-size: 15px; }
  .top-chip > span { display: none; }
  .theme-toggle, .notify-btn { width: 33px; height: 32px; }
  .compose-trigger .compose-label { display: none; }
  .compose-trigger { width: 33px; padding: 0; justify-content: center; }
  .section-nav { top: 54px; height: 42px; }
  .section-nav a { padding: 0 11px; font-size: 11px; }
  .section-nav a::after { right: 11px; left: 11px; }
  .page { min-height: calc(100vh - 154px); padding-bottom: 82px; }
  .page-heading { display: grid; gap: 12px; min-height: 0; padding: 20px 0 16px; }
  .page-heading h1 { font-size: 27px; }
  .heading-actions { justify-content: space-between; }
  .metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .spectrum-head { align-items: start; flex-direction: column; gap: 10px; }
  .spectrum-channels { grid-template-columns: 1fr; }
  .spectrum-channel { border-right: 0; border-bottom: 1px solid var(--border); }
  .spectrum-channel:last-child { border-bottom: 0; }
  .ledger-workspace { min-height: 0; }
  .ledger-card { max-height: 520px; }
  .ledger-inspector { display: none; }
  dialog, #ruleDialog, #msg4wrdWorkerDialog { width: 100vw; max-width: none; margin: 0; border-right: 0; border-left: 0; }
  #confirmDialog, .call-dialog { width: calc(100vw - 20px); margin: auto; border: 1px solid var(--border-strong); border-radius: 6px; }
  .call-dialog { margin-top: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle span, .nav-text { transition: none; }
}

/* =============================================================================
   SIGNAL LEDGER — structural workspace pass
   The product is organized as ledgers with persistent controls and inspectors,
   instead of a stack of interchangeable dashboard cards.
   ============================================================================= */
.page-heading {
  min-height: 88px;
  padding: 17px 2px 15px;
  border-bottom: 1px solid var(--border);
}
.page-heading h1 { margin-top: 4px; font-size: clamp(23px,2.2vw,30px); }
.page-heading p { max-width: 760px; line-height: 1.45; }
.page-heading .eyebrow { font-size: 8px; }
.page[data-page="overview"] > .dispatch-flow-card,
.page[data-page="overview"] > .dashboard-grid { display: none; }
.page[data-page="overview"] .ledger-workspace { margin-bottom: 0; }

/* Shared operational rails */
.workspace-rail,
.workspace-inspector,
.worker-summary,
.report-control-rail {
  min-width: 0;
  background: var(--surface-2);
}
.workspace-rail-head { padding: 18px 16px 16px; border-bottom: 1px solid var(--border); }
.workspace-rail-head h2 { margin: 7px 0 5px; color: var(--text); font-size: 15px; letter-spacing: -.25px; }
.workspace-rail-head p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.workspace-rail-status { display: grid; gap: 7px; margin-top: auto; padding: 15px 16px; border-top: 1px solid var(--border); }
.workspace-rail-status small { color: var(--muted); font: 8px var(--mono); letter-spacing: .7px; }
.workspace-rail-status strong { display: flex; align-items: center; gap: 7px; color: var(--text); font-size: 10px; }
.workspace-rail-status strong i { width: 6px; height: 6px; background: var(--lime); border-radius: 50%; }
.workspace-rail-status span { color: var(--muted); font-size: 9px; line-height: 1.5; }

/* Messages: saved views / live ledger / contextual inspector */
.messages-workspace {
  display: grid;
  grid-template-columns: 190px minmax(560px,1fr) 250px;
  min-height: 620px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 5px;
}
.message-views { display: flex; flex-direction: column; border-right: 1px solid var(--border); }
.message-views nav { display: grid; padding: 10px 0; }
.message-views nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  padding: 0 14px;
  color: var(--text-soft);
  border-left: 3px solid transparent;
  font-size: 10px;
  text-decoration: none;
}
.message-views nav a:hover { color: var(--text); background: var(--surface); }
.message-views nav a.active { color: var(--cyan); background: var(--accent-soft); border-left-color: var(--cyan); }
.message-views nav a span { display: flex; align-items: center; gap: 9px; }
.message-views nav a i { display: grid; width: 21px; height: 21px; place-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 3px; font-style: normal; }
.message-views nav a b { min-width: 27px; padding: 3px 5px; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; font: 8px var(--mono); text-align: center; }
.messages-ledger { min-width: 0; background: var(--surface); }
.messages-stream-tabs { border-width: 0 0 1px; border-radius: 0; }
.messages-ledger .table-panel { min-width: 0; }
.messages-ledger .table-wrap { max-height: 494px; overflow: auto; }
.messages-ledger .message-table { min-width: 760px; }
.messages-ledger .message-table tbody tr { cursor: pointer; }
.messages-ledger .message-table tbody tr.selected { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--cyan); }
.messages-ledger .message-table tbody tr.selected td:first-child { color: var(--cyan); }
.message-workspace-inspector { border-left: 1px solid var(--border); }
.workspace-inspector-head { display: flex; align-items: center; justify-content: space-between; min-height: 49px; padding: 0 14px; border-bottom: 1px solid var(--border); }
.workspace-inspector-head small { color: var(--muted); font: 8px var(--mono); }
.workspace-inspector-empty { display: grid; justify-items: center; padding: 74px 22px 30px; text-align: center; }
.workspace-inspector-empty > span { display: grid; width: 42px; height: 42px; place-items: center; color: var(--muted); background: var(--surface); border: 1px dashed var(--border-strong); border-radius: 50%; }
.workspace-inspector-empty h3 { margin: 15px 0 6px; color: var(--text); font-size: 13px; }
.workspace-inspector-empty p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.message-inspector-body { padding: 18px 15px; }
.message-inspector-direction { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 9px; }
.message-inspector-direction i { display: grid; width: 26px; height: 26px; place-items: center; color: var(--cyan); background: var(--accent-soft); border-radius: 50%; font-style: normal; }
.message-inspector-body h3 { margin: 13px 0 8px; color: var(--text); font: 550 15px var(--mono); overflow-wrap: anywhere; }
.message-inspector-body blockquote { max-height: 126px; margin: 18px 0; padding: 12px; overflow: auto; color: var(--text-soft); background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--cyan); font-size: 11px; line-height: 1.55; }
.message-inspector-body dl { margin: 0 0 17px; }
.message-inspector-body dl > div { padding: 9px 0; border-top: 1px solid var(--border); }
.message-inspector-body dt { color: var(--muted); font-size: 8px; }
.message-inspector-body dd { margin: 4px 0 0; color: var(--text-soft); font-size: 9px; line-height: 1.45; overflow-wrap: anywhere; }
.message-inspector-body .inspector-error dd { color: var(--red); }
.message-inspector-actions { grid-template-columns: 1fr 1fr; }
.message-inspector-actions > * { width: 100%; min-width: 0; }

/* Settings: permanent category rail with one focused configuration stage */
.settings-workspace {
  display: grid;
  grid-template-columns: 220px minmax(0,1fr);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 5px;
}
.settings-navigation { display: flex; flex-direction: column; min-height: 660px; border-right: 1px solid var(--border); }
.settings-tabs { display: grid; min-height: 0; margin: 0; padding: 8px 0; background: transparent; border: 0; border-radius: 0; }
.settings-tabs .tab {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 9px;
  min-height: 58px;
  padding: 10px 14px;
  border-left: 3px solid transparent;
}
.settings-tabs .tab::after { inset: 0 auto 0 0; width: 3px; height: auto; background: transparent; }
.settings-tabs .tab.active { background: var(--accent-soft); border-left-color: var(--cyan); }
.settings-tabs .tab.active::after { display: none; }
.settings-tabs .tab > i { color: var(--muted); font: normal 9px var(--mono); }
.settings-tabs .tab > span { display: grid; gap: 3px; padding: 0; color: inherit; background: none; border: 0; border-radius: 0; }
.settings-tabs .tab b { color: inherit; font-size: 11px; text-transform: none; }
.settings-tabs .tab small { color: var(--muted); font-size: 8px; text-transform: none; }
.settings-stage { min-width: 0; padding: 17px; background: var(--bg); }
.settings-stage .settings-toolbar { padding: 1px 1px 15px; }
.settings-stage .settings-panel > .card,
.device-aux-grid > .card { border-radius: 4px; }
.device-aux-grid { display: grid; grid-template-columns: minmax(300px,.85fr) minmax(420px,1.15fr); gap: 12px; margin-top: 12px; }
.device-aux-grid .call-history-card,
.device-aux-grid .discovery-card { margin-top: 0; }
.device-aux-grid .add-modem-form { grid-template-columns: 1fr 1fr; }
.device-aux-grid .add-modem-form button { grid-column: 1 / -1; }

/* MSG4wrd: health rail plus operations stage */
.worker-workspace { display: grid; grid-template-columns: 220px minmax(0,1fr); overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: 5px; }
.worker-summary { display: flex; flex-direction: column; border-right: 1px solid var(--border); }
.worker-summary .msg4wrd-metrics { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; background: transparent; border: 0; border-radius: 0; }
.worker-summary .msg4wrd-metrics article { padding: 15px 16px; border-bottom: 1px solid var(--border); }
.worker-summary .msg4wrd-metrics strong { margin: 7px 0 5px; font-size: 24px; }
.worker-stage { min-width: 0; border: 0; border-radius: 0; }
.worker-stage > .tabs { border-width: 0 0 1px; }

/* Reports: vertical range controls stay visible beside the report */
.reports-workspace { display: grid; grid-template-columns: 220px minmax(0,1fr); overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: 5px; }
.report-control-rail { border-right: 1px solid var(--border); }
.report-control-rail .report-filters { display: grid; align-items: stretch; gap: 14px; margin: 0; padding: 15px; background: transparent; border: 0; border-radius: 0; }
.report-control-rail .preset-group { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.report-control-rail .preset-group button { min-width: 0; min-height: 34px; border: 1px solid var(--border); border-radius: 3px; }
.report-control-rail .preset-group button[aria-checked="true"] { color: #fff; background: #245bff; border-color: #245bff; }
.report-control-rail .custom-range { grid-template-columns: 1fr; gap: 8px; }
.report-control-rail .filter-select { display: grid; gap: 6px; }
.report-control-rail input,
.report-control-rail select,
.report-control-rail #reportRefresh { width: 100%; }
.reports-stage { min-width: 0; border: 0; border-radius: 0; }
.reports-stage > .tabs { border-width: 0 0 1px; }
.reports-stage .kpi-row > .kpi { color: var(--text); background: var(--surface-2); }
.reports-stage .report-table thead th { color: var(--muted); background: var(--surface-2); }
.report-control-rail .preset-group button:not([aria-checked="true"]) { color: var(--text-soft); background: var(--surface); }

/* Integrations use the same rail/stage system without changing behavior. */
.integration-card { display: grid; grid-template-columns: 220px minmax(0,1fr); }
.integration-card > .integration-tabs { display: grid; align-content: start; min-height: 620px; padding: 13px 0; border: 0; border-right: 1px solid var(--border); }
.integration-card > .integration-tabs .tab { justify-content: flex-start; min-height: 44px; padding: 0 16px; border-left: 3px solid transparent; }
.integration-card > .integration-tabs .tab.active { background: var(--accent-soft); border-left-color: var(--cyan); }
.integration-card > .integration-tabs .tab::after { display: none; }
.integration-card > .integration-panel { grid-column: 2; min-width: 0; }

@media (max-width: 1220px) {
  .messages-workspace { grid-template-columns: 180px minmax(0,1fr); }
  .message-workspace-inspector { grid-column: 1 / -1; display: none; }
  .device-aux-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .page-heading { min-height: 80px; }
  .messages-workspace,
  .settings-workspace,
  .worker-workspace,
  .reports-workspace,
  .integration-card { grid-template-columns: 1fr; }
  .messages-workspace { min-height: 0; }
  .message-views,
  .settings-navigation,
  .worker-summary,
  .report-control-rail { min-height: 0; border-right: 0; border-bottom: 1px solid var(--border); }
  .message-views .workspace-rail-head,
  .message-views .workspace-rail-status,
  .settings-navigation .workspace-rail-head,
  .settings-navigation .workspace-rail-status,
  .worker-summary .workspace-rail-status,
  .report-control-rail .workspace-rail-head { display: none; }
  .message-views nav { display: flex; padding: 0; overflow-x: auto; }
  .message-views nav a { flex: 1; min-width: 145px; border-bottom: 3px solid transparent; border-left: 0; }
  .message-views nav a.active { border-bottom-color: var(--cyan); border-left: 0; }
  .messages-stream-tabs { display: none; }
  .settings-tabs { grid-template-columns: repeat(3,1fr); padding: 0; }
  .settings-tabs .tab { grid-template-columns: 21px 1fr; min-height: 58px; border-bottom: 3px solid transparent; border-left: 0; }
  .settings-tabs .tab.active { border-bottom-color: var(--cyan); border-left: 0; }
  .settings-stage { padding: 12px; }
  .worker-summary .workspace-rail-head { padding: 12px 14px; }
  .worker-summary .msg4wrd-metrics { grid-template-columns: repeat(4,1fr); }
  .worker-summary .msg4wrd-metrics article { padding: 12px; border-right: 1px solid var(--border); border-bottom: 0; }
  .report-control-rail .report-filters { grid-template-columns: minmax(260px,1fr) auto auto; align-items: end; }
  .report-control-rail .preset-group { grid-column: 1 / -1; grid-template-columns: repeat(6,1fr); }
  .integration-card > .integration-tabs { display: flex; min-height: 48px; padding: 0 12px; border-right: 0; border-bottom: 1px solid var(--border); }
  .integration-card > .integration-tabs .tab { justify-content: center; }
  .integration-card > .integration-panel { grid-column: 1; }
}

@media (max-width: 680px) {
  .page-heading { border-bottom: 0; }
  .page-heading p { display: none; }
  .messages-workspace { min-height: 0; }
  .messages-ledger .table-wrap { max-height: none; }
  .settings-tabs .tab { grid-template-columns: 1fr; justify-items: center; padding: 8px 4px; text-align: center; }
  .settings-tabs .tab > i,
  .settings-tabs .tab small { display: none; }
  .device-aux-grid .add-modem-form { grid-template-columns: 1fr; }
  .device-aux-grid .add-modem-form button { grid-column: auto; }
  .worker-summary .workspace-rail-head { display: none; }
  .worker-summary .msg4wrd-metrics { grid-template-columns: 1fr 1fr; }
  .worker-summary .msg4wrd-metrics article { border-bottom: 1px solid var(--border); }
  .report-control-rail .report-filters { grid-template-columns: 1fr 1fr; }
  .report-control-rail .preset-group { grid-column: 1 / -1; grid-template-columns: repeat(3,1fr); }
  .report-control-rail .custom-range { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .report-control-rail #reportRefresh { align-self: end; }
}