body{
margin:0;
font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
background:#0b1220;
color:white;
}

.admin-layout{
display:flex;
min-height:100vh;
}

/* Sidebar */

.sidebar{

width:250px;

background:linear-gradient(
180deg,
#101a33,
#0e1830
);

padding:24px;

border-right:1px solid rgba(255,255,255,.06);
}

.sidebar-brand{
font-size:18px;
font-weight:800;
margin-bottom:20px;
}

.sidebar nav{
display:flex;
flex-direction:column;
gap:10px;
}

.sidebar a{

color:#9aa7c2;

text-decoration:none;

padding:12px 14px;

border-radius:10px;

transition:.2s;
}

.sidebar a:hover{
background:#1a2a4a;
color:#6ee7ff;
}

.sidebar a.active{
background:#1a2a4a;
color:#6ee7ff;
}

/* Main content */

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

/* Cards */

.cards{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:16px;

margin-bottom:30px;
}

.card{

background:#121b2f;

padding:22px;

border-radius:14px;

border:1px solid rgba(255,255,255,.05);
}

.card h3{
margin-top:0;
}

.card p{
font-size:28px;
margin-bottom:0;
}

/* Tech grid */

.tech-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(120px,1fr));

gap:12px;

margin-top:10px;
}

.tech{

background:#121b2f;

padding:14px;

border-radius:10px;

text-align:center;

font-weight:bold;
}

/* Status */

.status{
display:flex;
gap:12px;
margin-top:12px;
flex-wrap:wrap;
}

.status-box{
padding:12px 14px;
border-radius:10px;
background:#121b2f;
}

.good{
border-left:4px solid #7CFF9A;
}

.admin-info{
margin-top:20px;
}

.panel-section{
  display:none;
}
.panel-section.active{
  display:block;
}
code{
  background:rgba(255,255,255,.06);
  padding:2px 6px;
  border-radius:8px;
}