/* SlavaOS Staff Dashboard — Option A visual adaptation
   Ports the replacement dashboard's Quiet Atelier UI language while keeping
   the original static/Supabase DOM, IDs, routes, and event handlers intact. */
.staff-dashboard-page {
  --atelier-ink: #29242f;
  --atelier-muted: #746d78;
  --atelier-cream: #f5f1eb;
  --atelier-surface: #fffdfa;
  --atelier-line: #e8e0d8;
  --atelier-plum: #6f4bb2;
  --atelier-plum-dark: #55368f;
  --atelier-plum-soft: #eee8fb;
  --atelier-green: #5e8a70;
  --atelier-green-soft: #e6f1e9;
  --atelier-amber: #b67d32;
  --atelier-amber-soft: #fff3db;
  --atelier-coral: #be6c61;
  --atelier-coral-soft: #fae9e5;
  background: var(--atelier-cream);
  color: var(--atelier-ink);
  font-family: "DM Sans", sans-serif;
}
.staff-dashboard-page .app { background: var(--atelier-cream); }
.staff-dashboard-page .sidebar {
  width: 240px; background: #302a36; color: #f8f2ec; padding: 27px 16px 18px;
  border-right: 0; box-shadow: none;
}
.staff-dashboard-page .sidebar .brand { padding: 0 9px 27px; border-bottom: 1px solid rgba(255,255,255,.12); }
.staff-dashboard-page .sidebar .brand-mark { width: 36px; height: 36px; border-radius: 12px; background: #8e6bd0; color: #fff; box-shadow: 0 7px 18px rgba(142,107,208,.25); }
.staff-dashboard-page .sidebar .brand-text b { color: #fff; font-family: "Playfair Display", Georgia, serif; font-size: 18px; }
.staff-dashboard-page .sidebar .brand-text span { color: #c8c0cd; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.staff-dashboard-page .staff-portal-badge { margin: 24px 7px 18px; padding: 14px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); border-radius: 13px; color: #fff; }
.staff-dashboard-page .staff-portal-badge svg { color: #bdb3c6; }
.staff-dashboard-page .nav-group { gap: 5px; }
.staff-dashboard-page .nav-item, .staff-dashboard-page .nav-group button {
  min-height: 44px; border-radius: 10px; color: #c9c0ce; background: transparent;
  font-size: 13px; transition: background .18s ease, color .18s ease, transform .16s ease;
}
.staff-dashboard-page .nav-item:hover, .staff-dashboard-page .nav-group button:hover { background: rgba(255,255,255,.08); color: #fff; }
.staff-dashboard-page .nav-item.active, .staff-dashboard-page .nav-group button.active { background: var(--atelier-plum); color: #fff; box-shadow: 0 8px 18px rgba(0,0,0,.14); }
.staff-dashboard-page .plan-card { margin: auto 7px 0; padding: 14px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); border-radius: 13px; }
.staff-dashboard-page .plan-card b { color: #fff; }
.staff-dashboard-page .plan-card p { color: #c8c0cd; }
.staff-dashboard-page .btn-upgrade { color: #fff; background: var(--atelier-plum); border-radius: 10px; min-height: 38px; }
.staff-dashboard-page .main { width: calc(100% - 240px); margin-left: 240px; background: var(--atelier-cream); }
.staff-dashboard-page .topbar {
  min-height: 77px; background: rgba(255,253,250,.86); border-bottom: 1px solid var(--atelier-line);
  padding: 0 clamp(24px,4vw,58px); backdrop-filter: blur(10px);
}
.staff-dashboard-page .greet-kicker, .staff-dashboard-page .eyebrow, .staff-dashboard-page .section-kicker {
  color: #8a7f8d; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.staff-dashboard-page .greet h1, .staff-dashboard-page .page-title, .staff-dashboard-page .view h2 {
  color: var(--atelier-ink); font-family: "Playfair Display", Georgia, serif; letter-spacing: -.03em;
}
.staff-dashboard-page .greet h1 { font-size: clamp(25px, 3vw, 32px); line-height: 1.08; margin: 7px 0 6px; }
.staff-dashboard-page .greet-sub { color: var(--atelier-muted); font-size: 13px; }
.staff-dashboard-page .content { max-width: 1220px; margin: 0 auto; padding: 42px clamp(24px,4vw,58px) 84px; }
.staff-dashboard-page .staff-ops-strip { margin-bottom: 28px; background: #e9e0f5; border: 1px solid #ddd0ef; border-radius: 15px; box-shadow: none; }
.staff-dashboard-page .staff-ops-strip strong { color: var(--atelier-ink); }
.staff-dashboard-page .staff-ops-eyebrow { color: var(--atelier-plum); letter-spacing: .1em; }
.staff-dashboard-page .card, .staff-dashboard-page .panel, .staff-dashboard-page .modal {
  background: var(--atelier-surface); border: 1px solid var(--atelier-line); border-radius: 14px; box-shadow: 0 8px 22px rgba(65,49,73,.04);
}
.staff-dashboard-page .card-head { border-bottom-color: var(--atelier-line); }
.staff-dashboard-page .card-head-title, .staff-dashboard-page .section-title { color: var(--atelier-ink); font-weight: 700; }
.staff-dashboard-page .btn-primary, .staff-dashboard-page .action-btn-primary-sm, .staff-dashboard-page .auth-submit {
  color: #fff; background: var(--atelier-plum); border-radius: 10px; box-shadow: 0 7px 16px rgba(111,75,178,.18); font-weight: 700;
}
.staff-dashboard-page .btn-primary:hover, .staff-dashboard-page .action-btn-primary-sm:hover { background: var(--atelier-plum-dark); }
.staff-dashboard-page .btn-secondary, .staff-dashboard-page .select-pill, .staff-dashboard-page .search-box {
  background: var(--atelier-surface); border-color: var(--atelier-line); color: #62586a; border-radius: 10px;
}
.staff-dashboard-page input, .staff-dashboard-page select, .staff-dashboard-page textarea { background: #fbf8f4; border-color: var(--atelier-line); color: var(--atelier-ink); }
.staff-dashboard-page input:focus, .staff-dashboard-page select:focus, .staff-dashboard-page textarea:focus { border-color: #b8a0e4; box-shadow: 0 0 0 3px rgba(184,160,228,.22); }
.staff-dashboard-page .cust-stats, .staff-dashboard-page .staff-stats { gap: 10px; }
.staff-dashboard-page .cust-stat, .staff-dashboard-page .stat-card { min-height: 102px; padding: 16px; background: rgba(255,255,255,.75); border: 1px solid rgba(61,44,64,.1); border-radius: 16px; }
.staff-dashboard-page .cust-stat strong, .staff-dashboard-page .stat-card strong { color: var(--atelier-ink); font-family: "Playfair Display", Georgia, serif; font-size: 1.7rem; }
.staff-dashboard-page .staff-grid, .staff-dashboard-page .service-grid { gap: 12px; }
.staff-dashboard-page .staff-card, .staff-dashboard-page .service-card, .staff-dashboard-page .list-row { background: rgba(255,255,255,.76); border: 1px solid rgba(61,44,64,.1); border-radius: 16px; box-shadow: 0 10px 24px rgba(48,42,53,.04); }
.staff-dashboard-page .staff-card:hover, .staff-dashboard-page .service-card:hover, .staff-dashboard-page .list-row:hover { border-color: rgba(112,65,164,.3); transform: translateY(-1px); }
.staff-dashboard-page .status-pill, .staff-dashboard-page .badge { border-radius: 99px; }
.staff-dashboard-page .status-pill.active, .staff-dashboard-page .badge.success { color: #568264; background: var(--atelier-green-soft); }
.staff-dashboard-page .status-pill.pending, .staff-dashboard-page .badge.warning { color: #a9722e; background: var(--atelier-amber-soft); }
.staff-dashboard-page .empty-state { min-height: 260px; color: var(--atelier-muted); border: 1px dashed #ddd4cc; border-radius: 14px; background: rgba(255,255,255,.42); }
.staff-dashboard-page .modal-overlay { background: rgba(48,42,54,.42); backdrop-filter: blur(4px); }
.staff-dashboard-page .modal-head { border-bottom-color: var(--atelier-line); }
.staff-dashboard-page .modal-head b { font-family: "Playfair Display", Georgia, serif; font-size: 21px; }
.staff-dashboard-page .toast { background: #332c38; border-radius: 10px; box-shadow: 0 12px 28px rgba(47,36,53,.2); }
/* QR-based staff signup entry — scoped to #staffPortalEntry only. */
.staff-dashboard-page .staff-portal-qr-card { margin: 18px 0 12px; padding: 18px; border: 1px solid var(--atelier-line); border-radius: 14px; background: rgba(255,253,250,.82); box-shadow: 0 8px 22px rgba(65,49,73,.04); text-align: center; }
.staff-dashboard-page .staff-portal-qr-copy { display: grid; gap: 5px; margin-bottom: 14px; text-align: left; }
.staff-dashboard-page .staff-portal-qr-copy strong { color: var(--atelier-ink); font-size: 14px; }
.staff-dashboard-page .staff-portal-qr-copy span, .staff-dashboard-page .staff-portal-qr-card small, .staff-dashboard-page .staff-portal-qr-fallback { color: var(--atelier-muted); font-size: 11px; line-height: 1.45; }
.staff-dashboard-page .staff-portal-qr-frame { position: relative; width: 172px; height: 172px; margin: 0 auto 15px; border: 2px solid var(--atelier-plum); border-radius: 18px; background: linear-gradient(135deg, rgba(238,232,251,.7), rgba(255,253,250,.9)); overflow: hidden; }
.staff-dashboard-page .staff-portal-qr-frame::before, .staff-dashboard-page .staff-portal-qr-frame::after, .staff-dashboard-page .staff-portal-qr-frame span::before, .staff-dashboard-page .staff-portal-qr-frame span::after { content: ""; position: absolute; width: 24px; height: 24px; border-color: var(--atelier-plum); border-style: solid; }
.staff-dashboard-page .staff-portal-qr-frame::before { top: 14px; left: 14px; border-width: 3px 0 0 3px; }
.staff-dashboard-page .staff-portal-qr-frame::after { top: 14px; right: 14px; border-width: 3px 3px 0 0; }
.staff-dashboard-page .staff-portal-qr-frame span::before { bottom: 14px; left: 14px; border-width: 0 0 3px 3px; }
.staff-dashboard-page .staff-portal-qr-frame span::after { bottom: 14px; right: 14px; border-width: 0 3px 3px 0; }
.staff-dashboard-page .staff-portal-qr-video { display: block; width: 100%; max-height: 260px; margin: 0 auto 15px; border-radius: 12px; object-fit: cover; background: #17131a; }
.staff-dashboard-page .staff-portal-qr-card button { width: 100%; margin-bottom: 8px; }
.staff-dashboard-page .staff-portal-qr-card small { display: block; }
.staff-dashboard-page .staff-portal-qr-fallback { display: flex; justify-content: center; align-items: center; gap: 5px; flex-wrap: wrap; margin: 10px 0 14px; }

@media (max-width: 760px) {
  .staff-dashboard-page .sidebar { width: 240px; }
  .staff-dashboard-page .main { width: 100%; margin-left: 0; }
  .staff-dashboard-page .content { padding: 28px 16px 72px; }
  .staff-dashboard-page .topbar { padding: 0 16px; }
  .staff-dashboard-page .greet h1 { font-size: 25px; }
  .staff-dashboard-page .staff-ops-strip { border-radius: 13px; }
  .staff-dashboard-page .cust-toolbar { align-items: stretch; flex-wrap: wrap; }
  .staff-dashboard-page .search-box { flex: 1 1 100%; max-width: none; }
  .staff-dashboard-page .btn-primary { min-height: 42px; }
}

/* ---------- Staff access: choose a salon (scan / upload / search) ---------- */
.staff-dashboard-page .staff-portal-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 16px 0 4px; border: 1px solid var(--atelier-line); border-radius: 12px; background: rgba(255,253,250,.82); }
.staff-dashboard-page .staff-portal-seg button { min-height: 40px; border: 0; border-radius: 9px; background: transparent; color: var(--atelier-muted); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.staff-dashboard-page .staff-portal-seg button.is-active { background: #fff; color: var(--atelier-plum); box-shadow: 0 2px 8px rgba(65,49,73,.1); }
.staff-dashboard-page .staff-portal-qr-card .btn-secondary { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-left: 0; border: 1.5px solid var(--atelier-line); border-radius: 10px; background: #fff; color: var(--atelier-plum); font-weight: 700; }
.staff-dashboard-page .staff-portal-change-salon { margin-left: auto; font-size: 12px; white-space: nowrap; }
.staff-dashboard-page .staff-portal-find-card, .staff-dashboard-page #staffPortalPickerMount { margin: 14px 0 12px; }

.salon-pick { display: grid; gap: 10px; text-align: left; }
.salon-pick-search { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 12px; border: 1.5px solid var(--atelier-line, #e8e0d8); border-radius: 12px; background: #fff; color: var(--atelier-muted, #746d78); }
.salon-pick-search:focus-within { border-color: var(--atelier-plum, #6f4bb2); box-shadow: 0 0 0 3px rgba(111,75,178,.12); }
.salon-pick-input { flex: 1; min-width: 0; height: 46px; padding: 0; border: 0 !important; outline: 0; box-shadow: none !important; background: transparent !important; font: inherit; font-size: 14px; color: var(--atelier-ink, #29242f); -webkit-appearance: none; appearance: none; }
.salon-pick-input::-webkit-search-cancel-button { display: none; }
.salon-pick-clear { width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(0,0,0,.06); color: inherit; font-size: 18px; line-height: 1; cursor: pointer; }
.salon-pick-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 30px; }
.salon-pick-status { font-size: 12px; color: var(--atelier-muted, #746d78); }
.salon-pick-near { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border: 1px solid var(--atelier-line, #e8e0d8); border-radius: 999px; background: #fff; color: var(--atelier-plum, #6f4bb2); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.salon-pick-near.is-on { background: rgba(111,75,178,.1); border-color: var(--atelier-plum, #6f4bb2); }
.salon-pick-near:disabled { opacity: .6; cursor: progress; }
.salon-pick-list { display: grid; gap: 8px; max-height: min(52vh, 420px); overflow-y: auto; padding: 2px; }
.salon-pick-card { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 12px; border: 1px solid var(--atelier-line, #e8e0d8); border-radius: 14px; background: #fff; text-align: left; font: inherit; color: var(--atelier-ink, #29242f); cursor: pointer; transition: border-color .12s ease, box-shadow .12s ease; }
.salon-pick-card:hover, .salon-pick-card:focus-visible { border-color: var(--atelier-plum, #6f4bb2); box-shadow: 0 6px 16px rgba(65,49,73,.08); outline: 0; }
.salon-pick-logo { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: rgba(111,75,178,.1); color: var(--atelier-plum, #6f4bb2); font-weight: 800; font-size: 14px; }
.salon-pick-logo img { width: 100%; height: 100%; object-fit: cover; }
.salon-pick-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.salon-pick-text b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.salon-pick-text small { font-size: 12px; color: var(--atelier-muted, #746d78); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.salon-pick-dist { flex: 0 0 auto; font-size: 11.5px; font-weight: 700; color: var(--atelier-plum, #6f4bb2); }
.salon-pick-go { flex: 0 0 auto; color: var(--atelier-muted, #746d78); }
.salon-pick-empty { padding: 22px 14px; border: 1px dashed var(--atelier-line, #e8e0d8); border-radius: 14px; text-align: center; font-size: 13px; line-height: 1.5; color: var(--atelier-muted, #746d78); }
.salon-pick-skel { height: 64px; border-radius: 14px; background: linear-gradient(90deg, #f1ece6 25%, #f8f4ef 50%, #f1ece6 75%); background-size: 200% 100%; animation: salonPickShimmer 1.2s linear infinite; }
@keyframes salonPickShimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .salon-pick-skel { animation: none; } }

/* ---------- Staff auth: a full page, not a floating card/modal ----------
   The sign-in / request-access screens used to sit in a small boxed card (border, shadow, rounded) in the
   middle of the screen. Now the content lives directly on the page: brand on top, one centred column,
   no card chrome. Scoped to the staff page's auth screen only. */
body.staff-dashboard-page #authScreen.auth-wrap { display: block; min-height: 100vh; min-height: 100dvh; padding: 0; background: var(--atelier-bg, var(--page-bg)); }
body.staff-dashboard-page #authScreen .auth-card.staff-auth-card { width: 100%; max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body.staff-dashboard-page #authScreen .staff-auth-card .brand { justify-content: flex-start; margin: 0; padding: 22px max(20px, calc((100% - 560px) / 2 + 20px)); border-bottom: 1px solid var(--atelier-line, #e8e0d8); background: rgba(255,253,250,.7); }
body.staff-dashboard-page #authScreen .staff-auth-card .brand-logo-img { height: 30px; width: auto; }
body.staff-dashboard-page #authScreen .staff-portal-entry { width: 100%; max-width: 560px; margin: 0 auto; padding: clamp(28px, 6vh, 64px) 20px 56px; flex: 1; box-sizing: border-box; }
body.staff-dashboard-page #authScreen .staff-portal-entry-head h1 { font-size: clamp(28px, 4vw, 36px); }
body.staff-dashboard-page #authScreen .staff-portal-entry-head p { max-width: 460px; font-size: 14px; }
body.staff-dashboard-page #authScreen .staff-portal-form .form-input, body.staff-dashboard-page #authScreen .staff-portal-secret-field .form-input { min-height: 48px; }
body.staff-dashboard-page #authScreen .staff-portal-entry .btn-primary.auth-submit { min-height: 50px; }
@media (max-width: 480px) {
  body.staff-dashboard-page #authScreen .staff-auth-card .brand { padding: 16px 16px; }
  body.staff-dashboard-page #authScreen .staff-portal-entry { padding: 24px 16px 40px; }
}

/* ---------- Staff auth: polish ---------- */
body.staff-dashboard-page #authScreen .staff-portal-entry-head .staff-portal-eyebrow { display: inline-block; padding: 4px 10px; border-radius: 999px; background: rgba(111,75,178,.1); color: var(--atelier-plum, #6f4bb2); letter-spacing: .08em; }
body.staff-dashboard-page #authScreen .staff-portal-entry-head h1 { margin-top: 10px; }
body.staff-dashboard-page #authScreen .staff-portal-context { border-radius: 12px; }
body.staff-dashboard-page #authScreen .staff-portal-form .form-input:focus, body.staff-dashboard-page #authScreen .staff-portal-secret-field .form-input:focus { border-color: var(--atelier-plum, #6f4bb2); box-shadow: 0 0 0 3px rgba(111,75,178,.14); outline: 0; background: #fff; }
body.staff-dashboard-page #authScreen .staff-portal-entry .btn-primary { border-radius: 12px; box-shadow: 0 8px 20px rgba(111,75,178,.28); transition: transform .12s ease, box-shadow .12s ease; }
body.staff-dashboard-page #authScreen .staff-portal-entry .btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(111,75,178,.34); }
body.staff-dashboard-page #authScreen .staff-portal-entry .btn-primary:disabled { box-shadow: none; }
body.staff-dashboard-page #authScreen .staff-portal-entry-links { padding-top: 16px; border-top: 1px solid var(--atelier-line, #e8e0d8); }
@media (prefers-reduced-motion: reduce) { body.staff-dashboard-page #authScreen .staff-portal-entry .btn-primary { transition: none; } }

/* ---------- Staff auth: spacing + alignment pass ----------
   One spacing scale (8 / 16 / 24): 24px between sections, 20px between fields, 8px label→input. */
body.staff-dashboard-page #authScreen .staff-portal-entry-head { margin: 0 0 24px; }
body.staff-dashboard-page #authScreen .staff-portal-entry-head h1 { margin: 12px 0 10px; line-height: 1.12; }
body.staff-dashboard-page #authScreen .staff-portal-entry-head p { margin: 0; line-height: 1.55; }
body.staff-dashboard-page #authScreen .staff-portal-context { margin: 0 0 24px; padding: 12px 14px; gap: 10px; }
body.staff-dashboard-page #authScreen .staff-portal-callout { margin: 0 0 20px; }

/* fields: every group has the same gap, empty error rows take no space */
body.staff-dashboard-page #authScreen .staff-portal-form .form-group { display: grid; gap: 8px; margin: 0 0 20px; }
body.staff-dashboard-page #authScreen .staff-portal-form .form-label { margin: 0; line-height: 1.3; }
body.staff-dashboard-page #authScreen .staff-portal-form .form-error { margin: 0; }
body.staff-dashboard-page #authScreen .staff-portal-form .form-error:empty { display: none; }
body.staff-dashboard-page #authScreen .staff-portal-form .form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; margin: 0; }
body.staff-dashboard-page #authScreen .staff-portal-form .form-row > .form-group { min-width: 0; }
body.staff-dashboard-page #authScreen .staff-portal-form textarea.form-input { min-height: 96px; padding-top: 12px; line-height: 1.5; }
body.staff-dashboard-page #authScreen .staff-portal-secret-field { position: relative; }
body.staff-dashboard-page #authScreen .staff-portal-show-secret { right: 8px; top: 50%; transform: translateY(-50%); min-height: 32px; padding: 0 10px; }

/* wizard header: steps centred, title row aligned to the form edges */
body.staff-dashboard-page #authScreen .staff-portal-wizard-steps { margin: 0 0 24px; }
body.staff-dashboard-page #authScreen .staff-portal-step-title { margin: 0 0 16px; align-items: center; }
body.staff-dashboard-page #authScreen .staff-portal-step-title strong { font-size: 15px; }
body.staff-dashboard-page #authScreen .staff-portal-step-title span { font-size: 12px; }

/* photo card: avatar and text vertically centred, button sits under the copy at its natural size */
body.staff-dashboard-page #authScreen .staff-portal-photo-row { align-items: center; gap: 16px; margin: 0 0 20px; padding: 16px; }
body.staff-dashboard-page #authScreen .staff-portal-photo-preview { flex: 0 0 64px; width: 64px; height: 64px; }
body.staff-dashboard-page #authScreen .staff-portal-photo-row > div:last-child { min-width: 0; display: grid; justify-items: start; gap: 4px; }
body.staff-dashboard-page #authScreen .staff-portal-photo-row p { margin: 0 0 8px; font-size: 12px; }
body.staff-dashboard-page #authScreen .staff-portal-photo-row .btn-secondary { margin: 0; min-height: 38px; padding: 0 16px; border: 1.5px solid var(--atelier-line, #e8e0d8); border-radius: 10px; background: #fff; color: var(--atelier-plum, #6f4bb2); font-weight: 700; }
body.staff-dashboard-page #authScreen .staff-portal-help { margin: 0 0 20px; }
body.staff-dashboard-page #authScreen .staff-portal-review { margin: 0 0 20px; }

/* actions: Back left, Continue right, one divider only */
body.staff-dashboard-page #authScreen .staff-portal-form-actions { margin: 4px 0 0; padding-top: 20px; gap: 12px; align-items: center; }
body.staff-dashboard-page #authScreen .staff-portal-form-actions button { min-height: 46px; padding: 0 24px; margin: 0; }
body.staff-dashboard-page #authScreen .staff-portal-form-actions .btn-primary { min-width: 140px; box-shadow: 0 6px 16px rgba(111,75,178,.24); }
body.staff-dashboard-page #authScreen .staff-portal-entry .btn-primary.auth-submit { margin: 4px 0 0; width: 100%; }
body.staff-dashboard-page #authScreen .staff-portal-entry-links { margin-top: 24px; padding-top: 20px; justify-content: center; gap: 6px 10px; }
body.staff-dashboard-page #authScreen .staff-portal-signup-form + .staff-portal-entry-links { margin-top: 20px; padding-top: 0; border-top: 0; justify-content: flex-start; }

/* QR / find tabs */
body.staff-dashboard-page #authScreen .staff-portal-seg { margin: 0 0 20px; }
body.staff-dashboard-page #authScreen .staff-portal-qr-card { margin: 0 0 20px; padding: 24px 20px; }
body.staff-dashboard-page #authScreen .staff-portal-qr-card button { margin: 0 0 12px; }
body.staff-dashboard-page #authScreen .staff-portal-qr-card small { margin-top: 4px; }
body.staff-dashboard-page #authScreen .staff-portal-find-card, body.staff-dashboard-page #authScreen #staffPortalPickerMount { margin: 0 0 20px; }
body.staff-dashboard-page #authScreen .salon-pick { gap: 12px; }
body.staff-dashboard-page #authScreen .salon-pick-list { gap: 10px; padding: 2px 0; }

@media (max-width: 480px) {
  body.staff-dashboard-page #authScreen .staff-portal-form .form-row { grid-template-columns: 1fr; }
  body.staff-dashboard-page #authScreen .staff-portal-photo-row { align-items: flex-start; padding: 14px; gap: 14px; }
  body.staff-dashboard-page #authScreen .staff-portal-form-actions button { flex: 1 1 0; padding: 0 12px; }
  body.staff-dashboard-page #authScreen .staff-portal-form-actions #staffPortalSignupBack { margin-right: 0; }
}

/* signup step footer: Back is a clear outlined button on the left */
body.staff-dashboard-page #authScreen .staff-portal-form-actions #staffPortalSignupBack { margin-right: auto; border: 1.5px solid var(--atelier-line, #e8e0d8); background: #fff; color: var(--atelier-ink, #29242f); font-weight: 700; box-shadow: none; }
body.staff-dashboard-page #authScreen .staff-portal-form-actions #staffPortalSignupBack:hover { border-color: var(--atelier-plum, #6f4bb2); color: var(--atelier-plum, #6f4bb2); }
@media (max-width: 480px) { body.staff-dashboard-page #authScreen .staff-portal-form-actions #staffPortalSignupBack { margin-right: 0; } }

/* step 3 review card + step 2 help: readable sizes and a clear hierarchy */
body.staff-dashboard-page #authScreen .staff-portal-form textarea.form-input { resize: vertical; }
body.staff-dashboard-page #authScreen .staff-portal-review { padding: 16px 18px; gap: 4px; border-radius: 14px; }
body.staff-dashboard-page #authScreen .staff-portal-review > span { font-size: 12px; letter-spacing: .02em; }
body.staff-dashboard-page #authScreen .staff-portal-review > strong { font-size: 17px; }
body.staff-dashboard-page #authScreen .staff-portal-review > div { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(0,0,0,.07); gap: 3px; }
body.staff-dashboard-page #authScreen .staff-portal-review > div b { font-size: 14px; color: var(--atelier-ink, #29242f); }
body.staff-dashboard-page #authScreen .staff-portal-review > div span { font-size: 12.5px; }
body.staff-dashboard-page #authScreen .staff-portal-help { padding: 12px 14px; font-size: 12.5px; line-height: 1.5; }
body.staff-dashboard-page #authScreen .staff-portal-status-card { margin: 0 0 20px; padding: 16px 18px; }
body.staff-dashboard-page #authScreen .staff-portal-success-icon { margin: 0 0 16px; }