:root {
  color-scheme: light;
  --ink: #20201d;
  --muted: #75736b;
  --line: #ddd8cf;
  --soft: #f7f4ee;
  --panel: #fffdf9;
  --field: #ffffff;
  --sage: #74846b;
  --sage-dark: #4d5e46;
  --rose: #b87972;
  --blue: #566f8f;
  --gold: #b48a47;
  --shadow: 0 18px 45px rgba(45, 38, 28, 0.08);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(180deg, #fbfaf7 0%, #f2eee6 100%);
  color: var(--ink);
  touch-action: manipulation;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
  overscroll-behavior-y: none;
  overscroll-behavior-x: none;
}

button,
input,
select,
textarea {
  font: inherit;
  touch-action: manipulation;
}

a,
[role="button"],
[data-action] {
  touch-action: manipulation;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  font-size: 16px !important;
}

button {
  cursor: pointer;
}

.app-shell {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 26px 0 44px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 0 24px;
}

.eyebrow {
  margin: 0 0 3px;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: clamp(32px, 7vw, 64px);
  line-height: 0.96;
  font-weight: 650;
  letter-spacing: 0;
}

h2 {
  margin-bottom: 12px;
  font-size: 26px;
  line-height: 1.08;
  font-weight: 620;
  letter-spacing: 0;
}

h3 {
  margin-bottom: 10px;
  font-size: 17px;
  line-height: 1.2;
  font-weight: 620;
  letter-spacing: 0;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.account-chip {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
  padding: 0 13px;
  font-size: 14px;
}

.route-links,
.segmented {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
}

.route-link,
.segment-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  padding: 0 15px;
  font-size: 14px;
  text-decoration: none;
}

.route-link.active,
.segment-button.active {
  background: var(--ink);
  color: white;
}

.workspace {
  display: grid;
  gap: 18px;
}

.view-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.82fr);
  gap: 18px;
  align-items: start;
}

.view-grid.owner {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
}

.customer-layout {
  display: grid;
  gap: 18px;
}

.customer-shell-active {
  width: min(430px, 100%);
  max-width: 100%;
  padding: 0 0 24px;
}

.customer-book-active,
.customer-pilates-active,
.customer-credits-active,
.app-shell.customer-book-shell-active,
.app-shell.customer-pilates-shell-active,
.app-shell.customer-credits-shell-active {
  padding-bottom: 0;
}

body.customer-book-active,
body.customer-pilates-active,
body.customer-credits-active {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  height: 100svh;
  overflow: hidden;
  background: #fff;
}

.app-shell.customer-book-shell-active,
.app-shell.customer-pilates-shell-active,
.app-shell.customer-credits-shell-active {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.owner-scroll-active,
body.trainer-scroll-active {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  height: 100svh;
  overflow: hidden;
  background: #fff;
}

.app-shell.owner-scroll-shell-active,
.app-shell.trainer-scroll-shell-active {
  width: 100% !important;
  max-width: 100% !important;
  height: 100vh;
  height: 100dvh;
  height: 100svh;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
}

.owner-scroll-shell-active .workspace,
.trainer-scroll-shell-active .workspace {
  width: 100%;
  max-width: 100%;
  height: 100vh;
  height: 100dvh;
  height: 100svh;
  overflow: hidden;
}

.customer-book-shell-active .workspace,
.customer-book-shell-active .customer-tab-page,
.customer-book-shell-active .customer-portal.customer-tab-book,
.customer-book-shell-active .customer-book-wizard {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.customer-book-shell-active .customer-tab-page,
.customer-book-shell-active .customer-book-wizard {
  height: 100vh;
  height: 100dvh;
  height: 100svh;
}

.customer-book-shell-active .workspace,
.customer-book-shell-active .customer-portal.customer-tab-book {
  height: 100vh;
  height: 100dvh;
  height: 100svh;
  overscroll-behavior: none;
  touch-action: none;
}

.customer-credits-shell-active .workspace,
.customer-credits-shell-active .customer-tab-page,
.customer-pilates-shell-active .workspace {
  width: 100%;
  max-width: 100%;
  height: 100vh;
  height: 100dvh;
  height: 100svh;
  overflow: hidden;
}

.customer-pilates-shell-active .customer-tab-page {
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 0;
  overflow: visible;
}

.customer-credits-shell-active .customer-portal.customer-tab-credits,
.customer-pilates-shell-active .customer-portal.customer-tab-pilates {
  width: 100%;
  max-width: 100%;
  height: 100vh;
  height: 100dvh;
  height: 100svh;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding-right: 12px;
  padding-left: 12px;
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
  scroll-padding-bottom: calc(96px + env(safe-area-inset-bottom));
  -webkit-overflow-scrolling: touch;
}

.customer-credits-shell-active .customer-portal.customer-tab-credits {
  padding-top: 0;
  padding-right: 0;
  padding-left: 0;
  padding-bottom: 0;
}

.customer-credits-shell-active .customer-credits-page {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: 100%;
  max-width: 100%;
  height: 100vh;
  height: 100dvh;
  height: 100svh;
  overflow: hidden;
}

.customer-credits-shell-active .customer-credits-body {
  height: auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding-top: 10px;
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
  scroll-padding-bottom: calc(96px + env(safe-area-inset-bottom));
  -webkit-overflow-scrolling: touch;
}

.customer-credits-shell-active .customer-activity-timeline,
.customer-credits-shell-active .settings-section-card,
.customer-credits-shell-active .customer-credit-grid,
.customer-credits-shell-active .customer-credit-actions {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
}

.customer-pilates-shell-active .customer-agenda,
.customer-pilates-shell-active .customer-calendar-page,
.customer-pilates-shell-active .customer-calendar-section,
.customer-pilates-shell-active .customer-agenda-day,
.customer-pilates-shell-active .owner-booking-list {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
}

.customer-pilates-shell-active .customer-agenda::after {
  content: "";
  display: block;
  height: calc(78px + env(safe-area-inset-bottom));
}

.customer-book-shell-active .customer-book-step,
.customer-book-shell-active .customer-book-card-list,
.customer-book-shell-active .customer-trainer-list,
.customer-book-shell-active .week-picker,
.customer-book-shell-active .customer-date-strip,
.customer-book-shell-active .customer-timeslot-grid,
.customer-book-shell-active .customer-book-review-card,
.customer-book-shell-active .customer-review-field-list,
.customer-credits-shell-active .customer-credits-body,
.customer-credits-shell-active .customer-credits-page {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
}

.customer-book-shell-active .customer-book-step {
  height: calc(100svh - 174px - env(safe-area-inset-bottom));
  max-height: calc(100svh - 174px - env(safe-area-inset-bottom));
  overflow: clip;
  overscroll-behavior: none;
  touch-action: manipulation;
}

.customer-book-shell-active .customer-date-strip,
.customer-book-shell-active .customer-timeslot-grid,
.customer-book-shell-active .customer-book-card-list,
.customer-book-shell-active .customer-trainer-list {
  overscroll-behavior: contain;
  touch-action: manipulation;
}

.customer-book-shell-active .customer-book-review-card {
  max-height: 100%;
  overflow-x: clip;
  overflow-y: visible;
  overscroll-behavior: none;
  padding: 12px 14px;
}

.customer-credits-shell-active .customer-credits-body {
  touch-action: pan-y;
}

.customer-shell-active .topbar {
  display: none;
}

.customer-shell-active .workspace {
  gap: 0;
}

.customer-portal {
  min-height: 100dvh;
  background: #fff;
  color: #121212;
  padding: 72px 12px 92px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  overscroll-behavior-y: none;
}

.customer-portal.customer-tab-pilates {
  padding-top: 116px;
}

.customer-portal.customer-tab-book,
.customer-portal.customer-tab-credits {
  background: #fff;
  padding-top: 0;
  padding-bottom: calc(62px + env(safe-area-inset-bottom));
}

.customer-portal.customer-tab-book {
  min-height: auto;
  padding-bottom: 0;
}

.customer-portal-header {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 60;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  width: min(430px, 100%);
  box-sizing: border-box;
  background: #fff;
  padding: calc(6px + env(safe-area-inset-top)) 12px 7px;
  box-shadow: 0 4px 14px rgba(32, 32, 29, 0.04);
  transform: translateX(-50%);
}

.customer-portal-header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 12px;
  width: 54%;
  height: 1px;
  background: rgba(221, 216, 207, 0.74);
}

.customer-greeting-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.customer-portal-header h1 {
  margin: 1px 0 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.08;
}

.customer-profile-bubble {
  display: inline-grid;
  place-items: center;
  max-width: 82px;
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  padding: 0 10px;
  overflow: hidden;
  font-size: 11px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-tab-page {
  display: grid;
  gap: 8px;
  animation: customer-page-in 180ms ease both;
}

@keyframes customer-page-in {
  from {
    opacity: 0.72;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.customer-month-toolbar {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin: 2px 0 0;
  background: #fff;
  padding: 0;
}

.customer-month-toolbar h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 650;
}

.customer-month-button {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 5px;
  min-height: 30px;
  border: 0;
  background: transparent;
  color: var(--ink);
  padding: 0;
  text-align: right;
}

.customer-month-button span {
  font-size: 18px;
  font-weight: 620;
  line-height: 1;
}

.customer-month-button i {
  color: #65717a;
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
}

.customer-month-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 80;
  display: grid;
  gap: 3px;
  min-width: 150px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 14px 32px rgba(32, 32, 29, 0.14);
  padding: 6px;
}

.customer-month-dropdown button {
  min-height: 30px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font-size: 12px;
  font-weight: 560;
  padding: 0 8px;
  text-align: left;
}

.customer-month-dropdown button.active {
  background: var(--ink);
  color: #fff;
}

.customer-agenda,
.customer-credits-page {
  display: grid;
  gap: 8px;
}

.customer-calendar-section {
  display: grid;
  gap: 6px;
}

.customer-section-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 24px;
}

.customer-section-header h3 {
  margin: 0;
  color: #111;
  font-size: 12px;
  font-weight: 650;
}

.customer-book-now-mini {
  min-height: 26px;
  border: 0;
  border-radius: 999px;
  background: var(--sage);
  color: #fff;
  padding: 0 13px;
  font-size: 11px;
  font-weight: 650;
  box-shadow: 0 7px 14px rgba(83, 106, 76, 0.14);
}

.customer-agenda-day h4 {
  margin: 0 0 5px;
  color: #65717a;
  font-size: 12px;
  font-weight: 650;
}

.customer-empty-line {
  color: #74706a;
  font-size: 12px;
  font-weight: 520;
  padding: 0 0 4px;
}

.customer-calendar-card {
  grid-template-columns: 4px minmax(0, 1fr);
  min-height: 38px;
  border-radius: 8px;
  padding: 6px 8px 7px;
}

.customer-calendar-card .owner-card-main {
  gap: 0;
}

.customer-calendar-card .owner-card-row {
  display: grid;
  grid-template-columns: auto minmax(0, 0.8fr) minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 7px;
}

.customer-calendar-card strong,
.customer-calendar-card span,
.customer-calendar-card time,
.customer-calendar-card em {
  overflow: hidden;
  font-size: 12px;
  line-height: 1.18;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.customer-calendar-card strong {
  color: #5f5a50;
  font-weight: 560;
}

.customer-calendar-card span {
  color: #111;
  font-weight: 600;
}

.customer-calendar-card em {
  color: #5f5a50;
  font-style: normal;
  text-align: right;
}

.customer-card-status {
  display: none;
}

.customer-upcoming {
  background: #fff2bf !important;
}

.customer-booking-flash {
  animation: customerBookingFlash 2.5s ease-out both;
}

@keyframes customerBookingFlash {
  0%,
  18%,
  36%,
  54% {
    border-color: rgba(25, 25, 23, 0.95);
    background: #1d1d1a !important;
    box-shadow: 0 0 0 3px rgba(29, 29, 26, 0.12), 0 10px 24px rgba(29, 29, 26, 0.18);
    transform: scale(1.012);
  }

  9%,
  27%,
  45% {
    background: #fffdf9 !important;
    box-shadow: 0 0 0 3px rgba(212, 186, 104, 0.18);
    transform: scale(1);
  }

  100% {
    box-shadow: none;
    transform: scale(1);
  }
}

.customer-booking-flash strong,
.customer-booking-flash span,
.customer-booking-flash time,
.customer-booking-flash em {
  animation: customerBookingFlashText 2.5s ease-out both;
}

@keyframes customerBookingFlashText {
  0%,
  18%,
  36%,
  54% {
    color: #fff;
  }

  9%,
  27%,
  45%,
  100% {
    color: inherit;
  }
}

.customer-upcoming .owner-card-rail {
  background: #ffc400 !important;
}

.customer-trial {
  background: #ddf2eb !important;
}

.customer-trial .owner-card-rail {
  background: #28a66a !important;
}

.customer-completed {
  background: #eaf4ff !important;
}

.customer-completed .owner-card-rail {
  background: #6aa7d8 !important;
}

.customer-cancelled {
  background: #f0f1f2 !important;
}

.customer-cancelled .owner-card-rail {
  background: #b8b9b5 !important;
}

.customer-cancel-flyer {
  position: fixed !important;
  z-index: 1200;
  pointer-events: none;
  background: #fff2bf;
  will-change: transform, background-color, box-shadow;
}

.customer-reschedule-flyer {
  position: fixed !important;
  z-index: 1200;
  pointer-events: none;
  will-change: transform, box-shadow;
}

.customer-cancel-flyer .owner-card-rail {
  animation: customerCancelRailTravel 2.2s ease forwards;
}

.customer-cancel-drop-target {
  opacity: 0;
  transform: translateY(-10px);
}

.customer-cancel-landed {
  animation: customerCancelLanded 780ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

.customer-reschedule-landed {
  animation: customerCancelLanded 780ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

@keyframes customerCancelRailTravel {
  0%,
  18% {
    background: #ffc400;
  }

  100% {
    background: #b8b9b5;
  }
}

@keyframes customerCancelLanded {
  0% {
    opacity: 0;
    transform: translateY(-18px) scale(1.01);
  }

  68% {
    opacity: 1;
    transform: translateY(4px) scale(1);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.customer-noshow {
  background: #f8e7e3 !important;
}

.customer-noshow .owner-card-rail {
  background: #c94c45 !important;
}

.request-dot {
  display: inline-grid;
  place-items: center;
  width: 13px;
  height: 13px;
  border-radius: 999px;
  background: #c94c45;
  color: #fff;
  font-size: 9px;
  font-style: normal;
}

.customer-wallet-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.wallet-card {
  display: grid;
  gap: 6px;
  min-height: 72px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdfa;
  padding: 10px;
}

.wallet-card strong {
  font-size: 20px;
  font-weight: 620;
}

.customer-bottom-nav {
  overflow: hidden;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  place-items: stretch;
}

.customer-bottom-nav::before {
  content: "";
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  z-index: 0;
  width: calc((100% - 6px) / 3);
  border-radius: 13px;
  background: var(--ink);
  transform: translateX(calc(var(--customer-tab-index, 0) * 100%));
}

.customer-bottom-nav.customer-nav-moving::before {
  animation: customer-tab-slide 240ms ease both;
}

@keyframes customer-tab-slide {
  from {
    transform: translateX(calc(var(--customer-prev-index, var(--customer-tab-index, 0)) * 100%));
  }
  to {
    transform: translateX(calc(var(--customer-tab-index, 0) * 100%));
  }
}

.customer-bottom-nav button {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  justify-items: center;
  align-items: center;
  min-width: 0;
  padding: 0;
  text-align: center;
  transition: color 180ms ease;
}

.owner-shell-active .customer-bottom-nav button.active,
.customer-bottom-nav button.active {
  background: transparent !important;
  color: #fff !important;
}

.customer-profile-sheet,
.customer-detail-sheet {
  width: min(430px, 100%);
}

.customer-profile-form {
  display: grid;
  gap: 10px;
  overflow: auto;
  padding: 0 14px 14px;
}

.customer-profile-error {
  color: #b94b42;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.2;
}

.customer-phone-confirm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  background: rgba(35, 31, 27, 0.24);
  padding: 20px;
  animation: customerPhoneConfirmBackdropIn 1s ease forwards;
}

.customer-phone-confirm {
  width: min(320px, 100%);
  border: 1px solid rgba(221, 216, 207, 0.9);
  border-radius: 18px;
  background: #fffdf9;
  padding: 18px;
  box-shadow: 0 22px 55px rgba(32, 32, 29, 0.2);
  text-align: center;
  animation: customerPhoneConfirmIn 1s ease forwards;
}

.customer-phone-confirm h2 {
  margin: 0 0 8px;
  font-size: 20px;
  line-height: 1.1;
}

.customer-phone-confirm p {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.customer-phone-confirm .actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

@keyframes customerPhoneConfirmBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes customerPhoneConfirmIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.customer-profile-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.customer-profile-actions .rose {
  grid-column: 1 / -1;
}

.profile-section {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(221, 216, 207, 0.8);
  border-radius: 10px;
  background: #fffdfa;
  padding: 10px;
}

.profile-section h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 650;
}

.customer-detail-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  padding: 0 12px 12px;
}

.customer-detail-actions .button {
  min-width: 0;
  min-height: 34px;
  padding: 0 6px;
  overflow-wrap: anywhere;
  font-size: 11px;
  line-height: 1.1;
}

.customer-detail-sheet .modal-body {
  padding-top: 8px;
}

.customer-detail-sheet .owner-overview-list.compact-overview strong {
  overflow-wrap: anywhere;
}

.trainer-line-button {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  padding: 0;
}

.trainer-line-button img {
  display: block;
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.customer-rule-note {
  box-shadow: none;
}

.customer-cancel-sheet .modal-body {
  gap: 10px;
}

.customer-cancel-overview {
  gap: 6px;
}

.owner-overview-list.compact-overview.customer-cancel-overview > div {
  border-bottom: 0;
  padding-bottom: 0;
}

.customer-cancel-sheet .customer-rule-note {
  padding: 9px 10px;
}

.customer-reschedule-sheet .modal-body {
  gap: 9px;
}

.customer-reschedule-trainers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.customer-reschedule-trainers button {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 0 7px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 560;
}

.customer-reschedule-trainers button.active {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

.customer-reschedule-sheet .week-picker {
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  gap: 5px;
}

.customer-reschedule-sheet .week-picker strong {
  font-size: 13px;
  font-weight: 600;
}

.customer-reschedule-sheet .week-picker .button {
  min-height: 32px;
  padding: 0;
}

.customer-reschedule-sheet .compact-edit-dates {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.customer-reschedule-sheet .date-button {
  min-height: 46px;
  padding: 5px 2px;
}

.customer-reschedule-sheet .date-button span {
  font-size: 10px;
}

.customer-reschedule-sheet .date-button strong {
  margin-top: 1px;
  font-size: 15px;
}

.customer-reschedule-sheet .owner-edit-slots.slot-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
}

.customer-reschedule-sheet .slot-button {
  min-height: 36px;
  padding: 4px 2px;
}

.customer-reschedule-sheet .slot-button strong {
  font-size: 12px;
}

.auto-save-note {
  padding: 0 2px 10px;
}

.mobile-section-tabs {
  display: none;
}

.account-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(320px, 1.15fr);
  gap: 18px;
  align-items: start;
}

.auth-wrap {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(340px, 0.72fr);
  gap: 18px;
  align-items: stretch;
}

.auth-copy {
  min-height: 520px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 26px;
}

.auth-copy h2 {
  max-width: 560px;
  font-size: clamp(34px, 6vw, 58px);
  line-height: 0.98;
}

.auth-copy p {
  max-width: 520px;
}

.auth-card {
  align-self: start;
}

.auth-form {
  display: grid;
  gap: 14px;
}

.trial-layout {
  display: grid;
  gap: 18px;
}

.trial-form,
.trial-link-form {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.trial-card {
  overflow: hidden;
}

body.trial-active {
  height: 100vh;
  height: 100dvh;
  height: 100svh;
  overflow: hidden;
}

.app-shell.trial-shell-active {
  width: min(430px, 100%);
  max-width: 100%;
  height: 100vh;
  height: 100dvh;
  height: 100svh;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
}

.trial-shell-active .topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #fbfaf7;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
}

.trial-shell-active .workspace {
  height: calc(100svh - 88px);
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding: 12px 14px calc(34px + env(safe-area-inset-bottom));
  -webkit-overflow-scrolling: touch;
}

.trial-shell-active .trial-layout,
.trial-shell-active .trial-card {
  min-height: 0;
  max-width: 100%;
  overflow: visible;
}

.trial-panel-header {
  align-items: center;
}

.trial-form h3 {
  margin: 0;
  font-size: 15px;
  line-height: 1.2;
}

.trial-form-section {
  display: grid;
  gap: 12px;
}

.trial-account-form {
  gap: 13px;
}

.trial-details-form {
  gap: 18px;
}

.trial-equal-fields {
  align-items: start;
}

.trial-choice-field {
  gap: 8px;
}

.trial-choice-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  width: 100%;
}

.trial-choice {
  position: relative;
  display: inline-flex;
  min-width: 0;
}

.trial-choice input {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.trial-choice span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  padding: 0 12px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.trial-choice input:checked + span {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

.nested-panel {
  box-shadow: none;
  background: rgba(255, 255, 255, 0.56);
}

.profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.profile-grid > div {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  padding: 10px;
}

.profile-grid strong {
  font-size: 14px;
  line-height: 1.32;
}

.trial-otp .field-row {
  align-items: end;
}

.trial-status p {
  margin-bottom: 5px;
}

.auth-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.auth-tab {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
}

.auth-tab.active {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

.social-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.check-row {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-size: 14px;
}

.check-row input {
  width: 16px;
  height: 16px;
}

.panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 253, 249, 0.9);
  box-shadow: var(--shadow);
}

.panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 18px 0;
}

.panel-body {
  padding: 18px;
}

.muted {
  color: var(--muted);
}

.fine {
  font-size: 13px;
  line-height: 1.42;
}

.stack {
  display: grid;
  gap: 14px;
}

.stack.tight {
  gap: 9px;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
  justify-content: space-between;
}

.field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.field {
  display: grid;
  gap: 6px;
}

.field label {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--field);
  color: var(--ink);
  padding: 9px 11px;
}

.field textarea {
  min-height: 84px;
  resize: vertical;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(172px, 1fr));
  gap: 10px;
}

.service-card,
.mini-card,
.list-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.service-card {
  position: relative;
  overflow: hidden;
  min-height: 132px;
  padding: 14px;
  text-align: left;
  transition: border-color 0.16s ease, transform 0.16s ease;
}

.service-card:hover {
  transform: translateY(-1px);
}

.service-card.active {
  border-color: var(--sage);
  box-shadow: inset 0 0 0 1px var(--sage);
}

.service-card.disabled {
  cursor: not-allowed;
  opacity: 0.72;
  padding-top: 42px;
}

.service-ratio {
  color: var(--muted);
  font-weight: 520;
}

.duo-ratio {
  display: block;
}

.coming-ribbon {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  background: var(--rose);
  color: #fff;
  padding: 6px 0;
  text-align: center;
  font-size: 11px;
}

.service-meta,
.row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
}

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 9px;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.pill.good {
  border-color: rgba(116, 132, 107, 0.4);
  color: var(--sage-dark);
  background: rgba(116, 132, 107, 0.1);
}

.pill.warn {
  border-color: rgba(180, 138, 71, 0.45);
  color: #8d652a;
  background: rgba(180, 138, 71, 0.12);
}

.pill.stop {
  border-color: rgba(184, 121, 114, 0.45);
  color: #9b514b;
  background: rgba(184, 121, 114, 0.12);
}

.token-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  padding: 0 10px 0 4px;
  font-size: 12px;
  white-space: nowrap;
}

