body{
  margin:0;
  font-family: "Inter", Arial, sans-serif;
  background:#f4f6f9;
  color:#1f2937;
  text-align:center;
}

.header{
  margin-top:40px;
}

.header h1{
  font-size:32px;
  margin-bottom:4px;
}

.header p{
  color:#6b7280;
}

/* camera */

.camera-container{
  margin:40px auto;
  width:720px;
  position:relative;
}

video{
  width:100%;
  border-radius:12px;
  border:1px solid #e5e7eb;
}

canvas{
  position:absolute;
  top:0;
  left:0;
}

/* people count */

#count{
  font-size:18px;
  color:#374151;
}

/* modal */

.modal{

  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;

  background:rgba(0,0,0,0.45);

  display:none;
  align-items:center;
  justify-content:center;

}

.modal-card{

  width:340px;
  background:white;
  padding:36px;
  border-radius:12px;

  box-shadow:0 20px 40px rgba(0,0,0,0.15);

  animation:fadeIn .3s ease;

}

.success-icon{

  width:60px;
  height:60px;

  margin:auto;

  border-radius:50%;

  background:#22c55e;
  color:white;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:28px;
  font-weight:bold;

}

.modal-card h2{
  margin-top:16px;
}

.modal-card p{
  color:#6b7280;
}

.modal-card button{

  margin-top:20px;

  padding:10px 22px;

  border:none;
  border-radius:8px;

  background:#2563eb;
  color:white;

  font-size:15px;
  cursor:pointer;

}

.modal-card button:hover{
  background:#1d4ed8;
}

@keyframes fadeIn{
  from{
    opacity:0;
    transform:scale(.95);
  }
  to{
    opacity:1;
    transform:scale(1);
  }
}