:root{
  --nocx-bg:#030914;
  --nocx-bg-2:#071321;
  --nocx-panel:rgba(8,19,34,.72);
  --nocx-panel-soft:rgba(12,25,43,.58);
  --nocx-line:rgba(115,211,233,.13);
  --nocx-line-strong:rgba(115,211,233,.24);
  --nocx-text:#eef5ff;
  --nocx-soft:rgba(224,236,255,.76);
  --nocx-muted:rgba(174,197,227,.58);
  --nocx-blue:#53bbff;
  --nocx-cyan:#6ef4ff;
  --nocx-green:#40e79a;
  --nocx-yellow:#e8c661;
  --nocx-red:#ff6b79;
  --nocx-orange:#ffab61;
}

.content-wrapper.nocx-page,
.content-wrapper.nocx-page > .content,
.content-wrapper.nocx-page .content{
  background:transparent !important;
}

.nocx-shell,
.nocx-shell *{
  box-sizing:border-box;
}

.nocx-shell{
  position:relative;
  color:var(--nocx-text);
  display:flex;
  flex-direction:column;
  gap:12px;
  min-height:calc(100vh - 110px);
  padding:14px 16px 16px;
  background:
    radial-gradient(circle at 50% 42%, rgba(84,186,255,.13), rgba(84,186,255,0) 24%),
    linear-gradient(180deg, rgba(4,10,18,.96), rgba(3,8,14,.98));
  border:1px solid rgba(120,182,255,.08);
  border-radius:18px;
  overflow:hidden;
}

.nocx-shell::before,
.nocx-shell::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}

.nocx-shell::before{
  background-image:
    linear-gradient(rgba(99,160,245,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,160,245,.05) 1px, transparent 1px);
  background-size:44px 44px;
  opacity:.34;
}

.nocx-shell::after{
  background:
    linear-gradient(90deg, transparent 0 1.2%, rgba(73,173,255,.12) 1.2% 1.32%, transparent 1.32% 98.68%, rgba(73,173,255,.12) 98.68% 98.8%, transparent 98.8%),
    linear-gradient(180deg, transparent 0 2.5%, rgba(73,173,255,.09) 2.5% 2.62%, transparent 2.62% 97.3%, rgba(73,173,255,.08) 97.3% 97.42%, transparent 97.42%),
    radial-gradient(circle at 11% 15%, rgba(84,186,255,.55) 0 2px, transparent 2px),
    radial-gradient(circle at 89% 83%, rgba(84,186,255,.55) 0 2px, transparent 2px),
    linear-gradient(135deg, transparent 0 93%, rgba(78,168,255,.20) 93% 93.15%, transparent 93.15%),
    linear-gradient(315deg, transparent 0 93%, rgba(78,168,255,.18) 93% 93.15%, transparent 93.15%);
  opacity:.22;
}

.nocx-topbar,
.nocx-panel{
  position:relative;
  z-index:1;
  background:linear-gradient(180deg, rgba(6,13,23,.86), rgba(6,13,23,.52));
  border:1px solid rgba(112,174,255,.08);
  border-radius:14px;
  backdrop-filter:blur(6px);
}

.nocx-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:52px;
  padding:8px 12px;
}

.nocx-topbar__actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.nocx-status-strip{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  flex:1;
  min-width:0;
}

.nocx-strip-item{
  position:relative;
  min-height:36px;
  display:grid;
  grid-template-columns:20px auto auto;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border:1px solid rgba(116,176,255,.07);
  border-radius:11px;
  background:rgba(255,255,255,.02);
}

.nocx-strip-item .label{
  font-size:11px;
  color:var(--nocx-muted);
}

.nocx-strip-item strong{
  font-size:13px;
  color:#fff;
  justify-self:end;
  line-height:1;
}

.nocx-strip-item.is-state{
  padding-right:34px;
}

.nocx-strip-item.is-state .dot{
  position:absolute;
  top:50%;
  right:12px;
  transform:translateY(-50%);
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--nocx-green);
  box-shadow:0 0 0 5px rgba(64,231,154,.12);
}

.nocx-action,
.nocx-refresh{
  min-height:36px;
  padding:0 13px;
  border-radius:999px;
  border:1px solid rgba(116,176,255,.10);
  background:rgba(255,255,255,.03);
  color:#eef5ff;
  font-weight:800;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:.18s ease;
}

.nocx-action:hover,
.nocx-refresh:hover{
  border-color:rgba(116,176,255,.26);
  background:rgba(255,255,255,.05);
  color:#fff;
}

.nocx-refresh{
  cursor:pointer;
  background:linear-gradient(180deg, rgba(83,187,255,.14), rgba(83,187,255,.06));
}

.nocx-layout{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:330px minmax(0,1fr) 320px;
  gap:14px;
  align-items:start;
}

.nocx-leftbar,
.nocx-main,
.nocx-rightbar{
  display:flex;
  flex-direction:column;
  gap:14px;
  min-width:0;
}

.nocx-lower-stack{
  display:flex;
  flex-direction:column;
  gap:14px;
  min-width:0;
}

.nocx-panel{
  padding:12px 14px;
}

.nocx-panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,transparent 5%,rgba(112,226,241,.48) 34%,rgba(232,198,97,.30) 70%,transparent 96%) top/100% 1px no-repeat,
    radial-gradient(circle at 16% 0%,rgba(87,215,235,.045),transparent 24%),
    radial-gradient(circle at 88% 100%,rgba(232,198,97,.025),transparent 22%);
  opacity:.42;
}

.nocx-panel__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
  padding-bottom:8px;
  border-bottom:1px solid rgba(116,176,255,.08);
}

.nocx-panel__head.compact{
  margin-bottom:8px;
}

.nocx-panel__head h3{
  display:flex;
  align-items:center;
  gap:9px;
  margin:0;
  font-size:18px;
  font-weight:900;
  color:#fff;
}

.nocx-panel__head p{
  margin:4px 0 0;
  color:var(--nocx-soft);
  font-size:11px;
  line-height:1.6;
}

.nocx-head-meta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.nocx-soft-badge,
.nocx-inline-value{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(116,176,255,.10);
  background:rgba(255,255,255,.03);
  font-size:12px;
  color:#d8e6ff;
}

.nocx-soft-badge strong,
.nocx-inline-value{
  font-weight:900;
  color:#fff;
}

.nocx-summary-list{
  display:flex;
  flex-direction:column;
}

.nocx-summary-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-height:44px;
  border-bottom:1px solid rgba(255,255,255,.05);
  color:#dfeaff;
}

.nocx-summary-row:last-child{
  border-bottom:none;
}

.nocx-summary-row span{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  color:var(--nocx-soft);
}

.nocx-summary-row strong{
  font-size:17px;
  color:#fff;
}

.nocx-alert-feed,
.nocx-traffic-rail{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.nocx-alert-item,
.nocx-traffic-source{
  position:relative;
  padding:10px 0 10px 14px;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.nocx-alert-item:last-child,
.nocx-traffic-source:last-child{
  border-bottom:none;
}

.nocx-alert-item::before{
  content:"";
  position:absolute;
  right:0;
  top:15px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--nocx-blue);
}

.nocx-alert-item.warn::before{ background:var(--nocx-yellow); }
.nocx-alert-item.danger::before{ background:var(--nocx-red); }

.nocx-alert-item__top,
.nocx-traffic-source__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
}

.nocx-alert-item__title,
.nocx-traffic-source__name strong{
  font-size:14px;
  font-weight:800;
  color:#fff;
}

.nocx-alert-item__meta,
.nocx-traffic-source__name small{
  font-size:11px;
  color:var(--nocx-muted);
}

.nocx-alert-item__text{
  margin-top:4px;
  color:var(--nocx-soft);
  font-size:12px;
  line-height:1.55;
}

.nocx-summary-band{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-bottom:8px;
}

.nocx-band-item{
  min-height:68px;
  padding:10px 12px;
  border:1px solid rgba(116,176,255,.08);
  border-radius:13px;
  background:rgba(255,255,255,.02);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
}

.nocx-band-item span{
  font-size:11px;
  color:var(--nocx-muted);
}

.nocx-band-item strong{
  font-size:19px;
  color:#fff;
  line-height:1.1;
  direction:ltr;
  unicode-bidi:isolate;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

.nocx-band-item.highlight{
  background:linear-gradient(180deg, rgba(255,171,97,.12), rgba(255,171,97,.03));
  border-color:rgba(255,171,97,.16);
}

.nocx-chart-wrap{
  height:210px;
  padding:6px 0 8px;
  border-bottom:1px solid rgba(255,255,255,.05);
  margin-bottom:6px;
}

#trafficCanvas{
  width:100%;
  height:100%;
  display:block;
}

