/* Team › People (platform.js renderTeamBoard): the salon's owner across the
   top, the stylists as big cards with their picture on the left, then every
   other group side by side, then other linked accounts. The salon owner
   drags people between groups; holding Option (Alt) adds a group without
   leaving the old one. Pressing a card opens the person. */
body.pro-mode .dashboard-shell .dashboard-content .rl-team-board-wrap {
  display: grid;
  gap: 12px;
  min-width: 0;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-team-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-team-group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  align-items: start;
  gap: 18px;
  min-width: 0;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-team-lane {
  --lane: #6650b8;
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 18px;
  border: 1px solid #e3e8e6;
  border-radius: 22px;
  background: #fff;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-team-lane.is-owner-lane {
  padding: 0;
  border: 0;
  background: transparent;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-team-lane.is-stylist-lane {
  gap: 16px;
  padding: 22px 24px 24px;
  border: 0;
  border-radius: 28px;
  background: #e9eee9;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-team-lane-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  min-height: 30px;
}

/* The dashboard sizes every heading on its pages (with !important). */
body.pro-mode .dashboard-shell .dashboard-content .rl-team-lane-head h3 {
  margin: 0;
  color: #18211e;
  font-size: 17px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-team-lane-titles {
  display: grid;
  gap: 4px;
  min-width: 0;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-team-lane-titles small {
  color: #1f6b52;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-team-lane-head.is-stage h3 {
  font-size: 24px !important;
  letter-spacing: -0.02em;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-team-lane-dot {
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: 50%;
  background: var(--lane);
}

body.pro-mode .dashboard-shell .dashboard-content .rl-team-lane-count {
  min-width: 24px;
  padding: 2px 8px;
  border-radius: 999px;
  color: #4c5a55;
  background: #eef1f0;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-team-lane-requests {
  padding: 2px 9px;
  border-radius: 999px;
  color: #9a5b12;
  background: #fdf0dc;
  font-size: 12px;
  font-weight: 700;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-team-lane-settings {
  display: grid;
  width: 36px;
  height: 36px;
  margin-left: auto;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 11px;
  color: #6b7a74;
  background: transparent;
  cursor: pointer;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-team-lane-settings:hover {
  color: #18211e;
  background: #eef1f0;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-team-lane-settings svg {
  width: 17px;
  height: 17px;
}

/* Where cards land. */
body.pro-mode .dashboard-shell .dashboard-content .rl-team-drop {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  align-content: start;
  gap: 10px;
  min-height: 76px;
  padding: 4px;
  border: 1.5px dashed transparent;
  border-radius: 18px;
  transition: border-color 140ms ease, background-color 140ms ease;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-team-lane.is-stylist-lane .rl-team-drop {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
  gap: 18px;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-team-board.is-dragging .rl-team-drop {
  border-color: #d3dcd8;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-team-drop.is-over {
  border-color: var(--lane);
  background: color-mix(in srgb, var(--lane) 9%, transparent);
}

body.pro-mode .dashboard-shell .dashboard-content .rl-team-drop.is-blocked {
  border-color: #e7c9c4;
  background: #fbf3f2;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-team-empty {
  grid-column: 1 / -1;
  display: grid;
  min-height: 64px;
  margin: 0;
  padding: 0 10px;
  place-items: center;
  color: #8b9792;
  font-size: 13px;
  text-align: center;
}

/* The salon's owner. */
.rl-team-owner {
  position: relative;
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  padding: 20px 24px;
  border: 1px solid #e6e1f0;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 24px 50px -36px rgb(60 40 120 / 35%);
}

.rl-team-owner:has(.rl-team-lane-settings) {
  padding-right: 64px;
}

.rl-team-owner-photo {
  position: relative;
  width: 84px;
  height: 84px;
}

.rl-team-owner-picture,
.rl-team-card-photo,
.rl-team-tile-picture {
  display: grid;
  overflow: hidden;
  place-items: center;
  color: var(--team-color, #6650b8);
  background: color-mix(in srgb, var(--team-color, #6650b8) 18%, #fff);
}

.rl-team-owner-picture {
  width: 84px;
  height: 84px;
  border-radius: 22px;
}

/* A picture is part of the card: pressing on it picks the card up, not the
   picture. */
.rl-team-owner-picture img,
.rl-team-card-photo img,
.rl-team-tile-picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
}

.rl-team-owner-picture b,
.rl-team-card-photo b,
.rl-team-tile-picture b {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.rl-team-owner-picture b {
  font-size: 26px;
}

.rl-team-owner-badge {
  position: absolute;
  right: -7px;
  bottom: -7px;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 10px;
  color: #fff;
  background: #7c5cd6;
  box-shadow: 0 0 0 4px #fff;
}

.rl-team-owner-badge svg {
  width: 16px;
  height: 16px;
}

.rl-team-owner-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.rl-team-owner-copy small {
  color: #7c5cd6;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.rl-team-owner-copy strong {
  overflow: hidden;
  color: #18211e;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rl-team-owner-copy span {
  color: #66726d;
  font-size: 14px;
}

.rl-team-owner-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.rl-team-owner-counts > span {
  display: grid;
  min-width: 88px;
  padding: 10px 12px;
  justify-items: center;
  border-radius: 16px;
  background: #f6f3fc;
}

.rl-team-owner-counts b {
  color: #18211e;
  font-size: 24px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.rl-team-owner-counts small {
  color: #66726d;
  font-size: 12px;
}

.rl-team-owner > .rl-team-lane-settings {
  position: absolute;
  top: 14px;
  right: 14px;
}

/* A person. */
.rl-team-card {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 76px;
  padding: 10px 12px 10px 10px;
  border: 1px solid #e3e8e6;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 1px 2px rgb(20 35 30 / 4%);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 320ms cubic-bezier(0.2, 0.9, 0.2, 1), opacity 160ms ease;
}

.rl-team-card[data-team-draggable] {
  cursor: grab;
}

.rl-team-card:not(.is-request):hover {
  transform: translateY(-3px);
}

.rl-team-card:focus-visible {
  outline: 3px solid rgb(124 92 214 / 45%);
  outline-offset: 3px;
}

.rl-team-card.is-held {
  transform: scale(1.03);
  box-shadow: 0 8px 22px rgb(20 35 30 / 16%);
}

.rl-team-card.is-dragging {
  opacity: 0.35;
}

.rl-team-card-photo {
  width: 56px;
  height: 56px;
  border-radius: 16px;
}

.rl-team-card-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.rl-team-card-copy strong {
  overflow: hidden;
  color: #18211e;
  font-size: 15px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rl-team-card-copy small {
  display: -webkit-box;
  overflow: hidden;
  color: #66726d;
  font-size: 12.5px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* What a press opens; the card itself is what's pressed. */
.rl-team-card-open {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  pointer-events: none;
}

/* A stylist: their picture on the left, title, name and numbers on the right.
   The edge is drawn inside a 2px padding: a hairline for anyone, a turning
   gradient for an active stylist. */
.rl-team-card.rl-team-tile {
  isolation: isolate;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  min-height: 196px;
  padding: 2px;
  overflow: hidden;
  border: 0;
  border-radius: 24px;
  background: #fff;
  box-shadow: inset 0 0 0 1px #e3e8e6, 0 18px 40px -32px rgb(20 35 30 / 35%);
}

.rl-team-card.rl-team-tile:hover {
  transform: translateY(-5px);
}

/* An active stylist: a gradient square behind the card turns on the
   compositor (no repaint), and the card's white face covers all of it but
   the 2px rim. */
.rl-team-tile.is-bookable {
  background: transparent;
  box-shadow: 0 18px 40px -32px rgb(20 35 30 / 35%);
}

.rl-team-tile.is-bookable::before {
  content: "";
  position: absolute;
  z-index: -2;
  top: 50%;
  left: 50%;
  width: 170%;
  aspect-ratio: 1;
  background: conic-gradient(#57c7a0, #93a2f7, #7c5cd6, #f0a7c7, #57c7a0);
  transform: translate(-50%, -50%) rotate(0deg);
  animation: rl-team-ring 5s linear infinite;
  will-change: transform;
}

.rl-team-tile.is-bookable::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 2px;
  border-radius: 22px;
  background: #fff;
}

@keyframes rl-team-ring {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* While a window is open over the board, the rings stand still. */
.rl-team-board-wrap.is-covered .rl-team-tile.is-bookable::before {
  animation-play-state: paused;
}

.rl-team-tile-photo {
  position: relative;
  overflow: hidden;
  border-radius: 22px 0 0 22px;
}

.rl-team-tile-picture {
  width: 100%;
  height: 100%;
}

.rl-team-tile-picture b {
  font-size: 34px;
}

.rl-team-tile-picture img {
  transition: transform 800ms cubic-bezier(0.2, 0.9, 0.2, 1);
}

.rl-team-tile:hover .rl-team-tile-picture img {
  transform: scale(1.07);
}

.rl-team-tile-status {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  color: #fff;
  background: rgb(31 107 82 / 90%);
  font-size: 12px;
  font-weight: 700;
}

.rl-team-tile-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7ff0c5;
}

.rl-team-tile.is-off {
  background: #fafbfa;
}

.rl-team-tile.is-off .rl-team-tile-copy {
  background: #fafbfa;
}

.rl-team-tile.is-off .rl-team-tile-picture img {
  filter: grayscale(0.85);
}

.rl-team-tile.is-off .rl-team-tile-status {
  background: rgb(104 78 60 / 90%);
}

.rl-team-tile.is-off .rl-team-tile-status i {
  background: #e7b48f;
}

.rl-team-tile-copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 18px 18px 16px;
  border-radius: 0 22px 22px 0;
}

.rl-team-tile-head {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.rl-team-tile-head small {
  overflow: hidden;
  color: #6650b8;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.rl-team-tile-head strong {
  overflow: hidden;
  color: #18211e;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rl-team-tile.is-off .rl-team-tile-head small {
  color: #66726d;
}

.rl-team-tile.is-off .rl-team-tile-head strong {
  color: #3d4743;
}

.rl-team-tile-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  color: #66726d;
  font-size: 13px;
}

.rl-team-tile-stats b {
  color: #18211e;
  font-size: 18px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.rl-team-tile.is-off .rl-team-tile-stats b {
  color: #3d4743;
}

.rl-team-tile-booked {
  display: grid;
  gap: 6px;
  margin-top: auto;
}

.rl-team-tile-booked > span:first-child {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: #66726d;
  font-size: 12px;
}

.rl-team-tile-booked b {
  color: #18211e;
  font-variant-numeric: tabular-nums;
}

.rl-team-tile-bar {
  display: block;
  height: 7px;
  overflow: hidden;
  border-radius: 99px;
  background: #e9eeeb;
}

/* The fill grows by transform (no layout while it moves). */
.rl-team-tile-bar i {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #57c7a0, #7c5cd6);
  transform: scaleX(var(--fill, 0));
  transform-origin: left center;
  transition: transform 600ms cubic-bezier(0.2, 0.9, 0.2, 1);
  animation: rl-team-fill 1100ms cubic-bezier(0.2, 0.9, 0.2, 1) backwards;
  animation-delay: calc(min(var(--i, 0), 12) * 45ms + 220ms);
}

@keyframes rl-team-fill {
  from { transform: scaleX(0); }
}

.rl-team-card.is-request {
  grid-template-columns: 56px minmax(0, 1fr);
  border-style: dashed;
  border-color: #e7c79b;
  background: #fffaf2;
  cursor: default;
}

.rl-team-request-actions {
  display: flex;
  grid-column: 1 / -1;
  justify-content: flex-end;
  gap: 8px;
}

/* Everyone arrives one after another, once: an update keeps the cards where
   they are (patchTeamRender), and a card that changes group glides there. */
@keyframes rl-team-rise {
  from { opacity: 0; transform: translateY(14px); }
}

.rl-team-board .rl-team-owner,
.rl-team-board .rl-team-card {
  animation: rl-team-rise 560ms cubic-bezier(0.2, 0.9, 0.25, 1) backwards;
  animation-delay: calc(min(var(--i, 0), 12) * 45ms);
}

/* The card under the pointer while it moves (it follows by transform; its
   tilt is rotate and scale, which add to that). */
.rl-team-card.rl-team-ghost {
  cursor: grabbing;
  rotate: -1.5deg;
  scale: 1.03;
  box-shadow: 0 16px 34px rgb(20 35 30 / 20%);
  transition: none;
}

.rl-team-card.rl-team-tile.rl-team-ghost {
  rotate: -2deg;
  scale: 0.9;
  box-shadow: 0 30px 60px -20px rgb(20 35 30 / 45%), 0 0 0 2px #93a2f7;
}

.rl-team-card.rl-team-ghost.is-copy::after {
  content: "+";
  position: absolute;
  top: -8px;
  right: -8px;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #7c5cd6;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

@media (max-width: 640px) {
  body.pro-mode .dashboard-shell .dashboard-content .rl-team-lane.is-stylist-lane {
    padding: 18px 14px;
    border-radius: 24px;
  }

  .rl-team-owner {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 14px;
    padding: 16px;
  }

  .rl-team-owner-photo,
  .rl-team-owner-picture {
    width: 64px;
    height: 64px;
  }

  .rl-team-owner-copy strong {
    font-size: 21px;
  }

  .rl-team-owner-badge {
    right: -5px;
    bottom: -5px;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    box-shadow: 0 0 0 3px #fff;
  }

  .rl-team-owner-badge svg {
    width: 13px;
    height: 13px;
  }

  .rl-team-owner-counts {
    grid-column: 1 / -1;
  }

  .rl-team-owner-counts > span {
    flex: 1 1 0;
    min-width: 0;
  }

  .rl-team-card.rl-team-tile {
    grid-template-columns: 108px minmax(0, 1fr);
    min-height: 160px;
  }

  .rl-team-tile-copy {
    gap: 10px;
    padding: 14px;
  }

  .rl-team-tile-head strong {
    font-size: 19px;
  }

  .rl-team-tile-stats b {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rl-team-tile.is-bookable::before {
    animation: none;
  }

  .rl-team-board .rl-team-owner,
  .rl-team-board .rl-team-card,
  .rl-team-tile-bar i {
    animation: none;
  }

  .rl-team-card,
  .rl-team-tile-picture img,
  .rl-team-tile-bar i,
  body.pro-mode .dashboard-shell .dashboard-content .rl-team-drop {
    transition: none;
  }
}

/* Active or deactivated, in the stylist's detail: a row like the panel's
   other switches (label left, switch right), the explanation under it. */
body.pro-mode .business-team-drawer-layer[data-team-drawer="access-editor"] .business-stylist-seat.rl-stylist-status {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 6px;
  padding: 6px 16px 14px;
}

.rl-stylist-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0 2px;
}

.rl-stylist-status-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.rl-stylist-status-copy small {
  color: #6b7a74;
  font-size: 12px;
  font-weight: 600;
}

.rl-stylist-status-copy strong {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #18211e;
  font-size: 16px;
}

.rl-stylist-status-copy strong > i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2f8872;
}

.rl-stylist-status.is-inactive .rl-stylist-status-copy strong {
  color: #8a5a3c;
}

.rl-stylist-status.is-inactive .rl-stylist-status-copy strong > i {
  background: #c98a5e;
}

.rl-stylist-status-copy p {
  margin: 2px 0 0;
  color: #6b7a74;
  font-size: 13px;
  line-height: 1.45;
}

.rl-stylist-status-button {
  flex: none;
  min-width: 118px;
  min-height: 40px;
  border-radius: 999px;
}

/* An account's Groups panel: Disconnect on the left. */
.rl-member-roles-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.rl-stylist-status-note {
  margin: 0;
  color: #6b7a74;
  font-size: 13px;
  line-height: 1.45;
}


/* A person's windows, in the middle of the screen like Add booking. The
   stylist's is wide, in two columns (status, groups and booking rules on
   the left; hours, pay and profile on the right); the account window for
   anyone not in Stylist is narrow: who they are, their groups, Disconnect. */
body.pro-mode .business-team-drawer-layer.is-centered.rl-stylist-window > .business-team-drawer:not(#rl) {
  display: flex !important;
  flex-direction: column !important;
  max-width: 1180px !important;
  height: auto !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

body.pro-mode .business-team-drawer-layer.is-centered.rl-stylist-window .business-team-drawer-header:not(#rl) {
  flex: none !important;
  padding: 20px 28px 16px !important;
  border-bottom: 1px solid #e3e8e6 !important;
}

body.pro-mode .business-team-drawer-layer.is-centered.rl-stylist-window .business-team-drawer-body:not(#rl) {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
}

body.pro-mode .rl-stylist-window form[data-business-form="membership"]:not(#rl),
body.pro-mode .rl-stylist-window .rl-member-window-body:not(#rl) {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Settings | Profile, under the window's title; the line under the chosen
   one slides across. */
body.pro-mode .rl-stylist-window .rl-stylist-tabs {
  position: relative;
  display: flex;
  flex: none;
  gap: 28px;
  padding: 0 28px;
  border-bottom: 1px solid #e3e8e6;
}

body.pro-mode .rl-stylist-window .rl-stylist-tabs > button {
  position: relative;
  min-height: 46px;
  padding: 0;
  border: 0;
  color: #66726d;
  background: transparent;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: color 160ms ease;
}

body.pro-mode .rl-stylist-window .rl-stylist-tabs > button::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  border-radius: 2px;
  background: #18211e;
  transform: scaleX(0);
  transition: transform 260ms cubic-bezier(0.2, 0.9, 0.2, 1);
}

body.pro-mode .rl-stylist-window .rl-stylist-tabs > button.active {
  color: #18211e;
}

body.pro-mode .rl-stylist-window .rl-stylist-tabs > button.active::after {
  transform: scaleX(1);
}

body.pro-mode .rl-stylist-window .rl-stylist-tabs > button:focus-visible {
  outline: 3px solid rgb(124 92 214 / 40%);
  outline-offset: 2px;
  border-radius: 6px;
}

body.pro-mode .rl-stylist-window .rl-stylist-panel:not([hidden]) {
  animation: rl-stylist-panel-in 240ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

@keyframes rl-stylist-panel-in {
  from { opacity: 0; transform: translateY(6px); }
}

/* The window scrolls in one place: a plain box around the fields (a
   fieldset is not a reliable scroll box). */
body.pro-mode .rl-stylist-window .rl-stylist-window-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

body.pro-mode .rl-stylist-window .business-access-editor-fields:not(#rl) {
  min-width: 0 !important;
  margin: 0 !important;
  padding: 20px 28px 28px !important;
  border: 0 !important;
}

body.pro-mode .rl-stylist-window-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 18px;
  margin-top: 14px;
}

body.pro-mode .rl-stylist-window-column {
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
}

body.pro-mode .rl-stylist-window-column > :is(section, .business-form-grid):not(#rl) {
  margin: 0 !important;
}

body.pro-mode .rl-stylist-window .business-access-editor-footer:not(#rl) {
  position: static !important;
  flex: none !important;
  margin: 0 !important;
  padding: 14px 28px !important;
  border-top: 1px solid #e3e8e6 !important;
  background: #fff !important;
}

body.pro-mode .business-team-drawer-layer.is-centered.rl-account-window > .business-team-drawer:not(#rl) {
  max-width: 680px !important;
  height: auto !important;
  max-height: 100% !important;
  overflow-y: auto !important;
}

body.pro-mode .rl-account-window .business-team-drawer-header:not(#rl) {
  padding: 22px 26px 14px !important;
}

body.pro-mode .rl-account-window .business-team-drawer-body:not(#rl) {
  padding: 0 26px 22px !important;
}

body.pro-mode .rl-account-window .rl-account-window-avatar:not(#rl) {
  width: 56px;
  height: 56px;
}

body.pro-mode .rl-account-window .business-member-roles-editor > header .business-team-avatar {
  display: none;
}

body.pro-mode .rl-account-window .business-member-roles-editor > footer.rl-member-roles-footer:not(#rl) {
  display: flex !important;
  justify-content: space-between !important;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #e3e8e6;
}

body.pro-mode .rl-member-roles-footer .outline-button.danger:not(#rl) {
  border-color: #ecc5bf !important;
  color: #a8382c !important;
}

body.pro-mode .rl-member-roles-footer .outline-button.danger:not(#rl):hover {
  background: #fbf0ee !important;
}

@media (max-width: 900px) {
  body.pro-mode .rl-stylist-window-columns {
    grid-template-columns: minmax(0, 1fr);
  }

  body.pro-mode .rl-stylist-window .rl-stylist-tabs {
    padding: 0 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.pro-mode .rl-stylist-window .rl-stylist-panel:not([hidden]) {
    animation: none;
  }

  body.pro-mode .rl-stylist-window .rl-stylist-tabs > button::after {
    transition: none;
  }
}

/* Whose profile a card is: their own account, the owner's, or the salon's. */
.rl-team-tile-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.rl-team-tile-top > small {
  min-width: 0;
}

.rl-team-kind {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-self: start;
  gap: 4px;
  width: max-content;
  padding: 2px 8px 2px 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

.rl-team-kind svg {
  width: 12px;
  height: 12px;
}

.rl-team-kind.is-account {
  color: #2c5aa0;
  background: #e8f0fb;
}

.rl-team-kind.is-owner {
  color: #5b45a8;
  background: #efeafb;
}

.rl-team-kind.is-salon {
  color: #7a5a1c;
  background: #f8efdd;
}

.rl-team-card-copy .rl-team-kind {
  margin: 2px 0 1px;
}

/* Link an account (platform.js renderLinkAccountWindow): the salon code and a
   profile the salon makes on the left, the request form on the right. */
body.pro-mode .business-team-drawer-layer.is-centered.rl-link-window > .business-team-drawer:not(#rl),
body.pro-mode .business-team-drawer-layer.is-centered.rl-request-window > .business-team-drawer:not(#rl) {
  display: flex !important;
  flex-direction: column !important;
  max-width: 1040px !important;
  height: auto !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

body.pro-mode .business-team-drawer-layer.is-centered.rl-request-window > .business-team-drawer:not(#rl) {
  max-width: 760px !important;
}

body.pro-mode :is(.rl-link-window, .rl-request-window) .business-team-drawer-header:not(#rl) {
  flex: none !important;
  padding: 20px 28px 16px !important;
  border-bottom: 1px solid #e3e8e6 !important;
}

body.pro-mode :is(.rl-link-window, .rl-request-window) .business-team-drawer-body:not(#rl) {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
}

body.pro-mode :is(.rl-link-window-scroll, .rl-request-scroll) {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 22px 28px 26px;
}

body.pro-mode .rl-request-scroll {
  display: grid;
  align-content: start;
  gap: 16px;
}

body.pro-mode :is(.rl-link-window, .rl-request-window) .business-team-drawer-footer:not(#rl) {
  position: static !important;
  flex: none !important;
  margin: 0 !important;
  padding: 14px 28px !important;
  border-top: 1px solid #e3e8e6 !important;
  background: #fff !important;
}

.rl-link-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: start;
  gap: 18px;
}

.rl-link-column {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.rl-link-card {
  display: grid;
  gap: 14px;
  padding: 20px;
  border: 1px solid #e3e8e6;
  border-radius: 20px;
  background: #fff;
}

.rl-link-card header {
  display: grid;
  gap: 6px;
}

.rl-link-card header .eyebrow {
  margin: 0;
}

.rl-link-card h3 {
  margin: 0;
  color: #18211e;
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em;
}

.rl-link-card header p {
  margin: 0;
  color: #66726d;
  font-size: 13.5px;
  line-height: 1.5;
}

.rl-link-code-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 10px 16px;
  border: 1.5px dashed #c9d6d0;
  border-radius: 16px;
  background: #f6f9f7;
}

.rl-link-code-row code {
  overflow: hidden;
  color: #1f6b52;
  font-size: 20px;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-overflow: ellipsis;
}

.rl-link-code-row .outline-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  border-radius: 999px;
}

.rl-link-code-row .outline-button svg {
  width: 15px;
  height: 15px;
}

.rl-link-create .solid-button {
  justify-self: start;
  min-height: 44px;
  border-radius: 999px;
}

.rl-link-form {
  background: #fbfcfb;
}

.rl-link-form-list {
  display: grid;
  gap: 2px;
}

.rl-link-form-row {
  display: flex !important;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 4px 6px !important;
  border: 0 !important;
  border-radius: 12px;
  background: transparent !important;
}

.rl-link-form-row .business-booking-policy-copy {
  display: grid;
  flex: 1 1 auto;
  gap: 1px;
  min-width: 0;
}

.rl-link-form-row .business-booking-policy-copy strong {
  color: #18211e;
  font-size: 14px;
  font-weight: 650;
}

.rl-link-form-row .business-booking-policy-copy small {
  color: #66726d;
  font-size: 12px;
}

.rl-link-form-row.is-locked {
  opacity: 0.85;
}

.rl-link-form-lock {
  display: grid;
  width: 38px;
  height: 22px;
  flex: none;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: #1f6b52;
}

.rl-link-form-lock svg {
  width: 13px;
  height: 13px;
}

.rl-link-form-portfolio.is-on {
  border-radius: 14px;
  background: #f1f6f3;
}

.rl-link-form-count {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 10px 10px 56px;
  color: #4c5a55;
  font-size: 13px;
}

.rl-link-form-stepper {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border: 1px solid #d6dfdb;
  border-radius: 999px;
  background: #fff;
}

.rl-link-form-stepper button {
  display: grid;
  width: 32px;
  height: 32px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #18211e;
  background: transparent;
  cursor: pointer;
}

.rl-link-form-stepper button:hover:not(:disabled) {
  background: #eef3f1;
}

.rl-link-form-stepper button:disabled {
  opacity: 0.35;
  cursor: default;
}

.rl-link-form-stepper svg {
  width: 14px;
  height: 14px;
}

.rl-link-form-stepper strong {
  min-width: 22px;
  color: #18211e;
  font-size: 15px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* The Profile tab and a request: cards of facts, photos and the editor. */
.rl-profile-card {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 18px 20px 20px;
  border: 1px solid #e3e8e6;
  border-radius: 20px;
  background: #fff;
}

.rl-profile-card > header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.rl-profile-eyebrow {
  color: #1f6b52;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.rl-profile-count {
  padding: 2px 9px;
  border-radius: 999px;
  color: #4c5a55;
  background: #eef1f0;
  font-size: 12px;
  font-weight: 700;
}

.rl-profile-count.is-done {
  color: #1f6b52;
  background: #e3f3ec;
}

.rl-profile-required-note {
  color: #66726d;
  font-size: 12px;
}

/* Facts read as a short list: a small label over each answer, three to a
   row, nothing boxed. The same list shows in a join request, in a linked
   account's Profile and in a request opened from Notifications. */
.rl-profile-facts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr));
  gap: 18px 24px;
}

.rl-profile-fact {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  min-width: 0;
  padding: 0;
  border-radius: 0;
  background: none;
}

.rl-profile-fact.is-wide {
  grid-column: 1 / -1;
}

.rl-profile-fact-icon {
  display: grid;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  place-items: center;
  border-radius: 0;
  color: #6f8a80;
  background: none;
}

.rl-profile-fact-icon svg {
  width: 16px;
  height: 16px;
}

.rl-profile-fact small {
  display: block;
  margin-bottom: 2px;
  color: #6b7772;
  font-size: 12px;
  font-weight: 500;
}

.rl-profile-fact strong {
  display: block;
  overflow-wrap: anywhere;
  color: #18211e;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}

.rl-profile-bio {
  margin: 0;
  color: #34403b;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-line;
}

.rl-profile-social {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 6px;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  color: #18211e;
  background: #f5f7f6;
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
}

.rl-profile-social svg {
  width: 15px;
  height: 15px;
}

.rl-profile-empty {
  margin: 0;
  color: #66726d;
  font-size: 13.5px;
}

.rl-profile-card.is-empty p {
  margin: 0;
  color: #66726d;
}

.rl-profile-photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 8px;
}

.rl-profile-photos a {
  display: block;
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: 14px;
  background: #eef1f0;
}

.rl-profile-photos img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms cubic-bezier(0.2, 0.9, 0.2, 1);
}

.rl-profile-photos a:hover img {
  transform: scale(1.05);
}

/* Their picture, or their initials on a soft disc. */
.rl-request-window .rl-request-photo {
  display: grid;
  overflow: hidden;
  width: 60px;
  height: 60px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, var(--team-color, #7c5cd6), color-mix(in srgb, var(--team-color, #7c5cd6) 55%, #1f6b52));
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.rl-request-window .rl-request-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rl-request-window .rl-request-photo b {
  font: inherit;
}

/* A join request: About, the portfolio, and the group they're accepted
   into, as plain sections divided by a line. */
.rl-req-section {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.rl-req-section + .rl-req-section {
  padding-top: 20px;
  border-top: 1px solid #edf0ee;
}

.rl-req-section > h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #18211e;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
}

.rl-req-group-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.pro-mode .rl-request-window button.rl-req-group:not(#rl) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  min-height: 40px;
  padding: 0 16px 0 13px;
  border: 1px solid #dfe5e2;
  border-radius: 999px;
  background: #fff;
  color: #34403b;
  font-size: 14px;
  font-weight: 600;
  box-shadow: none;
  cursor: pointer;
}

body.pro-mode .rl-request-window button.rl-req-group:not(#rl):hover {
  border-color: color-mix(in srgb, var(--role-color) 45%, #dfe5e2);
}

body.pro-mode .rl-request-window button.rl-req-group.is-on:not(#rl) {
  border-color: var(--role-color);
  background: color-mix(in srgb, var(--role-color) 10%, #fff);
  color: #18211e;
}

.rl-req-group i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--role-color);
}

body.pro-mode .rl-request-window .rl-req-accept:not(#rl) {
  min-width: 0;
  padding-inline: 20px;
  border-color: #1f6b52;
  background: #1f6b52;
  color: #fff;
}

body.pro-mode .rl-request-window .rl-req-accept:not(#rl):hover {
  border-color: #164f3d;
  background: #164f3d;
}

body.pro-mode .rl-stylist-panel .rl-stylist-window-column > .rl-profile-card {
  margin: 0;
}

body.pro-mode .rl-stylist-window .rl-profile-editor .business-stylist-profile-fields:not(#rl) {
  margin: 0 !important;
  padding: 0 !important;
}

@media (max-width: 860px) {
  .rl-link-columns {
    grid-template-columns: minmax(0, 1fr);
  }

  body.pro-mode :is(.rl-link-window-scroll, .rl-request-scroll) {
    padding: 18px;
  }
}

/* A request's header: their picture beside their name, × at the end. */
body.pro-mode .business-team-drawer-layer[data-team-drawer="link-request"] .business-team-drawer-header.has-media:not(#rl),
body.pro-mode .business-team-drawer-layer.rl-request-window[data-team-drawer="notification-detail"] .business-team-drawer-header.has-media:not(#rl) {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 16px !important;
}

/* The request form's switches in two columns; Name and the photos across. */
.rl-link-form-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 10px;
}

.rl-link-form-list > .rl-link-form-row.is-locked,
.rl-link-form-list > .rl-link-form-portfolio {
  grid-column: 1 / -1;
}

.rl-link-form-count {
  padding-left: 62px;
}

@media (max-width: 560px) {
  .rl-link-form-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Team › Groups & access (platform.js renderAccessRoleManager): a row of
   groups with a + at its end, then the open group's areas as one-line rows of
   steps beside a small dashboard drawn from what the group may see. */
body.pro-mode .dashboard-shell .dashboard-content .rl-access {
  display: grid;
  gap: 18px;
  min-width: 0;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-group-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-group-chip {
  --role-color: #6650b8;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 44px;
  padding: 0 6px 0 0;
  border: 1px solid #e1e6e4;
  border-radius: 999px;
  background: #fff;
  transition:
    border-color 220ms ease,
    background-color 220ms ease,
    box-shadow 260ms ease,
    transform 260ms cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

body.pro-mode .dashboard-shell .dashboard-content .rl-group-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(20, 32, 28, 0.08);
}

body.pro-mode .dashboard-shell .dashboard-content .rl-group-chip.is-selected {
  border-color: color-mix(in srgb, var(--role-color) 55%, #fff);
  background: color-mix(in srgb, var(--role-color) 9%, #fff);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--role-color) 16%, transparent);
}

body.pro-mode .dashboard-shell .dashboard-content .rl-group-chip-main {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 10px 0 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #18211e;
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-group-chip-main strong {
  font-weight: 650;
  white-space: nowrap;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-group-dot {
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: 50%;
  background: var(--role-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--role-color) 20%, transparent);
}

body.pro-mode .dashboard-shell .dashboard-content .rl-group-count {
  min-width: 22px;
  padding: 2px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--role-color) 14%, #f2f4f3);
  color: color-mix(in srgb, var(--role-color) 70%, #1b2420);
  font-size: 0.78rem;
  font-weight: 700;
  text-align: center;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-group-tools {
  display: inline-flex;
  gap: 2px;
  animation: rl-group-tools-in 260ms cubic-bezier(0.2, 0.9, 0.3, 1) both;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-group-tool {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #5b6763;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-group-tool:hover {
  background: #fff;
  color: #18211e;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-group-tool.is-danger:hover {
  color: #b23b32;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-group-tool .icon,
body.pro-mode .dashboard-shell .dashboard-content .rl-group-add .icon {
  width: 16px;
  height: 16px;
}

/* Naming a group: the chip keeps a plain border in the group's color. The
   name box inside stays clear, without the tinted surface every other
   focused field gets (focus.css paints it from --text-entry-focus-surface). */
body.pro-mode .dashboard-shell .dashboard-content .rl-group-chip.is-editing {
  padding: 0 14px 0 16px;
  gap: 9px;
  border-color: var(--role-color);
  box-shadow: none;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-group-chip.is-editing input[data-access-group-input] {
  --text-entry-focus-surface: transparent;
  --text-entry-border: transparent;
  width: 15ch;
  min-height: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: #18211e;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 650;
  box-shadow: none;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-group-chip.is-new {
  animation: rl-group-grow 340ms cubic-bezier(0.2, 0.9, 0.3, 1.25) both;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-group-add {
  position: relative;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1.5px dashed #c9d2ce;
  border-radius: 50%;
  background: #fff;
  color: #4d5955;
  cursor: pointer;
  transition:
    border-color 200ms ease,
    color 200ms ease,
    transform 320ms cubic-bezier(0.2, 0.9, 0.3, 1.4);
}

body.pro-mode .dashboard-shell .dashboard-content .rl-group-add:hover {
  border-color: #1f8a6f;
  border-style: solid;
  color: #1f8a6f;
  transform: rotate(90deg) scale(1.06);
}

/* A new group pops in with a ring that spreads and fades. */
body.pro-mode .dashboard-shell .dashboard-content .rl-group-chip.is-arriving {
  animation: rl-group-arrive 620ms cubic-bezier(0.2, 0.9, 0.3, 1.3) both;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-group-chip.is-arriving::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  pointer-events: none;
  animation: rl-group-ring 820ms ease-out both;
}

/* A deleted group folds away: it shrinks, lifts and fades, and the row
   closes the gap. */
body.pro-mode .dashboard-shell .dashboard-content .rl-group-chip.is-leaving {
  pointer-events: none;
  animation: rl-group-leave 320ms cubic-bezier(0.5, 0, 0.75, 0) both;
}

@keyframes rl-group-arrive {
  0% { opacity: 0; transform: scale(0.4) translateY(6px); }
  60% { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes rl-group-ring {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--role-color) 55%, transparent); }
  100% { box-shadow: 0 0 0 18px color-mix(in srgb, var(--role-color) 0%, transparent); }
}

@keyframes rl-group-leave {
  0% { opacity: 1; transform: scale(1); max-width: 320px; }
  100% { opacity: 0; transform: scale(0.6) translateY(-6px); max-width: 0; margin-right: -10px; padding: 0; }
}

@keyframes rl-group-grow {
  0% { opacity: 0; transform: scale(0.6); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes rl-group-tools-in {
  0% { opacity: 0; transform: translateX(-6px); }
  100% { opacity: 1; transform: none; }
}

/* The editor: rows on the left, the preview beside them. */
body.pro-mode .dashboard-shell .dashboard-content .rl-access-editor {
  --role-color: #6650b8;
  display: grid;
  gap: 22px;
  min-width: 0;
  animation: rl-access-in 320ms ease both;
}

/* Quick setup on the left; the colour key and View as on the right. */
body.pro-mode .dashboard-shell .dashboard-content .rl-access-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-access-toolbar-end {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
}

@keyframes rl-access-in {
  0% { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: none; }
}

body.pro-mode .dashboard-shell .dashboard-content .rl-access-controls {
  display: grid;
  gap: 14px;
  min-width: 0;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-access-presets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-access-presets-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 4px;
  color: #5b6763;
  font-size: 0.82rem;
  font-weight: 650;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-access-presets-label .icon {
  width: 15px;
  height: 15px;
  color: var(--role-color);
}

body.pro-mode .dashboard-shell .dashboard-content .rl-access-preset {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 14px 0 12px;
  border: 1px solid #e1e6e4;
  border-radius: 999px;
  background: #fff;
  color: #26302c;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-access-preset:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--role-color) 45%, #e1e6e4);
}

body.pro-mode .dashboard-shell .dashboard-content .rl-access-preset .icon {
  width: 15px;
  height: 15px;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-access-preset-check {
  display: grid;
  width: 0;
  overflow: hidden;
  place-items: center;
  transition: width 220ms ease;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-access-preset.is-on {
  border-color: var(--role-color);
  background: color-mix(in srgb, var(--role-color) 10%, #fff);
  color: color-mix(in srgb, var(--role-color) 75%, #111);
}

body.pro-mode .dashboard-shell .dashboard-content .rl-access-preset.is-on .rl-access-preset-check {
  width: 15px;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-access-saving {
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--role-color);
  opacity: 0;
  transition: opacity 200ms ease;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-access-editor.is-saving .rl-access-saving {
  opacity: 1;
  animation: rl-access-pulse 900ms ease-in-out infinite;
}

/* A change saving: the pressed step (or Quick setup) spins, and the group's
   other steps wait until it has saved. */
body.pro-mode .dashboard-shell .dashboard-content .rl-access-editor.is-saving :is(.rl-seg-option, .rl-access-preset)[aria-disabled="true"] {
  cursor: progress;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-access-editor.is-saving .rl-access-preset[aria-disabled="true"]:hover {
  transform: none;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-access-editor.is-saving .rl-seg-option[aria-disabled="true"]:not(.is-on) {
  color: #b3bcb8;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-seg-option.is-pending {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-seg-option .rl-seg-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-access-spinner {
  display: block;
  flex: none;
  width: 11px;
  height: 11px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: rl-access-spin 700ms linear infinite;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-access-preset.is-pending .rl-access-preset-check {
  width: 15px;
}

@keyframes rl-access-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  body.pro-mode .dashboard-shell .dashboard-content .rl-access-spinner {
    animation-duration: 1400ms;
  }
}

@keyframes rl-access-pulse {
  0%, 100% { transform: scale(0.7); opacity: 0.45; }
  50% { transform: scale(1.15); opacity: 1; }
}

body.pro-mode .dashboard-shell .dashboard-content .rl-access-list {
  display: grid;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #e3e8e6;
  border-radius: 20px;
  background: #fff;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-access-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 8px 14px 8px 14px;
  border-top: 1px solid #eef1f0;
  transition: background-color 160ms ease;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-access-list > .rl-access-row:first-child {
  border-top: 0;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-access-row:hover {
  background: #fafbfb;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-access-row > strong {
  display: -webkit-box;
  overflow: hidden;
  color: #18211e;
  font-size: 0.95rem;
  font-weight: 620;
  line-height: 1.2;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-access-row-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 11px;
  background: color-mix(in srgb, var(--role-color) 11%, #f4f6f5);
  color: color-mix(in srgb, var(--role-color) 80%, #1b2420);
  transition: background-color 220ms ease, color 220ms ease, filter 220ms ease;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-access-row-icon .icon {
  width: 18px;
  height: 18px;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-access-row[data-tone="own"] .rl-access-row-icon {
  background: var(--tone-own-soft);
  color: var(--tone-own);
}

body.pro-mode .dashboard-shell .dashboard-content .rl-access-row[data-tone="all"] .rl-access-row-icon {
  background: var(--tone-all-soft);
  color: var(--tone-all);
}

body.pro-mode .dashboard-shell .dashboard-content .rl-access-row[data-tone="edit"] .rl-access-row-icon {
  background: var(--tone-edit-soft);
  color: var(--tone-edit);
}

body.pro-mode .dashboard-shell .dashboard-content .rl-access-row[data-tone="off"] .rl-access-row-icon {
  background: #f2f4f3;
  color: #9aa5a1;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-access-row[data-step="off"] > strong,
body.pro-mode .dashboard-shell .dashboard-content .rl-access-row[data-step="hidden"] > strong {
  color: #7c8884;
}

/* Inside Customers: phone and email, and notes, unfold under it. */
body.pro-mode .dashboard-shell .dashboard-content .rl-access-details {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

body.pro-mode .dashboard-shell .dashboard-content .rl-access-details[data-open="true"] {
  grid-template-rows: 1fr;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-access-details-inner {
  min-height: 0;
  overflow: hidden;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-access-row.is-sub {
  min-height: 50px;
  padding-left: 30px;
  border-top-style: dashed;
  background: #fbfcfc;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-access-row.is-sub .rl-access-row-icon {
  width: 28px;
  height: 28px;
  border-radius: 9px;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-access-row.is-sub > strong {
  font-size: 0.9rem;
  font-weight: 560;
}

/* Steps: a pill whose thumb slides to the step that's on. */
body.pro-mode .dashboard-shell .dashboard-content .rl-seg {
  --seg-count: 3;
  --seg-index: 0;
  --seg-pad: 3px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--seg-count), minmax(0, 1fr));
  width: calc(var(--seg-count) * var(--seg-w, 72px));
  max-width: 100%;
  padding: var(--seg-pad);
  border-radius: 999px;
  background: #f0f2f1;
  isolation: isolate;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-seg-thumb {
  position: absolute;
  top: var(--seg-pad);
  bottom: var(--seg-pad);
  left: var(--seg-pad);
  z-index: -1;
  width: calc((100% - 2 * var(--seg-pad)) / var(--seg-count));
  border-radius: 999px;
  background: var(--role-color);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--role-color) 35%, transparent);
  transform: translateX(calc(var(--seg-index) * 100%));
  transition:
    transform 340ms cubic-bezier(0.2, 0.9, 0.25, 1.1),
    background-color 240ms ease,
    box-shadow 240ms ease;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-seg[data-tone="off"] .rl-seg-thumb {
  background: #fff;
  box-shadow: 0 1px 4px rgba(20, 32, 28, 0.14);
}

body.pro-mode .dashboard-shell .dashboard-content .rl-seg[data-tone="own"] .rl-seg-thumb {
  background: var(--tone-own);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--tone-own) 35%, transparent);
}

body.pro-mode .dashboard-shell .dashboard-content .rl-seg[data-tone="all"] .rl-seg-thumb {
  background: var(--tone-all);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--tone-all) 35%, transparent);
}

body.pro-mode .dashboard-shell .dashboard-content .rl-seg[data-tone="edit"] .rl-seg-thumb {
  background: var(--tone-edit);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--tone-edit) 35%, transparent);
}

body.pro-mode .dashboard-shell .dashboard-content .rl-seg-option {
  min-height: 32px;
  padding: 0 6px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #4d5955;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  transition: color 200ms ease;
}

/* Five steps (Working hours) fit their words in a little less room. */
body.pro-mode .dashboard-shell .dashboard-content .rl-seg[style*="--seg-count:5"] .rl-seg-option {
  padding: 0 2px;
  font-size: 0.74rem;
  letter-spacing: -0.01em;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-seg-option:hover:not(:disabled):not(.is-on) {
  color: #18211e;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-seg-option.is-on {
  color: #fff;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-seg[data-tone="off"] .rl-seg-option.is-on {
  color: #26302c;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-seg-option:disabled {
  cursor: default;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-seg-option:disabled:not(.is-on) {
  color: #b3bcb8;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-seg-option:focus-visible {
  outline: 2px solid var(--role-color);
  outline-offset: 1px;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-access-locked {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 0 4px;
  color: #6c7874;
  font-size: 0.82rem;
  font-weight: 600;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-access-locked > .icon {
  width: 15px;
  height: 15px;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-access-locked-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f2f4f3;
  color: #6c7874;
  font-weight: 560;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-access-locked-chip .icon {
  width: 13px;
  height: 13px;
}

/* The picture: one item at a time. Green is their own, blue is everyone's,
   violet marks what they may change, gray is hidden. */
body.pro-mode .dashboard-shell .dashboard-content .rl-access-editor {
  --tone-own: #2c9d72;
  --tone-own-soft: #e3f4ec;
  --tone-all: #3b7bd8;
  --tone-all-soft: #e5eefb;
  --tone-edit: #8558e8;
  --tone-edit-soft: #efe8fd;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-access-section {
  display: grid;
  grid-template-columns: minmax(420px, 500px) minmax(0, 1fr);
  align-items: start;
  gap: 8px 16px;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-access-section > h4 {
  grid-column: 1 / -1;
}

/* While its picture scrolls by, a section's rows stay beside it. */
body.pro-mode .dashboard-shell .dashboard-content .rl-access-section > .rl-access-list {
  position: sticky;
  top: 16px;
}

@media (max-width: 1180px) {
  body.pro-mode .dashboard-shell .dashboard-content .rl-access-section > .rl-access-list {
    position: static;
  }
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-section {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid #e3e8e6;
  border-radius: 22px;
  background: linear-gradient(180deg, #ffffff, #f8faf9);
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-says {
  margin: -2px 0 0;
  color: #4d5955;
  font-size: 0.8rem;
  line-height: 1.35;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-needs {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 6px 9px;
  border-radius: 9px;
  background: #fff4e3;
  color: #8a5300;
  font-size: 0.76rem;
  font-weight: 600;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-needs .icon {
  width: 13px;
  height: 13px;
  flex: none;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-access-section > h4 {
  margin: 4px 4px 0;
  color: #5b6763;
  font-size: 0.74rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-access-row.is-scene {
  background: color-mix(in srgb, var(--role-color) 6%, #fff);
  box-shadow: inset 3px 0 0 var(--role-color);
}

body.pro-mode .dashboard-shell .dashboard-content .rl-access-row.is-detail {
  padding-left: 30px;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-access-row.is-detail .rl-access-row-icon {
  width: 28px;
  height: 28px;
  border-radius: 9px;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-access-row.is-dimmed > strong,
body.pro-mode .dashboard-shell .dashboard-content .rl-access-row.is-dimmed .rl-seg {
  opacity: 0.45;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-access-needs {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 7px;
  border-radius: 50%;
  background: #e0952a;
  box-shadow: 0 0 0 3px rgba(224, 149, 42, 0.18);
  vertical-align: middle;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 0 2px;
  color: #6c7874;
  font-size: 0.74rem;
  font-weight: 600;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-key > i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-key.is-own > i { background: var(--tone-own); }
body.pro-mode .dashboard-shell .dashboard-content .rl-pv-key.is-all > i { background: var(--tone-all); }
body.pro-mode .dashboard-shell .dashboard-content .rl-pv-key.is-edit > i { background: var(--tone-edit); }
body.pro-mode .dashboard-shell .dashboard-content .rl-pv-key.is-off > i { background: #6c7874; }

/* The item under the pointer: what its step means and where it shows. */

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  overflow: hidden;
  border-radius: 18px;
  background: #f3f6f5;
  color: #18211e;
  box-shadow: 0 0 0 1px #e6ebe9;
  transition: box-shadow 220ms ease, background-color 220ms ease, opacity 220ms ease;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-card.is-wide {
  grid-column: 1 / -1;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-card.is-focus {
  background: color-mix(in srgb, var(--role-color) 5%, #f3f6f5);
  box-shadow: 0 0 0 2.5px var(--role-color), 0 10px 22px color-mix(in srgb, var(--role-color) 18%, transparent);
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-card > header {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: #3e4945;
  font-size: 0.82rem;
  font-weight: 700;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-card > header .icon {
  width: 15px;
  height: 15px;
  flex: none;
  color: #6c7874;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-card > header > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-chip {
  margin-left: auto;
  padding: 2px 9px;
  border-radius: 999px;
  background: #e3e8e6;
  color: #4d5955;
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 750;
  white-space: nowrap;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-card[data-tone="own"] .rl-pv-chip { background: var(--tone-own); color: #fff; }
body.pro-mode .dashboard-shell .dashboard-content .rl-pv-card[data-tone="all"] .rl-pv-chip { background: var(--tone-all); color: #fff; }
body.pro-mode .dashboard-shell .dashboard-content .rl-pv-card[data-tone="edit"] .rl-pv-chip { background: var(--tone-edit); color: #fff; }

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-mini {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: #5b6763;
  font-size: 0.8rem;
  font-weight: 700;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-mini .icon {
  width: 14px;
  height: 14px;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-body {
  display: grid;
  gap: 8px;
  min-width: 0;
}

/* A part the group can't open at all goes under frosted glass. */
body.pro-mode .dashboard-shell .dashboard-content .rl-pv-off {
  position: absolute;
  inset: 40px 0 0;
  display: grid;
  place-items: center;
  border-radius: 0 0 18px 18px;
  background: rgba(243, 246, 245, 0.62);
  color: #6c7874;
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: opacity 280ms ease;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-off .icon {
  width: 24px;
  height: 24px;
  padding: 10px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 12px rgba(16, 24, 21, 0.12);
  box-sizing: content-box;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-card.is-off .rl-pv-off {
  opacity: 1;
}

/* One line: blurred behind a lock when hidden, a violet pencil when it may
   be changed, a green edge when it's their own and blue when it's others'. */
body.pro-mode .dashboard-shell .dashboard-content .rl-pv-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 38px;
  padding: 5px 38px 5px 11px;
  border-radius: 11px;
  background: #fff;
  box-shadow: inset 4px 0 0 color-mix(in srgb, var(--tone-all) 70%, transparent);
  font-size: 0.88rem;
  transition: background-color 260ms ease, box-shadow 260ms ease;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-item.is-mine {
  box-shadow: inset 4px 0 0 var(--tone-own);
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-v {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 10px;
  min-width: 0;
  overflow: hidden;
  transition: filter 300ms ease, opacity 300ms ease;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-v > span,
body.pro-mode .dashboard-shell .dashboard-content .rl-pv-v > small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-v > .icon {
  width: 16px;
  height: 16px;
  flex: none;
  color: #6c7874;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-v > b {
  margin-left: auto;
  font-weight: 750;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-v > small {
  margin-left: auto;
  color: #7c8884;
  font-size: 0.78rem;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-v > small + b {
  margin-left: 14px;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-item.is-masked {
  background: #eef1f0;
  box-shadow: inset 4px 0 0 #d5dbd8;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-item.is-masked .rl-pv-v {
  filter: blur(5px);
  opacity: 0.45;
  user-select: none;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-lock,
body.pro-mode .dashboard-shell .dashboard-content .rl-pv-pencil {
  position: absolute;
  top: 50%;
  right: 10px;
  display: grid;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  place-items: center;
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 240ms ease, transform 300ms cubic-bezier(0.2, 0.9, 0.3, 1.4);
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-lock {
  background: #fff;
  color: #6c7874;
  box-shadow: 0 2px 8px rgba(16, 24, 21, 0.14);
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-pencil {
  background: var(--tone-edit);
  color: #fff;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-lock .icon,
body.pro-mode .dashboard-shell .dashboard-content .rl-pv-pencil .icon {
  width: 13px;
  height: 13px;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-item.is-masked > .rl-pv-lock,
body.pro-mode .dashboard-shell .dashboard-content .is-masked > .rl-pv-col-day > .rl-pv-lock,
body.pro-mode .dashboard-shell .dashboard-content .rl-pv-pencil.is-on {
  opacity: 1;
  transform: scale(1);
}

/* Things they can press, on or off. */
body.pro-mode .dashboard-shell .dashboard-content .rl-pv-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 2px;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px dashed #c9d2ce;
  border-radius: 999px;
  color: #9aa5a1;
  font-size: 0.8rem;
  font-weight: 650;
  text-decoration: line-through;
  transition: background-color 240ms ease, color 240ms ease, border-color 240ms ease;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-action .icon {
  width: 14px;
  height: 14px;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-action.is-on {
  border: 1px solid transparent;
  background: var(--tone-edit);
  color: #fff;
  text-decoration: none;
}

/* Appointments: three columns of a day. */
body.pro-mode .dashboard-shell .dashboard-content .rl-pv-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-col {
  display: grid;
  gap: 6px;
  min-width: 0;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-col-name {
  overflow: hidden;
  color: #5b6763;
  font-size: 0.8rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-col-day {
  position: relative;
  height: 150px;
  border-radius: 14px;
  background: #fff;
  transition: background-color 280ms ease;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-col-day > i {
  position: absolute;
  right: 8px;
  left: 8px;
  display: flex;
  align-items: flex-start;
  padding: 6px 8px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--tone-all) 22%, #fff);
  box-shadow: inset 3px 0 0 var(--tone-all);
  color: #1f3a66;
  font-size: 0.74rem;
  font-style: normal;
  font-weight: 700;
  transition: opacity 280ms ease, transform 280ms ease;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-col.is-mine .rl-pv-col-day > i {
  background: color-mix(in srgb, var(--tone-own) 20%, #fff);
  box-shadow: inset 3px 0 0 var(--tone-own);
  color: #17553f;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-col-day > i > .rl-pv-pencil {
  top: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  margin-top: 0;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-col-day > .rl-pv-lock {
  top: 50%;
  right: auto;
  left: 50%;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-col.is-masked .rl-pv-col-day {
  background: repeating-linear-gradient(135deg, #eaeeec 0 7px, #f6f8f7 7px 14px);
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-col.is-masked .rl-pv-col-day > i {
  opacity: 0;
  transform: scale(0.92);
}

/* Working hours: a week per person. */
body.pro-mode .dashboard-shell .dashboard-content .rl-pv-week,
body.pro-mode .dashboard-shell .dashboard-content .rl-pv-week-row .rl-pv-v {
  display: grid;
  grid-template-columns: 74px repeat(7, minmax(0, 1fr));
  gap: 6px;
  align-items: center;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-week {
  padding: 0 40px 0 12px;
  color: #7c8884;
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-week-name {
  font-weight: 700;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-day {
  height: 16px;
  border-radius: 5px;
  background: #eef1f0;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-day.is-on {
  background: color-mix(in srgb, var(--tone-all) 45%, #fff);
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-item.is-mine .rl-pv-day.is-on {
  background: color-mix(in srgb, var(--tone-own) 50%, #fff);
}

/* People, customers, messages. */
body.pro-mode .dashboard-shell .dashboard-content .rl-pv-person {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 40px 6px 2px;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-avatar {
  display: grid;
  width: 44px;
  height: 44px;
  flex: none;
  place-items: center;
  border-radius: 50%;
  background: var(--tone-own-soft);
  color: var(--tone-own);
  font-size: 0.82rem;
  font-weight: 800;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-person b {
  display: block;
  font-size: 1rem;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-person small {
  color: #6c7874;
  font-size: 0.8rem;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-dot-avatar {
  display: grid;
  width: 30px;
  height: 30px;
  flex: none;
  place-items: center;
  border-radius: 50%;
  background: #e9eeec;
  color: #4d5955;
  font-size: 0.68rem;
  font-weight: 800;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-two {
  display: grid;
  min-width: 0;
  line-height: 1.25;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-two b,
body.pro-mode .dashboard-shell .dashboard-content .rl-pv-two small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-two small {
  color: #6c7874;
  font-size: 0.76rem;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-stars {
  color: #e2a417;
  letter-spacing: 1px;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-people {
  display: grid;
  gap: 8px;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-appt,
body.pro-mode .dashboard-shell .dashboard-content .rl-pv-composer {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 6px 12px;
  border: 1px dashed #c9d2ce;
  border-radius: 12px;
  color: #4d5955;
  font-size: 0.84rem;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-appt .icon,
body.pro-mode .dashboard-shell .dashboard-content .rl-pv-composer .icon {
  width: 16px;
  height: 16px;
  flex: none;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-appt small {
  margin-left: auto;
  color: #7c8884;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-composer {
  justify-content: space-between;
  color: #9aa5a1;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-composer.is-on {
  border: 1px solid var(--tone-edit);
  background: #fff;
  color: #26302c;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-composer.is-on .icon {
  color: var(--tone-edit);
}

/* Sales, profile photos, the salon's page. */
body.pro-mode .dashboard-shell .dashboard-content .rl-pv-figure {
  font-size: 0.9rem;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-bars {
  display: flex;
  align-items: end;
  gap: 6px;
  height: 60px;
  padding: 6px 4px 0;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-bars > i {
  flex: 1;
  height: var(--h);
  border-radius: 6px 6px 2px 2px;
  background: color-mix(in srgb, var(--tone-all) 65%, #fff);
  transform-origin: bottom;
  transition: transform 420ms cubic-bezier(0.2, 0.9, 0.3, 1.2), opacity 300ms ease, filter 300ms ease;
  transition-delay: calc(var(--i) * 30ms);
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-bars.is-partial > i {
  filter: blur(4px);
  opacity: 0.35;
  transform: scaleY(0.5);
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-photos {
  display: flex;
  align-items: center;
  gap: 8px;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-photos > i {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 10px;
  background: linear-gradient(150deg, #e8c9a8, #b98a66);
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-photos > i:nth-child(2) {
  background: linear-gradient(150deg, #d9b2c4, #9a6d84);
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-photos > i:nth-child(3) {
  background: linear-gradient(150deg, #c9d3e0, #7d8ea6);
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-site {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  background: #fff;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-site > .rl-pv-pencil {
  top: 12px;
  right: 12px;
  margin-top: 0;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-site-hero {
  height: 64px;
  border-radius: 10px;
  background: linear-gradient(135deg, #d8c3ad, #8f6e57);
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-site-line {
  height: 10px;
  border-radius: 5px;
  background: #e3e8e6;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-site-line.is-short {
  width: 60%;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-pv-site .rl-pv-photos > i {
  width: 52px;
  height: 52px;
}

/* View as: a button in the preview's head and the accounts it can open. */
body.pro-mode .dashboard-shell .dashboard-content .rl-view-as {
  position: relative;
  margin-left: auto;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-view-as-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 14px 0 12px;
  border: 1px solid #d9e0dd;
  border-radius: 999px;
  background: #fff;
  color: #18211e;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-view-as-button:hover {
  transform: translateY(-1px);
  border-color: var(--role-color);
  box-shadow: 0 6px 16px rgba(20, 32, 28, 0.12);
}

body.pro-mode .dashboard-shell .dashboard-content .rl-view-as-button .icon {
  width: 16px;
  height: 16px;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-view-as-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 5;
  display: grid;
  gap: 2px;
  width: min(300px, 80vw);
  max-height: 360px;
  padding: 8px;
  overflow: auto;
  border-radius: 18px;
  background: #fff;
  color: #18211e;
  box-shadow: 0 18px 44px rgba(10, 16, 14, 0.32);
  transform-origin: top right;
  animation: rl-view-as-menu-in 220ms cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}

@keyframes rl-view-as-menu-in {
  0% { opacity: 0; transform: translateY(-6px) scale(0.96); }
  100% { opacity: 1; transform: none; }
}

body.pro-mode .dashboard-shell .dashboard-content .rl-view-as-menu-title {
  margin: 4px 8px 6px;
  color: #6c7874;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-view-as-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-view-as-item > span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-view-as-item > .icon {
  width: 16px;
  height: 16px;
  color: #9aa5a1;
  opacity: 0;
  transition: opacity 160ms ease;
}

body.pro-mode .dashboard-shell .dashboard-content button.rl-view-as-item:is(:hover, :focus-visible) {
  background: #f2f5f4;
  outline: none;
}

body.pro-mode .dashboard-shell .dashboard-content button.rl-view-as-item:is(:hover, :focus-visible) > .icon {
  opacity: 1;
}

/* Chosen: their access is on its way, then the dashboard opens as them. */
body.pro-mode .dashboard-shell .dashboard-content button.rl-view-as-item.is-starting {
  background: #f2f5f4;
  pointer-events: none;
}

body.pro-mode .dashboard-shell .dashboard-content button.rl-view-as-item.is-starting > .icon {
  opacity: 1;
  animation: rl-view-as-starting 900ms ease-in-out infinite;
}

@keyframes rl-view-as-starting {
  50% {
    opacity: 0.3;
  }
}

body.pro-mode .dashboard-shell .dashboard-content .rl-view-as-item.is-disabled {
  color: #9aa5a1;
  cursor: default;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-view-as-item.is-disabled small {
  color: #9aa5a1;
  font-size: 0.74rem;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-view-as-item .rl-view-as-avatar {
  width: 30px;
  height: 30px;
  flex: none;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-view-as-item.is-group {
  margin-top: 4px;
  border-top: 1px solid #eef1f0;
  border-radius: 0 0 12px 12px;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-view-as-group-dot {
  display: grid;
  width: 30px;
  height: 30px;
  flex: none !important;
  border-radius: 50%;
  background: color-mix(in srgb, var(--role-color) 22%, #fff);
  box-shadow: inset 0 0 0 8px color-mix(in srgb, var(--role-color) 10%, #fff);
}

/* While viewing as someone: a bar at the bottom that says so. */
body .rl-view-as-bar {
  position: fixed;
  bottom: 22px;
  left: 50%;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 32px);
  padding: 8px 8px 8px 16px;
  border-radius: 999px;
  background: #18211e;
  color: #eef3f1;
  box-shadow: 0 14px 36px rgba(10, 16, 14, 0.35);
  font-size: 0.9rem;
  transform: translateX(-50%);
  animation: rl-view-as-bar-in 420ms cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}

@keyframes rl-view-as-bar-in {
  0% { opacity: 0; transform: translate(-50%, 16px) scale(0.96); }
  100% { opacity: 1; transform: translate(-50%, 0); }
}

body .rl-view-as-bar > .icon {
  width: 18px;
  height: 18px;
  flex: none;
}

body .rl-view-as-bar-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body .rl-view-as-bar-group {
  padding: 3px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--role-color) 40%, transparent);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}

body .rl-view-as-bar-note {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #a9b6b1;
  font-size: 0.8rem;
  white-space: nowrap;
}

body .rl-view-as-bar-note .icon {
  width: 13px;
  height: 13px;
}

body .rl-view-as-exit {
  min-height: 34px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #18211e;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 750;
  cursor: pointer;
}

@media (max-width: 760px) {
  body .rl-view-as-bar {
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }

  body .rl-view-as-bar-note {
    display: none;
  }
}

@media (max-width: 1180px) {
  body.pro-mode .dashboard-shell .dashboard-content .rl-access-section {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 620px) {
  body.pro-mode .dashboard-shell .dashboard-content .rl-pv-section {
    grid-template-columns: minmax(0, 1fr);
  }

  body.pro-mode .dashboard-shell .dashboard-content .rl-pv-col-day {
    height: 130px;
  }

  body.pro-mode .dashboard-shell .dashboard-content .rl-pv-week,
  body.pro-mode .dashboard-shell .dashboard-content .rl-pv-week-row .rl-pv-v {
    grid-template-columns: 54px repeat(7, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  body.pro-mode .dashboard-shell .dashboard-content .rl-access-row {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  body.pro-mode .dashboard-shell .dashboard-content .rl-access-row .rl-seg {
    grid-column: 1 / -1;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.pro-mode .dashboard-shell .dashboard-content .rl-group-chip,
  body.pro-mode .dashboard-shell .dashboard-content .rl-group-chip.is-arriving,
  body.pro-mode .dashboard-shell .dashboard-content .rl-group-chip.is-leaving,
  body.pro-mode .dashboard-shell .dashboard-content .rl-access-editor,
  body.pro-mode .dashboard-shell .dashboard-content .rl-seg-thumb,
  body.pro-mode .dashboard-shell .dashboard-content .rl-access-details {
    animation: none;
    transition: none;
  }
}

/* Stylist detail › Profile (platform.js renderTeamStylistProfileTop and
   friends): the card customers see on the salon's page and the numbers an
   owner reaches for, then their details and published work beside pay and
   what they sent when they asked to join. */
body.pro-mode .rl-pf {
  display: grid;
  gap: 18px;
  min-width: 0;
  margin-top: 14px;
}

body.pro-mode .rl-pf-top {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}

/* The salon-page card: a soft wash in their calendar colour. */
body.pro-mode .rl-pf-public {
  --pf-color: #6650b8;
  position: relative;
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  padding: 18px 20px 20px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--pf-color) 28%, #e3e8e6);
  border-radius: 22px;
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--pf-color) 18%, transparent), transparent 60%),
    #fff;
}

body.pro-mode .rl-pf-public-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pf-color) 12%, #fff);
  color: color-mix(in srgb, var(--pf-color) 75%, #18211e);
  font-size: 11.5px;
  font-weight: 750;
  letter-spacing: 0.02em;
}

body.pro-mode .rl-pf-public-label svg {
  width: 13px;
  height: 13px;
}

body.pro-mode .rl-pf-public-head {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

body.pro-mode .rl-pf-public-head .rl-pf-avatar {
  width: 68px;
  height: 68px;
  flex: none;
  border-radius: 50%;
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px color-mix(in srgb, var(--pf-color) 40%, transparent);
}

body.pro-mode .rl-pf-public-head > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

body.pro-mode .rl-pf-public-head strong {
  overflow: hidden;
  color: #18211e;
  font-size: 20px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.pro-mode .rl-pf-public-head small {
  color: #5b6763;
  font-size: 13.5px;
}

body.pro-mode .rl-pf-rating {
  width: max-content;
  margin-top: 2px;
  color: #b07a00;
  font-size: 13px;
  font-weight: 750;
}

body.pro-mode .rl-pf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

body.pro-mode .rl-pf-chips:empty {
  display: none;
}

body.pro-mode .rl-pf-chips > span {
  padding: 4px 10px;
  border-radius: 999px;
  background: #f1f4f3;
  color: #26302c;
  font-size: 12.5px;
  font-weight: 600;
}

body.pro-mode .rl-pf-public .rl-pf-chips > span {
  background: color-mix(in srgb, var(--pf-color) 10%, #fff);
  color: color-mix(in srgb, var(--pf-color) 70%, #18211e);
}

body.pro-mode .rl-pf-public-bio {
  margin: 0;
  color: #3e4945;
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-line;
}

body.pro-mode .rl-pf-public-bio:empty::before {
  content: attr(data-empty);
  color: #9aa5a1;
  font-style: italic;
}

body.pro-mode .rl-pf-public-work {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

body.pro-mode .rl-pf-public-work img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 12px;
  object-fit: cover;
}

/* At a glance: four numbers, how they log in, languages, and contact. */
body.pro-mode .rl-pf-glance {
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
  padding: 16px;
  border: 1px solid #e3e8e6;
  border-radius: 22px;
  background: #fff;
}

body.pro-mode .rl-pf-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

body.pro-mode .rl-pf-stat {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: #f5f7f6;
}

body.pro-mode .rl-pf-stat > svg {
  grid-row: 1 / span 2;
  width: 18px;
  height: 18px;
  color: #1f6b52;
}

body.pro-mode .rl-pf-stat strong {
  overflow: hidden;
  color: #18211e;
  font-size: 18px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.pro-mode .rl-pf-stat small {
  overflow: hidden;
  color: #66726d;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.pro-mode .rl-pf-kind-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

body.pro-mode .rl-pf-contacts {
  display: grid;
  gap: 6px;
}

body.pro-mode .rl-pf-contact {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid #e3e8e6;
  border-radius: 12px;
  color: #18211e;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 160ms ease, background-color 160ms ease;
}

body.pro-mode .rl-pf-contact:hover {
  border-color: #1f8a6f;
  background: #f3faf7;
}

body.pro-mode .rl-pf-contact svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: #1f6b52;
}

body.pro-mode .rl-pf-contact span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.pro-mode .rl-pf-muted {
  margin: 0;
  color: #8a9692;
  font-size: 13px;
}

/* Details and published work beside pay and what they sent. */
body.pro-mode .rl-pf-columns {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: start;
  gap: 16px;
}

body.pro-mode .rl-pf-main,
body.pro-mode .rl-pf-side {
  display: grid;
  align-content: start;
  gap: 16px;
  min-width: 0;
}

body.pro-mode .rl-pf-card {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 18px 20px 20px;
  border: 1px solid #e3e8e6;
  border-radius: 22px;
  background: #fff;
}

body.pro-mode .rl-pf-card > header,
body.pro-mode .rl-pf .business-stylist-portfolio > header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

body.pro-mode .rl-pf-card > header h3 {
  margin: 0;
  color: #18211e;
  font-size: 16px;
  font-weight: 760;
}

/* Four short groups instead of one long form. */
body.pro-mode .rl-pf-group {
  display: grid;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid #eef1f0;
}

body.pro-mode .rl-pf-group:first-of-type {
  padding-top: 0;
  border-top: 0;
}

body.pro-mode .rl-pf-group > h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #3e4945;
  font-size: 13px;
  font-weight: 750;
}

body.pro-mode .rl-pf-group > h4 svg {
  width: 15px;
  height: 15px;
  color: #1f6b52;
}

body.pro-mode .rl-pf .business-stylist-profile-fields,
body.pro-mode .rl-pf-group > .business-form-grid {
  gap: 12px 14px !important;
}

/* Published work: an even gallery with the add tile last. */
body.pro-mode .rl-pf .business-stylist-portfolio {
  border-radius: 22px;
}

body.pro-mode .rl-pf .business-stylist-portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 10px;
}

body.pro-mode .rl-pf .business-stylist-portfolio-grid > figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 14px;
  aspect-ratio: 1;
}

body.pro-mode .rl-pf .business-stylist-portfolio-grid > figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 300ms ease;
}

body.pro-mode .rl-pf .business-stylist-portfolio-grid > figure:hover img {
  transform: scale(1.04);
}

body.pro-mode .rl-pf .business-stylist-portfolio-add {
  aspect-ratio: 1;
  border-radius: 14px;
}

body.pro-mode .rl-pf .rl-profile-bio {
  margin: 0;
  color: #26302c;
  font-size: 14.5px;
  line-height: 1.55;
}

@media (max-width: 900px) {
  body.pro-mode .rl-pf-top,
  body.pro-mode .rl-pf-columns {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Profile v3: the salon-page card is the editor. Its name, title and bio are
   typed where customers read them; specialties and languages are chips. */
body.pro-mode .rl-pf-public-label em {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  padding-left: 8px;
  border-left: 1px solid color-mix(in srgb, var(--pf-color) 30%, transparent);
  font-style: normal;
  font-weight: 650;
}

body.pro-mode .rl-pf-public-label em svg {
  width: 11px;
  height: 11px;
}

body.pro-mode .rl-pf-photo {
  position: relative;
  display: inline-grid;
  flex: none;
  border-radius: 50%;
}

body.pro-mode .rl-pf-photo.is-editable {
  cursor: pointer;
}

body.pro-mode .rl-pf-photo > input[type="file"] {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

body.pro-mode .rl-pf-photo-badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #18211e;
  color: #fff;
  transition: transform 180ms ease;
}

body.pro-mode .rl-pf-photo-badge svg {
  width: 13px;
  height: 13px;
}

body.pro-mode .rl-pf-photo.is-editable:hover .rl-pf-photo-badge {
  transform: scale(1.1);
}

body.pro-mode .rl-pf-public-names {
  display: grid;
  flex: 1;
  gap: 2px;
  min-width: 0;
}

body.pro-mode .rl-pf-public-names > strong {
  overflow: hidden;
  color: #18211e;
  font-size: 22px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.pro-mode .rl-pf-public-names > small {
  color: #5b6763;
  font-size: 14px;
}

/* Text you can type into, that looks like the page until you do. */
body.pro-mode .rl-pf .rl-pf-inline:not(#rl) {
  width: 100%;
  min-height: 0 !important;
  margin: 0 -8px !important;
  padding: 3px 8px !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #18211e;
  font: inherit;
  outline: none;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

body.pro-mode .rl-pf .rl-pf-inline:not(#rl):hover {
  border-color: color-mix(in srgb, var(--pf-color) 30%, #e3e8e6) !important;
  background: rgba(255, 255, 255, 0.7) !important;
}

body.pro-mode .rl-pf .rl-pf-inline:not(#rl):focus {
  border-color: color-mix(in srgb, var(--pf-color) 60%, #fff) !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--pf-color) 14%, transparent) !important;
}

body.pro-mode .rl-pf .rl-pf-inline.is-name:not(#rl) {
  font-size: 22px !important;
  font-weight: 760;
}

body.pro-mode .rl-pf .rl-pf-inline.is-title:not(#rl) {
  color: #5b6763;
  font-size: 14px !important;
}

body.pro-mode .rl-pf .rl-pf-inline.is-bio:not(#rl) {
  min-height: 4.6em !important;
  resize: none;
  color: #3e4945;
  font-size: 14px !important;
  line-height: 1.55;
  field-sizing: content;
}

body.pro-mode .rl-pf .rl-pf-inline::placeholder {
  color: #a3ada9;
  font-style: italic;
}

body.pro-mode .rl-pf-public-bio.is-empty {
  color: #9aa5a1;
  font-style: italic;
}

/* Chips: their own colour on the salon card, gray elsewhere. */
body.pro-mode .rl-pf-chip-editor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  margin: 0 -8px;
  padding: 4px 8px;
  border: 1px dashed transparent;
  border-radius: 12px;
  cursor: text;
  transition: border-color 160ms ease, background-color 160ms ease;
}

body.pro-mode .rl-pf-chip-editor:hover,
body.pro-mode .rl-pf-chip-editor:focus-within {
  border-color: #d5dcd9;
  background: rgba(255, 255, 255, 0.7);
}

body.pro-mode .rl-pf-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px 4px 10px;
  border-radius: 999px;
  background: #f1f4f3;
  color: #26302c;
  font-size: 12.5px;
  font-weight: 650;
}

body.pro-mode .rl-pf-chips .rl-pf-chip {
  padding-right: 10px;
}

body.pro-mode .rl-pf-public .rl-pf-chip {
  background: color-mix(in srgb, var(--pf-color) 12%, #fff);
  color: color-mix(in srgb, var(--pf-color) 72%, #18211e);
}

body.pro-mode .rl-pf-chip.is-new {
  animation: rl-pf-chip-in 240ms cubic-bezier(0.2, 0.9, 0.3, 1.3) both;
}

@keyframes rl-pf-chip-in {
  0% { opacity: 0; transform: scale(0.6); }
  100% { opacity: 1; transform: scale(1); }
}

body.pro-mode .rl-pf-chip-remove {
  display: grid;
  width: 18px;
  height: 18px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
}

body.pro-mode .rl-pf-chip-remove:hover {
  background: rgba(0, 0, 0, 0.08);
  opacity: 1;
}

body.pro-mode .rl-pf-chip-remove svg {
  width: 11px;
  height: 11px;
}

body.pro-mode .rl-pf .rl-pf-chip-input:not(#rl) {
  flex: 1;
  min-width: 120px;
  min-height: 28px !important;
  padding: 2px 4px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 13px !important;
  outline: none;
}

/* The card's photos, and the way to all of them. */
body.pro-mode .rl-pf-public-work {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

body.pro-mode .rl-pf-work-more {
  display: grid;
  aspect-ratio: 1;
  place-content: center;
  justify-items: center;
  gap: 4px;
  padding: 4px;
  border: 1.5px dashed color-mix(in srgb, var(--pf-color) 35%, #d5dcd9);
  border-radius: 12px;
  background: color-mix(in srgb, var(--pf-color) 5%, #fff);
  color: color-mix(in srgb, var(--pf-color) 75%, #18211e);
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: transform 180ms ease, background-color 180ms ease;
}

body.pro-mode .rl-pf-work-more:hover {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--pf-color) 10%, #fff);
}

body.pro-mode .rl-pf-work-more svg {
  width: 18px;
  height: 18px;
}

/* The rest of their details: small cards side by side. */
body.pro-mode .rl-pf-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  align-items: start;
  gap: 14px;
}

body.pro-mode .rl-pf-mini {
  gap: 12px;
  padding: 16px 18px 18px;
}

body.pro-mode .rl-pf-mini > header h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
}

body.pro-mode .rl-pf-mini > header h3 svg {
  width: 16px;
  height: 16px;
  color: #1f6b52;
}

body.pro-mode .rl-pf-mini .business-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body.pro-mode .rl-pf-field-label {
  display: block;
  margin-bottom: 6px;
  color: #5b6763;
  font-size: 13px;
  font-weight: 600;
}

body.pro-mode .rl-pf-mini .rl-pf-chip-editor {
  margin: 0;
  border: 1px solid #d9e0dd;
  background: #fff;
}

body.pro-mode .rl-pf-fact {
  display: grid;
  gap: 2px;
}

body.pro-mode .rl-pf-fact small {
  color: #66726d;
  font-size: 12px;
}

body.pro-mode .rl-pf-fact strong {
  color: #18211e;
  font-size: 14px;
  font-weight: 650;
}

body.pro-mode .rl-pf-mini .rl-pf-fact + .rl-pf-fact {
  padding-top: 10px;
  border-top: 1px solid #eef1f0;
}

body.pro-mode .rl-pf-columns {
  grid-template-columns: minmax(0, 1.9fr) minmax(280px, 1fr);
}

/* Portfolio tab: their work as an even gallery; a press opens it large. */
body.pro-mode .rl-pg {
  display: grid;
  gap: 18px;
  margin-top: 14px;
}

body.pro-mode .rl-pg-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

body.pro-mode .rl-pg-head h3 {
  margin: 0;
  color: #18211e;
  font-size: 20px;
  font-weight: 760;
}

body.pro-mode .rl-pg-head small {
  color: #66726d;
  font-size: 13px;
}

body.pro-mode .rl-pg-head-end {
  display: flex;
  align-items: center;
  gap: 10px;
}

body.pro-mode .rl-pg-progress {
  --done: 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #f1f4f3;
  color: #3e4945;
  font-size: 12.5px;
  font-weight: 700;
}

body.pro-mode .rl-pg-progress > i {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: conic-gradient(#1f8a6f calc(var(--done) * 360deg), #dfe5e2 0);
  -webkit-mask: radial-gradient(circle, transparent 6px, #000 7px);
  mask: radial-gradient(circle, transparent 6px, #000 7px);
}

body.pro-mode .rl-pg-progress.is-done {
  background: #e3f3ec;
  color: #1f6b52;
}

body.pro-mode .rl-pg-kept {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #f1f4f3;
  color: #5b6763;
  font-size: 12.5px;
  font-weight: 650;
}

body.pro-mode .rl-pg-kept svg {
  width: 13px;
  height: 13px;
}

body.pro-mode .rl-pg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
}

body.pro-mode .rl-pg-grid.is-small {
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

body.pro-mode .rl-pg-grid.is-empty {
  grid-template-columns: minmax(0, 1fr);
}

body.pro-mode .rl-pg-tile {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
  aspect-ratio: 4 / 5;
  background: #eef1f0;
  animation: rl-pg-in 360ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes rl-pg-in {
  0% { opacity: 0; transform: translateY(8px) scale(0.98); }
  100% { opacity: 1; transform: none; }
}

body.pro-mode .rl-pg-open {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

body.pro-mode .rl-pg-open img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 300ms ease;
}

body.pro-mode .rl-pg-open::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(10, 16, 14, 0.45));
  opacity: 0;
  transition: opacity 260ms ease;
}

body.pro-mode .rl-pg-tile:hover .rl-pg-open img {
  transform: scale(1.05);
}

body.pro-mode .rl-pg-tile:hover .rl-pg-open::after,
body.pro-mode .rl-pg-tile:focus-within .rl-pg-open::after {
  opacity: 1;
}

body.pro-mode .rl-pg-zoom {
  position: absolute;
  bottom: 12px;
  left: 12px;
  z-index: 1;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #18211e;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 220ms ease, transform 220ms ease;
}

body.pro-mode .rl-pg-zoom svg {
  width: 16px;
  height: 16px;
}

body.pro-mode .rl-pg-remove {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #b23b32;
  opacity: 0;
  cursor: pointer;
  transform: scale(0.85);
  transition: opacity 200ms ease, transform 200ms ease, background-color 160ms ease;
}

body.pro-mode .rl-pg-remove svg {
  width: 16px;
  height: 16px;
}

body.pro-mode .rl-pg-remove:hover {
  background: #fff;
}

body.pro-mode .rl-pg-tile:is(:hover, :focus-within) .rl-pg-zoom,
body.pro-mode .rl-pg-tile:is(:hover, :focus-within) .rl-pg-remove {
  opacity: 1;
  transform: none;
}

/* Adding: drop photos on it, or press it to browse. */
body.pro-mode .rl-pg-drop {
  position: relative;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 6px;
  min-height: 220px;
  padding: 20px;
  border: 2px dashed #c9d2ce;
  border-radius: 20px;
  background: #fafbfb;
  color: #3e4945;
  text-align: center;
  cursor: pointer;
  transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

body.pro-mode .rl-pg-drop.is-tile {
  min-height: 0;
  aspect-ratio: 4 / 5;
}

body.pro-mode .rl-pg-drop:hover,
body.pro-mode .rl-pg-drop.is-over {
  border-color: #1f8a6f;
  background: #f1faf6;
  transform: translateY(-1px);
}

body.pro-mode .rl-pg-drop.is-over {
  transform: scale(1.01);
}

body.pro-mode .rl-pg-drop.is-busy {
  opacity: 0.7;
  pointer-events: none;
}

body.pro-mode .rl-pg-drop-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 50%;
  background: #e3f3ec;
  color: #1f6b52;
}

body.pro-mode .rl-pg-drop-icon svg {
  width: 22px;
  height: 22px;
}

body.pro-mode .rl-pg-drop strong {
  font-size: 14.5px;
}

body.pro-mode .rl-pg-drop small {
  color: #7c8884;
  font-size: 12px;
}

body.pro-mode .rl-pg-drop > input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

body.pro-mode .rl-pg-empty {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 200px;
  border: 1px solid #e3e8e6;
  border-radius: 20px;
  background: #fafbfb;
  color: #7c8884;
}

body.pro-mode .rl-pg-empty svg {
  width: 28px;
  height: 28px;
}

body.pro-mode .rl-pg-sent {
  display: grid;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid #eef1f0;
}

body.pro-mode .rl-pg-sent > header {
  display: flex;
  align-items: center;
  gap: 8px;
}

body.pro-mode .rl-pg-sent h4 {
  margin: 0;
  color: #3e4945;
  font-size: 14px;
  font-weight: 750;
}

@media (max-width: 900px) {
  body.pro-mode .rl-pf-columns {
    grid-template-columns: minmax(0, 1fr);
  }

  body.pro-mode .rl-pg-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
}

/* Compact: the salon card, the numbers and four cards in a row. */
body.pro-mode .rl-pf .rl-pf-chip-remove:not(#rl) {
  width: 18px !important;
  min-width: 0 !important;
  height: 18px !important;
  min-height: 0 !important;
}

body.pro-mode .rl-pf {
  gap: 14px;
}

body.pro-mode .rl-pf-top {
  gap: 14px;
}

body.pro-mode .rl-pf-public {
  gap: 10px;
  padding: 16px 18px;
}

body.pro-mode .rl-pf-public-head .rl-pf-avatar {
  width: 60px;
  height: 60px;
}

body.pro-mode .rl-pf-public-work {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
}

body.pro-mode .rl-pf-public-work img,
body.pro-mode .rl-pf-work-more {
  border-radius: 10px;
}

body.pro-mode .rl-pf-glance {
  gap: 12px;
  padding: 14px;
}

body.pro-mode .rl-pf-stat {
  padding: 8px 10px;
}

body.pro-mode .rl-pf-stat strong {
  font-size: 16px;
}

body.pro-mode .rl-pf-contact {
  min-height: 36px;
}

body.pro-mode .rl-pf-cards {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 12px;
}

body.pro-mode .rl-pf-cards > .rl-comp-editor {
  margin: 0 !important;
}

body.pro-mode .rl-pf-mini {
  gap: 10px;
  padding: 14px 16px 16px;
}

body.pro-mode .rl-stylist-window .rl-pf-mini .business-form-grid:not(#rl),
body.pro-mode .business-team-drawer-layer .rl-pf-mini .business-form-grid:not(#rl) {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 10px !important;
}

body.pro-mode .rl-pf-mini .business-form-grid > * {
  grid-column: 1 / -1 !important;
}

body.pro-mode .rl-pf-top {
  align-items: start;
}

body.pro-mode .rl-pf-cards > .rl-comp-editor :is(input, select) {
  min-width: 0;
}

/* ==== Stylist detail v4 (approved design 10-31): one window, four tabs,
   the same size whichever tab is open. ==== */
body.pro-mode .rl-stylist-window {
  --sd-ink: #17201c;
  --sd-muted: #5e6a65;
  --sd-faint: #9aa5a1;
  --sd-line: #dfe5e2;
  --sd-soft: #f1f4f2;
  --sd-ground: #f6f7f5;
  --sd-accent: #1f7a5c;
  --sd-accent-soft: #e4f3ec;
  --sd-danger: #b4392f;
  --sd-violet: #4a3383;
  --sd-violet-soft: #f1edf9;
}

body.pro-mode .business-team-drawer-layer.is-centered.rl-stylist-window .business-team-drawer:not(#rl) {
  width: min(1180px, calc(100vw - 48px)) !important;
  max-width: none !important;
  height: min(780px, calc(100vh - 48px)) !important;
  max-height: none !important;
  border-radius: 28px !important;
  font-family: Figtree, var(--font-sans, system-ui), sans-serif;
  color: var(--sd-ink);
}

/* Header: photo, name with status and account type, title and services. */
body.pro-mode .business-team-drawer-layer.is-centered.rl-stylist-window .business-team-drawer-header:not(#rl) {
  align-items: center !important;
  gap: 16px !important;
  padding: 22px 28px 18px !important;
  border: 0 !important;
}

body.pro-mode .rl-stylist-window .business-team-drawer-header > div:not(.business-team-drawer-header-actions) {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  min-width: 0;
}

body.pro-mode .rl-stylist-window .business-team-drawer-header h2:not(#rl) {
  margin: 0 !important;
  font-size: 22px !important;
  font-weight: 750 !important;
  letter-spacing: -0.01em;
}

body.pro-mode .rl-stylist-window .rl-sd-head-pills {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

body.pro-mode .rl-stylist-window .rl-sd-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--sd-soft);
  color: var(--sd-muted);
  font-size: 12px;
  font-weight: 700;
}

body.pro-mode .rl-stylist-window .rl-sd-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

body.pro-mode .rl-stylist-window .rl-sd-status.is-active {
  background: var(--sd-accent-soft);
  color: var(--sd-accent);
}

body.pro-mode .rl-stylist-window .rl-sd-head-sub {
  flex-basis: 100%;
  color: var(--sd-muted);
  font-size: 14px;
}

body.pro-mode .rl-stylist-window .business-team-drawer-header .icon-button:not(#rl) {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--sd-soft) !important;
  color: var(--sd-ink) !important;
  font-size: 22px !important;
  box-shadow: none !important;
}

/* Tabs: one pill; the open tab fills dark. No outline unless by keyboard. */
body.pro-mode .rl-stylist-window .rl-stylist-tabs:not(#rl) {
  display: inline-flex !important;
  align-self: flex-start;
  gap: 4px;
  width: auto !important;
  margin: 0 28px 16px !important;
  padding: 4px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--sd-soft) !important;
}

body.pro-mode .rl-stylist-window .rl-stylist-tabs > button:not(#rl) {
  min-height: 40px !important;
  height: 40px;
  padding: 0 22px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #4a5551 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  outline: none !important;
  box-shadow: none !important;
  transition: color 220ms ease, transform 160ms ease;
}

body.pro-mode .rl-stylist-window .rl-stylist-tabs > button::after {
  display: none !important;
}

body.pro-mode .rl-stylist-window .rl-stylist-tabs > button.active:not(#rl) {
  background: var(--sd-ink) !important;
  color: #fff !important;
  font-weight: 700 !important;
}

body.pro-mode .rl-stylist-window .rl-stylist-tabs > button:focus-visible:not(#rl) {
  box-shadow: 0 0 0 3px rgba(31, 122, 92, 0.35) !important;
}

/* The panel area: a soft ground with white cards. */
body.pro-mode .rl-stylist-window .rl-stylist-window-scroll:not(#rl) {
  flex: 1 1 auto;
  min-height: 0;
  background: var(--sd-ground);
}

body.pro-mode .rl-stylist-window .business-access-editor-fields:not(#rl) {
  padding: 20px 28px !important;
}

body.pro-mode .rl-stylist-window .rl-sd-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 20px 22px;
  border: 0;
  border-radius: 22px;
  background: #fff;
  box-shadow: none;
}

body.pro-mode .rl-stylist-window .rl-sd-card-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
}

body.pro-mode .rl-stylist-window .rl-sd-card-head.is-row {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

body.pro-mode .rl-stylist-window .rl-sd-card-head strong {
  font-size: 16px;
  font-weight: 750;
}

body.pro-mode .rl-stylist-window .rl-sd-card-head span,
body.pro-mode .rl-stylist-window .rl-sd-muted {
  margin: 0;
  color: var(--sd-muted);
  font-size: 13px;
}

body.pro-mode .rl-stylist-window .rl-sd-eyebrow {
  color: var(--sd-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body.pro-mode .rl-stylist-window .rl-sd-divider {
  height: 1px;
  background: #eef1ef;
}

body.pro-mode .rl-stylist-window .rl-sd-pill {
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--sd-soft);
  color: #4a5551;
  font-size: 12.5px;
  font-weight: 700;
}

/* Settings: status and groups, booking rules, weekly hours. */
body.pro-mode .rl-stylist-window .rl-sd-settings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 16px;
}

/* A linked account without a stylist profile (renderMemberRolesDrawer):
   its groups across the whole width. Its fields box is laid out as the
   stylist's is (refinelook.css does that for access-editor by name). */
body.pro-mode .rl-stylist-window .rl-sd-settings.is-member {
  grid-template-columns: minmax(0, 1fr);
}

body.pro-mode .business-team-drawer-layer[data-team-drawer="member-roles"].rl-stylist-window .business-access-editor-fields:not(#rl) {
  display: grid !important;
  gap: 0.8rem !important;
}

body.pro-mode .rl-stylist-window .rl-sd-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

body.pro-mode .rl-stylist-window .rl-sd-seat:not(#rl) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

body.pro-mode .rl-stylist-window .rl-sd-seat-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

body.pro-mode .rl-stylist-window .rl-sd-seat-copy strong {
  font-size: 16px;
  font-weight: 750;
}

body.pro-mode .rl-stylist-window .rl-sd-seat-copy span {
  color: var(--sd-muted);
  font-size: 13px;
}

/* A switch: green when on, gray when off. */
body.pro-mode .rl-stylist-window .rl-sd-switch-button:not(#rl) {
  position: relative;
  flex: none;
  width: 52px !important;
  min-width: 0 !important;
  height: 30px !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #d7ddda !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background-color 200ms ease;
}

body.pro-mode .rl-stylist-window .rl-sd-switch-button > span {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  transition: transform 220ms cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

body.pro-mode .rl-stylist-window .rl-sd-switch-button[aria-checked="true"]:not(#rl) {
  background: var(--sd-accent) !important;
}

body.pro-mode .rl-stylist-window .rl-sd-switch-button[aria-checked="true"] > span {
  transform: translateX(22px);
}

/* Groups as chips: the ones this stylist is in are green. */
body.pro-mode .rl-stylist-window .rl-sd-groups {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

body.pro-mode .rl-stylist-window .rl-sd-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.pro-mode .rl-stylist-window .rl-sd-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--sd-soft);
  color: #4a5551;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease;
}

body.pro-mode .rl-stylist-window .rl-sd-chip > input:not(#rl) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

body.pro-mode .rl-stylist-window .rl-sd-chip > input:disabled {
  cursor: default;
}

body.pro-mode .rl-stylist-window .rl-sd-chip > i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--role-color);
}

body.pro-mode .rl-stylist-window .rl-sd-chip:has(input:checked) {
  background: var(--sd-accent-soft);
  color: #165c45;
  font-weight: 700;
}

body.pro-mode .rl-stylist-window .rl-sd-chip:has(input:focus-visible) {
  box-shadow: 0 0 0 3px rgba(31, 122, 92, 0.3);
}

/* Booking rules: a title, a line under it, and a switch. */
body.pro-mode .rl-stylist-window .rl-sd-rules:not(#rl) {
  display: flex !important;
  flex-direction: column;
  gap: 0 !important;
}

body.pro-mode .rl-stylist-window .rl-sd-rule:not(#rl) {
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid #eef1ef !important;
  border-radius: 0 !important;
  background: none !important;
  cursor: pointer;
}

body.pro-mode .rl-stylist-window .rl-sd-rule:last-child:not(#rl) {
  border-bottom: 0 !important;
}

body.pro-mode .rl-stylist-window .rl-sd-rule > input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

body.pro-mode .rl-stylist-window .rl-sd-rule-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

body.pro-mode .rl-stylist-window .rl-sd-rule-copy strong {
  font-size: 14px;
  font-weight: 650;
}

body.pro-mode .rl-stylist-window .rl-sd-rule-copy small {
  color: var(--sd-muted);
  font-size: 12.5px;
}

body.pro-mode .rl-stylist-window .rl-sd-rule .rl-sd-switch:not(#rl) {
  position: relative !important;
  flex: none;
  width: 44px !important;
  height: 26px !important;
  border-radius: 999px !important;
  background: #d7ddda !important;
  transition: background-color 200ms ease;
}

body.pro-mode .rl-stylist-window .rl-sd-rule .rl-sd-switch::after {
  content: "" !important;
  position: absolute !important;
  top: 3px !important;
  left: 3px !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18) !important;
  transform: none;
  transition: transform 220ms cubic-bezier(0.2, 0.9, 0.3, 1.2) !important;
}

body.pro-mode .rl-stylist-window .rl-sd-rule > input:checked + .rl-sd-switch:not(#rl) {
  background: var(--sd-accent) !important;
}

body.pro-mode .rl-stylist-window .rl-sd-rule > input:checked + .rl-sd-switch::after {
  transform: translateX(18px) !important;
}

body.pro-mode .rl-stylist-window .rl-sd-rule > input:focus-visible + .rl-sd-switch {
  box-shadow: 0 0 0 3px rgba(31, 122, 92, 0.3) !important;
}

/* Weekly hours: day, switch, then the times. */
body.pro-mode .rl-stylist-window .rl-team-hours.rl-sd-card:not(#rl) {
  gap: 6px;
  margin: 0 !important;
  padding: 20px 22px !important;
  border: 0 !important;
  border-radius: 22px !important;
}

body.pro-mode .rl-stylist-window .rl-team-hours .rl-team-hours-list:not(#rl) {
  display: flex !important;
  flex-direction: column;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.pro-mode .rl-stylist-window .rl-team-hours-day:not(#rl) {
  display: grid !important;
  grid-template-columns: 54px 44px minmax(0, 1fr) !important;
  align-items: center;
  gap: 12px !important;
  min-height: 50px;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid #f1f4f2 !important;
  border-radius: 0 !important;
  background: none !important;
}

body.pro-mode .rl-stylist-window .rl-team-hours-day:last-child:not(#rl) {
  border-bottom: 0 !important;
}

body.pro-mode .rl-stylist-window .rl-sd-day {
  font-size: 14px;
  font-weight: 700;
}

body.pro-mode .rl-stylist-window .rl-team-hours-switch:not(#rl) {
  display: inline-flex !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.pro-mode .rl-stylist-window .rl-team-hours-times:not(#rl),
body.pro-mode .rl-stylist-window .rl-team-hours-note:not(#rl) {
  grid-column: 3;
  grid-row: 1;
}

body.pro-mode .rl-stylist-window .rl-team-hours-day :is(.rl-team-hours-times, .rl-team-hours-note):not(#rl) {
  visibility: visible;
  opacity: 1 !important;
  transform: none !important;
  transition: opacity 240ms ease, transform 320ms cubic-bezier(0.2, 0.9, 0.25, 1), visibility 0s linear 0s !important;
}

body.pro-mode .rl-stylist-window .rl-team-hours-day.is-working .rl-team-hours-note:not(#rl),
body.pro-mode .rl-stylist-window .rl-team-hours-day:not(.is-working) .rl-team-hours-times:not(#rl) {
  visibility: hidden;
  opacity: 0 !important;
  pointer-events: none;
  transition: opacity 160ms ease, transform 200ms ease, visibility 0s linear 200ms !important;
}

body.pro-mode .rl-stylist-window .rl-team-hours-day.is-working .rl-team-hours-note:not(#rl) {
  transform: translateX(12px) !important;
}

body.pro-mode .rl-stylist-window .rl-team-hours-day:not(.is-working) .rl-team-hours-times:not(#rl) {
  transform: translateX(-12px) !important;
}

body.pro-mode .rl-stylist-window .rl-team-hours-note:not(#rl) {
  color: var(--sd-faint) !important;
  font-size: 14px !important;
}

body.pro-mode .rl-stylist-window .rl-team-hours-times:not(#rl) {
  display: flex !important;
  align-items: center;
  gap: 8px;
}

body.pro-mode .rl-stylist-window .rl-team-hours-times .prelook-time-control:not(#rl) {
  display: inline-flex !important;
  align-items: center;
  width: 112px;
  height: 40px;
  min-height: 40px;
  padding: 0 5px 0 0 !important;
  border: 1px solid var(--sd-line) !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: none !important;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

body.pro-mode .rl-stylist-window .rl-team-hours-times .prelook-time-control:hover:not(#rl) {
  border-color: #c5cfca !important;
}

body.pro-mode .rl-stylist-window .rl-team-hours-times .prelook-time-control:focus-within:not(#rl) {
  border-color: var(--sd-accent) !important;
  box-shadow: 0 0 0 4px rgba(31, 122, 92, 0.12) !important;
}

body.pro-mode .rl-stylist-window .rl-team-hours-times .prelook-time-text:not(#rl) {
  flex: 1 1 auto;
  width: 100% !important;
  min-width: 0;
  height: 38px !important;
  min-height: 0 !important;
  padding: 0 0 0 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--sd-ink) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums;
}

body.pro-mode .rl-stylist-window .rl-team-hours-times .prelook-time-trigger:not(#rl) {
  display: grid !important;
  flex: none;
  width: 30px !important;
  height: 30px !important;
  min-height: 0 !important;
  padding: 0 !important;
  place-items: center;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--sd-faint) !important;
  transition: background-color 160ms ease, color 160ms ease;
}

body.pro-mode .rl-stylist-window .rl-team-hours-times .prelook-time-trigger:is(:hover, [aria-expanded="true"]):not(#rl) {
  background: var(--sd-accent-soft) !important;
  color: var(--sd-accent) !important;
}

body.pro-mode .rl-stylist-window .rl-team-hours-times > span[aria-hidden="true"] {
  color: var(--sd-faint);
}

body.pro-mode .rl-stylist-window .rl-team-hours-day .rl-team-hours-error {
  grid-column: 1 / -1;
}

/* Profile: the salon-page card (the editor), the numbers beside it, and one
   Details card in three columns. */
body.pro-mode .rl-stylist-window .rl-sd-profile {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

body.pro-mode .rl-stylist-window .rl-sd-profile-top {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

body.pro-mode .rl-stylist-window .rl-sd-salon-label {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--sd-violet-soft);
  color: #5b3f9a;
  font-size: 12px;
  font-weight: 700;
}

body.pro-mode .rl-stylist-window .rl-sd-salon-label em {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
  padding-left: 8px;
  border-left: 1px solid rgba(91, 63, 154, 0.25);
  font-style: normal;
}

body.pro-mode .rl-stylist-window .rl-sd-salon-head {
  display: flex;
  align-items: center;
  gap: 16px;
}

body.pro-mode .rl-stylist-window .rl-sd-photo {
  position: relative;
  display: inline-grid;
  flex: none;
  width: 76px;
  height: 76px;
  border-radius: 50%;
}

body.pro-mode .rl-stylist-window .rl-sd-photo .rl-sd-avatar:not(#rl) {
  width: 76px !important;
  height: 76px !important;
  border-radius: 50%;
}

body.pro-mode .rl-stylist-window .rl-sd-photo.is-editable {
  cursor: pointer;
}

body.pro-mode .rl-stylist-window .rl-sd-photo > input[type="file"] {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

body.pro-mode .rl-stylist-window .rl-sd-photo-badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--sd-ink);
  color: #fff;
}

body.pro-mode .rl-stylist-window .rl-sd-salon-names {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

body.pro-mode .rl-stylist-window .rl-sd-name {
  font-size: 24px;
  font-weight: 750;
}

body.pro-mode .rl-stylist-window .rl-sd-title {
  color: var(--sd-muted);
  font-size: 14px;
}

body.pro-mode .rl-stylist-window .rl-sd-inline:not(#rl) {
  width: 100%;
  min-height: 0 !important;
  margin: 0 -8px !important;
  padding: 2px 8px !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--sd-ink);
  font: inherit;
  outline: none;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

body.pro-mode .rl-stylist-window .rl-sd-inline:hover:not(#rl) {
  border-color: var(--sd-line) !important;
}

body.pro-mode .rl-stylist-window .rl-sd-inline:focus:not(#rl) {
  border-color: #b9a6e3 !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(91, 63, 154, 0.12) !important;
}

body.pro-mode .rl-stylist-window .rl-sd-inline.is-name:not(#rl) {
  font-size: 24px !important;
  font-weight: 750;
}

body.pro-mode .rl-stylist-window .rl-sd-inline.is-title:not(#rl) {
  color: var(--sd-muted);
  font-size: 14px !important;
}

body.pro-mode .rl-stylist-window .rl-sd-inline.is-bio:not(#rl) {
  min-height: 4.8em !important;
  resize: none;
  color: #3e4945;
  font-size: 14.5px !important;
  line-height: 1.55;
  field-sizing: content;
}

body.pro-mode .rl-stylist-window .rl-sd-inline::placeholder {
  color: var(--sd-faint);
  font-style: italic;
}

body.pro-mode .rl-stylist-window .rl-sd-bio {
  margin: 0;
  color: #3e4945;
  font-size: 14.5px;
  line-height: 1.55;
  white-space: pre-line;
}

body.pro-mode .rl-stylist-window .rl-sd-bio.is-empty {
  color: var(--sd-faint);
  font-style: italic;
}

/* Specialty chips on the salon card are violet; elsewhere gray. */
body.pro-mode .rl-stylist-window .rl-sd-salon .rl-pf-chip-editor {
  margin: 0 -8px;
  padding: 2px 8px;
  border: 1px dashed transparent;
}

body.pro-mode .rl-stylist-window .rl-sd-salon .rl-pf-chip {
  height: 30px;
  padding: 0 8px 0 12px;
  background: var(--sd-violet-soft);
  color: var(--sd-violet);
  font-size: 13px;
  font-weight: 700;
}

body.pro-mode .rl-stylist-window .rl-sd-salon .rl-pf-chips .rl-pf-chip {
  padding-right: 12px;
}

body.pro-mode .rl-stylist-window .rl-sd-salon .rl-pf-chip-input:not(#rl) {
  min-width: 140px;
  color: var(--sd-muted);
}

body.pro-mode .rl-stylist-window .rl-sd-glance {
  padding: 18px;
  gap: 12px;
}

body.pro-mode .rl-stylist-window .rl-sd-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

body.pro-mode .rl-stylist-window .rl-sd-stats.is-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.pro-mode .rl-stylist-window .rl-sd-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--sd-ground);
}

body.pro-mode .rl-stylist-window .rl-sd-stat strong {
  overflow: hidden;
  font-size: 22px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.pro-mode .rl-stylist-window .rl-sd-stats.is-three .rl-sd-stat strong {
  font-size: 18px;
}

body.pro-mode .rl-stylist-window .rl-sd-stat span {
  color: var(--sd-muted);
  font-size: 12.5px;
}

body.pro-mode .rl-stylist-window .rl-sd-contact {
  display: flex;
  align-items: center;
  gap: 8px;
}

body.pro-mode .rl-stylist-window .rl-sd-contact > span {
  margin-left: 4px;
  color: var(--sd-muted);
  font-size: 13px;
}

body.pro-mode .rl-stylist-window .rl-sd-circle {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 50%;
  background: var(--sd-accent-soft);
  color: var(--sd-accent);
  transition: transform 160ms ease, background-color 160ms ease;
}

body.pro-mode .rl-stylist-window .rl-sd-circle:hover {
  transform: translateY(-1px);
  background: #d4ecdf;
}

body.pro-mode .rl-stylist-window .rl-sd-details:not(#rl) {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px !important;
  padding: 18px 22px;
}

body.pro-mode .rl-stylist-window .rl-sd-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

body.pro-mode .rl-stylist-window .rl-sd-group > strong {
  font-size: 14px;
  font-weight: 750;
}

body.pro-mode .rl-stylist-window .rl-sd-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body.pro-mode .rl-stylist-window .rl-sd-grid > .business-field-full,
body.pro-mode .rl-stylist-window .rl-sd-fact.is-wide {
  grid-column: 1 / -1;
}

body.pro-mode .rl-stylist-window .rl-sd-grid .business-field:not(#rl) {
  display: flex !important;
  flex-direction: column;
  gap: 5px !important;
  min-width: 0;
  margin: 0 !important;
  color: var(--sd-muted);
  font-size: 12.5px !important;
}

body.pro-mode .rl-stylist-window .rl-sd-grid .business-field > span:not(.prelook-date-control):not(#rl),
body.pro-mode .rl-stylist-window .rl-sd-grid .rl-pf-field-label {
  margin: 0 !important;
  color: var(--sd-muted) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
}

body.pro-mode .rl-stylist-window .rl-sd-grid :is(input:not([type="hidden"]), select):not(.rl-pf-chip-input):not(#rl) {
  width: 100%;
  min-width: 0;
  min-height: 40px !important;
  height: 40px;
  padding: 0 12px !important;
  border: 1px solid var(--sd-line) !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: var(--sd-ink) !important;
  font-size: 14px !important;
  box-shadow: none !important;
}

body.pro-mode .rl-stylist-window .rl-sd-grid :is(input, select):disabled:not(#rl) {
  border-color: transparent !important;
  background: var(--sd-ground) !important;
  color: var(--sd-muted) !important;
}

body.pro-mode .rl-stylist-window .rl-sd-grid .rl-pf-chip-editor:not(#rl) {
  min-height: 40px;
  margin: 0;
  padding: 4px 8px;
  border: 1px solid var(--sd-line);
  border-radius: 12px;
  background: #fff;
}

body.pro-mode .rl-stylist-window .rl-sd-grid .rl-pf-chip {
  height: 28px;
  padding: 0 6px 0 10px;
  background: var(--sd-soft);
  color: var(--sd-ink);
  font-size: 13px;
  font-weight: 600;
}

body.pro-mode .rl-stylist-window .rl-sd-grid .business-field small {
  display: none !important;
}

body.pro-mode .rl-stylist-window .rl-sd-fact {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

body.pro-mode .rl-stylist-window .rl-sd-fact > span {
  color: var(--sd-muted);
  font-size: 12.5px;
}

body.pro-mode .rl-stylist-window .rl-sd-fact > strong {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  background: var(--sd-ground);
  font-size: 14px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

body.pro-mode .rl-stylist-window .rl-sd-fact > strong.is-empty {
  color: var(--sd-faint);
}

/* Portfolio: big photos, four to a row; round glass buttons. */
body.pro-mode .rl-stylist-window .rl-sd-portfolio {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 100%;
}

body.pro-mode .rl-stylist-window .rl-sd-portfolio-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

body.pro-mode .rl-stylist-window .rl-sd-portfolio-head > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

body.pro-mode .rl-stylist-window .rl-sd-portfolio-head strong {
  font-size: 20px;
  font-weight: 750;
}

body.pro-mode .rl-stylist-window .rl-sd-portfolio-head span {
  color: var(--sd-muted);
  font-size: 13.5px;
}

body.pro-mode .rl-stylist-window .rl-sd-portfolio-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

body.pro-mode .rl-stylist-window .rl-sd-progress {
  --done: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px 0 8px;
  border-radius: 999px;
  background: var(--sd-soft);
  color: #3e4945 !important;
  font-size: 13px !important;
  font-weight: 700;
}

body.pro-mode .rl-stylist-window .rl-sd-progress > i {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: conic-gradient(var(--sd-accent) calc(var(--done) * 360deg), #cfe6da 0);
  -webkit-mask: radial-gradient(circle, transparent 7.5px, #000 8.5px);
  mask: radial-gradient(circle, transparent 7.5px, #000 8.5px);
}

body.pro-mode .rl-stylist-window .rl-sd-progress.is-done {
  background: var(--sd-accent-soft);
  color: #165c45 !important;
}

body.pro-mode .rl-stylist-window .rl-sd-add {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px 0 14px;
  border-radius: 999px;
  background: var(--sd-ink);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 160ms ease;
}

body.pro-mode .rl-stylist-window .rl-sd-add:hover {
  transform: translateY(-1px);
}

body.pro-mode .rl-stylist-window .rl-sd-add span {
  color: #fff !important;
  font-size: 14px !important;
}

body.pro-mode .rl-stylist-window .rl-sd-add > input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

body.pro-mode .rl-stylist-window .rl-sd-kept {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--sd-soft);
  color: var(--sd-muted) !important;
  font-size: 13px !important;
  font-weight: 650;
}

/* Each photo keeps its own shape. A row's photos share one height and fill
   the width together (wider photos take more of it); the last row keeps its
   natural size instead of stretching. */
body.pro-mode .rl-stylist-window .rl-sd-photo-grid {
  --row: 230px;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 14px;
}

body.pro-mode .rl-stylist-window .rl-sd-photo-grid::after {
  content: "";
  flex: 100000 1 0px;
}

body.pro-mode .rl-stylist-window .rl-sd-photo-grid.is-small {
  --row: 150px;
  gap: 10px;
}

body.pro-mode .rl-stylist-window .rl-sd-photo-tile {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 22px;
  flex: calc(var(--ar, 0.8) * 100) 1 calc(var(--ar, 0.8) * var(--row));
  min-width: 0;
  aspect-ratio: var(--ar, 0.8);
  background: #e8ecea;
  animation: rl-sd-photo-in 420ms cubic-bezier(0.2, 0.9, 0.25, 1) backwards;
  transition: opacity 260ms ease, transform 260ms ease, box-shadow 260ms ease;
}

body.pro-mode .rl-stylist-window .rl-sd-photo-grid.is-small .rl-sd-photo-tile {
  border-radius: 16px;
}

@keyframes rl-sd-photo-in {
  0% { opacity: 0; transform: scale(0.96); }
  100% { opacity: 1; transform: none; }
}

body.pro-mode .rl-stylist-window .rl-sd-photo-tile.is-removing {
  opacity: 0;
  transform: scale(0.9);
  pointer-events: none;
}

body.pro-mode .rl-stylist-window .rl-sd-photo-open:not(#rl) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  cursor: zoom-in;
}

body.pro-mode .rl-stylist-window .rl-sd-photo-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

body.pro-mode .rl-stylist-window .rl-sd-photo-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 14, 12, 0.35), transparent 35%, transparent 60%, rgba(10, 14, 12, 0.4));
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
}

body.pro-mode .rl-stylist-window .rl-sd-photo-tile:is(:hover, :focus-within)::after {
  opacity: 1;
}

body.pro-mode .rl-stylist-window .rl-sd-photo-tile:hover img {
  transform: scale(1.04);
}

body.pro-mode .rl-stylist-window .rl-sd-photo-tools {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: flex;
  gap: 8px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 200ms ease, transform 200ms ease;
}

body.pro-mode .rl-stylist-window .rl-sd-photo-tile:is(:hover, :focus-within) .rl-sd-photo-tools {
  opacity: 1;
  transform: none;
}

body.pro-mode .rl-stylist-window .rl-sd-glass:not(#rl) {
  display: grid;
  width: 40px !important;
  min-width: 0 !important;
  height: 40px !important;
  min-height: 0 !important;
  padding: 0 !important;
  place-items: center;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(15, 20, 18, 0.55) !important;
  color: #fff !important;
  box-shadow: none !important;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background-color 160ms ease, transform 160ms ease;
}

body.pro-mode .rl-stylist-window .rl-sd-glass:hover:not(#rl) {
  background: rgba(15, 20, 18, 0.75) !important;
  transform: scale(1.06);
}

body.pro-mode .rl-stylist-window .rl-sd-glass.is-danger:not(#rl) {
  color: #ffb4ab !important;
}

/* A photo being published: the file itself, softened, with a turning ring. */
body.pro-mode .rl-stylist-window .rl-sd-photo-tile.is-uploading img {
  filter: blur(2px) saturate(0.9);
}

body.pro-mode .rl-stylist-window .rl-sd-uploading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(246, 247, 245, 0.4);
}

body.pro-mode .rl-stylist-window .rl-sd-uploading > i {
  width: 56px;
  height: 56px;
  border: 6px solid rgba(255, 255, 255, 0.75);
  border-top-color: var(--sd-ink);
  border-radius: 50%;
  animation: rl-sd-spin 900ms linear infinite;
}

@keyframes rl-sd-spin {
  to { transform: rotate(360deg); }
}

body.pro-mode .rl-stylist-window .rl-sd-uploading > b {
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(15, 20, 18, 0.7);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
}

body.pro-mode .rl-stylist-window .rl-sd-portfolio-empty {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 320px;
  border: 2px dashed #cfd7d3;
  border-radius: 24px;
  color: var(--sd-muted);
  font-size: 14px;
}

body.pro-mode .rl-stylist-window .rl-sd-sent {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid #e6ebe8;
}

body.pro-mode .rl-stylist-window .rl-sd-sent > header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

/* Pay: the rates and this pay period. */
body.pro-mode .rl-stylist-window .rl-sd-pay {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 16px;
}

body.pro-mode .rl-stylist-window .rl-sd-pay-rates:not(#rl) {
  gap: 18px;
  margin: 0 !important;
  padding: 22px !important;
  border: 0 !important;
  border-radius: 22px !important;
  background: #fff !important;
}

body.pro-mode .rl-stylist-window .rl-sd-pay-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

body.pro-mode .rl-stylist-window .rl-sd-money {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--sd-muted);
  font-size: 13px;
}

body.pro-mode .rl-stylist-window .rl-sd-money-box {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 52px;
  padding: 0 14px;
  border: 1px solid var(--sd-line);
  border-radius: 14px;
  background: #fff;
}

body.pro-mode .rl-stylist-window .rl-sd-money-box:focus-within {
  border-color: var(--sd-accent);
  box-shadow: 0 0 0 4px rgba(31, 122, 92, 0.12);
}

body.pro-mode .rl-stylist-window .rl-sd-money-box i {
  color: var(--sd-faint);
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
}

body.pro-mode .rl-stylist-window .rl-sd-money-box input:not(#rl) {
  flex: 1;
  width: 100%;
  min-width: 0;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--sd-ink) !important;
  font-size: 18px !important;
  font-weight: 700;
  outline: none;
}

body.pro-mode .rl-stylist-window .rl-sd-money-box em {
  flex: none;
  color: var(--sd-faint);
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
}

body.pro-mode .rl-stylist-window .rl-sd-money.is-date input:not(#rl) {
  height: 48px;
  min-height: 0 !important;
  padding: 0 14px !important;
  border: 1px solid var(--sd-line) !important;
  border-radius: 14px !important;
  background: #fff !important;
  color: var(--sd-ink) !important;
  font-size: 15px !important;
  font-weight: 600;
}

body.pro-mode .rl-stylist-window .rl-sd-earlier {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.pro-mode .rl-stylist-window .rl-sd-earlier-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 14px;
  background: var(--sd-ground);
  font-size: 14px;
}

body.pro-mode .rl-stylist-window .rl-sd-earlier-row span:last-child {
  color: var(--sd-muted);
}

body.pro-mode .rl-stylist-window .rl-sd-period {
  padding: 22px;
}

body.pro-mode .rl-stylist-window .rl-sd-period-total {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

body.pro-mode .rl-stylist-window .rl-sd-period-total strong {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

body.pro-mode .rl-stylist-window .rl-sd-period-total span {
  color: var(--sd-muted);
  font-size: 13px;
}

body.pro-mode .rl-stylist-window .rl-sd-link:not(#rl) {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: var(--sd-accent) !important;
  font-size: 14px !important;
  font-weight: 700;
  box-shadow: none !important;
  cursor: pointer;
}

/* Footer: delete on the left; cancel and save as pills on the right. */
body.pro-mode .rl-stylist-window .business-access-editor-footer:not(#rl) {
  padding: 14px 28px !important;
  border-top: 1px solid #eef1ef !important;
  background: #fff !important;
}

body.pro-mode .rl-stylist-window .business-team-drawer-footer-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

body.pro-mode .rl-stylist-window :is(.rl-sd-danger, .rl-sd-cancel, .rl-sd-save):not(#rl) {
  height: 44px !important;
  min-height: 44px !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: transform 160ms ease, background-color 160ms ease;
}

body.pro-mode .rl-stylist-window .rl-sd-danger:not(#rl) {
  padding: 0 18px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--sd-danger) !important;
  font-weight: 700 !important;
}

body.pro-mode .rl-stylist-window .rl-sd-danger:hover:not(:disabled):not(#rl) {
  background: #fbeeec !important;
}

body.pro-mode .rl-stylist-window .rl-sd-cancel:not(#rl) {
  padding: 0 22px !important;
  border: 1px solid var(--sd-line) !important;
  background: #fff !important;
  color: var(--sd-ink) !important;
  font-weight: 600 !important;
}

body.pro-mode .rl-stylist-window .rl-sd-save:not(#rl) {
  padding: 0 24px !important;
  border: 0 !important;
  background: var(--sd-ink) !important;
  color: #fff !important;
  font-weight: 700 !important;
}

body.pro-mode .rl-stylist-window :is(.rl-sd-cancel, .rl-sd-save):hover:not(:disabled):not(#rl) {
  transform: translateY(-1px);
}

body.pro-mode .rl-stylist-window .rl-sd-footer-hint {
  display: none;
  margin-right: 6px;
  color: var(--sd-muted);
  font-size: 13px;
}

body.pro-mode .rl-stylist-window form[data-tab="portfolio"] .rl-sd-footer-hint {
  display: inline;
}

@media (max-width: 900px) {
  body.pro-mode .rl-stylist-window :is(.rl-sd-settings, .rl-sd-profile-top, .rl-sd-pay, .rl-sd-details):not(#rl) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.pro-mode .rl-stylist-window .rl-sd-photo-grid {
    --row: 160px;
    gap: 10px;
  }

  body.pro-mode .rl-stylist-window .rl-stylist-tabs:not(#rl) {
    margin: 0 16px 12px !important;
  }

  body.pro-mode .rl-stylist-window .rl-stylist-tabs > button:not(#rl) {
    padding: 0 14px !important;
  }

  body.pro-mode .rl-stylist-window .rl-sd-footer-hint {
    display: none !important;
  }
}

/* The older drawer layers (refinelook.css) style this window's parts with
   !important; the design wins here. */
body.pro-mode .business-team-drawer-layer.rl-stylist-window .business-team-drawer-body:not(#rl) {
  background: #fff !important;
}

body.pro-mode .rl-stylist-window .business-team-drawer-header :is(.rl-sd-head-pills, .rl-sd-status, .rl-sd-head-sub):not(#rl) {
  margin: 0 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

body.pro-mode .rl-stylist-window .rl-sd-rule:not(#rl) {
  flex-direction: row !important;
  grid-template-columns: none !important;
}

body.pro-mode .rl-stylist-window .rl-sd-details:not(#rl) {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

body.pro-mode .rl-stylist-window .rl-sd-grid :is(input:not([type="hidden"]), select):not(.rl-pf-chip-input):disabled:not(#rl) {
  border-color: transparent !important;
  background: var(--sd-ground) !important;
  color: var(--sd-muted) !important;
}

body.pro-mode .rl-stylist-window .rl-team-hours-day:not(#rl) {
  margin: 0 !important;
}

body.pro-mode .rl-stylist-window .rl-team-hours-times:not(#rl) {
  justify-content: flex-start !important;
  justify-self: start !important;
  margin: 0 !important;
}

body.pro-mode .rl-stylist-window .rl-team-hours-note:not(#rl) {
  justify-self: start;
  text-align: left !important;
}

@media (max-width: 900px) {
  body.pro-mode .rl-stylist-window .rl-sd-details:not(#rl) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Chip editors in the window: chips and a bare input on one line. */
body.pro-mode .rl-stylist-window .rl-pf-chip-editor .rl-pf-chip-input:not(#rl) {
  flex: 1;
  width: auto !important;
  min-width: 90px;
  height: 28px !important;
  min-height: 0 !important;
  padding: 0 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--sd-ink) !important;
  font-size: 13px !important;
  outline: none !important;
}

body.pro-mode .rl-stylist-window .rl-sd-salon .rl-pf-chip-editor .rl-pf-chip-input:not(#rl) {
  min-width: 140px;
}

body.pro-mode .rl-stylist-window .rl-pf-chip-input::placeholder {
  color: #8a9692;
  font-style: normal;
}

body.pro-mode .rl-stylist-window .rl-sd-inline.is-bio:not(#rl) {
  min-height: 3.2em !important;
}

/* Pay: plain sentence case, light placeholders. */
body.pro-mode .rl-stylist-window .rl-sd-pay :is(.rl-sd-card-head span, .rl-sd-muted, .rl-sd-money):not(#rl) {
  text-transform: none !important;
  letter-spacing: 0 !important;
}

body.pro-mode .rl-stylist-window .rl-sd-money-box input::placeholder {
  color: var(--sd-faint);
  font-weight: 600;
}

body.pro-mode .rl-stylist-window .rl-sd-seat:not(#rl) {
  flex-direction: row !important;
  align-items: center !important;
  text-align: left !important;
}

/* Phone: a 16px gutter all round; the times go under the day. */
@media (max-width: 640px) {
  body.pro-mode .business-team-drawer-layer.is-centered.rl-stylist-window .business-team-drawer:not(#rl) {
    width: calc(100vw - 32px) !important;
    height: calc(100dvh - 32px) !important;
    border-radius: 24px !important;
  }

  body.pro-mode .business-team-drawer-layer.is-centered.rl-stylist-window .business-team-drawer-header:not(#rl) {
    padding: 18px 16px 14px !important;
  }

  body.pro-mode .rl-stylist-window .business-access-editor-fields:not(#rl) {
    padding: 16px !important;
  }

  body.pro-mode .rl-stylist-window .business-access-editor-footer:not(#rl) {
    padding: 12px 16px !important;
  }

  body.pro-mode .rl-stylist-window .rl-sd-card {
    padding: 16px;
  }

  body.pro-mode .rl-stylist-window .rl-team-hours-day:not(#rl) {
    grid-template-columns: 44px 44px minmax(0, 1fr) !important;
    padding: 6px 0 !important;
  }

  body.pro-mode .rl-stylist-window .rl-team-hours-day.is-working .rl-team-hours-times:not(#rl) {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    margin: 0 !important;
  }

  body.pro-mode .rl-stylist-window .rl-team-hours-times .prelook-time-control:not(#rl) {
    flex: 1;
    width: auto;
    min-width: 0;
  }

  body.pro-mode .rl-stylist-window .rl-team-hours-day:not(.is-working) .rl-team-hours-times:not(#rl) {
    display: none !important;
  }

  body.pro-mode .rl-stylist-window .rl-sd-portfolio-head {
    flex-wrap: wrap;
  }

  body.pro-mode .rl-stylist-window :is(.rl-sd-pay-fields, .rl-sd-stats.is-three):not(#rl) {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==== Stylist detail motion (10-31): the tab pill glides, panels slide in
   from the side of the tab pressed, cards rise in turn, and every press
   answers. ==== */
body.pro-mode .rl-stylist-window .rl-stylist-tabs:not(#rl) {
  position: relative;
}

body.pro-mode .rl-stylist-window .rl-stylist-tabs > button:not(#rl) {
  position: relative;
  z-index: 1;
}

body.pro-mode .rl-stylist-window .rl-stylist-tabs > button:active:not(#rl) {
  transform: scale(0.95);
}

body.pro-mode .rl-stylist-window .rl-sd-tab-thumb {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  border-radius: 999px;
  background: var(--sd-ink);
  opacity: 0;
  pointer-events: none;
}

body.pro-mode .rl-stylist-window .rl-stylist-tabs.is-gliding .rl-sd-tab-thumb {
  opacity: 1;
}

body.pro-mode .rl-stylist-window .rl-stylist-tabs.is-gliding > button.active:not(#rl) {
  background: transparent !important;
}

body.pro-mode .rl-stylist-window .rl-stylist-panel:not([hidden]):not(#rl) {
  animation: rl-sd-panel-next 380ms cubic-bezier(0.2, 0.9, 0.25, 1) backwards;
}

body.pro-mode .rl-stylist-window form[data-dir="prev"] .rl-stylist-panel:not([hidden]):not(#rl) {
  animation-name: rl-sd-panel-prev;
}

@keyframes rl-sd-panel-next {
  from { opacity: 0; transform: translateX(28px); }
}

@keyframes rl-sd-panel-prev {
  from { opacity: 0; transform: translateX(-28px); }
}

body.pro-mode .rl-stylist-window .rl-stylist-panel:not([hidden]) .rl-sd-card {
  animation: rl-sd-card-in 520ms cubic-bezier(0.2, 0.9, 0.25, 1) backwards;
}

body.pro-mode .rl-stylist-window .rl-stylist-panel:not([hidden]) :is(.rl-sd-card + .rl-sd-card, .rl-sd-column + .rl-sd-column > .rl-sd-card:first-child, .rl-sd-glance) {
  animation-delay: 70ms;
}

body.pro-mode .rl-stylist-window .rl-stylist-panel:not([hidden]) :is(.rl-sd-profile-top + .rl-sd-details, .rl-sd-pay > :nth-child(2)) {
  animation-delay: 120ms;
}

@keyframes rl-sd-card-in {
  from { opacity: 0; transform: translateY(16px) scale(0.985); }
}

body.pro-mode .rl-stylist-window .rl-sd-photo-tile:nth-child(2) { animation-delay: 30ms; }
body.pro-mode .rl-stylist-window .rl-sd-photo-tile:nth-child(3) { animation-delay: 60ms; }
body.pro-mode .rl-stylist-window .rl-sd-photo-tile:nth-child(4) { animation-delay: 90ms; }
body.pro-mode .rl-stylist-window .rl-sd-photo-tile:nth-child(5) { animation-delay: 120ms; }
body.pro-mode .rl-stylist-window .rl-sd-photo-tile:nth-child(6) { animation-delay: 150ms; }
body.pro-mode .rl-stylist-window .rl-sd-photo-tile:nth-child(7) { animation-delay: 180ms; }
body.pro-mode .rl-stylist-window .rl-sd-photo-tile:nth-child(n + 8) { animation-delay: 210ms; }

@keyframes rl-sd-photo-in {
  0% { opacity: 0; transform: translateY(14px) scale(0.96); }
  100% { opacity: 1; transform: none; }
}

/* Presses answer. */
body.pro-mode .rl-stylist-window :is(.rl-sd-cancel, .rl-sd-save, .rl-sd-add, .rl-sd-circle, .rl-sd-danger):active:not(:disabled) {
  transform: scale(0.96) !important;
}

body.pro-mode .rl-stylist-window .business-team-drawer-header .icon-button:not(#rl) {
  transition: transform 260ms cubic-bezier(0.3, 1.3, 0.5, 1), background-color 160ms ease !important;
}

body.pro-mode .rl-stylist-window .business-team-drawer-header .icon-button:hover:not(:disabled):not(#rl) {
  transform: rotate(90deg);
  background: #e6ebe8 !important;
}

body.pro-mode .rl-stylist-window .rl-sd-chip {
  transition: background-color 200ms ease, color 200ms ease, transform 200ms cubic-bezier(0.3, 1.4, 0.5, 1);
}

body.pro-mode .rl-stylist-window .rl-sd-chip:active {
  transform: scale(0.94);
}

body.pro-mode .rl-stylist-window .rl-sd-chip > i {
  transition: box-shadow 220ms ease;
}

body.pro-mode .rl-stylist-window .rl-sd-chip > input:checked ~ i {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--role-color) 28%, transparent);
}

body.pro-mode .rl-stylist-window .rl-sd-switch-button:active > span {
  transform: scale(0.86);
}

body.pro-mode .rl-stylist-window .rl-sd-switch-button[aria-checked="true"]:active > span {
  transform: translateX(22px) scale(0.86);
}

body.pro-mode .rl-stylist-window .rl-sd-rule:active > input:not(:checked) + .rl-sd-switch::after {
  transform: scale(0.86) !important;
}

body.pro-mode .rl-stylist-window .rl-sd-rule:active > input:checked + .rl-sd-switch::after {
  transform: translateX(18px) scale(0.86) !important;
}

/* Save: a spinner from the press, then a green tick, then the window goes. */
body.pro-mode .rl-stylist-window .rl-sd-save:not(#rl) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: background-color 280ms ease, transform 160ms ease, box-shadow 280ms ease !important;
}

body.pro-mode .rl-stylist-window .rl-sd-save:disabled:not(#rl) {
  opacity: 1 !important;
  cursor: default;
}

body.pro-mode .rl-stylist-window .rl-sd-save-icon {
  display: inline-grid;
  width: 0;
  height: 18px;
  margin-right: 0;
  place-items: center;
  opacity: 0;
  transition: width 300ms cubic-bezier(0.3, 1.3, 0.5, 1), margin 300ms cubic-bezier(0.3, 1.3, 0.5, 1), opacity 200ms ease;
}

body.pro-mode .rl-stylist-window .rl-sd-save-icon > * {
  grid-area: 1 / 1;
}

body.pro-mode .rl-stylist-window .rl-sd-save-icon > i {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: rl-sd-spin 700ms linear infinite;
}

body.pro-mode .rl-stylist-window .rl-sd-save-icon > svg {
  opacity: 0;
  transform: scale(0.3) rotate(-30deg);
  stroke-width: 2.6;
}

body.pro-mode .rl-stylist-window .rl-sd-save:is(.is-saving, .is-saved) .rl-sd-save-icon {
  width: 18px;
  margin-right: 8px;
  opacity: 1;
}

body.pro-mode .rl-stylist-window .rl-sd-save.is-saved:not(#rl) {
  background: var(--sd-accent) !important;
  box-shadow: 0 10px 24px -10px rgba(31, 122, 92, 0.7) !important;
}

body.pro-mode .rl-stylist-window .rl-sd-save.is-saved .rl-sd-save-icon > i {
  opacity: 0;
  animation: none;
}

body.pro-mode .rl-stylist-window .rl-sd-save.is-saved .rl-sd-save-icon > svg {
  opacity: 1;
  transform: none;
  transition: opacity 160ms ease, transform 420ms cubic-bezier(0.3, 1.7, 0.5, 1);
}

body.pro-mode .rl-stylist-window .rl-sd-save.is-saved .rl-sd-save-icon > svg path {
  stroke-dasharray: 24;
  animation: rl-sd-tick 420ms 60ms cubic-bezier(0.3, 0.9, 0.3, 1) backwards;
}

@keyframes rl-sd-tick {
  from { stroke-dashoffset: 24; }
}

body.pro-mode .rl-stylist-window .business-team-drawer:not(#rl) {
  transition: box-shadow 320ms ease;
}

body.pro-mode .business-team-drawer-layer.rl-stylist-window.is-sd-done .business-team-drawer:not(#rl) {
  box-shadow: 0 0 0 3px rgba(31, 122, 92, 0.28), 0 30px 80px -20px rgba(15, 20, 18, 0.35) !important;
}

body.pro-mode .rl-stylist-window.is-sd-done .rl-stylist-window-scroll,
body.pro-mode .business-team-drawer-layer.rl-stylist-window.is-saving .rl-stylist-window-scroll {
  opacity: 0.72;
  transition: opacity 240ms ease;
}

body.pro-mode .rl-stylist-window .rl-sd-footer-hint {
  animation: rl-sd-fade-in 320ms ease backwards;
}

@keyframes rl-sd-fade-in {
  from { opacity: 0; transform: translateX(8px); }
}

/* Photos: they lift on hover; a held photo floats over the others, which
   glide aside as it passes. */
body.pro-mode .rl-stylist-window .rl-sd-photo-grid:not(.is-sorting) .rl-sd-photo-tile:not(.is-uploading):hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px -18px rgba(15, 20, 18, 0.5);
}

body.pro-mode .rl-stylist-window .rl-sd-photo-grid.is-sortable > .rl-sd-photo-tile:not(.is-uploading) {
  cursor: grab;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

body.pro-mode .rl-stylist-window .rl-sd-photo-grid.is-sortable .rl-sd-photo-open:not(#rl) {
  cursor: grab;
}

body.pro-mode .rl-stylist-window .rl-sd-photo-tile img {
  -webkit-user-drag: none;
}

body.pro-mode .rl-stylist-window .rl-sd-photo-grid.is-sorting,
body.pro-mode .rl-stylist-window .rl-sd-photo-grid.is-sorting * {
  cursor: grabbing !important;
  -webkit-user-select: none;
  user-select: none;
}

body.pro-mode .rl-stylist-window .rl-sd-photo-tile.is-armed {
  scale: 0.96;
  transition: scale 200ms ease;
}

body.pro-mode .rl-stylist-window .rl-sd-photo-tile.is-lifted {
  z-index: 6;
  scale: 1.06;
  rotate: -1.5deg;
  box-shadow: 0 30px 60px -18px rgba(15, 20, 18, 0.55), 0 0 0 3px #fff;
  transition: scale 240ms cubic-bezier(0.3, 1.5, 0.5, 1), rotate 240ms ease, box-shadow 240ms ease;
}

body.pro-mode .rl-stylist-window .rl-sd-photo-tile:not(.is-lifted) {
  transition: opacity 260ms ease, transform 260ms ease, box-shadow 260ms ease, scale 300ms cubic-bezier(0.25, 1.2, 0.4, 1), rotate 300ms ease;
}

body.pro-mode .rl-stylist-window .rl-sd-photo-tile.is-lifted :is(.rl-sd-photo-tools, .rl-sd-photo-open img) {
  transition: none;
}

body.pro-mode .rl-stylist-window .rl-sd-photo-tile.is-lifted .rl-sd-photo-tools,
body.pro-mode .rl-stylist-window .rl-sd-photo-grid.is-sorting .rl-sd-photo-tile::after {
  opacity: 0 !important;
}

body.pro-mode .rl-stylist-window .rl-sd-photo-grid.is-sorting .rl-sd-photo-tile:not(.is-lifted) img {
  transform: none !important;
  filter: saturate(0.85);
}

/* Files over the window on Portfolio: it says so, wherever they are. */
body.pro-mode .rl-stylist-window .rl-stylist-window-scroll:not(#rl) {
  transition: background-color 200ms ease, outline-color 200ms ease;
  outline: 2px dashed transparent;
  outline-offset: -10px;
}

body.pro-mode .rl-stylist-window.is-dropping .rl-stylist-window-scroll:not(#rl) {
  outline-color: var(--sd-accent);
  background: #eaf5ef;
}

body.pro-mode .rl-stylist-window .rl-sd-drop-hint {
  position: sticky;
  top: 0;
  z-index: 7;
  display: flex;
  justify-content: center;
  height: 0;
  margin-bottom: -16px;
  pointer-events: none;
}

body.pro-mode .rl-stylist-window .rl-sd-drop-hint > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  margin-top: 6px;
  padding: 0 22px 0 16px;
  border-radius: 999px;
  background: var(--sd-ink);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 16px 34px -14px rgba(15, 20, 18, 0.55);
  opacity: 0;
  transform: translateY(-10px) scale(0.94);
  transition: opacity 200ms ease, transform 260ms cubic-bezier(0.3, 1.4, 0.5, 1);
}

body.pro-mode .rl-stylist-window.is-dropping .rl-sd-drop-hint > span {
  opacity: 1;
  transform: none;
}

body.pro-mode .rl-stylist-window.is-dropping .rl-sd-add {
  animation: rl-sd-pulse 900ms ease-in-out infinite;
}

@keyframes rl-sd-pulse {
  50% { box-shadow: 0 0 0 8px rgba(31, 122, 92, 0.18); }
}

@media (prefers-reduced-motion: reduce) {
  body.pro-mode .rl-stylist-window :is(.rl-stylist-panel, .rl-sd-card, .rl-sd-photo-tile, .rl-sd-footer-hint, .rl-sd-add):not(#rl) {
    animation: none !important;
  }

  body.pro-mode .rl-stylist-window .rl-sd-photo-tile.is-lifted {
    rotate: none;
    scale: 1.02;
  }
}

/* Header: Active and the account chip are one size, on one line. */
body.pro-mode .rl-stylist-window .business-team-drawer-header .rl-sd-head-pills > :is(.rl-sd-status, .rl-team-kind):not(#rl) {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  height: 26px;
  margin: 0 !important;
  padding: 0 11px !important;
  border-radius: 999px;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  vertical-align: middle;
}

body.pro-mode .rl-stylist-window .business-team-drawer-header .rl-sd-head-pills > .rl-team-kind svg {
  width: 13px;
  height: 13px;
}

body.pro-mode .rl-stylist-window .business-team-drawer-header .rl-sd-head-pills:not(#rl) {
  align-self: center;
  line-height: 1;
}

/* Date fields in the stylist window: the dashboard's own picker. */
body.pro-mode .rl-stylist-window .prelook-date-control {
  display: block;
  width: 100%;
}

body.pro-mode .rl-stylist-window .prelook-date-control .rl-date-pick-trigger:not(#rl) {
  min-height: 40px;
  border-color: var(--sd-line);
  border-radius: 12px;
  color: var(--sd-ink);
  font-size: 14px;
  font-weight: 600;
}

body.pro-mode .rl-stylist-window .rl-sd-money.is-date .rl-date-pick-trigger:not(#rl) {
  min-height: 48px;
  border-radius: 14px;
  font-size: 15px;
}

/* ==== Groups & access v3 (10-31): the steps sit under each name, an ⓘ
   explains every step, and the picture is the dashboard itself. ==== */
body.pro-mode .dashboard-shell .dashboard-content .rl-access-section:not(#rl) {
  grid-template-columns: minmax(290px, 330px) minmax(0, 1fr);
  gap: 8px 18px;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-access-list:not(#rl) {
  overflow: visible;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-access-row:not(#rl) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 9px;
  min-height: 0;
  padding: 12px 14px 13px;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-access-list > .rl-access-row:first-child {
  border-radius: 20px 20px 0 0;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-access-list > .rl-access-row:last-child {
  border-radius: 0 0 20px 20px;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-access-row-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-access-row-head > strong {
  flex: 1;
  min-width: 0;
  color: #18211e;
  font-size: 0.95rem;
  font-weight: 650;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-access-row-head .rl-access-row-icon:not(#rl) {
  width: 30px;
  height: 30px;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-access-row .rl-seg:not(#rl) {
  width: 100%;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-access-row .rl-seg-option:not(#rl) {
  padding: 0 3px;
  font-size: 12.5px;
  white-space: nowrap;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-access-row .rl-seg[style*="--seg-count:5"] .rl-seg-option:not(#rl) {
  font-size: 11.5px;
  letter-spacing: -0.01em;
}

/* The ⓘ and what it explains. */
body.pro-mode .rl-access-info {
  position: relative;
  display: inline-grid;
  flex: none;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 50%;
  color: #9aa5a1;
  cursor: help;
  outline: none;
  transition: color 160ms ease, background-color 160ms ease;
}

body.pro-mode .rl-access-info > svg {
  width: 17px;
  height: 17px;
}

body.pro-mode .rl-access-info:is(:hover, :focus-visible) {
  background: #eef3f0;
  color: #1f7a5c;
}

body.pro-mode .rl-access-tip {
  position: absolute;
  top: calc(100% + 8px);
  right: -8px;
  z-index: 60;
  display: block;
  width: 320px;
  padding: 14px;
  border: 1px solid #e3e8e6;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 26px 60px -20px rgba(15, 20, 18, 0.38), 0 4px 12px rgba(15, 20, 18, 0.06);
  color: #17201c;
  text-align: left;
  cursor: default;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top right;
  transition: opacity 160ms ease, transform 220ms cubic-bezier(0.2, 0.9, 0.25, 1), visibility 0s linear 220ms;
}

body.pro-mode .rl-access-info:is(:hover, :focus-visible) .rl-access-tip {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

body.pro-mode .rl-access-tip > strong {
  display: block;
  font-size: 14px;
  font-weight: 750;
}

body.pro-mode .rl-access-tip-where {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 3px 0 10px;
  color: #5e6a65;
  font-size: 12px;
}

body.pro-mode .rl-access-tip-where svg {
  flex: none;
  width: 13px;
  height: 13px;
}

body.pro-mode .rl-access-tip ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.pro-mode .rl-access-tip li {
  display: grid;
  gap: 2px;
  padding: 7px 10px;
  border-radius: 11px;
  background: #f6f7f5;
}

body.pro-mode .rl-access-tip li b {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 750;
}

body.pro-mode .rl-access-tip li b svg {
  width: 13px;
  height: 13px;
}

body.pro-mode .rl-access-tip li span {
  color: #4d5955;
  font-size: 12px;
  line-height: 1.4;
}

body.pro-mode .rl-access-tip li.is-on { background: #eef1ef; box-shadow: inset 0 0 0 1.5px #b9c4bf; }
body.pro-mode .rl-access-tip li.is-on[data-tone="own"] { background: #e4f3ec; box-shadow: inset 0 0 0 1.5px #2c9d72; }
body.pro-mode .rl-access-tip li.is-on[data-tone="all"] { background: #e5eefb; box-shadow: inset 0 0 0 1.5px #3b7bd8; }
body.pro-mode .rl-access-tip li.is-on[data-tone="edit"] { background: #efe8fd; box-shadow: inset 0 0 0 1.5px #8558e8; }

body.pro-mode .rl-access-tip-needs {
  display: flex;
  gap: 6px;
  margin: 10px 0 0;
  padding: 8px 10px;
  border-radius: 11px;
  background: #fbf1df;
  color: #8a5a12;
  font-size: 12px;
  line-height: 1.4;
}

body.pro-mode .rl-access-tip-needs svg {
  flex: none;
  width: 14px;
  height: 14px;
}

/* The picture: their dashboard in a window. */
body.pro-mode .dashboard-shell .dashboard-content .rl-pv-section.rl-av:not(#rl) {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #e1e7e4;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 22px 46px -34px rgba(15, 20, 18, 0.45);
}

body.pro-mode .rl-av-chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border-bottom: 1px solid #edf0ee;
  background: #f7f8f7;
}

body.pro-mode .rl-av-chrome > i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #dfe4e1;
}

body.pro-mode .rl-av-chrome > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 auto;
  padding: 3px 12px;
  border-radius: 999px;
  background: #fff;
  color: #5e6a65;
  font-size: 11.5px;
  font-weight: 650;
}

body.pro-mode .rl-av-chrome > span svg {
  width: 13px;
  height: 13px;
}

body.pro-mode .rl-av-body {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  min-height: 320px;
}

body.pro-mode .rl-av-rail {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 12px 8px;
  border-right: 1px solid #edf0ee;
  background: #fbfcfb;
}

body.pro-mode .rl-av-brand {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 6px 10px;
  color: #17201c;
  font-size: 12.5px;
  font-weight: 800;
}

body.pro-mode .rl-av-brand > i {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background: linear-gradient(140deg, #8f7be8, #4fa3c8);
}

body.pro-mode .rl-av-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 27px;
  padding: 0 8px;
  border-radius: 9px;
  color: #3e4945;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

body.pro-mode .rl-av-tab > svg {
  flex: none;
  width: 14px;
  height: 14px;
}

body.pro-mode .rl-av-tab.is-here {
  background: #e6f3ec;
  box-shadow: inset 0 0 0 1px #bfe0cf;
  color: #165c45;
  font-weight: 700;
}

body.pro-mode .rl-av-tab.is-hidden {
  color: #b2bbb7;
}

body.pro-mode .rl-av-tab.is-hidden > span {
  text-decoration: line-through;
  text-decoration-color: rgba(178, 187, 183, 0.7);
}

body.pro-mode .rl-av-tab .rl-av-lock:not(#rl) {
  position: static;
  width: 16px;
  height: 16px;
  margin-left: auto;
  border: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

body.pro-mode .rl-av-rail-sep {
  height: 1px;
  margin: 6px 6px;
  background: #edf0ee;
}

body.pro-mode .rl-av-page {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  background: #f6f7f5;
}

body.pro-mode .rl-av-page.is-schedule > .is-cal,
body.pro-mode .rl-av-page.is-customers > :is(.is-list, .is-reviews),
body.pro-mode .rl-av-page.is-team > .is-pay {
  grid-column: 1 / -1;
}

body.pro-mode .rl-av-page.is-team {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
}

/* One item's part of a page. */
body.pro-mode .rl-av-region {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 12px 14px 14px;
  border: 1px solid #e9edeb;
  border-radius: 16px;
  background: #fff;
  transition: box-shadow 200ms ease, border-color 200ms ease, transform 200ms ease;
}

body.pro-mode .rl-av-region.is-focus {
  border-color: transparent;
  box-shadow: 0 0 0 2.5px var(--role-color, #2c9d72), 0 14px 30px -20px rgba(15, 20, 18, 0.4);
}

body.pro-mode .rl-av-region-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

body.pro-mode .rl-av-region-head > b {
  color: #17201c;
  font-size: 14px;
  font-weight: 750;
}

body.pro-mode .rl-av-chip {
  padding: 3px 9px;
  border-radius: 999px;
  background: #eef1ef;
  color: #66726d;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}

body.pro-mode .rl-av-region[data-tone="own"] > .rl-av-region-head .rl-av-chip { background: #e4f3ec; color: #1f7a5c; }
body.pro-mode .rl-av-region[data-tone="all"] > .rl-av-region-head .rl-av-chip { background: #e5eefb; color: #2c62b0; }
body.pro-mode .rl-av-region[data-tone="edit"] > .rl-av-region-head .rl-av-chip { background: #efe8fd; color: #6a3fd0; }

body.pro-mode .rl-av-region-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  transition: filter 240ms ease, opacity 240ms ease;
}

body.pro-mode .rl-av-region.is-off > .rl-av-region-body {
  filter: blur(3px) grayscale(0.7);
  opacity: 0.5;
  pointer-events: none;
  user-select: none;
}

body.pro-mode .rl-av-off {
  position: absolute;
  inset: 38px 0 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

body.pro-mode .rl-av-off > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid #e3e8e6;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 10px 24px -14px rgba(15, 20, 18, 0.4);
  color: #4d5955;
  font-size: 12px;
  font-weight: 700;
}

body.pro-mode .rl-av-off svg {
  width: 15px;
  height: 15px;
}

/* Pieces they can't see, buttons they can't use. */
body.pro-mode .rl-av-cell {
  position: relative;
  min-width: 0;
}

body.pro-mode .rl-av-cell.is-hidden > .rl-av-cell-v {
  filter: blur(4px);
  opacity: 0.6;
  user-select: none;
}

body.pro-mode .rl-av-lock {
  position: absolute;
  top: 50%;
  right: 8px;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 1px solid #e3e8e6;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(15, 20, 18, 0.1);
  color: #7d8984;
  transform: translateY(-50%);
}

body.pro-mode .rl-av-lock svg {
  width: 11px;
  height: 11px;
}

body.pro-mode .rl-av-btn {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 5px;
  height: 27px;
  padding: 0 11px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

body.pro-mode .rl-av-btn svg {
  width: 13px;
  height: 13px;
}

body.pro-mode .rl-av-btn.is-dark { background: #17201c; color: #fff; }
body.pro-mode .rl-av-btn.is-soft { background: #e4f3ec; color: #165c45; }
body.pro-mode .rl-av-btn.is-light { background: #fff; color: #17201c; }
body.pro-mode .rl-av-btn.is-locked { background: #eef1ef; color: #a0aaa6; }
body.pro-mode .rl-av-region > .rl-av-region-body > .rl-av-btn { align-self: flex-start; }

body.pro-mode .rl-av-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

body.pro-mode .rl-av-grow { flex: 1; }

body.pro-mode .rl-av-date {
  color: #17201c;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

body.pro-mode .rl-av-seg,
body.pro-mode .rl-av-tabs {
  display: inline-flex;
  align-self: flex-start;
  gap: 2px;
  padding: 2px;
  border-radius: 999px;
  background: #f1f4f2;
}

body.pro-mode :is(.rl-av-seg, .rl-av-tabs) > i {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  color: #5e6a65;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 650;
  white-space: nowrap;
}

body.pro-mode :is(.rl-av-seg, .rl-av-tabs) > i.is-on {
  background: #17201c;
  color: #fff;
}

body.pro-mode .rl-av-tabs > i.is-hidden {
  color: #b2bbb7;
}

body.pro-mode .rl-av-tabs > i .rl-av-lock:not(#rl) {
  position: static;
  width: 14px;
  height: 14px;
  border: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

body.pro-mode .rl-av-search {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 27px;
  padding: 0 11px;
  border-radius: 999px;
  background: #f1f4f2;
  color: #8a9692;
  font-size: 11px;
}

body.pro-mode .rl-av-search svg { width: 12px; height: 12px; }

body.pro-mode .rl-av-avatar {
  display: inline-grid;
  flex: none;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  background: var(--c);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
}

body.pro-mode .rl-av-avatar.is-big {
  width: 36px;
  height: 36px;
  font-size: 11.5px;
}

body.pro-mode .rl-av-two {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

body.pro-mode .rl-av-two > :is(b, small, span) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.pro-mode .rl-av-two > b { color: #17201c; font-size: 11.5px; font-weight: 700; }
body.pro-mode .rl-av-two > small { color: #7d8984; font-size: 10px; }

body.pro-mode .rl-av-muted {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #9aa5a1;
  font-size: 11px;
}

body.pro-mode .rl-av-muted svg { width: 11px; height: 11px; }

body.pro-mode .rl-av-pill {
  justify-self: end;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e4f3ec;
  color: #1f7a5c;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}

body.pro-mode .rl-av-pill.is-low { background: #fdecea; color: #b4392f; }

/* Calendar. */
body.pro-mode .rl-av-cal {
  display: grid;
  grid-template-columns: 22px repeat(3, minmax(0, 1fr));
  gap: 8px;
  height: 250px;
}

body.pro-mode .rl-av-ruler {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 38px 0 4px;
  color: #a0aaa6;
  font-size: 9.5px;
  font-weight: 600;
  text-align: right;
}

body.pro-mode .rl-av-col {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

body.pro-mode .rl-av-col > header {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 32px;
}

body.pro-mode .rl-av-col > header > span:not(.rl-av-avatar) {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

body.pro-mode .rl-av-col > header b { color: #17201c; font-size: 11.5px; font-weight: 750; }
body.pro-mode .rl-av-col > header small { color: #7d8984; font-size: 9.5px; }

body.pro-mode .rl-av-col-day {
  position: relative;
  flex: 1;
  overflow: hidden;
  border: 1px solid #eef1ef;
  border-radius: 10px;
  background: #fff repeating-linear-gradient(180deg, transparent 0 calc(12.5% - 1px), #f2f4f3 calc(12.5% - 1px) 12.5%);
}

body.pro-mode .rl-av-offhours {
  position: absolute;
  right: 0;
  left: 0;
  background: repeating-linear-gradient(135deg, #f3f5f4 0 6px, #eaeeec 6px 12px);
}

body.pro-mode .rl-av-appt {
  position: absolute;
  right: 4px;
  left: 4px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 4px 7px;
  border-left: 3px solid var(--edge);
  border-radius: 8px;
  background: var(--fill);
  color: #17201c;
  font-style: normal;
}

body.pro-mode .rl-av-appt.is-mint { --fill: #dff3ea; --edge: #2c9d72; }
body.pro-mode .rl-av-appt.is-sky { --fill: #e1edfb; --edge: #4f8fd1; }
body.pro-mode .rl-av-appt.is-lilac { --fill: #ece6fb; --edge: #7c5bd6; }
body.pro-mode .rl-av-appt.is-peach { --fill: #fbe9dc; --edge: #d9822b; }
body.pro-mode .rl-av-appt b { font-size: 9.5px; font-weight: 700; color: #4d5955; }
body.pro-mode .rl-av-appt span { overflow: hidden; font-size: 10.5px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
body.pro-mode .rl-av-appt small { overflow: hidden; color: #5e6a65; font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }

body.pro-mode .rl-av-appt .rl-av-lock:not(#rl) {
  top: 4px;
  right: 4px;
  width: 16px;
  height: 16px;
  transform: none;
}

body.pro-mode .rl-av-appt .rl-av-lock svg { width: 9px; height: 9px; }

body.pro-mode .rl-av-col.is-hidden > :is(header, .rl-av-col-day) {
  filter: blur(3.5px);
  opacity: 0.55;
}

body.pro-mode .rl-av-col-veil {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #5e6a65;
  font-size: 10.5px;
  font-weight: 700;
}

body.pro-mode .rl-av-col-veil .rl-av-lock:not(#rl) {
  position: static;
  width: 28px;
  height: 28px;
  transform: none;
}

body.pro-mode .rl-av-col-veil small {
  padding: 2px 8px;
  border-radius: 999px;
  background: #fff;
}

/* Working hours. */
body.pro-mode .rl-av-hours-row {
  display: grid;
  grid-template-columns: 34px 30px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 30px;
  border-top: 1px solid #f2f4f3;
}

body.pro-mode .rl-av-hours-row > b { color: #17201c; font-size: 11px; font-weight: 700; }

body.pro-mode .rl-av-switch {
  position: relative;
  width: 28px;
  height: 16px;
  border-radius: 999px;
  background: #d7ddda;
}

body.pro-mode .rl-av-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
}

body.pro-mode .rl-av-switch.is-on { background: #2c9d72; }
body.pro-mode .rl-av-switch.is-on::after { transform: translateX(12px); }
body.pro-mode .rl-av-switch.is-locked { opacity: 0.45; }

body.pro-mode .rl-av-time {
  justify-self: start;
  color: #17201c;
  font-size: 11px;
  font-weight: 600;
}

body.pro-mode .rl-av-time.is-field {
  padding: 3px 8px;
  border: 1px solid #dfe5e2;
  border-radius: 8px;
}

body.pro-mode .rl-av-time.is-muted { color: #a0aaa6; }

/* Lists and tables. */
body.pro-mode .rl-av-listrow > .rl-av-cell-v {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 6px 2px;
  border-top: 1px solid #f2f4f3;
}

body.pro-mode .rl-av-listrow.is-payments > .rl-av-cell-v {
  grid-template-columns: 16px minmax(0, 1fr) auto;
  color: #3e4945;
  font-size: 11.5px;
}

body.pro-mode .rl-av-listrow.is-payments svg { width: 14px; height: 14px; }
body.pro-mode .rl-av-listrow.is-payments small { color: #9aa5a1; font-size: 10px; }

body.pro-mode .rl-av-datechip {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
}

body.pro-mode .rl-av-datechip small { color: #c0563f; font-size: 8.5px; font-weight: 800; }
body.pro-mode .rl-av-datechip b { color: #17201c; font-size: 14px; font-weight: 800; }

body.pro-mode .rl-av-table {
  display: flex;
  flex-direction: column;
  --cols: 1.4fr 1.2fr 0.8fr 0.8fr;
}

body.pro-mode .rl-av-table.is-pay { --cols: 1.3fr 0.6fr 0.8fr 0.8fr; }
body.pro-mode .rl-av-table.is-stock { --cols: 1.5fr 0.5fr 0.8fr; }

body.pro-mode .rl-av-thead,
body.pro-mode .rl-av-trow:not(.rl-av-cell),
body.pro-mode .rl-av-trow > .rl-av-cell-v {
  display: grid;
  grid-template-columns: var(--cols);
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
}

body.pro-mode .rl-av-thead {
  padding-top: 0;
  color: #8a9692;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body.pro-mode .rl-av-trow:not(.rl-av-cell),
body.pro-mode .rl-av-trow > .rl-av-cell-v {
  border-top: 1px solid #f2f4f3;
  color: #3e4945;
  font-size: 11.5px;
}

body.pro-mode .rl-av-trow b { color: #17201c; font-weight: 700; }

body.pro-mode .rl-av-cust {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

body.pro-mode .rl-av-cust > b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.pro-mode .rl-av-cust > svg { flex: none; width: 14px; height: 14px; color: #7d8984; }

/* Customer details window. */
body.pro-mode .rl-av-window {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border: 1px solid #e9edeb;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 16px 34px -26px rgba(15, 20, 18, 0.45);
}

body.pro-mode .rl-av-window > header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

body.pro-mode .rl-av-window > header > .rl-av-tabs { flex-basis: 100%; }

body.pro-mode .rl-av-window .rl-av-region {
  padding: 10px;
  border-color: #eef1ef;
  border-radius: 13px;
  background: #fafbfa;
}

body.pro-mode .rl-av-window .rl-av-region-head > b { font-size: 12px; }

body.pro-mode .rl-av-field {
  display: grid;
  gap: 3px;
}

body.pro-mode .rl-av-field > small { color: #7d8984; font-size: 10px; }

body.pro-mode .rl-av-field > span {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 9px;
  border-radius: 8px;
  color: #17201c;
  font-size: 11.5px;
}

body.pro-mode .rl-av-field > span.is-input { border: 1px solid #dfe5e2; background: #fff; }
body.pro-mode .rl-av-field > span.is-read { background: #eef1ef; color: #4d5955; }
body.pro-mode .rl-av-field svg { width: 12px; height: 12px; color: #7d8984; }

body.pro-mode .rl-av-field .rl-av-lock:not(#rl) {
  position: static;
  margin-left: auto;
  width: 16px;
  height: 16px;
  border: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

body.pro-mode .rl-av-note {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid #eef1ef;
  border-radius: 10px;
  background: #fff;
}

body.pro-mode .rl-av-note > svg { flex: none; width: 13px; height: 13px; color: #7d8984; }

body.pro-mode .rl-av-dots {
  margin-left: auto;
  color: #7d8984;
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 1px;
}

/* Messages. */
body.pro-mode .rl-av-chat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 8px;
  min-height: 176px;
}

body.pro-mode .rl-av-threads { display: flex; flex-direction: column; gap: 2px; }

body.pro-mode .rl-av-thread > .rl-av-cell-v {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 7px 6px;
  border-radius: 10px;
}

body.pro-mode .rl-av-thread > .rl-av-cell-v > small { color: #a0aaa6; font-size: 9.5px; }
body.pro-mode .rl-av-thread.is-on > .rl-av-cell-v { background: #eef7f2; }

body.pro-mode .rl-av-convo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 9px;
  border-radius: 13px;
  background: #f4f6f5;
}

body.pro-mode .rl-av-bubble {
  max-width: 88%;
  padding: 6px 10px;
  border-radius: 13px;
  font-size: 11px;
  line-height: 1.35;
}

body.pro-mode .rl-av-bubble.is-in { align-self: flex-start; background: #fff; color: #17201c; border-bottom-left-radius: 4px; }
body.pro-mode .rl-av-bubble.is-out { align-self: flex-end; background: #1f7a5c; color: #fff; border-bottom-right-radius: 4px; }

body.pro-mode .rl-av-composer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  height: 30px;
  margin-top: auto;
  padding: 0 6px 0 11px;
  border: 1px solid #dfe5e2;
  border-radius: 999px;
  background: #fff;
  color: #7d8984;
  font-size: 10.5px;
}

body.pro-mode .rl-av-composer > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

body.pro-mode .rl-av-composer > svg {
  flex: none;
  width: 20px;
  height: 20px;
  padding: 4px;
  border-radius: 50%;
  background: #1f7a5c;
  color: #fff;
}

body.pro-mode .rl-av-composer.is-locked { border-color: transparent; background: #eef1ef; color: #a0aaa6; }
body.pro-mode .rl-av-composer.is-locked > svg { background: transparent; color: #a0aaa6; }

/* Reviews. */
body.pro-mode .rl-av-score {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

body.pro-mode .rl-av-score > b { color: #17201c; font-size: 18px; font-weight: 800; }
body.pro-mode .rl-av-score > small { color: #7d8984; font-size: 10.5px; }
body.pro-mode .rl-av-stars { color: #f2a91e; font-size: 11px; letter-spacing: 1px; }

body.pro-mode .rl-av-reviews {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

body.pro-mode .rl-av-review > .rl-av-cell-v {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 10px;
  border: 1px solid #eef1ef;
  border-radius: 12px;
  background: #fafbfa;
}

body.pro-mode .rl-av-review p { margin: 0; color: #17201c; font-size: 11px; font-weight: 600; line-height: 1.35; }
body.pro-mode .rl-av-review small { color: #7d8984; font-size: 10px; }

/* Team. */
body.pro-mode .rl-av-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid #eef1ef;
  border-radius: 14px;
  background: #fafbfa;
}

body.pro-mode .rl-av-tile.is-mine { border-color: #cfe6da; background: #f3faf6; }
body.pro-mode .rl-av-tile .rl-av-two { flex: 1; }
body.pro-mode .rl-av-tile .rl-av-two > b { font-size: 13px; }
body.pro-mode .rl-av-meta { color: #7d8984; font-size: 10px; }

body.pro-mode .rl-av-bar {
  position: relative;
  height: 4px;
  margin-top: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: #e6eae8;
}

body.pro-mode .rl-av-bar::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--fill);
  border-radius: inherit;
  background: #2c9d72;
}

body.pro-mode .rl-av-tilecell > .rl-av-cell-v { position: relative; }
body.pro-mode .rl-av-tilecell .rl-av-dots { position: absolute; top: 8px; right: 10px; }

body.pro-mode .rl-av-photos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

body.pro-mode .rl-av-photos > i {
  aspect-ratio: 4 / 5;
  border-radius: 8px;
  background: linear-gradient(160deg, #e9d3bf, #a97b5c 70%, #6f4e3b);
}

body.pro-mode .rl-av-photos > i:nth-child(2) { background: linear-gradient(160deg, #d9c7e6, #8f74b3 70%, #5a4479); }
body.pro-mode .rl-av-photos > i:nth-child(3) { background: linear-gradient(160deg, #cfe0e3, #6f97a3 70%, #3f5f69); }
body.pro-mode .rl-av-photos > i:nth-child(4) { background: linear-gradient(160deg, #f0dccb, #c79a76 70%, #8a6247); }

body.pro-mode .rl-av-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

body.pro-mode .rl-av-menu > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f1f4f2;
  color: #3e4945;
  font-size: 11px;
  font-weight: 650;
}

body.pro-mode .rl-av-menu svg { width: 12px; height: 12px; }
body.pro-mode .rl-av-menu > span.is-locked { color: #a0aaa6; }

/* Services, inventory, salon page, analytics. */
body.pro-mode .rl-av-cat {
  margin-top: 2px;
  color: #8a9692;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

body.pro-mode .rl-av-svc > .rl-av-cell-v {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 6px 2px;
  border-top: 1px solid #f2f4f3;
  color: #17201c;
  font-size: 11.5px;
}

body.pro-mode .rl-av-svc small { color: #7d8984; font-size: 10px; }
body.pro-mode .rl-av-svc b { font-size: 11.5px; }
body.pro-mode .rl-av-svc b.is-field { padding: 2px 8px; border: 1px solid #dfe5e2; border-radius: 7px; }
body.pro-mode .rl-av-svc .rl-av-lock { right: 52px; }

body.pro-mode .rl-av-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

body.pro-mode .rl-av-kpis > span {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 7px 9px;
  border: 1px solid #eef1ef;
  border-radius: 10px;
  background: #fafbfa;
}

body.pro-mode .rl-av-kpis small { color: #7d8984; font-size: 9.5px; }
body.pro-mode .rl-av-kpis b { color: #17201c; font-size: 14px; font-weight: 800; }

body.pro-mode .rl-av-bars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 62px;
  padding: 0 2px;
}

body.pro-mode .rl-av-bars > i {
  flex: 1;
  height: var(--h);
  border-radius: 5px 5px 2px 2px;
  background: linear-gradient(180deg, #6cc9a2, #2c9d72);
}

@media (max-width: 1180px) {
  body.pro-mode .dashboard-shell .dashboard-content .rl-access-section:not(#rl) {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  body.pro-mode .rl-av-body { grid-template-columns: minmax(0, 1fr); }
  body.pro-mode .rl-av-rail { display: none; }
  body.pro-mode .rl-av-page,
  body.pro-mode .rl-av-page.is-team { grid-template-columns: minmax(0, 1fr); }
  body.pro-mode .rl-av-reviews,
  body.pro-mode .rl-av-chat { grid-template-columns: minmax(0, 1fr); }
  body.pro-mode .rl-access-tip { right: auto; left: -260px; width: min(320px, calc(100vw - 48px)); }
}

/* Faces and photos in the picture are pictures. */
body.pro-mode .rl-av-avatar.has-photo {
  overflow: hidden;
  background: #e8ecea;
  box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(15, 20, 18, 0.18);
}

body.pro-mode .rl-av-avatar.has-photo > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.pro-mode .rl-av-avatar.is-anon {
  background: #d3dad7;
  color: #fff;
}

body.pro-mode .rl-av-avatar.is-anon > svg {
  width: 62%;
  height: 62%;
}

body.pro-mode .rl-av-photos.is-real > i {
  overflow: hidden;
}

body.pro-mode .rl-av-photos.is-real > i > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Own profile: their booking rules and published work, as on their page. */
body.pro-mode .rl-av-sub {
  display: grid;
  gap: 6px;
  padding: 10px 11px;
  border: 1px solid #eef1ef;
  border-radius: 13px;
  background: #fafbfa;
}

body.pro-mode .rl-av-sub > b {
  color: #17201c;
  font-size: 11.5px;
  font-weight: 750;
}

body.pro-mode .rl-av-rule {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 6px;
  border-top: 1px solid #eef1ef;
}

body.pro-mode .rl-av-rule .rl-av-switch {
  flex: none;
}

/* The salon page as customers see it. */
body.pro-mode .rl-av-store {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  padding-bottom: 10px;
  border: 1px solid #eef1ef;
  border-radius: 14px;
  background: #fff;
}

body.pro-mode .rl-av-store-cover {
  position: relative;
  height: 112px;
  overflow: hidden;
  background: #e8ecea;
}

body.pro-mode .rl-av-store-cover > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.pro-mode .rl-av-store-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(10, 14, 12, 0.62), transparent 65%);
}

body.pro-mode .rl-av-store-id {
  position: absolute;
  right: 92px;
  bottom: 10px;
  left: 12px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  color: #fff;
}

body.pro-mode .rl-av-store-id > b {
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.pro-mode .rl-av-store-id > small {
  font-size: 10px;
  opacity: 0.88;
}

body.pro-mode .rl-av-store-cover > .rl-av-btn {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 1;
  height: 25px;
}

body.pro-mode .rl-av-store-sec {
  display: grid;
  gap: 5px;
  padding: 0 11px;
}

body.pro-mode .rl-av-store-sec > small {
  color: #8a9692;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

body.pro-mode .rl-av-store-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #17201c;
  font-size: 11.5px;
}

body.pro-mode .rl-av-store-row > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.pro-mode .rl-av-store-team {
  display: flex;
  gap: 12px;
}

body.pro-mode .rl-av-store-team > span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: #3e4945;
  font-size: 10px;
}

body.pro-mode .rl-av-store > .rl-av-photos {
  padding: 0 11px;
}

body.pro-mode .rl-av-col > header > .rl-av-avatar {
  width: 30px;
  height: 30px;
}

/* ==== Inside Customer list (11-02): phone and email, notes and appointment
   history sit under it, indented and joined to it by a line. ==== */
body.pro-mode .dashboard-shell .dashboard-content .rl-access-children:not(#rl) {
  --rl-access-thread: color-mix(in srgb, var(--role-color) 26%, #e3e8e6);
  display: grid;
  gap: 6px;
  padding: 0 12px 12px 44px;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-access-children.is-off:not(#rl) {
  --rl-access-thread: #e3e8e6;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-access-row.is-child:not(#rl) {
  position: relative;
  gap: 8px;
  padding: 10px 12px 11px;
  border: 1px solid #edf1ef;
  border-radius: 14px;
  background: #fbfcfc;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-access-row.is-child:not(#rl):hover {
  background: #f7f9f8;
}

/* The thread: down from Customer list, a turn into each row. */
body.pro-mode .dashboard-shell .dashboard-content .rl-access-row.is-child:not(#rl)::before {
  content: "";
  position: absolute;
  top: -8px;
  bottom: -8px;
  left: -17px;
  width: 2px;
  background: var(--rl-access-thread);
}

body.pro-mode .dashboard-shell .dashboard-content .rl-access-row.is-child:not(#rl):last-child::before {
  bottom: auto;
  height: 31px;
  border-radius: 0 0 0 2px;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-access-row.is-child:not(#rl)::after {
  content: "";
  position: absolute;
  top: 21px;
  left: -17px;
  width: 15px;
  height: 2px;
  border-radius: 0 2px 2px 0;
  background: var(--rl-access-thread);
}

body.pro-mode .dashboard-shell .dashboard-content .rl-access-row.is-child .rl-access-row-head .rl-access-row-icon:not(#rl) {
  width: 26px;
  height: 26px;
  border-radius: 8px;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-access-row.is-child .rl-access-row-icon .icon:not(#rl) {
  width: 15px;
  height: 15px;
}

body.pro-mode .dashboard-shell .dashboard-content .rl-access-row.is-child .rl-access-row-head > strong:not(#rl) {
  font-size: 0.88rem;
  font-weight: 620;
}