/* Bryer's Hideout — Staff Panel v216
   Dedicated stylesheet. All rules are scoped to staff-* classes so the player site is untouched. */

.staff-shell,
.staff-shell *,
.staff-access-screen,
.staff-access-screen * {
  box-sizing: border-box;
}

.staff-shell {
  --staff-gold: #d7b75f;
  --staff-gold-soft: #f1dda0;
  --staff-gold-dim: #9b7b31;
  --staff-ivory: #f4edd8;
  --staff-text: #dce4d8;
  --staff-muted: #869a8a;
  --staff-muted-2: #65796c;
  --staff-green: #183526;
  --staff-green-2: #10271b;
  --staff-green-3: #0a1b12;
  --staff-panel: rgba(10, 31, 21, .88);
  --staff-panel-strong: rgba(8, 25, 17, .95);
  --staff-line: rgba(216, 183, 91, .22);
  --staff-line-soft: rgba(216, 183, 91, .11);
  --staff-shadow: 0 18px 48px rgba(0, 0, 0, .26);
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  color: var(--staff-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #07140d;
}

.staff-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(3, 12, 7, .24), rgba(3, 15, 9, .48)),
    linear-gradient(180deg, rgba(3, 14, 8, .24), rgba(3, 13, 8, .55)),
    url("/images/bg.png") center / cover no-repeat;
  filter: saturate(.82) brightness(.67);
}

.staff-shell::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 0%, rgba(94, 134, 83, .12), transparent 42%),
    radial-gradient(circle at 70% 32%, rgba(226, 188, 78, .035), transparent 26%),
    linear-gradient(90deg, rgba(2, 10, 6, .42) 0 250px, rgba(2, 10, 6, .03) 250px 100%);
}

.staff-sidebar {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 100vh;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 16px 16px;
  background:
    linear-gradient(180deg, rgba(8, 28, 18, .97), rgba(5, 20, 13, .98)),
    radial-gradient(circle at 30% 0%, rgba(205, 169, 65, .08), transparent 34%);
  border-right: 1px solid rgba(218, 184, 89, .22);
  box-shadow: 18px 0 50px rgba(0, 0, 0, .20), inset -1px 0 rgba(255,255,255,.015);
  backdrop-filter: blur(16px);
  scrollbar-width: thin;
  scrollbar-color: rgba(214, 181, 86, .28) transparent;
}

.staff-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 2px 7px 19px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--staff-line-soft);
  position: relative;
}

.staff-brand::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(226, 188, 79, .34), transparent);
}

.staff-brand img {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  object-fit: contain;
  filter: drop-shadow(0 5px 12px rgba(0,0,0,.38)) drop-shadow(0 0 9px rgba(211,176,72,.10));
}

.staff-brand strong {
  display: block;
  color: var(--staff-gold-soft);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 19px;
  line-height: 1;
  letter-spacing: .025em;
  text-shadow: 0 2px 8px rgba(0,0,0,.55);
}

.staff-brand span {
  display: block;
  margin-top: 6px;
  color: #91a68f;
  font-size: 9px;
  line-height: 1.1;
  font-weight: 750;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.staff-sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 5px;
}

