*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Segoe UI, Arial, sans-serif;
}

body{
background:#0b1220;
color:#fff;
}

/* ===== NAVBAR ===== */

.navbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:14px 24px;
background:#0f172a;
border-bottom:1px solid #1f2937;
}

.logo{
font-weight:bold;
font-size:18px;
color:#4da3ff;
}

.menu a{
color:#ddd;
margin-left:18px;
text-decoration:none;
font-size:14px;
}

.menu a:hover{
color:#fff;
}

/* ===== APP ===== */

.app{
display:flex;
height:calc(100vh - 60px);
}

/* ===== SIDEBAR ===== */

.sidebar{
width:220px;
background:#111827;
padding:20px;
}

.sidebar h3{
margin-bottom:15px;
font-size:14px;
color:#9ca3af;
}

.sidebar a{
display:block;
padding:10px;
margin-bottom:8px;
border-radius:8px;
color:#ddd;
text-decoration:none;
transition:.2s;
}

.sidebar a:hover{
background:#1f2937;
color:#fff;
}

.sidebar a.active{
background:#2563eb;
color:#fff;
}

/* ===== MAIN ===== */

.main{
flex:1;
padding:20px;
overflow:auto;
}

.page-title{
margin-bottom:20px;
}

/* ===== STATUS ===== */

.status-bar{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:15px;
margin-bottom:20px;
}

.status-card{
background:#1f2937;
padding:14px;
border-radius:10px;
font-size:14px;
}

/* ===== GRID ===== */

.grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
}

/* ===== CARD ===== */

.card{
background:#1f2937;
padding:15px;
border-radius:12px;
}

.card h3{
margin-bottom:10px;
}

/* ===== TABLE ===== */

table{
width:100%;
border-collapse:collapse;
}

th,td{
padding:10px;
border-bottom:1px solid #374151;
font-size:14px;
}

th{
text-align:left;
color:#9ca3af;
}

tr:hover{
background:#111827;
}