@import url('/node-dashboard.css?v=1');

.nd-upgraded {
  --nd-gold: #f0c875;
  --nd-cyan: #36d8ff;
  --nd-blue: #4888ff;
  background-color: #050910;
  background-image:
    linear-gradient(rgba(77, 136, 180, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(77, 136, 180, .035) 1px, transparent 1px),
    radial-gradient(circle at 50% 10%, rgba(33, 137, 184, .12), transparent 42%),
    linear-gradient(180deg, #070c15, #050910);
  background-size: 48px 48px, 48px 48px, auto, auto;
}

.nd-upgraded::before {
  width: 900px;
  height: 620px;
  background: radial-gradient(circle, rgba(54, 216, 255, .13), transparent 68%);
  filter: blur(12px);
}

.nd-upgraded::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background: linear-gradient(180deg, transparent 0, rgba(54, 216, 255, .08) 49.8%, transparent 50.3%);
  background-size: 100% 260px;
  animation: nd-page-scan 9s linear infinite;
}

.nd-systembar {
  position: relative;
  z-index: 2;
  display: flex;
  max-width: 1180px;
  margin: 0 auto 12px;
  padding: 10px 14px;
  align-items: center;
  gap: 24px;
  border: 1px solid rgba(84, 205, 255, .15);
  border-left-color: rgba(84, 205, 255, .5);
  background: linear-gradient(90deg, rgba(30, 120, 160, .09), rgba(7, 12, 21, .72));
  color: rgba(201, 223, 242, .42);
  font: 700 9px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .13em;
}

.nd-systembar > span:last-child { margin-left: auto; }
.nd-system-live { display: inline-flex; align-items: center; gap: 9px; color: rgba(225, 243, 255, .75); }
.nd-system-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--nd-cyan); box-shadow: 0 0 12px var(--nd-cyan), 0 0 0 4px rgba(54, 216, 255, .08); animation: nd-live 2.2s ease-in-out infinite; }

.nd-metric,
.nd-panel {
  overflow: hidden;
  border-color: rgba(116, 151, 181, .16);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .025), transparent 38%),
    linear-gradient(145deg, rgba(13, 23, 37, .96), rgba(6, 11, 19, .99));
  box-shadow: inset 0 1px rgba(255, 255, 255, .035), 0 18px 60px rgba(0, 0, 0, .14);
}

.nd-metric::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 42%;
  height: 1px;
  background: linear-gradient(90deg, var(--nd-gold), transparent);
  box-shadow: 0 0 14px rgba(240, 200, 117, .6);
}

.nd-metric-cyan::before { background: linear-gradient(90deg, var(--nd-cyan), transparent); box-shadow: 0 0 14px rgba(54, 216, 255, .55); }
.nd-metric-blue::before { background: linear-gradient(90deg, var(--nd-blue), transparent); box-shadow: 0 0 14px rgba(72, 136, 255, .5); }
.nd-metric-status::before { width: 100%; background: linear-gradient(90deg, var(--nd-gold), var(--nd-cyan), transparent); }
.nd-metric { transition: border-color .25s, transform .25s, background .25s; }
.nd-metric:hover { z-index: 2; transform: translateY(-3px); border-color: rgba(84, 205, 255, .32); background-color: rgba(17, 29, 45, .98); }
.nd-metric > strong { text-shadow: 0 0 28px rgba(84, 205, 255, .08); }

.nd-spark {
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: flex;
  height: 24px;
  align-items: flex-end;
  gap: 3px;
  opacity: .42;
}

.nd-spark i { display: block; width: 3px; background: linear-gradient(180deg, var(--nd-cyan), rgba(54, 216, 255, .1)); }
.nd-spark i:nth-child(1) { height: 24%; }
.nd-spark i:nth-child(2) { height: 52%; }
.nd-spark i:nth-child(3) { height: 38%; }
.nd-spark i:nth-child(4) { height: 78%; }
.nd-spark i:nth-child(5) { height: 62%; }
.nd-spark i:nth-child(6) { height: 100%; }
.nd-metric-gold .nd-spark i { background: linear-gradient(180deg, var(--nd-gold), rgba(240, 200, 117, .08)); }

.nd-signal { position: absolute; right: 19px; bottom: 19px; display: flex; align-items: flex-end; gap: 4px; }
.nd-signal i { display: block; width: 3px; border-radius: 2px; background: var(--nd-cyan); box-shadow: 0 0 8px rgba(54, 216, 255, .55); animation: nd-signal 1.7s ease-in-out infinite; }
.nd-signal i:nth-child(1) { height: 7px; animation-delay: -.5s; }
.nd-signal i:nth-child(2) { height: 14px; animation-delay: -.25s; }
.nd-signal i:nth-child(3) { height: 22px; }

.nd-panel::before,
.nd-panel::after {
  content: "";
  position: absolute;
  z-index: 8;
  width: 18px;
  height: 18px;
  pointer-events: none;
}

