.attendance-live-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.attendance-live-grid article {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  padding: 16px;
}
.attendance-live-grid small,
.attendance-live-grid b { display: block; }
.attendance-live-grid small { color: #64748b; font-weight: 700; }
.attendance-live-grid b { color: #047857; font-size: 22px; margin-top: 5px; }
.attendance-control-note {
  align-items: center;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: 12px;
  color: #047857;
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  min-height: 40px;
  padding: 0 13px;
}
.attendance-method-help {
  background: #f8fafc;
  border-radius: 14px;
  display: grid;
  gap: 5px 12px;
  grid-template-columns: auto 1fr;
  padding: 14px;
}
.attendance-method-help b { color: #047857; }
.attendance-method-help span { color: #64748b; font-size: 13px; }
.employee-qr-reader {
  border: 1px solid #d1fae5;
  border-radius: 18px;
  margin: 16px 0;
  min-height: 240px;
  overflow: hidden;
}
.attendance-scan-status {
  background: #ecfdf5;
  border-radius: 12px;
  color: #065f46;
  font-weight: 700;
  padding: 12px;
}
.employee-card-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 18px;
}
.employee-card-grid article {
  align-items: center;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  display: flex;
  gap: 15px;
  padding: 14px;
}
.employee-card-grid article > div:last-child { flex: 1; min-width: 0; }
.employee-card-grid b,
.employee-card-grid span { display: block; }
.employee-card-grid span { color: #64748b; font-size: 12px; margin: 4px 0 10px; }
.employee-card-qr {
  background: #fff;
  border-radius: 10px;
  flex: 0 0 112px;
  height: 112px;
  overflow: hidden;
}
.employee-card-qr img,
.employee-card-qr canvas { height: 112px !important; width: 112px !important; }
@media (max-width: 760px) {
  .attendance-live-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .employee-card-grid { grid-template-columns: 1fr; }
  .employee-card-grid article { align-items: flex-start; }
}