*{box-sizing:border-box}
body{
  margin:0;height:100vh;display:flex;justify-content:center;align-items:center;
  font-family:"Segoe UI",Arial,sans-serif;color:#fff;overflow:hidden;
  background:linear-gradient(135deg,#0f0f0f,#1a1a1a,#111);
}

@keyframes fadeSlideUp{
  from{opacity:0;transform:translateY(30px)}
  to{opacity:1;transform:translateY(0)}
}

.card{
  width:440px; padding:54px 46px; border-radius:20px; text-align:center;
  background:linear-gradient(145deg,#1c1c1c,#242424);
  box-shadow:0 20px 40px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.03);
  animation:fadeSlideUp .6s ease forwards;
}

.card.wide{width:980px}
h1,h2{margin:0 0 28px;font-weight:600;letter-spacing:.6px}
.small{opacity:.85;font-size:14px;margin-top:-14px;margin-bottom:18px}
hr{border:none;border-top:1px solid rgba(255,255,255,.08);margin:18px 0}

input[type="text"],input[type="password"],input[type="number"],select{
  width:100%; padding:14px; margin:0 0 14px;
  border-radius:12px; border:1px solid transparent; outline:none;
  background:#e6e6e6; color:#111; font-size:15px;
  transition:.25s ease;
}
input:focus,select:focus{
  border:1px solid #888;
  box-shadow:0 0 10px rgba(220,220,220,.35);
}

.btn,button{
  width:100%; padding:14px; border-radius:12px; border:none;
  background:linear-gradient(145deg,#3a3a3a,#4a4a4a);
  color:#fff; font-size:16px; cursor:pointer;
  transition:.25s ease; text-decoration:none; display:block;
  letter-spacing:.4px; margin-top:10px;
}
.btn:hover,button:hover{
  transform:translateY(-2px);
  background:linear-gradient(145deg,#505050,#666);
  box-shadow:0 8px 20px rgba(0,0,0,.5);
}

.row{display:flex;gap:12px}
.row > *{flex:1}

.show-password{
  display:flex;align-items:center;justify-content:flex-start;
  gap:8px;margin:4px 0 10px;font-size:14px;opacity:.9;
  user-select:none;
}
.show-password input{width:auto;margin:0}

.error{color:#ff4d4d;margin:0 0 12px;font-size:14px}
.success{color:#7CFC9A;margin:0 0 12px;font-size:14px}

.table-wrap{margin-top:14px;overflow:auto;border-radius:12px}
table{
  width:100%; border-collapse:collapse; font-size:14px;
  background:#1a1a1a;
}
th,td{padding:10px;border:1px solid rgba(255,255,255,.12);text-align:left}
th{background:#2a2a2a}
.badge{padding:4px 10px;border-radius:999px;display:inline-block;font-size:12px}
.badge.present{background:#2f5a3a}
.badge.late{background:#5a4a2f}
.topbar{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:10px}
.topbar .btn{width:auto;margin:0;padding:10px 14px}