.nocx-traffic-source__name{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.nocx-traffic-source__rates{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-top:8px;
}

.nocx-traffic-source__rates div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.nocx-traffic-source__rates span{
  font-size:11px;
  color:var(--nocx-muted);
}

.nocx-traffic-source__rates strong{
  font-size:12px;
  color:#fff;
  direction:ltr;
  unicode-bidi:isolate;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

.nocx-traffic-source__spark{
  margin-top:8px;
  height:28px;
}

.nocx-traffic-source__spark canvas{
  width:100%;
  height:100%;
  display:block;
}

.nocx-core-grid{
  display:block;
}

.nocx-router-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.nocx-router-item{
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.nocx-router-item:last-child{
  border-bottom:none;
}

.nocx-router-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
}

.nocx-router-name{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}

.nocx-router-name strong{
  font-size:15px;
  color:#fff;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.nocx-router-name small{
  font-size:11px;
  color:var(--nocx-muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.nocx-router-head-state{
  display:flex;
  align-items:center;
  gap:5px;
  flex:0 0 auto;
}

.nocx-router-temperature{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:3px;
  min-width:50px;
  min-height:28px;
  padding:0 7px;
  border:1px solid rgba(67,217,255,.16);
  border-radius:999px;
  background:rgba(67,217,255,.07);
  color:#8be8ff;
  font-size:10px;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

.nocx-router-temperature b{
  color:#e9fbff;
  font-size:11px;
  font-weight:900;
}

.nocx-router-temperature small{
  color:currentColor;
  font-size:9px;
}

.nocx-router-temperature.is-warm{
  color:#ffd166;
  border-color:rgba(255,209,102,.2);
  background:rgba(255,209,102,.08);
}

.nocx-router-temperature.is-hot{
  color:#ff7d89;
  border-color:rgba(255,107,121,.22);
  background:rgba(255,107,121,.09);
}

.nocx-router-temperature.is-unavailable{
  min-width:38px;
  color:var(--nocx-muted);
  border-color:rgba(255,255,255,.07);
  background:rgba(255,255,255,.025);
}

.nocx-router-meta{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px 10px;
}

.nocx-router-meta-item{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}

.nocx-router-meta-item span{
  font-size:11px;
  color:var(--nocx-muted);
}

.nocx-router-meta-item strong{
  font-size:12px;
  color:#fff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.nocx-table-wrap{
  overflow:hidden;
}

.nocx-table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
}

.nocx-table th,
.nocx-table td{
  border-bottom:1px solid rgba(255,255,255,.05);
  padding:10px 10px;
  text-align:right;
  vertical-align:middle;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:13px;
}

.nocx-table th{
  color:#bcd6ff;
  font-size:12px;
  font-weight:800;
  background:rgba(255,255,255,.01);
}

.nocx-table tbody tr:hover td{
  background:rgba(255,255,255,.025);
}

.nocx-table tbody tr:last-child td{
  border-bottom:none;
}

.nocx-table--airmax th:nth-child(1), .nocx-table--airmax td:nth-child(1){ width:16%; }
.nocx-table--airmax th:nth-child(2), .nocx-table--airmax td:nth-child(2){ width:20%; }
.nocx-table--airmax th:nth-child(3), .nocx-table--airmax td:nth-child(3){ width:16%; }
.nocx-table--airmax th:nth-child(4), .nocx-table--airmax td:nth-child(4){ width:13%; }
.nocx-table--airmax th:nth-child(5), .nocx-table--airmax td:nth-child(5){ width:13%; }
.nocx-table--airmax th:nth-child(6), .nocx-table--airmax td:nth-child(6){ width:10%; }
.nocx-table--airmax th:nth-child(7), .nocx-table--airmax td:nth-child(7){ width:12%; }

.nocx-name-cell{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}

.nocx-name-cell strong,
.nocx-name-cell small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
}

.nocx-name-cell strong{
  font-size:14px;
  color:#fff;
}

.nocx-name-cell small{
  font-size:11px;
  color:var(--nocx-muted);
}

.nocx-meter{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

.nocx-meter__bar{
  position:relative;
  flex:1;
  min-width:32px;
  height:5px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
}

.nocx-meter__bar i{
  position:absolute;
  inset:0 auto 0 0;
  border-radius:999px;
  background:linear-gradient(90deg, var(--nocx-blue), var(--nocx-cyan));
}

.nocx-meter.warn .nocx-meter__bar i{
  background:linear-gradient(90deg, var(--nocx-yellow), var(--nocx-orange));
}

.nocx-meter.danger .nocx-meter__bar i{
  background:linear-gradient(90deg, var(--nocx-orange), var(--nocx-red));
}

.nocx-meter strong{
  font-size:11px;
  min-width:34px;
  color:#fff;
}

.nocx-status-badge{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  font-size:11px;
  font-weight:900;
}

.nocx-status-badge::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:currentColor;
}

.nocx-status-badge.online{
  color:#bcffdb;
  background:rgba(64,231,154,.08);
  border-color:rgba(64,231,154,.15);
}

.nocx-status-badge.warn{
  color:#ffe49b;
  background:rgba(244,203,106,.08);
  border-color:rgba(244,203,106,.16);
}

.nocx-status-badge.offline{
  color:#ffc0c7;
  background:rgba(255,107,121,.07);
  border-color:rgba(255,107,121,.16);
}

.nocx-status-badge.partial{
  color:#9ee9ff;
  background:rgba(83,187,255,.08);
  border-color:rgba(83,187,255,.16);
}

.nocx-empty,
.nocx-empty-cell{
  color:var(--nocx-muted);
  font-size:13px;
  padding:12px 8px;
  text-align:center;
}

.nocx-empty--loading{
  color:#ffd96a;
  font-weight:950;
}

.nocx-empty--loading::before{
  content:"";
  display:inline-block;
  width:8px;
  height:8px;
  margin-left:7px;
  border-radius:50%;
  background:#ffd96a;
  box-shadow:0 0 10px rgba(255,217,106,.65);
  animation:nocxLoadingPulse 1s ease-in-out infinite alternate;
}

@keyframes nocxLoadingPulse{
  from{opacity:.45;transform:scale(.85)}
  to{opacity:1;transform:scale(1.12)}
}

.nocx-ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  flex:0 0 18px;
  opacity:.95;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  filter:drop-shadow(0 0 8px rgba(90,187,255,.16));
}

.nocx-summary-row .nocx-ico{
  width:16px;
  height:16px;
  flex-basis:16px;
}

.nocx-ico--pulse{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 12h4l2-4 4 8 2-4h6' fill='none' stroke='%235feaff' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.nocx-ico--clock{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8.5' fill='none' stroke='%2353bbff' stroke-width='2'/%3E%3Cpath d='M12 7v5l3 2' fill='none' stroke='%2353bbff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")}
.nocx-ico--alert{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4 21 19H3Z' fill='none' stroke='%23ff7b86' stroke-width='2'/%3E%3Cpath d='M12 9v4' fill='none' stroke='%23ff7b86' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='16.7' r='1' fill='%23ff7b86'/%3E%3C/svg%3E")}
.nocx-ico--users{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='9' r='3' fill='none' stroke='%235feaff' stroke-width='2'/%3E%3Cpath d='M4.5 18c.6-2.5 2.6-4 4.5-4s3.9 1.5 4.5 4' fill='none' stroke='%235feaff' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M16 7.5c1.5 0 2.8 1 3.2 2.4M16.5 14c1.5.2 2.7 1.3 3 2.8' fill='none' stroke='%2353bbff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")}
.nocx-ico--summary{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 18h14M7 14h10M9 10h6M11 6h2' fill='none' stroke='%2353bbff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")}
.nocx-ico--router{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='10' width='16' height='7' rx='2' fill='none' stroke='%235feaff' stroke-width='2'/%3E%3Cpath d='M8 10V7m8 3V7M7.5 13h.01M11.5 13h.01M15.5 13h.01' fill='none' stroke='%235feaff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")}
.nocx-ico--sector{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 18a9 9 0 0 1 14 0M8 15a5 5 0 0 1 8 0M11.5 12.5a2 2 0 0 1 1 0' fill='none' stroke='%235feaff' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='19' r='1.6' fill='%235feaff'/%3E%3C/svg%3E")}
.nocx-ico--tower{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4 7 20h10L12 4ZM9 12h6M8 16h8' fill='none' stroke='%235feaff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.nocx-ico--user-off{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10' cy='8.5' r='3' fill='none' stroke='%23ff9f5f' stroke-width='2'/%3E%3Cpath d='M5.2 18c.6-2.4 2.7-4 4.8-4s4.2 1.6 4.8 4' fill='none' stroke='%23ff9f5f' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='m16 7 4 4m0-4-4 4' fill='none' stroke='%23ff6b79' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")}
.nocx-ico--traffic{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 16h4l2-4 3 7 2-5h5' fill='none' stroke='%235feaff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

@media (max-width: 1500px){
  .nocx-layout{
    grid-template-columns:290px minmax(0,1fr) 300px;
  }

  .nocx-core-grid{
    grid-template-columns:280px minmax(0,1fr);
  }
}

@media (max-width: 1240px){
  .nocx-layout{
    grid-template-columns:1fr;
  }

  .nocx-leftbar,
  .nocx-rightbar{
    order:2;
  }

  .nocx-main{
    order:1;
  }

  .nocx-core-grid{
    grid-template-columns:1fr;
  }

  .nocx-status-strip{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .nocx-topbar{
    flex-direction:column;
    align-items:stretch;
  }

  .nocx-topbar__actions{
    justify-content:flex-start;
  }
}

@media (max-width: 760px){
  .nocx-shell{
    padding:10px;
  }

  .nocx-status-strip{
    grid-template-columns:1fr;
  }

  .nocx-summary-band{
    grid-template-columns:1fr;
  }

  .nocx-table th,
  .nocx-table td{
    font-size:12px;
    padding:8px 6px;
  }
}

/* ===== NOC dashboard fresh compact layout - phase 1 ===== */
.content-wrapper.nocx-page,
.content-wrapper.nocx-page > .content,
.content-wrapper.nocx-page .content{
  background:transparent !important;
}
.content-wrapper.nocx-page .content{padding:10px 12px 16px !important;}
.nocx-shell{
  min-height:calc(100vh - 26px) !important;
  padding:12px !important;
  gap:10px !important;
  border:0 !important;
  border-radius:0 !important;
  background:
    radial-gradient(circle at 45% 4%, rgba(43,136,255,.16), transparent 34%),
    linear-gradient(180deg, #050b14 0%, #07111e 100%) !important;
  box-shadow:none !important;
}
.nocx-shell::after{opacity:.12 !important;}
.nocx-shell::before{opacity:.22 !important;}

.nocx-topbar--control{
  min-height:50px !important;
  display:grid !important;
  grid-template-columns:auto minmax(170px, 280px) minmax(260px, 1fr) auto !important;
  align-items:center !important;
  gap:12px !important;
  padding:8px 12px !important;
  border-radius:18px !important;
  border:1px solid rgba(83,187,255,.09) !important;
  background:linear-gradient(180deg, rgba(10,21,38,.84), rgba(6,13,24,.66)) !important;
}
.nocx-window-controls{display:flex;align-items:center;gap:8px;direction:ltr;}
.nocx-win{width:10px;height:10px;border-radius:50%;border:0;padding:0;opacity:.9;box-shadow:0 0 0 4px rgba(255,255,255,.025);}
.nocx-win--close{background:#ff5f6d}.nocx-win--max{background:#43d9ff}.nocx-win--min{background:#25e193}
.nocx-topbar__title{display:flex;align-items:center;gap:10px;min-width:0;}
.nocx-topbar__title strong{display:block;color:#fff;font-size:18px;font-weight:900;line-height:1.1;white-space:nowrap;}
.nocx-topbar__title small{display:block;color:rgba(218,235,255,.54);font-size:11px;font-weight:800;letter-spacing:.02em;}
.nocx-search{height:38px;display:flex;align-items:center;gap:8px;padding:0 12px;border-radius:16px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.055);min-width:0;}
.nocx-search__icon{color:rgba(221,235,255,.55);font-size:18px;line-height:1;}
.nocx-search input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:#fff;font-weight:800;direction:rtl;}
.nocx-search input::placeholder{color:rgba(221,235,255,.45);}
.nocx-topbar--control .nocx-topbar__actions{justify-content:flex-end;flex-wrap:nowrap;gap:8px;}
.nocx-topbar--control .nocx-action,
.nocx-topbar--control .nocx-refresh{min-height:34px;padding:0 12px;border:0;background:rgba(255,255,255,.045);border-radius:14px;font-size:12px;}
.nocx-topbar--control .nocx-refresh{background:linear-gradient(135deg, rgba(67,217,255,.16), rgba(37,225,147,.08));}

.nocx-statsbar{
  position:relative;z-index:1;display:flex;align-items:center;gap:8px;overflow:auto;padding:8px 10px;border-radius:17px;
  background:linear-gradient(180deg, rgba(8,18,32,.74), rgba(6,12,22,.56));
  border:1px solid rgba(83,187,255,.075);backdrop-filter:blur(8px);
}
.nocx-statsbar::-webkit-scrollbar{height:4px}.nocx-statsbar::-webkit-scrollbar-thumb{background:rgba(83,187,255,.22);border-radius:99px;}
.nocx-stat-chip{flex:0 0 auto;min-height:32px;display:inline-flex;align-items:center;gap:8px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.035);color:rgba(222,235,255,.72);font-weight:850;white-space:nowrap;}
.nocx-stat-chip strong{color:#fff;font-weight:950;font-variant-numeric:tabular-nums;}
.nocx-stat-chip.is-green strong{color:#25e193}.nocx-stat-chip.is-cyan strong{color:#43d9ff}.nocx-stat-chip.is-red strong{color:#ff6b79}.nocx-stat-chip.is-purple strong{color:#c084fc}.nocx-stat-chip.is-yellow strong{color:#ffd166}
.nocx-stat-chip .dot{width:8px;height:8px;border-radius:50%;background:#25e193;box-shadow:0 0 0 5px rgba(37,225,147,.11);}

.nocx-layout{grid-template-columns:minmax(230px,.72fr) minmax(420px,1.55fr) minmax(250px,.86fr) !important;gap:10px !important;}
.nocx-leftbar,.nocx-main,.nocx-rightbar{gap:10px !important;}
.nocx-panel{padding:11px 12px !important;border:1px solid rgba(83,187,255,.075) !important;border-radius:18px !important;background:linear-gradient(180deg, rgba(9,19,34,.72), rgba(5,12,23,.62)) !important;box-shadow:0 18px 40px rgba(0,0,0,.16) !important;}
.nocx-panel__head{margin-bottom:8px !important;padding-bottom:8px !important;border-bottom:1px solid rgba(255,255,255,.055) !important;}
.nocx-panel__head h3{font-size:16px !important;}.nocx-panel__head p{font-size:10px !important;}
.nocx-panel--summary{height:auto !important;min-height:0 !important;max-height:none !important;}
.nocx-summary-row{min-height:44px !important;padding:8px 0 !important;}
.nocx-mini-stat{min-height:42px !important;}
.nocx-router-item{padding:10px 12px !important;border-radius:15px !important;}
.nocx-router-meta{gap:8px !important;}
.nocx-panel--alerts{height:230px !important;min-height:230px !important;max-height:230px !important;}
.nocx-chart-wrap{min-height:190px !important;}
.nocx-panel--traffic-rail .nocx-chart-wrap{height:220px !important;}
.nocx-lower-stack{position:relative;z-index:1;display:grid !important;grid-template-columns:1fr 1fr !important;gap:10px !important;margin-top:10px !important;}
.nocx-table th,.nocx-table td{padding:9px 8px !important;}
@media (max-width: 1320px){.nocx-layout{grid-template-columns:1fr !important}.nocx-lower-stack{grid-template-columns:1fr !important}.nocx-topbar--control{grid-template-columns:1fr !important}.nocx-window-controls{justify-content:flex-start}.nocx-topbar__title{justify-content:flex-start}.nocx-topbar__actions{justify-content:flex-start!important;flex-wrap:wrap!important}}

/* =========================================================
   UA NOC Dashboard - Phase 2 refinement
   هدفها: توحيد الخلفية، شريط إحصاءات مستقل، ضغط الكروت،
   ومنع عودة كروت CPU/RAM/PPP ككروت مستقلة.
   ========================================================= */
:root{
  --nocx-bg:#050b15;
  --nocx-bg-2:#07111f;
  --nocx-panel:rgba(8,18,32,.66);
  --nocx-panel-soft:rgba(9,20,36,.50);
  --nocx-line:rgba(110,244,255,.075);
  --nocx-line-strong:rgba(110,244,255,.15);
}

html,
body,
body.ua-authed,
.content-wrapper.nocx-page,
.content-wrapper.nocx-page > .content,
.content-wrapper.nocx-page .content{
  background:
    radial-gradient(circle at 45% -12%, rgba(67,217,255,.12), transparent 34%),
    radial-gradient(circle at 4% 8%, rgba(47,141,255,.08), transparent 28%),
    linear-gradient(180deg, #050b15 0%, #07111f 100%) !important;
}

.nocx-shell{
  background:
    radial-gradient(circle at 50% 8%, rgba(67,217,255,.10), transparent 30%),
    linear-gradient(180deg, rgba(5,11,21,.96) 0%, rgba(6,14,26,.96) 100%) !important;
  border-color:rgba(110,244,255,.055) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035), 0 28px 80px rgba(0,0,0,.22) !important;
}

.nocx-shell::before{
  background-image:
    linear-gradient(rgba(110,244,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110,244,255,.030) 1px, transparent 1px) !important;
  opacity:.30 !important;
}

.nocx-shell::after{
  opacity:.13 !important;
}

/* الشريط العلوي: نظيف وخفيف، بدون إحصاءات داخله */
.nocx-topbar--control{
  min-height:50px !important;
  padding:7px 10px !important;
  border:0 !important;
  border-radius:18px !important;
  background:linear-gradient(180deg, rgba(9,20,36,.76), rgba(7,15,28,.48)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045) !important;
  display:grid !important;
  grid-template-columns:auto minmax(190px, .65fr) minmax(260px, 1fr) auto !important;
  align-items:center !important;
}

.nocx-window-controls{gap:8px !important;}
.nocx-win{
  width:12px !important;
  height:12px !important;
  border-radius:50% !important;
  border:0 !important;
  opacity:.86 !important;
  box-shadow:0 0 0 4px rgba(255,255,255,.025) !important;
}
.nocx-win:hover{opacity:1 !important;transform:translateY(-1px) !important;}

.nocx-topbar__title strong{font-size:17px !important;}
.nocx-topbar__title small{font-size:10px !important;}
.nocx-search{
  height:36px !important;
  border:0 !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.04) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.nocx-topbar--control .nocx-action,
.nocx-topbar--control .nocx-refresh{
  min-height:32px !important;
  padding:0 10px !important;
  border:0 !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.045) !important;
  box-shadow:none !important;
}

/* شريط الإحصاءات: صف مستقل تحت الأعلى، بدون حواف لكل عنصر */
.nocx-statsbar{
  min-height:42px !important;
  padding:6px 10px !important;
  gap:8px !important;
  border:0 !important;
  border-radius:16px !important;
  background:linear-gradient(90deg, rgba(67,217,255,.065), rgba(255,255,255,.025), rgba(37,225,147,.045)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 12px 34px rgba(0,0,0,.16) !important;
  overflow-x:auto !important;
}
.nocx-stat-chip{
  min-height:30px !important;
  padding:0 11px !important;
  border:0 !important;
  border-radius:999px !important;
  background:transparent !important;
  box-shadow:none !important;
  gap:6px !important;
}
.nocx-stat-chip + .nocx-stat-chip{
  box-shadow:inset 1px 0 0 rgba(255,255,255,.045) !important;
}
.nocx-stat-chip span{font-size:11px !important;color:rgba(222,235,255,.60) !important;}
.nocx-stat-chip strong{font-size:13px !important;}

/* منع ظهور كروت الملخص القديمة إن وُلدت من أي كود سابق */
.nocx-panel--cpu,
.nocx-panel--ram,
.nocx-panel--ppp,
.nocx-card--cpu,
.nocx-card--ram,
.nocx-card--ppp,
.nocx-summary-card--cpu,
.nocx-summary-card--ram,
.nocx-summary-card--ppp{
  display:none !important;
}

/* ضغط عام للكروت مع الحفاظ على مخططات الترافيك والجداول */
.nocx-layout{
  gap:10px !important;
  grid-template-columns:minmax(220px,.70fr) minmax(430px,1.58fr) minmax(240px,.82fr) !important;
}
.nocx-leftbar,
.nocx-main,
.nocx-rightbar,
.nocx-lower-stack{gap:10px !important;}
.nocx-panel{
  padding:10px 11px !important;
  border:0 !important;
  border-radius:18px !important;
  background:linear-gradient(180deg, rgba(10,21,38,.66), rgba(5,12,23,.50)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035), 0 16px 36px rgba(0,0,0,.15) !important;
}
.nocx-panel__head{margin-bottom:8px !important;}
.nocx-panel__head h3{font-size:15px !important;}
.nocx-panel__head p{font-size:11px !important;}
.nocx-summary-row,
.nocx-mini-stat,
.nocx-band-item{
  border:0 !important;
  border-radius:14px !important;
  background:rgba(255,255,255,.025) !important;
}
.nocx-alert-item{
  border:0 !important;
  border-radius:13px !important;
  min-height:48px !important;
}
.nocx-chart-wrap{min-height:190px !important;}
.nocx-panel--traffic-rail .nocx-chart-wrap{min-height:210px !important;}

@media (max-width: 1320px){
  .nocx-topbar--control{grid-template-columns:1fr !important;gap:8px !important;}
  .nocx-layout{grid-template-columns:1fr !important;}
}

/* NOC Dashboard - Phase 3 compact production polish */
.content-wrapper.nocx-page,
.content-wrapper.nocx-page > .content,
.content-wrapper.nocx-page .content{
  background:transparent !important;
}
.nocx-page .content{padding:10px 12px !important;}
.nocx-shell{
  max-width:none !important;
  min-height:calc(100vh - 20px) !important;
  padding:10px !important;
  border:1px solid rgba(117,215,232,.10) !important;
  border-radius:22px !important;
  background:
    radial-gradient(circle at 16% -4%, rgba(68,211,235,.13), transparent 28%),
    radial-gradient(circle at 84% 1%, rgba(232,198,97,.07), transparent 24%),
    radial-gradient(circle at 50% 58%, rgba(31,105,164,.055), transparent 38%),
    linear-gradient(180deg, rgba(4,11,21,.97), rgba(5,14,27,.98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    inset 0 0 80px rgba(53,170,210,.025),
    0 26px 70px rgba(0,0,0,.28) !important;
}
.nocx-shell::before{
  background-image:
    linear-gradient(rgba(75,206,228,.030) 1px, transparent 1px),
    linear-gradient(90deg, rgba(75,206,228,.024) 1px, transparent 1px),
    linear-gradient(135deg, transparent 0 48%, rgba(232,198,97,.020) 49% 51%, transparent 52% 100%) !important;
  background-size:36px 36px,36px 36px,84px 84px !important;
  opacity:.38 !important;
}

/* Topbar with stats separated below */
.nocx-topbar--control{
  min-height:46px !important;
  padding:6px 8px !important;
  border-radius:16px !important;
  grid-template-columns:auto minmax(190px,.65fr) minmax(260px,1fr) auto !important;
  gap:10px !important;
  background:linear-gradient(180deg, rgba(9,20,36,.70), rgba(7,16,30,.40)) !important;
}
.nocx-topbar__title{gap:9px !important;}
.nocx-topbar__title .nocx-ico{width:30px !important;height:30px !important;border-radius:12px !important;}
.nocx-topbar__title strong{font-size:16px !important;}
.nocx-topbar__title small{display:none !important;}
.nocx-search{height:34px !important;max-width:440px !important;margin-inline:auto !important;}
.nocx-topbar__actions{gap:6px !important;}
.nocx-topbar--control .nocx-action{font-size:11px !important;}
.nocx-refresh{font-size:12px !important;}
.nocx-window-controls{order:-1 !important;}

/* Stats bar is the only place for compact counters */
.nocx-statsbar{
  display:flex !important;
  align-items:center !important;
  min-height:38px !important;
  margin-top:8px !important;
  padding:4px 8px !important;
  border-radius:15px !important;
  background:linear-gradient(90deg, rgba(67,217,255,.075), rgba(255,255,255,.022), rgba(37,225,147,.055)) !important;
}
.nocx-stat-chip{
  min-width:auto !important;
  min-height:28px !important;
  padding:0 9px !important;
  flex:0 0 auto !important;
}
.nocx-stat-chip span{font-size:10.5px !important;}
.nocx-stat-chip strong{font-size:12.5px !important;}
.nocx-stat-chip .dot{width:7px !important;height:7px !important;}

/* More compact card matrix */
.nocx-layout{
  margin-top:10px !important;
  gap:10px !important;
  grid-template-columns:minmax(210px,.62fr) minmax(500px,1.75fr) minmax(260px,.85fr) !important;
  align-items:stretch !important;
}
.nocx-layout > :is(.nocx-leftbar,.nocx-main,.nocx-rightbar){height:100% !important;}
.nocx-main .nocx-core-grid{height:100% !important;}
.nocx-layout > :is(.nocx-leftbar,.nocx-rightbar) > .nocx-panel,
.nocx-main .nocx-core-grid > .nocx-panel{height:100% !important;min-height:100% !important;}
.nocx-panel--summary,
.nocx-panel--traffic-main,
.nocx-panel--routers{
  display:flex !important;
  flex-direction:column !important;
  min-height:0 !important;
}
.nocx-lower-stack{gap:10px !important;margin-top:10px !important;}
body.ua-authed.ua-page-dashboard .nocx-panel{
  padding:9px 10px !important;
  border-radius:17px !important;
  border:1px solid rgba(113,207,229,.105) !important;
  background:
    linear-gradient(145deg, rgba(15,31,51,.74), rgba(7,16,30,.68) 62%, rgba(11,19,29,.72)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 -1px 0 rgba(232,198,97,.025),
    0 15px 32px rgba(0,0,0,.18) !important;
}
.nocx-panel__head{
  min-height:34px !important;
  margin-bottom:7px !important;
  border-bottom-color:rgba(120,210,229,.10) !important;
}
.nocx-panel__head h3{
  font-size:14px !important;
  color:#f4f8ff !important;
  text-shadow:0 1px 12px rgba(86,211,232,.08) !important;
}
.nocx-panel__head p{font-size:10.5px !important;line-height:1.3 !important;}
.nocx-head-meta{gap:5px !important;}
.nocx-soft-badge{min-height:24px !important;padding:0 7px !important;font-size:10px !important;border:0 !important;}

/* Remove the unwanted main cards if a generator keeps them */
.nocx-panel--cpu,
.nocx-panel--ram,
.nocx-panel--ppp,
.nocx-card--cpu,
.nocx-card--ram,
.nocx-card--ppp,
.nocx-summary-card--cpu,
.nocx-summary-card--ram,
.nocx-summary-card--ppp,
[data-card="cpu"],
[data-card="ram"],
[data-card="ppp"],
[data-widget="cpu"],
[data-widget="ram"],
[data-widget="ppp-sessions"]{display:none !important;}

/* Summary content consumes the same available height as its sibling cards. */
.nocx-summary-list{display:flex !important;flex:0 0 auto !important;gap:6px !important;}
body.ua-authed.ua-page-dashboard .nocx-summary-row{
  min-height:36px !important;
  padding:7px 8px !important;
  border-radius:12px !important;
  border:1px solid rgba(117,208,228,.055) !important;
  background:linear-gradient(90deg, rgba(255,255,255,.028), rgba(78,196,221,.018)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018) !important;
  transition:border-color .16s ease,background .16s ease,transform .16s ease !important;
}
body.ua-authed.ua-page-dashboard .nocx-summary-row:hover{
  transform:translateY(-1px) !important;
  border-color:rgba(112,220,237,.16) !important;
  background:linear-gradient(90deg, rgba(79,210,232,.055), rgba(232,198,97,.025)) !important;
}
.nocx-summary-row span{font-size:11.5px !important;}
.nocx-summary-row strong{font-size:14px !important;}
.nocx-mini-stat{min-height:36px !important;padding:7px 8px !important;border-radius:12px !important;}
.nocx-mini-stat__label{font-size:11.5px !important;}
.nocx-mini-stat__value{font-size:14px !important;}
.nocx-receiver-stations-list{
  display:flex !important;
  flex:1 1 0 !important;
  flex-direction:column !important;
  min-height:0 !important;
  max-height:none !important;
  gap:4px !important;
  overflow:auto !important;
}
body.ua-authed.ua-page-dashboard .nocx-receiver-station{
  flex:1 1 0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  min-height:32px !important;
  padding:6px 8px !important;
  border-radius:10px !important;
  border:1px solid rgba(112,208,229,.05) !important;
  background:linear-gradient(90deg,rgba(255,255,255,.025),rgba(72,194,217,.014)) !important;
}
.nocx-receiver-station strong{font-size:11.5px !important;}
.nocx-receiver-station span{font-size:14px !important;}

/* Routers fill their rail; many routers scroll instead of enlarging the page. */
.nocx-router-list{
  flex:1 1 0 !important;
  min-height:0 !important;
  gap:6px !important;
  overflow:auto !important;
}
.nocx-router-list > .nocx-empty{
  flex:1 1 auto !important;
  display:grid !important;
  place-items:center !important;
}
body.ua-authed.ua-page-dashboard .nocx-router-item{
  flex:1 1 0 !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:space-evenly !important;
  min-height:128px !important;
  padding:8px !important;
  border-radius:13px !important;
  border:1px solid rgba(112,208,229,.065) !important;
  background:linear-gradient(105deg,rgba(255,255,255,.030),rgba(54,185,211,.020),rgba(232,198,97,.016)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02) !important;
  transition:border-color .16s ease,background .16s ease !important;
}
body.ua-authed.ua-page-dashboard .nocx-router-item:hover{
  border-color:rgba(111,221,238,.17) !important;
  background:linear-gradient(105deg,rgba(65,207,230,.060),rgba(255,255,255,.025),rgba(232,198,97,.028)) !important;
}
.nocx-panel--alerts{
  height:204px !important;
  min-height:204px !important;
  max-height:204px !important;
  margin-top:10px !important;
}
.nocx-alert-feed{height:calc(100% - 45px) !important;}
.nocx-alert-item{min-height:42px !important;padding:7px 8px !important;}

/* Traffic chart absorbs surplus height while source rows keep their density. */
.nocx-panel--traffic-rail{min-height:100% !important;}
.nocx-panel--traffic-main .nocx-chart-wrap{flex:1 1 198px !important;height:auto !important;}
.nocx-panel--traffic-main .nocx-traffic-rail{flex:0 0 auto !important;}
.nocx-summary-band--traffic{gap:6px !important;}
body.ua-authed.ua-page-dashboard .nocx-band-item{
  min-height:42px !important;
  padding:7px 8px !important;
  border:1px solid rgba(111,207,228,.07) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.032),rgba(44,152,183,.018)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025) !important;
}
.nocx-band-item span{font-size:10.5px !important;}
.nocx-band-item strong{font-size:14px !important;}
body.ua-authed.ua-page-dashboard .nocx-chart-wrap{
  min-height:178px !important;
  border:1px solid rgba(105,204,225,.09) !important;
  border-radius:14px !important;
  background:
    linear-gradient(rgba(71,201,224,.040) 1px, transparent 1px),
    linear-gradient(90deg, rgba(71,201,224,.034) 1px, transparent 1px),
    radial-gradient(circle at 76% 12%,rgba(232,198,97,.045),transparent 30%),
    rgba(1,7,16,.34) !important;
  background-size:24px 24px,24px 24px,100% 100% !important;
  box-shadow:inset 0 0 28px rgba(56,177,216,.035) !important;
}
.nocx-panel--traffic-rail .nocx-chart-wrap{min-height:198px !important;}
.nocx-traffic-rail{gap:6px !important;}
body.ua-authed.ua-page-dashboard .nocx-traffic-source,
body.ua-authed.ua-page-dashboard .nocx-traffic-row{
  min-height:36px !important;
  padding:7px 8px !important;
  border-radius:12px !important;
  border:1px solid rgba(109,207,228,.06) !important;
  background:linear-gradient(90deg,rgba(255,255,255,.025),rgba(54,177,207,.015)) !important;
}

/* Tables: compact without horizontal noise */
body.ua-authed.ua-page-dashboard .nocx-table-wrap{
  border:1px solid rgba(111,207,228,.075) !important;
  border-radius:14px !important;
  background:linear-gradient(180deg,rgba(255,255,255,.022),rgba(3,10,20,.18)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02) !important;
}
.nocx-table th{
  height:34px !important;
  font-size:10.5px !important;
  font-weight:850 !important;
  color:rgba(231,241,252,.76) !important;
  border-color:rgba(111,207,228,.09) !important;
  background:linear-gradient(180deg,rgba(52,43,22,.72),rgba(25,26,29,.70)) !important;
}
.nocx-table td{height:42px !important;font-size:11.5px !important;}
.nocx-table tbody tr{background:transparent !important;}
.nocx-table tbody tr:hover{background:rgba(67,217,255,.045) !important;}
.nocx-host-cell strong{font-size:12px !important;}
.nocx-host-cell small{font-size:10px !important;}
.nocx-status-badge{box-shadow:0 0 18px rgba(67,217,255,.10) !important;}

/* make cards sit beside each other whenever possible */
@media (min-width: 1420px){
  .nocx-lower-stack{grid-template-columns:1fr 1fr !important;}
}
@media (max-width: 1419px){
  .nocx-layout{grid-template-columns:1fr !important;}
  .nocx-lower-stack{grid-template-columns:1fr !important;}
  .nocx-panel--alerts{height:220px !important;min-height:220px !important;max-height:220px !important;}
}
@media (max-width: 760px){
  .nocx-topbar--control{grid-template-columns:1fr !important;}
  .nocx-statsbar{flex-wrap:wrap !important;overflow:visible !important;}
  .nocx-stat-chip{flex:1 1 120px !important;justify-content:center !important;}
}

/* ===== NOC Figma Match Phase 5 - user requested refinements ===== */
.nocx-topbar--control{
  grid-template-columns:auto minmax(230px, 340px) minmax(360px, 1fr) auto !important;
  min-height:58px !important;
  padding:9px 16px !important;
}
.nocx-search{
  width:min(100%, 520px) !important;
  min-width:340px !important;
  height:38px !important;
  border:0 !important;
  border-radius:999px !important;
  background:linear-gradient(90deg, rgba(255,255,255,.055), rgba(255,255,255,.025)) !important;
  box-shadow:inset 0 0 0 1px rgba(67,217,255,.10), 0 10px 24px rgba(0,0,0,.16) !important;
}
.nocx-search__icon{
  width:32px !important;
  height:32px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:50% !important;
  background:rgba(67,217,255,.09) !important;
  color:#8feaff !important;
  font-size:18px !important;
}
.nocx-search input{font-size:13px !important;font-weight:800 !important;color:#eaf7ff !important;}
.nocx-icon-actions{display:flex !important;align-items:center !important;gap:8px !important;}
.nocx-icon-action{
  width:38px !important;
  height:38px !important;
  min-width:38px !important;
  padding:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:0 !important;
  border-radius:14px !important;
  text-decoration:none !important;
  color:#e7f6ff !important;
  background:linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.028)) !important;
  box-shadow:inset 0 0 0 1px rgba(67,217,255,.08), 0 8px 20px rgba(0,0,0,.14) !important;
  transition:transform .16s ease, background .16s ease, box-shadow .16s ease !important;
  cursor:pointer !important;
}
.nocx-icon-action:hover{
  transform:translateY(-1px) !important;
  background:linear-gradient(180deg, rgba(67,217,255,.16), rgba(47,141,255,.08)) !important;
  box-shadow:0 0 26px rgba(67,217,255,.10), inset 0 0 0 1px rgba(67,217,255,.14) !important;
}
.nocx-icon-action span{font-size:18px !important;line-height:1 !important;}
.nocx-statsbar{
  min-height:52px !important;
  padding:8px 12px !important;
  gap:10px !important;
  border:0 !important;
  border-radius:18px !important;
  background:linear-gradient(90deg, rgba(67,217,255,.075), rgba(255,255,255,.025), rgba(37,225,147,.05)) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035), 0 16px 34px rgba(0,0,0,.18) !important;
}
.nocx-stat-chip{
  min-height:34px !important;
  padding:6px 10px !important;
  border:0 !important;
  border-radius:12px !important;
  background:rgba(255,255,255,.035) !important;
  box-shadow:none !important;
  font-size:13px !important;
  gap:7px !important;
}
.nocx-stat-chip span:not(.dot):not(.nocx-stat-ico){font-size:13px !important;font-weight:850 !important;color:rgba(225,239,255,.76) !important;}
.nocx-stat-chip strong{font-size:15px !important;font-weight:950 !important;color:#fff !important;}
.nocx-stat-ico{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:22px !important;
  height:22px !important;
  border-radius:9px !important;
  background:rgba(67,217,255,.10) !important;
  color:#83eaff !important;
  font-size:12px !important;
  line-height:1 !important;
}
.nocx-stat-chip--brand{
  background:linear-gradient(90deg, rgba(67,217,255,.14), rgba(37,225,147,.06)) !important;
  color:#fff !important;
  min-width:178px !important;
}
.nocx-stat-chip--brand span:not(.nocx-stat-ico){color:#fff !important;font-weight:950 !important;}
.nocx-alert-feed,
.nocx-alert-feed *{scrollbar-color:rgba(67,217,255,.42) transparent;}
.nocx-alert-line{border:0 !important;box-shadow:none !important;}
.nocx-alert-line__count{border:0 !important;background:rgba(255,255,255,.09) !important;}
@media (max-width: 980px){
  .nocx-topbar--control{grid-template-columns:1fr !important;}
  .nocx-search{min-width:0 !important;width:100% !important;}
  .nocx-statsbar{flex-wrap:wrap !important;}
}

/* =====================================================================
   UA fix 2026-05-22: dashboard stats strip + no golden frames
   مصدر التصحيح: شريط الإحصاءات كان يظهر كشريط اسم شركة فقط عند فتح
   صفحات داخل مساحة الداشبورد. هنا نعيده إلى Grid ثابت ونمنع أي إطار ذهبي.
   ===================================================================== */
body.ua-page-dashboard{
  --ua-clean-frame-line:rgba(125,211,252,.16);
  --ua-clean-frame-line-soft:rgba(125,211,252,.095);
}

body.ua-authed.ua-page-dashboard .nocx-dashboard-statsbar{
  display:grid !important;
  grid-template-columns:minmax(135px,1.12fr) repeat(7,minmax(82px,max-content)) minmax(78px,max-content) minmax(88px,.72fr) !important;
  align-items:center !important;
  gap:6px !important;
  height:42px !important;
  min-height:42px !important;
  max-height:42px !important;
  margin:0 0 6px 0 !important;
  padding:4px 8px !important;
  direction:rtl !important;
  overflow:visible !important;
  border:1px solid rgba(113,207,228,.13) !important;
  border-radius:10px !important;
  background:
    radial-gradient(circle at 14% 0%,rgba(76,211,232,.10),transparent 28%),
    radial-gradient(circle at 86% 100%,rgba(232,198,97,.07),transparent 24%),
    linear-gradient(180deg,rgba(10,34,46,.96),rgba(5,18,31,.94)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 -1px 0 rgba(232,198,97,.04),
    0 11px 24px rgba(0,0,0,.16) !important;
}
body.ua-authed.ua-page-dashboard .nocx-dashboard-statsbar::before,
body.ua-authed.ua-page-dashboard .nocx-dashboard-statsbar::after{
  display:none !important;
  content:none !important;
}
body.ua-authed.ua-page-dashboard .nocx-dashboard-statsbar > *{
  min-width:0 !important;
  max-width:100% !important;
  width:auto !important;
  opacity:1 !important;
  visibility:visible !important;
}
body.ua-authed.ua-page-dashboard .nocx-dashboard-statsbar .nocx-stat-chip,
body.ua-authed.ua-page-dashboard .nocx-dashboard-statsbar .nocx-alert-chip-wrap > summary.nocx-stat-chip,
body.ua-authed.ua-page-dashboard .nocx-dashboard-statsbar .nocx-user-chip > summary{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:32px !important;
  min-height:32px !important;
  max-height:32px !important;
  min-width:0 !important;
  width:100% !important;
  padding:0 6px !important;
  gap:4px !important;
  border:0 !important;
  border-radius:8px !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#eaf7ff !important;
  font-size:11.2px !important;
  font-weight:850 !important;
  line-height:1 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  transition:background .16s ease,color .16s ease !important;
}
body.ua-authed.ua-page-dashboard .nocx-dashboard-statsbar .nocx-stat-chip:hover,
body.ua-authed.ua-page-dashboard .nocx-dashboard-statsbar .nocx-alert-chip-wrap > summary.nocx-stat-chip:hover,
body.ua-authed.ua-page-dashboard .nocx-dashboard-statsbar .nocx-user-chip > summary:hover{
  background:rgba(92,211,231,.055) !important;
}
body.ua-authed.ua-page-dashboard .nocx-dashboard-statsbar .nocx-stat-chip + .nocx-stat-chip,
body.ua-authed.ua-page-dashboard .nocx-dashboard-statsbar .nocx-alert-chip-wrap,
body.ua-authed.ua-page-dashboard .nocx-dashboard-statsbar .nocx-user-chip{
  box-shadow:inset 1px 0 0 var(--ua-clean-frame-line-soft) !important;
}
body.ua-authed.ua-page-dashboard .nocx-dashboard-statsbar .nocx-stat-chip--brand{
  background:linear-gradient(90deg,rgba(54,189,213,.14),rgba(232,198,97,.065)) !important;
  border:0 !important;
  min-width:0 !important;
  width:100% !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035) !important;
}
body.ua-authed.ua-page-dashboard .nocx-dashboard-statsbar .nocx-stat-chip span:not(.nocx-stat-ico),
body.ua-authed.ua-page-dashboard .nocx-dashboard-statsbar .nocx-user-name{
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
body.ua-authed.ua-page-dashboard .nocx-dashboard-statsbar .nocx-stat-chip strong{
  flex:0 0 auto !important;
  color:#fff !important;
  font-size:12.5px !important;
  font-weight:950 !important;
  line-height:1 !important;
  font-variant-numeric:tabular-nums !important;
}
body.ua-authed.ua-page-dashboard .nocx-dashboard-statsbar .nocx-stat-ico{
  flex:0 0 13px !important;
  width:13px !important;
  min-width:13px !important;
  height:13px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#74e6f2 !important;
  box-shadow:none !important;
  font-size:12px !important;
  line-height:1 !important;
}
body.ua-authed.ua-page-dashboard .nocx-dashboard-statsbar .nocx-user-chip{
  width:100% !important;
  min-width:0 !important;
  position:relative !important;
  z-index:80 !important;
}
body.ua-authed.ua-page-dashboard .nocx-dashboard-statsbar .nocx-user-avatar{
  width:22px !important;
  min-width:22px !important;
  height:22px !important;
  border:1px solid var(--ua-clean-frame-line) !important;
  background:rgba(103,232,249,.11) !important;
  box-shadow:0 0 0 3px rgba(91,215,231,.045),0 0 14px rgba(78,203,222,.10) !important;
}
body.ua-authed.ua-page-dashboard .nocx-dashboard-statsbar .nocx-alert-popover,
body.ua-authed.ua-page-dashboard .nocx-dashboard-statsbar .nocx-user-menu-panel{
  border-color:var(--ua-clean-frame-line) !important;
  box-shadow:0 16px 32px rgba(0,0,0,.30) !important;
}
body.ua-page-dashboard .ua-dashboard-windowbar-host,
body.ua-page-dashboard .nocx-shell,
body.ua-page-dashboard .nocx-title-search,
body.ua-page-dashboard .nocx-panel{
  border-color:var(--ua-clean-frame-line) !important;
}

@media (max-width:1320px){
  body.ua-page-dashboard .nocx-dashboard-statsbar,
  .ua-dashboard-v2 .nocx-dashboard-statsbar{
    grid-template-columns:minmax(110px,1fr) repeat(7,minmax(64px,max-content)) minmax(58px,max-content) minmax(72px,.58fr) !important;
    gap:4px !important;
    padding-inline:6px !important;
  }
  body.ua-page-dashboard .nocx-dashboard-statsbar .nocx-stat-chip,
  body.ua-page-dashboard .nocx-dashboard-statsbar .nocx-alert-chip-wrap > summary.nocx-stat-chip,
  body.ua-page-dashboard .nocx-dashboard-statsbar .nocx-user-chip > summary{
    padding-inline:4px !important;
    gap:3px !important;
    font-size:10.5px !important;
  }
  body.ua-page-dashboard .nocx-dashboard-statsbar .nocx-stat-chip strong{font-size:11.8px !important;}
}

/* UA fix 2026-05-22B: تثبيت شريط الإحصاءات ومنع حدود الذهب نهائياً */
body.ua-page-dashboard{
  --ua-border:var(--ua-clean-frame-line) !important;
  --ua-border-strong:rgba(125,211,252,.24) !important;
  --ua-ds-line:var(--ua-clean-frame-line) !important;
  --ua-ds-line-strong:rgba(125,211,252,.24) !important;
}
body.ua-page-dashboard .nocx-dashboard-statsbar .nocx-stat-chip,
body.ua-page-dashboard .nocx-dashboard-statsbar .nocx-alert-chip-wrap > summary.nocx-stat-chip,
body.ua-page-dashboard .nocx-dashboard-statsbar .nocx-user-chip > summary{
  flex:0 1 auto !important;
}
body.ua-page-dashboard .nocx-dashboard-statsbar .nocx-stat-chip--brand{
  grid-column:auto !important;
  justify-self:stretch !important;
}
body.ua-page-dashboard .nocx-dashboard-statsbar :is(.nocx-stat-chip,.nocx-alert-chip-wrap > summary,.nocx-user-chip > summary,.nocx-user-avatar){
  border-color:var(--ua-clean-frame-line) !important;
}

/* Workspace restore prepaint: hide the old dashboard pane while the last active page iframe is being restored after refresh. */
html.ua-restore-workspace-pending body.ua-page-dashboard .nocx-shell > :not(.ua-wm-stage),
html.ua-restore-workspace-pending body.ua-page-dashboard .ua-wm-pane[data-ua-wm-key="dashboard.php"]{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
html.ua-restore-workspace-pending body.ua-page-dashboard .nocx-shell{
  min-height:calc(100vh - 120px)!important;
}
html.ua-restore-workspace-pending body.ua-page-dashboard .ua-wm-stage,
html.ua-restore-workspace-pending body.ua-page-dashboard .ua-wm-pane.is-current.has-iframe,
html.ua-restore-workspace-pending body.ua-page-dashboard .ua-wm-pane.is-current[data-ua-pane-kind="iframe"],
html.ua-restore-workspace-pending body.ua-page-dashboard .ua-wm-pane.is-current.has-iframe > .ua-wm-iframe{
  opacity:1!important;
  visibility:visible!important;
}

/* Keep the approved desktop dashboard order on common WebView widths. */
@media (min-width:1181px) and (max-width:1419px){
  body.ua-page-dashboard .nocx-layout{
    grid-template-columns:minmax(190px,.58fr) minmax(440px,1.7fr) minmax(230px,.82fr) !important;
    align-items:stretch !important;
  }
  body.ua-page-dashboard .nocx-leftbar,
  body.ua-page-dashboard .nocx-main,
  body.ua-page-dashboard .nocx-rightbar{
    order:0 !important;
  }
  body.ua-page-dashboard .nocx-lower-stack{
    grid-template-columns:1fr 1fr !important;
  }
}

/* Phone/WebView layout: the desktop strip has ten columns. Reflow it into a
   compact grid so no indicator is clipped at either edge. */
@media (max-width:992px){
  html body.ua-authed.ua-page-dashboard .nocx-dashboard-statsbar,
  body.ua-page-dashboard .nocx-dashboard-statsbar,
  .ua-dashboard-v2 .nocx-dashboard-statsbar,
  .nocx-dashboard-statsbar{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    align-items:center !important;
    gap:6px !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:visible !important;
  }
  html body.ua-authed.ua-page-dashboard .nocx-dashboard-statsbar > *,
  body.ua-page-dashboard .nocx-dashboard-statsbar > *,
  .ua-dashboard-v2 .nocx-dashboard-statsbar > *,
  .nocx-dashboard-statsbar > *{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
  }
  html body.ua-authed.ua-page-dashboard .nocx-dashboard-statsbar .nocx-stat-chip,
  html body.ua-authed.ua-page-dashboard .nocx-dashboard-statsbar .nocx-alert-chip-wrap > summary.nocx-stat-chip,
  html body.ua-authed.ua-page-dashboard .nocx-dashboard-statsbar .nocx-user-chip > summary,
  body.ua-page-dashboard .nocx-dashboard-statsbar .nocx-stat-chip,
  body.ua-page-dashboard .nocx-dashboard-statsbar .nocx-alert-chip-wrap > summary.nocx-stat-chip,
  body.ua-page-dashboard .nocx-dashboard-statsbar .nocx-user-chip > summary,
  .ua-dashboard-v2 .nocx-dashboard-statsbar .nocx-stat-chip,
  .ua-dashboard-v2 .nocx-dashboard-statsbar .nocx-alert-chip-wrap > summary.nocx-stat-chip,
  .ua-dashboard-v2 .nocx-dashboard-statsbar .nocx-user-chip > summary,
  .nocx-dashboard-statsbar .nocx-stat-chip,
  .nocx-dashboard-statsbar .nocx-alert-chip-wrap > summary.nocx-stat-chip,
  .nocx-dashboard-statsbar .nocx-user-chip > summary{
    width:100% !important;
    min-width:0 !important;
    padding-inline:5px !important;
  }
}

/* Permission-aware dashboard geometry: remaining cards always consume the row. */
body.ua-page-dashboard .nocx-layout.nocx-layout--visible-1{
  grid-template-columns:minmax(0,1fr) !important;
}
body.ua-page-dashboard .nocx-layout.nocx-layout--visible-2.without-summary{
  grid-template-columns:minmax(480px,1.75fr) minmax(250px,.85fr) !important;
}
body.ua-page-dashboard .nocx-layout.nocx-layout--visible-2.without-routers{
  grid-template-columns:minmax(220px,.62fr) minmax(500px,1.75fr) !important;
}
body.ua-page-dashboard .nocx-layout.nocx-layout--visible-2.without-traffic{
  grid-template-columns:repeat(2,minmax(280px,1fr)) !important;
}
body.ua-page-dashboard .nocx-lower-stack.nocx-lower-stack--single{
  grid-template-columns:minmax(0,1fr) !important;
}
@media (max-width:1180px){
  body.ua-page-dashboard .nocx-layout.nocx-layout--visible-2{
    grid-template-columns:minmax(0,1fr) !important;
  }
}

/* Scaled desktop/WebView widths: keep the complete status strip inside the
   workspace.  The avatar remains the account-menu trigger while its duplicate
   name/caret are compacted only in this intermediate desktop range. */
@media (min-width:993px) and (max-width:1320px){
  html body.ua-authed.ua-page-dashboard .nocx-dashboard-statsbar{
    display:flex !important;
    align-items:center !important;
    gap:3px !important;
    padding-inline:5px !important;
  }
  html body.ua-authed.ua-page-dashboard .nocx-dashboard-statsbar > *{
    min-width:0 !important;
  }
  html body.ua-authed.ua-page-dashboard .nocx-dashboard-statsbar .nocx-user-chip,
  html body.ua-authed.ua-page-dashboard .nocx-dashboard-statsbar .nocx-user-chip > summary{
    flex:0 0 38px !important;
    width:38px !important;
    min-width:38px !important;
    max-width:38px !important;
  }
  html body.ua-authed.ua-page-dashboard .nocx-dashboard-statsbar .nocx-user-name,
  html body.ua-authed.ua-page-dashboard .nocx-dashboard-statsbar .nocx-user-caret{
    display:none !important;
  }
}

/* 2026-08-08: subscriber search belongs to the dashboard workspace, not to
   the shared window strip.  This row mirrors the three main dashboard columns
   so the search is exactly as wide as the routers card below it. */
body.ua-page-dashboard .nocx-dashboard-utility-row{
  position:relative;
  z-index:8;
  display:grid;
  grid-template-columns:minmax(210px,.62fr) minmax(500px,1.75fr) minmax(260px,.85fr);
  gap:10px;
  align-items:stretch;
  overflow:visible;
}
body.ua-page-dashboard .nocx-dashboard-utility-row .nocx-security-monitor-row{
  grid-column:1 / 3;
  min-width:0;
}
body.ua-page-dashboard .nocx-dashboard-utility-row .nocx-dashboard-search-panel{
  position:relative;
  grid-column:3;
  min-width:0;
  min-height:52px;
  display:flex;
  align-items:stretch;
  padding:0;
  border:0;
  border-radius:12px;
  background:transparent;
  box-shadow:none;
  overflow:visible;
}
body.ua-page-dashboard .nocx-dashboard-search-panel .nocx-title-search{
  position:relative;
  flex:1 1 100%!important;
  align-self:stretch!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  height:auto!important;
  min-height:52px!important;
  display:flex!important;
  align-items:center!important;
  padding:0!important;
  margin:0!important;
  border:1px solid rgba(125,211,252,.14)!important;
  border-radius:9px!important;
  background:rgba(5,25,33,.62)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
}
body.ua-page-dashboard .nocx-dashboard-search-panel .nocx-title-search .ua-subscriber-search-box{
  position:relative!important;
  width:100%!important;
  height:100%!important;
  display:block!important;
}
body.ua-page-dashboard .nocx-dashboard-search-panel .nocx-title-search input{
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  padding:0 43px!important;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  color:#eaf7ff!important;
  font-size:12px!important;
  font-weight:800!important;
  text-align:center!important;
  text-overflow:ellipsis!important;
}
body.ua-page-dashboard .nocx-dashboard-search-panel .nocx-title-search input::placeholder{
  color:rgba(221,235,255,.48)!important;
}
body.ua-page-dashboard .nocx-dashboard-search-panel .nocx-search__icon{
  position:absolute!important;
  z-index:5!important;
  left:3px!important;
  right:auto!important;
  top:3px!important;
  bottom:3px!important;
  width:34px!important;
  height:auto!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid rgba(255,255,255,.24)!important;
  border-radius:8px 0 0 8px!important;
  background:rgba(229,233,238,.88)!important;
  color:#080b0f!important;
}
body.ua-page-dashboard .nocx-dashboard-search-panel .nocx-dashboard-search-results{
  position:absolute!important;
  z-index:99999!important;
  top:calc(100% + 7px)!important;
  left:0!important;
  right:0!important;
  width:100%!important;
  max-height:315px!important;
  overflow:auto!important;
}
body.ua-page-dashboard .nocx-dashboard-utility-row.without-security-monitor .nocx-dashboard-search-panel{
  grid-column:3;
}
body.ua-page-dashboard .nocx-dashboard-utility-row.without-subscriber-search .nocx-security-monitor-row{
  grid-column:1 / -1;
}

@media (min-width:1181px) and (max-width:1419px){
  body.ua-page-dashboard .nocx-dashboard-utility-row{
    grid-template-columns:minmax(190px,.58fr) minmax(440px,1.7fr) minmax(230px,.82fr);
  }
}
@media (max-width:1180px){
  body.ua-page-dashboard .nocx-dashboard-utility-row{
    grid-template-columns:minmax(0,1fr);
  }
  body.ua-page-dashboard .nocx-dashboard-utility-row .nocx-security-monitor-row,
  body.ua-page-dashboard .nocx-dashboard-utility-row .nocx-dashboard-search-panel{
    grid-column:1;
  }
  body.ua-page-dashboard .nocx-dashboard-utility-row .nocx-dashboard-search-panel{
    order:-1;
  }
}

/* Live message queue: present only while a queue run needs attention or work. */
.nocx-message-progress-row[hidden]{display:none!important}
.nocx-message-progress-row{position:relative;z-index:2;margin:0 0 10px}
.nocx-message-progress-link{display:grid;grid-template-columns:minmax(210px,.7fr) minmax(260px,1.5fr) minmax(230px,.75fr);align-items:center;gap:16px;min-height:66px;padding:10px 15px;border:1px solid rgba(65,204,226,.34);border-radius:14px;background:linear-gradient(110deg,rgba(8,42,59,.96),rgba(10,24,40,.98));box-shadow:0 12px 28px rgba(0,0,0,.18);color:#eaf7ff;text-decoration:none!important}
.nocx-message-progress-title{display:flex;align-items:center;gap:10px;min-width:0}.nocx-message-progress-icon{display:grid;width:40px;height:40px;place-items:center;flex:0 0 auto;border-radius:11px;background:rgba(55,207,228,.14);color:#54d7ec}.nocx-message-progress-title>span:last-child{display:grid;gap:3px;min-width:0}.nocx-message-progress-title b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nocx-message-progress-title small{color:#8ba4ba;font-size:10px}
.nocx-message-progress-track{height:8px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}.nocx-message-progress-track i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#20b7da,#36dda5);transition:width .3s ease}
.nocx-message-progress-counts{display:flex;align-items:center;justify-content:flex-end;gap:13px;color:#91a8bd;font-size:10px}.nocx-message-progress-counts b{margin-inline-start:3px;color:#eaf7ff}.nocx-message-progress-counts strong{min-width:48px;color:#64dff0;font-size:15px;text-align:center}
.nocx-message-progress-row.is-waiting .nocx-message-progress-link{border-color:rgba(255,189,70,.42);background:linear-gradient(110deg,rgba(58,43,12,.92),rgba(20,25,37,.98))}.nocx-message-progress-row.is-waiting .nocx-message-progress-icon,.nocx-message-progress-row.is-waiting .nocx-message-progress-counts strong{color:#ffc452}
@media(max-width:760px){.nocx-message-progress-link{grid-template-columns:1fr;gap:8px}.nocx-message-progress-counts{justify-content:space-between}}
