body{
margin:0;
font-family:Arial, Helvetica, sans-serif;
background:#f3f5f9;
}


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

.navbar{
height:60px;
background:white;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 40px;
box-shadow:0 2px 8px rgba(0,0,0,0.1);

position:relative;
z-index:1000;
}

/* LOGO */

.nav-left{
display:flex;
align-items:center;
gap:10px;
}

.nav-logo{
width:36px;
height:36px;
border-radius:8px;
}

.brand{
font-size:20px;
font-weight:bold;
color:#111;
}


/* SEARCH BAR */

.nav-search{
flex:1;
display:flex;
justify-content:center;
margin:0 10px;
}

.nav-search input{
width:100%;
max-width:250px;
padding:12px 18px;
font-size:15px;
border-radius:8px;
border:1px solid #ddd;
background:#f9fafb;
outline:none;
}

.nav-search input:focus{
border:1px solid #2563eb;
background:white;
box-shadow:0 0 0 3px rgba(37,99,235,0.1);
}


/* RIGHT SIDE BUTTONS */

.nav-right {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.login-btn{
background:#2563eb;
color:white;
padding:8px 16px;
border-radius:6px;
text-decoration:none;
font-size:14px;
}

.register-btn{
border:1px solid #2563eb;
padding:8px 16px;
border-radius:6px;
color:#2563eb;
text-decoration:none;
font-size:14px;
}


/* LOGO */

.nav-left{
display:flex;
align-items:center;
gap:10px;
}

.nav-logo{
width:36px;
height:36px;
border-radius:8px;
}

.brand{
font-size:20px;
font-weight:bold;
color:#111;
}

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

.main{
display:flex;
}


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

.sidebar{
width:220px;
background:#1f2937;
height:100vh;
color:white;
padding:20px;

position:fixed;
top:60px;
left:0;
z-index:1;
}

.sidebar ul{
list-style:none;
padding:0;
margin:0;
}

.sidebar li{
margin-bottom:20px;
cursor:pointer;
font-size:15px;
}

.sidebar a{
color:#cbd5e1;
text-decoration:none;
display:block;
padding:8px 10px;
border-radius:6px;
}

.sidebar a:hover{
background:#374151;
}


/* ================= CONTENT ================= */

.content{
margin-left:240px;
margin-top:80px;
padding:30px;
}

.content h2{
margin-top:0;
}


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

.grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
margin-top:30px;
}


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

.card{
background:white;
padding:25px;
text-align:center;
border-radius:12px;
box-shadow:0 6px 18px rgba(0,0,0,0.1);
font-weight:bold;
text-decoration:none;
color:black;
transition:0.25s;
}

.card:hover{
transform:translateY(-6px);
box-shadow:0 12px 24px rgba(0,0,0,0.15);
}


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

.stage-card{
padding:30px;
background:white;
border-radius:12px;
box-shadow:0 6px 18px rgba(0,0,0,0.1);
transition:0.25s;
text-align:center;
}

.stage-card:hover{
transform:translateY(-6px);
box-shadow:0 12px 24px rgba(0,0,0,0.15);
}


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

.test-card{
background:white;
padding:25px;
border-radius:12px;
box-shadow:0 6px 18px rgba(0,0,0,0.1);
transition:0.25s;
}

.test-card:hover{
transform:translateY(-6px);
box-shadow:0 12px 24px rgba(0,0,0,0.15);
}


/* ================= RESPONSIVE ================= */

@media(max-width:1000px){

.grid{
grid-template-columns:repeat(2,1fr);
}

.sidebar{
display:none;
}

.content{
margin-left:0;
}

}


@media(max-width:600px){

.grid{
grid-template-columns:1fr;
}

.nav-search{
display:none;
}

}