/* Scoped Deskstyle attendance design; reuse the existing application font and buttons. */
.attendance-qr-dialog {
  --attendance-radius: 24px;
  --attendance-gap: 12px;
  --attendance-in: #dcf6ff;
  --attendance-out: #ffe8ef;
  --attendance-confirm: #fff4df;
  --attendance-primary: #247992;
  width: min(94vw, 440px);
  max-height: min(94dvh, calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px));
  margin: auto;
  padding: 24px 20px;
  border: 0;
  border-radius: var(--attendance-radius);
  overflow-y: auto;
  overscroll-behavior: contain;
  color: var(--ink);
  background: var(--panel);
  font-size: 16px;
  box-shadow: 0 16px 70px #142d3d44;
}
.attendance-qr-dialog::backdrop { background: #172a406b; }
.attendance-qr-dialog[data-tone="in"] { background: var(--attendance-in); }
.attendance-qr-dialog[data-tone="out"] { background: var(--attendance-out); --attendance-primary: #b9446f; }
.attendance-qr-dialog[data-tone="confirm"] { background: var(--attendance-confirm); --attendance-primary: #a75a12; }
.attendance-qr-dialog[data-tone="missing-out"] { background: #b42332; color: #fff; --attendance-primary: #fff; }
.attendance-qr-dialog[data-tone="missing-out"] .attendance-qr-button { color: #981b29; }
.attendance-qr-dialog[data-tone="missing-out"] .attendance-qr-mascot { color: #fff; }
.attendance-qr-dialog[data-tone="error"] { background: #fff5f4; }
.attendance-qr-content { display: flex; flex-direction: column; gap: var(--attendance-gap); text-align: center; min-width: 0; overflow-wrap: anywhere; padding-bottom: env(safe-area-inset-bottom); }
.attendance-qr-content h2 { margin: 0; font-size: 24px; line-height: 1.4; }
.attendance-qr-content p { margin: 0; font-size: 16px; line-height: 1.5; }
.attendance-qr-content .attendance-qr-time { font-size: clamp(36px, 12vw, 56px); font-weight: 800; font-variant-numeric: tabular-nums; }
.attendance-qr-content .attendance-qr-button { width: 100%; min-height: 48px; padding: 12px 16px; border-radius: 12px; font-size: 16px; white-space: normal; background: var(--attendance-primary); color: #fff; }
.attendance-qr-content .attendance-qr-button.secondary { background: #fff; border: 1px solid #82959d; color: #304c57; }
.attendance-qr-content a { min-height: 48px; display: grid; place-items: center; color: #185973; }
.attendance-qr-mascot { width: min(100%, 240px); aspect-ratio: 1; align-self: center; display: grid; place-items: center; font-size: 64px; color: var(--ok); }
.attendance-qr-mascot img, .attendance-qr-mascot canvas { width: 100%; height: auto; object-fit: contain; }
.attendance-qr-has-decision .attendance-qr-mascot { width: min(100%, 140px); }
.attendance-qr-content .attendance-qr-classification { align-self: center; padding: 4px 20px; border-radius: 20px; background: #fff0cc; color: #8d4600; font-size: 20px; font-weight: 800; }
.attendance-qr-reason-label { display: grid; gap: 8px; text-align: left; font-size: 16px; }
.attendance-qr-reason { box-sizing: border-box; width: 100%; min-width: 0; border: 1px solid #899ca3; border-radius: 8px; padding: 10px; font: inherit; font-size: 16px; resize: vertical; background: #fff; color: var(--ink); }
.attendance-qr-reason-error { color: var(--bad); }
.attendance-qr-reason-error:empty { display: none; }
.attendance-qr-saved-reason, .attendance-correction-reason { white-space: pre-wrap; overflow-wrap: anywhere; }
.attendance-correction-cards { display: grid; gap: 12px; }
.attendance-correction-card { min-width: 0; overflow-wrap: anywhere; }
.attendance-correction-card h3 { font-size: 18px; }
.attendance-correction-more { min-height: 48px; }
.attendance-login-layout { display: grid; grid-template-columns: minmax(0,1fr); gap: 16px; align-items: center; }
.attendance-login-mascot { margin: 0; min-width: 0; text-align: center; }
.attendance-login-mascot img { width: min(100%,240px); height: auto; aspect-ratio: 1; object-fit: contain; }
@media (min-width: 768px) {
  .center-login-card.attendance-login-card { max-width: 700px; }
  .attendance-login-layout { grid-template-columns: minmax(0, 334px) minmax(0, 1fr); }
}