:root {
  --auth-ink: #17362d;
  --auth-muted: #66736d;
  --auth-green: #1f765e;
  --auth-line: rgba(23, 54, 45, .12);
}

body.staff-locked {
  min-height: 100dvh;
  overflow: hidden;
  background: #f4f6f1;
}

body.staff-locked > :not(.staff-auth-gate) {
  visibility: hidden !important;
}

.staff-auth-gate {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom));
  overflow: auto;
  color: var(--auth-ink);
  background:
    radial-gradient(circle at 78% 15%, rgba(216, 231, 199, .7), transparent 34%),
    radial-gradient(circle at 5% 85%, rgba(222, 235, 226, .9), transparent 38%),
    #f7f8f4;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.staff-auth-card {
  width: min(100%, 430px);
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: 30px;
  background: rgba(255, 255, 255, .83);
  box-shadow: 0 28px 70px rgba(31, 61, 51, .13), inset 0 1px rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
}

.staff-auth-brand {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 30px;
}

.staff-auth-brand img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.staff-auth-brand span,
.staff-auth-copy span {
  display: block;
  color: var(--auth-muted);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.staff-auth-brand strong {
  display: block;
  margin-top: 3px;
  font-size: 17px;
  letter-spacing: -.02em;
}

.staff-auth-shield {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 20px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(145deg, #2b856b, #195e4c);
  box-shadow: 0 11px 25px rgba(31, 118, 94, .25);
}

.staff-auth-shield svg {
  width: 27px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.staff-auth-copy h1 {
  margin: 8px 0 10px;
  font-size: clamp(31px, 9vw, 42px);
  line-height: .98;
  letter-spacing: -.055em;
}

.staff-auth-copy p {
  margin: 0;
  color: var(--auth-muted);
  font-size: 15px;
  line-height: 1.5;
}

.staff-auth-actions {
  display: grid;
  gap: 10px;
  margin-top: 27px;
}

.staff-auth-actions button {
  min-height: 54px;
  padding: 0 17px;
  border: 0;
  border-radius: 17px;
  color: #fff;
  background: var(--auth-green);
  font: inherit;
  font-size: 16px;
  font-weight: 720;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.staff-auth-actions button + button {
  color: var(--auth-ink);
  background: #eef2ed;
  box-shadow: inset 0 0 0 1px var(--auth-line);
}

.staff-auth-actions button:disabled {
  opacity: .55;
}

.staff-auth-back,
.staff-reset-link {
  padding: 0;
  border: 0;
  color: var(--auth-green);
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 720;
  cursor: pointer;
}

.staff-auth-back { margin: -3px 0 22px; }

.staff-password-form {
  display: grid;
  gap: 13px;
  margin-top: 25px;
}

.staff-password-form label span {
  display: block;
  margin: 0 0 7px 3px;
  color: var(--auth-muted);
  font-size: 12px;
  font-weight: 700;
}

.staff-password-form input {
  width: 100%;
  min-height: 53px;
  box-sizing: border-box;
  padding: 0 15px;
  border: 1px solid var(--auth-line);
  border-radius: 16px;
  outline: none;
  color: var(--auth-ink);
  background: rgba(247, 249, 246, .95);
  font: inherit;
  font-size: 16px;
}

.staff-password-form input:focus {
  border-color: rgba(31, 118, 94, .55);
  box-shadow: 0 0 0 4px rgba(31, 118, 94, .1);
}

.staff-password-form button,
.staff-finish-button {
  min-height: 54px;
  border: 0;
  border-radius: 17px;
  color: #fff;
  background: var(--auth-green);
  font: inherit;
  font-size: 16px;
  font-weight: 720;
  cursor: pointer;
}

.staff-password-form button:disabled,
.staff-reset-link:disabled { opacity: .55; }

.staff-reset-link { margin-top: 16px; }
.staff-finish-button { width: 100%; margin-top: 25px; }

.staff-auth-status {
  min-height: 0;
  margin: 17px 0 0;
  color: var(--auth-green);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.45;
}

.staff-auth-status:empty { display: none; }
.staff-auth-status.error { color: #9d332b; }

.staff-auth-promise {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 23px;
  padding-top: 19px;
  border-top: 1px solid var(--auth-line);
  color: var(--auth-muted);
  font-size: 12px;
  line-height: 1.45;
}

.staff-auth-promise svg {
  flex: 0 0 auto;
  width: 16px;
  fill: none;
  stroke: var(--auth-green);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 480px) {
  .staff-auth-gate { place-items: end center; padding-inline: 12px; }
  .staff-auth-card { padding: 25px 22px; border-radius: 28px; }
}

@media (prefers-reduced-motion: no-preference) {
  .staff-auth-card { animation: staff-card-in .35s cubic-bezier(.2,.8,.2,1) both; }
  @keyframes staff-card-in { from { opacity: 0; transform: translateY(12px) scale(.985); } }
}