:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;color:#e8eef7;background:#07111f}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 15% 0,#17365a 0,transparent 34%),#07111f}header{display:flex;justify-content:space-between;gap:2rem;padding:2.4rem clamp(1rem,5vw,4.5rem) 1.5rem}h1{margin:.25rem 0;font-size:clamp(2rem,4vw,3.5rem)}h2,h3{margin:0}p{color:#9eb0c6;margin:.35rem 0}.eyebrow,.hub-kicker{font-size:.72rem;letter-spacing:.2em;color:#66d9ff;font-weight:800}.live{height:max-content;border:1px solid #31506d;border-radius:999px;padding:.6rem .85rem;font-weight:800;font-size:.8rem;background:#0b1c30}.live i,.hub-status i{display:inline-block;width:.55rem;height:.55rem;border-radius:50%;margin-right:.4rem}.live i{background:#34e18b;box-shadow:0 0 16px #34e18b}main{padding:0 clamp(1rem,5vw,4.5rem) 4rem}.summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin:1rem 0}.card,.toolbar,.hub-panel{background:rgba(12,29,49,.88);border:1px solid #203b57;border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.25)}.card{padding:1.1rem}.card strong{font-size:1.65rem;display:block}.card small,.hub-metrics small{color:#8fa5bc}.mode-label{font-size:1.15rem!important}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.2rem 1.4rem;margin:1rem 0}.toolbar input{background:#071522;border:1px solid #29455f;color:white;border-radius:10px;padding:.75rem 1rem;min-width:240px}.hub-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem}.hub-panel{overflow:hidden;min-width:0}.hub-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;padding:1.25rem 1.35rem;border-bottom:1px solid #203b57}.hub-head h3{font-size:1.8rem;margin-top:.2rem}.hub-status{display:inline-flex;align-items:center;border-radius:999px;padding:.45rem .7rem;font-size:.72rem;font-weight:800;background:#102941}.hub-online{color:#62e6a7}.hub-online i{background:#36df92;box-shadow:0 0 12px #36df92}.hub-offline,.hub-disabled{color:#ff8a9e}.hub-offline i,.hub-disabled i{background:#ff7188}.hub-degraded,.hub-reconnecting,.hub-connecting{color:#ffd58c}.hub-degraded i,.hub-reconnecting i,.hub-connecting i{background:#ffb92e}.hub-metrics{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid #203b57}.hub-metrics div{padding:.9rem 1.1rem;border-right:1px solid #203b57}.hub-metrics div:last-child{border-right:0}.hub-metrics strong{display:block;margin-top:.2rem;font-size:1.05rem}.hub-error{margin:1rem;background:#351823;border:1px solid #703045;color:#ffb6c2;border-radius:10px;padding:.75rem}.table-wrap{overflow:auto;max-height:500px}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:.85rem 1rem;border-bottom:1px solid #18334b;white-space:nowrap}th{position:sticky;top:0;background:#0c1d31;z-index:1;font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:#7890a8}tr.tx{background:linear-gradient(90deg,rgba(255,45,64,.34),rgba(255,45,64,.07));box-shadow:inset 5px 0 #ff2d40}.tx-pill,.status{display:inline-flex;align-items:center;gap:.4rem;border-radius:999px;padding:.3rem .55rem;font-size:.7rem;font-weight:800}.tx-pill{background:#ff2d40;color:#fff}.status{background:#123451;color:#8bd9ff}.status.tx{background:#8f1623;color:#fff}.dot{width:.5rem;height:.5rem;border-radius:50%;background:#fff;box-shadow:0 0 12px #fff}.hub-empty{padding:2.2rem 1rem;text-align:center;color:#7890a8}@media(max-width:1100px){.hub-grid{grid-template-columns:1fr}}@media(max-width:700px){header,.toolbar,.hub-head{flex-direction:column;align-items:flex-start}.toolbar input{width:100%;min-width:0}.hub-metrics{grid-template-columns:1fr}.hub-metrics div{border-right:0;border-bottom:1px solid #203b57}.hub-metrics div:last-child{border-bottom:0}th,td{padding:.75rem}}

/* Incremental live updates preserve each hub's scrollbar. */
.table-wrap{scrollbar-gutter:stable both-edges;overscroll-behavior:contain}
tr.tx-change{animation:txPulse .8s ease-out}
@keyframes txPulse{0%{filter:brightness(1.8)}100%{filter:brightness(1)}}

