:root{
  --eco-green:#62BB46;
  --eco-teal:#45D6C2;
  --text:#333333;
  --muted:#6B7280;
  --bg:#F9FAFB;
  --card:#ffffff;
  --border:#E5E7EB;
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family: system-ui, Segoe UI, Roboto, Inter, Arial;
  background:linear-gradient(90deg, var(--eco-green), var(--eco-teal)) no-repeat;
  background-size:100% 200px;
  background-color:var(--bg);
  display:flex;
  justify-content:center;
  padding:40px 16px;
}

/* Card */
.card{
  width:min(680px,95vw);
  background:var(--card);
  border:1px solid var(--border);
  border-radius:24px;
  padding:24px;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
}
.card__header{display:flex;gap:18px;align-items:center;margin-bottom:18px}
.card__avatar{width:92px;height:92px;border-radius:50%;object-fit:cover;border:2px solid var(--eco-teal)}
.card__name{margin:0;font-size:28px;font-weight:700}
.card__title{margin:4px 0 0;color:var(--muted)}

/* Actions */
.card__actions{
  display:flex;           /* desktop default */
  flex-wrap:wrap;
  gap:10px;
  margin:20px 0;
}

/* Buttons */
.btn{
  padding:12px;
  border-radius:12px;
  font-weight:600;
  text-decoration:none;
  text-align:center;
  color:#fff;
  transition:.2s;
}
.btn:hover{transform:translateY(-1px)}
/* Let buttons share space only on wider screens */
@media (min-width:521px){
  .btn{flex:1}
}

.btn--green{background:var(--eco-green)}
.btn--teal{background:var(--eco-teal)}
.btn--gray{background:#384253;color:#fff}
.btn--gray:hover{background:#2f3948}
.btn--outline{background:transparent;color:var(--text);border:2px solid var(--eco-teal)}
.btn--outline:hover{background:var(--eco-teal);color:#fff}

/* QR */
.card__qr{text-align:center;margin:14px 0 4px}
.card__qr-box{display:inline-block;background:#fff;border-radius:12px;padding:8px;box-shadow:0 4px 14px rgba(0,0,0,.12)}
.card__qr-url{font-size:12px;color:var(--muted);margin:10px 0 0}

/* Footer (center logo) */
.card__footer{
  margin-top:20px;
  text-align:center;
  color:var(--muted);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.card__logo{
  width:120px;
  height:auto;
  margin:0 auto 8px auto;
  display:block;
}

/* Mobile: remove flex stretching, use full-width grid to avoid any left “white” inset */
@media (max-width:520px){
  .card{padding:18px}
  .card__header{align-items:flex-start}
  .card__avatar{width:80px;height:80px}
  .card__name{font-size:22px}

  .card__actions{
    display:grid;                 /* switch from flex */
    grid-template-columns: 1fr;   /* one column */
    gap:12px;
  }
  .btn{
    width:100%;
  }
}

/* Desktop polish */
@media (min-width:768px){
  body{background-size:100% 140px;padding-top:32px}
  .card{box-shadow:0 12px 28px rgba(0,0,0,.08)}
  .card__qr-title{margin-top:8px}
  #qrcode canvas{width:220px!important;height:220px!important}
}