.nd-panel::before { left: -1px; top: -1px; border-left: 1px solid var(--nd-gold); border-top: 1px solid var(--nd-gold); }
.nd-panel::after { right: -1px; bottom: -1px; border-right: 1px solid var(--nd-cyan); border-bottom: 1px solid var(--nd-cyan); }

.nd-panel-head { background: linear-gradient(90deg, rgba(19, 31, 48, .72), rgba(8, 13, 22, .35)); }
.nd-panel-head::after { content: ""; position: absolute; left: 20px; right: 20px; bottom: -1px; height: 1px; background: linear-gradient(90deg, rgba(240, 200, 117, .42), rgba(54, 216, 255, .22), transparent); }

.nd-map {
  background:
    linear-gradient(90deg, rgba(5, 9, 16, .84), transparent 30%, transparent 70%, rgba(5, 9, 16, .84)),
    radial-gradient(circle at center, rgba(31, 131, 173, .16), transparent 66%),
    repeating-linear-gradient(0deg, transparent 0 47px, rgba(84, 205, 255, .025) 48px),
    repeating-linear-gradient(90deg, transparent 0 47px, rgba(84, 205, 255, .025) 48px);
}

.nd-map-hud { position: absolute; z-index: 4; inset: 15px 18px auto; display: flex; justify-content: space-between; color: rgba(161, 200, 228, .28); font: 700 8px/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .12em; }
.nd-scan-beam { position: absolute; z-index: 3; left: 50%; top: 49%; width: min(86%, 590px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 83%, rgba(54, 216, 255, .13) 94%, transparent 100%); filter: blur(.2px); animation: nd-radar 12s linear infinite; }