.token-wallet {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
}

.token-badge span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
}

.booking-time-line {
  display: grid;
  gap: 2px;
}

.booking-time-line span {
  display: block;
}

.booking-time-line span:last-child {
  font-weight: 560;
}

.token-p span {
  background: #b68b2c;
}

.token-d span {
  background: #8e949c;
}

.token-g span {
  background: #a46f38;
}

.trainer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.trainer-card {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  min-height: 124px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 13px;
  text-align: left;
}

.trainer-card.active {
  border-color: var(--sage);
  box-shadow: inset 0 0 0 1px var(--sage);
}

.trainer-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-weight: 650;
}

.trainer-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.trainer-copy span,
.trainer-copy small {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.friend-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  border: 1px solid rgba(86, 111, 143, 0.24);
  border-radius: 8px;
  background: rgba(86, 111, 143, 0.06);
  padding: 13px;
}

.compact-field {
  margin: 0;
}

.promo-list {
  display: grid;
  gap: 9px;
}

.promo-card,
.checkin-box {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  padding: 13px;
}

.promo-card p,
.checkin-box p {
  margin-bottom: 0;
}

.checkin-meter {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.checkin-meter span {
  height: 8px;
  border-radius: 999px;
  background: #e2ddd4;
}

.checkin-meter span.active {
  background: var(--sage-dark);
}

.exchange-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.exchange-card {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  padding: 13px;
}

.exchange-card p {
  margin-bottom: 0;
}

.rewards-tab {
  display: grid;
  gap: 12px;
}

.week-picker {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  gap: 8px;
  align-items: center;
}

.week-picker strong {
  text-align: center;
  font-size: 17px;
}

.date-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(76px, 1fr));
  gap: 8px;
}

.date-button {
  min-height: 66px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  padding: 7px;
  text-align: center;
}

.date-button span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.date-button strong {
  display: block;
  margin-top: 3px;
  font-size: 20px;
  font-weight: 620;
}

.date-button.active {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

.date-button.active span {
  color: rgba(255, 255, 255, 0.72);
}

.slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
  gap: 9px;
}

.slot-button {
  min-height: 58px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 8px;
}

.slot-button strong {
  display: block;
  font-size: 16px;
  font-weight: 610;
}

.slot-button span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.slot-button:disabled {
  cursor: not-allowed;
  background: #f1eee8;
  color: #a8a197;
}

.slot-button.available:hover {
  border-color: var(--sage);
}

.slot-button.selected {
  border-color: var(--sage-dark);
  background: rgba(116, 132, 107, 0.12);
  box-shadow: inset 0 0 0 1px var(--sage-dark);
}

.slot-button.selected span {
  color: var(--sage-dark);
}

.slot-button.closed {
  border-style: dashed;
}

.booking-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.74);
  padding: 13px;
}

.booking-summary.active {
  border-color: rgba(116, 132, 107, 0.48);
  background: rgba(116, 132, 107, 0.08);
}

.booking-summary p {
  margin-bottom: 0;
}

.mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.mini-card {
  padding: 14px;
}

.metric {
  display: block;
  margin-top: 6px;
  font-size: 26px;
  font-weight: 650;
  line-height: 1;
}

.list {
  display: grid;
  gap: 9px;
}

.compact-list {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.past-list {
  display: grid;
  gap: 8px;
}

.section-footer {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}

.past-session {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 8px;
  align-items: center;
  min-height: 58px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 10px;
}

.past-session span:not(.token-badge, .token-badge span) {
  color: var(--muted);
  font-size: 12px;
}

.past-session .token-badge {
  grid-row: span 2;
}

.list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 70px;
  padding: 12px;
}

.list-item-main {
  min-width: 0;
}

.list-item-main strong {
  display: block;
  margin-bottom: 4px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 0 13px;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}

.button.secondary {
  border-color: var(--line);
  background: #fff;
  color: var(--ink);
}

.button.ghost {
  border-color: transparent;
  background: transparent;
  color: var(--muted);
}

.lean-button {
  min-height: 30px;
  padding: 0 8px;
  font-size: 12px;
}

.button.sage {
  background: var(--sage-dark);
}

.button.rose {
  background: var(--rose);
}

.button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.notice {
  border: 1px solid rgba(86, 111, 143, 0.28);
  border-radius: 8px;
  background: rgba(86, 111, 143, 0.08);
  padding: 12px;
}

.token-needed {
  width: 100%;
  padding: 9px 10px;
}

.calendar-list {
  display: grid;
  gap: 8px;
}

.calendar-row {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.calendar-row:last-child {
  border-bottom: 0;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(31, 29, 25, 0.36);
  overflow: hidden;
  overscroll-behavior: contain;
  touch-action: none;
}

.customer-credit-notice-backdrop {
  animation: customerCreditNoticeBackdropIn 1500ms ease-out both;
}

.customer-credit-notice-modal {
  animation: customerCreditNoticeModalIn 1500ms ease-out both;
}

.customer-credit-notice-backdrop.is-closing {
  animation: customerCreditNoticeBackdropOut 1000ms ease-in both;
}

.customer-credit-notice-backdrop.is-closing .customer-credit-notice-modal {
  animation: customerCreditNoticeModalOut 1000ms ease-in both;
}

@keyframes customerCreditNoticeBackdropIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes customerCreditNoticeModalIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes customerCreditNoticeBackdropOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes customerCreditNoticeModalOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(6px) scale(0.985);
  }
}

