/* =========================
   Real‑World Net Sim Labs
   (static site; no framework)
   ========================= */

:root{
  --bg: #0b1020;
  --panel: rgba(255,255,255,0.06);
  --panel-2: rgba(255,255,255,0.08);
  --border: rgba(255,255,255,0.14);
  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.64);
  --muted-2: rgba(255,255,255,0.50);
  --accent: #7dd3fc; /* light blue */
  --accent-2: #a78bfa; /* purple */
  --warn: #fbbf24; /* amber */
  --ok: #34d399; /* green */
  --danger: #fb7185; /* rose */
  --shadow: 0 18px 50px rgba(0,0,0,0.35);
  --radius: 16px;
  --radius-sm: 12px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

*{ box-sizing: border-box; }
html,body{ height: 100%; }
body{
  margin: 0;
  background: radial-gradient(1100px 700px at 20% 0%, rgba(125, 211, 252, 0.18), transparent 55%),
              radial-gradient(900px 700px at 80% 10%, rgba(167, 139, 250, 0.16), transparent 60%),
              radial-gradient(700px 700px at 60% 90%, rgba(52, 211, 153, 0.10), transparent 60%),
              var(--bg);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.45;
}

a{ color: inherit; }
button, input, select{ font-family: inherit; }

.sr-only{
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.app-header{
  position: sticky;
  top: 0;
  z-index: 10;
  display:flex;
  gap: 18px;
  align-items:center;
  justify-content: space-between;
  padding: 16px 18px;
  backdrop-filter: blur(12px);
  background: rgba(11,16,32,0.78);
  border-bottom: 1px solid var(--border);
}

.brand{
  display:flex;
  gap: 12px;
  align-items:center;
}
.logo{
  width: 40px; height: 40px;
  display:grid; place-items:center;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  box-shadow: var(--shadow);
  font-size: 18px;
}
.brand-title{ font-weight: 700; letter-spacing: 0.2px; }
.brand-sub{ font-size: 12px; color: var(--muted); }

.top-nav{
  display:flex;
  gap: 10px;
  align-items:center;
}
.nav-btn{
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.05);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 999px;
  cursor:pointer;
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
}
.nav-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,0.08); }
.nav-btn.active{ border-color: rgba(125,211,252,0.65); background: rgba(125,211,252,0.10); }

.app-main{
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 18px;
}

.toolbar{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.toolbar-left{ display:flex; gap: 12px; align-items:center; }
.toolbar-title{ font-weight: 650; color: rgba(255,255,255,0.90); }

.pill{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
  color: var(--muted);
}

.toolbar-right{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.search input{
  width: min(420px, 68vw);
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.15);
  color: var(--text);
  outline: none;
}
.search input:focus{ border-color: rgba(125,211,252,0.65); }
.select{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.15);
  color: var(--text);
  outline: none;
}
.select:focus{ border-color: rgba(125,211,252,0.65); }

.view{ margin-top: 16px; }

.grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}

.card{
  grid-column: span 6;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  display:flex;
  flex-direction: column;
}
@media (max-width: 900px){
  .card{ grid-column: span 12; }
}
.card .card-hd{
  padding: 14px 14px 10px 14px;
  display:flex;
  gap: 10px;
  align-items:flex-start;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.badges{ display:flex; gap: 8px; flex-wrap: wrap; }
.badge{
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: var(--muted);
}
.badge.accent{ border-color: rgba(125,211,252,0.55); color: rgba(125,211,252,0.95); background: rgba(125,211,252,0.10); }
.badge.purple{ border-color: rgba(167,139,250,0.55); color: rgba(167,139,250,0.95); background: rgba(167,139,250,0.10); }
.badge.warn{ border-color: rgba(251,191,36,0.6); color: rgba(251,191,36,0.95); background: rgba(251,191,36,0.10); }
.badge.ok{ border-color: rgba(52,211,153,0.55); color: rgba(52,211,153,0.95); background: rgba(52,211,153,0.10); }
.badge.danger{ border-color: rgba(251,113,133,0.6); color: rgba(251,113,133,0.95); background: rgba(251,113,133,0.10); }

.card .card-title{
  font-weight: 700;
  margin: 0;
  font-size: 16px;
}
.card .card-sub{
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
}

.card .card-bd{ padding: 12px 14px 14px 14px; color: var(--text); }
.card .card-actions{
  padding: 0 14px 14px 14px;
  display:flex;
  gap: 10px;
  margin-top: auto;
}
.btn{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  cursor:pointer;
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
  text-decoration: none;
}
.btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,0.09); border-color: rgba(125,211,252,0.55); }
.btn.primary{ background: rgba(125,211,252,0.12); border-color: rgba(125,211,252,0.55); }
.btn.primary:hover{ background: rgba(125,211,252,0.18); }

.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 980px){
  .split{ grid-template-columns: 1fr; }
}

