.staff-login {
  overflow-x: hidden;
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
}

.staff-login__panel {
  width: min(calc(100vw - 24px), 430px);
  max-width: 100%;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
}

.staff-login__panel > *,
.staff-login__panel form,
.staff-login__panel input,
.staff-login__panel .button {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.staff-login__panel .brand-logo {
  width: min(100%, 260px);
  min-width: 0;
}

.staff-login__panel .brand-logo__image { width: 100%; }

.staff-workspace {
  min-height: 100dvh;
  color: #142839;
  background:
    radial-gradient(circle at 100% 0, rgba(94, 185, 238, .16), transparent 30rem),
    #f7f9fa;
}

.staff-header {
  position: sticky;
  z-index: 20;
  top: 0;
  display: flex;
  height: 64px;
  align-items: center;
  justify-content: space-between;
  padding: 0 max(16px, calc((100vw - 560px) / 2));
  border-bottom: 1px solid rgba(28, 61, 84, .1);
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(18px);
}

.staff-header .brand-logo__image { width: 118px; }
.staff-header__actions { display: flex; align-items: center; gap: 14px; }
.staff-header__actions span { display: flex; align-items: center; gap: 6px; color: #567081; font-size: .65rem; font-weight: 750; }
.staff-header__actions i { width: 7px; height: 7px; border-radius: 50%; background: #2cad7d; box-shadow: 0 0 0 4px rgba(44, 173, 125, .12); }
.staff-header__actions button,
.staff-text-button,
.staff-tools__heading button { padding: 0; border: 0; color: #176f9f; background: transparent; font: inherit; font-size: .7rem; font-weight: 850; cursor: pointer; }

.staff-content {
  width: min(100% - 28px, 560px);
  margin: 0 auto;
  padding: 28px 0 54px;
}

.staff-title { display: flex; align-items: start; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.staff-title h1 { margin: 5px 0 7px; font-size: clamp(1.85rem, 9vw, 2.55rem); letter-spacing: -.045em; }
.staff-title p:last-child { color: #69808f; font-size: .76rem; line-height: 1.5; }
.staff-title > span { flex: none; margin-top: 2px; padding: 7px 10px; border: 1px solid #d4e8f3; border-radius: 999px; color: #226f98; background: rgba(234, 247, 253, .85); font-size: .64rem; font-weight: 850; }

.staff-notice,
.staff-error { margin: 0 0 14px; border-radius: 12px; }
.staff-notice { padding: 12px 14px; color: #176e55; background: #eaf8f2; font-size: .72rem; font-weight: 750; }

.staff-scanner { position: relative; }
.staff-scanner .scanner-card { padding: 10px; border: 1px solid #dce6ec; border-radius: 24px; background: #fff; box-shadow: 0 22px 60px rgba(26, 61, 84, .11); }
.staff-scanner .scanner-viewport { min-height: 0; aspect-ratio: 1 / .88; border-radius: 17px; background: linear-gradient(145deg, #eaf5fa, #d8edf7); }
.staff-scanner .scanner-placeholder::before { top: 38px; left: 38px; }
.staff-scanner .scanner-placeholder::after { right: 38px; bottom: 38px; }
.staff-scanner .scanner-placeholder p { color: #496a7f; font-size: .78rem; font-weight: 750; }
.staff-scanner .scanner-card > .button { min-height: 54px; border-radius: 14px; }
.staff-scanner #qr-reader,
.staff-scanner #qr-reader video { width: 100% !important; height: 100% !important; object-fit: cover; }
.staff-scanner__loading { position: absolute; z-index: 5; inset: 10px 10px 78px; display: grid; border-radius: 17px; color: #fff; background: rgba(13, 40, 58, .82); place-content: center; justify-items: center; gap: 12px; backdrop-filter: blur(8px); }
.staff-scanner__loading .loader { border-color: rgba(255,255,255,.35); border-top-color: #fff; }
.staff-scanner__loading p { font-size: .74rem; font-weight: 800; }

.staff-check { overflow: hidden; padding: 18px; border: 1px solid #d8e4ea; border-radius: 24px; background: #fff; box-shadow: 0 22px 60px rgba(26, 61, 84, .1); }
.staff-check__status { display: flex; align-items: center; gap: 12px; padding-bottom: 17px; border-bottom: 1px solid #e5ebee; }
.staff-check__status > span { display: grid; width: 46px; height: 46px; flex: none; border-radius: 14px; color: #197cae; background: #e8f5fb; place-items: center; }
.staff-check__status svg { width: 23px; }
.staff-check__status strong { display: block; margin-top: 3px; font-size: 1rem; }
.staff-check--fulfilled .staff-check__status > span { color: #17815e; background: #e8f7f1; }
.staff-check--fulfilled .staff-check__status strong { color: #17815e; }
.staff-check__product { padding: 25px 2px 20px; }
.staff-check__product > span { color: #718694; font-size: .61rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.staff-check__product h2 { margin-top: 7px; font-size: clamp(1.65rem, 8vw, 2.25rem); line-height: 1.03; letter-spacing: -.035em; }
.staff-check__details { display: grid; margin: 0 0 20px; padding: 4px 14px; border-radius: 15px; background: #f5f8f9; }
.staff-check__details > div { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 11px 0; border-bottom: 1px solid #e0e7ea; }
.staff-check__details > div:last-child { border: 0; }
.staff-check__details dt { color: #718694; font-size: .65rem; }
.staff-check__details dd { margin: 0; color: #243d4e; font-size: .7rem; font-weight: 800; text-align: right; }
.staff-check__actions { display: grid; gap: 12px; }
.staff-check__actions p { padding: 10px 12px; border-radius: 10px; color: #765114; background: #fff6df; font-size: .67rem; font-weight: 750; line-height: 1.45; text-align: center; }
.staff-check .button { min-height: 55px; border-radius: 14px; }
.staff-check .staff-text-button { justify-self: center; padding: 5px; }

.staff-manual,
.staff-tools { margin-top: 15px; border: 1px solid #dbe5ea; border-radius: 16px; background: rgba(255,255,255,.72); }
.staff-manual summary,
.staff-tools summary { display: grid; gap: 4px; padding: 16px; cursor: pointer; list-style: none; }
.staff-manual summary::-webkit-details-marker,
.staff-tools summary::-webkit-details-marker { display: none; }
.staff-manual summary span,
.staff-tools summary span { color: #7a8f9d; font-size: .61rem; font-weight: 750; }
.staff-manual summary strong,
.staff-tools summary strong { font-size: .78rem; }
.staff-search { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 0; padding: 0 12px 13px; }
.staff-search input { min-width: 0; height: 48px; padding: 0 13px; border: 1px solid #cfdae0; border-radius: 11px; background: #fff; box-shadow: none; }
.staff-search .button { min-height: 48px; border-radius: 11px; }
.staff-purchases { display: grid; gap: 8px; padding: 0 12px 13px; }
.staff-purchase { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 15px; padding: 12px; border: 1px solid #dde6ea; border-radius: 12px; color: inherit; background: #fff; text-align: left; cursor: pointer; }
.staff-purchase span { display: grid; gap: 4px; }
.staff-purchase > span:last-child { color: #216f98; font-size: .72rem; font-weight: 850; text-align: right; }
.staff-purchase small { color: #7a8d99; font-size: .6rem; font-weight: 600; }
.staff-purchase--fulfilled { opacity: .65; }

.staff-tools__loading { padding: 0 16px 18px; color: #728895; font-size: .68rem; }
.staff-tools__content { display: grid; gap: 22px; padding: 4px 16px 18px; }
.staff-tools__content h2 { font-size: .9rem; }
.staff-tools__content section > p { margin-top: 7px; color: #728895; font-size: .65rem; line-height: 1.5; }
.staff-tools__heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.staff-tools__heading > span { color: #28789f; font-size: .62rem; font-weight: 850; }
.staff-ledger-list { padding: 0; }
.staff-ledger-row { display: grid; align-items: center; grid-template-columns: 52px 1fr; gap: 10px; padding: 10px 0; border-top: 1px solid #e1e8eb; }
.staff-ledger-row strong,
.staff-ledger-row small { display: block; }
.staff-ledger-row strong { font-size: .69rem; }
.staff-ledger-row small { margin-top: 3px; color: #7b8f9b; font-size: .58rem; }
.staff-inventory-list { max-height: 330px; margin-top: 9px; overflow-y: auto; border-top: 1px solid #e1e8eb; }
.staff-inventory-list > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid #e1e8eb; }
.staff-inventory-list span { display: grid; min-width: 0; gap: 3px; }
.staff-inventory-list strong { overflow: hidden; font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }
.staff-inventory-list small { color: #7b8f9b; font-size: .56rem; }
.staff-inventory-list b { flex: none; color: #205e80; font-size: .62rem; }
.staff-qr-list { max-height: 360px; margin: 12px 0 0; padding: 0; overflow-y: auto; border-top: 1px solid #e1e8eb; list-style: none; }
.staff-qr-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #e1e8eb; }
.staff-qr-list li > span { display: grid; min-width: 0; gap: 3px; }
.staff-qr-list strong { overflow: hidden; font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.staff-qr-list small { color: #7b8f9b; font-size: .57rem; }
.staff-qr-list a { flex: none; color: #176f9f; font-size: .62rem; font-weight: 850; }
.staff-legal { padding: 0 20px 25px; color: #7c8f9b; font-size: .58rem; text-align: center; }
.staff-legal a { color: #176f9f; text-decoration: underline; text-underline-offset: 3px; }
.staff-error-list { display: grid; gap: 9px; margin-top: 10px; }
.staff-error-list article { display: grid; gap: 7px; padding: 12px; border: 1px solid #e2e9ed; border-radius: 12px; background: #fff; }
.staff-error-list article > div { display: grid; gap: 2px; }
.staff-error-list strong { color: #9c3d48; font-size: .68rem; }
.staff-error-list small { color: #7b8f9b; font-size: .56rem; }
.staff-error-list p { margin: 0; color: #334b59; font-size: .64rem; line-height: 1.45; }
.staff-error-list code { overflow-wrap: anywhere; color: #617987; font-size: .55rem; }
.staff-error-list button { justify-self: start; padding: 0; border: 0; color: #176f9f; background: transparent; font: inherit; font-size: .61rem; font-weight: 850; cursor: pointer; }

@media (max-width: 430px) {
  .staff-header__actions span { display: none; }
  .staff-content { width: min(100% - 20px, 560px); padding-top: 21px; }
  .staff-title { align-items: start; }
  .staff-title > span { padding-inline: 8px; }
  .staff-search { grid-template-columns: 1fr; }
  .staff-search .button { width: 100%; }
}

@media (max-width: 350px) {
  .staff-title > span { display: none; }
  .staff-check { padding: 14px; border-radius: 20px; }
  .staff-check__details > div { gap: 10px; }
}