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

body{

background:#000;
color:#00f0ff;
font-family:monospace;
height:100vh;
overflow:hidden;

}

/* APP LAYOUT */

.app{

display:flex;
height:100vh;

}

/* SIDEBAR */

.sidebar{

width:220px;
background:#050505;
border-right:1px solid #00f0ff;

padding:20px;

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

}

.logo{

font-size:18px;
color:#00ffaa;
font-weight:bold;

}

.network{

font-size:12px;

}

.online-dot{

width:8px;
height:8px;
background:#00ff6a;
border-radius:50%;
display:inline-block;
margin-left:5px;

}

.menu div{

padding:6px 0;
cursor:pointer;

}

.menu div:hover{

color:#00ffaa;

}

.system-info{

margin-top:auto;
font-size:12px;
color:#00ffaa;

}

/* MAIN */

.main{

flex:1;
display:flex;
flex-direction:column;
height:100vh;

}

/* TOPBAR */

.topbar{

display:flex;
gap:10px;
align-items:center;

padding:12px;

background:#080808;
border-bottom:1px solid #00f0ff;

}

.topbar input{

flex:1;

background:#000;
border:1px solid #00f0ff;

padding:10px;
color:#00f0ff;

}

.topbar button{

background:#000;
border:1px solid #00f0ff;

padding:10px 16px;
color:#00f0ff;
cursor:pointer;

}

.topbar button:hover{

background:#00f0ff;
color:#000;

}

/* DASHBOARD */

.dashboard{

display:grid;

grid-template-columns:1fr 1fr;

gap:12px;

padding:12px;

}

.card{

background:#050505;
border:1px solid #00f0ff;

padding:12px;

min-height:140px;

}

.card h3{

color:#00ffaa;
margin-bottom:10px;

}

/* TERMINAL */

.terminal{

flex:1;
display:flex;
flex-direction:column;

margin:12px;

border:1px solid #00f0ff;

min-height:0;

}

.terminal-header{

background:#0a0a0a;

padding:8px;

text-align:center;

border-bottom:1px solid #00f0ff;

}

.terminal-body{

flex:1;

overflow-y:auto;

padding:12px;

font-size:14px;

}

/* MOBILE */

@media (max-width:900px){

.sidebar{

display:none;

}

.dashboard{

grid-template-columns:1fr;

}

.topbar{

flex-direction:column;
align-items:stretch;

}

.terminal{

margin:12px;

}

}