[hidden] { display: none !important; }

#app { min-height: 100vh; }

.staff-login {
  display: grid;
  min-height: 100dvh;
  place-items: center;
  color: #142839;
  background:
    radial-gradient(circle at 88% 8%, rgba(98, 190, 239, .18), transparent 28rem),
    #eef5fa;
}

.staff-login__panel {
  display: grid;
  gap: 28px;
  padding: clamp(25px, 8vw, 42px);
  border: 1px solid #d9e4ea;
  border-radius: 22px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 24px 70px rgba(27, 63, 88, .13);
}

.staff-login__panel h1 { margin: 7px 0 9px; font-size: clamp(2rem, 10vw, 2.8rem); }
.staff-login__panel > div > p:last-child { color: #6b7d8b; font-size: .82rem; line-height: 1.55; }
.staff-login__panel form { display: grid; gap: 11px; }
.staff-login__panel label { font-size: .72rem; font-weight: 800; }
.staff-login__panel input { border: 1px solid #cfdce4; border-radius: 12px; background: #f9fbfc; letter-spacing: .22em; }
.staff-login__back { color: #176f9f; font-size: .7rem; font-weight: 850; }

.button--confirm { color: #fff; background: #17815e; }
.scanner-error:empty { display: none; }
.scanner-error { margin: 10px 0 0; }

.receipt__qr #receipt-qr { display: grid; width: 100%; place-items: center; }
.receipt__qr #receipt-qr svg { width: min(52vw, 188px); height: auto; }

.toast { grid-template-columns: 1fr 34px; }
.toast button { border: 0; color: #6b7d8b; background: transparent; font-size: 1.25rem; cursor: pointer; }
.staff-tools[open] > summary { border-bottom: 1px solid #e1e8eb; }

@media (max-width: 430px) {
  .staff-login__panel { gap: 22px; padding: 24px 20px; border-radius: 18px; }
}