:root{


--red:#ff1744;

--bg:#08090c;

--panel:#111318;

--card:#181b21;

--line:#292e38;

--text:#f4f4f5;

--muted:#858b98;

--green:#27d17f;


}



*{

margin:0;
padding:0;
box-sizing:border-box;

}



body{


height:100vh;


display:flex;

align-items:center;

justify-content:center;



background:

radial-gradient(
circle at top,
#252832,
#07080a
);



font-family:Inter,sans-serif;

color:var(--text);


}






.app{


width:950px;

max-width:95vw;


background:var(--panel);


border:

1px solid var(--line);


box-shadow:

0 40px 100px black;


}







header{


height:65px;


display:flex;

align-items:center;


padding:0 25px;


background:#101216;


border-bottom:

1px solid var(--line);


}





.brand{


display:flex;

gap:12px;

align-items:center;


font-weight:700;


}



.logo{


width:34px;

height:34px;


background:var(--red);


display:flex;

align-items:center;

justify-content:center;


}





nav{


display:flex;

gap:30px;


margin-left:50px;


color:var(--muted);


font-size:13px;


}




nav .active{


color:white;


border-bottom:

2px solid var(--red);


padding-bottom:22px;


}





.search{


margin-left:auto;


padding:8px 25px;


background:#08090c;


border:

1px solid var(--line);


color:#777;


font-size:12px;


}







.tabs{


height:45px;


display:flex;


gap:35px;


padding-left:25px;


align-items:center;


border-bottom:

1px solid var(--line);


color:var(--muted);


}



.tabs .selected{


color:white;


border-bottom:

2px solid var(--red);


height:45px;


display:flex;

align-items:center;


}





main{


padding:25px;


}







.hero{


display:flex;

justify-content:space-between;

align-items:center;


background:#0d0f13;


border:

1px solid var(--line);


padding:20px;


}





.hero h2{

font-size:22px;

}


.hero p{

color:var(--muted);

font-size:11px;

}





.status{


color:var(--green);

border:

1px solid var(--green);


padding:8px 18px;


font-size:12px;


}









.grid{


display:grid;


grid-template-columns:repeat(4,1fr);


gap:15px;


margin-top:20px;


}




.card{


background:var(--card);


border:

1px solid var(--line);


padding:20px;


}



.card label{


font-size:10px;

color:var(--muted);


}



.card h1{


font-size:20px;

margin:12px 0;


}



.card span{


font-size:12px;

color:var(--muted);


}









.pipeline{


margin-top:25px;


display:flex;


align-items:center;


justify-content:center;


}



.node{


padding:14px 25px;


background:#171a20;


border:

1px solid var(--line);


font-size:12px;


}




.core{


border-color:var(--red);


box-shadow:

0 0 20px #ff174433;


}




.line{


height:1px;

width:50px;


background:var(--red);


}








.message{


margin-top:25px;


padding:18px;


background:#201014;


border-left:

3px solid var(--red);


color:#ccc;


}



.message span{


display:inline-block;


width:8px;

height:8px;


background:var(--red);


margin-left:10px;


animation:pulse 1s infinite;


}



@keyframes pulse{

50%{

opacity:.2;

}

}







.buttons{


display:flex;

gap:12px;


margin-top:20px;


}





button{


flex:1;

height:42px;


background:#20242c;


border:

1px solid var(--line);


color:#aaa;


}





.primary{


background:var(--red);

color:white;

border:none;


}






footer{


height:40px;


display:flex;


justify-content:center;

align-items:center;


font-size:11px;


color:var(--muted);


border-top:

1px solid var(--line);


}




@media(max-width:700px){


.grid{

grid-template-columns:1fr 1fr;

}


.pipeline{

flex-wrap:wrap;

}


}