.modal {
  width: min(520px, 100%);
  max-height: calc(100dvh - 24px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 28px 80px rgba(31, 29, 25, 0.28);
  overscroll-behavior: contain;
  touch-action: pan-y;
}

.modal form {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.modal-body {
  padding: 18px;
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 0;
}

.confirm-detail {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  padding: 13px;
}

.confirm-detail p {
  margin-bottom: 0;
}

.empty-state {
  display: grid;
  place-items: center;
  min-height: 130px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  text-align: center;
  padding: 18px;
}

.toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 30;
  max-width: min(360px, calc(100% - 36px));
  border: 1px solid rgba(116, 132, 107, 0.35);
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
  padding: 12px 14px;
  box-shadow: var(--shadow);
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.notification-panel {
  margin-top: 18px;
}

.owner-app {
  position: relative;
  display: grid;
  gap: 14px;
  min-height: 70vh;
  padding-bottom: 86px;
}

.owner-app.has-income {
  padding-bottom: 132px;
}

.owner-page {
  display: grid;
  gap: 14px;
}

.owner-mobile-header {
  position: sticky;
  top: 0;
  z-index: 8;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  background: rgba(251, 250, 247, 0.96);
  padding: 8px 0 10px;
}

.icon-button,
.owner-filter-dot {
  display: inline-grid;
  place-items: center;
  min-width: 40px;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 11px;
}

.owner-title-button {
  display: grid;
  gap: 1px;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
}

.owner-title-button span {
  font-size: 28px;
  font-weight: 650;
  line-height: 1;
}

.owner-title-button small {
  color: var(--muted);
}

.owner-header-actions {
  display: flex;
  gap: 7px;
  align-items: center;
  min-width: 0;
}

.owner-calendar-filter-button {
  min-height: 32px;
  max-width: 148px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  padding: 0 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
}

.owner-full-toggle {
  max-width: 78px;
}

.owner-week-strip,
.owner-month-grid {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  padding: 8px;
}

.owner-week-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.owner-month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.owner-month-label {
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}

.owner-date-cell {
  display: grid;
  place-items: center;
  min-height: 48px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  padding: 4px;
}

.owner-date-cell span {
  color: var(--muted);
  font-size: 11px;
}

.owner-date-cell strong {
  font-size: 16px;
}

.owner-date-cell.today:not(.selected) {
  background: #eeeeeb;
}

.owner-date-cell.selected {
  background: var(--ink);
  color: #fff;
}

.owner-date-cell.selected span {
  color: rgba(255, 255, 255, 0.7);
}

.owner-date-cell.muted-date {
  opacity: 0.42;
}

.owner-agenda {
  display: grid;
  gap: 16px;
}

.owner-agenda-day h2 {
  margin: 0 0 8px;
  font-size: 19px;
}

.owner-booking-list {
  display: grid;
  gap: 9px;
}

.owner-booking-card {
  position: relative;
  display: grid;
  grid-template-columns: 5px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 96px;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  padding: 12px;
  text-align: left;
}

.owner-booking-card::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 5px;
  height: 15px;
  opacity: 0.23;
  background: repeating-linear-gradient(135deg, transparent 0 8px, rgba(0, 0, 0, 0.16) 8px 10px);
}

.owner-booking-card.paid {
  background: #fff8dc;
}

.owner-booking-card.private {
  background: #fff4c9;
}

.owner-booking-card.duo {
  background: #f3e8dc;
}

.owner-booking-card.group {
  background: #e8f2f7;
}

.owner-booking-card.trial {
  background: #ecf7ef;
}

.owner-booking-card.special {
  background: #edf5fb;
}

.owner-booking-card.blocked {
  background: #f0f0ee;
}

.owner-booking-card.shift-no-class {
  background: #f2f2ef;
}

.owner-booking-card.shift-break {
  background: #f7ead1;
}

.owner-booking-card.shift-leave {
  background: #f4dedb;
}

.owner-booking-card.shift-closed {
  background: #e8e8e5;
}

.owner-card-rail {
  align-self: stretch;
  border-radius: 999px;
  background: #d79b2c;
}

.owner-booking-card.trial .owner-card-rail {
  background: #5f9b72;
}

.owner-booking-card.private .owner-card-rail {
  background: #d79b2c;
}

.owner-booking-card.duo .owner-card-rail {
  background: #a8724f;
}

.owner-booking-card.group .owner-card-rail {
  background: #5b88ae;
}

.owner-booking-card.special .owner-card-rail {
  background: #5b88ae;
}

.owner-booking-card.blocked .owner-card-rail {
  background: #9b9b95;
}

.owner-booking-card.shift-no-class .owner-card-rail {
  background: #b8b8b1;
}

.owner-booking-card.shift-break .owner-card-rail {
  background: #c18a38;
}

.owner-booking-card.shift-leave .owner-card-rail {
  background: #b87972;
}

.owner-booking-card.shift-closed .owner-card-rail {
  background: #8b8b85;
}

.owner-card-main {
  display: grid;
  gap: 4px;
}

.owner-card-main strong {
  font-size: 17px;
}

.owner-card-main span,
.owner-card-main small {
  color: var(--muted);
  font-size: 13px;
}

.owner-empty-line {
  border: 1px dashed var(--line);
  border-radius: 14px;
  color: var(--muted);
  padding: 18px;
  text-align: center;
}

.owner-fab {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: calc(92px + env(safe-area-inset-bottom));
  z-index: 15;
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  aspect-ratio: 1 / 1;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
  padding: 0;
  box-shadow: 0 14px 30px rgba(32, 32, 29, 0.24);
}

.owner-income-strip {
  position: fixed;
  right: 10px;
  bottom: calc(70px + env(safe-area-inset-bottom));
  left: 10px;
  z-index: 14;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  padding: 10px 14px;
  box-shadow: var(--shadow);
}

.owner-bottom-nav {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 14;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 2px;
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.98);
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
}

.owner-bottom-nav button {
  display: grid;
  gap: 3px;
  place-items: center;
  min-height: 48px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
}

.owner-bottom-nav button span {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  min-height: 22px;
  border-radius: 999px;
  font-size: 10px;
}

.owner-bottom-nav button.active {
  color: var(--ink);
  font-weight: 650;
}

.owner-bottom-nav button.active span {
  background: var(--ink);
  color: #fff;
}

.owner-drawer-backdrop,
.owner-drawer-scrim,
.owner-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 22;
  background: rgba(31, 29, 25, 0.42);
}

.owner-drawer-scrim {
  z-index: 55;
}

.owner-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  width: min(50dvw, 220px);
  overflow: auto;
  background: #fff;
  padding: 14px;
  box-shadow: 22px 0 60px rgba(31, 29, 25, 0.24);
  animation: ownerDrawerSlide 260ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.owner-drawer-brand {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 22px;
}

.somi-mark {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #5a3c2d;
  color: #fff;
  font-weight: 700;
}

.owner-drawer h3 {
  margin: 20px 0 8px;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

.owner-drawer button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 38px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  padding: 0 9px;
  text-align: left;
  font-size: 13px;
  font-weight: 560;
}

.owner-drawer button.selected {
  background: #eeeeeb;
}

