*{box-sizing:border-box}

body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  background:linear-gradient(135deg,#54e26e,#72f18a);
}

.wrapper{
  max-width:1100px;
  margin:auto;
  padding:40px 20px 120px;
}

.hidden{display:none}

.panel{
  background:rgba(255,255,255,.22);
  border-radius:28px;
  padding:36px;
  text-align:center;
  box-shadow:0 20px 40px rgba(0,0,0,.15);
}

.header-logo{height:70px}

h2{
  font-family:"Luckiest Guy",cursive;
  font-size:34px;
  margin:10px 0;
}

.controls{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:20px;
}

input{
  padding:14px 18px;
  border-radius:18px;
  border:none;
  width:260px;
  font-size:16px;
}

button{
  padding:14px 22px;
  border-radius:20px;
  border:none;
  background:#2f8d42;
  color:white;
  cursor:pointer;
}

button:disabled{
  opacity:.6;
  cursor:not-allowed;
}

.status{margin-top:12px}

.divider{
  width:140px;
  height:4px;
  background:rgba(0,0,0,.25);
  margin:0 auto 30px;
  border-radius:999px;
}

#captureFrame{
  padding:40px;
  background:#6be887;
  border-radius:40px;
}

.id-card{
  background:linear-gradient(135deg,#7cf29a,#58dd79);
  border-radius:32px;
  padding:32px 36px;
  display:grid;
  grid-template-columns:220px 1fr;
  gap:24px;
}

.card-header{
  grid-column:1/-1;
  display:flex;
  justify-content:space-between;
  align-items:center;
  overflow:visible;
}

.card-logo{height:48px}

.seal{
  width:90px;
  height:90px;
  border-radius:50%;
  border:6px solid #1e6b2f;
  background:#eaffef;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:bold;
  transform:rotate(-10deg);
}

.pfp{
  width:180px;
  aspect-ratio:1/1;
  background:rgba(255,255,255,.55);
  border-radius:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.pfp img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
}

.details{
  font-size:22px;
  line-height:1.4;
}


.barcode{
  grid-column:2;
  height:60px;
  width:360px;
  background:repeating-linear-gradient(
    90deg,
    #000 0,#000 4px,
    transparent 4px,transparent 8px
  );
}

.export{
  text-align:center;
  margin-top:20px;
}

footer{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  background:#0e4f25;
  color:white;
  text-align:center;
  padding:14px;
}