tr.tx td{color:#fff}tr.tx [data-cell="node"],tr.tx [data-cell="callsign"]{font-weight:900}

/* Network-wide transmit direction */
tr.tx-origin{background:linear-gradient(90deg,rgba(255,45,64,.38),rgba(255,45,64,.08));box-shadow:inset 5px 0 #ff2d40}
tr.tx-origin td{color:#fff}tr.tx-origin [data-cell="node"],tr.tx-origin [data-cell="callsign"]{font-weight:900}
tr.tx-out{background:linear-gradient(90deg,rgba(255,174,46,.22),rgba(255,174,46,.04));box-shadow:inset 4px 0 #ffae2e}
.tx-pill.tx-in{background:#ff2d40;color:#fff}
.tx-pill.tx-out-pill{background:#9a5b00;color:#fff}
.status.tx-in-status{background:#8f1623;color:#fff}
.status.tx-out-status{background:#704300;color:#ffdca0}
tr.tx{background:transparent;box-shadow:none}

/* Network TX roles: a local/IAX origin makes the hub itself red; relay hubs
   remain amber. A directly linked node origin still highlights its red row. */
.hub-panel.hub-tx-origin{border-color:#ff334d;box-shadow:0 0 0 1px rgba(255,51,77,.35),0 20px 60px rgba(255,30,55,.18)}
.hub-panel.hub-tx-local .hub-head{background:linear-gradient(90deg,rgba(255,35,58,.38),rgba(255,35,58,.08));box-shadow:inset 6px 0 #ff2d40}
.hub-panel.hub-tx-relay{border-color:#9a681d}
.hub-panel.hub-tx-relay .hub-head{background:linear-gradient(90deg,rgba(255,174,46,.18),rgba(255,174,46,.03));box-shadow:inset 4px 0 #ffae2e}
.hub-status.hub-transmitting{background:#8f1623;color:#fff;box-shadow:0 0 18px rgba(255,45,64,.38)}
.hub-status.hub-transmitting i{background:#ff4257;box-shadow:0 0 14px #ff4257}
.hub-status.hub-relaying{background:#704300;color:#ffdca0}
.hub-status.hub-relaying i{background:#ffae2e;box-shadow:0 0 12px #ffae2e}


/* Robust independent scrolling for every hub panel. */
.hub-panel{display:flex;flex-direction:column;min-height:0}
.table-wrap{
  position:relative;
  height:500px;
  max-height:500px;
  min-height:260px;
  overflow-x:auto!important;
  overflow-y:scroll!important;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x pan-y;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  min-width:0;
}
.table-wrap table{min-width:980px}
.table-wrap[hidden]{display:block!important}
@media(max-width:1100px){.table-wrap{height:460px;max-height:460px}}
@media(max-width:700px){.table-wrap{height:420px;max-height:420px;min-height:220px}}

/* Protected node-directory administration */
.header-actions,.toolbar-actions,.form-actions{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.admin-button,.secondary-button,.primary-button,.danger-button,.row-edit-button,.row-drop-button{border:0;border-radius:10px;padding:.7rem 1rem;font:inherit;font-weight:800;cursor:pointer}
.admin-button,.secondary-button,.row-edit-button{background:#102941;color:#9edcff;border:1px solid #31506d}
.row-drop-button{border:1px solid #8d3340;background:#481824;color:#ffd5da;padding:.35rem .6rem;font-size:.72rem}
.row-drop-button:hover{background:#6a1f2f;color:#fff}.row-drop-button:disabled{opacity:.6;cursor:wait}
.admin-row-actions{display:flex;gap:.4rem;align-items:center;white-space:nowrap}
.primary-button{background:#177fc0;color:#fff}.danger-button{background:#6f2030;color:#ffd8df}.danger-button:disabled{opacity:.45;cursor:not-allowed}
.admin-column{display:none}.admin-authenticated .admin-column{display:table-cell}.row-edit-button{padding:.35rem .6rem;font-size:.72rem}
.modal[hidden]{display:none}.modal{position:fixed;inset:0;z-index:1000;background:rgba(1,8,16,.78);display:grid;place-items:center;padding:1rem;backdrop-filter:blur(8px)}
.modal-card{position:relative;width:min(620px,100%);max-height:calc(100vh - 2rem);overflow:auto;background:#0c1d31;border:1px solid #31506d;border-radius:20px;padding:1.5rem;box-shadow:0 30px 90px rgba(0,0,0,.55)}
.modal-close{position:absolute;right:1rem;top:.75rem;border:0;background:transparent;color:#bcd0e6;font-size:2rem;cursor:pointer}.modal-card h2{margin:.35rem 0 1rem}
.admin-form{display:grid;gap:1rem}.admin-form label{display:grid;gap:.4rem;color:#bdd0e4;font-weight:700}.admin-form input,.admin-form textarea{width:100%;background:#071522;border:1px solid #29455f;color:#fff;border-radius:10px;padding:.8rem 1rem;font:inherit}.admin-form textarea{resize:vertical}
.form-note{font-size:.88rem}.form-error{color:#ff9cac}.form-success{color:#78e8ae}.form-message{border-radius:10px;padding:.75rem;background:#102941}
@media(max-width:700px){.header-actions,.toolbar-actions{width:100%}.toolbar-actions input{flex:1}.form-actions>*{width:100%}}


/* Separate All Hubs and network-priority views */
.view-tabs{display:flex;gap:.65rem;margin:1rem 0}
.view-tab{border:1px solid #31506d;background:#0c1d31;color:#9eb0c6;border-radius:999px;padding:.7rem 1.1rem;font:inherit;font-weight:800;cursor:pointer}
.view-tab.active{background:#177fc0;color:#fff;border-color:#4db8f4}
.dashboard-view[hidden]{display:none!important}
.priority-panel{background:rgba(12,29,49,.88);border:1px solid #203b57;border-radius:18px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.priority-wrap{height:650px;max-height:650px}
.priority-table{min-width:1580px!important}
.priority-table td[data-p="connectedAt"],.priority-table td[data-p="connectedDuration"],.priority-table td[data-p="txDuration"]{white-space:nowrap;font-variant-numeric:tabular-nums}
.priority-origin-hub,.priority-origin-node{background:linear-gradient(90deg,rgba(255,45,64,.38),rgba(255,45,64,.08));box-shadow:inset 5px 0 #ff2d40}
.priority-relay-hub,.priority-relay-link{background:linear-gradient(90deg,rgba(255,174,46,.22),rgba(255,174,46,.04));box-shadow:inset 4px 0 #ffae2e}
.role-pill{display:inline-flex;border-radius:999px;padding:.3rem .55rem;font-size:.7rem;font-weight:900;background:#123451;color:#8bd9ff}
.role-pill.origin{background:#8f1623;color:#fff}.role-pill.relay{background:#704300;color:#ffdca0}.role-pill.idle{background:#102941;color:#9eb0c6}
@media(max-width:700px){.view-tabs{overflow:auto}.priority-wrap{height:480px;max-height:480px}}


/* Network-wide current-origin banner below Hub Connections */
.transmitting-now{
  display:flex;align-items:center;justify-content:center;gap:.7rem;
  margin:-.15rem 0 1rem;padding:1rem 1.25rem;border-radius:14px;
  border:1px solid #ff5264;background:linear-gradient(90deg,rgba(143,22,35,.96),rgba(82,12,22,.96));
  color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,0 0 26px rgba(255,45,64,.34);
  font-size:clamp(1rem,2vw,1.35rem);letter-spacing:.035em;
}
.transmitting-now[hidden]{display:none!important}
.transmitting-now-label{font-weight:900}
.transmitting-now strong{font-size:1.08em;color:#fff;text-shadow:0 0 14px rgba(255,255,255,.3)}
.transmitting-now::before{content:'';width:.72rem;height:.72rem;flex:0 0 auto;border-radius:50%;background:#fff;box-shadow:0 0 0 5px rgba(255,255,255,.13),0 0 18px #fff;animation:txBannerPulse 1s ease-in-out infinite}
@keyframes txBannerPulse{0%,100%{transform:scale(.85);opacity:.72}50%{transform:scale(1.12);opacity:1}}
@media(max-width:700px){.transmitting-now{align-items:flex-start;justify-content:flex-start;flex-wrap:wrap}.transmitting-now::before{margin-top:.3rem}}


/* Persistent last completed network-origin transmission banner */
.last-transmitted{
  display:flex;align-items:center;justify-content:center;gap:.7rem;
  margin:-.45rem 0 1rem;padding:.85rem 1.25rem;border-radius:14px;
  border:1px solid #29e3dc;background:linear-gradient(90deg,rgba(7,103,113,.96),rgba(5,61,76,.96));
  color:#eaffff;box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,0 0 24px rgba(41,227,220,.24);
  font-size:clamp(.95rem,1.8vw,1.18rem);letter-spacing:.03em;
}
.last-transmitted-label{font-weight:900;color:#bffffc}
.last-transmitted strong{font-size:1.06em;color:#fff;text-shadow:0 0 13px rgba(41,227,220,.48)}
.last-transmitted::before{content:'';width:.66rem;height:.66rem;flex:0 0 auto;border-radius:50%;background:#43f2e9;box-shadow:0 0 0 5px rgba(67,242,233,.12),0 0 16px #43f2e9}
@media(max-width:700px){.last-transmitted{align-items:flex-start;justify-content:flex-start;flex-wrap:wrap}.last-transmitted::before{margin-top:.26rem}}


/* Three-minute repeater timeout NOC panel */
.tx-noc-panel{
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-areas:
    "origin origin"
    "elapsed remaining"
    "warning warning";
  gap:.65rem 2rem;
  padding:1.15rem 1.5rem 1.25rem;
  text-align:center;
}
.tx-noc-panel::before{display:none}
.tx-origin-line{grid-area:origin;display:flex;align-items:center;justify-content:center;gap:.75rem;flex-wrap:wrap}
.tx-clock-block{grid-area:elapsed;display:flex;flex-direction:column;align-items:center;justify-content:center}
.tx-remaining-block{grid-area:remaining;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:12rem}
.tx-clock-caption{font-size:.72rem;font-weight:900;letter-spacing:.16em;opacity:.84}
.tx-elapsed-clock{
  display:block;min-width:5ch;margin:.05rem 0;
  font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  font-size:clamp(3.25rem,8vw,6.5rem)!important;line-height:1;
  letter-spacing:.04em;font-variant-numeric:tabular-nums;
}
.tx-remaining-clock{
  display:block;min-width:5ch;margin:.12rem 0;
  font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  font-size:clamp(2rem,4.8vw,3.8rem)!important;line-height:1;
  letter-spacing:.04em;font-variant-numeric:tabular-nums;
}
.tx-warning-message{grid-area:warning;font-size:clamp(.82rem,1.8vw,1.15rem);font-weight:950;letter-spacing:.11em}
.transmitting-now.tx-warning-120{
  color:#161000;border-color:#ffe44f;
  animation:txWarningYellow .8s steps(2,end) infinite;
}
.transmitting-now.tx-warning-120 strong,.transmitting-now.tx-warning-120 .transmitting-now-label{color:#161000;text-shadow:none}
.transmitting-now.tx-warning-150{
  color:#fff;border-color:#fff;
  animation:txWarningRedBlue .5s steps(2,end) infinite;
}
.transmitting-now.tx-warning-150 strong,.transmitting-now.tx-warning-150 .transmitting-now-label{color:#fff}
.transmitting-now.tx-timeout-reached{
  color:#fff;border-color:#fff;background:#75000f;
  animation:txTimeoutReached .35s steps(2,end) infinite;
}
@keyframes txWarningYellow{
  0%,49%{background:#ffe44f;box-shadow:0 0 34px rgba(255,228,79,.75)}
  50%,100%{background:#ffb300;box-shadow:0 0 34px rgba(255,179,0,.8)}
}
@keyframes txWarningRedBlue{
  0%,49%{background:#cf132d;box-shadow:0 0 38px rgba(255,25,55,.85)}
  50%,100%{background:#075ee8;box-shadow:0 0 38px rgba(25,105,255,.9)}
}
@keyframes txTimeoutReached{
  0%,49%{background:#8e0015;box-shadow:0 0 42px rgba(255,20,50,.95)}
  50%,100%{background:#111;box-shadow:0 0 42px rgba(255,255,255,.6)}
}
@media(max-width:700px){
  .tx-noc-panel{grid-template-columns:1fr;grid-template-areas:"origin" "elapsed" "remaining" "warning";gap:.65rem;padding:1rem}
  .tx-remaining-block{min-width:0}
}
@media(prefers-reduced-motion:reduce){
  .transmitting-now.tx-warning-120,.transmitting-now.tx-warning-150,.transmitting-now.tx-timeout-reached{animation-duration:1.6s}
}
}