.owner-drawer-footer {
  display: grid;
  gap: 4px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.owner-drawer-footer .notification-settings-button {
  min-height: 30px;
  color: var(--muted);
  font-size: 11px;
}

.owner-drawer-logout {
  min-height: 28px !important;
  color: #b34b4b !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

.settings-notification-action {
  display: grid;
  margin-top: 16px;
}

.notification-settings-button {
  width: 100%;
}

.owner-drawer-title {
  margin: 0 0 12px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.2;
  font-weight: 650;
  text-transform: none;
}

.owner-drawer-group {
  display: grid;
  gap: 1px;
  margin-bottom: 10px;
}

.owner-drawer .owner-branch-row {
  font-weight: 720;
}

.owner-drawer .owner-trainer-row {
  padding-left: 22px;
  color: #4f5960;
  font-weight: 520;
}

.owner-activity-sheet {
  position: fixed;
  inset: 0;
  overflow: auto;
  background: #fff;
  padding: 12px;
}

.owner-activity-sheet header {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  text-align: center;
}

.owner-chip-row {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.owner-chip-row button {
  flex: 0 0 auto;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  padding: 0 12px;
}

.owner-chip-row button.active {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

.activity-list,
.owner-queue,
.owner-service-list,
.owner-customer-list {
  display: grid;
  gap: 10px;
}

.activity-group h3 {
  margin: 18px 0 10px;
  color: var(--muted);
  font-size: 13px;
}

.activity-item {
  display: grid;
  grid-template-columns: 54px 28px minmax(0, 1fr);
  gap: 9px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.activity-item time {
  color: var(--muted);
  font-size: 12px;
}

.activity-item p {
  margin-bottom: 0;
}

.service-toolbar {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 8px;
}

.service-toolbar input,
.owner-search {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 0 12px;
}

.owner-service-card,
.owner-customer-row {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  padding: 14px;
}

.owner-service-card.trial {
  background: #ecf7ef;
}

.owner-service-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.avatar-row {
  display: flex;
  align-items: center;
}

.avatar-row .trainer-avatar {
  margin-right: -6px;
  border: 2px solid #fff;
}

.trainer-avatar.tiny {
  width: 28px;
  height: 28px;
  font-size: 12px;
}

.owner-customer-row {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  text-align: left;
}

.owner-customer-row small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.owner-bottom-sheet {
  align-self: end;
  width: min(680px, 100%);
  max-height: 86vh;
  overflow: auto;
  border-radius: 18px 18px 0 0;
  overscroll-behavior: contain;
}

.owner-profile-sheet {
  width: min(760px, 100%);
  max-height: 90vh;
  overflow: auto;
}

.owner-customer-simple-sheet {
  width: min(430px, 100%);
  max-height: 82vh;
  border-radius: 18px 18px 0 0;
  background: #fff;
}

.owner-customer-simple-sheet .owner-sheet-topbar {
  border-bottom: 1px solid rgba(221, 216, 207, 0.72);
  background: #fff;
}

.owner-customer-simple-sheet .owner-sheet-topbar h2 {
  font-size: 16px;
}

.owner-customer-simple-body {
  display: grid;
  gap: 18px;
  padding: 14px 18px calc(24px + env(safe-area-inset-bottom));
}

.owner-customer-detail-section {
  display: grid;
  gap: 10px;
}

.owner-customer-detail-section h3 {
  margin: 0;
  font-size: 20px;
  line-height: 1.1;
}

.owner-customer-detail-list {
  display: grid;
  gap: 0;
}

.owner-customer-detail-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 36px;
  padding: 5px 0;
}

.owner-customer-detail-row span {
  color: var(--muted);
  font-size: 13px;
}

.owner-customer-detail-row strong {
  max-width: 210px;
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-customer-detail-row.credit-row strong {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.owner-customer-detail-row.credit-row span {
  color: var(--ink);
  font-size: 13.5px;
}

.app-shell.owner-shell-active {
  width: min(430px, 100%);
  padding: 0 0 24px;
}

.app-shell.trainer-shell-active {
  width: min(430px, 100%);
  max-width: 100%;
  padding: 0 0 24px;
}

.owner-shell-active .topbar {
  display: none;
}

.trainer-shell-active .topbar {
  display: none;
}

.owner-shell-active .workspace {
  gap: 0;
}

.trainer-shell-active .workspace {
  gap: 0;
  max-width: 100%;
}

.owner-shell-active .owner-app {
  min-height: 100vh;
  background: #fff;
  color: #121212;
  padding: 42px 18px 108px;
}

.owner-shell-active .owner-app.has-income {
  padding-bottom: 160px;
}

.owner-shell-active .owner-page {
  gap: 20px;
}

.owner-shell-active .owner-mobile-header {
  position: static;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  background: #fff;
  padding: 0 2px 8px;
}

.owner-shell-active .owner-title-button span {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: 28px;
}

.owner-shell-active .owner-title-button b {
  font-weight: 720;
}

.owner-shell-active .owner-title-button em {
  color: #9aa4ac;
  font-style: normal;
  font-weight: 520;
}

.owner-shell-active .owner-title-button i {
  color: #222;
  font-size: 18px;
  font-style: normal;
}

.owner-shell-active .icon-button,
.owner-shell-active .owner-filter-dot {
  min-width: 44px;
  min-height: 44px;
  border: 0;
  background: transparent;
  font-size: 14px;
}

.owner-shell-active .owner-calendar-filter-button {
  min-height: 28px;
  max-width: 124px;
  padding: 0 8px;
  font-size: 11px;
}

.owner-shell-active .owner-header-actions {
  gap: 5px;
}

.owner-shell-active .owner-full-toggle {
  max-width: 70px;
  padding: 0 7px;
}

.owner-menu-icon span,
.owner-bell-icon span {
  position: relative;
  display: block;
  width: 22px;
  height: 18px;
}

.owner-menu-icon span::before,
.owner-menu-icon span::after,
.owner-menu-icon span {
  border-top: 3px solid #151515;
  border-radius: 999px;
}

.owner-menu-icon span::before,
.owner-menu-icon span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
}

.owner-menu-icon span::before {
  top: 5px;
}

.owner-menu-icon span::after {
  top: 13px;
}

.owner-bell-icon span {
  width: 20px;
  height: 24px;
  border: 3px solid #151515;
  border-bottom: 0;
  border-radius: 12px 12px 8px 8px;
}

.owner-bell-icon span::after {
  content: "";
  position: absolute;
  right: 4px;
  bottom: -4px;
  left: 4px;
  border-top: 3px solid #151515;
  border-radius: 999px;
}

.owner-filter-dot {
  border-radius: 50%;
  background: #ededed;
  font-weight: 720;
}

.owner-filter-dot.logo-dot,
.somi-mini-logo,
.somi-drawer-logo,
.team-logo {
  color: #8a624c;
  font-weight: 800;
  font-family: Georgia, serif;
}

.owner-week-strip {
  border: 0;
  border-radius: 0;
  padding: 8px 0 12px;
  background: #fff;
}

.owner-month-grid {
  border: 0;
  border-radius: 0;
  row-gap: 18px;
  padding: 8px 0 20px;
  background: #fff;
}

.owner-month-label {
  font-size: 17px;
}

.owner-date-cell {
  min-height: 52px;
  border-radius: 10px;
}

.owner-date-cell.week {
  gap: 12px;
}

.owner-date-cell span {
  font-size: 16px;
}

.owner-date-cell strong {
  font-size: 18px;
  font-weight: 520;
}

.owner-date-cell.today:not(.selected) {
  background: #f2f3f4;
}

.owner-date-cell.selected {
  width: 34px;
  min-width: 34px;
  min-height: 34px;
  justify-self: center;
  align-self: end;
  background: #111;
}

.owner-date-cell.selected strong {
  color: #fff;
}

.owner-agenda {
  gap: 20px;
  border-top: 2px solid #f1f2f3;
  padding-top: 15px;
}

.owner-agenda-day h2 {
  margin: 0 0 11px 5px;
  color: #65737e;
  font-size: 22px;
  font-weight: 640;
}

.owner-booking-list {
  gap: 8px;
}

.owner-booking-card {
  grid-template-columns: 5px minmax(0, 1fr);
  min-height: 88px;
  border: 0;
  border-radius: 8px;
  padding: 9px 12px 17px;
}

.owner-booking-card::after {
  left: 5px;
  height: 10px;
  opacity: 0.32;
}

.owner-card-main {
  gap: 7px;
  min-width: 0;
}

.owner-card-main strong {
  overflow: hidden;
  color: #121212;
  font-size: 17px;
  line-height: 1.16;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.owner-card-main strong em {
  color: #707070;
  font-style: normal;
  font-weight: 560;
}

.owner-card-main span {
  color: #111;
  font-size: 18px;
  line-height: 1;
}

.owner-card-main small {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #111;
  font-size: 16px;
}

.owner-status-line {
  display: none !important;
}

.somi-mini-logo {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  font-size: 18px;
}

.owner-card-rail {
  margin: -9px 0 -17px -12px;
  border-radius: 8px 0 0 8px;
  background: #ffc400;
}

.owner-booking-card.paid {
  background: #fff2bf;
}

.owner-booking-card.private {
  background: #fff2bf;
}

.owner-booking-card.duo {
  background: #f3e5d7;
}

.owner-booking-card.group {
  background: #e3f2fc;
}

.owner-booking-card.trial {
  background: #ddf2eb;
}

.owner-booking-card.special {
  background: #e3f2fc;
}

.owner-booking-card.blocked {
  background: #f0f1f2;
}

.owner-booking-card.shift-no-class {
  background: #f0f1f2;
}

.owner-booking-card.shift-break {
  background: #f7ead1;
}

.owner-booking-card.shift-leave {
  background: #f4dedb;
}

.owner-booking-card.shift-closed {
  background: #e4e5e2;
}

.owner-booking-card.calendar-focus-card {
  opacity: 1;
  filter: saturate(1.05) brightness(0.98);
}

.owner-booking-card.calendar-soft-card {
  opacity: 0.62;
  filter: saturate(0.82) brightness(1.04);
}

.owner-booking-card.trial .owner-card-rail {
  background: #28a66a;
}

.owner-booking-card.private .owner-card-rail {
  background: #ffc400;
}

.owner-booking-card.duo .owner-card-rail {
  background: #a8724f;
}

.owner-booking-card.group .owner-card-rail {
  background: #57adf4;
}

.owner-booking-card.special .owner-card-rail {
  background: #57adf4;
}

.owner-booking-card.blocked .owner-card-rail {
  background: #d5d7d9;
}

.owner-booking-card.shift-no-class .owner-card-rail {
  background: #b8b8b1;
}

.owner-booking-card.shift-break .owner-card-rail {
  background: #c18a38;
}

.owner-booking-card.shift-leave .owner-card-rail {
  background: #b87972;
}

.owner-booking-card.shift-closed .owner-card-rail {
  background: #8b8b85;
}

.owner-fab {
  right: calc(50% - min(215px, 50vw) + 18px);
  bottom: calc(92px + env(safe-area-inset-bottom));
  width: 64px;
  height: 64px;
  font-size: 38px;
}

.owner-income-strip {
  right: calc(50% - min(215px, 50vw));
  bottom: calc(74px + env(safe-area-inset-bottom));
  left: calc(50% - min(215px, 50vw));
  min-height: 54px;
  border-width: 1px 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0 18px;
}

.income-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #222;
  font-size: 17px;
}

.income-icon {
  width: 18px;
  height: 14px;
  border: 2px solid #55646d;
  border-radius: 3px;
}

.owner-income-strip strong {
  border-bottom: 2px solid #111;
  font-size: 18px;
}

.owner-bottom-nav {
  right: calc(50% - min(215px, 50vw));
  left: calc(50% - min(215px, 50vw));
  min-height: 74px;
  padding: 5px 8px calc(10px + env(safe-area-inset-bottom));
}

.owner-bottom-nav button {
  min-height: 62px;
  border-radius: 8px;
  color: #5d6d76;
  font-size: 13px;
  font-weight: 650;
}

.owner-nav-icon {
  position: relative;
  width: 32px;
  height: 32px;
  border: 3px solid #5d6d76;
  border-radius: 8px;
  color: #5d6d76;
  font-size: 18px;
  font-weight: 720;
}

.owner-bottom-nav button.active .owner-nav-icon {
  border-color: #111;
  background: #111;
  color: #fff;
}

.owner-nav-approvals {
  border-radius: 50%;
}

.owner-nav-approvals::after {
  content: "";
  position: absolute;
  right: 2px;
  bottom: -5px;
  width: 9px;
  height: 9px;
  border-bottom: 3px solid currentColor;
  border-left: 3px solid currentColor;
  transform: rotate(-28deg);
}

.owner-nav-services::before,
.owner-nav-services::after,
.owner-nav-settings::before,
.owner-nav-settings::after {
  content: "";
  position: absolute;
  left: 8px;
  width: 16px;
  border-top: 3px solid currentColor;
}

.owner-nav-services::before {
  top: 9px;
  box-shadow: 0 7px 0 currentColor, 0 14px 0 currentColor;
}

.owner-nav-services::after {
  display: none;
}

.owner-nav-customers {
  border-radius: 50%;
}

.owner-nav-customers::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 9px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 10px 0 0 currentColor, 5px 9px 0 currentColor;
}

.owner-nav-settings {
  border-radius: 50%;
}

.owner-nav-settings::before {
  top: 14px;
  transform: rotate(45deg);
}

.owner-nav-settings::after {
  top: 14px;
  transform: rotate(-45deg);
}

.owner-drawer-backdrop {
  display: flex;
  background: rgba(0, 0, 0, 0.52);
}

.owner-drawer {
  width: min(50dvw, 220px);
  padding: calc(12px + env(safe-area-inset-top)) 12px 18px;
  box-shadow: none;
}

.owner-drawer h3 {
  margin: 0 0 12px 4px;
  color: #6e6e6e;
  font-size: 15px;
  font-weight: 750;
  letter-spacing: 0;
}

.owner-drawer h3:not(:first-of-type) {
  margin-top: 28px;
}

.owner-drawer button {
  justify-content: flex-start;
  gap: 8px;
  min-height: 34px;
  border-radius: 8px;
  padding: 0 9px;
  font-size: 13px;
  font-weight: 560;
}

.owner-drawer button.selected {
  background: #f3f3f4;
}

.owner-drawer h3.owner-drawer-title {
  margin: 0 0 12px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.2;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
}

@keyframes ownerDrawerSlide {
  from {
    opacity: 0.82;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.drawer-icon {
  width: 30px;
  height: 30px;
  border: 3px solid #111;
  border-radius: 3px;
}

.drawer-day {
  opacity: 0.3;
}

.drawer-3day {
  border-left-width: 8px;
  opacity: 0.42;
}

.drawer-plus {
  display: inline-grid;
  place-items: center;
  width: 30px;
  color: #62727b;
  font-size: 28px;
}

.somi-drawer-logo {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: #8a624c;
  font-size: 28px;
}

.inline-dot {
  position: static;
  min-width: 42px;
  min-height: 42px;
  font-size: 14px;
}

.owner-sheet-backdrop {
  background: rgba(0, 0, 0, 0.82);
}

.owner-activity-sheet {
  inset: 64px 0 0;
  border-radius: 18px 18px 0 0;
  padding: 24px 18px;
}

.owner-activity-sheet header {
  grid-template-columns: 44px 1fr 44px;
  margin-bottom: 48px;
}

.owner-activity-sheet header h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 520;
}

.activity-close {
  font-size: 34px;
}

.activity-filter-row {
  margin: -32px 0 22px;
}

.activity-item {
  grid-template-columns: 62px 32px minmax(0, 1fr);
  gap: 8px;
  border-bottom: 0;
  padding: 15px 0 20px;
}

.activity-item time {
  font-size: 16px;
}

.activity-item strong {
  display: block;
  margin-bottom: 8px;
  font-size: 17px;
  font-weight: 520;
}

.activity-item p {
  color: #717171;
  font-size: 17px;
  line-height: 1.45;
}

.activity-item p b {
  color: #111;
}

.owner-simple-page-header {
  padding: 76px 0 24px;
  border-bottom: 1px solid #eee;
}

.owner-simple-page-header h2 {
  margin: 0;
  font-size: 24px;
}

.owner-services-count {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
}

.owner-services-count strong {
  font-size: 22px;
}

.owner-services-count span {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f1f1f2;
  font-size: 17px;
}

.service-toolbar {
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 10px;
}

.branch-logo-select,
.service-toolbar input {
  min-height: 48px;
  border: 1px solid #dedede;
  border-radius: 10px;
  background: #fff;
}

.branch-logo-select {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.service-toolbar input {
  font-size: 19px;
}

.owner-service-list {
  gap: 12px;
}

.owner-service-card {
  position: relative;
  grid-template-columns: 5px 54px minmax(0, 1fr) 24px;
  gap: 12px;
  min-height: 118px;
  border-radius: 8px;
  padding: 15px 14px 15px 0;
  overflow: hidden;
}

.owner-service-card.paid {
  background: #fff;
}

.owner-service-card.trial {
  background: #fff;
}

.owner-service-rail {
  align-self: stretch;
  border-radius: 999px;
  background: #d79b2c;
}

.owner-service-card.trial .owner-service-rail {
  background: #258a3f;
}

.service-list-icon {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #f1f1f2;
}

.service-list-icon::before {
  content: "";
  width: 16px;
  height: 12px;
  border-top: 3px solid #111;
  border-bottom: 3px solid #111;
  box-shadow: 0 7px 0 #111;
}

.owner-service-copy {
  display: grid;
  gap: 9px;
  min-width: 0;
}

.owner-service-copy strong {
  overflow: hidden;
  font-size: 18px;
  line-height: 1.15;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.owner-service-copy .fine {
  font-size: 16px;
}

.owner-service-footer {
  min-width: 0;
}

.owner-service-footer .button {
  min-height: 40px;
  border-radius: 999px;
  font-size: 16px;
}

.disabled-link {
  opacity: 0.38;
}

.service-kebab {
  border: 0;
  background: transparent;
  color: #555;
  font-size: 25px;
}

.avatar-row .somi-mini-logo {
  width: 28px;
  height: 28px;
  margin-right: -7px;
  border: 1px solid #fff;
  font-size: 15px;
}

.team-header {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  padding: 72px 0 16px;
  text-align: center;
}

.team-header h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 520;
}

.team-back {
  border: 0;
  background: transparent;
  font-size: 46px;
  line-height: 1;
}

.team-search {
  min-height: 52px;
  border: 0;
  border-radius: 16px;
  background: #f0f0f2;
  padding: 0 18px;
  font-size: 24px;
  font-weight: 650;
}

.team-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #eee;
  padding: 18px 0 8px;
}

.team-action-row button {
  border: 0;
  background: transparent;
  color: #6b737a;
  font-size: 19px;
}

.team-action-row .get-pro {
  min-height: 42px;
  border-radius: 999px;
  background: #d4f7e8;
  color: #1f6f4d;
  padding: 0 22px;
  font-weight: 650;
}

.team-list {
  display: grid;
  gap: 24px;
  padding-top: 16px;
}

.team-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center;
  min-height: 48px;
  border: 0;
  background: transparent;
  text-align: left;
}

.team-row strong {
  font-size: 22px;
  font-weight: 520;
}

.team-logo {
  font-size: 40px;
}

.you-badge {
  border-radius: 8px;
  background: #f4f4f5;
  color: #777;
  padding: 8px 10px;
  font-weight: 650;
}

.owner-income-strip {
  display: none;
}

.owner-shell-active .owner-app {
  padding: 8px 12px 66px;
  font-size: 14px;
  overscroll-behavior-y: none;
}

.owner-shell-active .owner-app.has-income {
  padding-bottom: 66px;
}

.owner-shell-active .owner-page {
  gap: 12px;
}

.owner-shell-active .owner-content-page {
  gap: 8px;
  min-height: calc(100dvh - 86px);
  padding-bottom: 10px;
}

.owner-shell-active .owner-content-page > .owner-mobile-header {
  position: sticky;
  top: 0;
  z-index: 15;
  margin: -8px -12px 0;
  border-bottom: 1px solid rgba(221, 216, 207, 0.72);
  background: #fff;
  padding: calc(4px + env(safe-area-inset-top)) 12px 6px;
}

.owner-shell-active .owner-content-page > .owner-mobile-header .owner-title-button span {
  font-size: 20px;
  font-weight: 600;
}

.owner-shell-active .owner-mobile-header {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 30px;
  gap: 7px;
  padding: 0 0 2px;
  align-items: center;
}

.owner-calendar-sticky {
  position: sticky;
  top: 0;
  z-index: 16;
  display: grid;
  gap: 2px;
  height: 108px;
  margin: -8px -12px 0;
  border-bottom: 1px solid rgba(221, 216, 207, 0.74);
  background: #fff;
  padding: calc(4px + env(safe-area-inset-top)) 12px 5px;
  box-shadow: 0 4px 14px rgba(32, 32, 29, 0.04);
  overflow: visible;
}

.owner-calendar-sticky .owner-mobile-header {
  padding-bottom: 0;
}

.owner-mobile-header.static-month .owner-title-button i {
  display: none;
}

.owner-shell-active .owner-title-button span {
  gap: 4px;
  font-size: 20px;
  font-weight: 600;
}

.owner-shell-active .owner-title-button b {
  font-weight: 600;
}

.owner-shell-active .owner-title-button i {
  font-size: 10px;
}

.owner-shell-active .icon-button,
.owner-shell-active .owner-filter-dot {
  min-width: 28px;
  min-height: 28px;
  font-size: 11px;
}

.owner-menu-icon span,
.owner-menu-icon span::before,
.owner-menu-icon span::after {
  width: 18px;
  border-top-width: 2px;
}

.owner-menu-icon span {
  height: 15px;
}

.owner-menu-icon span::before {
  top: 5px;
}

.owner-menu-icon span::after {
  top: 10px;
}

.owner-bell-icon span {
  width: 16px;
  height: 19px;
  border-width: 2px;
}

.owner-bell-icon span::after {
  bottom: -3px;
  border-top-width: 2px;
}

.owner-week-strip-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 0;
  height: 68px;
  line-height: 1;
  touch-action: none;
  overscroll-behavior: contain;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.owner-week-window {
  height: 68px;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.owner-week-arrow {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-size: 13px;
}

.owner-shell-active .owner-week-strip {
  grid-template-columns: repeat(21, minmax(0, 1fr));
  width: 300%;
  padding: 0;
  transform: translateX(-33.333%);
  touch-action: none;
  transition: transform 210ms ease, opacity 210ms ease;
  will-change: transform;
}

.owner-week-strip.slide-next {
  opacity: 0.88;
  transform: translateX(-66.666%);
}

.owner-week-strip.slide-prev {
  opacity: 0.88;
  transform: translateX(0);
}

.owner-shell-active .owner-month-grid {
  row-gap: 8px;
  padding: 4px 0 12px;
}

.owner-shell-active .owner-month-label {
  font-size: 11px;
}

.owner-shell-active .owner-date-cell {
  min-height: 68px;
  border-radius: 10px;
  padding: 4px 2px;
}

.owner-shell-active .owner-date-cell.week {
  gap: 2px;
}

.owner-shell-active .owner-date-cell span {
  font-size: 10px;
  font-weight: 450;
}

.owner-shell-active .owner-date-cell strong {
  font-size: 13px;
  font-weight: 500;
}

.owner-shell-active .owner-date-cell.selected {
  width: auto;
  min-width: 0;
  min-height: 68px;
}

.owner-shell-active .owner-agenda {
  gap: 8px;
  padding-top: 0;
}

.owner-shell-active .owner-agenda-day h2 {
  margin: 0 0 5px;
  font-size: 12px;
  font-weight: 650;
}

.owner-shell-active .owner-booking-list {
  gap: 5px;
}

.owner-shell-active .owner-booking-card {
  grid-template-columns: 4px minmax(0, 1fr);
  min-height: 34px;
  border-radius: 8px;
  padding: 6px 8px 7px;
}

.owner-shell-active .owner-booking-card::after {
  left: 4px;
  height: 4px;
}

.owner-shell-active .owner-card-main {
  gap: 0;
}

.owner-shell-active .owner-card-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: 7px;
}

.owner-shell-active .owner-card-main strong,
.owner-shell-active .owner-card-main span,
.owner-shell-active .owner-card-main time,
.owner-shell-active .owner-card-main em {
  overflow: hidden;
  font-size: 12px;
  line-height: 1.18;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.owner-shell-active .owner-card-main strong {
  font-weight: 600;
}

.owner-shell-active .owner-card-main span {
  color: #5f5a50;
  font-size: 12px;
}

.owner-shell-active .owner-card-main time {
  color: #111;
  font-size: 12px;
  font-weight: 500;
}

.owner-shell-active .owner-card-main em {
  color: #5f5a50;
  font-size: 12px;
  font-style: normal;
}

.owner-shell-active .owner-card-rail {
  margin: -6px 0 -8px -8px;
}

.owner-shell-active .owner-empty-line {
  border: 0;
  border-radius: 0;
  padding: 2px 0 7px;
  text-align: left;
  font-size: 12px;
}

.owner-booking-edit .owner-detail-grid {
  display: grid;
  gap: 8px;
}

.owner-booking-edit {
  text-align: left;
}

.owner-edit-summary {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}

.owner-booking-edit .owner-detail-grid > div {
  display: grid;
  gap: 4px;
}

.owner-booking-edit label,
.owner-readonly-field span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.2;
  font-weight: 500;
}

.owner-readonly-field strong {
  font-size: 13px;
  line-height: 1.22;
  font-weight: 520;
}

.owner-booking-edit select,
.owner-booking-edit input,
.owner-booking-edit textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 9px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.2;
  font-weight: 450;
}

.owner-picker-search {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  padding: 9px 10px;
  font-size: 13px;
  font-weight: 500;
}

.owner-wizard-progress {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
  font-weight: 520;
  letter-spacing: 0;
}

.owner-add-customer-inline {
  justify-content: center;
  width: 100%;
  color: var(--ink);
}

.owner-bottom-sheet > form[data-form="owner-create-booking"],
.owner-bottom-sheet > form[data-form="owner-special-event"],
.owner-bottom-sheet > form[data-form="owner-add-customer"] {
  display: grid;
  gap: 0;
  padding: 0;
}

.owner-form-list {
  gap: 10px;
}

.owner-overview-list.compact-overview.owner-form-list > div {
  padding-bottom: 8px;
}

.owner-booking-edit textarea {
  min-height: 80px;
  resize: vertical;
}

.owner-trainer-select {
  width: min(10ch, 100%) !important;
  min-width: 10ch;
  justify-self: start;
}

.owner-token-row strong {
  display: flex;
  gap: 8px;
  align-items: center;
  white-space: nowrap;
}

.owner-token-row strong span {
  color: var(--ink);
  font-size: 12px;
  font-weight: 520;
}

.owner-sheet-topbar {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 0;
}

.owner-sheet-topbar h2 {
  margin: 0;
  text-align: center;
  font-size: 17px;
  line-height: 1;
  font-weight: 620;
}

.owner-sheet-nav,
.owner-sheet-save,
.owner-icon-button {
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
}

.owner-sheet-nav,
.owner-sheet-save {
  min-height: 30px;
  padding: 0 10px;
}

.owner-sheet-back-icon {
  width: 31px;
  padding: 0;
  font-size: 18px;
}

.owner-sheet-actions {
  display: flex;
  gap: 6px;
}

.owner-icon-button {
  position: relative;
  width: 31px;
  height: 31px;
  padding: 0;
}

.owner-pencil-icon::before {
  content: "";
  width: 14px;
  height: 4px;
  border-radius: 2px;
  background: #20201d;
  transform: rotate(-35deg);
}

.owner-pencil-icon::after {
  content: "";
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 5px;
  height: 1px;
  background: #20201d;
  transform: rotate(-35deg);
}

.owner-trash-icon::before {
  content: "";
  width: 12px;
  height: 12px;
  border: 2px solid #20201d;
  border-top: 0;
  border-radius: 0 0 3px 3px;
}

.owner-trash-icon::after {
  content: "";
  position: absolute;
  top: 7px;
  width: 15px;
  height: 2px;
  border-radius: 2px;
  background: #20201d;
}

.owner-more-icon::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #20201d;
  box-shadow: 0 -7px 0 #20201d, 0 7px 0 #20201d;
}

.owner-booking-readonly h2,
.owner-booking-edit h2 {
  margin: 0 0 3px;
  font-size: 18px;
  line-height: 1.08;
  font-weight: 650;
}

.owner-readonly-grid {
  display: grid;
  gap: 7px;
}

.owner-readonly-grid div {
  display: grid;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 8px 9px;
}

.owner-readonly-grid span {
  color: var(--muted);
  font-size: 11px;
}

.owner-readonly-grid strong {
  font-size: 13px;
  line-height: 1.2;
  font-weight: 600;
}

.owner-overview-list {
  display: grid;
  gap: 12px;
  padding-top: 4px;
  text-align: left;
}

.owner-overview-list.compact-overview > div,
.owner-overview-list.compact-overview > button {
  display: grid;
  gap: 3px;
  justify-items: start;
  width: 100%;
  border-bottom: 1px solid rgba(218, 211, 199, 0.65);
  border-top: 0;
  border-right: 0;
  border-left: 0;
  background: transparent;
  color: var(--ink);
  padding: 0 0 10px;
  text-align: left;
}

.owner-overview-list.compact-overview > div:last-child,
.owner-overview-list.compact-overview > button:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.owner-overview-list.compact-overview span {
  color: var(--muted);
  text-align: left;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 500;
}

.owner-overview-list.compact-overview strong {
  width: 100%;
  text-align: left;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 520;
}

.owner-edit-overview button strong::after {
  content: "›";
  float: right;
  color: var(--muted);
  font-size: 17px;
  font-weight: 400;
}

.owner-booking-view .compact-overview button strong::after {
  content: "›";
  float: right;
  color: var(--muted);
  font-size: 17px;
  font-weight: 400;
}

.owner-notes-field {
  margin-top: 2px;
}

.owner-overview-list.compact-overview > div.trainer-line-detail-row {
  grid-template-columns: minmax(0, 1fr) 34px;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 10px;
}

.owner-overview-list.compact-overview > div.trainer-line-detail-row > span {
  grid-column: 1;
  grid-row: 1;
}

.owner-overview-list.compact-overview > div.trainer-line-detail-row > strong {
  grid-column: 1;
  grid-row: 2;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.25;
  font-weight: 520;
}

.owner-overview-list.compact-overview > div.trainer-line-detail-row > .trainer-line-button {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  justify-self: end;
}

.owner-picker-sheet .modal-body {
  padding-top: 14px;
}

.owner-trainer-picker {
  display: grid;
  gap: 8px;
}

.owner-customer-picker-list {
  gap: 0;
}

.owner-trainer-picker button {
  display: grid;
  gap: 3px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
  text-align: left;
}

.owner-trainer-picker button.selected {
  border-color: var(--sage);
  box-shadow: inset 0 0 0 1px var(--sage);
}

.owner-trainer-picker .owner-customer-picker-row {
  min-height: 40px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  padding: 8px 2px;
}

.owner-trainer-picker .owner-customer-picker-row.selected {
  background: rgba(32, 32, 29, 0.05);
  color: var(--ink);
  box-shadow: none;
}

.owner-trainer-picker strong {
  font-size: 14px;
  line-height: 1.2;
  font-weight: 560;
}

.owner-trainer-picker .owner-customer-picker-row strong {
  font-size: 17px;
  line-height: 1.2;
  font-weight: 500;
}

.owner-trainer-picker span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
}

.owner-change-list s {
  color: var(--muted);
  text-decoration-thickness: 1px;
}

.owner-change-arrow {
  display: inline-block;
  margin: 0 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.owner-delete-bottom {
  width: 100%;
  min-height: 42px;
  margin-top: 8px;
  border-radius: 10px;
}

.owner-action-backdrop {
  align-items: end;
  place-items: end center;
  background: rgba(31, 29, 25, 0.28);
}

.owner-action-sheet {
  display: grid;
  gap: 8px;
  width: min(390px, calc(100% - 22px));
  margin-bottom: calc(12px + env(safe-area-inset-bottom));
  animation: ownerSheetRise 240ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.owner-action-sheet button {
  min-height: 50px;
  border: 0;
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font-size: 18px;
  font-weight: 520;
}

.owner-action-sheet button.delete {
  color: #ef4444;
}

.owner-modal-backdrop {
  place-items: end center;
  animation: ownerBackdropFade 160ms ease-out both;
}

.owner-bottom-sheet {
  animation: ownerSheetRise 240ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.owner-wizard-backdrop {
  animation: none !important;
}

.owner-wizard-sheet {
  animation: ownerWizardSlideForward 180ms ease-out both !important;
}

.owner-wizard-back {
  animation-name: ownerWizardSlideBack !important;
}

.owner-wizard-none {
  animation: none !important;
}

.owner-no-motion,
.owner-no-motion .owner-bottom-sheet {
  animation: none !important;
}

body:has(.modal-backdrop [data-modal]) {
  overflow: hidden;
  overscroll-behavior: none;
}

body:has(.owner-drawer-backdrop),
body:has(.owner-drawer-scrim) {
  overflow: hidden;
  overscroll-behavior: none;
}

@keyframes ownerSheetRise {
  from {
    opacity: 0.72;
    transform: translateY(34px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ownerWizardSlideForward {
  from {
    opacity: 0.9;
    transform: translateX(34px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes ownerWizardSlideBack {
  from {
    opacity: 0.9;
    transform: translateX(-34px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes ownerBackdropFade {
  from {
    background-color: rgba(31, 29, 25, 0);
  }
  to {
    background-color: rgba(31, 29, 25, 0.36);
  }
}

@media (prefers-reduced-motion: reduce) {
  .owner-bottom-sheet,
  .owner-action-sheet,
  .owner-drawer,
  .owner-modal-backdrop {
    animation: none;
  }
}

.owner-edit-calendar {
  display: grid;
  gap: 8px;
}

.owner-edit-slots.slot-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
}

.owner-edit-slots .slot-button {
  min-height: 38px;
  padding: 4px;
}

.owner-edit-slots .slot-button strong {
  font-size: 13px;
}

.owner-shell-active .owner-fab {
  right: 14px;
  bottom: calc(56px + env(safe-area-inset-bottom));
  width: 48px;
  height: 48px;
  border-radius: 999px;
  font-size: 28px;
}

.owner-shell-active .owner-bottom-nav {
  right: 12px;
  bottom: calc(8px + env(safe-area-inset-bottom));
  left: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  padding: 3px;
  box-shadow: 0 10px 24px rgba(32, 32, 29, 0.12);
}

.owner-shell-active .trainer-bottom-nav {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.trainer-top-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin: -8px -12px 0;
  border-bottom: 1px solid rgba(221, 216, 207, 0.72);
  background: #fff;
  padding: calc(5px + env(safe-area-inset-top)) 12px 7px;
}

.trainer-top-header h1 {
  margin: 0;
  font-size: 20px;
  line-height: 1.05;
  font-weight: 600;
}

.trainer-signout.button {
  min-height: 28px;
  border-radius: 999px;
  padding: 0 8px;
  font-size: 11px;
}

.trainer-calendar-page {
  gap: 12px;
  max-width: 100%;
  padding-top: 116px;
  padding-right: 3px;
  padding-left: 3px;
}

.trainer-calendar-sticky {
  position: fixed !important;
  top: 0 !important;
  left: 50%;
  z-index: 60 !important;
  display: grid;
  gap: 2px;
  width: min(430px, 100%);
  height: 108px !important;
  min-height: 108px !important;
  max-height: 108px !important;
  box-sizing: border-box;
  margin: 0 !important;
  border-bottom: 1px solid rgba(221, 216, 207, 0.74);
  background: #fff;
  padding: calc(4px + env(safe-area-inset-top)) 12px 5px;
  box-shadow: 0 4px 14px rgba(32, 32, 29, 0.04);
  transform: translateX(-50%);
  isolation: isolate;
  overflow: visible !important;
}

.trainer-month-header {
  grid-template-columns: minmax(0, 1fr) auto;
  position: static;
  padding: 0 0 2px;
}

.trainer-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.trainer-name-pill {
  display: inline-grid;
  place-items: center;
  max-width: 72px;
  min-height: 28px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  padding: 0 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 600;
}

.trainer-full-toggle {
  width: 78px;
  max-width: 78px;
  border: 1px solid var(--line);
}

.trainer-shell-active {
  padding-top: 0;
}

.trainer-shell-active .owner-app.trainer-app {
  min-height: 100dvh;
  padding: 0 12px 108px;
}

.trainer-calendar-page .owner-agenda {
  max-width: 100%;
  overflow-x: clip;
  padding: 0 2px;
}

.trainer-calendar-page .owner-booking-list,
.trainer-calendar-page .owner-booking-card,
.trainer-calendar-page .owner-card-main {
  max-width: 100%;
  min-width: 0;
}

.trainer-calendar-page,
.trainer-calendar-page .owner-calendar-sticky,
.trainer-calendar-page .owner-week-window,
.trainer-calendar-page .owner-agenda {
  width: 100%;
}

.trainer-calendar-page .trainer-calendar-sticky {
  width: min(430px, 100%) !important;
}

.trainer-booking-card em {
  color: #65717a;
}

.trainer-calendar-page .owner-booking-card.calendar-focus-card {
  opacity: 1;
  filter: saturate(1.08) brightness(0.96);
}

.trainer-calendar-page .owner-booking-card.calendar-soft-card {
  opacity: 0.58;
  filter: saturate(0.78) brightness(1.05);
}

.trainer-shift-summary {
  display: grid;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 12px;
}

.trainer-shift-summary strong {
  font-size: 18px;
}

.trainer-shift-summary span {
  color: var(--muted);
  font-size: 12px;
}

.trainer-shift-slot-list {
  display: grid;
  gap: 7px;
}

.trainer-shift-slot-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 54px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  padding: 8px 10px;
  text-align: left;
}

.trainer-shift-slot-row:disabled {
  cursor: default;
  opacity: 0.9;
}

.trainer-shift-slot-row time {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.trainer-shift-slot-row strong,
.trainer-shift-slot-row small {
  display: block;
}

.trainer-shift-slot-row strong {
  overflow: hidden;
  font-size: 14px;
  font-weight: 620;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.trainer-shift-slot-row small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.trainer-shift-slot-row.shift-no-class,
.trainer-shift-slot-row.shift-closed {
  background: #f7f7f4;
}

.trainer-shift-slot-row.shift-break {
  background: #fff6e6;
}

.trainer-shift-slot-row.shift-leave {
  background: #fbebe8;
}

.trainer-settings-page {
  gap: 8px;
}

.trainer-branch-select {
  max-width: 112px;
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 0 8px;
  color: var(--ink);
  font-size: 12px;
}

.owner-shell-active .owner-bottom-nav button {
  min-height: 30px;
  border-radius: 13px;
  font-size: 11px;
  font-weight: 600;
}

.owner-shell-active .owner-bottom-nav button.active {
  background: var(--ink);
  color: #fff;
}

.owner-shell-active .owner-nav-icon {
  display: none;
}

.owner-shell-active .owner-chip-row {
  gap: 6px;
  padding-bottom: 2px;
}

.owner-shell-active .owner-chip-row button {
  min-height: 32px;
  padding: 0 10px;
  font-size: 12px;
}

.owner-shell-active .owner-queue,
.owner-shell-active .owner-customer-list,
.owner-shell-active .owner-settings-list,
.owner-shell-active .owner-services-page,
.owner-shell-active .owner-settings-stack {
  display: grid;
  gap: 7px;
}

.owner-shell-active .owner-search,
.owner-shell-active .trial-link-form input,
.owner-shell-active .trial-link-form select {
  min-height: 34px;
  border-radius: 8px;
  padding: 0 10px;
  font-size: 13px;
}

.owner-shell-active .owner-search {
  border-color: rgba(218, 211, 199, 0.9);
  background: #fff;
}

.owner-shell-active .owner-customer-row {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  min-height: 48px;
  border-radius: 8px;
  padding: 9px 10px;
}

.owner-shell-active .owner-customer-row .trainer-avatar {
  display: none;
}

.owner-shell-active .owner-customer-row strong {
  font-size: 14px;
  line-height: 1.15;
  font-weight: 600;
}

.owner-shell-active .owner-customer-row small {
  font-size: 11px;
  line-height: 1.25;
}

.owner-shell-active .owner-customer-row .pill {
  min-height: 24px;
  font-size: 10px;
}

.owner-shell-active .empty-state {
  min-height: 44px;
  border: 1px dashed rgba(218, 211, 199, 0.9);
  border-radius: 8px;
  background: transparent;
  padding: 12px;
  text-align: left;
}

.owner-shell-active .empty-state p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.compact-owner-notice.notice {
  padding: 10px 12px;
}

.compact-owner-services {
  gap: 8px;
}

.compact-service-card {
  display: block;
  min-height: 0;
  border-radius: 8px;
  padding: 12px;
}

.compact-service-card.inactive {
  opacity: 0.66;
}

.compact-service-card .owner-service-copy {
  gap: 10px;
}

.compact-service-card .owner-service-copy strong {
  font-size: 16px;
}

.compact-service-card .owner-service-copy .fine {
  font-size: 12px;
}

.compact-service-card .owner-service-footer {
  align-items: flex-end;
  gap: 8px;
}

.compact-service-card .service-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.compact-service-card .pill,
.compact-service-card .token-badge {
  min-height: 26px;
  font-size: 11px;
}

.compact-settings-form .panel-header h2 {
  margin: 0;
  font-size: 16px;
}

.owner-settings-group {
  display: grid;
  gap: 6px;
}

.owner-settings-group h3 {
  margin: 4px 0 0;
  color: #65717a;
  font-size: 12px;
  line-height: 1.1;
  font-weight: 650;
}

.owner-settings-group .trial-link-form {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.owner-settings-group .field,
.owner-settings-group .field-row {
  gap: 6px;
}

.owner-settings-group label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
}

.owner-toggle-button {
  min-width: 54px;
}

.owner-toggle-button.on {
  border-color: rgba(83, 106, 76, 0.45);
  background: rgba(83, 106, 76, 0.1);
  color: var(--sage);
}

.owner-inline-input {
  display: flex;
  gap: 7px;
  align-items: center;
}

.owner-inline-input input {
  width: 68px;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 0 8px;
  font-size: 13px;
}

.owner-shell-active .list-item {
  gap: 8px;
  border-radius: 8px;
  padding: 9px 10px;
}

.owner-shell-active .list-item-main strong {
  font-size: 14px;
  line-height: 1.18;
  font-weight: 600;
}

.owner-shell-active .list-item-main span,
.owner-shell-active .fine {
  font-size: 12px;
  line-height: 1.25;
}

.owner-shell-active .button {
  min-height: 34px;
  padding: 0 10px;
  font-size: 12px;
}

.owner-shell-active .list-item .actions {
  gap: 5px;
}

.owner-shell-active .list-item .actions .button {
  min-width: 0;
  min-height: 30px;
  padding: 0 8px;
  font-size: 11px;
}

.owner-shell-active .owner-queue .list-item {
  align-items: start;
}

.owner-shell-active .owner-queue .list-item .actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 116px;
}

.owner-shell-active .panel,
.owner-shell-active .nested-panel {
  border-radius: 8px;
}

.owner-shell-active .panel {
  box-shadow: none;
}

.owner-shell-active .panel-header {
  gap: 4px;
  padding: 10px 10px 0;
}

.owner-shell-active .panel-header h2 {
  margin: 0;
  font-size: 15px;
  line-height: 1.15;
  font-weight: 600;
}

.owner-shell-active .panel-body {
  padding: 10px;
}

@media (max-width: 1080px) {
  .topbar,
  .panel-header {
    align-items: stretch;
    flex-direction: column;
  }

  .topbar-actions,
  .route-links {
    width: 100%;
  }

  .route-link {
    flex: 1;
  }

  .view-grid,
  .view-grid.owner,
  .auth-wrap,
  .account-grid {
    grid-template-columns: 1fr;
  }

  .mini-grid,
  .info-grid,
  .exchange-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  html {
    scroll-behavior: smooth;
  }

  body {
    padding-bottom: 68px;
  }

  .app-shell {
    width: min(100% - 14px, 1180px);
    padding-top: 10px;
  }

  .topbar {
    gap: 10px;
    padding: 8px 0 12px;
  }

  .topbar-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 5px;
  }

  .account-chip {
    min-height: 34px;
    padding: 0 9px;
    font-size: 12px;
  }

  .micoin-chip {
    color: #8d652a;
    background: rgba(180, 138, 71, 0.12);
    border-color: rgba(180, 138, 71, 0.36);
  }

  .topbar-actions .button {
    min-height: 34px;
    padding: 0 10px;
    font-size: 12px;
  }

  h1 {
    font-size: 27px;
    line-height: 1;
  }

  h2 {
    margin-bottom: 8px;
    font-size: 23px;
  }

  h3 {
    margin-bottom: 6px;
    font-size: 16px;
  }

  .workspace,
  .customer-layout,
  .account-grid {
    gap: 10px;
  }

  .mobile-section-tabs {
    position: fixed;
    right: 8px;
    bottom: 8px;
    left: 8px;
    z-index: 18;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    border: 1px solid rgba(221, 216, 207, 0.9);
    border-radius: 999px;
    background: rgba(255, 253, 249, 0.96);
    box-shadow: 0 12px 34px rgba(45, 38, 28, 0.16);
    padding: 4px;
  }

  .mobile-section-tabs a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    border-radius: 999px;
    color: var(--ink);
    font-size: 12px;
    text-decoration: none;
  }

  #customer-upcoming,
  #customer-book,
  #customer-tokens {
    scroll-margin-top: 10px;
  }

  .panel-header {
    gap: 8px;
    padding: 13px 13px 0;
  }

  .panel-body {
    padding: 13px;
  }

  .token-wallet {
    justify-content: flex-start;
  }

  .token-badge {
    min-height: 25px;
    padding-right: 8px;
    font-size: 11px;
  }

  .token-badge span {
    width: 20px;
    height: 20px;
  }

  .cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }

  .service-card {
    min-height: 118px;
    padding: 8px 6px;
    text-align: center;
  }

  .service-card h3 {
    margin-bottom: 7px;
    font-size: 13px;
    line-height: 1.12;
  }

  .service-card.disabled {
    padding-top: 30px;
  }

  .coming-ribbon {
    padding: 4px 0;
    font-size: 10px;
  }

  .service-meta {
    justify-content: center;
    gap: 4px;
  }

  .service-meta .pill,
  .service-meta .token-badge {
    min-height: 22px;
    font-size: 10px;
  }

  .service-meta .token-badge {
    padding-right: 6px;
  }

  .service-meta .token-badge span {
    width: 17px;
    height: 17px;
  }

  .trainer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }

  .trainer-card {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 8px 4px;
    text-align: center;
  }

  .trainer-avatar,
  .trainer-copy span,
  .trainer-copy small {
    display: none;
  }

  .trainer-copy {
    display: block;
  }

  .trainer-copy strong {
    font-size: 14px;
  }

  .friend-box {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    padding: 8px;
  }

  .friend-box .button {
    min-height: 38px;
    padding: 0 8px;
    font-size: 11px;
  }

  .compact-field label {
    font-size: 10px;
  }

  .week-picker {
    grid-template-columns: 38px minmax(0, 1fr) 38px;
  }

  .week-picker .button {
    min-height: 34px;
    padding: 0;
  }

  .date-strip {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
  }

  .date-button {
    min-height: 46px;
    border-radius: 7px;
    padding: 5px 2px;
  }

  .date-button span {
    font-size: 10px;
  }

  .date-button strong {
    margin-top: 1px;
    font-size: 16px;
  }

  .date-month {
    display: none;
  }

  .slot-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
  }

  .slot-button {
    min-height: 46px;
    padding: 5px 2px;
  }

  .slot-button strong {
    font-size: 15px;
  }

  .slot-button span {
    display: block;
    font-size: 9px;
    line-height: 1;
  }

  .get-more-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .promo-card,
  .checkin-box,
  .exchange-card,
  .notice {
    padding: 10px;
  }

  .exchange-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }

  .exchange-card {
    align-items: stretch;
    gap: 6px;
    min-height: 128px;
    padding: 8px 5px;
    text-align: center;
  }

  .exchange-card p {
    font-size: 10px;
  }

  .exchange-card .button {
    min-height: 30px;
    padding: 0 6px;
    font-size: 11px;
  }

  .exchange-card .token-badge {
    justify-self: center;
    padding-right: 6px;
    font-size: 10px;
  }

  #customer-tokens .panel-body {
    min-height: 470px;
  }

  .past-session {
    min-height: 52px;
    padding: 9px;
  }

  .field-row,
  .calendar-row,
  .social-grid {
    grid-template-columns: 1fr;
  }

  .list-item {
    align-items: center;
    flex-direction: row;
    min-height: 58px;
    padding: 9px;
  }

  .list-item .actions {
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
  }

  .list-item .button {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 0 8px;
    font-size: 12px;
  }

  .booking-summary {
    align-items: stretch;
    flex-direction: column;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .booking-summary .button {
    width: 100%;
  }

  .actions {
    justify-content: stretch;
  }

  .actions .button {
    flex: 1;
  }

  .list-item .actions .button {
    flex: 0 0 auto;
  }
}

.owner-shell-active .owner-chip-row {
  align-items: flex-start !important;
  height: 34px !important;
  min-height: 0 !important;
  max-height: 34px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

.owner-shell-active .owner-chip-row button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  padding: 0 10px !important;
}

.owner-shell-active .owner-calendar-sticky .owner-mobile-header {
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  grid-template-rows: 30px !important;
}

.owner-shell-active .owner-calendar-sticky {
  height: 108px !important;
  min-height: 108px !important;
  max-height: 108px !important;
  overflow: visible !important;
}

.owner-shell-active .owner-week-strip-wrap,
.owner-shell-active .owner-week-window {
  height: 68px !important;
  min-height: 68px !important;
  max-height: 68px !important;
}

.owner-shell-active .owner-week-strip-wrap .owner-date-cell.week {
  height: 68px !important;
  min-height: 68px !important;
}

.owner-shell-active .owner-week-strip-wrap .owner-date-cell.selected {
  width: 100% !important;
  min-width: 0 !important;
  justify-self: stretch !important;
  align-self: stretch !important;
}

.owner-shell-active .owner-calendar-page {
  gap: 8px !important;
  display: block !important;
  padding-top: 116px !important;
}

.owner-shell-active .owner-calendar-page .owner-agenda {
  margin-top: 8px !important;
}

.owner-shell-active .owner-calendar-page > .owner-calendar-sticky {
  position: fixed !important;
  top: 0 !important;
  left: 50%;
  z-index: 60 !important;
  width: min(430px, 100%) !important;
  margin: 0 !important;
  box-sizing: border-box;
  transform: translateX(-50%);
}

.owner-app.owner-drawer-open .owner-calendar-page > .owner-calendar-sticky {
  pointer-events: none;
}

.owner-app.owner-drawer-open .owner-calendar-sticky .owner-title-button,
.owner-app.owner-drawer-open .owner-calendar-sticky .owner-week-strip-wrap,
.owner-app.owner-drawer-open .owner-calendar-sticky .owner-month-dropdown {
  opacity: 0.28;
  pointer-events: none;
}

.owner-app.owner-drawer-open .owner-calendar-sticky .owner-calendar-filter-button {
  position: relative;
  z-index: 2;
  opacity: 1;
  pointer-events: auto;
}

.owner-shell-active .owner-month-dropdown {
  position: absolute;
  top: calc(100% + 3px);
  right: 12px;
  left: 12px;
  z-index: 30;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 14px 32px rgba(32, 32, 29, 0.14);
  padding: 6px 8px 8px;
}

.owner-shell-active .owner-month-dropdown .owner-month-grid {
  row-gap: 3px !important;
  column-gap: 3px !important;
  padding: 0 !important;
}

.owner-shell-active .owner-month-dropdown .owner-month-label {
  font-size: 9px !important;
}

.owner-shell-active .owner-month-dropdown .owner-date-cell {
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  justify-self: center !important;
  align-self: center !important;
  border-radius: 7px !important;
  padding: 1px !important;
}

.owner-shell-active .owner-month-dropdown .owner-date-cell strong {
  font-size: 11px !important;
  font-weight: 500 !important;
}

.owner-shell-active .owner-month-dropdown .owner-date-cell.selected {
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  justify-self: center !important;
  align-self: center !important;
  border-radius: 7px !important;
}

/* Somi mobile settings/request screens */
.somi-sticky-page-header {
  position: sticky;
  top: 0;
  z-index: 35;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  justify-items: center;
  width: 100%;
  max-width: 100%;
  min-height: 64px;
  border-bottom: 1px solid rgba(221, 216, 207, 0.72);
  background: rgba(251, 248, 241, 0.96);
  backdrop-filter: blur(16px);
  padding: 10px 14px;
}

.somi-sticky-page-header h1 {
  margin: 0;
  font-size: 22px;
  line-height: 1.12;
  text-align: center;
}

.somi-sticky-page-header small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.somi-hamburger,
.somi-back-button,
.icon-button {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fffdf9;
  color: var(--ink);
  padding: 0;
}

.owner-request-header {
  position: fixed;
  top: 0;
  right: max(12px, calc(50% - 215px));
  left: max(12px, calc(50% - 215px));
  z-index: 48;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  align-items: center;
  justify-items: center;
  min-height: 52px;
  border: 1px solid rgba(221, 216, 207, 0.8);
  border-top: 0;
  border-radius: 0 0 16px 16px;
  background: rgba(255, 255, 255, 0.96);
  padding: 8px 10px;
  box-shadow: 0 8px 20px rgba(32, 32, 29, 0.06);
  backdrop-filter: blur(16px);
}

.owner-request-header h1 {
  font-size: 18px;
}

.owner-request-header .somi-hamburger {
  justify-self: center;
  align-self: center;
  width: 30px;
  height: 30px;
  gap: 3px;
  border-radius: 10px;
}

.owner-request-header .somi-hamburger span {
  width: 13px;
  height: 1.5px;
}

.somi-hamburger {
  gap: 4px;
}

.somi-hamburger span {
  display: block;
  width: 16px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

.somi-hamburger.active {
  background: var(--ink);
  color: #fff;
}

.somi-back-button {
  font-size: 28px;
  line-height: 1;
}

.owner-request-inbox-page,
.owner-settings-page,
.settings-trainer-page,
.customer-book-wizard,
.customer-credits-page {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 100dvh;
  overflow-x: clip;
  background: #fbf8f1;
}

.customer-book-wizard,
.customer-credits-page {
  min-height: auto;
  background: #fff;
}

.owner-request-inbox-page {
  background: #fff;
}

.owner-request-content,
.settings-index-body,
.settings-subpage-body,
.customer-book-step,
.customer-credits-body {
  display: grid;
  align-content: start;
  gap: 14px;
  width: 100%;
  max-width: 100%;
  padding: 14px 16px calc(136px + env(safe-area-inset-bottom));
}

.owner-request-content {
  padding-top: 66px;
}

.owner-request-menu-backdrop,
.owner-detail-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 48;
  background: rgba(31, 29, 25, 0.26);
}

.owner-request-sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 60;
  width: 40%;
  min-width: 150px;
  max-width: 190px;
  overflow-y: auto;
  border-right: 1px solid var(--line);
  background: #fff;
  padding: 16px 10px calc(24px + env(safe-area-inset-bottom));
  box-shadow: 16px 0 44px rgba(32, 32, 29, 0.16);
  animation: ownerDrawerSlide 220ms ease both;
}

.owner-request-menu-title {
  margin-top: 10px;
  min-height: 34px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

.owner-request-sidebar button:first-child {
  margin-top: 0;
}

.owner-request-menu-child {
  padding-left: 18px !important;
  color: var(--muted) !important;
  font-size: 12px !important;
}

.owner-request-sidebar button {
  width: 100%;
  min-height: 32px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  padding: 0 8px;
  text-align: left;
  font-size: 12px;
}

.owner-request-sidebar button.selected {
  background: var(--ink);
  color: #fff;
}

.owner-request-sidebar button.selected.owner-request-menu-child {
  color: #fff !important;
}

.owner-request-list {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.owner-request-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  width: 100%;
  max-width: 100%;
  min-height: 50px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 6px 8px;
  text-align: left;
  overflow: hidden;
}

.owner-request-card.trial {
  background: #fff;
}

.owner-request-card.purchase {
  background: #fff;
}

.owner-request-card.upgrade {
  background: #fff;
}

.owner-request-card.manual {
  background: #fff;
}

.owner-request-card.status-approved {
  border-color: #d8e9d8;
  background: #edf8ed;
}

.owner-request-card.status-declined {
  border-color: #efd9d2;
  background: #faece8;
}

.owner-request-main {
  display: grid;
  gap: 2px;
}

.owner-request-main strong {
  font-size: 13.5px;
  line-height: 1.15;
}

.owner-request-main time {
  color: var(--muted);
  font-size: 10.5px;
}

.owner-request-type {
  justify-self: start;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 999px;
  padding: 1px 6px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.25;
}

.owner-request-side {
  display: grid;
  justify-items: end;
  gap: 3px;
  min-width: 0;
}

.owner-request-type.trial {
  background: #dcefe2;
  color: #3f6f4e;
}

.owner-request-type.purchase {
  background: #f4e5b8;
  color: #7b5b18;
}

.owner-request-type.upgrade {
  background: #dfeaf5;
  color: #405f7c;
}

.owner-request-type.manual {
  background: #ebe7df;
  color: #5f5a50;
}

.owner-request-actions,
.owner-request-drawer-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}

.owner-request-actions {
  flex-wrap: nowrap;
  gap: 4px;
}

.owner-request-actions .button {
  min-height: 24px;
  border-radius: 999px;
  padding: 0 7px;
  font-size: 11px;
}

.owner-request-drawer-actions .button {
  min-height: 30px;
  border-radius: 999px;
  padding: 0 10px;
  font-size: 12px;
}

.owner-request-actions .decline,
.owner-request-drawer-actions .decline {
  color: #9d514a;
}

.owner-past-filter-row {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  max-width: 100%;
  position: relative;
  z-index: 4;
}

.owner-date-filter-menu {
  position: relative;
  display: inline-grid;
  justify-items: end;
}

.owner-date-filter-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: auto;
  max-width: 100%;
  height: 24px;
  min-height: 24px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  padding: 0 2px;
  font-size: 12px;
  font-weight: 600;
  box-shadow: none;
}

.owner-date-filter-button i {
  color: var(--muted);
  font-style: normal;
  font-size: 11px;
}

.owner-date-filter-dropdown {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  z-index: 8;
  display: grid;
  gap: 2px;
  width: max-content;
  min-width: 132px;
  border: 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.98);
  padding: 5px;
  box-shadow: 0 12px 24px rgba(32, 32, 29, 0.1);
}

.owner-date-filter-dropdown button {
  min-height: 30px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  padding: 0 10px;
  text-align: left;
  font-size: 12px;
}

.owner-date-filter-dropdown button.active {
  background: var(--ink);
  color: #fff;
}

.owner-request-section {
  display: grid;
  gap: 9px;
  min-width: 0;
}

.owner-request-section h2,
.settings-section-card h2 {
  margin: 0;
  font-size: 16px;
}

.owner-request-detail-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 65;
  width: min(50vw, 280px);
  min-width: 230px;
  overflow-y: auto;
  border-left: 1px solid var(--line);
  background: #fffdf9;
  padding: 16px 14px calc(24px + env(safe-area-inset-bottom));
  box-shadow: -16px 0 44px rgba(32, 32, 29, 0.16);
  animation: detailDrawerSlide 220ms ease both;
}

@keyframes detailDrawerSlide {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

.owner-request-detail-drawer header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  align-items: start;
  gap: 10px;
  margin-bottom: 14px;
}

.owner-request-detail-drawer h2 {
  margin: 8px 0 0;
  font-size: 20px;
}

.owner-detail-field-list {
  display: grid;
  gap: 8px;
}

.owner-detail-field {
  display: grid;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 10px;
}

.owner-detail-field span {
  color: var(--muted);
  font-size: 11px;
}

.owner-detail-field strong {
  font-size: 13px;
  line-height: 1.25;
}

.owner-detail-history {
  display: grid;
  gap: 8px;
  margin: 16px 0;
}

.owner-detail-history p {
  display: grid;
  gap: 2px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.owner-trial-link-fab {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: calc(88px + env(safe-area-inset-bottom));
  z-index: 20;
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  padding: 0 18px;
  font-weight: 700;
  box-shadow: 0 14px 30px rgba(32, 32, 29, 0.22);
}

.settings-list-card,
.settings-section-card,
.somi-form-card {
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fffdf9;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(45, 38, 28, 0.045);
}

.settings-section-card,
.somi-form-card {
  gap: 14px;
  padding: 14px;
  overflow: visible;
}

.settings-index-row,
.settings-inline-row,
.settings-service-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 58px;
  border: 0;
  border-bottom: 1px solid rgba(221, 216, 207, 0.7);
  background: transparent;
  color: var(--ink);
  padding: 12px 14px;
  text-align: left;
}

.settings-list-card > :last-child {
  border-bottom: 0;
}

.settings-index-row strong,
.settings-inline-row strong,
.settings-service-row strong {
  display: block;
  font-size: 15px;
}

.settings-index-row small,
.settings-inline-row small,
.settings-service-row small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
}

