:root{
  --green:#22c55e;
  --red:#ef4444;
  --bg:#0f172a;
}

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

body{
  min-height:100vh;
  background:
  linear-gradient(
  135deg,
  #0f172a,
  #1e293b
  );
  color:white;
  overflow-x:hidden;
}

.container{
  max-width:600px;
  margin:auto;
  padding:20px;
}

header{
  text-align:center;
  margin:30px 0;
}

header h1{
  font-size:40px;
  font-weight:800;
}

header p{
  opacity:.7;
}

.login-section{
  display:flex;
  justify-content:center;
  margin-top:30px;
}

.glass-card{
  background:
  rgba(255,255,255,.08);

  backdrop-filter:
  blur(18px);

  border:
  1px solid
  rgba(255,255,255,.1);

  border-radius:28px;

  padding:25px;

  margin-bottom:20px;

  text-align:center;
}

.avatar{
  width:100px;
  height:100px;
  border-radius:50%;
  margin-bottom:15px;
  border:3px solid rgba(255,255,255,.2);
}

#email{
  opacity:.7;
  margin-top:5px;
}

.status-badge{
  display:inline-block;
  padding:10px 18px;
  border-radius:999px;
  margin-top:20px;
  font-weight:600;
}

.online{
  background:
  rgba(34,197,94,.2);
}

.offline{
  background:
  rgba(255,255,255,.1);
}

.clock{
  font-size:42px;
  font-weight:800;
  margin-top:20px;
}

.action-btn{
  width:100%;
  height:80px;
  border:none;
  border-radius:18px;
  color:white;
  font-size:24px;
  font-weight:700;
  margin-top:25px;
  cursor:pointer;
}

.login-btn{
  background:
  linear-gradient(
  135deg,
  #22c55e,
  #16a34a
  );
}

.logout-btn{
  background:
  linear-gradient(
  135deg,
  #ef4444,
  #dc2626
  );
}

.section-title{
  text-align:left;
  font-size:20px;
  font-weight:700;
  margin-bottom:15px;
}

.record-card{
  background:
  rgba(255,255,255,.05);

  border:
  1px solid
  rgba(255,255,255,.08);

  padding:15px;

  border-radius:16px;

  margin-bottom:12px;

  text-align:left;
}

.record-date{
  font-weight:700;
  margin-bottom:8px;
}

.bg-blur{
  position:fixed;
  border-radius:50%;
  filter:blur(100px);
  z-index:-1;
}

.blur1{
  width:300px;
  height:300px;
  background:#2563eb;
  top:-50px;
  left:-50px;
}

.blur2{
  width:250px;
  height:250px;
  background:#22c55e;
  right:-50px;
  bottom:-50px;
}

.admin-coming{
  opacity:.7;
}