.staff-sidebar nav button {
  appearance: none;
  width: 100%;
  min-height: 42px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 7px 10px;
  background: transparent;
  color: #b7c4b5;
  text-align: left;
  font-size: 12px;
  font-weight: 720;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.staff-sidebar nav button:hover {
  color: #efe7cf;
  background: rgba(104, 137, 92, .10);
  border-color: rgba(217, 185, 93, .10);
  transform: translateX(2px);
}

.staff-sidebar nav button.is-active {
  color: #f5df94;
  background:
    linear-gradient(90deg, rgba(184, 139, 44, .24), rgba(69, 104, 66, .12)),
    rgba(22, 51, 35, .68);
  border-color: rgba(221, 183, 71, .26);
  box-shadow: inset 3px 0 0 #d4aa42, 0 7px 18px rgba(0,0,0,.12), inset 0 1px rgba(255,255,255,.025);
}

.staff-nav-icon {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  color: #d6b75f;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  line-height: 1;
  border-radius: 7px;
  background: rgba(215, 183, 95, .035);
  border: 1px solid rgba(215, 183, 95, .065);
}

.staff-sidebar nav button.is-active .staff-nav-icon {
  color: #ffe9a8;
  background: rgba(211, 168, 61, .12);
  border-color: rgba(224, 188, 89, .20);
  box-shadow: 0 0 14px rgba(216, 177, 68, .09);
}

.staff-nav-label {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.staff-user {
  margin-top: auto;
  position: relative;
  padding: 13px 12px 12px 38px;
  border: 1px solid rgba(211, 181, 92, .14);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(31, 63, 43, .35), rgba(10, 31, 21, .44));
  box-shadow: inset 0 1px rgba(255,255,255,.025);
}

.staff-user::before {
  content: "✦";
  position: absolute;
  left: 12px;
  top: 13px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  color: #d7b75f;
  border: 1px solid rgba(218, 184, 87, .26);
  border-radius: 50%;
  background: rgba(211, 174, 64, .08);
  box-shadow: 0 0 14px rgba(211, 174, 64, .07);
}

.staff-user strong,
.staff-user span,
.staff-user small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staff-user strong { color: #f0e5c6; font-size: 11px; }
.staff-user span { margin-top: 3px; color: #a9d39d; font-size: 8px; font-weight: 850; letter-spacing: .08em; }
.staff-user small { margin-top: 4px; color: #6f8675; font-size: 8px; }

.staff-exit {
  appearance: none;
  width: 100%;
  min-height: 34px;
  border: 1px solid rgba(188, 84, 70, .22);
  border-radius: 9px;
  padding: 8px 10px;
  background: linear-gradient(180deg, rgba(114, 45, 37, .22), rgba(72, 28, 22, .17));
  color: #dca296;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .09em;
  cursor: pointer;
  transition: filter .15s ease, transform .15s ease, border-color .15s ease;
}

.staff-exit:hover { filter: brightness(1.15); transform: translateY(-1px); border-color: rgba(212, 111, 96, .42); }
.staff-exit.is-muted { color: #9dad9d; background: rgba(34, 56, 41, .18); border-color: rgba(176, 193, 170, .10); }

.staff-workspace {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.staff-topbar {
  position: sticky;
  top: 0;
  z-index: 15;
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 24px 12px;
  background: linear-gradient(180deg, rgba(5, 22, 14, .94), rgba(5, 20, 13, .89));
  border-bottom: 1px solid rgba(217, 183, 87, .18);
  box-shadow: 0 12px 35px rgba(0,0,0,.14);
  backdrop-filter: blur(18px);
}

.staff-topbar::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, rgba(220, 184, 85, .35), rgba(220, 184, 85, .06) 65%, transparent);
  pointer-events: none;
}

.staff-topbar-title { min-width: 0; }
.staff-topbar-eyebrow {
  display: block;
  margin-bottom: 3px;
  color: #7f977f;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.staff-topbar h1 {
  margin: 0;
  color: #f0db96;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(22px, 2vw, 29px);
  line-height: 1.05;
  font-weight: 700;
  text-shadow: 0 2px 11px rgba(0,0,0,.48);
}

.staff-topbar p {
  margin: 5px 0 0;
  color: #7e9482;
  font-size: 10px;
}

.staff-top-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.staff-top-actions select,
.staff-pane-head input {
  min-height: 34px;
  border: 1px solid rgba(211, 181, 91, .20);
  border-radius: 8px;
  background: rgba(4, 18, 11, .68);
  color: #dddccf;
  padding: 7px 10px;
  outline: none;
  font-size: 10px;
  font-weight: 650;
  box-shadow: inset 0 1px 6px rgba(0,0,0,.14);
}

.staff-top-actions select { min-width: 155px; }
.staff-top-actions select:focus,
.staff-pane-head input:focus { border-color: rgba(226, 188, 74, .48); box-shadow: 0 0 0 2px rgba(216, 174, 55, .07); }

.staff-page {
  width: min(100%, 1680px);
  margin: 0 auto;
  padding: 20px 22px 34px;
}

.staff-toast {
  position: sticky;
  top: 90px;
  z-index: 14;
  margin: 10px 22px 0;
  padding: 10px 13px;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 750;
  box-shadow: 0 10px 24px rgba(0,0,0,.16);
  backdrop-filter: blur(12px);
}
.staff-toast.is-good { color: #b8e5ba; border: 1px solid rgba(83, 159, 89, .34); background: rgba(31, 82, 39, .80); }
.staff-toast.is-error { color: #ffc5bd; border: 1px solid rgba(178, 76, 63, .38); background: rgba(91, 33, 26, .88); }

.staff-loading {
  min-height: calc(100vh - 82px);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  color: #9cad9d;
  font-size: 12px;
}
.staff-loading .spinner { margin: 0; }

.staff-dashboard-page { padding-top: 18px; }
.staff-dashboard-welcome {
  min-height: 94px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 15px;
  padding: 17px 20px 17px 22px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(216, 184, 92, .22);
  border-radius: 14px;
  background:
    linear-gradient(90deg, rgba(15, 45, 29, .88), rgba(8, 29, 19, .75)),
    radial-gradient(circle at 86% 50%, rgba(203, 166, 64, .11), transparent 26%);
  box-shadow: var(--staff-shadow), inset 0 1px rgba(255,255,255,.025);
}

.staff-dashboard-welcome::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background:
    url("/images/bg2.png") top right / auto 100% no-repeat,
    linear-gradient(90deg, transparent 60%, rgba(214, 180, 79, .06));
  mix-blend-mode: screen;
}

.staff-dashboard-welcome > * { position: relative; z-index: 1; }
.staff-dashboard-kicker {
  display: block;
  margin-bottom: 5px;
  color: #b79a4e;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .18em;
}
.staff-dashboard-welcome h2 {
  margin: 0;
  color: #f0dfad;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(19px, 1.55vw, 25px);
  line-height: 1.1;
}
.staff-dashboard-welcome p {
  max-width: 720px;
  margin: 6px 0 0;
  color: #a4b2a2;
  font-size: 10px;
  line-height: 1.5;
}
.staff-dashboard-badge {
  min-width: 190px;
  max-width: 280px;
  padding: 10px 13px;
  border: 1px solid rgba(210, 178, 83, .17);
  border-radius: 10px;
  background: rgba(3, 19, 11, .42);
  text-align: right;
}
.staff-dashboard-badge span,
.staff-dashboard-badge small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.staff-dashboard-badge span { color: #bce0ae; font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.staff-dashboard-badge small { margin-top: 5px; color: #738879; font-size: 8px; }

.staff-metric-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 15px;
}

.staff-metric-card,
.staff-metric-grid > div {
  min-width: 0;
  min-height: 126px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 15px 14px 14px;
  border: 1px solid rgba(215, 182, 89, .18);
  border-radius: 13px;
  background:
    radial-gradient(circle at 80% 16%, rgba(202, 166, 62, .085), transparent 26%),
    linear-gradient(180deg, rgba(15, 47, 31, .85), rgba(7, 28, 18, .91));
  box-shadow: 0 13px 30px rgba(0,0,0,.16), inset 0 1px rgba(255,255,255,.025);
}

.staff-metric-card::before {
  position: absolute;
  right: 13px;
  top: 12px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid rgba(218, 185, 87, .14);
  background: rgba(207, 171, 63, .065);
  color: #e2c56f;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
  line-height: 1;
  box-shadow: inset 0 1px rgba(255,255,255,.025), 0 6px 15px rgba(0,0,0,.12);
}
.staff-metric-card[data-metric="players"]::before { content: "♟"; }
.staff-metric-card[data-metric="active"]::before { content: "●"; color: #88d684; text-shadow: 0 0 10px rgba(86,207,88,.42); }
.staff-metric-card[data-metric="lootboxes"]::before { content: "▣"; }
.staff-metric-card[data-metric="rewards"]::before { content: "◆"; }
.staff-metric-card[data-metric="cards"]::before { content: "▤"; }
.staff-metric-card[data-metric="gil"]::before { content: "◉"; }
.staff-metric-card.is-gil { border-color: rgba(224, 187, 76, .27); background: radial-gradient(circle at 82% 16%, rgba(232, 191, 70, .14), transparent 31%), linear-gradient(180deg, rgba(23, 50, 30, .88), rgba(8, 27, 17, .94)); }

.staff-metric-grid span {
  display: block;
  max-width: calc(100% - 44px);
  margin-bottom: 5px;
  color: #8da08e;
  font-size: 8px;
  line-height: 1.2;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.staff-metric-grid strong {
  display: block;
  color: #f0d98d;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(20px, 1.55vw, 28px);
  line-height: 1;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.staff-metric-grid small {
  display: block;
  margin-top: 7px;
  color: #6e8273;
  font-size: 8px;
}

.staff-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 1.12fr);
  gap: 13px;
  align-items: stretch;
}
.staff-dashboard-grid > .staff-section { min-height: 365px; }
.staff-dashboard-grid .staff-event-list { max-height: 430px; overflow: auto; }
.staff-danger-wrap { margin-top: 13px; }
.staff-danger-wrap .staff-section { border-color: rgba(170, 77, 63, .22); background: linear-gradient(180deg, rgba(51, 25, 20, .72), rgba(31, 18, 14, .80)); }

.staff-section,
.staff-list-pane,
.staff-detail-pane {
  min-width: 0;
  border: 1px solid rgba(214, 182, 92, .18);
  border-radius: 14px;
  background:
    radial-gradient(circle at 100% 0%, rgba(190, 156, 54, .035), transparent 30%),
    linear-gradient(180deg, rgba(12, 39, 26, .89), rgba(7, 27, 18, .92));
  box-shadow: 0 15px 38px rgba(0, 0, 0, .16), inset 0 1px rgba(255,255,255,.02);
}

.staff-section {
  overflow: hidden;
  margin-bottom: 13px;
}

.staff-section > header {
  min-height: 61px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 15px 12px;
  border-bottom: 1px solid rgba(214, 182, 92, .11);
  background: linear-gradient(90deg, rgba(31, 62, 42, .16), transparent 55%);
}

.staff-section > header > div:first-child { min-width: 0; }
.staff-section > header h3 {
  margin: 0;
  color: #ecd794;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  line-height: 1.1;
  font-weight: 700;
}
.staff-section > header h3::before {
  content: "✦";
  display: inline-block;
  margin-right: 7px;
  color: #9e8748;
  font-size: 10px;
  vertical-align: 2px;
}
.staff-section > header p {
  margin: 4px 0 0;
  color: #768a7a;
  font-size: 9px;
  line-height: 1.4;
}
.staff-section-actions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.staff-section > :not(header) { margin-left: 14px; margin-right: 14px; }
.staff-section > :last-child { margin-bottom: 14px; }

.staff-btn {
  appearance: none;
  min-height: 33px;
  border: 1px solid rgba(216, 188, 111, .18);
  border-radius: 8px;
  padding: 7px 11px;
  background: linear-gradient(180deg, rgba(54, 79, 59, .96), rgba(26, 48, 34, .97));
  color: #dce3d7;
  font: 800 9px/1.1 inherit;
  letter-spacing: .01em;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: inset 0 1px rgba(255,255,255,.04), 0 5px 12px rgba(0,0,0,.11);
  transition: filter .14s ease, transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.staff-btn:hover:not(:disabled) { filter: brightness(1.12); transform: translateY(-1px); border-color: rgba(224, 191, 99, .32); box-shadow: inset 0 1px rgba(255,255,255,.05), 0 7px 16px rgba(0,0,0,.16); }
.staff-btn:active:not(:disabled) { transform: translateY(1px); }
.staff-btn:disabled { opacity: .42; cursor: not-allowed; }
.staff-btn-gold { color: #fff0b9; background: linear-gradient(180deg, #a97829, #5d4014); border-color: rgba(207, 158, 55, .72); }
.staff-btn-danger { color: #ffd3cc; background: linear-gradient(180deg, #7e3a32, #47231f); border-color: rgba(174, 77, 65, .72); }
.staff-btn-good { color: #c9eccb; background: linear-gradient(180deg, #41764b, #26482e); border-color: rgba(84, 143, 94, .72); }
.staff-btn-blue { color: #d0e8f4; background: linear-gradient(180deg, #3a6077, #243e4e); border-color: rgba(72, 119, 145, .72); }

.staff-split-page {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  align-items: start;
  gap: 13px;
}

.staff-list-pane {
  position: sticky;
  top: 102px;
  max-height: calc(100vh - 126px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.staff-detail-pane { overflow: hidden; }
.staff-pane-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px;
  border-bottom: 1px solid var(--staff-line-soft);
  background: rgba(28, 57, 39, .14);
}
.staff-pane-head input { width: 100%; min-width: 0; }
.staff-select-list {
  min-height: 0;
  overflow: auto;
  padding: 7px;
  scrollbar-width: thin;
  scrollbar-color: rgba(214,181,85,.25) transparent;
}
.staff-select-list.compact { max-height: 560px; }
.staff-select-list button {
  appearance: none;
  width: 100%;
  display: block;
  margin: 0 0 4px;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #b8c4b5;
  text-align: left;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, transform .14s ease;
}
.staff-select-list button:hover { background: rgba(75, 107, 74, .10); border-color: rgba(208, 180, 94, .09); transform: translateX(1px); }
.staff-select-list button.is-active { background: linear-gradient(90deg, rgba(178, 136, 43, .19), rgba(50, 80, 53, .13)); border-color: rgba(220, 184, 73, .25); box-shadow: inset 3px 0 #cba340; }
.staff-select-list strong,
.staff-select-list span,
.staff-select-list small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.staff-select-list strong { color: #ebddb4; font-size: 10px; }
.staff-select-list span { margin-top: 3px; color: #8fa18f; font-size: 8px; }
.staff-select-list small { margin-top: 3px; color: #65786a; font-size: 7px; }

.staff-field {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.staff-field > span {
  color: #96aa98;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.staff-field input,
.staff-field select,
.staff-field textarea {
  width: 100%;
  min-height: 35px;
  border: 1px solid rgba(208, 181, 102, .18);
  border-radius: 8px;
  background: rgba(3, 17, 10, .62);
  color: #e6e2d4;
  padding: 8px 9px;
  font: 600 10px/1.28 inherit;
  outline: none;
  box-shadow: inset 0 2px 9px rgba(0,0,0,.12);
}
.staff-field textarea { min-height: 78px; resize: vertical; }
.staff-field input:focus,
.staff-field select:focus,
.staff-field textarea:focus { border-color: rgba(226, 188, 72, .55); box-shadow: 0 0 0 2px rgba(217, 176, 58, .065), inset 0 2px 9px rgba(0,0,0,.12); }
.staff-field input:disabled,
.staff-field select:disabled,
.staff-field textarea:disabled { opacity: .5; }

.staff-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 13px;
}
.staff-form-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.staff-form-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.staff-toggle-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.staff-toggle {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 9px;
  border: 1px solid rgba(208, 180, 96, .11);
  border-radius: 8px;
  background: rgba(3, 18, 11, .34);
  color: #b9c6b8;
  font-size: 9px;
}
.staff-toggle input { accent-color: #d2aa49; }
.staff-toggle span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.staff-toggle.is-disabled { opacity: .48; }

.staff-button-row,
.staff-inline-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.staff-table-wrap {
  overflow: auto;
  margin-top: 12px;
  border: 1px solid rgba(213, 182, 92, .11);
  border-radius: 9px;
  background: rgba(3, 17, 10, .20);
  scrollbar-width: thin;
  scrollbar-color: rgba(215,182,85,.25) transparent;
}
.staff-table-wrap table { width: 100%; border-collapse: collapse; font-size: 9px; }
.staff-table-wrap th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 9px 9px;
  background: #10291d;
  color: #b9a664;
  text-align: left;
  white-space: nowrap;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .035em;
  text-transform: uppercase;
}
.staff-table-wrap td {
  padding: 9px;
  border-top: 1px solid rgba(216, 185, 96, .075);
  color: #b9c4b6;
  vertical-align: top;
}
.staff-table-wrap td strong { color: #e5d9b3; }
.staff-table-wrap tbody tr:nth-child(even) td { background: rgba(255,255,255,.008); }
.staff-table-wrap tr:hover td { background: rgba(124, 153, 108, .045); }

.staff-list {
  display: flex;
  flex-direction: column;
  margin-top: 12px;
  border: 1px solid rgba(214, 182, 92, .095);
  border-radius: 9px;
  overflow: hidden;
  background: rgba(3, 17, 10, .18);
}
.staff-list-row {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  border-top: 1px solid rgba(214, 182, 92, .07);
  font-size: 9px;
}
.staff-list-row:first-child { border-top: 0; }
.staff-list-row:hover { background: rgba(112, 143, 101, .035); }
.staff-list-row > div { min-width: 0; }
.staff-list-row strong { color: #e4cf89; }
.staff-list-row p { margin: 3px 0 0; color: #a9b5a8; line-height: 1.42; }
.staff-list-row > span,
.staff-list-row > time,
.staff-list-row small { flex: 0 0 auto; color: #708578; font-size: 8px; white-space: nowrap; }
.staff-event-main { display: flex; align-items: center; gap: 8px; flex: 1; }
.staff-event-main p { margin: 0; min-width: 0; }
.staff-event-list .staff-list-row { align-items: center; }

.staff-chip-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.staff-chip-grid span { padding: 5px 8px; border: 1px solid rgba(216, 181, 80, .15); border-radius: 999px; background: rgba(174, 139, 51, .09); color: #d8c783; font-size: 8px; }

.staff-card-editor { padding-top: 2px; }
.staff-subtabs { display: flex; gap: 5px; overflow: auto; margin-top: 11px; padding-bottom: 2px; }
.staff-subtabs button {
  appearance: none;
  min-height: 30px;
  border: 1px solid rgba(210, 182, 101, .13);
  border-radius: 7px;
  padding: 6px 9px;
  background: rgba(0, 0, 0, .13);
  color: #93a493;
  font-size: 8px;
  font-weight: 750;
  cursor: pointer;
}
.staff-subtabs button:hover { color: #ded5b7; background: rgba(94, 121, 86, .09); }
.staff-subtabs button.is-active { color: #f2d87f; background: rgba(181, 139, 42, .16); border-color: rgba(218, 180, 70, .30); }

.staff-stat-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.staff-stat-row > div,
.staff-stat-row > span { min-width: 112px; padding: 8px 9px; border: 1px solid rgba(214,182,92,.08); border-radius: 8px; background: rgba(255,255,255,.025); }
.staff-stat-row > div span,
.staff-stat-row > div strong { display: block; }
.staff-stat-row > div span { color: #7e9281; font-size: 7px; font-weight: 800; text-transform: uppercase; }
.staff-stat-row > div strong,
.staff-stat-row strong { margin-top: 3px; color: #dfc97b; font-size: 10px; }
.staff-stat-row > span { color: #9fb09d; font-size: 8px; }

.staff-profile-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 13px 14px;
}
.staff-profile-grid article {
  padding: 12px;
  border: 1px solid rgba(217,185,91,.13);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(13, 39, 25, .56), rgba(3, 18, 11, .38));
  box-shadow: inset 0 1px rgba(255,255,255,.02);
}
.staff-profile-grid h3 { margin: 0; color: #e6cf82; font-family: Georgia, serif; font-size: 12px; }
.staff-profile-grid p { color: #7c9080; font-size: 8px; line-height: 1.45; }

.staff-role-layout {
  display: grid;
  grid-template-columns: minmax(210px, 270px) minmax(0, 1fr);
  gap: 12px;
  margin-top: 13px;
}
.staff-role-editor { min-width: 0; }
.staff-permission-group {
  margin-top: 12px;
  border: 1px solid rgba(211,183,98,.12);
  border-radius: 9px;
  overflow: hidden;
  background: rgba(3,17,10,.18);
}
.staff-permission-group h4 { margin: 0; padding: 8px 10px; background: rgba(174,139,51,.075); color: #e0c979; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.staff-permission-group label { display: flex; gap: 9px; padding: 8px 10px; border-top: 1px solid rgba(212,181,94,.07); cursor: pointer; transition: background .13s ease; }
.staff-permission-group label:hover { background: rgba(104,135,95,.035); }
.staff-permission-group label:first-of-type { border-top: 0; }
.staff-permission-group input { margin-top: 2px; accent-color: #d1a943; }
.staff-permission-group span { min-width: 0; }
.staff-permission-group strong,
.staff-permission-group small { display: block; }
.staff-permission-group strong { color: #cbd3c3; font-size: 9px; }
.staff-permission-group small { margin-top: 2px; color: #708377; font-size: 7px; line-height: 1.4; }

.staff-pill {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 20px;
  padding: 3px 7px;
  border: 1px solid rgba(191, 181, 132, .08);
  border-radius: 999px;
  background: rgba(180,171,129,.08);
  color: #bfc4b5;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .035em;
  white-space: nowrap;
}
.staff-pill-good { background: rgba(63,139,72,.14); border-color: rgba(77,156,85,.16); color: #9dd9a4; }
.staff-pill-bad { background: rgba(157,65,53,.15); border-color: rgba(174,76,62,.17); color: #dfa39b; }
.staff-pill-gold { background: rgba(184,137,38,.15); border-color: rgba(207,163,58,.17); color: #e9cc70; }
.staff-pill-blue { background: rgba(58,114,145,.16); border-color: rgba(69,129,159,.17); color: #a7d2e7; }

/* Setup/login remains compatible with the existing player login composition, but gains proper Staff accents. */
.staff-login-screen .staff-access-card {
  border-color: rgba(216,181,86,.34) !important;
  background: linear-gradient(180deg, rgba(19, 48, 33, .97), rgba(7, 24, 15, .985)) !important;
  box-shadow: 0 30px 95px rgba(0,0,0,.46), inset 0 1px rgba(255,255,255,.03) !important;
}
.staff-login-screen .staff-access-card h1 { color: #f0d887; }
.staff-login-screen .staff-access-card .eyebrow { color: #9eb19d; }
.staff-login-input { border-color: rgba(214,180,95,.22) !important; background: rgba(2,15,8,.55) !important; }
.staff-link-button { color: #c7aa55 !important; }

.staff-access-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  color: #eee5cb;
  background:
    linear-gradient(rgba(3,14,8,.66), rgba(3,14,8,.72)),
    url("/images/bg.png") center / cover no-repeat,
    #08120c;
}
.staff-access-screen .staff-access-card {
  width: min(430px, 92vw);
  padding: 28px;
  text-align: center;
  border: 1px solid rgba(216,181,86,.26);
  border-radius: 16px;
  background: rgba(10,31,21,.94);
  box-shadow: 0 24px 70px rgba(0,0,0,.42);
}

@media (max-width: 1320px) {
  .staff-metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .staff-metric-card, .staff-metric-grid > div { min-height: 112px; }
  .staff-dashboard-grid { grid-template-columns: 1fr; }
  .staff-dashboard-grid > .staff-section { min-height: 0; }
  .staff-dashboard-grid .staff-event-list { max-height: 380px; }
}

@media (max-width: 1080px) {
  .staff-shell { grid-template-columns: 210px minmax(0, 1fr); }
  .staff-shell::after { background: radial-gradient(circle at 50% 0%, rgba(94,134,83,.11), transparent 42%); }
  .staff-sidebar { padding-left: 11px; padding-right: 11px; }
  .staff-split-page { grid-template-columns: 245px minmax(0, 1fr); }
  .staff-form-grid.cols-3,
  .staff-toggle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .staff-profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 780px) {
  .staff-shell { display: block; }
  .staff-sidebar {
    position: relative;
    height: auto;
    overflow: visible;
    display: grid;
    grid-template-columns: 1fr;
    padding: 10px 12px;
    border-right: 0;
    border-bottom: 1px solid rgba(216,183,91,.20);
  }
  .staff-brand { padding-bottom: 11px; }
  .staff-sidebar nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    margin-top: 0;
  }
  .staff-sidebar nav button { min-height: 38px; grid-template-columns: 24px minmax(0, 1fr); padding: 6px 8px; }
  .staff-nav-icon { width: 22px; height: 22px; font-size: 14px; }
  .staff-user { margin-top: 2px; }
  .staff-exit { width: auto; }
  .staff-topbar { top: 0; min-height: 72px; padding: 10px 12px; }
  .staff-page { padding: 12px 12px 28px; }
  .staff-toast { margin-left: 12px; margin-right: 12px; top: 79px; }
  .staff-dashboard-welcome { align-items: flex-start; flex-direction: column; }
  .staff-dashboard-badge { width: 100%; max-width: none; text-align: left; }
  .staff-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .staff-split-page { grid-template-columns: 1fr; }
  .staff-list-pane { position: relative; top: auto; max-height: 330px; }
  .staff-role-layout { grid-template-columns: 1fr; }
  .staff-form-grid,
  .staff-form-grid.cols-2,
  .staff-form-grid.cols-3,
  .staff-toggle-grid,
  .staff-profile-grid { grid-template-columns: 1fr; }
  .staff-section > header { align-items: flex-start; }
}

@media (max-width: 520px) {
  .staff-sidebar nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .staff-topbar { align-items: flex-start; flex-direction: column; }
  .staff-top-actions { width: 100%; justify-content: stretch; }
  .staff-top-actions select { flex: 1; min-width: 0; }
  .staff-metric-grid { grid-template-columns: 1fr; }
  .staff-metric-card, .staff-metric-grid > div { min-height: 100px; }
  .staff-event-main { align-items: flex-start; flex-direction: column; gap: 5px; }
  .staff-list-row { flex-direction: column; }
  .staff-list-row > time { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .staff-shell * { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ============================================================
   Staff Panel v218 — readability, scale & fully custom controls
   ============================================================ */

.staff-shell {
  grid-template-columns: 300px minmax(0, 1fr);
  font-size: 14px;
}

.staff-shell::after {
  background:
    radial-gradient(circle at 50% 0%, rgba(94,134,83,.12), transparent 42%),
    radial-gradient(circle at 70% 32%, rgba(226,188,78,.035), transparent 26%),
    linear-gradient(90deg, rgba(2,10,6,.42) 0 300px, rgba(2,10,6,.03) 300px 100%);
}

.staff-sidebar {
  gap: 11px;
  padding: 28px 20px 20px;
}

.staff-brand {
  gap: 15px;
  padding: 4px 9px 24px;
  margin-bottom: 7px;
}
.staff-brand img { width: 60px; height: 60px; flex-basis: 60px; }
.staff-brand strong { font-size: 23px; }
.staff-brand span { margin-top: 8px; font-size: 12px; }
.staff-sidebar nav { gap: 6px; margin-top: 7px; }
.staff-sidebar nav button {
  min-height: 54px;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 11px;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 15px;
}
.staff-nav-icon {
  width: 32px;
  height: 32px;
  font-size: 19px;
  border-radius: 9px;
}
.staff-user {
  padding: 16px 14px 15px 46px;
  border-radius: 13px;
}
.staff-user::before { left: 14px; top: 16px; width: 22px; height: 22px; }
.staff-user strong { font-size: 14px; }
.staff-user span { margin-top: 5px; font-size: 12px; }
.staff-user small { display: none !important; }
.staff-exit {
  min-height: 44px;
  border-radius: 10px;
  padding: 10px 13px;
  font-size: 12px;
}

.staff-topbar {
  min-height: 100px;
  gap: 24px;
  padding: 17px 30px 16px;
}
.staff-topbar::after { left: 28px; right: 28px; }
.staff-topbar-eyebrow { margin-bottom: 5px; font-size: 12px; }
.staff-topbar h1 { font-size: clamp(29px, 2.15vw, 38px); }
.staff-topbar p { margin-top: 7px; font-size: 13px; }
.staff-top-actions { gap: 10px; }
.staff-top-actions select,
.staff-pane-head input {
  min-height: 44px;
  border-radius: 10px;
  padding: 10px 13px;
  font-size: 13px;
}
.staff-top-actions select { min-width: 205px; }

.staff-page {
  width: min(100%, 1900px);
  padding: 28px 30px 46px;
}
.staff-toast {
  top: 110px;
  margin: 13px 30px 0;
  padding: 13px 16px;
  border-radius: 11px;
  font-size: 13px;
}
.staff-loading { min-height: calc(100vh - 100px); gap: 14px; font-size: 15px; }
.staff-dashboard-page { padding-top: 25px; }
.staff-dashboard-welcome {
  min-height: 126px;
  gap: 28px;
  margin-bottom: 20px;
  padding: 23px 27px 23px 29px;
  border-radius: 16px;
}
.staff-dashboard-kicker { margin-bottom: 7px; font-size: 12px; }
.staff-dashboard-welcome h2 { font-size: clamp(28px, 2vw, 35px); }
.staff-dashboard-welcome p { max-width: 860px; margin-top: 8px; font-size: 14px; }
.staff-dashboard-badge {
  min-width: 235px;
  max-width: 310px;
  padding: 14px 17px;
  border-radius: 12px;
}
.staff-dashboard-badge span { font-size: 12px; }
.staff-dashboard-badge small { margin-top: 7px; font-size: 12px; }

.staff-metric-grid { gap: 14px; margin-bottom: 20px; }
.staff-metric-card,
.staff-metric-grid > div {
  min-height: 158px;
  padding: 21px 18px 19px;
  border-radius: 15px;
}
.staff-metric-card::before {
  right: 17px;
  top: 16px;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  font-size: 26px;
}
.staff-metric-grid span {
  max-width: calc(100% - 58px);
  margin-bottom: 8px;
  font-size: 12px;
}
.staff-metric-grid strong { font-size: clamp(30px, 2vw, 39px); }
.staff-metric-grid small { margin-top: 10px; font-size: 12px; }
.staff-dashboard-grid { grid-template-columns: minmax(0, 1fr) minmax(520px, 1.12fr); gap: 18px; }
.staff-dashboard-grid > .staff-section { min-height: 440px; }
.staff-dashboard-grid .staff-event-list { max-height: 515px; }
.staff-danger-wrap { margin-top: 18px; }

.staff-section,
.staff-list-pane,
.staff-detail-pane { border-radius: 16px; }
.staff-section { margin-bottom: 18px; }
.staff-section > header {
  min-height: 78px;
  gap: 16px;
  padding: 18px 20px 16px;
}
.staff-section > header h3 { font-size: 20px; }
.staff-section > header h3::before { margin-right: 9px; font-size: 13px; }
.staff-section > header p { margin-top: 6px; font-size: 13px; line-height: 1.5; }
.staff-section-actions { gap: 9px; }
.staff-section > :not(header) { margin-left: 20px; margin-right: 20px; }
.staff-section > :last-child { margin-bottom: 20px; }

.staff-btn {
  min-height: 42px;
  border-radius: 10px;
  padding: 10px 15px;
  font: 800 13px/1.15 inherit;
}

.staff-split-page { grid-template-columns: 350px minmax(0, 1fr); gap: 18px; }
.staff-list-pane { top: 122px; max-height: calc(100vh - 148px); }
.staff-pane-head { gap: 10px; padding: 14px; }
.staff-select-list { padding: 10px; }
.staff-select-list.compact { max-height: 680px; }
.staff-select-list button {
  margin-bottom: 6px;
  padding: 13px 14px;
  border-radius: 10px;
}
.staff-select-list strong { font-size: 14px; }
.staff-select-list span { margin-top: 5px; font-size: 12px; }
.staff-select-list small { margin-top: 5px; font-size: 11px; }

.staff-field { gap: 7px; }
.staff-field > span { font-size: 12px; }
.staff-field input,
.staff-field select,
.staff-field textarea {
  min-height: 44px;
  border-radius: 10px;
  padding: 10px 12px;
  font: 600 14px/1.35 inherit;
}
.staff-field textarea { min-height: 110px; resize: none; }
.staff-form-grid { gap: 14px; margin-top: 17px; }
.staff-toggle-grid { gap: 11px; margin-top: 16px; }
.staff-toggle {
  gap: 11px;
  min-height: 52px;
  padding: 11px 13px;
  border-radius: 10px;
  font-size: 14px;
}
.staff-button-row,
.staff-inline-actions { gap: 10px; margin-top: 16px; }

.staff-table-wrap { margin-top: 16px; border-radius: 11px; }
.staff-table-wrap table { font-size: 13px; }
.staff-table-wrap th {
  padding: 13px 14px;
  font-size: 12px;
  letter-spacing: .045em;
}
.staff-table-wrap td { padding: 13px 14px; line-height: 1.45; }

.staff-list { margin-top: 16px; border-radius: 11px; }
.staff-list-row { gap: 16px; padding: 13px 15px; font-size: 13px; }
.staff-list-row p { margin-top: 5px; line-height: 1.5; }
.staff-list-row > span,
.staff-list-row > time,
.staff-list-row small { font-size: 12px; }
.staff-event-main { gap: 11px; }

.staff-chip-grid { gap: 8px; margin-top: 14px; }
.staff-chip-grid span { padding: 7px 10px; font-size: 12px; }
.staff-subtabs { gap: 8px; margin-top: 15px; padding-bottom: 4px; }
.staff-subtabs button {
  min-height: 40px;
  border-radius: 9px;
  padding: 9px 13px;
  font-size: 12px;
}
.staff-stat-row { gap: 11px; margin-top: 14px; }
.staff-stat-row > div,
.staff-stat-row > span { min-width: 150px; padding: 12px 13px; border-radius: 10px; }
.staff-stat-row > div span { font-size: 11px; }
.staff-stat-row > div strong,
.staff-stat-row strong { margin-top: 5px; font-size: 15px; }
.staff-stat-row > span { font-size: 13px; }

.staff-profile-grid { gap: 14px; margin: 17px 20px; }
.staff-profile-grid > div,
.staff-profile-grid article { padding: 16px; border-radius: 12px; }
.staff-profile-grid h3 { font-size: 16px; }
.staff-profile-grid p { font-size: 13px; line-height: 1.5; }
.staff-profile-grid header strong { font-size: 15px; }

.staff-role-layout { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); gap: 17px; margin-top: 17px; }
.staff-permission-group { margin-top: 16px; border-radius: 11px; }
.staff-permission-group h4 { padding: 12px 14px; font-size: 12px; }
.staff-permission-group label { gap: 12px; padding: 12px 14px; }
.staff-permission-group strong { font-size: 13px; }
.staff-permission-group small { margin-top: 4px; font-size: 12px; line-height: 1.45; }
.staff-pill { min-height: 27px; padding: 5px 9px; font-size: 11px; }

/* Generic controls used outside staff-field (inline actions, search bars, venue selector). */
.staff-shell input:not([type="checkbox"]),
.staff-shell select,
.staff-shell textarea,
.staff-access-screen input:not([type="checkbox"]),
.staff-access-screen select,
.staff-access-screen textarea,
.staff-login-screen input:not([type="checkbox"]),
.staff-login-screen select,
.staff-login-screen textarea {
  appearance: none;
  -webkit-appearance: none;
  min-height: 44px;
  border: 1px solid rgba(208,181,102,.22);
  border-radius: 10px;
  background-color: rgba(3,17,10,.72);
  color: #ece8dc;
  padding: 10px 13px;
  font: 600 14px/1.35 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  outline: none;
  box-shadow: inset 0 2px 9px rgba(0,0,0,.16), 0 1px rgba(255,255,255,.02);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.staff-shell input:not([type="checkbox"]):focus,
.staff-shell select:focus,
.staff-shell textarea:focus,
.staff-access-screen input:not([type="checkbox"]):focus,
.staff-access-screen select:focus,
.staff-access-screen textarea:focus,
.staff-login-screen input:not([type="checkbox"]):focus,
.staff-login-screen select:focus,
.staff-login-screen textarea:focus {
  border-color: rgba(226,188,72,.62);
  background-color: rgba(5,24,14,.84);
  box-shadow: 0 0 0 3px rgba(217,176,58,.09), inset 0 2px 9px rgba(0,0,0,.14);
}
.staff-shell input::placeholder,
.staff-shell textarea::placeholder,
.staff-access-screen input::placeholder,
.staff-login-screen input::placeholder { color: #728678; opacity: 1; }

/* Fully custom select arrow. */
.staff-shell select,
.staff-access-screen select,
.staff-login-screen select {
  padding-right: 38px;
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, #d5b65b 50%),
    linear-gradient(135deg, #d5b65b 50%, transparent 50%);
  background-position:
    calc(100% - 17px) calc(50% - 2px),
    calc(100% - 12px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.staff-shell select option,
.staff-access-screen select option,
.staff-login-screen select option { background: #0c2116; color: #eee7d2; }

/* Remove browser number spinners. */
.staff-shell input[type="number"]::-webkit-inner-spin-button,
.staff-shell input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.staff-shell input[type="number"] { appearance: textfield; -moz-appearance: textfield; }

/* Custom switch used by Toggle. */
.staff-toggle { position: relative; cursor: pointer; }
.staff-toggle input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.staff-toggle i {
  position: relative;
  flex: 0 0 46px;
  width: 46px;
  height: 25px;
  border: 1px solid rgba(190,183,139,.25);
  border-radius: 999px;
  background: linear-gradient(180deg, #263a2d, #17281e);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.30), 0 1px rgba(255,255,255,.025);
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.staff-toggle i::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: linear-gradient(180deg, #b9c2b6, #758579);
  box-shadow: 0 2px 5px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.25);
  transition: transform .16s ease, background .16s ease;
}
.staff-toggle input:checked + i {
  border-color: rgba(220,181,67,.55);
  background: linear-gradient(180deg, #765b1e, #4e3b13);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.26), 0 0 0 2px rgba(213,173,56,.06);
}
.staff-toggle input:checked + i::after {
  transform: translateX(21px);
  background: linear-gradient(180deg, #f4dc8b, #c89d39);
}
.staff-toggle input:focus-visible + i { box-shadow: 0 0 0 3px rgba(223,182,65,.16); }
.staff-toggle.is-disabled { cursor: not-allowed; }

/* Custom square checkboxes in role permissions. */
.staff-permission-group input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: 0 0 23px;
  width: 23px;
  height: 23px;
  margin: 0;
  border: 1px solid rgba(211,184,99,.30);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(25,49,34,.96), rgba(10,28,18,.98));
  box-shadow: inset 0 2px 5px rgba(0,0,0,.20);
  cursor: pointer;
}
.staff-permission-group input[type="checkbox"]::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 3px;
  width: 6px;
  height: 11px;
  border: solid #fff1b7;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transform-origin: center;
  transition: transform .12s ease;
}
.staff-permission-group input[type="checkbox"]:checked {
  border-color: #c9a23e;
  background: linear-gradient(180deg, #9a7522, #675018);
  box-shadow: 0 0 0 2px rgba(210,170,57,.08), inset 0 1px rgba(255,255,255,.08);
}
.staff-permission-group input[type="checkbox"]:checked::after { transform: rotate(45deg) scale(1); }
.staff-permission-group input[type="checkbox"]:focus-visible { outline: 3px solid rgba(217,177,60,.15); outline-offset: 2px; }

/* Custom scrollbars everywhere inside Staff, including body/page scrollbar. */
.staff-shell,
.staff-shell *,
.staff-access-screen,
.staff-access-screen *,
.staff-login-screen,
.staff-login-screen *,
html:has(.staff-shell),
body:has(.staff-shell) {
  scrollbar-width: auto;
  scrollbar-color: rgba(191,150,49,.82) rgba(4,18,11,.78);
}
.staff-shell::-webkit-scrollbar,
.staff-shell *::-webkit-scrollbar,
.staff-access-screen::-webkit-scrollbar,
.staff-access-screen *::-webkit-scrollbar,
.staff-login-screen::-webkit-scrollbar,
.staff-login-screen *::-webkit-scrollbar,
html:has(.staff-shell)::-webkit-scrollbar,
body:has(.staff-shell)::-webkit-scrollbar { width: 12px; height: 12px; }
.staff-shell::-webkit-scrollbar-track,
.staff-shell *::-webkit-scrollbar-track,
.staff-access-screen::-webkit-scrollbar-track,
.staff-access-screen *::-webkit-scrollbar-track,
.staff-login-screen::-webkit-scrollbar-track,
.staff-login-screen *::-webkit-scrollbar-track,
html:has(.staff-shell)::-webkit-scrollbar-track,
body:has(.staff-shell)::-webkit-scrollbar-track {
  background: rgba(4,18,11,.80);
  border-left: 1px solid rgba(216,183,91,.08);
}
.staff-shell::-webkit-scrollbar-thumb,
.staff-shell *::-webkit-scrollbar-thumb,
.staff-access-screen::-webkit-scrollbar-thumb,
.staff-access-screen *::-webkit-scrollbar-thumb,
.staff-login-screen::-webkit-scrollbar-thumb,
.staff-login-screen *::-webkit-scrollbar-thumb,
html:has(.staff-shell)::-webkit-scrollbar-thumb,
body:has(.staff-shell)::-webkit-scrollbar-thumb {
  min-height: 38px;
  border: 3px solid rgba(4,18,11,.84);
  border-radius: 999px;
  background: linear-gradient(180deg, #c6a24b, #76591d);
  box-shadow: inset 0 1px rgba(255,255,255,.18);
}
.staff-shell::-webkit-scrollbar-thumb:hover,
.staff-shell *::-webkit-scrollbar-thumb:hover,
.staff-access-screen *::-webkit-scrollbar-thumb:hover,
.staff-login-screen *::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #e0bd62, #8d6a25); }
.staff-shell::-webkit-scrollbar-corner,
.staff-shell *::-webkit-scrollbar-corner { background: #07170e; }

/* Staff-native dialog replaces browser confirm()/prompt(). */
.staff-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(1,8,4,.72);
  backdrop-filter: blur(8px);
}
.staff-dialog {
  width: min(520px, 94vw);
  padding: 24px;
  border: 1px solid rgba(220,184,76,.35);
  border-radius: 16px;
  background:
    radial-gradient(circle at 85% 0%, rgba(201,164,60,.10), transparent 31%),
    linear-gradient(180deg, rgba(16,48,31,.99), rgba(7,25,16,.995));
  box-shadow: 0 28px 90px rgba(0,0,0,.56), inset 0 1px rgba(255,255,255,.035);
}
.staff-dialog-kicker { color: #a88c42; font-size: 11px; font-weight: 900; letter-spacing: .16em; }
.staff-dialog h3 { margin: 8px 0 0; color: #f0d98d; font-family: Georgia, serif; font-size: 24px; }
.staff-dialog p { margin: 11px 0 0; color: #b4c1b2; font-size: 14px; line-height: 1.55; }
.staff-dialog input { width: 100%; margin-top: 18px; }
.staff-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

/* Staff access/login also uses a comfortable control scale. */
.staff-access-screen .staff-access-card { width: min(470px, 92vw); padding: 32px; }
.staff-login-screen .staff-login-input,
.staff-access-screen .staff-login-input { min-height: 48px !important; font-size: 14px !important; }

@media (max-width: 1500px) {
  .staff-metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .staff-dashboard-grid { grid-template-columns: 1fr; }
  .staff-dashboard-grid > .staff-section { min-height: 0; }
  .staff-dashboard-grid .staff-event-list { max-height: 480px; }
}

@media (max-width: 1180px) {
  .staff-shell { grid-template-columns: 250px minmax(0, 1fr); }
  .staff-shell::after { background: radial-gradient(circle at 50% 0%, rgba(94,134,83,.11), transparent 42%); }
  .staff-sidebar { padding-left: 14px; padding-right: 14px; }
  .staff-sidebar nav button { font-size: 14px; }
  .staff-split-page { grid-template-columns: 300px minmax(0, 1fr); }
  .staff-role-layout { grid-template-columns: minmax(250px, 300px) minmax(0, 1fr); }
}

@media (max-width: 780px) {
  .staff-shell { display: block; font-size: 14px; }
  .staff-sidebar { padding: 14px; }
  .staff-sidebar nav button { min-height: 48px; grid-template-columns: 30px minmax(0, 1fr); padding: 9px 10px; }
  .staff-nav-icon { width: 28px; height: 28px; font-size: 17px; }
  .staff-topbar { min-height: 86px; padding: 14px 16px; }
  .staff-page { padding: 18px 16px 34px; }
  .staff-toast { top: 94px; margin-left: 16px; margin-right: 16px; }
  .staff-metric-card,
  .staff-metric-grid > div { min-height: 140px; }
  .staff-list-pane { max-height: 430px; }
  .staff-role-layout { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .staff-brand strong { font-size: 20px; }
  .staff-topbar h1 { font-size: 27px; }
  .staff-dashboard-welcome h2 { font-size: 25px; }
  .staff-metric-grid { grid-template-columns: 1fr; }
  .staff-metric-card,
  .staff-metric-grid > div { min-height: 128px; }
  .staff-dialog { padding: 20px; }
  .staff-dialog-actions { flex-direction: column-reverse; }
  .staff-dialog-actions .staff-btn { width: 100%; }
}

/* ============================================================
   Staff Panel v219 — larger UI + zero native browser controls
   ============================================================ */

/* Larger desktop canvas: dimensions and typography scale together. */
.staff-shell {
  grid-template-columns: 350px minmax(0, 1fr);
  font-size: 17px;
}
.staff-shell::after {
  background:
    radial-gradient(circle at 50% 0%, rgba(94,134,83,.12), transparent 42%),
    radial-gradient(circle at 70% 32%, rgba(226,188,78,.035), transparent 26%),
    linear-gradient(90deg, rgba(2,10,6,.42) 0 350px, rgba(2,10,6,.03) 350px 100%);
}
.staff-sidebar { gap: 13px; padding: 32px 23px 22px; }
.staff-brand { gap: 17px; padding: 5px 10px 28px; margin-bottom: 8px; }
.staff-brand img { width: 68px; height: 68px; flex-basis: 68px; }
.staff-brand strong { font-size: 27px; }
.staff-brand span { margin-top: 9px; font-size: 14px; letter-spacing: .12em; }
.staff-sidebar nav { gap: 7px; margin-top: 8px; }
.staff-sidebar nav button {
  min-height: 63px;
  grid-template-columns: 39px minmax(0, 1fr);
  gap: 13px;
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 17px;
}
.staff-nav-icon { width: 37px; height: 37px; font-size: 22px; border-radius: 10px; }
.staff-user { padding: 19px 16px 18px 53px; border-radius: 15px; }
.staff-user::before { left: 16px; top: 19px; width: 25px; height: 25px; font-size: 17px; }
.staff-user strong { font-size: 17px; }
.staff-user span { margin-top: 6px; font-size: 14px; }
.staff-exit { min-height: 50px; border-radius: 11px; padding: 12px 15px; font-size: 14px; }

.staff-topbar { min-height: 118px; gap: 28px; padding: 20px 36px 19px; }
.staff-topbar::after { left: 34px; right: 34px; }
.staff-topbar-eyebrow { margin-bottom: 6px; font-size: 14px; }
.staff-topbar h1 { font-size: clamp(34px, 2.35vw, 44px); }
.staff-topbar p { margin-top: 8px; font-size: 15px; }
.staff-top-actions { gap: 12px; }

.staff-page { width: min(100%, 2040px); padding: 34px 36px 56px; }
.staff-toast { top: 128px; margin: 15px 36px 0; padding: 16px 19px; border-radius: 13px; font-size: 15px; }
.staff-loading { min-height: calc(100vh - 118px); gap: 16px; font-size: 17px; }
.staff-dashboard-page { padding-top: 31px; }
.staff-dashboard-welcome { min-height: 150px; gap: 32px; margin-bottom: 24px; padding: 28px 32px; border-radius: 18px; }
.staff-dashboard-kicker { margin-bottom: 9px; font-size: 14px; }
.staff-dashboard-welcome h2 { font-size: clamp(33px, 2.25vw, 42px); }
.staff-dashboard-welcome p { max-width: 980px; margin-top: 10px; font-size: 17px; line-height: 1.55; }
.staff-dashboard-badge { min-width: 280px; max-width: 360px; padding: 18px 20px; border-radius: 14px; }
.staff-dashboard-badge span { font-size: 14px; }
.staff-dashboard-badge small { margin-top: 8px; font-size: 13px; }

.staff-metric-grid { gap: 17px; margin-bottom: 24px; }
.staff-metric-card,
.staff-metric-grid > div { min-height: 190px; padding: 25px 22px 23px; border-radius: 18px; }
.staff-metric-card::before { right: 20px; top: 19px; width: 58px; height: 58px; border-radius: 14px; font-size: 31px; }
.staff-metric-grid span { max-width: calc(100% - 70px); margin-bottom: 10px; font-size: 14px; }
.staff-metric-grid strong { font-size: clamp(36px, 2.25vw, 47px); }
.staff-metric-grid small { margin-top: 12px; font-size: 14px; }
.staff-dashboard-grid { grid-template-columns: minmax(0, 1fr) minmax(570px, 1.12fr); gap: 22px; }
.staff-dashboard-grid > .staff-section { min-height: 515px; }
.staff-dashboard-grid .staff-event-list { max-height: 605px; }

.staff-section,
.staff-list-pane,
.staff-detail-pane { border-radius: 18px; }
.staff-section { margin-bottom: 22px; }
.staff-section > header { min-height: 92px; gap: 20px; padding: 22px 24px 19px; }
.staff-section > header h3 { font-size: 24px; }
.staff-section > header h3::before { margin-right: 10px; font-size: 15px; }
.staff-section > header p { margin-top: 7px; font-size: 15px; line-height: 1.55; }
.staff-section-actions { gap: 11px; }
.staff-section > :not(header) { margin-left: 24px; margin-right: 24px; }
.staff-section > :last-child { margin-bottom: 24px; }
/* Needed so fully custom dropdown menus can float above section content. */
.staff-section:has(.staff-combobox.is-open) { overflow: visible; position: relative; z-index: 70; }

.staff-btn { min-height: 50px; border-radius: 11px; padding: 12px 18px; font: 800 15px/1.15 inherit; }
.staff-split-page { grid-template-columns: 410px minmax(0, 1fr); gap: 22px; }
.staff-list-pane { top: 142px; max-height: calc(100vh - 170px); }
.staff-pane-head { gap: 12px; padding: 17px; }
.staff-select-list { padding: 12px; }
.staff-select-list.compact { max-height: 760px; }
.staff-select-list button { margin-bottom: 8px; padding: 16px 17px; border-radius: 12px; }
.staff-select-list strong { font-size: 17px; }
.staff-select-list span { margin-top: 6px; font-size: 15px; }
.staff-select-list small { margin-top: 6px; font-size: 13px; }

.staff-field { gap: 9px; }
.staff-field > span { font-size: 14px; }
.staff-field input,
.staff-field textarea,
.staff-shell input:not([type="checkbox"]),
.staff-shell textarea,
.staff-access-screen input:not([type="checkbox"]),
.staff-login-screen input:not([type="checkbox"]) {
  min-height: 52px;
  border-radius: 11px;
  padding: 12px 15px;
  font-size: 16px;
  line-height: 1.4;
}
.staff-field textarea { min-height: 135px; }
.staff-form-grid { gap: 17px; margin-top: 21px; }
.staff-toggle-grid { gap: 13px; margin-top: 19px; }
.staff-toggle { gap: 13px; min-height: 61px; padding: 13px 15px; border-radius: 12px; font-size: 16px; }
.staff-toggle i { flex-basis: 54px; width: 54px; height: 29px; }
.staff-toggle i::after { width: 21px; height: 21px; }
.staff-toggle input:checked + i::after { transform: translateX(25px); }
.staff-button-row,
.staff-inline-actions { gap: 12px; margin-top: 19px; }

.staff-table-wrap { margin-top: 19px; border-radius: 13px; }
.staff-table-wrap table { font-size: 16px; }
.staff-table-wrap th { padding: 16px 17px; font-size: 14px; letter-spacing: .04em; }
.staff-table-wrap td { padding: 16px 17px; line-height: 1.5; }
.staff-list { margin-top: 19px; border-radius: 13px; }
.staff-list-row { gap: 19px; padding: 16px 18px; font-size: 16px; }
.staff-list-row p { margin-top: 6px; line-height: 1.55; }
.staff-list-row > span,
.staff-list-row > time,
.staff-list-row small { font-size: 14px; }
.staff-event-main { gap: 13px; }
.staff-chip-grid { gap: 10px; margin-top: 17px; }
.staff-chip-grid span { padding: 9px 12px; font-size: 14px; }
.staff-subtabs { gap: 10px; margin-top: 18px; padding-bottom: 5px; }
.staff-subtabs button { min-height: 47px; border-radius: 10px; padding: 11px 15px; font-size: 14px; }
.staff-stat-row { gap: 13px; margin-top: 17px; }
.staff-stat-row > div,
.staff-stat-row > span { min-width: 180px; padding: 15px 16px; border-radius: 12px; }
.staff-stat-row > div span { font-size: 13px; }
.staff-stat-row > div strong,
.staff-stat-row strong { margin-top: 6px; font-size: 18px; }
.staff-stat-row > span { font-size: 15px; }
.staff-profile-grid { gap: 17px; margin: 20px 24px; }
.staff-profile-grid > div,
.staff-profile-grid article { padding: 19px; border-radius: 14px; }
.staff-profile-grid h3 { font-size: 19px; }
.staff-profile-grid p { font-size: 15px; line-height: 1.55; }
.staff-profile-grid header strong { font-size: 18px; }
.staff-role-layout { grid-template-columns: minmax(340px, 410px) minmax(0, 1fr); gap: 21px; margin-top: 20px; }
.staff-permission-group { margin-top: 19px; border-radius: 13px; }
.staff-permission-group h4 { padding: 14px 17px; font-size: 14px; }
.staff-permission-group label { gap: 14px; padding: 15px 17px; }
.staff-permission-group strong { font-size: 16px; }
.staff-permission-group small { margin-top: 5px; font-size: 14px; line-height: 1.5; }
.staff-permission-group input[type="checkbox"] { flex-basis: 27px; width: 27px; height: 27px; border-radius: 7px; }
.staff-permission-group input[type="checkbox"]::after { left: 8px; top: 4px; width: 7px; height: 13px; }
.staff-pill { min-height: 31px; padding: 6px 11px; font-size: 13px; }

/* ------------------------------------------------------------
   True custom combobox — replaces every native <select> in Staff.
   ------------------------------------------------------------ */
.staff-combobox {
  position: relative;
  min-width: 0;
  color: #ece8dc;
  font-family: inherit;
  z-index: 1;
}
.staff-combobox.is-open { z-index: 250; }
.staff-combobox-trigger {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-height: 52px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px;
  align-items: center;
  gap: 12px;
  padding: 12px 14px 12px 16px;
  border: 1px solid rgba(208,181,102,.27);
  border-radius: 11px;
  background:
    linear-gradient(180deg, rgba(18,43,29,.98), rgba(7,25,16,.99));
  color: #eee8d7;
  font: 700 16px/1.3 inherit;
  text-align: left;
  outline: none;
  cursor: pointer;
  box-shadow: inset 0 1px rgba(255,255,255,.025), inset 0 -2px 7px rgba(0,0,0,.18), 0 4px 11px rgba(0,0,0,.10);
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.staff-combobox-trigger:hover:not(:disabled) {
  border-color: rgba(222,186,77,.46);
  background: linear-gradient(180deg, rgba(25,54,37,.99), rgba(9,30,19,.99));
}
.staff-combobox.is-open .staff-combobox-trigger {
  border-color: rgba(229,190,76,.67);
  box-shadow: 0 0 0 3px rgba(216,175,56,.09), inset 0 1px rgba(255,255,255,.035);
}
.staff-combobox-trigger > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.staff-combobox-trigger > i {
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: rgba(215,180,74,.07);
  border: 1px solid rgba(215,180,74,.11);
}
.staff-combobox-trigger > i::before,
.staff-combobox-trigger > i::after {
  content: "";
  position: absolute;
  top: 8px;
  width: 7px;
  height: 2px;
  border-radius: 999px;
  background: #d8b85d;
  transition: transform .15s ease;
}
.staff-combobox-trigger > i::before { left: 4px; transform: rotate(45deg); }
.staff-combobox-trigger > i::after { right: 4px; transform: rotate(-45deg); }
.staff-combobox.is-open .staff-combobox-trigger > i::before { transform: rotate(-45deg); }
.staff-combobox.is-open .staff-combobox-trigger > i::after { transform: rotate(45deg); }
.staff-combobox.is-disabled { opacity: .48; }
.staff-combobox.is-disabled .staff-combobox-trigger { cursor: not-allowed; }
.staff-combobox-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 7px);
  z-index: 999;
  max-height: 340px;
  overflow: auto;
  padding: 7px;
  border: 1px solid rgba(222,184,72,.38);
  border-radius: 12px;
  background:
    radial-gradient(circle at 85% 0%, rgba(213,173,58,.08), transparent 35%),
    linear-gradient(180deg, #102c1d, #071b11);
  box-shadow: 0 20px 55px rgba(0,0,0,.48), inset 0 1px rgba(255,255,255,.035);
  backdrop-filter: blur(16px);
}
.staff-combobox-menu button {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-height: 46px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px;
  align-items: center;
  gap: 10px;
  margin: 0 0 4px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: #cbd7c8;
  font: 700 15px/1.3 inherit;
  text-align: left;
  cursor: pointer;
}
.staff-combobox-menu button:last-child { margin-bottom: 0; }
.staff-combobox-menu button:hover,
.staff-combobox-menu button:focus-visible {
  outline: none;
  color: #fff0b4;
  background: linear-gradient(90deg, rgba(180,139,43,.21), rgba(50,86,58,.15));
  border-color: rgba(220,184,73,.18);
}
.staff-combobox-menu button.is-selected {
  color: #ffe7a0;
  background: linear-gradient(90deg, rgba(180,139,43,.26), rgba(39,76,50,.17));
  border-color: rgba(220,184,73,.29);
  box-shadow: inset 3px 0 #cba340;
}
.staff-combobox-menu button > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.staff-combobox-menu button > b { color: #e0bd60; text-align: center; font-size: 17px; }
.staff-top-profile-select { width: 260px; }
.staff-inline-select { width: min(280px, 38vw); }
.staff-pane-select { flex: 1; min-width: 0; }
.staff-field > .staff-combobox { width: 100%; }

/* ------------------------------------------------------------
   Force-remove number spinners from every Staff number input.
   ------------------------------------------------------------ */
.staff-shell input[type="number"],
.staff-access-screen input[type="number"],
.staff-login-screen input[type="number"],
.staff-dialog input[type="number"] {
  appearance: textfield !important;
  -moz-appearance: textfield !important;
  -webkit-appearance: none !important;
}
.staff-shell input[type="number"]::-webkit-inner-spin-button,
.staff-shell input[type="number"]::-webkit-outer-spin-button,
.staff-access-screen input[type="number"]::-webkit-inner-spin-button,
.staff-access-screen input[type="number"]::-webkit-outer-spin-button,
.staff-login-screen input[type="number"]::-webkit-inner-spin-button,
.staff-login-screen input[type="number"]::-webkit-outer-spin-button,
.staff-dialog input[type="number"]::-webkit-inner-spin-button,
.staff-dialog input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: none !important;
  width: 0 !important;
  margin: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ------------------------------------------------------------
   Explicit custom scrollbars for every independently scrollable panel.
   No browser-looking scrollbar is allowed to remain visible.
   ------------------------------------------------------------ */
.staff-event-list,
.staff-select-list,
.staff-list-pane,
.staff-sidebar,
.staff-table-wrap,
.staff-detail-pane,
.staff-subtabs,
.staff-combobox-menu,
.staff-dialog,
.staff-shell,
.staff-workspace {
  scrollbar-width: auto !important;
  scrollbar-color: #b58b32 #07180f !important;
}
.staff-event-list::-webkit-scrollbar,
.staff-select-list::-webkit-scrollbar,
.staff-list-pane::-webkit-scrollbar,
.staff-sidebar::-webkit-scrollbar,
.staff-table-wrap::-webkit-scrollbar,
.staff-detail-pane::-webkit-scrollbar,
.staff-subtabs::-webkit-scrollbar,
.staff-combobox-menu::-webkit-scrollbar,
.staff-dialog::-webkit-scrollbar,
.staff-shell::-webkit-scrollbar,
.staff-workspace::-webkit-scrollbar {
  width: 14px;
  height: 14px;
  background: #07180f;
}
.staff-event-list::-webkit-scrollbar-track,
.staff-select-list::-webkit-scrollbar-track,
.staff-list-pane::-webkit-scrollbar-track,
.staff-sidebar::-webkit-scrollbar-track,
.staff-table-wrap::-webkit-scrollbar-track,
.staff-detail-pane::-webkit-scrollbar-track,
.staff-subtabs::-webkit-scrollbar-track,
.staff-combobox-menu::-webkit-scrollbar-track,
.staff-dialog::-webkit-scrollbar-track,
.staff-shell::-webkit-scrollbar-track,
.staff-workspace::-webkit-scrollbar-track {
  margin: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, #06160d, #0a2116);
  box-shadow: inset 0 0 0 1px rgba(216,183,91,.09), inset 0 2px 6px rgba(0,0,0,.34);
}
.staff-event-list::-webkit-scrollbar-thumb,
.staff-select-list::-webkit-scrollbar-thumb,
.staff-list-pane::-webkit-scrollbar-thumb,
.staff-sidebar::-webkit-scrollbar-thumb,
.staff-table-wrap::-webkit-scrollbar-thumb,
.staff-detail-pane::-webkit-scrollbar-thumb,
.staff-subtabs::-webkit-scrollbar-thumb,
.staff-combobox-menu::-webkit-scrollbar-thumb,
.staff-dialog::-webkit-scrollbar-thumb,
.staff-shell::-webkit-scrollbar-thumb,
.staff-workspace::-webkit-scrollbar-thumb {
  min-height: 46px;
  border: 3px solid #07180f;
  border-radius: 999px;
  background: linear-gradient(180deg, #ddb95e, #8b6725);
  box-shadow: inset 0 1px rgba(255,255,255,.24), 0 0 8px rgba(214,175,62,.12);
}
.staff-event-list::-webkit-scrollbar-thumb:hover,
.staff-select-list::-webkit-scrollbar-thumb:hover,
.staff-list-pane::-webkit-scrollbar-thumb:hover,
.staff-sidebar::-webkit-scrollbar-thumb:hover,
.staff-table-wrap::-webkit-scrollbar-thumb:hover,
.staff-detail-pane::-webkit-scrollbar-thumb:hover,
.staff-subtabs::-webkit-scrollbar-thumb:hover,
.staff-combobox-menu::-webkit-scrollbar-thumb:hover,
.staff-dialog::-webkit-scrollbar-thumb:hover,
.staff-shell::-webkit-scrollbar-thumb:hover,
.staff-workspace::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #f1cf78, #a47a2e);
}
.staff-event-list::-webkit-scrollbar-corner,
.staff-select-list::-webkit-scrollbar-corner,
.staff-table-wrap::-webkit-scrollbar-corner,
.staff-subtabs::-webkit-scrollbar-corner { background: #07180f; }

/* Make the Staff dialog follow the same larger scale. */
.staff-dialog { width: min(610px, 94vw); padding: 29px; border-radius: 18px; }
.staff-dialog h3 { font-size: 25px; }
.staff-dialog p { font-size: 16px; line-height: 1.55; }
.staff-dialog input { min-height: 52px; margin-top: 20px; font-size: 16px; }
.staff-dialog-actions { gap: 12px; margin-top: 22px; }

/* Keep the larger desktop scale readable rather than tiny on common laptops. */
@media (max-width: 1500px) {
  .staff-shell { grid-template-columns: 330px minmax(0, 1fr); font-size: 16px; }
  .staff-shell::after { background: radial-gradient(circle at 50% 0%, rgba(94,134,83,.12), transparent 42%), radial-gradient(circle at 70% 32%, rgba(226,188,78,.035), transparent 26%), linear-gradient(90deg, rgba(2,10,6,.42) 0 330px, rgba(2,10,6,.03) 330px 100%); }
  .staff-sidebar { padding-left: 20px; padding-right: 20px; }
  .staff-page { padding-left: 28px; padding-right: 28px; }
  .staff-dashboard-grid { grid-template-columns: 1fr; }
  .staff-dashboard-grid > .staff-section { min-height: 0; }
  .staff-split-page { grid-template-columns: 370px minmax(0, 1fr); }
}

@media (max-width: 1100px) {
  .staff-shell { grid-template-columns: 1fr; }
  .staff-sidebar { position: relative; height: auto; overflow: visible; padding: 20px; }
  .staff-sidebar nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .staff-sidebar nav button { min-height: 56px; }
  .staff-user { margin-top: 10px; }
  .staff-topbar { position: relative; min-height: 0; padding: 20px 24px; }
  .staff-page { padding: 24px; }
  .staff-split-page { grid-template-columns: 1fr; }
  .staff-list-pane { position: relative; top: auto; max-height: 500px; }
  .staff-role-layout { grid-template-columns: 1fr; }
  .staff-top-profile-select { width: min(320px, 50vw); }
}

@media (max-width: 720px) {
  .staff-shell { font-size: 15px; }
  .staff-sidebar nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .staff-topbar { align-items: flex-start; flex-direction: column; }
  .staff-top-actions { width: 100%; }
  .staff-top-profile-select { width: 100%; }
  .staff-page { padding: 18px 15px 36px; }
  .staff-dashboard-welcome { padding: 22px; }
  .staff-dashboard-welcome h2 { font-size: 30px; }
  .staff-metric-grid { grid-template-columns: 1fr; }
  .staff-section > header { align-items: flex-start; flex-direction: column; }
  .staff-section-actions { justify-content: flex-start; width: 100%; }
  .staff-inline-actions { width: 100%; }
  .staff-inline-select { width: 100%; }
  .staff-form-grid.cols-2,
  .staff-form-grid.cols-3 { grid-template-columns: 1fr; }
}

/* ============================================================
   V220 — ACTIVE STAFF UI SCALE + NATIVE CONTROL ELIMINATION
   This file is linked directly from app/layout.tsx with a new URL,
   so no stale v216/v217 stylesheet can survive browser/Vercel cache.
   ============================================================ */

/* Global control reset inside every Staff surface. */
.staff-shell button,
.staff-access-screen button,
.staff-login-screen button,
.staff-dialog button,
.staff-shell input,
.staff-access-screen input,
.staff-login-screen input,
.staff-dialog input,
.staff-shell textarea,
.staff-access-screen textarea,
.staff-login-screen textarea,
.staff-dialog textarea {
  box-sizing: border-box;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
}

/* Numeric admin fields are text controls in JSX now, so browser spinner arrows
   cannot exist at all. Keep a dedicated selector for consistent alignment. */
.staff-shell input[data-staff-number="true"],
.staff-shell .staff-number-input {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: textfield !important;
  background-image: none !important;
  padding-right: 16px !important;
}

/* Kill scrollbar arrow buttons/corners in Chromium/Windows. */
.staff-shell *::-webkit-scrollbar-button,
.staff-shell::-webkit-scrollbar-button,
.staff-access-screen *::-webkit-scrollbar-button,
.staff-login-screen *::-webkit-scrollbar-button,
.staff-dialog::-webkit-scrollbar-button,
html:has(.staff-shell)::-webkit-scrollbar-button,
body:has(.staff-shell)::-webkit-scrollbar-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}
.staff-shell *::-webkit-scrollbar-corner,
.staff-shell::-webkit-scrollbar-corner,
.staff-access-screen *::-webkit-scrollbar-corner,
.staff-login-screen *::-webkit-scrollbar-corner,
.staff-dialog::-webkit-scrollbar-corner,
html:has(.staff-shell)::-webkit-scrollbar-corner,
body:has(.staff-shell)::-webkit-scrollbar-corner {
  background: #06150d !important;
}

/* Recent Events gets an explicit, unmistakably custom rail. */
.staff-event-list {
  scrollbar-width: auto !important;
  scrollbar-color: #d2a844 #07180f !important;
  scrollbar-gutter: stable;
  padding-right: 8px;
}
.staff-event-list::-webkit-scrollbar { width: 16px !important; }
.staff-event-list::-webkit-scrollbar-track {
  margin: 6px 0;
  border: 1px solid rgba(216,183,91,.16);
  border-radius: 999px;
  background: linear-gradient(180deg,#06150d,#0a2417) !important;
  box-shadow: inset 0 2px 7px rgba(0,0,0,.5);
}
.staff-event-list::-webkit-scrollbar-thumb {
  min-height: 54px;
  border: 4px solid #07180f !important;
  border-radius: 999px;
  background: linear-gradient(180deg,#efca6c,#a77b28) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.28),0 0 9px rgba(220,178,59,.18);
}
.staff-event-list::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg,#ffe08a,#bd8e31) !important;
}

/* Make every custom combobox visibly themed; no black browser select fallback. */
.staff-combobox { min-width: 0; }
.staff-combobox-trigger {
  min-height: 58px !important;
  padding: 13px 16px !important;
  border: 1px solid rgba(217,181,69,.46) !important;
  border-radius: 13px !important;
  background:
    radial-gradient(circle at 92% 0%, rgba(213,174,61,.10), transparent 32%),
    linear-gradient(180deg, rgba(20,54,35,.98), rgba(7,27,17,.98)) !important;
  color: #f0ead8 !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  box-shadow: inset 0 1px rgba(255,255,255,.045), 0 5px 15px rgba(0,0,0,.18) !important;
}
.staff-combobox-trigger:hover:not(:disabled) {
  border-color: rgba(240,202,90,.72) !important;
  background: linear-gradient(180deg, rgba(28,68,45,.99), rgba(9,34,21,.99)) !important;
}
.staff-combobox-menu {
  max-height: 390px !important;
  padding: 9px !important;
  border: 1px solid rgba(231,193,79,.54) !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg,#123321,#071a10) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.62), inset 0 1px rgba(255,255,255,.04) !important;
}
.staff-combobox-menu button {
  min-height: 53px !important;
  padding: 12px 14px !important;
  border-radius: 10px !important;
  color: #dbe4d6 !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  background: transparent !important;
}
.staff-combobox-menu button:hover,
.staff-combobox-menu button:focus-visible {
  color: #fff1bd !important;
  background: linear-gradient(90deg,rgba(187,145,45,.28),rgba(48,91,60,.22)) !important;
}
.staff-combobox-menu button.is-selected {
  color: #ffe59b !important;
  background: linear-gradient(90deg,rgba(187,145,45,.35),rgba(45,84,55,.25)) !important;
}

/* ------------------------------------------------------------
   V220 larger desktop scale: dimensions, spacing AND typography.
   ------------------------------------------------------------ */
.staff-shell {
  grid-template-columns: 390px minmax(0,1fr) !important;
  font-size: 20px !important;
}
.staff-shell::after {
  background:
    radial-gradient(circle at 50% 0%,rgba(94,134,83,.12),transparent 42%),
    radial-gradient(circle at 70% 32%,rgba(226,188,78,.035),transparent 26%),
    linear-gradient(90deg,rgba(2,10,6,.42) 0 390px,rgba(2,10,6,.03) 390px 100%) !important;
}
.staff-sidebar { gap: 16px !important; padding: 38px 28px 26px !important; }
.staff-brand { min-height: 92px !important; padding: 15px 15px 15px 78px !important; }
.staff-brand::before { width: 56px !important; height: 56px !important; font-size: 28px !important; }
.staff-brand strong { font-size: 31px !important; }
.staff-brand span { margin-top: 10px !important; font-size: 16px !important; }
.staff-sidebar nav { gap: 9px !important; }
.staff-sidebar nav button {
  min-height: 66px !important;
  grid-template-columns: 46px minmax(0,1fr) !important;
  gap: 14px !important;
  padding: 12px 15px !important;
  border-radius: 14px !important;
  font-size: 19px !important;
}
.staff-nav-icon { width: 42px !important; height: 42px !important; border-radius: 12px !important; font-size: 24px !important; }
.staff-user { min-height: 86px !important; padding: 17px 16px 17px 58px !important; border-radius: 14px !important; }
.staff-user strong { font-size: 19px !important; }
.staff-user span { font-size: 16px !important; }
.staff-exit { min-height: 58px !important; padding: 14px 17px !important; border-radius: 13px !important; font-size: 16px !important; }

.staff-topbar { min-height: 138px !important; gap: 34px !important; padding: 24px 44px 23px !important; }
.staff-topbar h1 { font-size: clamp(40px,2.55vw,50px) !important; }
.staff-topbar-eyebrow { font-size: 16px !important; }
.staff-topbar p { font-size: 18px !important; }
.staff-top-actions { gap: 13px !important; }
.staff-top-profile-select { width: 330px !important; }

.staff-page { width: min(100%,2200px) !important; padding: 42px 44px 68px !important; }
.staff-toast { top: 148px !important; margin: 17px 44px 0 !important; padding: 18px 22px !important; font-size: 17px !important; }
.staff-dashboard-welcome { min-height: 190px !important; padding: 32px 35px !important; border-radius: 20px !important; }
.staff-dashboard-kicker { font-size: 16px !important; }
.staff-dashboard-welcome h2 { font-size: clamp(39px,2.55vw,48px) !important; }
.staff-dashboard-welcome p { font-size: 19px !important; }
.staff-dashboard-badge { min-width: 210px !important; padding: 17px 19px !important; }
.staff-dashboard-badge span { font-size: 16px !important; }
.staff-dashboard-badge small { font-size: 15px !important; }

.staff-metric-grid { gap: 20px !important; margin-bottom: 30px !important; }
.staff-metric-card,
.staff-metric-grid > div { min-height: 225px !important; padding: 30px 27px 27px !important; border-radius: 20px !important; }
.staff-metric-card::before { width: 66px !important; height: 66px !important; font-size: 35px !important; }
.staff-metric-grid span { margin-bottom: 13px !important; font-size: 16px !important; }
.staff-metric-grid strong { font-size: clamp(42px,2.55vw,54px) !important; }
.staff-metric-grid small { margin-top: 14px !important; font-size: 16px !important; }

.staff-dashboard-grid { gap: 26px !important; }
.staff-section,
.staff-list-pane,
.staff-card-editor { border-radius: 19px !important; }
.staff-section { margin-bottom: 27px !important; }
.staff-section > header { min-height: 108px !important; gap: 24px !important; padding: 27px 29px 23px !important; }
.staff-section > header h3 { font-size: 28px !important; }
.staff-section > header p { margin-top: 8px !important; font-size: 17px !important; }
.staff-section > :not(header) { margin-left: 29px !important; margin-right: 29px !important; }
.staff-section > :last-child { margin-bottom: 29px !important; }

.staff-btn { min-height: 54px !important; padding: 12px 18px !important; border-radius: 12px !important; font-size: 17px !important; }
.staff-pane-head { gap: 13px !important; padding: 18px !important; }
.staff-select-list { padding: 15px !important; }
.staff-select-list button { min-height: 84px !important; padding: 19px 20px !important; border-radius: 14px !important; }
.staff-select-list strong { font-size: 19px !important; }
.staff-select-list span { font-size: 17px !important; }
.staff-select-list small { font-size: 15px !important; }

.staff-form-grid { gap: 19px !important; }
.staff-field { gap: 8px !important; }
.staff-field > span { font-size: 16px !important; }
.staff-field input,
.staff-field textarea,
.staff-shell input:not([type="checkbox"]),
.staff-shell textarea {
  min-height: 58px !important;
  padding: 13px 16px !important;
  border-radius: 12px !important;
  font-size: 18px !important;
}
.staff-field textarea { min-height: 155px !important; }
.staff-toggle { min-height: 70px !important; gap: 15px !important; padding: 15px 18px !important; border-radius: 14px !important; font-size: 18px !important; }
.staff-toggle i { width: 58px !important; height: 32px !important; }
.staff-toggle i::after { width: 24px !important; height: 24px !important; top: 3px !important; left: 4px !important; }
.staff-toggle input:checked + i::after { transform: translateX(26px) !important; }

.staff-table-wrap table { font-size: 18px !important; }
.staff-table-wrap th { padding: 19px 20px !important; font-size: 16px !important; }
.staff-table-wrap td { padding: 19px 20px !important; }
.staff-list { gap: 11px !important; }
.staff-list-row { min-height: 70px !important; gap: 22px !important; padding: 19px 21px !important; font-size: 18px !important; border-radius: 13px !important; }
.staff-list-row small { font-size: 16px !important; }
.staff-list-row > time { font-size: 15px !important; }
.staff-event-list { max-height: 690px !important; }
.staff-chip-grid span { padding: 11px 14px !important; font-size: 16px !important; }
.staff-subtabs button { min-height: 54px !important; padding: 13px 18px !important; font-size: 16px !important; }
.staff-stat-row > div { min-height: 72px !important; padding: 14px 16px !important; }
.staff-stat-row > div span { font-size: 15px !important; }
.staff-stat-row strong { font-size: 21px !important; }
.staff-stat-row > span { font-size: 17px !important; }
.staff-profile-grid { gap: 20px !important; margin: 24px 29px !important; }
.staff-profile-grid > div,
.staff-profile-grid article { padding: 22px !important; border-radius: 16px !important; }
.staff-profile-grid h3 { font-size: 22px !important; }
.staff-profile-grid p { font-size: 17px !important; }
.staff-profile-grid header strong { font-size: 20px !important; }
.staff-permission-group h4 { padding: 17px 20px !important; font-size: 16px !important; }
.staff-permission-group label { min-height: 74px !important; padding: 15px 18px !important; }
.staff-permission-group strong { font-size: 18px !important; }
.staff-permission-group small { font-size: 16px !important; }
.staff-permission-group input[type="checkbox"] { width: 31px !important; height: 31px !important; flex-basis: 31px !important; }
.staff-pill { min-height: 36px !important; padding: 7px 13px !important; font-size: 15px !important; }

.staff-dialog { width: min(690px,94vw) !important; padding: 34px !important; border-radius: 21px !important; }
.staff-dialog-kicker { font-size: 13px !important; }
.staff-dialog h3 { font-size: 29px !important; }
.staff-dialog p { font-size: 18px !important; }
.staff-dialog input { min-height: 60px !important; font-size: 18px !important; }

@media (max-width: 1500px) {
  .staff-shell { grid-template-columns: 360px minmax(0,1fr) !important; font-size: 18px !important; }
  .staff-shell::after { background: linear-gradient(90deg,rgba(2,10,6,.42) 0 360px,rgba(2,10,6,.03) 360px 100%) !important; }
  .staff-page { padding-left: 32px !important; padding-right: 32px !important; }
  .staff-split-page { grid-template-columns: 410px minmax(0,1fr) !important; }
}
@media (max-width: 1100px) {
  .staff-shell { grid-template-columns: 1fr !important; }
  .staff-sidebar nav button { min-height: 62px !important; }
  .staff-top-profile-select { width: min(380px,55vw) !important; }
}
@media (max-width: 720px) {
  .staff-shell { font-size: 17px !important; }
  .staff-page { padding: 22px 16px 42px !important; }
  .staff-dashboard-welcome h2 { font-size: 34px !important; }
  .staff-field input,
  .staff-field textarea,
  .staff-shell input:not([type="checkbox"]),
  .staff-shell textarea { font-size: 17px !important; }
}

/* ------------------------------------------------------------
   V221 balanced scale — keeps V220 readability and custom controls,
   while reducing the overall desktop footprint by roughly 10–15%.
   ------------------------------------------------------------ */
.staff-shell {
  grid-template-columns: 350px minmax(0,1fr) !important;
  font-size: 18px !important;
}
.staff-shell::after {
  background:
    radial-gradient(circle at 50% 0%,rgba(94,134,83,.12),transparent 42%),
    radial-gradient(circle at 70% 32%,rgba(226,188,78,.035),transparent 26%),
    linear-gradient(90deg,rgba(2,10,6,.42) 0 350px,rgba(2,10,6,.03) 350px 100%) !important;
}
.staff-sidebar { gap: 13px !important; padding: 32px 23px 22px !important; }
.staff-brand { min-height: 82px !important; padding: 12px 12px 12px 68px !important; }
.staff-brand::before { width: 50px !important; height: 50px !important; font-size: 25px !important; }
.staff-brand strong { font-size: 27px !important; }
.staff-brand span { margin-top: 8px !important; font-size: 14px !important; }
.staff-sidebar nav { gap: 7px !important; }
.staff-sidebar nav button {
  min-height: 58px !important;
  grid-template-columns: 39px minmax(0,1fr) !important;
  gap: 12px !important;
  padding: 10px 13px !important;
  border-radius: 12px !important;
  font-size: 17px !important;
}
.staff-nav-icon { width: 36px !important; height: 36px !important; border-radius: 10px !important; font-size: 21px !important; }
.staff-user { min-height: 76px !important; padding: 14px 14px 14px 51px !important; border-radius: 13px !important; }
.staff-user strong { font-size: 17px !important; }
.staff-user span { font-size: 14px !important; }
.staff-exit { min-height: 50px !important; padding: 12px 15px !important; border-radius: 11px !important; font-size: 14px !important; }

.staff-topbar { min-height: 122px !important; gap: 28px !important; padding: 21px 36px 20px !important; }
.staff-topbar h1 { font-size: clamp(36px,2.3vw,44px) !important; }
.staff-topbar-eyebrow { font-size: 14px !important; }
.staff-topbar p { font-size: 16px !important; }
.staff-top-actions { gap: 11px !important; }
.staff-top-profile-select { width: 292px !important; }

.staff-page { width: min(100%,2100px) !important; padding: 36px 36px 58px !important; }
.staff-toast { top: 132px !important; margin: 14px 36px 0 !important; padding: 15px 19px !important; font-size: 15px !important; }
.staff-dashboard-welcome { min-height: 168px !important; padding: 27px 30px !important; border-radius: 18px !important; }
.staff-dashboard-kicker { font-size: 14px !important; }
.staff-dashboard-welcome h2 { font-size: clamp(35px,2.3vw,43px) !important; }
.staff-dashboard-welcome p { font-size: 17px !important; }
.staff-dashboard-badge { min-width: 185px !important; padding: 14px 16px !important; }
.staff-dashboard-badge span { font-size: 14px !important; }
.staff-dashboard-badge small { font-size: 13px !important; }

.staff-metric-grid { gap: 17px !important; margin-bottom: 25px !important; }
.staff-metric-card,
.staff-metric-grid > div { min-height: 195px !important; padding: 25px 23px 23px !important; border-radius: 17px !important; }
.staff-metric-card::before { width: 58px !important; height: 58px !important; font-size: 30px !important; }
.staff-metric-grid span { margin-bottom: 11px !important; font-size: 14px !important; }
.staff-metric-grid strong { font-size: clamp(38px,2.3vw,48px) !important; }
.staff-metric-grid small { margin-top: 11px !important; font-size: 14px !important; }

.staff-dashboard-grid { gap: 22px !important; }
.staff-section,
.staff-list-pane,
.staff-card-editor { border-radius: 17px !important; }
.staff-section { margin-bottom: 23px !important; }
.staff-section > header { min-height: 94px !important; gap: 20px !important; padding: 23px 25px 20px !important; }
.staff-section > header h3 { font-size: 25px !important; }
.staff-section > header p { margin-top: 6px !important; font-size: 15px !important; }
.staff-section > :not(header) { margin-left: 25px !important; margin-right: 25px !important; }
.staff-section > :last-child { margin-bottom: 25px !important; }

.staff-btn { min-height: 48px !important; padding: 10px 16px !important; border-radius: 11px !important; font-size: 15px !important; }
.staff-pane-head { gap: 11px !important; padding: 15px !important; }
.staff-select-list { padding: 13px !important; }
.staff-select-list button { min-height: 74px !important; padding: 16px 17px !important; border-radius: 12px !important; }
.staff-select-list strong { font-size: 17px !important; }
.staff-select-list span { font-size: 15px !important; }
.staff-select-list small { font-size: 13px !important; }

.staff-form-grid { gap: 16px !important; }
.staff-field { gap: 7px !important; }
.staff-field > span { font-size: 14px !important; }
.staff-field input,
.staff-field textarea,
.staff-shell input:not([type="checkbox"]),
.staff-shell textarea {
  min-height: 51px !important;
  padding: 11px 14px !important;
  border-radius: 11px !important;
  font-size: 16px !important;
}
.staff-field textarea { min-height: 135px !important; }
.staff-toggle { min-height: 61px !important; gap: 13px !important; padding: 13px 16px !important; border-radius: 12px !important; font-size: 16px !important; }
.staff-toggle i { width: 51px !important; height: 28px !important; }
.staff-toggle i::after { width: 21px !important; height: 21px !important; top: 3px !important; left: 4px !important; }
.staff-toggle input:checked + i::after { transform: translateX(22px) !important; }

.staff-table-wrap table { font-size: 16px !important; }
.staff-table-wrap th { padding: 16px 17px !important; font-size: 14px !important; }
.staff-table-wrap td { padding: 16px 17px !important; }
.staff-list { gap: 9px !important; }
.staff-list-row { min-height: 61px !important; gap: 18px !important; padding: 16px 18px !important; font-size: 16px !important; border-radius: 12px !important; }
.staff-list-row small { font-size: 14px !important; }
.staff-list-row > time { font-size: 13px !important; }
.staff-event-list { max-height: 620px !important; }
.staff-chip-grid span { padding: 9px 12px !important; font-size: 14px !important; }
.staff-subtabs button { min-height: 48px !important; padding: 11px 16px !important; font-size: 14px !important; }
.staff-stat-row > div { min-height: 64px !important; padding: 12px 14px !important; }
.staff-stat-row > div span { font-size: 13px !important; }
.staff-stat-row strong { font-size: 19px !important; }
.staff-stat-row > span { font-size: 15px !important; }
.staff-profile-grid { gap: 17px !important; margin: 20px 25px !important; }
.staff-profile-grid > div,
.staff-profile-grid article { padding: 19px !important; border-radius: 14px !important; }
.staff-profile-grid h3 { font-size: 20px !important; }
.staff-profile-grid p { font-size: 15px !important; }
.staff-profile-grid header strong { font-size: 18px !important; }
.staff-permission-group h4 { padding: 14px 17px !important; font-size: 14px !important; }
.staff-permission-group label { min-height: 65px !important; padding: 13px 15px !important; }
.staff-permission-group strong { font-size: 16px !important; }
.staff-permission-group small { font-size: 14px !important; }
.staff-permission-group input[type="checkbox"] { width: 28px !important; height: 28px !important; flex-basis: 28px !important; }
.staff-pill { min-height: 32px !important; padding: 6px 11px !important; font-size: 13px !important; }

.staff-dialog { width: min(630px,94vw) !important; padding: 29px !important; border-radius: 18px !important; }
.staff-dialog-kicker { font-size: 12px !important; }
.staff-dialog h3 { font-size: 26px !important; }
.staff-dialog p { font-size: 16px !important; }
.staff-dialog input { min-height: 53px !important; font-size: 16px !important; }

/* Preserve the fully custom dropdowns, just make them match the balanced scale. */
.staff-combobox-trigger {
  min-height: 51px !important;
  padding: 11px 14px !important;
  border-radius: 11px !important;
  font-size: 15px !important;
}
.staff-combobox-menu { max-height: 340px !important; padding: 8px !important; border-radius: 12px !important; }
.staff-combobox-menu button { min-height: 47px !important; padding: 10px 12px !important; border-radius: 9px !important; font-size: 14px !important; }

@media (max-width: 1500px) {
  .staff-shell { grid-template-columns: 325px minmax(0,1fr) !important; font-size: 17px !important; }
  .staff-shell::after { background: linear-gradient(90deg,rgba(2,10,6,.42) 0 325px,rgba(2,10,6,.03) 325px 100%) !important; }
  .staff-sidebar { padding-left: 19px !important; padding-right: 19px !important; }
  .staff-page { padding-left: 28px !important; padding-right: 28px !important; }
  .staff-split-page { grid-template-columns: 370px minmax(0,1fr) !important; }
}
@media (max-width: 1100px) {
  .staff-shell { grid-template-columns: 1fr !important; }
  .staff-sidebar nav button { min-height: 55px !important; }
  .staff-top-profile-select { width: min(340px,55vw) !important; }
}
@media (max-width: 720px) {
  .staff-shell { font-size: 16px !important; }
  .staff-page { padding: 20px 14px 38px !important; }
  .staff-dashboard-welcome h2 { font-size: 31px !important; }
  .staff-field input,
  .staff-field textarea,
  .staff-shell input:not([type="checkbox"]),
  .staff-shell textarea { font-size: 16px !important; }
}

/* ------------------------------------------------------------
   V222 slightly more compact scale — one step smaller than V221
   while preserving readability and all custom controls.
   ------------------------------------------------------------ */
.staff-shell {
  grid-template-columns: 325px minmax(0,1fr) !important;
  font-size: 17px !important;
}
.staff-shell::after {
  background:
    radial-gradient(circle at 50% 0%,rgba(94,134,83,.12),transparent 42%),
    radial-gradient(circle at 70% 32%,rgba(226,188,78,.035),transparent 26%),
    linear-gradient(90deg,rgba(2,10,6,.42) 0 325px,rgba(2,10,6,.03) 325px 100%) !important;
}
.staff-sidebar { gap: 11px !important; padding: 28px 20px 19px !important; }
.staff-brand { min-height: 75px !important; padding: 10px 10px 10px 62px !important; }
.staff-brand::before { width: 46px !important; height: 46px !important; font-size: 23px !important; }
.staff-brand strong { font-size: 25px !important; }
.staff-brand span { margin-top: 7px !important; font-size: 13px !important; }
.staff-sidebar nav { gap: 6px !important; }
.staff-sidebar nav button {
  min-height: 53px !important;
  grid-template-columns: 36px minmax(0,1fr) !important;
  gap: 10px !important;
  padding: 9px 12px !important;
  border-radius: 11px !important;
  font-size: 16px !important;
}
.staff-nav-icon { width: 33px !important; height: 33px !important; border-radius: 9px !important; font-size: 19px !important; }
.staff-user { min-height: 70px !important; padding: 13px 13px 13px 47px !important; border-radius: 12px !important; }
.staff-user strong { font-size: 16px !important; }
.staff-user span { font-size: 13px !important; }
.staff-exit { min-height: 46px !important; padding: 10px 14px !important; border-radius: 10px !important; font-size: 13px !important; }

.staff-topbar { min-height: 112px !important; gap: 24px !important; padding: 19px 31px 18px !important; }
.staff-topbar h1 { font-size: clamp(33px,2.15vw,41px) !important; }
.staff-topbar-eyebrow { font-size: 13px !important; }
.staff-topbar p { font-size: 15px !important; }
.staff-top-actions { gap: 10px !important; }
.staff-top-profile-select { width: 270px !important; }

.staff-page { width: min(100%,2050px) !important; padding: 31px 31px 51px !important; }
.staff-toast { top: 121px !important; margin: 12px 31px 0 !important; padding: 14px 17px !important; font-size: 14px !important; }
.staff-dashboard-welcome { min-height: 154px !important; padding: 24px 27px !important; border-radius: 16px !important; }
.staff-dashboard-kicker { font-size: 13px !important; }
.staff-dashboard-welcome h2 { font-size: clamp(32px,2.15vw,40px) !important; }
.staff-dashboard-welcome p { font-size: 16px !important; }
.staff-dashboard-badge { min-width: 170px !important; padding: 13px 15px !important; }
.staff-dashboard-badge span { font-size: 13px !important; }
.staff-dashboard-badge small { font-size: 12px !important; }

.staff-metric-grid { gap: 15px !important; margin-bottom: 22px !important; }
.staff-metric-card,
.staff-metric-grid > div { min-height: 178px !important; padding: 22px 21px 20px !important; border-radius: 16px !important; }
.staff-metric-card::before { width: 53px !important; height: 53px !important; font-size: 28px !important; }
.staff-metric-grid span { margin-bottom: 10px !important; font-size: 13px !important; }
.staff-metric-grid strong { font-size: clamp(35px,2.15vw,44px) !important; }
.staff-metric-grid small { margin-top: 10px !important; font-size: 13px !important; }

.staff-dashboard-grid { gap: 19px !important; }
.staff-section,
.staff-list-pane,
.staff-card-editor { border-radius: 16px !important; }
.staff-section { margin-bottom: 20px !important; }
.staff-section > header { min-height: 86px !important; gap: 18px !important; padding: 20px 22px 18px !important; }
.staff-section > header h3 { font-size: 23px !important; }
.staff-section > header p { margin-top: 5px !important; font-size: 14px !important; }
.staff-section > :not(header) { margin-left: 22px !important; margin-right: 22px !important; }
.staff-section > :last-child { margin-bottom: 22px !important; }

.staff-btn { min-height: 44px !important; padding: 9px 14px !important; border-radius: 10px !important; font-size: 14px !important; }
.staff-pane-head { gap: 10px !important; padding: 13px !important; }
.staff-select-list { padding: 11px !important; }
.staff-select-list button { min-height: 68px !important; padding: 14px 15px !important; border-radius: 11px !important; }
.staff-select-list strong { font-size: 16px !important; }
.staff-select-list span { font-size: 14px !important; }
.staff-select-list small { font-size: 12px !important; }

.staff-form-grid { gap: 14px !important; }
.staff-field { gap: 6px !important; }
.staff-field > span { font-size: 13px !important; }
.staff-field input,
.staff-field textarea,
.staff-shell input:not([type="checkbox"]),
.staff-shell textarea {
  min-height: 47px !important;
  padding: 10px 13px !important;
  border-radius: 10px !important;
  font-size: 15px !important;
}
.staff-field textarea { min-height: 124px !important; }
.staff-toggle { min-height: 56px !important; gap: 12px !important; padding: 12px 14px !important; border-radius: 11px !important; font-size: 15px !important; }
.staff-toggle i { width: 47px !important; height: 26px !important; }
.staff-toggle i::after { width: 19px !important; height: 19px !important; top: 3px !important; left: 4px !important; }
.staff-toggle input:checked + i::after { transform: translateX(20px) !important; }

.staff-table-wrap table { font-size: 15px !important; }
.staff-table-wrap th { padding: 14px 15px !important; font-size: 13px !important; }
.staff-table-wrap td { padding: 14px 15px !important; }
.staff-list { gap: 8px !important; }
.staff-list-row { min-height: 56px !important; gap: 16px !important; padding: 14px 16px !important; font-size: 15px !important; border-radius: 11px !important; }
.staff-list-row small { font-size: 13px !important; }
.staff-list-row > time { font-size: 12px !important; }
.staff-event-list { max-height: 570px !important; }
.staff-chip-grid span { padding: 8px 11px !important; font-size: 13px !important; }
.staff-subtabs button { min-height: 44px !important; padding: 10px 14px !important; font-size: 13px !important; }
.staff-stat-row > div { min-height: 59px !important; padding: 11px 13px !important; }
.staff-stat-row > div span { font-size: 12px !important; }
.staff-stat-row strong { font-size: 18px !important; }
.staff-stat-row > span { font-size: 14px !important; }
.staff-profile-grid { gap: 15px !important; margin: 18px 22px !important; }
.staff-profile-grid > div,
.staff-profile-grid article { padding: 17px !important; border-radius: 13px !important; }
.staff-profile-grid h3 { font-size: 19px !important; }
.staff-profile-grid p { font-size: 14px !important; }
.staff-profile-grid header strong { font-size: 17px !important; }
.staff-permission-group h4 { padding: 13px 15px !important; font-size: 13px !important; }
.staff-permission-group label { min-height: 59px !important; padding: 12px 14px !important; }
.staff-permission-group strong { font-size: 15px !important; }
.staff-permission-group small { font-size: 13px !important; }
.staff-permission-group input[type="checkbox"] { width: 25px !important; height: 25px !important; flex-basis: 25px !important; }
.staff-pill { min-height: 29px !important; padding: 5px 10px !important; font-size: 12px !important; }

.staff-dialog { width: min(590px,94vw) !important; padding: 26px !important; border-radius: 16px !important; }
.staff-dialog-kicker { font-size: 11px !important; }
.staff-dialog h3 { font-size: 24px !important; }
.staff-dialog p { font-size: 15px !important; }
.staff-dialog input { min-height: 49px !important; font-size: 15px !important; }

.staff-combobox-trigger {
  min-height: 47px !important;
  padding: 10px 13px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
}
.staff-combobox-menu { max-height: 315px !important; padding: 7px !important; border-radius: 11px !important; }
.staff-combobox-menu button { min-height: 43px !important; padding: 9px 11px !important; border-radius: 8px !important; font-size: 13px !important; }

@media (max-width: 1500px) {
  .staff-shell { grid-template-columns: 300px minmax(0,1fr) !important; font-size: 16px !important; }
  .staff-shell::after { background: linear-gradient(90deg,rgba(2,10,6,.42) 0 300px,rgba(2,10,6,.03) 300px 100%) !important; }
  .staff-sidebar { padding-left: 17px !important; padding-right: 17px !important; }
  .staff-page { padding-left: 25px !important; padding-right: 25px !important; }
  .staff-split-page { grid-template-columns: 345px minmax(0,1fr) !important; }
}
@media (max-width: 1100px) {
  .staff-shell { grid-template-columns: 1fr !important; }
  .staff-sidebar nav button { min-height: 51px !important; }
  .staff-top-profile-select { width: min(315px,55vw) !important; }
}
@media (max-width: 720px) {
  .staff-shell { font-size: 15px !important; }
  .staff-page { padding: 18px 13px 34px !important; }
  .staff-dashboard-welcome h2 { font-size: 29px !important; }
  .staff-field input,
  .staff-field textarea,
  .staff-shell input:not([type="checkbox"]),
  .staff-shell textarea { font-size: 15px !important; }
}


/* =========================================================
   Staff Panel v223 — supplied art assets
   title.png / selector.png / admborder.png
   ========================================================= */

/* Replace the old icon + STAFF PANEL / Bryer's Hideout text block with title.png. */
.staff-brand {
  min-height: 92px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 4px 18px !important;
  overflow: visible !important;
}

.staff-brand::before,
.staff-brand > div,
.staff-brand > strong,
.staff-brand > span {
  display: none !important;
}

.staff-brand .staff-brand-title {
  display: block !important;
  width: min(100%, 236px) !important;
  max-width: 236px !important;
  height: auto !important;
  max-height: 82px !important;
  flex: 0 1 auto !important;
  object-fit: contain !important;
  object-position: center !important;
  filter: drop-shadow(0 7px 14px rgba(0,0,0,.34)) !important;
}

/* Active page selector uses selector.png, with all labels/icons above the art layer. */
.staff-sidebar nav button {
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;
}

.staff-sidebar nav button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background: url("/images/selector.png") center / 100% 100% no-repeat;
  transition: opacity .16s ease, filter .16s ease;
}

.staff-sidebar nav button > .staff-nav-icon,
.staff-sidebar nav button > .staff-nav-label {
  position: relative !important;
  z-index: 2 !important;
}

.staff-sidebar nav button.is-active {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.staff-sidebar nav button.is-active::before {
  opacity: 1;
  filter: drop-shadow(0 7px 14px rgba(0,0,0,.18));
}

.staff-sidebar nav button.is-active:hover::before {
  filter: brightness(1.06) drop-shadow(0 7px 14px rgba(0,0,0,.20));
}

/* admborder.png becomes the visible contour/frame for Staff Panel surfaces. */
.staff-section,
.staff-list-pane,
.staff-detail-pane,
.staff-dashboard-welcome,
.staff-metric-card,
.staff-loading,
.staff-dialog,
.staff-role-editor,
.staff-profile-grid > div,
.staff-profile-grid > article {
  position: relative !important;
  border-color: transparent !important;
}

.staff-section::after,
.staff-list-pane::after,
.staff-detail-pane::after,
.staff-dashboard-welcome::after,
.staff-metric-card::after,
.staff-loading::after,
.staff-dialog::after,
.staff-role-editor::after,
.staff-profile-grid > div::after,
.staff-profile-grid > article::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 30;
  pointer-events: none;
  background: url("/images/admborder.png") center / 100% 100% no-repeat;
  border-radius: inherit;
}

/* Keep controls/content above panel backgrounds while the frame stays non-interactive. */
.staff-section > *,
.staff-list-pane > *,
.staff-detail-pane > *,
.staff-dashboard-welcome > *,
.staff-metric-card > *,
.staff-loading > *,
.staff-dialog > *,
.staff-role-editor > *,
.staff-profile-grid > div > *,
.staff-profile-grid > article > * {
  position: relative;
  z-index: 1;
}

/* The frame is ornamental only; opened custom menus must remain above it. */
.staff-combobox.is-open,
.staff-combobox-menu,
.staff-toast {
  z-index: 80 !important;
}

@media (max-width: 820px) {
  .staff-brand {
    min-height: auto !important;
    padding: 5px 2px 11px !important;
  }

  .staff-brand .staff-brand-title {
    width: min(100%, 190px) !important;
    max-height: 68px !important;
  }
}

/* =========================================================
   Staff Panel v224 — art placement refinement
   title.png / selector.png / admborder.png / admborder2.png / miniborder.png
   ========================================================= */

/* Sidebar art frame. admborder2.png is the visible outer contour. */
.staff-sidebar {
  --staff-sidebar-pad-x: 20px;
  border-right-color: transparent !important;
  background:
    url("/images/admborder2.png") center / 100% 100% no-repeat,
    linear-gradient(180deg, rgba(8, 28, 18, .97), rgba(5, 20, 13, .98)),
    radial-gradient(circle at 30% 0%, rgba(205, 169, 65, .08), transparent 34%) !important;
}

/* title.png now fills the complete usable width of the sidebar. */
.staff-brand {
  width: calc(100% + var(--staff-sidebar-pad-x) + var(--staff-sidebar-pad-x)) !important;
  min-height: 0 !important;
  margin: 0 calc(-1 * var(--staff-sidebar-pad-x)) 8px !important;
  padding: 0 0 13px !important;
  border-bottom: 0 !important;
  justify-content: stretch !important;
}
.staff-brand::after { display: none !important; }
.staff-brand .staff-brand-title {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* One physical selector element slides between buttons instead of being recreated. */
.staff-sidebar nav {
  position: relative !important;
  isolation: isolate !important;
}
.staff-nav-selector {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  background: url("/images/selector.png") center / 100% 100% no-repeat;
  filter: drop-shadow(0 7px 14px rgba(0,0,0,.20));
  transition:
    top .30s cubic-bezier(.22,.78,.22,1),
    left .30s cubic-bezier(.22,.78,.22,1),
    width .22s ease,
    height .22s ease,
    opacity .12s ease,
    filter .16s ease;
  will-change: top, left, width, height;
}
.staff-nav-selector.is-visible { opacity: 1; }
.staff-sidebar nav button {
  position: relative !important;
  z-index: 1 !important;
  background: transparent !important;
}
.staff-sidebar nav button::before { content: none !important; display: none !important; }
.staff-sidebar nav button.is-active {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: #ffe6a0 !important;
}
.staff-sidebar nav button.is-active .staff-nav-label {
  color: #ffe7a2 !important;
  text-shadow:
    0 0 4px rgba(255, 226, 132, .98),
    0 0 10px rgba(239, 191, 64, .88),
    0 0 20px rgba(218, 155, 24, .58) !important;
}
.staff-sidebar nav button.is-active .staff-nav-icon {
  color: #fff0b8 !important;
  text-shadow:
    0 0 4px rgba(255, 235, 164, 1),
    0 0 10px rgba(240, 190, 57, .92),
    0 0 19px rgba(217, 151, 20, .62) !important;
  box-shadow: none !important;
  background: transparent !important;
  border-color: transparent !important;
}

/* Undo the v223 blanket art-frame rule. Large panels return to their manual border. */
.staff-section,
.staff-list-pane,
.staff-detail-pane,
.staff-dashboard-welcome,
.staff-loading,
.staff-dialog,
.staff-role-editor,
.staff-profile-grid > div,
.staff-profile-grid > article {
  border-color: rgba(214, 182, 92, .18) !important;
}
.staff-dashboard-welcome { border-color: rgba(216, 184, 92, .22) !important; }
.staff-danger-wrap .staff-section { border-color: rgba(170, 77, 63, .22) !important; }

.staff-section::after,
.staff-list-pane::after,
.staff-detail-pane::after,
.staff-dashboard-welcome::after,
.staff-loading::after,
.staff-dialog::after,
.staff-role-editor::after,
.staff-profile-grid > div::after,
.staff-profile-grid > article::after,
.staff-metric-card::after {
  content: none !important;
  display: none !important;
}

/* admborder.png is reserved for the smaller dashboard panels. */
.staff-dashboard-grid > .staff-section {
  position: relative !important;
  border-color: transparent !important;
}
.staff-dashboard-grid > .staff-section::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: -1px;
  z-index: 30;
  pointer-events: none;
  background: url("/images/admborder.png") center / 100% 100% no-repeat;
  border-radius: inherit;
}

/* The six dashboard metric mini-panels use miniborder.png. */
.staff-metric-card {
  position: relative !important;
  border-color: transparent !important;
}
.staff-metric-card::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: -1px;
  z-index: 30;
  pointer-events: none;
  background: url("/images/miniborder.png") center / 100% 100% no-repeat;
  border-radius: inherit;
}
.staff-metric-card > * { position: relative; z-index: 1; }

@media (max-width: 1500px) {
  .staff-sidebar { --staff-sidebar-pad-x: 17px; }
}
@media (max-width: 1100px) {
  .staff-sidebar { --staff-sidebar-pad-x: 20px; }
  .staff-brand { margin-bottom: 5px !important; }
}
@media (max-width: 720px) {
  .staff-brand { padding-bottom: 8px !important; }
}

/* =========================================================
   Staff Panel v225 — access link + sidebar layer correction
   ========================================================= */

/* Restore the login-screen STAFF PANEL switch as plain gold text below
   Enter Shop. It must not inherit the browser's native button treatment. */
.login-card > .staff-entry-link,
.login-card > .staff-link-button {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 9px auto 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: #d7b85e !important;
  font: 800 12px/1.25 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  letter-spacing: .15em !important;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(0,0,0,.76), 0 0 10px rgba(220,181,73,.12);
  cursor: pointer;
  transition: color .16s ease, filter .16s ease, transform .16s ease;
}
.login-card > .staff-entry-link:hover,
.login-card > .staff-link-button:hover {
  color: #f4dc91 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: brightness(1.12);
  transform: translateY(-1px);
}
.login-card > .staff-entry-link:active,
.login-card > .staff-link-button:active { transform: translateY(0); }
.login-card > .staff-entry-link:focus-visible,
.login-card > .staff-link-button:focus-visible {
  color: #f4dc91 !important;
  outline: 1px solid rgba(240,208,116,.66);
  outline-offset: 4px;
  border-radius: 2px !important;
}

/* admborder2.png is an overlay frame, not part of the sidebar background.
   This lets title.png sit underneath the frame while navigation labels,
   dividers and controls keep their own foreground layer. */
.staff-sidebar {
  position: relative !important;
  isolation: isolate !important;
  background:
    linear-gradient(180deg, rgba(8, 28, 18, .97), rgba(5, 20, 13, .98)),
    radial-gradient(circle at 30% 0%, rgba(205, 169, 65, .08), transparent 34%) !important;
}
.staff-sidebar::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  background: url("/images/admborder2.png") center / 100% 100% no-repeat;
}

/* Keep the title artwork underneath the sidebar's ornamental frame. */
.staff-brand {
  position: relative !important;
  z-index: 0 !important;
}
.staff-brand .staff-brand-title {
  position: relative !important;
  z-index: 0 !important;
}

/* Navigation, separators and account/actions remain foreground content.
   The transparent middle of admborder2 remains visually above them only
   where the supplied frame artwork actually paints pixels. */
.staff-sidebar nav,
.staff-sidebar .staff-user,
.staff-sidebar .staff-exit {
  position: relative !important;
  z-index: 2 !important;
}

/* =========================================================
   Staff Panel v226 — restored divider, deep-green panels,
   wbpanel.png native-size welcome artwork
   ========================================================= */

/* Bring back the gold divider that separates title.png from navigation. */
.staff-brand {
  padding-bottom: 16px !important;
  margin-bottom: 9px !important;
  overflow: visible !important;
}
.staff-brand::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 14px !important;
  right: 14px !important;
  bottom: 1px !important;
  height: 2px !important;
  z-index: 6 !important;
  pointer-events: none !important;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(163, 122, 34, .36) 8%,
    rgba(232, 196, 91, .90) 28%,
    #f1d77c 50%,
    rgba(232, 196, 91, .90) 72%,
    rgba(163, 122, 34, .36) 92%,
    transparent 100%) !important;
  box-shadow:
    0 0 6px rgba(224, 182, 72, .28),
    0 1px 0 rgba(56, 38, 8, .55) !important;
}
.staff-brand::before {
  content: "✦" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: -5px !important;
  z-index: 7 !important;
  transform: translateX(-50%) !important;
  color: #e8c55f !important;
  font-size: 9px !important;
  line-height: 10px !important;
  text-shadow: 0 0 7px rgba(232, 193, 76, .55) !important;
  pointer-events: none !important;
}

/* Unified deep forest-green surface palette. The ornamental border images
   remain separate overlay layers, while the actual panel fill moves closer
   to #06130E. */
.staff-section,
.staff-list-pane,
.staff-detail-pane,
.staff-loading,
.staff-dialog,
.staff-role-editor,
.staff-profile-grid > div,
.staff-profile-grid > article,
.staff-user,
.staff-card-editor,
.staff-permission-group {
  background:
    radial-gradient(circle at 18% 0%, rgba(24, 53, 39, .22), transparent 42%),
    linear-gradient(145deg, #081a13 0%, #06130e 48%, #04100b 100%) !important;
}

.staff-metric-card {
  background:
    radial-gradient(circle at 86% 12%, rgba(36, 68, 47, .24), transparent 34%),
    linear-gradient(150deg, #0a2017 0%, #06130e 52%, #04100b 100%) !important;
}
.staff-metric-card.is-gil {
  background:
    radial-gradient(circle at 84% 13%, rgba(207, 169, 58, .09), transparent 30%),
    linear-gradient(150deg, #0a2017 0%, #06130e 52%, #04100b 100%) !important;
}

.staff-stat-row > div,
.staff-chip-grid > div,
.staff-list-row,
.staff-select-list > button,
.staff-toggle-grid > label,
.staff-form-grid .staff-field,
.staff-table-wrap,
.staff-pane-head,
.staff-dashboard-badge {
  background:
    linear-gradient(145deg, rgba(10, 31, 22, .96), rgba(6, 19, 14, .96) 55%, rgba(4, 15, 10, .97)) !important;
}
.staff-select-list > button:hover,
.staff-select-list > button.is-active {
  background:
    linear-gradient(145deg, rgba(18, 47, 33, .98), rgba(7, 24, 17, .98) 58%, rgba(5, 17, 12, .99)) !important;
}

/* wbpanel.png already contains both the panel fill and its border. Keep the
   source image at its intrinsic/native pixel dimensions: the image itself is
   the in-flow sizing element, and all dashboard text is overlaid on it. */
.staff-dashboard-welcome {
  position: relative !important;
  display: block !important;
  width: max-content !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 0 24px 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  isolation: isolate !important;
}
.staff-dashboard-welcome::before,
.staff-dashboard-welcome::after {
  content: none !important;
  display: none !important;
}
.staff-dashboard-welcome-art {
  position: relative !important;
  z-index: 0 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: none !important;
  pointer-events: none !important;
  user-select: none !important;
}
.staff-dashboard-copy {
  position: absolute !important;
  z-index: 2 !important;
  left: 40px !important;
  top: 50% !important;
  width: min(66%, 900px) !important;
  transform: translateY(-50%) !important;
  padding: 0 !important;
}
.staff-dashboard-copy h2 {
  margin: 0 !important;
}
.staff-dashboard-copy p {
  margin-top: 9px !important;
}
.staff-dashboard-badge {
  position: absolute !important;
  z-index: 2 !important;
  right: 30px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
}

/* The old kicker/title is no longer rendered, but keep this defensive rule
   so stale cached markup cannot show CONTROL CENTER. */
.staff-dashboard-kicker { display: none !important; }

@media (max-width: 1100px) {
  .staff-dashboard-welcome {
    width: max-content !important;
    max-width: none !important;
  }
  .staff-dashboard-copy { left: 40px !important; width: 62% !important; }
  .staff-dashboard-badge { right: 24px !important; }
}

/* =========================================================
   Staff Panel v227 — exact wbpanel native dimensions + darker surfaces
   ========================================================= */

/* wbpanel.png is 1789 × 99 px. Do not scale it down: the dashboard welcome
   panel and the image itself both use the asset's exact native dimensions. */
.staff-dashboard-welcome {
  width: 1789px !important;
  min-width: 1789px !important;
  max-width: 1789px !important;
  height: 99px !important;
  min-height: 99px !important;
  max-height: 99px !important;
}
.staff-dashboard-welcome-art {
  width: 1789px !important;
  min-width: 1789px !important;
  max-width: 1789px !important;
  height: 99px !important;
  min-height: 99px !important;
  max-height: 99px !important;
  object-fit: fill !important;
}

/* Move welcome title + description another 40px to the right (40 → 80px). */
.staff-dashboard-copy {
  left: 80px !important;
}

/* Darker forest palette. Keep the same green family, but push the visual
   weight below the previous #06130E-centered treatment. */
.staff-section,
.staff-list-pane,
.staff-detail-pane,
.staff-loading,
.staff-dialog,
.staff-role-editor,
.staff-profile-grid > div,
.staff-profile-grid > article,
.staff-user,
.staff-card-editor,
.staff-permission-group {
  background:
    radial-gradient(circle at 18% 0%, rgba(18, 43, 31, .18), transparent 42%),
    linear-gradient(145deg, #06150f 0%, #04100b 50%, #020a07 100%) !important;
}

.staff-metric-card {
  background:
    radial-gradient(circle at 86% 12%, rgba(24, 55, 38, .18), transparent 34%),
    linear-gradient(150deg, #071810 0%, #040f0a 52%, #020906 100%) !important;
}
.staff-metric-card.is-gil {
  background:
    radial-gradient(circle at 84% 13%, rgba(196, 156, 48, .065), transparent 30%),
    linear-gradient(150deg, #071810 0%, #040f0a 52%, #020906 100%) !important;
}

.staff-stat-row > div,
.staff-chip-grid > div,
.staff-list-row,
.staff-select-list > button,
.staff-toggle-grid > label,
.staff-form-grid .staff-field,
.staff-table-wrap,
.staff-pane-head,
.staff-dashboard-badge,
.staff-combobox-trigger,
.staff-combobox-menu,
.staff-field input,
.staff-field textarea,
.staff-shell input:not([type="checkbox"]),
.staff-shell textarea {
  background:
    linear-gradient(145deg, rgba(7, 22, 15, .98), rgba(4, 15, 10, .98) 56%, rgba(2, 9, 6, .99)) !important;
}

.staff-select-list > button:hover,
.staff-select-list > button.is-active,
.staff-combobox-menu button:hover,
.staff-combobox-menu button.is-active {
  background:
    linear-gradient(145deg, rgba(12, 34, 23, .99), rgba(5, 18, 12, .99) 58%, rgba(3, 11, 8, 1)) !important;
}

/* Preserve the exact native welcome artwork on narrower desktop widths too;
   it may extend beyond the viewport rather than being silently rescaled. */
@media (max-width: 1100px) {
  .staff-dashboard-welcome {
    width: 1789px !important;
    min-width: 1789px !important;
    max-width: 1789px !important;
    height: 99px !important;
    min-height: 99px !important;
    max-height: 99px !important;
  }
  .staff-dashboard-welcome-art {
    width: 1789px !important;
    min-width: 1789px !important;
    max-width: 1789px !important;
    height: 99px !important;
    min-height: 99px !important;
    max-height: 99px !important;
  }
  .staff-dashboard-copy { left: 80px !important; }
}

/* =========================================================
   Staff Panel v229 — restore v227 palette/layout + flush title
   ========================================================= */

/* Keep the v227 sidebar/panel palette and normal dashboard flow. Only raise
   title.png so its top edge sits flush with the top of the sidebar. The image
   remains underneath admborder2.png and all foreground navigation layers. */
.staff-brand {
  margin-top: -28px !important;
}

@media (max-width: 1100px) {
  .staff-brand {
    margin-top: -20px !important;
  }
}

/* =========================================================
   Staff Panel v230 — fixed navigation + player collections + scoped roles
   ========================================================= */

/* Keep the desktop navigation rail physically anchored while the workspace
   scrolls. Widths intentionally match the approved v229 layout. */
@media (min-width: 1501px) {
  .staff-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 325px !important;
    height: 100vh !important;
    box-sizing: border-box !important;
    z-index: 90 !important;
  }
  .staff-workspace { grid-column: 2 / 3 !important; min-width: 0 !important; }
}
@media (min-width: 1101px) and (max-width: 1500px) {
  .staff-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 300px !important;
    height: 100vh !important;
    box-sizing: border-box !important;
    z-index: 90 !important;
  }
  .staff-workspace { grid-column: 2 / 3 !important; min-width: 0 !important; }
}

/* Toasts live under the sticky topbar, then reverse their entrance after
   2.5s and fully disappear at the 3s lifecycle boundary in React. */
.staff-topbar { z-index: 96 !important; }
.staff-toast {
  position: relative !important;
  z-index: 70 !important;
  animation: staff-toast-enter .28s cubic-bezier(.2,.75,.25,1) both !important;
}
.staff-toast.is-leaving {
  pointer-events: none !important;
  animation: staff-toast-leave .5s cubic-bezier(.55,.05,.8,.3) both !important;
}
@keyframes staff-toast-enter {
  from { opacity: 0; transform: translateY(-24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes staff-toast-leave {
  from { opacity: 1; transform: translateY(0); filter: blur(0); }
  to { opacity: 0; transform: translateY(-78px); filter: blur(1.5px); }
}

/* The Players detail side no longer has one giant enclosing visual panel. */
.staff-player-detail {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  padding: 0 !important;
}
.staff-player-detail::before,
.staff-player-detail::after { content: none !important; display: none !important; }
.staff-player-detail > * { position: relative !important; z-index: auto !important; }

.staff-player-name-line { display: inline-flex !important; align-items: center !important; gap: 10px !important; }
.staff-player-badges { display: inline-flex !important; align-items: center !important; gap: 6px !important; height: 1em !important; }
.staff-player-badges img { display: block !important; width: auto !important; height: 1em !important; max-height: 1em !important; object-fit: contain !important; filter: drop-shadow(0 0 6px rgba(225,188,67,.24)); }

.staff-player-summary-stats > div {
  border-color: rgba(220,184,75,.28) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.035), 0 0 0 1px rgba(214,177,66,.045), 0 7px 18px rgba(0,0,0,.16) !important;
  background: linear-gradient(to top, rgba(24,67,45,.78) 0%, rgba(11,35,24,.72) 34%, rgba(4,15,10,.98) 78%) !important;
}

/* Coffer inventory mirrors the player's object-card presentation while adding
   direct physical +/- controls to the Owned counter. */
.staff-inventory-grid,
.staff-prize-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)) !important;
  gap: 12px !important;
}
.staff-inventory-card,
.staff-prize-card {
  position: relative !important;
  min-width: 0 !important;
  border: 1px solid rgba(214,180,95,.24) !important;
  border-radius: 12px !important;
  background: linear-gradient(145deg, rgba(11,31,22,.97), rgba(5,17,12,.99)) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.025) !important;
  overflow: hidden !important;
}
.staff-inventory-card {
  display: grid !important;
  grid-template-columns: 76px minmax(130px,1fr) auto auto auto !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 112px !important;
  padding: 13px 14px !important;
}
.staff-inventory-art,
.staff-prize-art {
  display: grid !important;
  place-items: center !important;
  border-radius: 10px !important;
  background: rgba(2,10,6,.54) !important;
  border: 1px solid rgba(214,180,95,.12) !important;
}
.staff-inventory-art { width: 70px !important; height: 78px !important; }
.staff-inventory-art img { width: 62px !important; height: 70px !important; object-fit: contain !important; filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)); }
.staff-inventory-copy { min-width: 0 !important; }
.staff-inventory-copy strong { display:block !important; color:#eee0a4 !important; font-size:16px !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; }
.staff-inventory-copy small { display:block !important; margin-top:5px !important; color:#788f7c !important; font-size:11px !important; text-transform:uppercase !important; letter-spacing:.08em !important; }
.staff-inventory-fact { min-width: 92px !important; padding-left: 12px !important; border-left: 1px solid rgba(214,180,95,.09) !important; }
.staff-inventory-fact > span { display:block !important; color:#789080 !important; font-size:10px !important; font-weight:800 !important; text-transform:uppercase !important; letter-spacing:.07em !important; }
.staff-inventory-fact > strong { display:block !important; margin-top:5px !important; color:#e1cd7f !important; font-size:13px !important; }
.staff-inventory-stepper { display:flex !important; align-items:center !important; gap:7px !important; margin-top:5px !important; }
.staff-inventory-stepper strong { min-width:32px !important; text-align:center !important; color:#f2dc86 !important; font-size:16px !important; }
.staff-inventory-stepper button {
  width: 28px !important; height: 28px !important; padding:0 !important;
  border:1px solid rgba(222,185,67,.34) !important; border-radius:7px !important;
  background:linear-gradient(180deg,rgba(41,67,43,.96),rgba(12,31,20,.98)) !important;
  color:#f0d878 !important; font-size:18px !important; font-weight:900 !important; line-height:1 !important; cursor:pointer !important;
  box-shadow: inset 0 1px rgba(255,255,255,.05), 0 4px 9px rgba(0,0,0,.18) !important;
}
.staff-inventory-stepper button:hover:not(:disabled) { border-color:rgba(242,204,77,.68) !important; box-shadow:0 0 12px rgba(224,180,48,.16) !important; }
.staff-inventory-stepper button:disabled { opacity:.35 !important; cursor:not-allowed !important; }

/* Prize cards intentionally reuse the proportions, muted claimed treatment and
   green CLAIMED seal from the player's normal Your Prize Collection. */
.staff-prize-card {
  display:grid !important;
  grid-template-columns:72px minmax(130px,1fr) minmax(220px,1.35fr) !important;
  align-items:center !important;
  gap:12px !important;
  min-height:128px !important;
  padding:30px 14px 12px !important;
}
.staff-prize-art { width:66px !important; height:66px !important; }
.staff-prize-art img { width:58px !important; height:58px !important; object-fit:contain !important; }
.staff-prize-copy { min-width:0 !important; }
.staff-prize-copy strong { display:block !important; color:#eee0a4 !important; font-size:15px !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; }
.staff-prize-copy span { display:block !important; margin-top:6px !important; color:#839588 !important; font-size:12px !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; }
.staff-prize-facts { display:grid !important; grid-template-columns:.6fr 1.25fr .9fr !important; gap:8px !important; min-width:0 !important; }
.staff-prize-facts > div { min-width:0 !important; padding-left:9px !important; border-left:1px solid rgba(214,180,95,.09) !important; }
.staff-prize-facts span { display:block !important; color:#778b7b !important; font-size:9px !important; font-weight:850 !important; text-transform:uppercase !important; letter-spacing:.07em !important; }
.staff-prize-facts strong { display:block !important; margin-top:5px !important; color:#d9c77d !important; font-size:11px !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; }
.staff-prize-facts .is-delivered { color:#75d596 !important; }
.staff-prize-facts .is-pending { color:#e0bd55 !important; }
.staff-prize-claimed {
  position:absolute !important; top:8px !important; right:9px !important; z-index:8 !important;
  padding:4px 9px !important; border:1px solid rgba(157,255,183,.85) !important; border-radius:6px !important;
  background:rgba(72,255,125,.90) !important; color:#092512 !important;
  font-size:11px !important; font-weight:950 !important; letter-spacing:.08em !important; text-transform:uppercase !important;
  box-shadow:0 0 10px rgba(79,255,132,.50),0 0 24px rgba(79,255,132,.25),inset 0 1px rgba(255,255,255,.48) !important;
}
.staff-prize-card.is-claimed { border-color:rgba(132,193,147,.16) !important; background:rgba(20,29,22,.50) !important; box-shadow:inset 0 0 30px rgba(7,13,8,.20) !important; }
.staff-prize-card.is-claimed > :not(.staff-prize-claimed):not(.staff-prize-delivery-check) { opacity:.42 !important; filter:grayscale(.82) saturate(.34) brightness(.70) !important; }
.staff-prize-delivery-check {
  position:absolute !important; right:10px !important; bottom:8px !important; z-index:9 !important;
  display:flex !important; align-items:center !important; gap:6px !important; color:#8ca08e !important; font-size:10px !important; font-weight:800 !important; cursor:pointer !important;
}
.staff-prize-delivery-check input { position:absolute !important; opacity:0 !important; pointer-events:none !important; }
.staff-prize-delivery-check i { width:18px !important; height:18px !important; border:1px solid rgba(214,180,95,.38) !important; border-radius:5px !important; background:#06120d !important; box-shadow:inset 0 2px 5px rgba(0,0,0,.35) !important; }
.staff-prize-delivery-check input:checked + i { border-color:rgba(103,221,139,.65) !important; background:linear-gradient(145deg,#2c7549,#123c27) !important; }
.staff-prize-delivery-check input:checked + i::after { content:"✓" !important; display:grid !important; place-items:center !important; width:100% !important; height:100% !important; color:#d8ffe2 !important; font-size:12px !important; font-weight:950 !important; }
.staff-prize-confirm {
  position:absolute !important; inset:50% auto auto 50% !important; z-index:20 !important; transform:translate(-50%,-50%) !important;
  min-width:210px !important; padding:12px !important; border:1px solid rgba(224,187,66,.48) !important; border-radius:10px !important;
  background:linear-gradient(145deg,rgba(10,28,19,.99),rgba(3,12,8,.995)) !important;
  box-shadow:0 14px 35px rgba(0,0,0,.55),0 0 22px rgba(224,180,50,.10) !important; text-align:center !important;
}
.staff-prize-confirm > strong { color:#eed77c !important; font-size:13px !important; }
.staff-prize-confirm > div { display:flex !important; justify-content:center !important; gap:8px !important; margin-top:10px !important; }
.staff-prize-confirm .staff-btn { min-height:31px !important; padding:6px 15px !important; }

/* Role editor: wrappers are layout only. Only the actual input/textarea or
   combobox receives a filled background, so labels never look connected to it. */
.staff-form-grid > .staff-field,
.staff-role-editor .staff-form-grid > .staff-field,
.staff-card-editor .staff-form-grid > .staff-field {
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

/* Per-lootbox permission matrix. */
.staff-lootbox-permission-scopes { display:grid !important; gap:13px !important; margin-top:16px !important; }
.staff-scope-heading { padding:12px 14px !important; border:1px solid rgba(214,180,95,.18) !important; border-radius:10px !important; background:rgba(4,14,9,.42) !important; }
.staff-scope-heading span { display:block !important; color:#8eaa8d !important; font-size:9px !important; font-weight:900 !important; letter-spacing:.14em !important; }
.staff-scope-heading strong { display:block !important; margin-top:4px !important; color:#e8d37e !important; font-size:16px !important; }
.staff-scope-heading p { margin:4px 0 0 !important; color:#7c9080 !important; font-size:11px !important; }
.staff-lootbox-scope-card { overflow:hidden !important; border:1px solid rgba(214,180,95,.20) !important; border-radius:12px !important; background:linear-gradient(145deg,rgba(8,26,18,.96),rgba(4,14,9,.985)) !important; box-shadow:0 8px 22px rgba(0,0,0,.18) !important; }
.staff-lootbox-scope-card > header { display:flex !important; align-items:center !important; justify-content:space-between !important; gap:14px !important; padding:11px 13px !important; border-bottom:1px solid rgba(214,180,95,.12) !important; background:rgba(20,47,32,.34) !important; }
.staff-lootbox-scope-title { display:flex !important; align-items:center !important; gap:10px !important; min-width:0 !important; }
.staff-lootbox-scope-title img { width:44px !important; height:44px !important; object-fit:contain !important; border-radius:8px !important; background:rgba(2,10,6,.48) !important; }
.staff-lootbox-scope-title strong,.staff-lootbox-scope-title small { display:block !important; }
.staff-lootbox-scope-title strong { color:#e8d37e !important; font-size:14px !important; }
.staff-lootbox-scope-title small { margin-top:3px !important; color:#718676 !important; font-size:9px !important; }
.staff-scope-group { padding:10px 12px 2px !important; }
.staff-scope-group h5 { margin:0 0 7px !important; color:#a99b5e !important; font-size:9px !important; letter-spacing:.12em !important; text-transform:uppercase !important; }
.staff-scope-permission-grid { display:grid !important; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)) !important; gap:7px !important; }
.staff-scope-permission-grid label,.staff-scope-all { position:relative !important; display:flex !important; align-items:flex-start !important; gap:8px !important; cursor:pointer !important; }
.staff-scope-permission-grid label { padding:8px !important; border:1px solid rgba(214,180,95,.08) !important; border-radius:8px !important; background:rgba(255,255,255,.012) !important; }
.staff-scope-permission-grid input,.staff-scope-all input { position:absolute !important; opacity:0 !important; pointer-events:none !important; }
.staff-scope-permission-grid i,.staff-scope-all i { flex:0 0 auto !important; width:18px !important; height:18px !important; border:1px solid rgba(214,180,95,.32) !important; border-radius:5px !important; background:#06120d !important; }
.staff-scope-permission-grid input:checked + i,.staff-scope-all input:checked + i { border-color:rgba(220,183,61,.72) !important; background:linear-gradient(145deg,#796623,#3a3216) !important; box-shadow:0 0 8px rgba(225,182,46,.15) !important; }
.staff-scope-permission-grid input:checked + i::after,.staff-scope-all input:checked + i::after { content:"✓" !important; display:grid !important; place-items:center !important; width:100% !important; height:100% !important; color:#fff1a5 !important; font-size:12px !important; font-weight:950 !important; }
.staff-scope-permission-grid span strong,.staff-scope-permission-grid span small { display:block !important; }
.staff-scope-permission-grid span strong { color:#d9c879 !important; font-size:11px !important; }
.staff-scope-permission-grid span small { margin-top:2px !important; color:#728576 !important; font-size:9px !important; line-height:1.25 !important; }
.staff-scope-all { align-items:center !important; color:#d8c779 !important; font-size:10px !important; font-weight:850 !important; white-space:nowrap !important; }

.staff-audit-actions { display:flex !important; align-items:center !important; gap:8px !important; }
.staff-audit-filter { min-width:230px !important; }

@media (max-width: 1450px) {
  .staff-inventory-card { grid-template-columns:70px minmax(120px,1fr) auto auto !important; }
  .staff-inventory-card .staff-inventory-fact:last-child { grid-column:2 / -1 !important; border-left:0 !important; padding-left:0 !important; }
  .staff-prize-card { grid-template-columns:68px minmax(130px,1fr) !important; }
  .staff-prize-facts { grid-column:2 !important; }
}
@media (max-width: 760px) {
  .staff-inventory-grid,.staff-prize-grid { grid-template-columns:1fr !important; }
  .staff-inventory-card { grid-template-columns:64px minmax(0,1fr) !important; }
  .staff-inventory-fact { border-left:0 !important; padding:4px 0 0 !important; }
  .staff-inventory-fact:nth-of-type(n) { grid-column:2 !important; }
  .staff-prize-card { grid-template-columns:62px minmax(0,1fr) !important; }
  .staff-prize-facts { grid-column:1 / -1 !important; }
  .staff-audit-actions { flex-wrap:wrap !important; justify-content:flex-end !important; }
  .staff-audit-filter { min-width:190px !important; }
}

/* =========================================================
   Staff Panel v231 refinements
   ========================================================= */

/* Welcome artwork keeps its native pixel size without participating in layout width. */
.staff-dashboard-welcome {
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 99px !important;
  min-height: 99px !important;
  max-height: 99px !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.staff-dashboard-welcome::before,
.staff-dashboard-welcome::after { content: none !important; display: none !important; }
.staff-dashboard-welcome-art {
  position: absolute !important;
  inset: 0 auto auto 0 !important;
  display: block !important;
  width: 1789px !important;
  min-width: 1789px !important;
  max-width: none !important;
  height: 99px !important;
  min-height: 99px !important;
  max-height: 99px !important;
  object-fit: fill !important;
  transform: none !important;
  z-index: 0 !important;
  pointer-events: none !important;
}
.staff-dashboard-copy { position: relative !important; z-index: 2 !important; padding-left: 140px !important; }
.staff-dashboard-badge { position: relative !important; z-index: 2 !important; margin-right: 24px !important; }

/* Dashboard metrics: tighter cards, centered information and real art next to the value. */
.staff-metric-grid {
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 11px !important;
  align-items: center !important;
}
.staff-metric-card,
.staff-metric-grid > div {
  min-width: 0 !important;
  min-height: 146px !important;
  height: 146px !important;
  padding: 17px 12px 14px !important;
  text-align: center !important;
  justify-content: center !important;
  align-self: center !important;
}
.staff-metric-card.is-gil {
  min-height: 178px !important;
  height: 178px !important;
  padding-top: 20px !important;
}
.staff-metric-card::before { content: none !important; display: none !important; }
.staff-metric-grid span {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 0 8px !important;
  text-align: center !important;
}
.staff-metric-value {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
}
.staff-metric-value img,
.staff-metric-symbol {
  display: block !important;
  flex: 0 0 auto !important;
  width: 34px !important;
  height: 34px !important;
  object-fit: contain !important;
  font-size: 31px !important;
  line-height: 34px !important;
  color: #e4c867 !important;
  filter: drop-shadow(0 0 8px rgba(232,198,91,.27)) !important;
}
.staff-metric-card.is-gil .staff-metric-value img { width: 40px !important; height: 40px !important; }
.staff-metric-grid strong {
  min-width: 0 !important;
  font-size: clamp(28px, 1.55vw, 35px) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.staff-metric-card.is-gil strong { font-size: clamp(34px, 1.9vw, 43px) !important; }
.staff-metric-grid small { margin-top: 8px !important; text-align: center !important; }

/* Player summary: keep the lighter green limited to the bottom edge only. */
.staff-player-summary-stats > div {
  border-color: rgba(219,184,91,.28) !important;
  background: linear-gradient(180deg, rgba(5,18,13,.98) 0%, rgba(5,18,13,.98) 70%, rgba(20,48,31,.60) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(235,205,111,.035), 0 8px 20px rgba(0,0,0,.16) !important;
}

/* Inventory cards retain the same outer footprint but use two compact information rows. */
.staff-inventory-card {
  grid-template-columns: 58px minmax(0,1fr) 92px 66px !important;
  grid-template-rows: minmax(48px, auto) minmax(24px, auto) !important;
  gap: 5px 9px !important;
  min-height: 112px !important;
  height: 112px !important;
  padding: 10px !important;
  overflow: hidden !important;
  align-items: center !important;
}
.staff-inventory-art {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  width: 58px !important;
  height: 78px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.staff-inventory-art img { width: 100% !important; height: 100% !important; object-fit: contain !important; }
.staff-inventory-copy { grid-column: 2 !important; grid-row: 1 !important; min-width: 0 !important; }
.staff-inventory-copy strong {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  line-height: 1.16 !important;
}
.staff-inventory-owned { grid-column: 3 !important; grid-row: 1 !important; }
.staff-inventory-card > .staff-inventory-fact:nth-of-type(2) { grid-column: 4 !important; grid-row: 1 !important; }
.staff-inventory-card > .staff-inventory-fact:last-child {
  grid-column: 2 / -1 !important;
  grid-row: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  min-width: 0 !important;
  padding: 3px 0 0 !important;
  border: 0 !important;
  white-space: nowrap !important;
}
.staff-inventory-card > .staff-inventory-fact:last-child strong { font-size: 10px !important; overflow: visible !important; text-overflow: clip !important; }

/* Prize cards: artwork is transparent and facts are arranged beneath the name without clipping. */
.staff-prize-card {
  grid-template-columns: 58px minmax(0,1fr) !important;
  grid-template-rows: auto 1fr !important;
  gap: 5px 10px !important;
  min-height: 128px !important;
  height: 128px !important;
  padding: 10px 12px !important;
  overflow: hidden !important;
}
.staff-prize-art {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  width: 58px !important;
  height: 82px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.staff-prize-art img { width: 100% !important; height: 100% !important; object-fit: contain !important; }
.staff-prize-copy { grid-column: 2 !important; grid-row: 1 !important; min-width: 0 !important; padding-right: 68px !important; }
.staff-prize-copy strong,
.staff-prize-copy span { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; line-height: 1.16 !important; }
.staff-prize-facts {
  grid-column: 2 !important;
  grid-row: 2 !important;
  display: grid !important;
  grid-template-columns: minmax(55px,.65fr) minmax(118px,1.45fr) minmax(92px,1fr) !important;
  gap: 5px !important;
  min-width: 0 !important;
  padding-right: 68px !important;
  align-items: end !important;
}
.staff-prize-facts > div { min-width: 0 !important; }
.staff-prize-facts strong { white-space: normal !important; line-height: 1.1 !important; font-size: 10px !important; overflow: visible !important; text-overflow: clip !important; }

/* Player minigame history. */
.staff-minigame-history { display: grid !important; gap: 8px !important; max-height: 520px !important; overflow-y: auto !important; padding-right: 5px !important; }
.staff-minigame-row {
  display: grid !important;
  grid-template-columns: minmax(165px,1.25fr) repeat(4,minmax(105px,.8fr)) !important;
  gap: 8px !important;
  align-items: center !important;
  padding: 11px 12px !important;
  border: 1px solid rgba(214,180,95,.16) !important;
  border-radius: 11px !important;
  background: linear-gradient(180deg,rgba(6,21,15,.96),rgba(4,14,10,.98)) !important;
}
.staff-minigame-row.is-win { border-color: rgba(102,190,116,.24) !important; }
.staff-minigame-row.is-loss { border-color: rgba(190,92,82,.23) !important; }
.staff-minigame-row > div { min-width: 0 !important; }
.staff-minigame-row > div > span { display:block !important; color:#779083 !important; font-size:10px !important; text-transform:uppercase !important; letter-spacing:.08em !important; }
.staff-minigame-row > div > strong { display:block !important; margin-top:3px !important; color:#e7e7d9 !important; font-size:12px !important; }
.staff-minigame-game { display:flex !important; align-items:center !important; gap:9px !important; }
.staff-minigame-game > span { display:grid !important; place-items:center !important; width:34px !important; height:34px !important; border:1px solid rgba(214,180,95,.24) !important; border-radius:9px !important; color:#e6c862 !important; font-size:21px !important; }
.staff-minigame-game strong { display:block !important; font-size:13px !important; color:#ead67f !important; }
.staff-minigame-game small { display:block !important; margin-top:2px !important; color:#769082 !important; font-size:10px !important; }
.staff-minigame-row > p { grid-column:1/-1 !important; margin:0 !important; color:#81978b !important; font-size:10px !important; }
.staff-empty-card { padding:18px !important; border:1px dashed rgba(214,180,95,.17) !important; border-radius:11px !important; color:#83988c !important; text-align:center !important; }

/* Per-coffer permissions: larger, readable and collapsed by default. */
.staff-lootbox-scope-card { overflow: visible !important; }
.staff-lootbox-scope-card > header {
  min-height: 66px !important;
  padding: 8px 11px !important;
  gap: 10px !important;
}
.staff-scope-toggle {
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  flex:1 1 auto !important;
  min-width:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  color:inherit !important;
  text-align:left !important;
  cursor:pointer !important;
}
.staff-lootbox-scope-title img { width:46px !important; height:46px !important; }
.staff-lootbox-scope-title strong { font-size:15px !important; line-height:1.2 !important; }
.staff-lootbox-scope-title small { margin-top:4px !important; font-size:11px !important; }
.staff-scope-chevron {
  flex:0 0 auto !important;
  width:31px !important;
  height:31px !important;
  display:grid !important;
  place-items:center !important;
  border:1px solid rgba(224,190,87,.28) !important;
  border-radius:8px !important;
  color:#e2c45c !important;
  font-size:22px !important;
  line-height:1 !important;
  box-shadow:inset 0 0 12px rgba(210,180,77,.06) !important;
}
.staff-scope-all { flex:0 0 auto !important; min-height:34px !important; font-size:12px !important; }
.staff-scope-body { border-top:1px solid rgba(214,180,95,.12) !important; padding-bottom:10px !important; }
.staff-scope-group { padding:12px 14px 2px !important; }
.staff-scope-group h5 { margin:0 0 9px !important; font-size:12px !important; letter-spacing:.09em !important; }
.staff-scope-permission-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:8px !important; }
.staff-scope-permission-grid > label {
  min-height:58px !important;
  padding:9px 10px !important;
  gap:9px !important;
  border-color:rgba(214,180,95,.14) !important;
}
.staff-scope-permission-grid > label > i { width:20px !important; height:20px !important; }
.staff-scope-permission-grid strong { font-size:12px !important; line-height:1.25 !important; }
.staff-scope-permission-grid small { margin-top:3px !important; font-size:10.5px !important; line-height:1.3 !important; }

/* Audit filter must float above the audit records instead of being clipped. */
.staff-section:has(.staff-audit-actions) { overflow: visible !important; position:relative !important; z-index:40 !important; }
.staff-audit-actions { position:relative !important; z-index:1500 !important; }
.staff-audit-actions .staff-combobox { position:relative !important; z-index:1600 !important; }
.staff-audit-actions .staff-combobox-menu { z-index:2200 !important; max-height:290px !important; }
.staff-audit-table-wrap { position:relative !important; z-index:1 !important; }
.staff-audit-details { min-width:390px !important; max-width:720px !important; white-space:normal !important; line-height:1.35 !important; color:#a7b7ad !important; }

@media (max-width: 1450px) {
  .staff-metric-grid { grid-template-columns: repeat(4,minmax(0,1fr)) !important; }
  .staff-metric-card, .staff-metric-grid > div { height:140px !important; min-height:140px !important; }
  .staff-metric-card.is-gil { height:170px !important; min-height:170px !important; }
}
@media (max-width: 1250px) {
  .staff-scope-permission-grid { grid-template-columns:1fr !important; }
  .staff-minigame-row { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .staff-minigame-game { grid-column:1/-1 !important; }
}

/* New scrollable minigame history uses the same themed scrollbar as every other Staff surface. */
.staff-minigame-history {
  scrollbar-width: auto !important;
  scrollbar-color: #b58b32 #07180f !important;
}
.staff-minigame-history::-webkit-scrollbar { width: 12px !important; background: #07180f !important; }
.staff-minigame-history::-webkit-scrollbar-track { background: linear-gradient(180deg,#06140d,#071b12) !important; border:1px solid rgba(210,176,74,.10) !important; }
.staff-minigame-history::-webkit-scrollbar-thumb { border:3px solid #07180f !important; border-radius:999px !important; background:linear-gradient(180deg,#d5ad45,#8d6722) !important; }
.staff-minigame-history::-webkit-scrollbar-thumb:hover { background:linear-gradient(180deg,#e6c45c,#a77b2a) !important; }
.staff-minigame-history::-webkit-scrollbar-button { display:none !important; width:0 !important; height:0 !important; }

/* =========================================================
   Staff Panel v232 — dashboard spacing, intrinsic welcome art,
   player inventory/prize cleanup and larger minigame history
   ========================================================= */

/* Let wbpanel.png define its own physical size. Do not lock it to 1789px:
   replacing the PNG with a wider/narrower asset now changes the site too. */
.staff-dashboard-welcome {
  position: relative !important;
  display: inline-block !important;
  width: max-content !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 0 22px 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  vertical-align: top !important;
}
.staff-dashboard-welcome-art {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: none !important;
  transform: none !important;
  z-index: 0 !important;
}
.staff-dashboard-copy {
  position: absolute !important;
  left: 140px !important;
  top: 50% !important;
  width: min(62%, 980px) !important;
  padding: 0 !important;
  transform: translateY(-50%) !important;
  z-index: 2 !important;
}
.staff-dashboard-badge {
  position: absolute !important;
  right: 30px !important;
  top: 50% !important;
  margin: 0 !important;
  transform: translateY(-50%) !important;
  z-index: 2 !important;
}

/* Six dashboard cards after removing Active Players. Restore the approved
   pre-v231 card height. The Gil card is no longer resized by this pass. */
.staff-metric-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 15px !important;
  margin-bottom: 22px !important;
  align-items: stretch !important;
}
.staff-metric-card,
.staff-metric-grid > div,
.staff-metric-card.is-gil {
  min-height: 178px !important;
  height: 178px !important;
  padding: 22px 18px 20px !important;
  border-radius: 16px !important;
  text-align: center !important;
  justify-content: center !important;
  background:
    linear-gradient(180deg,
      rgba(22, 55, 38, .38) 0%,
      rgba(8, 27, 18, .96) 18%,
      rgba(6, 19, 14, .985) 50%,
      rgba(8, 28, 19, .97) 82%,
      rgba(23, 58, 39, .34) 100%) !important;
}
.staff-metric-card.is-gil {
  background:
    radial-gradient(circle at 82% 16%, rgba(213, 174, 62, .07), transparent 30%),
    linear-gradient(180deg,
      rgba(22, 55, 38, .38) 0%,
      rgba(8, 27, 18, .96) 18%,
      rgba(6, 19, 14, .985) 50%,
      rgba(8, 28, 19, .97) 82%,
      rgba(23, 58, 39, .34) 100%) !important;
}
.staff-metric-grid span {
  margin: 0 0 8px !important;
  transform: translateY(-7px) !important;
}
.staff-metric-grid small {
  margin-top: 8px !important;
  transform: translateY(8px) !important;
}
.staff-metric-value {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  min-height: 48px !important;
  gap: 0 !important;
}
.staff-metric-value strong {
  position: relative !important;
  z-index: 2 !important;
  margin: 0 !important;
  text-align: center !important;
}
.staff-metric-value img,
.staff-metric-symbol,
.staff-metric-card.is-gil .staff-metric-value img {
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  width: 46px !important;
  height: 46px !important;
  margin: 0 !important;
  transform: translateY(-50%) !important;
  object-fit: contain !important;
  font-size: 40px !important;
  line-height: 46px !important;
  z-index: 1 !important;
}
.staff-metric-card.is-gil .staff-metric-value img { width: 50px !important; height: 50px !important; left: 12px !important; }
.staff-metric-card.is-gil strong { font-size: clamp(34px, 1.9vw, 43px) !important; }

/* Minigame history uses actual site artwork and larger readable typography. */
.staff-minigame-row {
  grid-template-columns: minmax(190px,1.25fr) repeat(4,minmax(118px,.8fr)) !important;
  gap: 10px !important;
  padding: 14px 15px !important;
}
.staff-minigame-row > div > span {
  font-size: 12px !important;
  letter-spacing: .07em !important;
}
.staff-minigame-row > div > strong {
  margin-top: 4px !important;
  font-size: 15px !important;
}
.staff-minigame-game { gap: 12px !important; }
.staff-minigame-game > .staff-minigame-art {
  display: grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
  width: 48px !important;
  height: 48px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.staff-minigame-art img {
  display: block !important;
  width: 46px !important;
  height: 46px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 4px 9px rgba(0,0,0,.34)) drop-shadow(0 0 6px rgba(217,181,66,.12)) !important;
}
.staff-minigame-game strong { font-size: 16px !important; }
.staff-minigame-game small { margin-top: 3px !important; font-size: 12px !important; }
.staff-minigame-row > p { font-size: 12px !important; line-height: 1.35 !important; }

/* Coffer Inventory: every configured coffer remains visible. Zero-owned coffers
   are desaturated, while Owned=0 and Opened>0 retain their status colors. */
.staff-inventory-card.is-empty .staff-inventory-art img,
.staff-inventory-card.is-empty .staff-inventory-copy,
.staff-inventory-card.is-empty .staff-inventory-fact > span,
.staff-inventory-card.is-empty .staff-inventory-fact:last-child strong {
  filter: grayscale(1) saturate(0) !important;
  opacity: .52 !important;
}
.staff-inventory-owned strong.is-zero { color: #ef8c8c !important; filter: none !important; opacity: 1 !important; }
.staff-inventory-opened strong.has-opened { color: #84dca0 !important; filter: none !important; opacity: 1 !important; }
.staff-inventory-stepper button {
  width: 24px !important;
  height: 28px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #e9cf70 !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  text-shadow: 0 0 0 rgba(0,0,0,0) !important;
  transition: transform .12s ease, color .12s ease, text-shadow .12s ease, opacity .12s ease !important;
}
.staff-inventory-stepper button:hover:not(:disabled) {
  color: #ffe89a !important;
  transform: scale(1.18) !important;
  text-shadow: 0 0 8px rgba(238,198,74,.55), 0 0 16px rgba(238,198,74,.22) !important;
  box-shadow: none !important;
}
.staff-inventory-stepper button:active:not(:disabled) {
  transform: scale(.88) !important;
  color: #fff2b1 !important;
}
.staff-inventory-stepper button:disabled { opacity: .24 !important; }

/* Prize Collection: amount is represented only by a compact xN marker for
   non-Gil rewards. The body is reduced to name/coffer + Won + Delivery. */
.staff-prize-card {
  grid-template-columns: 64px minmax(0,1fr) !important;
  grid-template-rows: auto 1fr !important;
  min-height: 128px !important;
  height: 128px !important;
  gap: 6px 11px !important;
  padding: 12px 13px 11px !important;
  overflow: hidden !important;
}
.staff-prize-art {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  width: 62px !important;
  height: 88px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.staff-prize-art img { width: 100% !important; height: 100% !important; object-fit: contain !important; }
.staff-prize-copy {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  padding: 1px 78px 0 0 !important;
}
.staff-prize-copy strong { font-size: 15px !important; line-height: 1.15 !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
.staff-prize-copy span { margin-top: 4px !important; font-size: 11px !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
.staff-prize-facts {
  grid-column: 2 !important;
  grid-row: 2 !important;
  display: grid !important;
  grid-template-columns: minmax(125px,1.35fr) minmax(105px,.85fr) !important;
  align-items: end !important;
  gap: 8px !important;
  min-width: 0 !important;
  padding: 0 76px 2px 0 !important;
}
.staff-prize-facts > div { min-width: 0 !important; padding-left: 8px !important; border-left: 1px solid rgba(214,180,95,.09) !important; }
.staff-prize-facts span { font-size: 9.5px !important; }
.staff-prize-facts strong { margin-top: 4px !important; font-size: 11px !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; line-height: 1.12 !important; }
.staff-prize-quantity {
  position: absolute !important;
  top: 8px !important;
  right: 10px !important;
  z-index: 10 !important;
  margin: 0 !important;
  color: #f0d87f !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: .02em !important;
  text-shadow: 0 0 8px rgba(231,190,64,.22) !important;
  transform: none !important;
}
.staff-prize-claimed {
  top: 7px !important;
  left: 8px !important;
  right: auto !important;
}
.staff-prize-delivery-check { right: 10px !important; bottom: 8px !important; }
.staff-prize-card.is-claimed > :not(.staff-prize-claimed):not(.staff-prize-delivery-check) { opacity:.42 !important; filter:grayscale(.82) saturate(.34) brightness(.70) !important; }

@media (max-width: 1450px) {
  .staff-metric-grid { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
  .staff-metric-card,
  .staff-metric-grid > div,
  .staff-metric-card.is-gil { height: 170px !important; min-height: 170px !important; }
}
@media (max-width: 1250px) {
  .staff-minigame-row { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .staff-minigame-game { grid-column: 1 / -1 !important; }
}
.staff-inventory-card.is-empty {
  border-color: rgba(145,154,147,.16) !important;
  background: linear-gradient(145deg, rgba(14,20,17,.92), rgba(7,12,9,.98)) !important;
  box-shadow: inset 0 0 22px rgba(0,0,0,.18), 0 7px 18px rgba(0,0,0,.16) !important;
}
.staff-inventory-card.is-empty .staff-inventory-stepper button {
  color: #7f8882 !important;
  text-shadow: none !important;
}
.staff-inventory-card.is-empty .staff-inventory-stepper button:hover:not(:disabled) {
  color: #ffe89a !important;
  text-shadow: 0 0 8px rgba(238,198,74,.55), 0 0 16px rgba(238,198,74,.22) !important;
}

/* =========================================================
   Staff Panel v233 — dashboard sizing, intrinsic wbpanel,
   audit layering, prize feedback and fixed ornamental overlays
   ========================================================= */

/* The welcome artwork is measured from the actual loaded PNG in React. The
   outer slot keeps normal dashboard flow while the natural-size canvas is
   allowed to extend horizontally without stretching the panels below it. */
.staff-dashboard-page {
  overflow: visible !important;
}
.staff-dashboard-welcome {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 99px !important;
  margin: 0 0 22px 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.staff-dashboard-welcome::before,
.staff-dashboard-welcome::after {
  content: none !important;
  display: none !important;
}
.staff-dashboard-welcome-canvas {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  display: block !important;
  min-width: 0 !important;
  max-width: none !important;
  overflow: visible !important;
  z-index: 1 !important;
}
.staff-dashboard-welcome-art {
  position: absolute !important;
  inset: 0 auto auto 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  max-width: none !important;
  min-height: 100% !important;
  max-height: none !important;
  object-fit: fill !important;
  transform: none !important;
  z-index: 0 !important;
}
.staff-dashboard-welcome-canvas .staff-dashboard-copy {
  position: absolute !important;
  left: 140px !important;
  top: 50% !important;
  width: min(62%, 980px) !important;
  transform: translateY(-50%) !important;
  z-index: 2 !important;
}
.staff-dashboard-welcome-canvas .staff-dashboard-badge {
  position: absolute !important;
  right: 30px !important;
  top: 50% !important;
  margin: 0 !important;
  transform: translateY(-50%) !important;
  z-index: 2 !important;
}
html:has(.staff-shell),
body:has(.staff-shell) {
  overflow-x: auto !important;
}

/* Four standard cards become slightly narrower. Jackpot and stored Gil use
   the released horizontal space. Heights and number placement stay intact. */
.staff-metric-grid {
  grid-template-columns:
    minmax(0, .86fr)
    minmax(0, .86fr)
    minmax(0, .86fr)
    minmax(0, .86fr)
    minmax(0, 1.22fr)
    minmax(0, 1.34fr) !important;
  gap: 15px !important;
}
.staff-metric-card > span {
  font-size: 15px !important;
  line-height: 1.1 !important;
}
.staff-metric-card > small {
  font-size: 13px !important;
  line-height: 1.2 !important;
}
.staff-metric-value img,
.staff-metric-card.is-jackpot .staff-metric-value img,
.staff-metric-card.is-gil .staff-metric-value img {
  left: 2px !important;
  width: 58px !important;
  height: 58px !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
}
.staff-metric-card.is-jackpot .staff-metric-value img { left: 0 !important; width: 60px !important; height: 60px !important; }
.staff-metric-card.is-gil .staff-metric-value img { left: 0 !important; width: 62px !important; height: 62px !important; }
/* Numbers remain centered and keep the approved font size. */
.staff-metric-value strong {
  left: auto !important;
  right: auto !important;
  transform: none !important;
}

/* Larger and more legible player minigame history. */
.staff-minigame-row {
  grid-template-columns: minmax(215px,1.25fr) repeat(4,minmax(128px,.8fr)) !important;
  gap: 12px !important;
  padding: 16px 17px !important;
}
.staff-minigame-row > div > span { font-size: 13px !important; }
.staff-minigame-row > div > strong { font-size: 17px !important; }
.staff-minigame-game > .staff-minigame-art { width: 54px !important; height: 54px !important; }
.staff-minigame-art img { width: 52px !important; height: 52px !important; }
.staff-minigame-game strong { font-size: 18px !important; }
.staff-minigame-game small { font-size: 13px !important; }
.staff-minigame-row > p { font-size: 13px !important; line-height: 1.4 !important; }

/* Every non-Gil reward receives an xN marker, including the normal x1 case. */
.staff-prize-quantity {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 24 !important;
}
.staff-prize-card.is-claimed .staff-prize-quantity {
  opacity: .72 !important;
  filter: grayscale(.25) !important;
}
.staff-prize-confirm {
  z-index: 35 !important;
}
.staff-prize-delivery-progress {
  min-width: 190px;
  display: grid;
  place-items: center;
  gap: 7px;
  padding: 9px 12px;
  text-align: center;
}
.staff-prize-delivery-progress strong {
  color: #f2dfa0 !important;
  font-size: 13px !important;
}
.staff-prize-delivery-progress small {
  color: #91a393 !important;
  font-size: 10px !important;
}
.staff-inline-spinner {
  width: 21px;
  height: 21px;
  border-radius: 50%;
  border: 2px solid rgba(232,203,116,.18);
  border-top-color: #e7c75f;
  box-shadow: 0 0 11px rgba(226,184,61,.18);
  animation: staff-inline-spin .72s linear infinite;
}
.staff-prize-card.is-updating-delivery {
  box-shadow: 0 0 0 1px rgba(221,183,61,.18), 0 10px 28px rgba(0,0,0,.28), inset 0 0 25px rgba(226,183,59,.035) !important;
}
@keyframes staff-inline-spin { to { transform: rotate(360deg); } }

/* Audit dropdown: raise the complete header stacking context, not only the
   nested menu. This keeps options above the record table underneath. */
.staff-section:has(.staff-audit-actions) {
  position: relative !important;
  overflow: visible !important;
  z-index: 6000 !important;
}
.staff-section:has(.staff-audit-actions) > header {
  position: relative !important;
  overflow: visible !important;
  z-index: 7000 !important;
}
.staff-section:has(.staff-audit-actions) .staff-section-actions,
.staff-audit-actions,
.staff-audit-actions .staff-combobox,
.staff-audit-actions .staff-combobox-menu {
  position: relative !important;
  overflow: visible !important;
  z-index: 7100 !important;
}
.staff-audit-actions .staff-combobox-menu {
  position: absolute !important;
  z-index: 9999 !important;
}
.staff-section:has(.staff-audit-actions) > .staff-audit-table-wrap {
  position: relative !important;
  z-index: 1 !important;
}

/* Persistent page ornaments. They are visual-only and always remain above
   Staff content while clicks pass through them. */
.staff-decor-overlay,
.staff-decor-overlay-bottom {
  position: fixed !important;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
  z-index: 100000 !important;
}
.staff-decor-overlay {
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: fill !important;
}
.staff-decor-overlay-bottom {
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: auto !important;
  max-width: none !important;
  object-fit: fill !important;
  z-index: 100001 !important;
}

@media (max-width: 1450px) {
  .staff-metric-grid { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
}
@media (max-width: 1100px) {
  .staff-dashboard-welcome-canvas .staff-dashboard-copy { left: 40px !important; }
  .staff-dashboard-welcome-canvas .staff-dashboard-badge { right: 24px !important; }
}

/* Keep quantity visible even when the rest of a claimed reward is dimmed. */
html body .staff-shell .staff-prize-card.is-claimed > .staff-prize-quantity {
  opacity: .82 !important;
  visibility: visible !important;
  filter: none !important;
}

/* =========================================================
   Staff Panel v234 — wbpanel exact dashboard span + art assets
   ========================================================= */

/* wbpanel.png is the complete background/border artwork. It now spans the
   exact same horizontal track as the metric grid, so its right edge aligns
   with the right edge of the last dashboard mini-panel. No max-width,
   tinting layer, blend mode, filter or extra green background is applied. */
.staff-dashboard-welcome {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 1789 / 99 !important;
  margin: 0 0 22px 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  isolation: isolate !important;
  filter: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}
.staff-dashboard-welcome::before,
.staff-dashboard-welcome::after {
  content: none !important;
  display: none !important;
  background: none !important;
}
.staff-dashboard-welcome-canvas {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  max-width: none !important;
  min-height: 100% !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  overflow: visible !important;
  filter: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  z-index: 1 !important;
}
.staff-dashboard-welcome-art {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  max-width: none !important;
  min-height: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: fill !important;
  object-position: left top !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  background: transparent !important;
  z-index: 0 !important;
  pointer-events: none !important;
}
.staff-dashboard-welcome-canvas .staff-dashboard-copy {
  z-index: 2 !important;
}
.staff-dashboard-copy h2 {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: max-content !important;
  max-width: 100% !important;
}
.staff-dashboard-copy h2 > span {
  display: inline-block !important;
}
.staff-dashboard-welcome-leaf {
  display: block !important;
  width: auto !important;
  height: 31px !important;
  max-width: 55px !important;
  object-fit: contain !important;
  flex: 0 0 auto !important;
  filter: none !important;
  opacity: 1 !important;
  pointer-events: none !important;
}
.staff-dashboard-welcome-canvas .staff-dashboard-badge {
  z-index: 3 !important;
}

/* Profile Overview uses the supplied full panel artwork as its background. */
.staff-dashboard-grid > .staff-section:first-child {
  background: url("/images/profileoverview.png") center / 100% 100% no-repeat !important;
  background-color: transparent !important;
}
.staff-dashboard-grid > .staff-section:first-child::before {
  background: none !important;
  content: none !important;
  display: none !important;
}

/* Jackpot and stored-Gil cards use their dedicated wider mini-frame. */
.staff-metric-card.is-jackpot::after,
.staff-metric-card.is-gil::after {
  background: url("/images/miniborder2.png") center / 100% 100% no-repeat !important;
}

/* ================================================================
   v235 — targeted dashboard/loading/sidebar permission refinements.
   ================================================================ */

/* The snapshot screen is now the only interface rendered until the first
   data payload, every referenced image and the active web fonts are ready. */
.staff-preload-screen {
  min-height: 100vh !important;
  width: 100% !important;
  display: grid !important;
  place-items: center !important;
  padding: 28px !important;
  background: #04100b !important;
  color: #d8d9ca !important;
}
.staff-real-loading {
  width: min(520px, calc(100vw - 56px)) !important;
  min-height: 190px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 28px 34px !important;
  text-align: center !important;
}
.staff-real-loading strong {
  color: #ead58d !important;
  font-size: 18px !important;
  letter-spacing: .015em !important;
}
.staff-real-loading > span {
  color: #8d9c90 !important;
  font-size: 13px !important;
}
.staff-real-loading .error { margin: 6px 0 0 !important; }

/* Profile Overview artwork is decorative only: keep the original panel fill
   and draw profileoverview.png above it at exactly 50% opacity. */
.staff-dashboard-grid > .staff-section:first-child {
  position: relative !important;
  isolation: isolate !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(18, 43, 31, .18), transparent 42%),
    linear-gradient(145deg, #06150f 0%, #04100b 50%, #020a07 100%) !important;
}
.staff-dashboard-grid > .staff-section:first-child::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  background: url("/images/profileoverview.png") center / 100% 100% no-repeat !important;
  opacity: .5 !important;
}
.staff-dashboard-grid > .staff-section:first-child > * {
  position: relative !important;
  z-index: 1 !important;
}

/* The records sub-panel uses over.png as its frame. Five records are visible;
   the sixth and later entries remain available through the custom scrollbar. */
.staff-profile-overview-frame {
  position: relative !important;
  margin-top: 16px !important;
  border-radius: 12px !important;
  overflow: visible !important;
  isolation: isolate !important;
}
.staff-profile-overview-frame::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: -1px !important;
  z-index: 8 !important;
  pointer-events: none !important;
  background: url("/images/over.png") center / 100% 100% no-repeat !important;
  border-radius: inherit !important;
}
.staff-profile-overview-table {
  position: relative !important;
  z-index: 1 !important;
  margin-top: 0 !important;
  max-height: 294px !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
  border: 0 !important;
  border-radius: 11px !important;
}
.staff-profile-overview-table thead tr,
.staff-profile-overview-table thead th {
  height: 44px !important;
}
.staff-profile-overview-table tbody tr {
  height: 50px !important;
}
.staff-profile-overview-table tbody td {
  height: 50px !important;
  vertical-align: middle !important;
}

/* A locked regular section remains visible in the sidebar but is visibly
   powered-off and cannot be clicked. Profiles/Settings/Staff & Roles are
   omitted entirely by the component when the role has no permission there. */
.staff-sidebar nav button.is-locked,
.staff-sidebar nav button:disabled {
  opacity: .34 !important;
  filter: grayscale(1) saturate(0) brightness(.72) !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.staff-sidebar nav button.is-locked .staff-nav-icon,
.staff-sidebar nav button.is-locked .staff-nav-label,
.staff-sidebar nav button:disabled .staff-nav-icon,
.staff-sidebar nav button:disabled .staff-nav-label {
  color: #7b857d !important;
  text-shadow: none !important;
  filter: grayscale(1) saturate(0) !important;
}

/* Give the jackpot number a little more line-box depth so the lower edge of
   the Georgia numerals is never clipped. Font size and centering stay intact. */
.staff-metric-card.is-jackpot .staff-metric-value strong {
  line-height: 1.12 !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* =========================================================
   Staff Panel v238 — topbar-bound notices + in-button feedback
   ========================================================= */

/* The topbar and its notification are one sticky stack. The notification is
   a real row directly under the header, so it never floats across page cards. */
.staff-topbar-stack {
  position: sticky !important;
  top: 0 !important;
  z-index: 120 !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  isolation: isolate !important;
}
.staff-topbar-stack > .staff-topbar {
  position: relative !important;
  top: auto !important;
  z-index: 3 !important;
  flex: 0 0 auto !important;
}
.staff-topbar-stack > .staff-toast {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 42px !important;
  max-height: 58px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 11px 24px !important;
  display: flex !important;
  align-items: center !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-top: 0 !important;
  border-radius: 0 0 9px 9px !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.20) !important;
  overflow: hidden !important;
  transform-origin: top center !important;
  animation: staff-v238-toast-in .24s cubic-bezier(.2,.75,.25,1) both !important;
}
.staff-topbar-stack > .staff-toast.is-good {
  color: #d5f0d5 !important;
  background: linear-gradient(180deg, rgba(36,105,49,.98), rgba(27,86,39,.98)) !important;
  border-bottom: 1px solid rgba(112,190,116,.32) !important;
}
.staff-topbar-stack > .staff-toast.is-error {
  color: #ffe0da !important;
  background: linear-gradient(180deg, rgba(119,42,34,.98), rgba(88,29,24,.98)) !important;
  border-bottom: 1px solid rgba(220,104,88,.34) !important;
}
.staff-topbar-stack > .staff-toast.is-leaving {
  pointer-events: none !important;
  animation: staff-v238-toast-out .48s cubic-bezier(.55,.05,.8,.3) both !important;
}
@keyframes staff-v238-toast-in {
  from { opacity: 0; transform: translateY(-100%); max-height: 0; padding-top: 0; padding-bottom: 0; }
  to { opacity: 1; transform: translateY(0); max-height: 58px; padding-top: 11px; padding-bottom: 11px; }
}
@keyframes staff-v238-toast-out {
  from { opacity: 1; transform: translateY(0); max-height: 58px; padding-top: 11px; padding-bottom: 11px; }
  to { opacity: 0; transform: translateY(-100%); max-height: 0; padding-top: 0; padding-bottom: 0; }
}

/* Async feedback lives inside the button that started the action. */
.staff-btn.is-busy {
  cursor: progress !important;
  filter: saturate(.92) brightness(.97) !important;
  box-shadow: inset 0 0 0 1px rgba(239,214,129,.16), 0 0 14px rgba(221,181,67,.10) !important;
}
.staff-btn-busy {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
}
.staff-btn-busy-label { opacity: .82 !important; }
.staff-btn-spinner {
  display: inline-block !important;
  width: 15px !important;
  height: 15px !important;
  flex: 0 0 15px !important;
  border: 2px solid rgba(250,232,171,.28) !important;
  border-top-color: #ffe28b !important;
  border-radius: 50% !important;
  animation: staff-v238-spin .7s linear infinite !important;
  box-shadow: 0 0 8px rgba(241,204,96,.16) !important;
}
@keyframes staff-v238-spin { to { transform: rotate(360deg); } }

/* Make the persistent exit/access buttons unmistakable while preserving their
   exact approved dimensions and placement. */
.staff-sidebar .staff-exit:not(.is-muted) {
  color: #ffe7df !important;
  border-color: rgba(235,105,84,.78) !important;
  background: linear-gradient(180deg, rgba(166,59,46,.88), rgba(101,31,25,.88)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.10), 0 0 18px rgba(203,72,54,.22) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.60), 0 0 8px rgba(255,145,125,.22) !important;
}
.staff-sidebar .staff-exit:not(.is-muted):hover {
  color: #fff7f3 !important;
  border-color: rgba(255,139,117,.96) !important;
  background: linear-gradient(180deg, rgba(194,72,56,.96), rgba(122,38,30,.94)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.14), 0 0 22px rgba(225,84,64,.30) !important;
}
.staff-sidebar .staff-exit.is-muted {
  color: #fff0a8 !important;
  border-color: rgba(226,188,70,.76) !important;
  background: linear-gradient(180deg, rgba(90,81,30,.82), rgba(38,65,37,.88)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 0 18px rgba(215,176,57,.18) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.58), 0 0 8px rgba(244,207,99,.20) !important;
}
.staff-sidebar .staff-exit.is-muted:hover {
  color: #fff8ca !important;
  border-color: rgba(247,211,102,.96) !important;
  background: linear-gradient(180deg, rgba(111,99,35,.94), rgba(44,79,43,.96)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.12), 0 0 22px rgba(229,191,69,.27) !important;
}

@media (max-width: 1100px) {
  .staff-topbar-stack { position: relative !important; }
  .staff-topbar-stack > .staff-toast { padding-left: 16px !important; padding-right: 16px !important; }
}

/* =========================================================
   Staff Panel v240 — desktop restored + mobile refinement
   Desktop keeps the exact approved v238 sizing. Responsive changes below
   only reorganize tablet/mobile content instead of zooming the desktop UI.
   ========================================================= */

/* Mobile-only controls never participate in desktop layout. */
.staff-mobile-menu,
.staff-mobile-sidebar-scrim,
.staff-mobile-player-picker {
  display: none;
}

/* The Players rail follows desktop scrolling without changing its width or
   affecting the selected player's detail column. */
@media (min-width: 1101px) {
  .staff-players-page {
    align-items: start !important;
  }
  .staff-players-page .staff-player-list-pane {
    position: sticky !important;
    top: 132px !important;
    align-self: start !important;
    max-height: calc(100vh - 154px) !important;
    overflow: hidden !important;
    z-index: 40 !important;
  }
  .staff-players-page .staff-player-list-pane .staff-select-list {
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }
}

/* Tablet/mobile navigation drawer. All desktop scale values above remain
   untouched: no zoom, transform-scale or artificial workspace widths. */
@media (max-width: 1100px) {
  html:has(.staff-shell),
  body:has(.staff-shell) {
    overflow-x: hidden !important;
  }

  .staff-shell {
    display: block !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }
  .staff-workspace {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 100vh !important;
    zoom: 1 !important;
  }

  .staff-mobile-menu {
    appearance: none !important;
    position: fixed !important;
    top: 13px !important;
    left: 13px !important;
    z-index: 100020 !important;
    width: 46px !important;
    height: 46px !important;
    display: grid !important;
    place-content: center !important;
    gap: 5px !important;
    padding: 0 !important;
    border: 1px solid rgba(225,190,86,.58) !important;
    border-radius: 12px !important;
    background: linear-gradient(180deg,rgba(20,47,32,.98),rgba(7,24,16,.99)) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.06) !important;
    cursor: pointer !important;
  }
  .staff-mobile-menu span {
    display: block !important;
    width: 23px !important;
    height: 2px !important;
    border-radius: 2px !important;
    background: #efd373 !important;
    box-shadow: 0 0 7px rgba(224,184,62,.20) !important;
    transition: transform .22s ease, opacity .18s ease !important;
  }
  .staff-mobile-menu.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg) !important; }
  .staff-mobile-menu.is-open span:nth-child(2) { opacity: 0 !important; }
  .staff-mobile-menu.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) !important; }

  .staff-mobile-sidebar-scrim {
    appearance: none !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 99970 !important;
    display: block !important;
    border: 0 !important;
    padding: 0 !important;
    background: rgba(1,7,4,.64) !important;
    backdrop-filter: blur(3px) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity .22s ease, visibility .22s ease !important;
  }
  .staff-mobile-sidebar-scrim.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .staff-sidebar {
    --staff-sidebar-pad-x: 20px !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: min(340px,88vw) !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 28px 20px 20px !important;
    border-right: 1px solid rgba(218,184,89,.30) !important;
    border-bottom: 0 !important;
    z-index: 100000 !important;
    transform: translate3d(-104%,0,0) !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: transform .28s cubic-bezier(.2,.78,.25,1), visibility .28s ease !important;
    box-shadow: 24px 0 55px rgba(0,0,0,.42) !important;
    zoom: 1 !important;
  }
  .staff-sidebar.is-mobile-open {
    transform: translate3d(0,0,0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  .staff-sidebar .staff-brand {
    flex: 0 0 auto !important;
    margin-top: -28px !important;
  }
  .staff-sidebar nav {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    width: 100% !important;
    gap: 6px !important;
  }
  .staff-sidebar nav button {
    width: 100% !important;
    min-height: 51px !important;
    grid-template-columns: 34px minmax(0,1fr) !important;
    font-size: 15px !important;
  }
  .staff-sidebar .staff-user { margin-top: auto !important; }
  .staff-sidebar .staff-exit { width: 100% !important; flex: 0 0 auto !important; }

  .staff-topbar-stack {
    position: sticky !important;
    top: 0 !important;
    z-index: 180 !important;
  }
  .staff-topbar-stack > .staff-topbar {
    min-height: 76px !important;
    padding: 11px 14px 11px 72px !important;
    gap: 10px !important;
  }
  .staff-topbar h1 { font-size: clamp(25px,6vw,34px) !important; }
  .staff-topbar-eyebrow { font-size: 10px !important; }
  .staff-topbar p { font-size: 12px !important; }
  .staff-top-actions { gap: 7px !important; }
  .staff-top-profile-select { width: min(250px,56vw) !important; }
  .staff-topbar-stack > .staff-toast {
    min-height: 38px !important;
    padding: 9px 14px !important;
    font-size: 12px !important;
  }

  .staff-page {
    width: 100% !important;
    max-width: none !important;
    padding: 16px 13px 34px !important;
    overflow: visible !important;
  }
  .staff-dashboard-grid,
  .staff-role-layout,
  .staff-form-grid,
  .staff-form-grid.cols-2,
  .staff-form-grid.cols-3,
  .staff-toggle-grid,
  .staff-profile-grid {
    grid-template-columns: 1fr !important;
  }
  .staff-dashboard-grid > .staff-section { min-height: 0 !important; }
  .staff-split-page {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    overflow: visible !important;
  }
  .staff-list-pane {
    position: relative !important;
    top: auto !important;
    max-height: 420px !important;
  }
  .staff-table-wrap {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .staff-section > header { flex-wrap: wrap !important; }
  .staff-section-actions { width: 100% !important; justify-content: flex-start !important; }
  .staff-button-row { flex-wrap: wrap !important; }

  /* Mobile Player picker stays reachable while the selected player's long
     profile scrolls. The full list expands directly below it. */
  .staff-mobile-player-picker {
    grid-column: 1 / -1 !important;
    appearance: none !important;
    position: sticky !important;
    top: 82px !important;
    z-index: 165 !important;
    width: 100% !important;
    min-height: 52px !important;
    display: grid !important;
    grid-template-columns: auto minmax(0,1fr) 26px !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 9px 12px !important;
    border: 1px solid rgba(218,184,89,.40) !important;
    border-radius: 11px !important;
    background: linear-gradient(180deg,rgba(17,43,29,.985),rgba(7,24,16,.995)) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.24) !important;
    color: #e9dfbd !important;
    text-align: left !important;
    cursor: pointer !important;
  }
  .staff-mobile-player-picker > span {
    color: #8ca08f !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
  }
  .staff-mobile-player-picker > strong {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: #f1d98d !important;
    font-size: 14px !important;
  }
  .staff-mobile-player-picker > i {
    color: #e1bf58 !important;
    font: 900 22px/1 Georgia,serif !important;
    text-align: center !important;
  }
  .staff-players-page .staff-player-list-pane {
    display: none !important;
    position: sticky !important;
    top: 140px !important;
    max-height: min(55dvh,520px) !important;
    overflow: hidden !important;
    z-index: 164 !important;
    box-shadow: 0 16px 34px rgba(0,0,0,.38) !important;
  }
  .staff-players-page .staff-player-list-pane.is-mobile-open { display: flex !important; }
  .staff-players-page .staff-player-list-pane .staff-select-list { overflow-y: auto !important; }

  /* Compact player summary: four cards in a 2×2 block. Usage's two cards use
     the same row instead of each consuming a full mobile line. */
  .staff-player-detail .staff-stat-row {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 9px !important;
    width: 100% !important;
  }
  .staff-player-detail .staff-stat-row > div,
  .staff-player-detail .staff-stat-row > span {
    min-width: 0 !important;
    width: auto !important;
    margin: 0 !important;
  }
  .staff-player-summary-stats > div {
    min-height: 76px !important;
    padding: 11px 12px !important;
  }
  .staff-player-summary-stats > div span { font-size: 10px !important; }
  .staff-player-summary-stats > div strong { font-size: 14px !important; overflow-wrap: anywhere !important; }
  .staff-player-summary-stats > div small { font-size: 10px !important; }

  /* Coffer cards: explicit areas keep name, Owned, Opened and Updated from
     ever sharing the same physical space. */
  .staff-inventory-grid,
  .staff-prize-grid { grid-template-columns: 1fr !important; }
  .staff-inventory-card {
    height: auto !important;
    min-height: 126px !important;
    display: grid !important;
    grid-template-columns: 68px minmax(0,1fr) 82px !important;
    grid-template-rows: auto auto !important;
    grid-template-areas:
      "art copy owned"
      "art updated opened" !important;
    column-gap: 10px !important;
    row-gap: 8px !important;
    align-items: center !important;
    padding: 11px 12px !important;
    overflow: hidden !important;
  }
  .staff-inventory-art {
    grid-area: art !important;
    width: 64px !important;
    height: 90px !important;
    align-self: center !important;
  }
  .staff-inventory-copy {
    grid-area: copy !important;
    min-width: 0 !important;
    align-self: end !important;
  }
  .staff-inventory-copy strong {
    font-size: 14px !important;
    line-height: 1.12 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  .staff-inventory-copy small { margin-top: 3px !important; font-size: 9px !important; }
  .staff-inventory-owned {
    grid-area: owned !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    align-self: center !important;
  }
  .staff-inventory-opened {
    grid-area: opened !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    align-self: start !important;
  }
  .staff-inventory-card > .staff-inventory-fact:last-child {
    grid-area: updated !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    align-self: start !important;
  }
  .staff-inventory-fact > span { font-size: 9px !important; }
  .staff-inventory-fact > strong,
  .staff-inventory-card > .staff-inventory-fact:last-child strong {
    margin-top: 3px !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    overflow: visible !important;
  }
  .staff-inventory-stepper { gap: 4px !important; margin-top: 2px !important; }
  .staff-inventory-stepper button { width: 19px !important; height: 24px !important; font-size: 21px !important; }
  .staff-inventory-stepper strong { min-width: 24px !important; font-size: 14px !important; }

  /* Prize cards reserve a dedicated third row for Delivered, preventing the
     checkbox from overlapping Won or Delivery Status. */
  .staff-prize-card {
    height: auto !important;
    min-height: 148px !important;
    display: grid !important;
    grid-template-columns: 66px minmax(0,1fr) !important;
    grid-template-rows: auto auto auto !important;
    gap: 7px 10px !important;
    padding: 12px !important;
    overflow: hidden !important;
  }
  .staff-prize-art {
    grid-column: 1 !important;
    grid-row: 1 / 4 !important;
    width: 62px !important;
    height: 92px !important;
    align-self: center !important;
  }
  .staff-prize-copy {
    grid-column: 2 !important;
    grid-row: 1 !important;
    padding: 0 42px 0 0 !important;
  }
  .staff-prize-copy strong { font-size: 14px !important; line-height: 1.15 !important; }
  .staff-prize-copy span { font-size: 10px !important; margin-top: 3px !important; }
  .staff-prize-facts {
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: minmax(0,1.25fr) minmax(0,.9fr) !important;
    align-items: start !important;
    gap: 7px !important;
    padding: 0 !important;
  }
  .staff-prize-facts > div { padding-left: 7px !important; }
  .staff-prize-facts span { font-size: 8.5px !important; }
  .staff-prize-facts strong { font-size: 10px !important; line-height: 1.18 !important; }
  .staff-prize-delivery-check {
    position: static !important;
    grid-column: 2 !important;
    grid-row: 3 !important;
    justify-self: end !important;
    align-self: end !important;
    margin: 1px 0 0 !important;
    font-size: 10px !important;
  }
  .staff-prize-quantity { top: 9px !important; right: 10px !important; }
}

@media (max-width: 680px) {
  .staff-mobile-menu { width: 43px !important; height: 43px !important; top: 11px !important; left: 11px !important; }
  .staff-topbar-stack > .staff-topbar { padding-left: 64px !important; }
  .staff-top-actions { width: 100% !important; justify-content: stretch !important; }
  .staff-top-profile-select { width: min(100%,310px) !important; flex: 1 1 180px !important; }
  .staff-section > header h3 { font-size: 20px !important; }
  .staff-section > header p { font-size: 12px !important; }

  /* Dashboard: the four standard stats form a compact 2×2 block. Jackpot and
     Player Banks stay full-width beneath them. */
  .staff-metric-grid {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 9px !important;
  }
  .staff-metric-card:not(.is-jackpot):not(.is-gil),
  .staff-metric-grid > div:not(.is-jackpot):not(.is-gil) {
    height: 118px !important;
    min-height: 118px !important;
    padding: 14px 10px 12px !important;
  }
  .staff-metric-card.is-jackpot,
  .staff-metric-card.is-gil {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-height: 142px !important;
    height: 142px !important;
  }
  .staff-metric-card:not(.is-jackpot):not(.is-gil) span { font-size: 11px !important; }
  .staff-metric-card:not(.is-jackpot):not(.is-gil) small { font-size: 10px !important; margin-top: 5px !important; }
  .staff-metric-card:not(.is-jackpot):not(.is-gil) .staff-metric-value img { width: 34px !important; height: 34px !important; }
  .staff-metric-card:not(.is-jackpot):not(.is-gil) .staff-metric-value strong { font-size: 29px !important; }

  /* Welcome artwork stays visible, but copy receives a dark local reading
     surface and sane line lengths instead of stacking through the flowers. */
  .staff-dashboard-welcome {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 156px !important;
    height: 156px !important;
    overflow: hidden !important;
  }
  .staff-dashboard-welcome-canvas {
    min-height: 156px !important;
    height: 156px !important;
    overflow: hidden !important;
  }
  .staff-dashboard-welcome-art { width: 100% !important; height: 100% !important; object-fit: cover !important; }
  .staff-dashboard-welcome-canvas .staff-dashboard-copy {
    position: absolute !important;
    left: 14px !important;
    right: 14px !important;
    top: 18px !important;
    width: auto !important;
    max-width: none !important;
    padding: 10px 12px 11px !important;
    border-radius: 10px !important;
    background: linear-gradient(90deg,rgba(2,13,8,.88),rgba(3,18,11,.74) 78%,rgba(3,18,11,.42)) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,.20) !important;
    backdrop-filter: blur(2px) !important;
  }
  .staff-dashboard-copy h2 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    font-size: 25px !important;
    line-height: 1.05 !important;
  }
  .staff-dashboard-copy h2 > span { min-width: 0 !important; }
  .staff-dashboard-welcome-leaf { height: 24px !important; max-width: 35px !important; }
  .staff-dashboard-copy p {
    max-width: 100% !important;
    margin: 7px 0 0 !important;
    color: #c3cec3 !important;
    font-size: 12.5px !important;
    line-height: 1.42 !important;
  }
  .staff-dashboard-welcome-canvas .staff-dashboard-badge { display: none !important; }

  /* Recent events: label, message and timestamp all remain readable. */
  .staff-dashboard-grid .staff-event-list {
    max-height: 460px !important;
    padding: 8px !important;
  }
  .staff-event-list .staff-list-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    min-height: 0 !important;
    padding: 11px 12px !important;
    background: rgba(4,18,12,.54) !important;
  }
  .staff-event-list .staff-event-main {
    display: grid !important;
    grid-template-columns: auto minmax(0,1fr) !important;
    align-items: start !important;
    gap: 9px !important;
    width: 100% !important;
  }
  .staff-event-list .staff-event-main p {
    display: block !important;
    margin: 1px 0 0 !important;
    color: #c2ccc1 !important;
    opacity: 1 !important;
    font-size: 12.5px !important;
    line-height: 1.38 !important;
    overflow-wrap: anywhere !important;
  }
  .staff-event-list .staff-list-row > time {
    display: block !important;
    justify-self: end !important;
    color: #819486 !important;
    opacity: 1 !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
  }

  .staff-audit-actions { width: 100% !important; justify-content: stretch !important; }
  .staff-audit-filter { min-width: 0 !important; width: 100% !important; }
}

@media (max-width: 420px) {
  .staff-page { padding-left: 10px !important; padding-right: 10px !important; }
  .staff-player-detail .staff-stat-row { gap: 7px !important; }
  .staff-player-summary-stats > div { padding: 9px 9px !important; }
  .staff-inventory-card {
    grid-template-columns: 60px minmax(0,1fr) 76px !important;
    column-gap: 8px !important;
    padding: 10px !important;
  }
  .staff-inventory-art { width: 56px !important; height: 82px !important; }
  .staff-prize-card { grid-template-columns: 58px minmax(0,1fr) !important; padding: 10px !important; }
  .staff-prize-art { width: 54px !important; height: 84px !important; }
}

/* =========================================================
   Staff Panel v241 — targeted desktop/mobile corrections only
   ========================================================= */

/* Desktop Players rail: guarantee viewport persistence instead of relying on
   sticky behavior from an ancestor. The second grid column remains explicit,
   so the selected-player content never slides underneath the fixed rail. */
@media (min-width: 1501px) {
  .staff-players-page .staff-player-list-pane {
    position: fixed !important;
    top: 143px !important;
    left: max(356px, calc(325px + ((100vw - 325px - 2050px) / 2) + 31px)) !important;
    width: 410px !important;
    max-width: 410px !important;
    max-height: calc(100vh - 166px) !important;
    z-index: 145 !important;
  }
  .staff-players-page .staff-player-detail {
    grid-column: 2 !important;
  }
  .staff-players-page .staff-player-list-pane .staff-select-list {
    flex: 0 1 auto !important;
    max-height: min(532px, calc(100vh - 226px)) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }
}

@media (min-width: 1101px) and (max-width: 1500px) {
  .staff-players-page .staff-player-list-pane {
    position: fixed !important;
    top: 138px !important;
    left: 325px !important;
    width: 345px !important;
    max-width: 345px !important;
    max-height: calc(100vh - 160px) !important;
    z-index: 145 !important;
  }
  .staff-players-page .staff-player-detail {
    grid-column: 2 !important;
  }
  .staff-players-page .staff-player-list-pane .staff-select-list {
    flex: 0 1 auto !important;
    max-height: min(532px, calc(100vh - 220px)) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }
}

/* Desktop ornament sizing below the 2560×1440 reference canvas.
   Typography is handled by the native font-rendering block in v243. */
@media (min-width: 1101px) and (max-width: 2559px),
       (min-width: 1101px) and (max-height: 1439px) {
  .staff-decor-overlay-bottom {
    transform: scale(.94) !important;
    transform-origin: bottom right !important;
    right: 0 !important;
    left: auto !important;
  }
}

@media (max-width: 1100px) {
  /* The player picker is truly viewport-persistent on mobile. */
  .staff-players-page {
    padding-top: 78px !important;
  }
  .staff-mobile-player-picker {
    position: fixed !important;
    top: 84px !important;
    left: 13px !important;
    right: 13px !important;
    width: auto !important;
    z-index: 10040 !important;
  }
  .staff-players-page .staff-player-list-pane,
  .staff-players-page .staff-player-list-pane.is-mobile-open {
    position: fixed !important;
    top: 143px !important;
    left: 13px !important;
    right: 13px !important;
    width: auto !important;
    max-height: min(55dvh, 520px) !important;
    z-index: 10039 !important;
  }
  .staff-players-page .staff-player-list-pane:not(.is-mobile-open) {
    display: none !important;
  }

  /* Slightly tighter player summary without changing the approved 2×2 layout.
     Width stays auto so inherited section margins cannot push the second card
     past the viewport edge. */
  .staff-player-detail .staff-stat-row {
    width: auto !important;
    max-width: none !important;
    gap: 7px !important;
  }
  .staff-player-summary-stats > div {
    min-height: 66px !important;
    padding: 8px 9px !important;
  }
  .staff-player-summary-stats > div span { font-size: 9px !important; }
  .staff-player-summary-stats > div strong {
    font-size: 12.5px !important;
    line-height: 1.12 !important;
    overflow-wrap: anywhere !important;
  }
  .staff-player-summary-stats > div small { font-size: 9px !important; }

  /* Coffer Inventory: name gets the full content width first; Owned/Opened sit
     together on the next row and Updated has its own row, eliminating overlap. */
  .staff-inventory-card {
    min-height: 136px !important;
    grid-template-columns: 68px minmax(0, 1fr) minmax(70px, .78fr) !important;
    grid-template-rows: auto auto auto !important;
    grid-template-areas:
      "art copy copy"
      "art owned opened"
      "art updated updated" !important;
    column-gap: 10px !important;
    row-gap: 6px !important;
    align-items: center !important;
  }
  .staff-inventory-copy {
    align-self: end !important;
    padding-right: 2px !important;
  }
  .staff-inventory-owned,
  .staff-inventory-opened,
  .staff-inventory-card > .staff-inventory-fact:last-child {
    align-self: start !important;
  }
  .staff-inventory-card > .staff-inventory-fact:last-child {
    grid-area: updated !important;
  }
  .staff-inventory-stepper {
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
  }
}

@media (max-width: 680px) {
  /* Keep all Welcome copy fully inside the wbpanel artwork. */
  .staff-dashboard-welcome-canvas .staff-dashboard-copy {
    top: 31px !important;
    left: 18px !important;
    right: 18px !important;
    padding: 9px 11px 10px !important;
  }
  .staff-dashboard-copy h2 {
    font-size: 23px !important;
    line-height: 1.08 !important;
  }
  .staff-dashboard-copy p {
    margin-top: 6px !important;
    font-size: 12px !important;
    line-height: 1.38 !important;
  }

  /* Recent Site Events: each event becomes a clean vertical record with more
     breathing room between label, message and timestamp. */
  .staff-dashboard-grid .staff-event-list {
    padding: 9px !important;
  }
  .staff-event-list .staff-list-row {
    gap: 10px !important;
    margin-bottom: 9px !important;
    padding: 14px 13px !important;
  }
  .staff-event-list .staff-list-row:last-child { margin-bottom: 0 !important; }
  .staff-event-list .staff-event-main {
    grid-template-columns: 1fr !important;
    gap: 7px !important;
  }
  .staff-event-list .staff-event-main .staff-pill {
    justify-self: start !important;
  }
  .staff-event-list .staff-event-main p {
    margin: 0 !important;
    font-size: 12.5px !important;
    line-height: 1.48 !important;
  }
  .staff-event-list .staff-list-row > time {
    margin-top: 1px !important;
    font-size: 10px !important;
  }

  /* Restore the Minigames mobile layout from before v240. */
  .staff-minigame-row {
    grid-template-columns: 1fr !important;
  }

  /* Very narrow screens need slightly smaller coffer columns, while preserving
     the same no-overlap area map above. */
  .staff-inventory-card {
    grid-template-columns: 60px minmax(0, 1fr) minmax(66px, .74fr) !important;
    column-gap: 8px !important;
    padding: 10px !important;
  }
  .staff-inventory-art { width: 56px !important; height: 82px !important; }
}

/* =========================================================
   Staff Panel v242 — final targeted refinements
   ========================================================= */

.staff-mobile-player-picker-slot { display: none; }

/* Global support artwork: same footprint as a sidebar tab and permanently
   positioned immediately above Dashboard. The supplied PNG contains the full
   visual/button treatment. */
.staff-msg-support {
  appearance: none !important;
  position: relative !important;
  z-index: 2 !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  height: 53px !important;
  min-height: 53px !important;
  margin: 0 0 1px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 11px !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer !important;
}
.staff-msg-support img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: fill !important;
  transform: translate3d(0,0,0) rotate(0deg) scale(1) !important;
  transform-origin: 82% 50% !important;
  transition: transform .20s cubic-bezier(.2,.8,.2,1), filter .18s ease !important;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.18)) !important;
  pointer-events: none !important;
}
.staff-msg-support:hover img {
  transform: translate3d(-1px,-1px,0) rotate(-.8deg) scale(1.027) !important;
  filter: drop-shadow(0 7px 12px rgba(0,0,0,.23)) brightness(1.035) !important;
}
.staff-msg-support:active img {
  transform: translate3d(0,0,0) rotate(-.25deg) scale(.992) !important;
  transition-duration: .08s !important;
}

/* Seven complete player records before the rail itself needs scrolling. */
@media (min-width: 1101px) {
  .staff-players-page .staff-player-list-pane .staff-select-list {
    max-height: min(700px, calc(100vh - 235px)) !important;
  }
}

/* Below the 2560×1440 reference canvas, only resize the lower ornament.
   Do not sharpen/rasterize the actual interface. */
@media (min-width: 1101px) and (max-width: 2559px),
       (min-width: 1101px) and (max-height: 1439px) {
  .staff-decor-overlay-bottom {
    left: auto !important;
    right: 0 !important;
    transform: scale(.94) !important;
    transform-origin: bottom right !important;
  }
}

@media (max-width: 1100px) {
  .staff-msg-support {
    height: 51px !important;
    min-height: 51px !important;
    margin-bottom: 1px !important;
  }

  /* The picker begins in its natural place. Only once that original slot
     reaches the topbar does React add .is-pinned and make it viewport-fixed. */
  .staff-players-page {
    padding-top: 16px !important;
  }
  .staff-mobile-player-picker-slot {
    display: block !important;
    grid-column: 1 / -1 !important;
    position: relative !important;
    width: 100% !important;
    min-height: 52px !important;
    z-index: 166 !important;
  }
  .staff-mobile-player-picker {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    margin: 0 !important;
  }
  .staff-mobile-player-picker.is-pinned {
    position: fixed !important;
    top: 84px !important;
    left: 13px !important;
    right: 13px !important;
    width: auto !important;
    z-index: 10040 !important;
  }

  .staff-players-page .staff-player-list-pane,
  .staff-players-page .staff-player-list-pane.is-mobile-open {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-height: min(700px, 58dvh) !important;
    z-index: 164 !important;
  }
  .staff-players-page .staff-player-list-pane.is-mobile-open.is-mobile-pinned {
    position: fixed !important;
    top: 143px !important;
    left: 13px !important;
    right: 13px !important;
    width: auto !important;
    z-index: 10039 !important;
  }
  .staff-players-page .staff-player-list-pane:not(.is-mobile-open) {
    display: none !important;
  }
  .staff-players-page .staff-player-list-pane .staff-select-list {
    max-height: min(700px, 52dvh) !important;
    overflow-y: auto !important;
  }

  /* Coffer Inventory: keep Owned on the same information row but move the
     quantity and +/- controls to the far-right edge. */
  .staff-inventory-card {
    grid-template-areas:
      "art copy copy"
      "art opened owned"
      "art updated updated" !important;
  }
  .staff-inventory-owned {
    grid-area: owned !important;
    justify-self: end !important;
    align-items: flex-end !important;
    text-align: right !important;
    width: auto !important;
    min-width: 82px !important;
  }
  .staff-inventory-opened {
    grid-area: opened !important;
    justify-self: start !important;
  }
  .staff-inventory-stepper {
    width: auto !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
  }
}

/* Player selector density is fixed so exactly seven complete account rows fit
   before the list starts scrolling, instead of varying with viewport size. */
.staff-player-list-pane .staff-select-list {
  padding: 10px !important;
}
.staff-player-list-pane .staff-select-list > button {
  min-height: 68px !important;
  padding: 7px 11px !important;
  margin-bottom: 6px !important;
}
.staff-player-list-pane .staff-select-list > button:last-child { margin-bottom: 0 !important; }
.staff-player-list-pane .staff-select-list > button strong { font-size: 15px !important; line-height: 1.16 !important; }
.staff-player-list-pane .staff-select-list > button span { margin-top: 2px !important; font-size: 13px !important; line-height: 1.16 !important; }
.staff-player-list-pane .staff-select-list > button small { margin-top: 2px !important; font-size: 11px !important; line-height: 1.16 !important; }
@media (min-width: 1101px) {
  .staff-players-page .staff-player-list-pane .staff-select-list {
    max-height: min(538px, calc(100vh - 224px)) !important;
  }
}
@media (max-width: 1100px) {
  .staff-players-page .staff-player-list-pane .staff-select-list {
    max-height: min(538px, calc(100dvh - 218px)) !important;
  }
}

/* =========================================================
   Staff Panel v243 — native rendering + mobile cleanup
   ========================================================= */

/* Let the browser rasterize glyphs at the current device pixel ratio instead
   of trying to fake sharpness with filters, transforms or text strokes. */
html:has(.staff-shell),
body:has(.staff-shell),
.staff-shell,
.staff-shell button,
.staff-shell input,
.staff-shell textarea,
.staff-shell select {
  font-smooth: always;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  font-optical-sizing: auto;
}
.staff-shell {
  font-synthesis: none;
}

/* MSG SUPPORT uses the PNG's intrinsic dimensions. The button itself no longer
   stretches the art to the width/height of a sidebar navigation row. */
.staff-msg-support {
  width: max-content !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  align-self: center !important;
  margin: 0 auto 1px !important;
  border-radius: 0 !important;
}
.staff-msg-support img {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: none !important;
}

/* On desktop keep the title/support/account controls physically stable. If the
   sidebar becomes vertically constrained, only the navigation list scrolls. */
@media (min-width: 1101px) {
  .staff-sidebar {
    overflow: hidden !important;
  }
  .staff-sidebar .staff-brand,
  .staff-sidebar .staff-msg-support,
  .staff-sidebar .staff-user,
  .staff-sidebar .staff-exit {
    flex: 0 0 auto !important;
  }
  .staff-sidebar .staff-brand {
    margin-top: 0 !important;
  }
  .staff-sidebar nav {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: visible !important;
    overscroll-behavior: contain !important;
  }
}

/* Exactly seven complete Player entries are visible before the selector rail
   scrolls. Fixed row boxes prevent inherited padding/font rules changing the
   count from one resolution to another. */
.staff-player-list-pane .staff-select-list {
  box-sizing: border-box !important;
  height: 490px !important;
  max-height: 490px !important;
  padding: 10px !important;
  overflow-y: auto !important;
}
.staff-player-list-pane .staff-select-list > button {
  box-sizing: border-box !important;
  height: 62px !important;
  min-height: 62px !important;
  max-height: 62px !important;
  margin: 0 0 6px !important;
  padding: 7px 11px !important;
  overflow: hidden !important;
}
.staff-player-list-pane .staff-select-list > button:last-child {
  margin-bottom: 0 !important;
}

/* Keep the reduced lower decoration pinned to the same right/bottom edges. */
@media (min-width: 1101px) and (max-width: 2559px),
       (min-width: 1101px) and (max-height: 1439px) {
  .staff-decor-overlay-bottom {
    left: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    transform: scale(.94) !important;
    transform-origin: bottom right !important;
  }
}

@media (max-width: 1100px) {
  /* Mobile sidebar can still scroll as one drawer, but its artwork keeps its
     native support-button size. */
  .staff-sidebar {
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  .staff-msg-support {
    width: max-content !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto 1px !important;
  }

  /* Welcome text: cancel the desktop 50% translate and keep the complete copy
     within the wbpanel artwork. */
  .staff-dashboard-welcome {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 174px !important;
    min-height: 174px !important;
    max-height: 174px !important;
    overflow: hidden !important;
  }
  .staff-dashboard-welcome-canvas {
    position: relative !important;
    width: 100% !important;
    height: 174px !important;
    min-height: 174px !important;
    overflow: hidden !important;
  }
  .staff-dashboard-welcome-art {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: left center !important;
  }
  .staff-dashboard-welcome-canvas .staff-dashboard-copy {
    position: absolute !important;
    z-index: 3 !important;
    top: 18px !important;
    left: 24px !important;
    right: 18px !important;
    bottom: auto !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
    margin: 0 !important;
    padding: 10px 12px 11px !important;
    border-radius: 10px !important;
    background: linear-gradient(90deg,rgba(2,13,8,.90),rgba(3,18,11,.76) 78%,rgba(3,18,11,.46)) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,.20) !important;
    backdrop-filter: blur(2px) !important;
  }
  .staff-dashboard-copy h2 {
    margin: 0 !important;
    font-size: 24px !important;
    line-height: 1.06 !important;
  }
  .staff-dashboard-copy p {
    margin: 7px 0 0 !important;
    max-width: 290px !important;
    font-size: 12px !important;
    line-height: 1.42 !important;
  }
  .staff-dashboard-welcome-leaf {
    height: 23px !important;
    width: auto !important;
    max-width: 34px !important;
  }
  .staff-dashboard-badge { display: none !important; }

  /* Recent Site Events: force each record to be a self-sized vertical block.
     This overrides older grid/list-row rules that allowed following records to
     paint into the same physical space on narrow screens. */
  .staff-dashboard-grid .staff-event-list {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 10px !important;
    overflow-y: auto !important;
  }
  .staff-event-list .staff-list-row {
    position: relative !important;
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 12px 12px 10px !important;
    overflow: visible !important;
  }
  .staff-event-list .staff-event-main {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 8px !important;
  }
  .staff-event-list .staff-event-main .staff-pill {
    position: static !important;
    inset: auto !important;
    align-self: flex-start !important;
    justify-self: auto !important;
    margin: 0 !important;
  }
  .staff-event-list .staff-event-main p {
    position: static !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    overflow-wrap: anywhere !important;
  }
  .staff-event-list .staff-list-row > time {
    position: static !important;
    align-self: flex-end !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 10px !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
  }

  /* Coffer Inventory: Owned remains on the same detail row but its label,
     amount and +/- controls form a compact right-aligned line at the end. */
  .staff-inventory-card {
    grid-template-columns: 60px minmax(0,1fr) 118px !important;
    grid-template-areas:
      "art copy copy"
      "art opened owned"
      "art updated updated" !important;
  }
  .staff-inventory-owned {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    justify-self: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 6px !important;
    padding: 0 !important;
    text-align: right !important;
  }
  .staff-inventory-owned > span {
    flex: 0 0 auto !important;
    margin: 0 !important;
  }
  .staff-inventory-owned .staff-inventory-stepper {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    width: auto !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 420px) {
  .staff-dashboard-welcome-canvas .staff-dashboard-copy {
    left: 16px !important;
    right: 14px !important;
  }
  .staff-dashboard-copy h2 { font-size: 22px !important; }
  .staff-dashboard-copy p { max-width: 270px !important; font-size: 11.5px !important; }
  .staff-inventory-card {
    grid-template-columns: 56px minmax(0,1fr) 112px !important;
    column-gap: 7px !important;
  }
}

/* =========================================================
   Staff Panel v244 — Add Player flow + mobile inventory gap
   ========================================================= */

/* The topbar now exposes one global player-creation action in the former
   profile/refresh slot. */
.staff-top-actions {
  align-items: center !important;
  justify-content: flex-end !important;
}
.staff-top-actions > .staff-btn {
  min-width: 150px !important;
}

/* Topbar-created Player success state. */
.staff-create-player-dialog h3 {
  max-width: 560px;
  line-height: 1.12 !important;
}
.staff-created-player-result {
  width: 100%;
  margin-top: 22px;
}
.staff-created-code-field {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 58px;
  padding: 0 58px 0 17px;
  border: 1px solid rgba(208,171,76,.52);
  border-radius: 11px;
  background: linear-gradient(180deg,rgba(3,19,13,.96),rgba(2,12,8,.98));
  box-shadow: inset 0 0 0 1px rgba(255,223,126,.04), 0 8px 20px rgba(0,0,0,.18);
  overflow: visible;
}
.staff-created-code-field code {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: #f2d978;
  font-family: inherit;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: .055em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.staff-created-code-copy {
  appearance: none;
  position: absolute;
  top: 50%;
  right: 9px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #e9c75e;
  cursor: pointer;
  transform: translateY(-50%);
  transition: transform .14s ease, color .14s ease, text-shadow .14s ease, background .14s ease;
}
.staff-created-code-copy:hover {
  color: #ffe58e;
  background: rgba(219,179,67,.09);
  text-shadow: 0 0 9px rgba(255,214,86,.62);
  transform: translateY(-50%) scale(1.06);
}
.staff-created-code-copy:active {
  transform: translateY(-50%) scale(.94);
}
.staff-created-code-copy-icon {
  display: block;
  font-size: 27px;
  line-height: 1;
}
.staff-created-code-tooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  padding: 5px 8px;
  border: 1px solid rgba(215,181,79,.48);
  border-radius: 6px;
  background: #07150f;
  color: #f5d978;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(0,0,0,.34);
  pointer-events: none;
}

@media (max-width: 1100px) {
  .staff-top-actions {
    width: 100% !important;
    justify-content: stretch !important;
  }
  .staff-top-actions > .staff-btn {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Keep Owned and Opened as distinct rows on narrow screens. Owned still
     keeps its amount and +/- controls at the far-right end of its own line. */
  .staff-inventory-card {
    grid-template-columns: 60px minmax(0,1fr) !important;
    grid-template-areas:
      "art copy"
      "art owned"
      "art opened"
      "art updated" !important;
    column-gap: 10px !important;
    row-gap: 8px !important;
  }
  .staff-inventory-art { grid-area: art !important; }
  .staff-inventory-copy { grid-area: copy !important; }
  .staff-inventory-owned {
    grid-area: owned !important;
    grid-column: 2 !important;
    grid-row: auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 28px !important;
    margin: 0 !important;
    padding: 2px 0 !important;
  }
  .staff-inventory-opened {
    grid-area: opened !important;
    grid-column: 2 !important;
    grid-row: auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 28px !important;
    margin: 0 !important;
    padding: 2px 0 !important;
  }
  .staff-inventory-card > .staff-inventory-fact:last-child {
    grid-area: updated !important;
    grid-column: 2 !important;
    grid-row: auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 28px !important;
    margin: 0 !important;
    padding: 2px 0 !important;
    border-left: 0 !important;
  }
  .staff-inventory-owned .staff-inventory-stepper {
    margin-left: auto !important;
  }

  .staff-create-player-dialog h3 {
    font-size: 23px !important;
  }
  .staff-created-code-field {
    min-height: 54px;
    padding-left: 13px;
    padding-right: 52px;
  }
  .staff-created-code-field code {
    font-size: 16px;
    letter-spacing: .035em;
  }
}

@media (max-width: 420px) {
  .staff-inventory-card {
    grid-template-columns: 56px minmax(0,1fr) !important;
    column-gap: 8px !important;
  }
  .staff-created-code-field code { font-size: 14px; }
}

/* =========================================================
   Staff Panel v245 — instant create result + initial deposit
   ========================================================= */

/* Add Player keeps the exact original gold button treatment. addplayer.png is
   only an ornamental frame layer and does not replace the fill or text color. */
.staff-top-actions > .staff-btn-gold {
  position: relative !important;
  isolation: isolate;
  min-width: 168px !important;
  min-height: 48px !important;
  border-color: rgba(207,158,55,.72) !important;
  border-radius: 9px !important;
  background:
    url('/images/addplayer.png') center / 100% 100% no-repeat,
    linear-gradient(180deg, #a97829, #5d4014) !important;
  color: #fff0b9 !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  letter-spacing: .025em !important;
  text-shadow: none !important;
  box-shadow: inset 0 1px rgba(255,255,255,.05), 0 7px 16px rgba(0,0,0,.16) !important;
}

/* Success screen: code first, optional initial Gil deposit directly below. */
.staff-created-deposit-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 13px;
}
.staff-created-deposit-row > input {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid rgba(183,151,65,.44);
  border-radius: 9px;
  outline: 0;
  background: linear-gradient(180deg, rgba(4,20,14,.96), rgba(2,13,9,.98));
  color: #f2df9a;
  font: inherit;
  font-size: 15px;
  font-weight: 750;
  box-shadow: inset 0 0 0 1px rgba(255,224,130,.025);
}
.staff-created-deposit-row > input::placeholder {
  color: rgba(176,187,177,.48);
  opacity: 1;
  font-weight: 650;
}
.staff-created-deposit-row > input:focus {
  border-color: rgba(232,195,83,.72);
  box-shadow: 0 0 0 2px rgba(219,177,60,.08), inset 0 0 0 1px rgba(255,224,130,.04);
}
.staff-created-deposit-action {
  position: relative;
  display: flex;
  min-width: 0;
}
.staff-created-deposit-action > .staff-btn {
  width: 100%;
  min-width: 0 !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  padding: 0 12px !important;
  align-self: center;
}
.staff-created-deposit-tooltip {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  padding: 6px 9px;
  border: 1px solid rgba(215,181,79,.5);
  border-radius: 6px;
  background: #07150f;
  color: #f5d978;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .025em;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(0,0,0,.34);
  pointer-events: none;
  animation: staffDepositDoneIn .16s ease-out both;
}
@keyframes staffDepositDoneIn {
  from { opacity: 0; transform: translate(-50%,4px) scale(.96); }
  to { opacity: 1; transform: translate(-50%,0) scale(1); }
}

/* Mobile Coffer Inventory: create a deliberate breathing gap between the two
   adjacent facts without changing their current line/column arrangement. */
@media (max-width: 1100px) {
  .staff-inventory-owned {
    margin-bottom: 8px !important;
  }
  .staff-inventory-opened {
    margin-top: 2px !important;
  }
  .staff-created-deposit-row {
    grid-template-columns: minmax(0,1fr) 78px;
    gap: 8px;
  }
  .staff-created-deposit-row > input {
    height: 46px !important;
    min-height: 46px !important;
  }
  .staff-created-deposit-action > .staff-btn {
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
  }
  .staff-top-actions {
    justify-content: flex-end !important;
  }
  .staff-top-actions > .staff-btn-gold {
    width: 138px !important;
    min-width: 138px !important;
    max-width: 138px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 10px !important;
    font-size: 14px !important;
  }
}


/* =========================================================
   Staff Panel v247 — Add Player success popup alignment
   ========================================================= */
.staff-created-deposit-row > input {
  margin-top: 0 !important;
}
.staff-created-deposit-action {
  align-self: stretch !important;
  height: 48px !important;
  min-height: 48px !important;
}
.staff-created-deposit-action > .staff-btn {
  align-self: stretch !important;
  margin: 0 !important;
  font-size: 17px !important;
  line-height: 1 !important;
}
.staff-created-player-result + .staff-dialog-actions .staff-btn-danger {
  color: #ffe0dc !important;
  background: linear-gradient(180deg, #b85f57, #84423d) !important;
  border-color: rgba(236, 133, 123, .82) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 7px 16px rgba(0,0,0,.16) !important;
}
.staff-created-player-result + .staff-dialog-actions .staff-btn-danger:hover:not(:disabled) {
  filter: brightness(1.08) !important;
}
@media (max-width: 1100px) {
  .staff-created-deposit-action {
    height: 46px !important;
    min-height: 46px !important;
  }
  .staff-created-deposit-action > .staff-btn {
    font-size: 16px !important;
  }
}

/* =========================================================
   Staff Panel v248 — desktop sidebar horizontal scrollbar fix
   Keep vertical nav scrolling, but prevent hover translateX from turning
   overflow-x:visible into an automatic horizontal scrollbar.
   ========================================================= */
@media (min-width: 1101px) {
  .staff-sidebar nav {
    overflow-x: hidden !important;
  }
}


/* =========================================================
   Staff Panel v249 — subtle sidebar separators + softer active glow
   ========================================================= */
.staff-sidebar nav button:not(:last-of-type)::after {
  content: "";
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: -4px;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(214, 177, 70, 0),
    rgba(214, 177, 70, .16) 14%,
    rgba(226, 190, 82, .27) 50%,
    rgba(214, 177, 70, .16) 86%,
    rgba(214, 177, 70, 0)
  );
  opacity: .34;
}

.staff-sidebar nav button.is-active .staff-nav-label {
  text-shadow:
    0 0 3px rgba(255, 226, 132, .72),
    0 0 8px rgba(239, 191, 64, .52),
    0 0 14px rgba(218, 155, 24, .28) !important;
}

/* =========================================================
   Staff Panel v252 — restore title.png flush to sidebar top
   ========================================================= */
@media (min-width: 1101px) {
  .staff-sidebar .staff-brand {
    margin-top: -28px !important;
  }
}

/* v253 — profile-scoped player access / Staff venue roles */
.staff-player-profile-access {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid rgba(202, 171, 99, .26);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(18, 29, 24, .84), rgba(9, 16, 13, .9));
  box-shadow: inset 0 1px rgba(255,255,255,.035), 0 14px 30px rgba(0,0,0,.16);
}
.staff-player-profile-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 14px;
}
.staff-player-profile-head h4 { margin: 2px 0 4px; color: #efe3bc; font-size: 17px; letter-spacing: .02em; }
.staff-player-profile-head p { margin: 0; max-width: 650px; color: rgba(235, 229, 207, .66); font-size: 12px; line-height: 1.5; }
.staff-section-kicker { color: #cdb16e; font-size: 10px; font-weight: 800; letter-spacing: .18em; }
.staff-player-profile-add { display: flex; align-items: center; justify-content: flex-end; gap: 9px; min-width: 280px; }
.staff-player-profile-add > span { color: #d8c99d; font-size: 12px; font-weight: 700; white-space: nowrap; }
.staff-player-profile-add .staff-custom-select { min-width: 175px; }
.staff-player-profile-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.staff-player-profile-card {
  position: relative;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(200, 181, 127, .15);
  border-radius: 14px;
  background: rgba(2, 8, 6, .38);
  overflow: hidden;
}
.staff-player-profile-card.is-active { border-color: rgba(192, 215, 126, .45); box-shadow: inset 0 0 28px rgba(94, 122, 67, .09); }
.staff-player-profile-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 11px; }
.staff-player-profile-title > strong { color: #f1e4ba; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.staff-player-profile-title > span { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.staff-player-profile-code { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 10px; margin-bottom: 12px; }
.staff-player-profile-code > span { color: rgba(238, 231, 206, .58); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.staff-player-profile-code code { justify-self: end; max-width: 100%; color: #ead48d; font-size: 13px; font-weight: 800; letter-spacing: .08em; overflow-wrap: anywhere; }
.staff-player-profile-code small { grid-column: 1 / -1; color: rgba(226, 222, 203, .46); font-size: 9px; text-align: right; }
.staff-player-profile-card .staff-button-row { margin-top: 0; gap: 6px; }
.staff-player-profile-card .staff-button-row button { min-height: 30px; padding-inline: 10px; font-size: 10px; }
.staff-role-profile-note { margin: 12px 0 18px; padding: 12px 14px; border: 1px solid rgba(202,171,99,.16); border-radius: 12px; background: rgba(4,11,8,.34); }
.staff-role-profile-note p { margin: 7px 0 0; color: rgba(232,226,204,.57); font-size: 11px; line-height: 1.45; }

@media (max-width: 900px) {
  .staff-player-profile-head { align-items: stretch; flex-direction: column; }
  .staff-player-profile-add { justify-content: flex-start; min-width: 0; width: 100%; }
  .staff-player-profile-add .staff-custom-select { flex: 1 1 auto; min-width: 0; }
  .staff-player-profile-list { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .staff-player-profile-access { padding: 13px; border-radius: 14px; }
  .staff-player-profile-add { align-items: stretch; flex-direction: column; }
  .staff-player-profile-add > span { white-space: normal; }
  .staff-player-profile-code { grid-template-columns: 1fr; }
  .staff-player-profile-code code, .staff-player-profile-code small { justify-self: start; text-align: left; }
}

/* =========================================================
   Staff Panel v254 — Venue-scoped roles, feedback + dropdown stacking
   ========================================================= */
.staff-top-actions {
  display: flex !important;
  align-items: center !important;
}
.staff-top-venue-label {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  max-width: 300px;
  padding: 0 4px;
  color: #e2c978;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  line-height: 1.15;
  text-align: right;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(0,0,0,.75), 0 0 10px rgba(197,155,51,.16);
}
.staff-dashboard-badge span,
.staff-dashboard-badge small { display: block; }
.staff-dashboard-badge small { color: #dbc273 !important; font-weight: 850 !important; letter-spacing: .09em !important; }

.staff-copy-action {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.staff-copy-tooltip,
.staff-created-code-tooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  z-index: 10050;
  transform: translateX(-50%);
  pointer-events: none;
  padding: 5px 9px;
  border: 1px solid rgba(216,190,111,.44);
  border-radius: 7px;
  color: #f5e8bc;
  background: rgba(8,17,13,.97);
  box-shadow: 0 7px 18px rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.04);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  white-space: nowrap;
  animation: staffCopiedTooltipIn .16s ease-out both;
}
@keyframes staffCopiedTooltipIn {
  from { opacity: 0; transform: translate(-50%, 4px) scale(.96); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

.staff-profile-sync-feedback {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  min-width: 144px;
  color: #ddcc99 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .035em;
  white-space: nowrap !important;
}
.staff-profile-sync-feedback > i {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  border: 2px solid rgba(215,190,112,.24);
  border-top-color: #d9bd67;
  border-radius: 50%;
  animation: staffProfileSyncSpin .75s linear infinite;
}
.staff-profile-sync-feedback.is-ready { color: #bed18d !important; }
.staff-profile-sync-feedback.is-ready > i {
  border: 0;
  border-radius: 0;
  animation: none;
}
.staff-profile-sync-feedback.is-ready > i::before { content: "✓"; color: #bed18d; font-style: normal; font-size: 13px; line-height: 12px; }
@keyframes staffProfileSyncSpin { to { transform: rotate(360deg); } }

.staff-player-profile-list {
  grid-template-columns: repeat(auto-fit, minmax(255px, 355px)) !important;
  justify-content: start !important;
}
.staff-player-profile-card { width: 100%; max-width: 355px; }

/* Custom dropdowns inside role/account editors must float above every panel. */
.staff-page:has(.staff-role-editor),
.staff-page:has(.staff-role-editor) .staff-section,
.staff-page:has(.staff-role-editor) .staff-role-layout,
.staff-page:has(.staff-role-editor) .staff-role-editor,
.staff-page:has(.staff-role-editor) .staff-form-grid,
.staff-page:has(.staff-role-editor) .staff-role-profile-note {
  overflow: visible !important;
}
.staff-role-editor .staff-combobox { position: relative !important; }
.staff-role-editor .staff-combobox.is-open { z-index: 100000 !important; }
.staff-role-editor .staff-combobox-menu {
  z-index: 100001 !important;
  isolation: isolate;
}
.staff-role-layout:has(.staff-combobox.is-open) { position: relative !important; z-index: 99990 !important; }

@media (max-width: 1100px) {
  .staff-top-venue-label {
    max-width: 175px;
    font-size: 10px;
    letter-spacing: .08em;
  }
}
@media (max-width: 900px) {
  .staff-player-profile-card { max-width: none; }
  .staff-top-actions { justify-content: flex-end !important; }
  .staff-top-venue-label { display: inline-flex !important; flex: 0 1 auto; }
}
@media (max-width: 560px) {
  .staff-top-venue-label { max-width: 132px; font-size: 9px; white-space: normal; text-align: right; }
  .staff-profile-sync-feedback { min-width: 0; }
}

/* =========================================================
   Staff Panel v254 — dropdown portal + Role catalog refresh
   Every custom select menu is rendered directly under <body>,
   so panel frames, buttons, tables and overflow containers can
   never paint over the option list.
   ========================================================= */
.staff-combobox-portal-menu {
  position: fixed !important;
  z-index: 2147483000 !important;
  right: auto !important;
  margin: 0 !important;
  max-height: min(340px, var(--staff-menu-max-height, 340px)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  isolation: isolate !important;
  transform: translateZ(0) !important;
}

/* The trigger remains in the normal panel layout; only the floating list
   escapes the panel. This prevents the open control from reordering sections. */
.staff-combobox.is-open {
  position: relative !important;
  z-index: 120 !important;
}

/* =========================================================
   Staff Panel v256 — cross-profile Player read-only context,
   Prize Profile tag and Balance Adjustment & History
   ========================================================= */
.staff-prize-profile {
  position: absolute !important;
  top: 8px !important;
  right: 10px !important;
  z-index: 5 !important;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #d8bf75 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 18px !important;
  letter-spacing: .035em;
  text-shadow: 0 1px 6px rgba(218,181,76,.18);
  pointer-events: none;
}
.staff-prize-profile.has-quantity { right: 58px !important; }
.staff-prize-card.is-claimed > .staff-prize-profile { opacity: .55 !important; }

.staff-balance-history-panel {
  margin-top: 16px;
  padding: 13px;
  border: 1px solid rgba(210,176,74,.15);
  border-radius: 13px;
  background:
    linear-gradient(180deg, rgba(16,34,23,.76), rgba(7,20,13,.84)),
    radial-gradient(circle at 14% 0%, rgba(206,169,71,.07), transparent 45%);
  box-shadow: inset 0 1px 0 rgba(255,241,194,.025), inset 0 0 32px rgba(0,0,0,.16);
}
.staff-balance-history-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin: 0 1px 10px;
  padding: 0 2px 9px;
  border-bottom: 1px solid rgba(210,176,74,.10);
}
.staff-balance-history-head > div { display: grid; gap: 2px; }
.staff-balance-history-head span,
.staff-balance-history-row > div > span {
  color: rgba(222,211,178,.50) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .10em;
  text-transform: uppercase;
}
.staff-balance-history-head strong {
  color: #e4cc84;
  font-size: 14px;
  letter-spacing: .02em;
}
.staff-balance-history-head > small {
  color: rgba(222,211,178,.44);
  font-size: 10px;
  white-space: nowrap;
}
.staff-balance-history-list {
  display: grid;
  gap: 7px;
  max-height: 616px; /* seven desktop history rows, then custom scrolling */
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 5px;
  scrollbar-width: thin;
  scrollbar-color: #b78b32 #07180f;
}
.staff-balance-history-list::-webkit-scrollbar { width: 12px; background: #07180f; }
.staff-balance-history-list::-webkit-scrollbar-track { background: linear-gradient(180deg,#06140d,#071b12); border:1px solid rgba(210,176,74,.10); }
.staff-balance-history-list::-webkit-scrollbar-thumb { border:3px solid #07180f; border-radius:999px; background:linear-gradient(180deg,#d5ad45,#8d6722); }
.staff-balance-history-list::-webkit-scrollbar-thumb:hover { background:linear-gradient(180deg,#e6c45c,#a77b2a); }
.staff-balance-history-list::-webkit-scrollbar-button { display:none; width:0; height:0; }
.staff-balance-history-row {
  position: relative;
  min-height: 82px;
  display: grid;
  grid-template-columns: minmax(255px,1.35fr) minmax(122px,.52fr) minmax(132px,.58fr) minmax(220px,1fr);
  align-items: center;
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(197,173,103,.12);
  border-radius: 11px;
  background: linear-gradient(90deg, rgba(21,42,29,.74), rgba(12,29,19,.72));
  box-shadow: inset 0 1px 0 rgba(255,247,214,.018);
}
.staff-balance-history-row::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: rgba(213,180,85,.50);
}
.staff-balance-history-row.is-credit::before { background: rgba(127,181,104,.82); }
.staff-balance-history-row.is-debit::before { background: rgba(191,103,87,.78); }
.staff-balance-history-row > div {
  min-width: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 10px 13px;
  border-left: 1px solid rgba(210,176,74,.08);
}
.staff-balance-history-row > div:first-child { border-left: 0; padding-left: 15px; }
.staff-balance-history-row > div > strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgba(241,234,211,.86);
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}
.staff-balance-history-origin > strong { color: #e0c77e !important; font-size: 12px !important; }
.staff-balance-history-origin > small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(221,213,186,.49);
  font-size: 9.5px;
}
.staff-balance-history-origin > small b { color: rgba(232,218,175,.66); font-weight: 800; }
.staff-balance-history-amount > strong { color: #d9be73 !important; font-size: 13px !important; }
.staff-balance-history-row.is-credit .staff-balance-history-amount > strong { color: #a9c77d !important; }
.staff-balance-history-row.is-debit .staff-balance-history-amount > strong { color: #d58d7c !important; }
.staff-balance-history-reason > strong {
  white-space: normal !important;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  line-height: 1.3;
}
.staff-balance-history-empty { margin-top: 2px; }

@media (max-width: 1100px) {
  .staff-balance-history-row {
    grid-template-columns: minmax(230px,1.4fr) minmax(112px,.55fr) minmax(120px,.62fr) minmax(190px,1fr);
  }
}
@media (max-width: 760px) {
  .staff-prize-profile { top: 9px !important; right: 10px !important; max-width: 120px; }
  .staff-prize-profile.has-quantity { right: 54px !important; }
  .staff-balance-history-head { align-items: flex-start; flex-direction: column; gap: 4px; }
  .staff-balance-history-row {
    min-height: 116px;
    grid-template-columns: minmax(0,1fr) minmax(108px,.45fr);
  }
  .staff-balance-history-row > div { border-left: 0; border-top: 1px solid rgba(210,176,74,.08); padding: 8px 11px; }
  .staff-balance-history-row > div:first-child { grid-column: 1 / -1; border-top: 0; padding: 9px 12px; }
  .staff-balance-history-reason { grid-column: 1 / -1; }
  .staff-balance-history-list { max-height: 868px; }
}

/* v138 — Staff modal backdrop follows the site-wide no-blur rule. */
html body .staff-dialog-backdrop {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: rgba(2, 7, 5, .78) !important;
  background-image: none !important;
}


/* v142 — Card Coffer rarity-pool selector. */
.staff-card-pool-rarity-panel {
  display: grid;
  gap: 10px;
  margin: 12px 0 14px;
  padding: 13px 14px;
  border: 1px solid rgba(214,180,95,.18);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(11,28,18,.78), rgba(17,39,25,.62));
}
.staff-card-pool-rarity-panel > div:first-child { display: grid; gap: 3px; }
.staff-card-pool-rarity-panel > div:first-child > strong { color: #e7ce84; font-size: 12px; letter-spacing: .04em; }
.staff-card-pool-rarity-panel > div:first-child > small { color: rgba(226,218,192,.55); font-size: 10px; }
.staff-card-pool-rarity-panel .staff-toggle-grid { margin: 0; }
.staff-card-pool-warning { margin: 0; color: #eaa198; font-size: 10px; font-weight: 800; }

/* ===== v255 financial dashboard proportions =====
   Card Pack (Tips) intentionally shares the wider Jackpot mini-frame. On the
   six-card desktop row, Players/Lootboxes/Rewards give up exactly the room
   needed so Card Pack and Jackpot Raised have matching widths without growing
   the overall dashboard row. */
@media (min-width: 1451px) {
  .staff-metric-grid {
    grid-template-columns:
      minmax(0, .78fr)
      minmax(0, .78fr)
      minmax(0, .78fr)
      minmax(0, 1.17fr)
      minmax(0, 1.17fr)
      minmax(0, 1.32fr) !important;
  }
}

/* =========================================================
   Rewards — live total percentage mini panel
   ========================================================= */
.staff-rewards-page {
  position: relative !important;
}

.staff-rewards-list-pane {
  overflow: visible !important;
}

.staff-rewards-list-pane > .staff-select-list {
  border-radius: 0 0 inherit inherit;
}

.staff-rewards-total-percentage {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: -43px !important;
  z-index: 55 !important;
  height: 34px !important;
  min-height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(218, 183, 83, .28) !important;
  border-radius: 10px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(39, 66, 47, .20), transparent 56%),
    linear-gradient(145deg, rgba(7, 22, 15, .985), rgba(3, 13, 9, .99)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 7px 18px rgba(0,0,0,.20) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: .01em !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}

.staff-rewards-total-percentage span,
.staff-rewards-total-percentage strong {
  color: inherit !important;
  font: inherit !important;
}

.staff-rewards-total-percentage strong {
  font-weight: 900 !important;
  font-variant-numeric: tabular-nums !important;
}

.staff-rewards-total-percentage.is-incomplete {
  color: #e7c55f !important;
  text-shadow: 0 0 8px rgba(224, 181, 63, .18) !important;
}

.staff-rewards-total-percentage.is-complete {
  color: #74d892 !important;
  border-color: rgba(84, 177, 111, .34) !important;
  text-shadow: 0 0 8px rgba(83, 188, 115, .18) !important;
}

@media (max-width: 1100px) {
  .staff-rewards-total-percentage {
    top: -39px !important;
    height: 31px !important;
    min-height: 31px !important;
    font-size: 12px !important;
  }
}

/* =========================================================
   Rewards — chance ordering / left column alignment
   ========================================================= */
/* Keep the percentage summary and reward list as one visual group, while
   nudging only this Rewards column upward to match the detail panel beside it. */
@media (min-width: 1101px) {
  .staff-rewards-page > .staff-rewards-list-pane {
    /* Sticky positioning can clamp negative margins against its top inset.
       Translate the complete left Rewards group instead so the list, header
       and Total percentage mini-panel visibly move together without
       reflowing or shifting the detail panel on the right. */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    transform: translateY(-98px) !important;
  }
}


/* =========================================================
   Rewards — compact coffer selector + Export action
   ========================================================= */
.staff-rewards-page .staff-rewards-list-pane > .staff-pane-head {
  flex-wrap: nowrap !important;
}

.staff-rewards-page .staff-rewards-list-pane > .staff-pane-head > .staff-pane-select {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: calc(100% - 176px) !important;
}

.staff-rewards-page .staff-rewards-list-pane > .staff-pane-head > .staff-btn {
  flex: 0 0 auto !important;
  min-width: 74px !important;
  padding-left: 11px !important;
  padding-right: 11px !important;
}

@media (max-width: 1100px) {
  .staff-rewards-page .staff-rewards-list-pane > .staff-pane-head > .staff-pane-select {
    max-width: calc(100% - 164px) !important;
  }
  .staff-rewards-page .staff-rewards-list-pane > .staff-pane-head > .staff-btn {
    min-width: 68px !important;
    padding-left: 9px !important;
    padding-right: 9px !important;
  }
}


/* =========================================================
   Staff Panel — Addict Ban state
   ========================================================= */
.staff-btn-ban {
  color: #ffe1dd !important;
  background: linear-gradient(180deg, #b51f24, #6b1116) !important;
  border-color: rgba(255, 79, 84, .88) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 0 0 1px rgba(109, 8, 12, .30), 0 7px 18px rgba(75, 0, 3, .22) !important;
}
.staff-btn-ban:hover:not(:disabled) {
  filter: brightness(1.13) !important;
  border-color: rgba(255, 108, 112, .98) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.10), 0 0 16px rgba(235, 42, 49, .34), 0 8px 20px rgba(65, 0, 3, .28) !important;
}
@keyframes staffAddictBanPulse {
  0%, 100% { box-shadow: inset 0 1px rgba(255,255,255,.08), 0 0 0 1px rgba(128, 9, 13, .38), 0 0 7px rgba(226, 38, 45, .32); }
  50% { box-shadow: inset 0 1px rgba(255,255,255,.12), 0 0 0 1px rgba(255, 82, 87, .74), 0 0 22px rgba(239, 40, 47, .70); }
}
.staff-btn-ban.staff-btn-banned-pulse:not(:disabled) { animation: staffAddictBanPulse 1.45s ease-in-out infinite; }
.staff-btn-ban.staff-btn-banned-pulse:disabled {
  opacity: .78 !important;
  color: #ffd2d0 !important;
  cursor: not-allowed !important;
  box-shadow: inset 0 1px rgba(255,255,255,.06), 0 0 12px rgba(196, 30, 36, .30) !important;
}
.staff-player-list-pane .staff-select-list > button { position: relative !important; }
.staff-player-list-pane .staff-select-list > button.is-banned {
  padding-right: 112px !important;
  background: linear-gradient(90deg, rgba(142, 25, 31, .18), rgba(79, 19, 24, .08)) !important;
  border-color: rgba(204, 62, 68, .23) !important;
  box-shadow: inset 3px 0 rgba(210, 47, 53, .72) !important;
}
.staff-player-list-pane .staff-select-list > button.is-banned.is-active {
  background: linear-gradient(90deg, rgba(162, 31, 37, .25), rgba(119, 78, 31, .10)) !important;
  border-color: rgba(224, 73, 78, .38) !important;
  box-shadow: inset 3px 0 #d93b41, 0 0 0 1px rgba(211, 52, 58, .08) !important;
}
.staff-player-banned-label {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  max-width: 94px !important;
  margin: 0 !important;
  color: #ff9c9f !important;
  font-style: normal !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  letter-spacing: .065em !important;
  text-align: right !important;
  text-transform: uppercase !important;
  white-space: normal !important;
  text-shadow: 0 0 9px rgba(239, 45, 52, .44) !important;
}
.staff-player-ban-pill {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 19px !important;
  padding: 2px 7px !important;
  border: 1px solid rgba(232, 65, 70, .45) !important;
  border-radius: 999px !important;
  background: rgba(136, 22, 27, .22) !important;
  color: #ff9b9e !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: .075em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  box-shadow: 0 0 10px rgba(213, 38, 44, .18) !important;
}
@media (max-width: 700px) {
  .staff-player-list-pane .staff-select-list > button.is-banned { padding-right: 96px !important; }
  .staff-player-banned-label { right: 7px !important; max-width: 82px !important; font-size: 8px !important; }
}

/* =========================================================
   Players — VIP status highlight in the Player list
   ========================================================= */
html body .staff-player-list-pane .staff-select-list > button > small > .staff-player-list-vip {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #f2d37a !important;
  font-size: inherit !important;
  line-height: inherit !important;
  font-weight: 400 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  vertical-align: baseline !important;
  text-shadow: none !important;
}

/* ===== v256 Venue-only financial dashboard =====
   Players/Lootboxes yield horizontal room to the two profit cards without
   increasing the total width of the six-card dashboard row. */
@media (min-width: 1451px) {
  .staff-metric-grid {
    grid-template-columns:
      minmax(0, .55fr)
      minmax(0, .55fr)
      minmax(0, 1.17fr)
      minmax(0, 1.17fr)
      minmax(0, 1.28fr)
      minmax(0, 1.28fr) !important;
  }
}

.staff-venue-financial-history {
  max-height: 340px !important;
}
.staff-venue-financial-history th,
.staff-venue-financial-history td {
  white-space: nowrap !important;
}
.staff-venue-financial-history td:first-child {
  min-width: 190px !important;
}
.staff-empty-table-cell {
  text-align: center !important;
  color: rgba(232, 224, 199, .58) !important;
  font-style: italic !important;
}


/* ===== v257 Venue dashboard layout / Save All / snapshot actions ===== */
@media (min-width: 1101px) {
  .staff-dashboard-grid {
    grid-template-columns: minmax(0, 1.38fr) minmax(430px, .82fr) !important;
  }
}

.staff-save-all-btn {
  min-width: 94px !important;
  width: auto !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  letter-spacing: .025em !important;
}

.staff-venue-financial-history tbody tr.is-context-deletable {
  cursor: context-menu !important;
}
.staff-venue-financial-history tbody tr.is-context-deletable:hover {
  background: rgba(109, 155, 91, .08) !important;
}
.staff-snapshot-context-menu {
  position: fixed !important;
  z-index: 100000 !important;
  min-width: 172px !important;
  padding: 5px !important;
  border: 1px solid rgba(220, 93, 93, .42) !important;
  border-radius: 9px !important;
  background: linear-gradient(180deg, rgba(30, 14, 15, .985), rgba(16, 8, 9, .99)) !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.035) !important;
}
.staff-snapshot-context-menu button {
  width: 100% !important;
  padding: 9px 12px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: #ffaaa8 !important;
  font: inherit !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-align: left !important;
  cursor: pointer !important;
}
.staff-snapshot-context-menu button:hover {
  background: rgba(177, 45, 50, .22) !important;
  color: #ffd0ce !important;
}

.staff-role-copy-panel {
  margin-bottom: 18px !important;
  padding: 14px !important;
  border: 1px solid rgba(198, 166, 84, .19) !important;
  border-radius: 12px !important;
  background: linear-gradient(145deg, rgba(31, 47, 32, .31), rgba(13, 23, 17, .30)) !important;
}
.staff-role-copy-panel > .staff-btn {
  margin-top: 10px !important;
}


/* ===== v258 five-way Venue financial dashboard ===== */
@media (min-width: 1451px) {
  .staff-metric-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}
.staff-metric-card.staff-metric-card-pack > span {
  font-size: 11px !important;
  letter-spacing: .045em !important;
  white-space: nowrap !important;
}
@media (max-width: 1700px) and (min-width: 1451px) {
  .staff-metric-card.staff-metric-card-pack > span {
    font-size: 10px !important;
    letter-spacing: .025em !important;
  }
}

/* ===== v255 Tester finance / Player balance shortcuts ===== */
.staff-balance-adjust-actions {
  align-items: center !important;
}
.staff-balance-adjust-actions .staff-balance-shortcut {
  min-width: 48px !important;
  min-height: 31px !important;
  padding: 6px 9px !important;
  font-size: 9px !important;
  letter-spacing: .035em !important;
  border-radius: 7px !important;
}
.staff-balance-adjust-actions .staff-balance-shortcut-500k {
  color: #d8fff1 !important;
  background: linear-gradient(180deg, #2e7869, #19483f) !important;
  border-color: rgba(82, 184, 158, .72) !important;
}
.staff-balance-adjust-actions .staff-balance-shortcut-1m {
  color: #fff1bf !important;
  background: linear-gradient(180deg, #9b722b, #5f4318) !important;
  border-color: rgba(215, 168, 69, .76) !important;
}
.staff-balance-adjust-actions .staff-balance-shortcut-5m {
  color: #eedfff !important;
  background: linear-gradient(180deg, #704b8f, #432b58) !important;
  border-color: rgba(150, 100, 191, .78) !important;
}
.staff-balance-adjust-actions .staff-balance-shortcut-gap {
  display: block;
  flex: 0 0 8px;
  width: 8px;
  height: 1px;
}

/* ===== v256 Balance shortcuts + stable history performance follow-up ===== */
.staff-balance-adjust-actions .staff-balance-shortcut {
  min-width: 68px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 8px 13px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: .025em !important;
  border-radius: 8px !important;
}
.staff-balance-adjust-actions .staff-balance-shortcut-gap {
  flex-basis: 12px !important;
  width: 12px !important;
}


/* ===== v259 Mobile Staff top actions + full-height sidebar frame ===== */
@media (max-width: 1100px) {
  /* Save All and Add Player share one compact action row on mobile. */
  .staff-top-actions {
    justify-content: flex-end !important;
    column-gap: 10px !important;
    row-gap: 8px !important;
  }
  .staff-top-actions > .staff-save-all-btn {
    flex: 0 0 128px !important;
    width: 128px !important;
    min-width: 128px !important;
    max-width: 128px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    margin-left: auto !important;
    padding: 0 12px !important;
  }
  .staff-top-actions > .staff-btn-gold {
    flex: 0 0 138px !important;
    width: 138px !important;
    min-width: 138px !important;
    max-width: 138px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    margin-left: 0 !important;
  }

  /* Mobile frame: keep the v261 full-height treatment that correctly reaches
     the drawer bottom, then duplicate only the top portion of admborder2 as a
     foreground overlay so it sits above title.png without changing the lower
     border geometry. */
  .staff-sidebar {
    border-left: 1px solid rgba(214, 183, 91, .46) !important;
    border-right: 1px solid rgba(214, 183, 91, .46) !important;
    border-bottom: 1px solid rgba(214, 183, 91, .32) !important;
    background:
      url("/images/admborder2.png") center bottom / 100% auto no-repeat,
      linear-gradient(180deg, rgba(8, 28, 18, .97), rgba(5, 20, 13, .98)),
      radial-gradient(circle at 30% 0%, rgba(205, 169, 65, .08), transparent 34%) !important;
  }
  .staff-sidebar::after {
    content: none !important;
    display: none !important;
  }
  .staff-sidebar::before {
    content: "" !important;
    display: block !important;
    position: fixed !important;
    inset: 0 auto auto 0 !important;
    width: min(340px, 88vw) !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    pointer-events: none !important;
    z-index: 50 !important;
    background: url("/images/admborder2.png") center bottom / 100% auto no-repeat !important;
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 330px, transparent 360px) !important;
    mask-image: linear-gradient(to bottom, #000 0, #000 330px, transparent 360px) !important;
  }
}


/* Global Reviews: confined to the new Staff tab. */
.staff-reviews-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.staff-reviews-toolbar h2{margin:0;color:#f8e5b6}
.staff-reviews-toolbar p{margin:4px 0 0;color:#c9c9b8}
.staff-reviews-list{display:grid;gap:12px}
.staff-review-entry{padding:15px 17px;border:1px solid rgba(223,186,105,.32);border-radius:9px;background:rgba(14,26,19,.69);margin-bottom:10px;overflow-wrap:anywhere}
.staff-review-entry-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.staff-review-entry-top strong{color:#f9e4b6}
.staff-review-entry-top time{margin-left:auto;color:#bdbda8;font-size:.82rem}
.staff-review-stars{color:#f7ca65;font-size:1.1rem;letter-spacing:2px;white-space:nowrap}
.staff-review-message{margin:12px 0;white-space:pre-wrap;color:#eee5d2;line-height:1.5}
.staff-review-actions{display:flex;gap:9px;justify-content:flex-end}
.staff-reviews-empty{padding:10px 0;color:#d6d0bc}
.staff-review-entry small{display:block;color:#c2bca9}
@media(max-width:700px){.staff-reviews-toolbar{align-items:flex-start;flex-direction:column}.staff-review-entry-top time{margin-left:0}}


/* ===== v305 desktop staff footer compact account chip ===== */
@media (min-width: 1101px) {
  .staff-sidebar .staff-user {
    min-height: 49px !important;
    max-height: 57px !important;
    padding: 7px 11px 7px 43px !important;
    margin-top: 0 !important;
    border-radius: 10px !important;
    line-height: 1.08 !important;
  }
  .staff-sidebar .staff-user strong { font-size: 13px !important; line-height: 1.15 !important; }
  .staff-sidebar .staff-user span { font-size: 10px !important; line-height: 1.15 !important; }
}
.staff-review-history-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.staff-review-history-footer small { display:block; flex: 1 1 auto; }
.staff-review-history-footer > button { margin-left:auto; flex:0 0 auto; }
.staff-review-entry-top .staff-review-removed-badge .staff-pill { color:#ffaaa5; background:rgba(132,30,26,.27); border-color:rgba(220,75,67,.7); }
@media (min-width: 1101px) {
  .staff-sidebar .staff-user::before {
    top: 50% !important;
    left: 12px !important;
    width: 22px !important;
    height: 22px !important;
    transform: translateY(-50%);
    font-size: 13px !important;
  }
}


/* ========================================================================== */
/* Players — Card Album counter + compact acquisition layout v255             */
/* ========================================================================== */

.staff-player-card-album-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)) !important;
  gap: 9px !important;
  max-height: 440px !important;
  margin-top: 16px !important;
  padding: 1px 5px 3px 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(197, 158, 57, .58) rgba(5, 18, 11, .66);
}

.staff-player-card-album-grid::-webkit-scrollbar {
  width: 9px;
}

.staff-player-card-album-grid::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(5, 18, 11, .66);
}

.staff-player-card-album-grid::-webkit-scrollbar-thumb {
  border: 2px solid rgba(5, 18, 11, .80);
  border-radius: 999px;
  background: linear-gradient(180deg, #b68d35, #74501d);
}

.staff-player-card-album-entry {
  min-width: 0 !important;
  min-height: 64px !important;
  display: grid !important;
  grid-template-rows: auto auto !important;
  gap: 8px !important;
  padding: 10px 11px 9px !important;
  border: 1px solid rgba(214, 182, 92, .14) !important;
  border-radius: 10px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(205, 167, 67, .055), transparent 44%),
    linear-gradient(145deg, rgba(8, 27, 18, .97), rgba(4, 17, 11, .985)) !important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.018),
    0 5px 13px rgba(0,0,0,.10) !important;
}

.staff-player-card-album-main {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
}

.staff-player-card-album-main > strong {
  min-width: 0 !important;
  overflow: hidden !important;
  color: #e0e7dc !important;
  font-size: 14px !important;
  font-weight: 820 !important;
  line-height: 1.18 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.staff-player-card-album-main > span {
  justify-self: end !important;
  min-width: 64px !important;
  padding: 4px 8px !important;
  border: 1px solid rgba(216, 181, 80, .18) !important;
  border-radius: 999px !important;
  background: rgba(174, 139, 51, .09) !important;
  color: #dccb87 !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  line-height: 1.1 !important;
  text-align: center !important;
  text-transform: uppercase !important;
  letter-spacing: .035em !important;
  white-space: nowrap !important;
}

.staff-player-card-album-entry > small {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 7px !important;
  color: #91a095 !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
}

.staff-player-card-album-entry > small > b {
  color: #708275 !important;
  font-size: 9px !important;
  font-weight: 850 !important;
  text-transform: uppercase !important;
  letter-spacing: .075em !important;
}

.staff-player-card-album-entry > small > time {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.staff-player-card-album-entry[data-rarity="uncommon"] .staff-player-card-album-main > span {
  color: #aed9b6 !important;
  border-color: rgba(109, 179, 128, .25) !important;
  background: rgba(54, 116, 72, .13) !important;
}

.staff-player-card-album-entry[data-rarity="rare"] .staff-player-card-album-main > span {
  color: #a7ceef !important;
  border-color: rgba(91, 151, 204, .27) !important;
  background: rgba(49, 97, 144, .14) !important;
}

.staff-player-card-album-entry[data-rarity="epic"] .staff-player-card-album-main > span {
  color: #d2b5ee !important;
  border-color: rgba(154, 108, 199, .27) !important;
  background: rgba(103, 61, 145, .14) !important;
}

.staff-player-card-album-entry[data-rarity="legendary"] .staff-player-card-album-main > span {
  color: #f0cf79 !important;
  border-color: rgba(222, 177, 64, .30) !important;
  background: rgba(151, 108, 25, .16) !important;
}

.staff-player-card-album-entry[data-rarity="mythic"] .staff-player-card-album-main > span {
  color: #9ae0ad !important;
  border-color: rgba(76, 173, 105, .32) !important;
  background: rgba(37, 116, 61, .16) !important;
  box-shadow: 0 0 10px rgba(73, 173, 102, .07) !important;
}

@media (max-width: 900px) {
  .staff-player-card-album-grid {
    grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)) !important;
    max-height: 420px !important;
  }
}

@media (max-width: 620px) {
  .staff-player-card-album-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ========================================================================== */
/* Players v306 — restore multi-player Export selection feedback              */
/* ========================================================================== */

.staff-player-list-pane.is-export-mode .staff-select-list > button.is-export-choice {
  position: relative !important;
  padding-right: 42px !important;
  cursor: pointer !important;
  border-color: rgba(214, 182, 92, .13) !important;
  transition:
    background .14s ease,
    border-color .14s ease,
    box-shadow .14s ease,
    transform .14s ease !important;
}

.staff-player-list-pane.is-export-mode .staff-select-list > button.is-export-choice:hover {
  background:
    linear-gradient(90deg, rgba(55, 92, 64, .28), rgba(21, 48, 32, .18)) !important;
  border-color: rgba(218, 186, 93, .28) !important;
}

.staff-player-list-pane.is-export-mode .staff-select-list > button.is-export-selected {
  background:
    linear-gradient(90deg, rgba(53, 123, 72, .42), rgba(27, 74, 45, .27)) !important;
  border-color: rgba(111, 194, 123, .72) !important;
  box-shadow:
    inset 3px 0 0 #76c981,
    inset 0 0 20px rgba(81, 168, 98, .09),
    0 0 0 1px rgba(92, 171, 107, .11),
    0 6px 15px rgba(0, 0, 0, .10) !important;
}

.staff-player-list-pane.is-export-mode .staff-select-list > button.is-export-selected > strong {
  color: #e7f6e7 !important;
}

.staff-player-list-pane.is-export-mode .staff-select-list > button.is-export-selected > span {
  color: #b9deb9 !important;
}

.staff-player-list-pane .staff-player-export-check {
  position: absolute !important;
  right: 11px !important;
  top: 50% !important;
  width: 22px !important;
  height: 22px !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  transform: translateY(-50%) !important;
  border: 1px solid rgba(202, 177, 96, .32) !important;
  border-radius: 6px !important;
  background: rgba(5, 22, 13, .72) !important;
  color: transparent !important;
  font-style: normal !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  box-shadow: inset 0 1px rgba(255,255,255,.025) !important;
  pointer-events: none !important;
}

.staff-player-list-pane .staff-select-list > button.is-export-selected .staff-player-export-check {
  color: #d8f1d7 !important;
  border-color: rgba(113, 202, 128, .76) !important;
  background: linear-gradient(180deg, rgba(60, 127, 73, .96), rgba(34, 84, 46, .98)) !important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.08),
    0 0 10px rgba(83, 181, 101, .24) !important;
}

.staff-player-export-button.is-active {
  color: #ddf4dc !important;
  border-color: rgba(101, 188, 116, .78) !important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.08),
    0 0 14px rgba(78, 169, 94, .18) !important;
}


/* ========================================================================== */
/* Staff sidebar v306 — compact desktop footer controls                       */
/* ========================================================================== */

@media (min-width: 1101px) {
  .staff-sidebar {
    gap: 6px !important;
  }

  .staff-sidebar .staff-exit {
    min-height: 35px !important;
    height: 35px !important;
    max-height: 35px !important;
    padding: 5px 10px !important;
    border-radius: 8px !important;
    font-size: 11px !important;
    line-height: 1 !important;
  }
}

/* At resolutions taller than 1080p the navigation has enough vertical room and
   should not show a redundant scrollbar. Lower desktop heights keep the normal
   auto-scroll behavior so every Staff tab remains reachable. */
@media (min-width: 1101px) and (min-height: 1081px) {
  .staff-sidebar nav {
    overflow-y: hidden !important;
  }
}


/* ========================================================================== */
/* Prize Collection v307 — refunded reward state                              */
/* ========================================================================== */

.staff-prize-refunded {
  position: absolute !important;
  top: 8px !important;
  right: 9px !important;
  z-index: 10 !important;
  padding: 4px 9px !important;
  border: 1px solid rgba(255, 135, 127, .88) !important;
  border-radius: 6px !important;
  background: rgba(194, 52, 45, .94) !important;
  color: #fff0ed !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: .085em !important;
  text-transform: uppercase !important;
  text-shadow: 0 1px 2px rgba(55, 4, 2, .72) !important;
  box-shadow: 0 0 10px rgba(238, 66, 56, .42), 0 0 22px rgba(218, 44, 36, .18), inset 0 1px rgba(255,255,255,.18) !important;
}

.staff-prize-card.is-refunded {
  border-color: rgba(194, 75, 67, .25) !important;
  background: linear-gradient(145deg, rgba(42, 22, 19, .70), rgba(20, 14, 12, .84)) !important;
  box-shadow: inset 0 0 30px rgba(38, 4, 2, .16), 0 8px 22px rgba(0,0,0,.22) !important;
}

.staff-prize-card.is-refunded > :not(.staff-prize-refunded) {
  opacity: .42 !important;
  filter: grayscale(.84) saturate(.30) brightness(.68) !important;
}

.staff-prize-card.is-refunded > .staff-prize-quantity,
.staff-prize-card.is-refunded > .staff-prize-profile {
  opacity: .58 !important;
}

.staff-prize-facts strong.is-refunded {
  color: #ef8179 !important;
}

.staff-prize-refund-context-menu button {
  color: #ffd6d1 !important;
}

.staff-prize-refund-context-menu button:hover:not(:disabled) {
  border-color: rgba(215, 81, 69, .62) !important;
  background: linear-gradient(180deg, rgba(126, 48, 40, .96), rgba(78, 29, 25, .98)) !important;
  color: #fff1ee !important;
}


/* ========================================================================== */
/* Prize Collection v308 — partial Delivered / Claimed quantities             */
/* ========================================================================== */

.staff-prize-card.has-partial-claim {
  border-color: rgba(104, 184, 125, .23) !important;
  box-shadow: inset 0 0 24px rgba(68, 145, 88, .035), 0 8px 22px rgba(0, 0, 0, .14) !important;
}
.staff-prize-card.has-partial-claim .staff-prize-claimed {
  background: rgba(58, 173, 91, .94) !important;
  border-color: rgba(157, 255, 183, .76) !important;
  color: #071d0e !important;
  box-shadow: 0 0 9px rgba(79,255,132,.32), 0 0 19px rgba(79,255,132,.14), inset 0 1px rgba(255,255,255,.36) !important;
}
.staff-prize-delivery-check.is-partial i {
  border-color: rgba(107, 210, 135, .58) !important;
  background: linear-gradient(145deg, rgba(37,92,55,.96), rgba(15,52,31,.98)) !important;
}
.staff-prize-delivery-check.is-partial i::after {
  content: "−" !important;
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  height: 100% !important;
  color: #d8ffe2 !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}
.staff-prize-confirm > .staff-prize-claim-editor {
  display: grid !important;
  grid-template-columns: 1fr !important;
  justify-items: center !important;
  gap: 8px !important;
  margin-top: 10px !important;
}
.staff-prize-claim-editor > span {
  color: #8fa292 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}
.staff-prize-claim-stepper {
  display: grid !important;
  grid-template-columns: 32px minmax(66px,auto) 32px !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
}
.staff-prize-claim-stepper button {
  width: 32px !important;
  height: 30px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 1px solid rgba(216,184,85,.32) !important;
  border-radius: 7px !important;
  background: linear-gradient(180deg, rgba(51,80,56,.98), rgba(23,48,31,.99)) !important;
  color: #efd77f !important;
  font-size: 18px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  cursor: pointer !important;
}
.staff-prize-claim-stepper button:disabled { opacity: .35 !important; cursor: not-allowed !important; }
.staff-prize-claim-stepper > strong {
  min-width: 66px !important;
  color: #f2dfa0 !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-align: center !important;
}
.staff-prize-claim-stepper > strong > small {
  margin-left: 3px !important;
  color: #809184 !important;
  font-size: 11px !important;
  font-weight: 750 !important;
}
.staff-prize-confirm > .staff-prize-confirm-actions {
  display: flex !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-top: 11px !important;
}


/* ========================================================================== */
/* Balance History v309 — Refund state + context action                        */
/* ========================================================================== */

.staff-balance-history-row.is-refunded {
  position: relative !important;
  opacity: .68 !important;
  border-color: rgba(191, 73, 64, .28) !important;
  box-shadow: inset 3px 0 0 rgba(186, 60, 52, .76), inset 0 0 22px rgba(130, 38, 32, .045) !important;
}

.staff-balance-history-row.is-refunded > :not(.staff-balance-history-refunded) {
  filter: saturate(.68) !important;
}

.staff-balance-history-refunded {
  position: absolute !important;
  z-index: 6 !important;
  right: 10px !important;
  top: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 20px !important;
  padding: 3px 8px !important;
  border: 1px solid rgba(255, 132, 119, .58) !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(171, 53, 44, .97), rgba(103, 30, 26, .98)) !important;
  color: #ffe2dd !important;
  font-size: 8px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  box-shadow: 0 0 10px rgba(214, 73, 60, .17), inset 0 1px rgba(255,255,255,.08) !important;
  pointer-events: none !important;
}

.staff-balance-history-context-menu > button.is-refund {
  color: #ffd8d1 !important;
}

.staff-balance-history-context-menu > button.is-refund:hover:not(:disabled) {
  background: rgba(128, 45, 37, .48) !important;
  color: #fff0ec !important;
}

/* Staff Panel player presence: online/offline is driven by the existing
   Cloudflare realtime socket, so this changes only the name color. */
html body .staff-player-list-pane .staff-select-list > button.is-presence-online > strong {
  color: #78d990 !important;
}
html body .staff-player-list-pane .staff-select-list > button.is-presence-offline > strong {
  color: #9da69e !important;
}