.nd-globe {
  border-color: rgba(240, 200, 117, .34);
  background:
    radial-gradient(circle at 36% 28%, rgba(54, 216, 255, .2), transparent 17%),
    radial-gradient(circle at 58% 62%, rgba(240, 200, 117, .07), transparent 30%),
    radial-gradient(circle at 53% 55%, #11253c 0%, #081522 49%, #03070d 76%);
  box-shadow: inset -42px -26px 90px rgba(0, 0, 0, .78), inset 22px 14px 55px rgba(54, 216, 255, .09), 0 0 0 22px rgba(240, 200, 117, .018), 0 0 110px rgba(36, 183, 232, .13);
}

.nd-atmosphere { position: absolute; inset: 3%; border: 1px solid rgba(54, 216, 255, .15); border-radius: 50%; box-shadow: inset 0 0 36px rgba(54, 216, 255, .07), 0 0 24px rgba(54, 216, 255, .05); }
.nd-orbit { position: absolute; left: 50%; top: 50%; width: 112%; height: 38%; border: 1px solid rgba(240, 200, 117, .16); border-radius: 50%; transform: translate(-50%, -50%) rotate(24deg); }
.nd-orbit-b { width: 108%; height: 44%; transform: translate(-50%, -50%) rotate(-52deg); border-color: rgba(54, 216, 255, .13); }
.nd-globe-core { border-color: rgba(240, 200, 117, .38); background: linear-gradient(145deg, rgba(14, 23, 36, .94), rgba(5, 9, 16, .9)); box-shadow: 0 0 42px rgba(54, 216, 255, .08), inset 0 0 22px rgba(240, 200, 117, .04); }
.nd-globe-core::before,
.nd-globe-core::after { content: ""; position: absolute; width: 12px; height: 12px; }
.nd-globe-core::before { left: -1px; top: -1px; border-left: 1px solid var(--nd-gold); border-top: 1px solid var(--nd-gold); }
.nd-globe-core::after { right: -1px; bottom: -1px; border-right: 1px solid var(--nd-cyan); border-bottom: 1px solid var(--nd-cyan); }

.nd-node-lines path { stroke: url(#nd-link-gradient); stroke-opacity: .26; stroke-dasharray: 2 3; animation: nd-flow 6s linear infinite; }
.nd-node-lines path:nth-of-type(2n) { animation-duration: 8s; animation-direction: reverse; }
.nd-point::after { content: ""; position: absolute; inset: -9px; border: 1px solid transparent; border-radius: 50%; transition: border-color .25s, transform .25s; }
.nd-point:hover::after,
.nd-point:focus-visible::after { border-color: rgba(54, 216, 255, .48); transform: scale(1.15); }
.nd-point.is-active::after { border-color: rgba(54, 216, 255, .3); animation: nd-active-ring 2.3s ease-out infinite; }
.nd-point span { border-color: rgba(118, 154, 183, .18); background: rgba(4, 8, 14, .88); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }

.nd-selected { border-color: rgba(240, 200, 117, .25); background: linear-gradient(90deg, rgba(7, 12, 21, .94), rgba(8, 18, 29, .86)); box-shadow: inset 3px 0 rgba(240, 200, 117, .7), 0 12px 35px rgba(0, 0, 0, .25); }
.nd-link-status { display: inline-flex; margin-top: 8px; align-items: center; gap: 6px; color: rgba(84, 205, 255, .55); font: 700 7px/1 ui-monospace, SFMono-Regular, Consolas, monospace; font-style: normal; letter-spacing: .1em; }
.nd-link-status i { width: 5px; height: 5px; border-radius: 50%; background: var(--nd-cyan); box-shadow: 0 0 8px var(--nd-cyan); }
.nd-map-panel.is-switching .nd-selected { animation: nd-data-flash .5s ease; }

.nd-row { position: relative; overflow: hidden; }
.nd-row::after { content: ""; position: absolute; left: 0; bottom: 0; width: var(--nd-row-load, 20%); height: 1px; background: linear-gradient(90deg, transparent, rgba(54, 216, 255, .26)); opacity: .55; }
.nd-row:nth-child(1) { --nd-row-load: 74%; }
.nd-row:nth-child(2) { --nd-row-load: 63%; }
.nd-row:nth-child(3) { --nd-row-load: 58%; }
.nd-row:nth-child(4) { --nd-row-load: 46%; }
.nd-row:nth-child(5) { --nd-row-load: 41%; }
.nd-row:nth-child(6) { --nd-row-load: 36%; }
.nd-row:nth-child(7) { --nd-row-load: 29%; }
.nd-row:nth-child(8) { --nd-row-load: 23%; }
.nd-row.is-active { box-shadow: inset 18px 0 40px rgba(240, 200, 117, .035); }
.nd-row.is-active > strong { text-shadow: 0 0 14px rgba(240, 200, 117, .4); }
.nd-track i { box-shadow: 0 0 12px rgba(240, 200, 117, .35); }

.nd-telemetry { position: relative; z-index: 2; display: flex; max-width: 1180px; margin: 12px auto 0; padding: 11px 14px; align-items: center; gap: 22px; border: 1px solid rgba(116, 151, 181, .14); background: rgba(6, 11, 19, .82); color: rgba(188, 211, 231, .38); font: 700 8px/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .11em; }
.nd-telemetry span { display: inline-flex; align-items: center; gap: 7px; }
.nd-telemetry i { width: 4px; height: 4px; border-radius: 50%; background: var(--nd-cyan); box-shadow: 0 0 7px rgba(54, 216, 255, .8); }
.nd-telemetry b { margin-left: auto; color: rgba(240, 200, 117, .5); font-weight: 700; }

@keyframes nd-page-scan { from { background-position: 0 -260px; } to { background-position: 0 calc(100% + 260px); } }
@keyframes nd-radar { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes nd-flow { to { stroke-dashoffset: -40; } }
@keyframes nd-live { 50% { opacity: .45; box-shadow: 0 0 5px var(--nd-cyan), 0 0 0 7px rgba(54, 216, 255, 0); } }
@keyframes nd-signal { 50% { opacity: .35; transform: scaleY(.62); transform-origin: bottom; } }
@keyframes nd-active-ring { from { transform: scale(.7); opacity: .85; } to { transform: scale(1.8); opacity: 0; } }
@keyframes nd-data-flash { 0%, 100% { border-color: rgba(240, 200, 117, .25); } 45% { border-color: rgba(54, 216, 255, .65); box-shadow: inset 3px 0 var(--nd-cyan), 0 0 30px rgba(54, 216, 255, .08); } }

@media (max-width: 800px) {
  .nd-systembar { gap: 14px; overflow: hidden; }
  .nd-systembar > span:nth-child(2) { display: none; }
  .nd-map-hud { display: none; }
  .nd-scan-beam { width: 120%; }
  .nd-telemetry { overflow-x: auto; gap: 18px; white-space: nowrap; scrollbar-width: none; }
  .nd-telemetry::-webkit-scrollbar { display: none; }
  .nd-telemetry b { display: none; }
}

@media (max-width: 480px) {
  .nd-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nd-metric { min-height: 132px; padding: 16px; }
  .nd-metric > strong { margin-top: 15px; font-size: 29px; }
  .nd-metric > strong.nd-preview-value { font-size: 20px; }
  .nd-metric > small { max-width: 100px; font-size: 9px; line-height: 1.35; }
  .nd-spark, .nd-signal { right: 12px; bottom: 14px; }
  .nd-region-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
  .nd-row { min-width: 0; padding: 10px 8px; gap: 7px; }
  .nd-row em { display: none; }
  .nd-row > strong { font-size: 12px; }
  .nd-selected > div:first-child > small { display: none; }
  .nd-link-status { margin-top: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  .nd-upgraded::after,
  .nd-system-live i,
  .nd-signal i,
  .nd-scan-beam,
  .nd-node-lines path,
  .nd-point.is-active::after { animation: none; }
}