.panel{
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.panel-hd{
  padding: 14px 14px 10px 14px;
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.panel-title{
  margin:0;
  font-size: 16px;
  font-weight: 750;
}
.panel-sub{ margin-top: 6px; color: var(--muted); font-size: 13px; }
.panel-bd{ padding: 14px; }

.kbd{
  font-family: var(--mono);
  padding: 2px 6px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.20);
  font-size: 12px;
}

.tabs{
  display:flex;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-wrap: wrap;
}
.tab{
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  cursor:pointer;
}
.tab.active{
  border-color: rgba(125,211,252,0.65);
  background: rgba(125,211,252,0.12);
}

hr.sep{
  border: none;
  border-top: 1px solid rgba(255,255,255,0.10);
  margin: 12px 0;
}

ul.clean{ margin: 10px 0 0 18px; color: var(--text); }
ul.clean li{ margin: 6px 0; color: rgba(255,255,255,0.86); }

.codeblock{
  position: relative;
  background: rgba(0,0,0,0.26);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
}
.codeblock pre{
  margin: 0;
  padding: 12px 12px 12px 12px;
  overflow: auto;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.42;
  color: rgba(255,255,255,0.90);
}
.copy-btn{
  position: absolute;
  right: 10px;
  top: 10px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.88);
  padding: 6px 9px;
  border-radius: 10px;
  cursor:pointer;
  font-size: 12px;
}
.copy-btn:hover{ border-color: rgba(125,211,252,0.60); background: rgba(125,211,252,0.10); }

.notice{
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 12px;
}
.notice.ok{ border-color: rgba(52,211,153,0.55); background: rgba(52,211,153,0.10); }
.notice.warn{ border-color: rgba(251,191,36,0.6); background: rgba(251,191,36,0.10); }
.notice.danger{ border-color: rgba(251,113,133,0.6); background: rgba(251,113,133,0.10); }

.small{ font-size: 13px; color: rgba(255,255,255,0.86); }
.muted{ color: var(--muted); }

.console-wrap{
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.console-bar{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap: wrap;
}
.console{
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  background: rgba(0,0,0,0.28);
  overflow: hidden;
}
.console-output{
  height: 280px;
  overflow: auto;
  padding: 12px;
  font-family: var(--mono);
  font-size: 12.5px;
  white-space: pre-wrap;
  line-height: 1.45;
}
.console-input-row{
  border-top: 1px solid rgba(255,255,255,0.10);
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
}
.prompt{
  color: rgba(125,211,252,0.92);
  font-family: var(--mono);
  font-size: 12.5px;
}
.console-input{
  flex: 1;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  padding: 10px 10px;
  border-radius: 12px;
  outline: none;
  font-family: var(--mono);
  font-size: 12.5px;
}
.console-input:focus{ border-color: rgba(125,211,252,0.65); }

.app-footer{
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 20px 18px 28px 18px;
  color: var(--muted);
  display:flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

svg.topology{
  width: 100%;
  height: auto;
  display:block;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.18);
}
.node-label{
  font-family: var(--sans);
  font-size: 12px;
  fill: rgba(255,255,255,0.86);
}
.node-box{
  fill: rgba(255,255,255,0.06);
  stroke: rgba(255,255,255,0.18);
}
.link-line{
  stroke: rgba(255,255,255,0.22);
  stroke-width: 2;
}
.node-box.active{
  stroke: rgba(125,211,252,0.80);
  fill: rgba(125,211,252,0.10);
}

.table{
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
}
.table th, .table td{
  text-align:left;
  padding: 10px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  font-size: 13px;
}
.table th{ color: rgba(255,255,255,0.86); background: rgba(255,255,255,0.05); }
.table td{ color: rgba(255,255,255,0.84); }
.table tr:last-child td{ border-bottom: none; }


/* =========================
   Topology LEDs
   ========================= */

@keyframes ledBlink{
  0%{ opacity: 1; }
  50%{ opacity: 0.25; }
  100%{ opacity: 1; }
}

.led{ stroke: rgba(255,255,255,0.30); stroke-width: 2; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.35)); }
.led.ok{ fill: rgba(52,211,153,0.95); }
.led.warn{ fill: rgba(251,191,36,0.95); }
.led.danger{ fill: rgba(251,113,133,0.95); }
.led.blink{ animation: ledBlink 0.9s infinite; }

.link-line{ stroke: rgba(255,255,255,0.22); stroke-width: 3.2; }
.link-line.ok{ stroke: rgba(52,211,153,0.70); }
.link-line.warn{ stroke: rgba(251,191,36,0.70); stroke-dasharray: 7 6; }
.link-line.danger{ stroke: rgba(251,113,133,0.75); stroke-dasharray: 6 6; }
.link-line.blink{ animation: ledBlink 0.9s infinite; }