.attendance-card {
    background:#fff;
    border-radius:14px;
    padding:28px;
    margin:30px auto;
    max-width:520px;
    text-align:center;
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
.attendance-card h2 { margin-bottom:6px; font-size:22px; font-weight:700; color:#222; }
.attendance-card p { font-size:16px; color:#444; margin:8px 0; }
.attendance-card.success { border-left:8px solid #48ac9f; }
.attendance-card.pending { border-left:8px solid #ce4760; }
.attendance-card.warning { border-left:8px solid #eeee22; }
.attendance-card.error { border-left:8px solid #c62828; }

.attendance-card{ display:flex; flex-direction:column; gap:6px;}
.attendance-card .qr-title{ font-size:24px;font-weight:700; color:#1f2933; margin-bottom:2px;}
.attendance-card .qr-time{margin-bottom: 2px;font-size:14px;color:#6b7280;letter-spacing:0.2px;}
.attendance-card .qr-message{font-size:16px; color:#374151; margin:6px 0 0 0;}
.qr-price-text{
  margin-top: 10px;
  font-size: 16px;
  font-weight: 600;
  color: #6b7280; 
  letter-spacing: .2px;
}

.qr-host-line{
    margin-top:4px;margin-bottom: 10px;font-size:13px;color:#6b7280;
    display:flex;align-items:center;gap:6px;justify-content:center;
}
.qr-host-line::before{
    content: "👤";
    font-size:14px;
}

.attendance-actions { display:flex; justify-content:center; gap:16px; margin-top:22px; flex-wrap:wrap; }
.attendance-actions{ margin-top:20px; }
.attendance-btn { min-width:160px; padding:14px 20px; border-radius:10px; font-size:16px; font-weight:600; border:none; cursor:pointer; transition:all 0.2s ease; }
.attendance-btn:active { transform:scale(0.97); }
.attendance-btn.twint { width:auto; height:58px; border-radius:6px; display:flex; justify-content:center; align-items:center; cursor:pointer; background-color:transparent; border:none; padding:0; }
.attendance-btn.twint img { width:auto; height:58px; display:block; }
.attendance-btn.twint:hover { background:#084ec4; }
.attendance-btn.cash {
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    color: #111827;
}

.attendance-btn.cash:hover {
    background: #e5e7eb;
}
.attendance-btn.included { background:#48ac9f; color:#fff; cursor:default; opacity:0.85; }

.qr-cards-wrapper{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
}