/* CDN ERA — Node Public View Styles (Dark + White) */
/* Integrates cleanly with styles.css */

* {
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: #2b313a #0b0c0e;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #0b0c0e;
}

::-webkit-scrollbar-thumb {
  background: #262a2f;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #3e4652;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

.node-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

.node-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.node-title h1 {
  margin: 0;
  font-size: 32px;
  letter-spacing: -0.05em;
  font-weight: 800;
}

.dot, .status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ok);
  display: inline-block;
  flex-shrink: 0;
  box-shadow: 0 0 10px rgba(98, 217, 149, 0.6);
  animation: pulseDot 2s infinite ease-in-out;
}

.dot.paused, .status-dot.paused {
  background: var(--warning);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.6);
}

.dot.offline, .status-dot.offline {
  background: var(--danger);
  box-shadow: 0 0 10px rgba(255, 107, 107, 0.6);
}

@keyframes pulseDot {
  0% {
    box-shadow: 0 0 0 0 rgba(98, 217, 149, 0.7), 0 0 8px rgba(98, 217, 149, 0.8);
    transform: scale(0.95);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(98, 217, 149, 0), 0 0 16px rgba(98, 217, 149, 0.3);
    transform: scale(1.1);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(98, 217, 149, 0), 0 0 8px rgba(98, 217, 149, 0.8);
    transform: scale(0.95);
  }
}

.node-sub {
  color: var(--muted);
  font-size: 13px;
  margin-top: 8px;
}

.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 20px;
}

.metric {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  background: #0f1012;
}

.metric span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
}

.metric strong {
  display: block;
  font-size: 22px;
  margin-top: 8px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.nodegrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 16px;
  margin-top: 16px;
}

.ops {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 14px;
}

.op {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #0e0f11;
  font-size: 12.5px;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}

.op:hover {
  border-color: rgba(255, 255, 255, 0.16);
  background: #121418;
}

.op-brand,
.op > span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: 500;
}

.op-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}

.op-name {
  color: #f1f5f9;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.op b {
  color: #6fe19b;
  font-weight: 600;
  font-size: 12px;
}

.op.down b,
.op b.unavailable {
  color: var(--danger, #ff6b6b);
}

.op b.nodata {
  color: var(--muted, #64748b);
}

.masked {
  filter: blur(4.5px);
  user-select: none;
  transition: filter 0.2s ease;
}

.masked:hover {
  filter: none;
  user-select: text;
}

@media (max-width: 1000px) {
  .nodegrid {
    grid-template-columns: 1fr;
  }
  .metrics {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 650px) {
  .metrics, .ops {
    grid-template-columns: 1fr;
  }
  .node-top {
    flex-direction: column;
  }
}
/* Modal & Dialog Styling */
#connectModal {
  display: none;
}
#connectModal.open {
  display: flex !important;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.modal-close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 24px;
  cursor: pointer;
  line-height: 1;
}
.modal-close:hover {
  color: #fff;
}

#tabRemnawave.active, #tab3xui.active {
  background: #fff !important;
  color: #111 !important;
  border-color: #fff !important;
  font-weight: 700 !important;
}

.status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ok);
  display: inline-block;
  margin-right: 6px;
}
.status-dot.paused {
  background: var(--warning);
}
.status-dot.offline {
  background: var(--danger);
}

.status-pill {
  font-size: 13px;
  font-weight: 600;
  color: #7ee4a7;
  display: inline-flex;
  align-items: center;
}
.status-pill.paused {
  color: var(--warning);
}
.status-pill.offline {
  color: var(--danger);
}

.flag-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.flag-svg {
  border-radius: 2px;
  vertical-align: middle;
}

/* --------------------------------------------------
   Animated Traffic Chart Line & Dot
   -------------------------------------------------- */
#linePath, .line-path {
  transition: d 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

#areaPath, .area-path {
  transition: d 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

#errLinePath, #errAreaPath {
  transition: d 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

#chartDot, .chart-dot {
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.9));
  animation: pulseChartPoint 2s infinite ease-in-out;
}

@keyframes pulseChartPoint {
  0%, 100% {
    r: 4.5px;
    stroke: rgba(255, 255, 255, 0.4);
    stroke-width: 5px;
  }
  50% {
    r: 6.5px;
    stroke: rgba(255, 255, 255, 0.15);
    stroke-width: 8px;
  }
}

/* --------------------------------------------------
   Donut Chart Widget on node.html
   -------------------------------------------------- */
.donut-card-widget {
  background: transparent;
}

.donut-graphic-box {
  display: flex;
  align-items: center;
  gap: 16px;
}

.donut-svg circle {
  transition: stroke-dasharray 0.8s cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.donut-center-label strong {
  display: block;
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  font-family: var(--font-mono);
}

.donut-center-label small {
  font-size: 9px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.donut-legend-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.legend-entry {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11.5px;
}

.legend-entry strong {
  font-family: var(--font-mono);
  color: var(--text);
}

.legend-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}

.legend-dot.green { background: #62d995; }
.legend-dot.purple { background: #78a6ff; }
.legend-dot.red { background: #ff6b6b; }

.node-xhttp-warning-banner {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #f59e0b;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  margin: 12px 0 16px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  line-height: 1.4;
}
.op .op-icon { width:26px; height:26px; padding:2px; background:#202020; border:1px solid #454545; border-radius:7px !important; }

@media (max-width:650px) {
  .node,.nodegrid,.panel,.hero { min-width:0; }
  .node-title h1 { font-size:clamp(23px,7vw,32px); overflow-wrap:anywhere; }
  .node-sub { overflow-wrap:anywhere; }
  .metrics { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .metric { padding:12px; min-width:0; }
  .metric strong { font-size:19px; overflow-wrap:anywhere; }
  .ops { grid-template-columns:1fr; }
  .panel-head-flex { flex-wrap:wrap; gap:12px; }
  .periods { display:flex; flex-wrap:wrap; gap:5px; }
  .periods button { min-width:44px; min-height:44px; }
  #connectModal { padding:8px; }
  #connectModal .modal { width:100%; max-width:100%; max-height:calc(100dvh - 16px); }
  #connectModal .modal-head,#connectModal .modal-body,#connectModal .modal-foot { padding:15px; }
  #connectModal .modal-body { overflow-y:auto; }
  #connectModal .modal-close { min-width:44px; min-height:44px; }
  #connectModal .item { gap:12px; flex-wrap:wrap; }
  #connectModal .item strong { overflow-wrap:anywhere; }
  #connectModal .btn { min-height:44px; white-space:normal; }
  .code-box,pre { max-width:100%; overflow:auto; }
}
@media (max-width:360px) { .metrics { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { .dot,.status-dot,#chartDot,.chart-dot { animation:none !important; } }