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

body{
background:#eef2f7;
}

/* =====================
LOGIN / REGISTER
===================== */

.login-body{

display:flex;

justify-content:center;

align-items:center;

height:100vh;

background:

linear-gradient(
135deg,
#0f172a,
#1e293b,
#334155
);

}

.login-container{

width:100%;

display:flex;

justify-content:center;

align-items:center;

padding:20px;

}

.login-card{

width:420px;

background:white;

padding:40px;

border-radius:20px;

box-shadow:
0 10px 35px rgba(0,0,0,0.18);

text-align:center;

}

.login-card h1{

color:#1e293b;

margin-bottom:10px;

}

.login-card p{

color:#64748b;

margin-bottom:25px;

}

.login-card form{

display:flex;

flex-direction:column;

gap:15px;

}

.login-card input{

padding:14px;

border:1px solid #d1d5db;

border-radius:12px;

font-size:15px;

outline:none;

transition:0.3s;

}

.login-card input:focus{

border-color:#22c55e;

box-shadow:
0 0 0 4px
rgba(34,197,94,0.15);

}

.login-card button{

background:#22c55e;

color:white;

border:none;

padding:14px;

font-size:16px;

border-radius:12px;

cursor:pointer;

transition:0.3s;

}

.login-card button:hover{

background:#16a34a;

}

.register-link{

margin-top:20px;

color:#64748b;

}

.register-link a{

color:#22c55e;

text-decoration:none;

font-weight:bold;

}

/* =====================
ALERT
===================== */

.alert-danger{

background:#ef4444;

color:white;

padding:14px;

border-radius:12px;

margin-bottom:20px;

}

.alert-success{

background:#22c55e;

color:white;

padding:14px;

border-radius:12px;

margin-bottom:20px;

}

.alert-warning{

background:#f59e0b;

color:white;

padding:14px;

border-radius:12px;

margin-bottom:20px;

}

/* =====================
BUTTONS
===================== */

.btn{

display:inline-block;

padding:12px 20px;

border-radius:12px;

text-decoration:none;

cursor:pointer;

transition:0.3s;

}

.btn-primary{

background:#22c55e;

color:white;

}

.btn-primary:hover{

background:#16a34a;

}

.btn-danger{

background:#ef4444;

color:white;

}

.btn-danger:hover{

background:#dc2626;

}

.btn-warning{

background:#f59e0b;

color:white;

}

.btn-warning:hover{

background:#d97706;

}

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

.card{

background:white;

padding:25px;

border-radius:20px;

box-shadow:
0 6px 20px rgba(0,0,0,0.08);

}

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

table{

width:100%;

border-collapse:collapse;

background:white;

border-radius:15px;

overflow:hidden;

}

table th{

background:#1e293b;

color:white;

padding:16px;

}

table td{

padding:15px;

border-bottom:1px solid #e5e7eb;

text-align:center;

}

table tr:hover{

background:#f8fafc;

}

/* =====================
BADGE
===================== */

.badge{

padding:8px 14px;

border-radius:20px;

font-size:13px;

color:white;

display:inline-block;

}

.badge-green{

background:#22c55e;

}

.badge-red{

background:#ef4444;

}

.badge-blue{

background:#3b82f6;

}

.badge-yellow{

background:#f59e0b;

}

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

.navbar{

background:#1e293b;

padding:18px 40px;

display:flex;

justify-content:space-between;

align-items:center;

}

.logo{

font-size:24px;

font-weight:bold;

color:white;

}

.navbar ul{

display:flex;

gap:25px;

list-style:none;

}

.navbar a{

color:white;

text-decoration:none;

}

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

@media(max-width:768px){

.login-card{

width:100%;

padding:30px;

}

.navbar{

flex-direction:column;

gap:15px;

}

.navbar ul{

flex-direction:column;

text-align:center;

}

table{

display:block;

overflow-x:auto;

}

}
table{
width:100%;
border-collapse:collapse;
background:white;
border-radius:20px;
overflow:hidden;
box-shadow:0 10px 25px rgba(0,0,0,.06);
}

th{
background:#0f172a;
color:white;
padding:16px;
}

td{
padding:15px;
border-bottom:1px solid #e5e7eb;
}

tr:hover{
background:#f8fafc;
}

table{
width:100%;
border-collapse:collapse;
background:white;
border-radius:20px;
overflow:hidden;
box-shadow:0 10px 25px rgba(0,0,0,.06);
}

th{
background:#0f172a;
color:white;
padding:16px;
}

td{
padding:15px;
border-bottom:1px solid #e5e7eb;
}

tr:hover{
background:#f8fafc;
}