body{
margin:0;
font-family:Inter,Arial,sans-serif;
background:#020617;
color:#fff
}

.layout{
display:flex;
min-height:100vh;
background:
radial-gradient(circle at top left, rgba(37,99,235,.22), transparent 35%),
radial-gradient(circle at bottom right, rgba(6,182,212,.18), transparent 35%),
#020617
}

.sidebar{
width:260px;
background:#081226;
border-right:1px solid rgba(255,255,255,.08);
padding:28px
}

.logo{
font-size:42px;
font-weight:800;
margin-bottom:40px
}

.nav a{
display:block;
padding:14px 18px;
border-radius:14px;
color:#cbd5e1;
text-decoration:none;
margin-bottom:8px;
transition:all .25s ease;
position:relative;
overflow:hidden
}

.nav a:hover,
.nav a.active{
background:linear-gradient(90deg,#06b6d4,#2563eb);
color:white;
transform:translateX(4px);
box-shadow:0 10px 25px rgba(37,99,235,.18)
}

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

.card{
background:#0f172a;
border:1px solid rgba(255,255,255,.08);
border-radius:28px;
padding:32px;
box-shadow:0 0 50px rgba(37,99,235,.12);
transition:all .25s ease
}

.card:hover{
transform:translateY(-4px);
box-shadow:
0 20px 50px rgba(37,99,235,.18),
0 0 30px rgba(6,182,212,.08)
}

.card-title{
font-size:46px;
font-weight:800;
margin-bottom:10px
}

.card-sub{
color:#94a3b8;
margin-bottom:30px
}

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

.table th,
.table td{
padding:18px;
border-bottom:1px solid rgba(255,255,255,.06)
}

.table tbody tr{
transition:all .2s ease
}

.table tbody tr:hover{
background:rgba(255,255,255,.03)
}

.badge{
display:inline-block;
padding:8px 14px;
border-radius:999px;
background:rgba(6,182,212,.18);
color:#67e8f9;
transition:all .2s ease
}

.badge:hover{
transform:scale(1.05);
box-shadow:0 0 18px rgba(6,182,212,.22)
}

.login-shell{
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
padding:24px;
background:
radial-gradient(circle at top left, rgba(37,99,235,.22), transparent 35%),
radial-gradient(circle at bottom right, rgba(6,182,212,.18), transparent 35%),
#020617
}

.login-card{
width:100%;
max-width:460px;
background:#0f172a;
border-radius:30px;
padding:42px;
border:1px solid rgba(255,255,255,.08);
box-shadow:0 0 60px rgba(37,99,235,.15)
}

.brand{
font-size:58px;
font-weight:800
}

.sub{
color:#94a3b8;
margin:12px 0 30px
}

.form-label{
display:block;
margin-bottom:8px;
font-weight:600
}

.form-control{
width:100%;
padding:16px;
border-radius:16px;
background:#020617;
border:1px solid rgba(255,255,255,.08);
color:white;
margin-bottom:22px;
transition:all .25s ease
}

.form-control:focus{
outline:none;
border-color:#06b6d4;
box-shadow:0 0 0 4px rgba(6,182,212,.15)
}

.btn{
width:100%;
padding:16px;
border:none;
border-radius:16px;
background:linear-gradient(90deg,#06b6d4,#2563eb);
color:white;
font-weight:700;
cursor:pointer;
transition:all .25s ease
}

.btn:hover{
transform:translateY(-2px) scale(1.01);
box-shadow:
0 15px 35px rgba(37,99,235,.35),
0 0 25px rgba(6,182,212,.18);
filter:brightness(1.05)
}

.topbar{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:24px
}

.topbar-title{
font-size:18px;
color:#cbd5e1
}

.logout-btn{
padding:12px 18px;
border-radius:14px;
background:#ef4444;
color:white;
text-decoration:none;
transition:all .25s ease
}

.logout-btn:hover{
background:#dc2626;
transform:translateY(-2px);
box-shadow:0 10px 25px rgba(239,68,68,.25)
}

@media(max-width:900px){

.layout{
flex-direction:column
}

.sidebar{
width:100%
}

.content{
padding:20px
}

.brand{
font-size:44px
}

}