* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: Arial, sans-serif;
background: #0f172a;
color: white;
min-height: 100vh;
overflow-x: hidden;
}

.background-glow {
position: fixed;
width: 500px;
height: 500px;
background: rgba(59,130,246,0.15);
filter: blur(100px);
top: -100px;
left: -100px;
z-index: 0;
}

.login-card {
position: relative;
z-index: 1;
width: 380px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
backdrop-filter: blur(15px);
padding: 40px;
border-radius: 20px;
margin: 100px auto;
animation: fadeIn 0.8s ease;
}

.logo {
text-align: center;
margin-bottom: 40px;
}

.logo-circle {
width: 70px;
height: 70px;
border-radius: 50%;
background: #3b82f6;
display: flex;
justify-content: center;
align-items: center;
margin: auto;
font-size: 32px;
font-weight: bold;
margin-bottom: 15px;
}

.logo p {
color: #94a3b8;
margin-top: 8px;
}

.input-group {
position: relative;
margin-bottom: 24px;
}

.input-group input {
width: 100%;
padding: 16px;
border: none;
border-radius: 12px;
background: rgba(255,255,255,0.08);
color: white;
outline: none;
font-size: 15px;
}

.input-group label {
position: absolute;
left: 16px;
top: 16px;
color: #94a3b8;
pointer-events: none;
transition: 0.2s;
}

.input-group input:focus + label,
.input-group input:valid + label {
top: -10px;
left: 12px;
background: #0f172a;
padding: 0 6px;
font-size: 12px;
color: #3b82f6;
}

.login-btn,
button {
width: 100%;
padding: 14px;
border: none;
border-radius: 12px;
background: #3b82f6;
color: white;
cursor: pointer;
font-size: 15px;
transition: 0.2s;
}

button:hover,
.login-btn:hover {
transform: translateY(-2px);
}

#message {
margin-top: 18px;
text-align: center;
}

.dashboard-container {
padding: 40px;
}

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

.topbar-buttons {
display: flex;
gap: 12px;
}

.topbar button {
width: auto;
padding: 12px 20px;
}

.danger {
background: #ef4444;
}

.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px;
margin-bottom: 30px;
}

.stat-card,
.table-card {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 20px;
padding: 24px;
backdrop-filter: blur(15px);
}

.stat-card p {
margin-top: 12px;
font-size: 32px;
color: #3b82f6;
}

.table-header {
margin-bottom: 20px;
}

.category-item {
background: rgba(255,255,255,0.04);
padding: 18px;
border-radius: 14px;
margin-bottom: 14px;
transition: 0.2s;
}

.category-item:hover {
transform: translateY(-3px);
background: rgba(255,255,255,0.08);
}

.category-item span {
display: inline-block;
margin-top: 8px;
padding: 4px 10px;
border-radius: 20px;
background: #1e293b;
color: #3b82f6;
font-size: 12px;
}

.category-item p {
margin-top: 10px;
color: #cbd5e1;
}

@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}

to {
opacity: 1;
transform: translateY(0);
}
}