.settings-index-row i {
  color: var(--muted);
  font-style: normal;
  font-size: 20px;
}

.settings-field-list {
  display: grid;
  gap: 11px;
}

.settings-field-list .field {
  display: grid;
  gap: 5px;
}

.settings-field-list label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.settings-field-list input,
.settings-field-list select,
.settings-field-list textarea,
.somi-form-card input,
.somi-form-card select,
.somi-form-card textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  padding: 9px 11px;
}

.full-width-action {
  width: 100%;
  justify-content: center;
}

.sales-qr-card .owner-overview-list,
.promotion-settings-box .owner-overview-list,
.purchase-option-details {
  margin: 0;
}

.promotion-settings-list {
  display: grid;
  gap: 12px;
}

.promotion-settings-box {
  border: 1px solid rgba(221, 216, 207, 0.78);
  border-radius: 14px;
  background: #fff;
  padding: 12px;
}

.promotion-settings-box .field-row {
  gap: 8px;
}

.settings-card-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.settings-card-heading h2 {
  margin: 0;
}

.owner-trainer-detail-card .pill {
  white-space: nowrap;
}

.owner-checkbox-stack {
  display: grid;
  gap: 8px;
  width: 100%;
}

.owner-checkbox-stack label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 520;
}

.owner-checkbox-stack input {
  width: auto;
  min-height: 0;
}

