:root{
--bg:#040b14;
--panel:#07101d;
--cyan:#00e5ff;
--green:#39ff14;
--amber:#ffab00;
--white:#d7f7ff;
--muted:#5f7483;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

background:
radial-gradient(circle at top left,#001f3f 0%,transparent 40%),
radial-gradient(circle at bottom right,#001122 0%,transparent 40%),
#040b14;

color:var(--white);

font-family:'Share Tech Mono', monospace;

overflow-x:hidden;
overflow-y:auto;

min-height:100vh;
}

/* HEADER */

header{

display:flex;
justify-content:space-between;
align-items:center;

padding:18px 25px;

background:rgba(5,15,25,0.9);

backdrop-filter:blur(12px);

border-bottom:1px solid #13314b;

position:sticky;
top:0;
z-index:1000;
}

.logo{

font-family:'Orbitron',sans-serif;

font-size:1.4rem;

font-weight:900;

color:var(--cyan);
}

.logo span{
color:var(--green);
}

.header-tag{
font-size:.7rem;
color:var(--muted);
}

.status-dot{

display:inline-block;

width:8px;
height:8px;

border-radius:50%;

background:var(--green);

margin-right:5px;

animation:pulse 1.5s infinite;
}

@keyframes pulse{

50%{
opacity:.3;
}

}

/* WORKSPACE */

.workspace{

display:grid;

grid-template-columns:240px 1fr 240px;

min-height:100vh;
}

/* SIDEBARS */

.side{

background:rgba(7,15,28,0.75);

backdrop-filter:blur(14px);

padding:20px;

overflow-y:auto;

border-right:1px solid rgba(0,229,255,0.12);

box-shadow:
0 0 25px rgba(0,229,255,0.08),
inset 0 0 10px rgba(255,255,255,0.02);
}

.panel-title{

color:var(--cyan);

margin-bottom:18px;

font-size:.75rem;

letter-spacing:2px;
}

/* CITY LIST */

.city-list{

display:flex;
flex-direction:column;
gap:10px;
}

.city-item{

padding:12px;

border:1px solid #13314b;

border-radius:6px;

cursor:pointer;

transition:.3s;
}

.city-item:hover{

background:#102337;

transform:translateX(5px);
}

.city-item.source{
border-color:var(--green);
color:var(--green);
}

.city-item.dest{
border-color:var(--amber);
color:var(--amber);
}

.city-item.on-path{
border-color:var(--cyan);
color:var(--cyan);
}

/* ALGO BUTTONS */

.algo-btns{

display:flex;
flex-direction:column;

gap:10px;

margin-bottom:25px;
}

.algo-btn{

padding:12px;

background:transparent;

border:1px solid #12344e;

color:var(--white);

cursor:pointer;

transition:.3s;
}

.algo-btn:hover{

background:#0b2033;

transform:translateY(-2px);
}

.algo-btn.active{

border-color:var(--cyan);

box-shadow:0 0 15px rgba(0,229,255,0.2);
}

/* RESET */

.reset-btn{

padding:12px;

background:transparent;

border:1px solid red;

color:red;

cursor:pointer;

transition:.3s;
}

.reset-btn:hover{

background:red;
color:black;
}

/* MAP */

#map-container{

position:relative;

overflow:auto;

min-height:1200px;

background:
radial-gradient(circle at center,#071520 0%,#040b14 70%);
}

#map-svg{

width:100%;

min-height:1200px;

display:block;
}

/* EDGES */

.edge{

stroke:#10243b;

stroke-width:2;
}

.edge.on-path{

stroke:var(--cyan);

stroke-width:3;

filter:url(#glow);

animation:pulsePath 1s infinite alternate;
}

@keyframes pulsePath{

from{
opacity:.6;
}

to{
opacity:1;
}

}

/* NODES */

.node-group{
cursor:pointer;
}

.node-group circle{

transition:.3s ease;
}

.node-group:hover circle:first-child{

filter:drop-shadow(0 0 12px #00e5ff);
}

.node-group:hover circle:last-child{

filter:drop-shadow(0 0 8px #00e5ff);
}

.node-group circle:first-child{

animation:pulseRing 2s infinite alternate;
}

@keyframes pulseRing{

from{
opacity:.7;
}

to{
opacity:1;
}

}

/* METRICS */

.metrics{

display:flex;
flex-direction:column;
gap:12px;

margin-bottom:25px;
}

.metric-row{

padding:12px;

border:1px solid #13314b;

transition:.3s;
}

.metric-row:hover{

transform:translateY(-3px);

box-shadow:0 0 15px rgba(0,229,255,0.15);
}

.metric-label{

color:var(--muted);

font-size:.7rem;
}

.metric-value{

margin-top:6px;

color:var(--cyan);

font-family:'Orbitron',sans-serif;
}

/* PATH */

.path-seq{

line-height:1.8;

color:var(--cyan);
}

/* STATUS PORTAL */

#status-portal{

position:fixed;

bottom:25px;
left:50%;

transform:translateX(-50%);

width:420px;

background:rgba(5,15,25,0.88);

backdrop-filter:blur(14px);

border:1px solid #13314b;

padding:16px 20px;

border-radius:14px;

box-shadow:
0 0 25px rgba(0,229,255,0.15);

z-index:999;
}

.portal-title{

font-size:.7rem;

color:var(--muted);

margin-bottom:8px;

letter-spacing:2px;
}

#algo-status{

color:var(--cyan);

font-size:.85rem;
}

/* RESPONSIVE */

@media(max-width:1100px){

.workspace{
grid-template-columns:1fr;
}

.side{
border:none;
}

#map-svg{
min-width:950px;
}

}

@media(max-width:768px){

header{

flex-direction:column;

gap:10px;

text-align:center;
}

.logo{
font-size:1rem;
}

#status-portal{

width:90%;
}

}