body{
font-family:Arial;
margin:0;
background:#0f172a;
color:white;
}

header{
background:#020617;
padding:20px;
text-align:center;
}

.container{
display:flex;
height:100vh;
}

#sidebar{
width:260px;
background:#020617;
overflow:auto;
border-right:1px solid #334155;
}

#sidebar button{
width:100%;
padding:12px;
background:none;
border:none;
color:white;
text-align:left;
cursor:pointer;
border-bottom:1px solid #1e293b;
}

#sidebar button:hover{
background:#1e293b;
}

.content{
flex:1;
padding:30px;
overflow:auto;
}

pre{
background:black;
padding:10px;
border-radius:4px;
color:#00ff88;
}

.simulator{
margin-top:40px;
background:#020617;
padding:20px;
border:1px solid #334155;
}

#terminal{
background:black;
height:200px;
overflow:auto;
padding:10px;
color:#00ff88;
font-family:monospace;
margin-bottom:10px;
}

input{
width:100%;
padding:10px;
background:black;
color:#00ff88;
border:1px solid #334155;
}

button{
margin-top:10px;
padding:10px;
cursor:pointer;
background:#2563eb;
border:none;
color:white;
}
.challenge-box{
background:#1e293b;
padding:15px;
border-radius:6px;
border:1px solid #334155;
margin-bottom:25px;
}

.network-map{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-bottom:25px;
}

.node{
padding:10px 15px;
background:#020617;
border:1px solid #334155;
border-radius:6px;
font-family:monospace;
}

.simulator{
margin-top:30px;
}

#hintText {
  display: none;
  margin-top: 5px;
  padding: 5px;
  background-color: #e7f3ff;
  border-left: 3px solid #007BFF;
  color: #007BFF;
  font-family: monospace;
}

#showHint {
  margin-top: 5px;
  padding: 5px 10px;
  cursor: pointer;
  background-color: #007BFF;
  color: #fff;
  border: none;
  border-radius: 3px;
}
#showHint:hover {
  background-color: #0056b3;
}

/* HEADER */

.main-header{
background:#0b0f14;
color:white;
padding:20px;
border-bottom:1px solid #1f2933;
}

.header-top{
margin-bottom:15px;
}

.main-header h1{
margin:0;
font-size:28px;
}

.main-header p{
color:#9aa4af;
margin-top:5px;
}


/* NAVIGATION */

.main-nav{
display:flex;
gap:10px;
flex-wrap:wrap;
}

.nav-tab{
padding:8px 16px;
background:#11161d;
border:1px solid #1f2a36;
color:white;
border-radius:6px;
cursor:pointer;
}

.nav-tab:hover{
background:#1f2933;
}

.nav-tab.active{
background:#2563eb;
border-color:#2563eb;
}


/* TAB SECTIONS */

.tab-section{
display:none;
margin-top:20px;
}

.tab-section.active{
display:block;
}

/* LABS SECTION */
.labs-section {
  position: relative;
  background: #0f1115;
  color: white;
  padding: 20px;
  border-radius: 8px;
  margin: 20px 0;
}

.labs-section.hidden {
  display: none;
}

.labs-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.close-btn {
  background: #ef4444;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
}

.close-btn:hover {
  background: #dc2626;
}

.labs-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.lab-card {
  background: #11161b;
  padding: 15px;
  border-radius: 6px;
  border: 1px solid #1f2933;
}

.lab-card h3 {
  margin-top: 0;
}

.lab-step {
  margin-top: 10px;
  padding: 10px;
  background: #1f2430;
  border-radius: 4px;
}

.command {
  background: #161b22;
  padding: 8px;
  border-radius: 4px;
}

.copy-btn, .run-btn {
  margin-top: 5px;
  margin-right: 5px;
  background: #2563eb;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
}

.copy-btn:hover, .run-btn:hover {
  background: #1d4ed8;
}

.terminal-output {
  background: black;
  color: #0fdf91;
  padding: 8px;
  margin-top: 5px;
  border-radius: 4px;
  font-family: monospace;
}

.terminal-output.hidden {
  display: none;
}