.trainer-readonly-details strong {
  color: var(--ink);
}

.owner-trainer-progress-readonly {
  width: 100%;
}

.owner-trainer-progress-readonly strong,
.owner-trainer-progress-readonly small {
  width: auto !important;
}

.settings-toggle-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.settings-toggle-row small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.owner-customers-page-v2 {
  display: block;
  background: #fff;
  padding: 146px 16px calc(136px + env(safe-area-inset-bottom));
}

.owner-customers-page-v2.selecting-customer {
  padding-top: 244px;
}

.owner-customers-fixed-top {
  position: fixed;
  top: 0;
  right: max(12px, calc(50% - 215px));
  left: max(12px, calc(50% - 215px));
  z-index: 48;
  display: grid;
  gap: 6px;
  border: 1px solid rgba(221, 216, 207, 0.8);
  border-top: 0;
  border-radius: 0 0 18px 18px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 20px rgba(32, 32, 29, 0.06);
  backdrop-filter: blur(16px);
  padding: 7px 16px 9px;
}

.owner-customers-fixed-top .owner-customers-header {
  position: static;
  display: grid;
  grid-template-columns: 1fr;
  min-height: 28px;
  border: 0;
  background: transparent;
  padding: 0;
  backdrop-filter: none;
}

.owner-customers-fixed-top .owner-customers-header h1 {
  font-size: 19px;
  text-align: left;
}

.owner-customers-page-v2 > .owner-search,
.owner-customers-page-v2 > .owner-chip-row,
.owner-customers-page-v2 > .owner-customer-list,
.owner-add-customer-row,
.owner-selection-notice {
  width: 100%;
  max-width: 100%;
  margin-right: 0;
  margin-left: 0;
}

.owner-customer-search-large {
  display: block;
  min-height: 36px;
  margin-top: 0;
  border-radius: 999px;
  padding: 0 14px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 400;
}

.owner-customer-search-large::placeholder {
  color: #9a968d;
  font-size: 16px;
  font-weight: 400;
}

.owner-add-customer-row {
  display: grid;
  align-items: center;
  min-height: 34px;
  margin-top: 0;
  margin-bottom: 0;
  border: 1px solid rgba(221, 216, 207, 0.86);
  border-radius: 12px;
  background: #fff;
  color: #9a968d;
  padding: 0 12px;
  text-align: left;
  font-size: 16px;
  font-weight: 400;
}

.owner-contact-row {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  min-height: 34px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  padding: 3px 2px;
  overflow: hidden;
}

.owner-contact-avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(32, 32, 29, 0.08);
  border-radius: 50%;
  background: #f0ebe2;
  color: var(--ink);
  font-size: 14px;
  font-weight: 720;
}

.owner-contact-name strong {
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row-chevron {
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  justify-self: end;
}

.pill.status-member,
.pill.status-special {
  background: #dfeee4;
  color: #3f6f4e;
}

.pill.status-trial {
  background: #f5e8bf;
  color: #74591a;
}

.pill.status-inactive,
.pill.status-expired {
  background: #eee9e1;
  color: #776f62;
}

.customer-book-step {
  padding: 10px 16px calc(54px + env(safe-area-inset-bottom));
}

.customer-book-step-service,
.customer-book-step-trainer,
.customer-book-step-date {
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
}

.customer-book-step-review {
  padding-top: 6px;
  padding-bottom: calc(44px + env(safe-area-inset-bottom));
}

.customer-credits-body {
  padding: 10px 16px calc(78px + env(safe-area-inset-bottom));
}

.customer-tab-title-header,
.customer-credits-header {
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  min-height: 58px;
  background: rgba(255, 255, 255, 0.96);
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
}

.customer-tab-title-header h1,
.customer-credits-header h1 {
  font-size: 22px;
  text-align: left;
}

.customer-wizard-header {
  top: calc(58px + env(safe-area-inset-top));
  min-height: 56px;
  background: rgba(255, 255, 255, 0.96);
}

.customer-book-card-list,
.customer-trainer-list,
.customer-credit-grid,
.customer-activity-timeline {
  display: grid;
  gap: 10px;
}

.customer-book-service-card,
.customer-trainer-choice {
  display: grid;
  gap: 12px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fffdf9;
  color: var(--ink);
  padding: 15px;
  text-align: left;
}

.customer-book-service-card.selected,
.customer-trainer-choice.selected {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}

.customer-book-service-card p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.customer-book-service-card.disabled {
  opacity: 0.58;
}

.customer-trainer-choice {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
}

.customer-trainer-choice small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.customer-date-strip {
  padding-bottom: 4px;
}

.customer-timeslot-grid {
  padding-bottom: 4px;
}

.customer-request-card .actions,
.customer-book-review-card .actions {
  justify-content: stretch;
}

.customer-request-card .actions .button {
  width: 100%;
}

.customer-wizard-header small {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-review-field-list {
  display: grid;
  gap: 3px;
  width: 100%;
}

.customer-review-field {
  display: grid;
  grid-template-columns: minmax(98px, 0.82fr) minmax(0, 1.18fr);
  align-items: center;
  gap: 10px;
  min-height: 30px;
  border-bottom: 0;
  padding: 3px 0;
}

.customer-review-field span {
  color: var(--muted);
  font-size: 12.5px;
}

.customer-review-field strong {
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.25;
  text-align: right;
}

.customer-review-input-field {
  min-height: 40px;
  padding-top: 4px;
}

.customer-review-input-field input {
  width: 100%;
  min-height: 32px;
  border: 1px solid rgba(221, 216, 207, 0.9);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  padding: 0 12px;
  text-align: right;
  font-size: 16px;
}

.customer-review-input-field input::placeholder {
  color: #aaa59b;
  font-size: 13px;
}

.customer-confirm-modal {
  width: min(330px, calc(100% - 32px));
  border-radius: 18px;
}

.customer-confirm-body {
  gap: 14px;
  padding: 20px;
}

.customer-confirm-body h2 {
  margin: 0;
  font-size: 20px;
  line-height: 1.15;
  text-align: center;
}

.customer-confirm-summary {
  display: grid;
  gap: 5px;
  text-align: center;
}

.customer-confirm-summary strong {
  font-size: 15px;
}

.customer-confirm-summary p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.customer-confirm-body .actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.confirm-wide,
.show-more-button {
  width: 100%;
}

.daily-checkin-section {
  background: #ecf7ef;
}

.customer-daily-checkin-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.customer-credit-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.customer-credit-card {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  padding: 12px;
}

.customer-credit-card strong {
  font-size: 24px;
}

.customer-credit-card span {
  font-weight: 700;
}

.customer-credit-card small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
}

.customer-credit-actions {
  display: grid;
  gap: 8px;
}

.customer-activity-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid rgba(221, 216, 207, 0.72);
  padding: 10px 0;
}

.customer-activity-row:last-child {
  border-bottom: 0;
}

.customer-activity-row span,
.customer-activity-row time {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.customer-activity-row > div:last-child {
  display: grid;
  justify-items: end;
  gap: 5px;
}

.trainer-photo-placeholder {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: 28px;
  font-weight: 700;
}

.trainer-progress-card {
  display: grid;
  gap: 10px;
}

.trainer-progress-card small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.trainer-progress-bar {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #ece7dd;
}

.trainer-progress-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--sage);
}

.settings-week-list {
  display: grid;
  gap: 8px;
}

.settings-week-row {
  display: grid;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  padding: 10px 12px;
  text-align: left;
}

.settings-week-row span {
  color: var(--muted);
  font-size: 12px;
}

.settings-signout {
  width: 100%;
}

@media (max-width: 370px) {
  .owner-request-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .owner-request-actions {
    justify-content: flex-start;
  }

  .owner-request-detail-drawer {
    width: min(78vw, 300px);
  }
}

/* Final mobile containment pass */
#app,
.owner-app,
.customer-portal,
.trainer-app {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

.owner-shell-active .owner-bottom-nav,
.trainer-shell-active .owner-bottom-nav,
.customer-shell-active .owner-bottom-nav,
.customer-bottom-nav,
.trainer-bottom-nav {
  right: max(12px, calc(50% - 203px)) !important;
  bottom: calc(8px + env(safe-area-inset-bottom)) !important;
  left: max(12px, calc(50% - 203px)) !important;
  min-height: 42px !important;
  border: 1px solid rgba(221, 216, 207, 0.94) !important;
  border-radius: 17px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  padding: 4px !important;
  box-shadow: 0 10px 24px rgba(32, 32, 29, 0.12) !important;
  backdrop-filter: blur(16px);
}

.owner-app:not(.trainer-app) > .owner-bottom-nav:not(.customer-bottom-nav) {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.trainer-bottom-nav {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.owner-shell-active .owner-bottom-nav button,
.trainer-shell-active .owner-bottom-nav button,
.customer-shell-active .owner-bottom-nav button,
.customer-bottom-nav button,
.trainer-bottom-nav button {
  min-height: 34px !important;
  border-radius: 13px !important;
  font-size: 11px !important;
}

.owner-bottom-nav button.active {
  background: var(--ink) !important;
  color: #fff !important;
}

.trainer-shell-active .trainer-app.trainer-tab-settings {
  width: 100%;
  max-width: 100%;
  height: 100vh;
  height: 100dvh;
  height: 100svh;
  min-height: 0 !important;
  overflow: hidden;
  padding: 0 !important;
}

.trainer-shell-active .trainer-app.trainer-tab-calendar {
  width: 100%;
  max-width: 100%;
  height: 100vh;
  height: 100dvh;
  height: 100svh;
  min-height: 0 !important;
  overflow: hidden;
  padding: 0 !important;
}

.trainer-shell-active .trainer-app.trainer-tab-calendar .trainer-calendar-page {
  width: 100%;
  max-width: 100%;
  height: 100vh;
  height: 100dvh;
  height: 100svh;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding: 116px 12px calc(96px + env(safe-area-inset-bottom)) !important;
  -webkit-overflow-scrolling: touch;
}

.trainer-shell-active .trainer-app.trainer-tab-calendar .trainer-calendar-page,
.trainer-shell-active .trainer-app.trainer-tab-calendar .owner-agenda,
.trainer-shell-active .trainer-app.trainer-tab-calendar .owner-booking-list {
  min-width: 0;
  overflow-x: clip;
}

/* Customer entry screen: keep the working login controls over a quiet studio image. */
body.customer-auth-active {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  height: 100svh;
  overflow: hidden;
  background: #e9e5dd;
}

.app-shell.customer-auth-active {
  width: 100% !important;
  max-width: 100% !important;
  height: 100vh;
  height: 100dvh;
  height: 100svh;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
}

.customer-auth-active .topbar {
  display: none;
}

.customer-auth-active .workspace {
  width: 100%;
  max-width: 100%;
  height: 100%;
  overflow: hidden;
  gap: 0;
}

.customer-auth-portal {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  min-height: 100svh;
  overflow: hidden;
  background: url("/assets/somi-studio.png") center center / cover no-repeat;
  color: #fff;
  padding: max(24px, calc(24px + env(safe-area-inset-top))) clamp(16px, 5vw, 48px) max(18px, calc(18px + env(safe-area-inset-bottom)));
  isolation: isolate;
}

.customer-auth-portal::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(248, 246, 240, 0.48);
  content: "";
}

.customer-auth-content {
  display: grid;
  width: min(560px, 100%);
  margin: auto;
  gap: 14px;
  justify-items: center;
}

.customer-auth-brand {
  display: grid;
  justify-items: center;
  gap: 0;
  text-align: center;
}

.customer-auth-brand img {
  display: block;
  width: min(320px, 80vw);
  height: 170px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.customer-auth-brand p {
  margin: -8px 0 0;
  color: #4f3927;
  font-size: 14px;
  font-weight: 520;
  letter-spacing: 0.4px;
}

.customer-auth-panel {
  width: min(560px, 100%);
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 30px;
  background: rgba(101, 76, 56, 0.64);
  box-shadow: 0 20px 45px rgba(58, 43, 30, 0.18);
  padding: clamp(18px, 4vw, 28px);
  backdrop-filter: blur(5px);
}

.customer-auth-form {
  display: grid;
  gap: 13px;
}

.customer-auth-field {
  position: relative;
}

.customer-auth-field label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.customer-auth-field input {
  width: 100%;
  min-height: 54px;
  border: 1px solid rgba(53, 43, 34, 0.78);
  border-radius: 999px;
  outline: 0;
  background: rgba(255, 255, 255, 0.68);
  color: #3b2d21;
  padding: 0 18px;
}

.customer-auth-field input::placeholder {
  color: rgba(63, 52, 42, 0.68);
  opacity: 1;
}

.customer-auth-field input:focus {
  border-color: #302218;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
}

.customer-auth-password-field input {
  padding-right: 58px;
}

.customer-auth-eye {
  position: absolute;
  top: 50%;
  right: 20px;
  border: 0;
  background: transparent;
  color: #3b2d21;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2px;
  padding: 0;
  transform: translateY(-50%);
}

.customer-auth-remember {
  display: none;
}

.customer-auth-forgot {
  justify-self: end;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 13px;
  padding: 0 4px;
  text-decoration: none;
}

.customer-auth-forgot:hover,
.customer-auth-forgot:focus-visible {
  text-decoration: underline;
}

.customer-auth-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 18px;
  margin-top: 12px;
}

.customer-auth-contact-wrap {
  display: grid;
  gap: 7px;
  width: 100%;
  justify-items: center;
  color: #fff;
  font-size: 13px;
}

.customer-auth-contact,
.customer-auth-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  font-size: 14px;
  font-weight: 620;
  letter-spacing: 0.35px;
  text-transform: uppercase;
}

.customer-auth-contact {
  background: rgba(165, 168, 167, 0.94);
}

.customer-auth-submit {
  background: #74502f;
  box-shadow: 0 9px 18px rgba(56, 34, 17, 0.18);
}

.customer-auth-contact:hover,
.customer-auth-contact:focus-visible,
.customer-auth-submit:hover,
.customer-auth-submit:focus-visible {
  filter: brightness(1.05);
}

.customer-auth-branches {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  width: min(1080px, 100%);
  margin: 0 auto;
  color: #fff;
  font-size: 14px;
  font-weight: 520;
  text-align: center;
  text-shadow: 0 1px 8px rgba(38, 30, 22, 0.34);
}

.customer-contact-backdrop {
  z-index: 140;
  padding: 0 14px calc(12px + env(safe-area-inset-bottom));
  background: rgba(31, 29, 25, 0.34);
}

.customer-contact-sheet {
  width: min(430px, 100%);
  max-height: calc(100svh - 18px);
  border: 1px solid rgba(221, 216, 207, 0.95);
  border-radius: 24px 24px 18px 18px;
  background: rgba(255, 253, 249, 0.98);
  box-shadow: 0 24px 70px rgba(38, 30, 22, 0.25);
  overflow: hidden;
}

.customer-contact-sheet-handle {
  width: 42px;
  height: 4px;
  margin: 10px auto 4px;
  border-radius: 999px;
  background: rgba(117, 115, 107, 0.28);
}

.customer-contact-sheet-body {
  display: grid;
  gap: 9px;
  padding: 8px 14px 14px;
}

.customer-contact-sheet h2 {
  margin: 0 0 4px;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.2;
  font-weight: 650;
  text-align: center;
}

.customer-contact-option,
.customer-contact-cancel {
  width: 100%;
  min-height: 54px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  text-align: left;
}

.customer-contact-option {
  display: grid;
  gap: 2px;
  padding: 9px 14px;
}

.customer-contact-option span {
  font-size: 15px;
  font-weight: 650;
}

.customer-contact-option small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}

.customer-contact-cancel {
  display: grid;
  place-items: center;
  margin-top: 3px;
  background: #f6f3ed;
  color: var(--muted);
  font-size: 15px;
  font-weight: 620;
  text-align: center;
}

.settings-index-row-disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

@media (max-width: 560px) {
  .customer-auth-portal {
    padding-right: 16px;
    padding-left: 16px;
  }

  .customer-auth-brand img {
    width: 270px;
    height: 142px;
  }

  .customer-auth-brand p {
    margin-top: -5px;
    font-size: 12px;
  }

  .customer-auth-panel {
    border-radius: 25px;
    padding: 18px;
  }

  .customer-auth-field input {
    min-height: 50px;
  }

  .customer-auth-actions {
    gap: 12px;
  }

  .customer-auth-contact,
  .customer-auth-submit {
    min-height: 48px;
    font-size: 12px;
  }

  .customer-auth-branches {
    gap: 10px;
    font-size: 11px;
  }
}

@media (max-height: 700px) {
  .customer-auth-brand img {
    width: 230px;
    height: 118px;
  }

  .customer-auth-content {
    gap: 8px;
  }

  .customer-auth-panel {
    padding-top: 15px;
    padding-bottom: 15px;
  }
}

body.trainer-auth-active {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  height: 100svh;
  overflow: hidden;
  background: #e9e5dd;
}

body.owner-auth-active {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  height: 100svh;
  overflow: hidden;
  background: #e9e5dd;
}

.app-shell.owner-auth-active {
  width: 100% !important;
  max-width: 100% !important;
  height: 100vh;
  height: 100dvh;
  height: 100svh;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
}

.owner-auth-active .topbar {
  display: none;
}

.owner-auth-active .workspace {
  width: 100%;
  max-width: 100%;
  height: 100%;
  overflow: hidden;
  gap: 0;
}

.owner-auth-portal {
  background-image: url("/assets/owner-studio.png");
}

.owner-auth-portal .customer-auth-content,
.owner-auth-panel {
  width: min(720px, 100%);
}

.owner-auth-portal::before {
  background: rgba(248, 246, 240, 0.36);
}

.owner-auth-panel {
  background: rgba(101, 82, 67, 0.66);
}

.owner-auth-title {
  margin: 0 0 2px;
  color: #fff;
  font-size: 26px;
  font-weight: 650;
  line-height: 1.1;
  text-align: center;
}

.owner-auth-actions {
  grid-template-columns: minmax(0, 1fr);
  margin-top: 6px;
}

@media (max-width: 560px) {
  .owner-auth-title {
    font-size: 23px;
  }
}

.app-shell.trainer-auth-active {
  width: 100% !important;
  max-width: 100% !important;
  height: 100vh;
  height: 100dvh;
  height: 100svh;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
}

.trainer-auth-active .topbar {
  display: none;
}

.trainer-auth-active .workspace {
  width: 100%;
  max-width: 100%;
  height: 100%;
  overflow: hidden;
  gap: 0;
}

.trainer-auth-portal {
  background-image: url("/assets/trainer-studio.png");
}

.trainer-auth-panel {
  background: rgba(101, 82, 67, 0.66);
}

.trainer-auth-title {
  margin: 0 0 2px;
  color: #fff;
  font-size: 26px;
  font-weight: 650;
  line-height: 1.1;
  text-align: center;
}

.trainer-auth-actions {
  grid-template-columns: minmax(0, 1fr);
  margin-top: 6px;
}

@media (max-width: 560px) {
  .trainer-auth-title {
    font-size: 23px;
  }
}

.trainer-shell-active .trainer-app.trainer-tab-settings .settings-trainer-page {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0;
  width: 100%;
  max-width: 100%;
  height: 100vh;
  height: 100dvh;
  height: 100svh;
  min-height: 0;
  overflow: hidden;
  background: #fff;
  padding: 0 !important;
}

.trainer-shell-active .trainer-app.trainer-tab-settings .settings-main-header,
.trainer-shell-active .trainer-app.trainer-tab-settings .settings-subpage-header {
  position: sticky;
  top: 0;
  z-index: 55;
  min-height: 58px;
  border-bottom: 1px solid rgba(221, 216, 207, 0.72);
  background: rgba(255, 255, 255, 0.96);
  padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
}

.trainer-shell-active .trainer-app.trainer-tab-settings .settings-main-header {
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  padding-right: 16px;
  padding-left: 16px;
}

.trainer-shell-active .trainer-app.trainer-tab-settings .settings-main-header h1 {
  width: 100%;
  text-align: left;
}

.trainer-shell-active .trainer-app.trainer-tab-settings .settings-index-body,
.trainer-shell-active .trainer-app.trainer-tab-settings .settings-subpage-body {
  height: auto;
  min-height: 0;
  overflow-x: clip;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding: 14px 16px calc(96px + env(safe-area-inset-bottom));
  -webkit-overflow-scrolling: touch;
}

.trainer-shell-active .trainer-app.trainer-tab-settings .settings-index-body::after,
.trainer-shell-active .trainer-app.trainer-tab-settings .settings-subpage-body::after {
  content: "";
  display: block;
  height: 42px;
}

.owner-shell-active .owner-app.owner-tab-calendar,
.owner-shell-active .owner-app.owner-tab-approvals,
.owner-shell-active .owner-app.owner-tab-customers,
.owner-shell-active .owner-app.owner-tab-settings {
  width: 100%;
  max-width: 100%;
  height: 100vh;
  height: 100dvh;
  height: 100svh;
  min-height: 0 !important;
  overflow: hidden;
  padding: 0 !important;
}

.owner-shell-active .owner-app.owner-tab-calendar .owner-calendar-page,
.owner-shell-active .owner-app.owner-tab-approvals .owner-request-inbox-page,
.owner-shell-active .owner-app.owner-tab-customers .owner-customers-page-v2,
.owner-shell-active .owner-app.owner-tab-settings .owner-settings-page {
  width: 100%;
  max-width: 100%;
  height: 100vh;
  height: 100dvh;
  height: 100svh;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

.owner-shell-active .owner-app.owner-tab-settings .owner-settings-page {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0;
  background: #fff;
  overflow: hidden;
  padding: 0 !important;
}

.owner-shell-active .owner-app.owner-tab-settings .settings-main-header,
.owner-shell-active .owner-app.owner-tab-settings .settings-subpage-header {
  position: sticky;
  top: 0;
  z-index: 55;
  min-height: 58px;
  border-bottom: 1px solid rgba(221, 216, 207, 0.72);
  background: rgba(255, 255, 255, 0.96);
  padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
}

.owner-shell-active .owner-app.owner-tab-settings .settings-main-header {
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  padding-right: 16px;
  padding-left: 16px;
}

.owner-shell-active .owner-app.owner-tab-settings .settings-main-header h1 {
  width: 100%;
  text-align: left;
}

.owner-shell-active .owner-app.owner-tab-settings .settings-index-body,
.owner-shell-active .owner-app.owner-tab-settings .settings-subpage-body {
  height: auto;
  min-height: 0;
  overflow-x: clip;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding: 14px 16px calc(96px + env(safe-area-inset-bottom));
  -webkit-overflow-scrolling: touch;
}

.owner-shell-active .owner-app.owner-tab-settings .settings-index-body::after,
.owner-shell-active .owner-app.owner-tab-settings .settings-subpage-body::after {
  content: "";
  display: block;
  height: 42px;
}

.owner-shell-active .owner-app.owner-tab-calendar .owner-calendar-page {
  padding: 116px 12px calc(96px + env(safe-area-inset-bottom)) !important;
}

.owner-shell-active .owner-app.owner-tab-approvals .owner-request-content {
  min-height: calc(100svh + 42px);
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
}

.owner-shell-active .owner-app.owner-tab-approvals .owner-trial-link-page {
  width: 100%;
  max-width: 100%;
  height: 100vh;
  height: 100dvh;
  height: 100svh;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

.owner-shell-active .owner-app.owner-tab-customers .owner-customers-page-v2 {
  min-height: 0;
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
}

.owner-shell-active .owner-app.owner-tab-approvals .owner-request-content::after {
  content: "";
  display: block;
  height: 42px;
}

.owner-shell-active .owner-app.owner-tab-calendar .owner-calendar-page,
.owner-shell-active .owner-app.owner-tab-calendar .owner-agenda,
.owner-shell-active .owner-app.owner-tab-approvals .owner-request-content,
.owner-shell-active .owner-app.owner-tab-approvals .owner-request-list,
.owner-shell-active .owner-app.owner-tab-customers .owner-customer-list {
  min-width: 0;
  overflow-x: clip;
}

.customer-bottom-nav::before {
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 8px) / 3);
  border-radius: 13px;
}

.owner-customers-page-v2 .owner-chip-row {
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  padding: 0 0 2px;
  scrollbar-width: none;
}

.owner-customers-page-v2 .owner-chip-row::-webkit-scrollbar {
  display: none;
}

.owner-customers-page-v2 .owner-chip-row button {
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
}

.owner-customers-page-v2 .owner-customer-list {
  align-content: start;
  gap: 0;
  padding-bottom: 4px;
}

.owner-shell-active .owner-app.owner-tab-customers .owner-customer-list {
  min-height: calc(100svh - 188px);
  padding-bottom: calc(116px + env(safe-area-inset-bottom));
}

.owner-shell-active .owner-app.owner-tab-customers .owner-customer-list::after {
  content: "";
  display: block;
  height: 72px;
}

.owner-contact-row .pill {
  max-width: 86px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-request-inbox-page .owner-request-content {
  padding-right: 16px;
  padding-left: 16px;
}

.owner-request-card .button {
  white-space: nowrap;
}

.owner-shell-active .owner-customers-page-v2 .owner-customer-search-large {
  min-height: 36px !important;
  border-radius: 999px !important;
  padding: 0 14px !important;
  font-size: 16px !important;
}

.owner-shell-active .owner-customers-page-v2 .owner-contact-row {
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
  min-height: 34px !important;
  max-height: 38px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 3px 2px !important;
}

.owner-shell-active .owner-customers-page-v2 .owner-contact-avatar {
  display: none !important;
}

.owner-shell-active .owner-customers-page-v2 .owner-contact-name strong {
  color: var(--ink) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
}

.owner-shell-active .owner-customers-page-v2 .owner-contact-row .pill {
  min-height: 21px;
  padding: 0 8px;
  font-size: 10.5px;
}