/* SPOMOTIVE commercial UI system — consumer booking + operations console */
:root {
  --ink: #171a1d;
  --navy: #101820;
  --navy-2: #1b2731;
  --paper: #ffffff;
  --base: #f4f6f7;
  --line: #e2e7ea;
  --muted: #5f6b76;
  --yellow: #ffd633;
  --yellow-deep: #d4a800;
  --mint: #e4f5ee;
  --cyan: #e4f4f9;
  --cyan-ink: #146d88;
  --green: #087f5b;
  --coral: #c94338;
  --surface-subtle: #f7f9fa;
  --shadow: 0 18px 48px rgba(16, 24, 32, .10);
  --shadow-sm: 0 1px 2px rgba(16, 24, 32, .05), 0 8px 24px rgba(16, 24, 32, .04);
  --radius: 16px;
  --radius-sm: 10px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --control-sm: 44px;
  --control-md: 48px;
  --radius-control: 10px;
  --radius-card: 16px;
}

html { scroll-behavior: smooth; background: var(--base); }
body {
  min-width: 0;
  color: var(--ink);
  background: var(--base);
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Segoe UI", sans-serif;
  letter-spacing: -.012em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, strong { letter-spacing: -.032em; }
button, input, select, textarea { letter-spacing: -.012em; }
button:not(.slot):not(.ops-event) { min-height: 44px; }
button:disabled { opacity: .55; }
:focus-visible { outline: 3px solid rgba(20, 109, 136, .28); outline-offset: 3px; }

.skip-link {
  position: fixed;
  z-index: 200;
  top: 10px;
  left: 10px;
  padding: 10px 14px;
  color: #111820;
  border-radius: 8px;
  background: var(--yellow);
  font-weight: 900;
  transform: translateY(-160%);
  transition: transform .15s ease;
}
.skip-link:focus { transform: translateY(0); }

.shell { width: min(1320px, calc(100% - 32px)); margin: 0 auto 56px; }
.topbar {
  top: 10px;
  min-height: 100px;
  margin-top: 10px;
  padding: 13px 24px 12px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 18px;
  background: linear-gradient(135deg, #0e151c 0%, #121c25 100%);
  box-shadow: 0 14px 36px rgba(13, 21, 28, .16);
}
.topline { min-height: 34px; }
.brand { gap: 16px; min-width: 250px; }
.brand img { width: 110px; height: 44px; }
.product-label { color: #8f9da7; font-size: 11px; letter-spacing: .1em; }
.header-tools { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 0; }
.utility { gap: 7px; color: #aeb9c1; font-size: 12px; }
.utility > span { color: #52616c; }
.utility a,
.utility button { min-height: 32px !important; padding: 6px 8px; border-radius: 7px; }
.utility a:hover,
.utility button:hover { color: #fff; background: rgba(255,255,255,.07); }
.utility strong { color: var(--yellow); }
.navline { margin-top: 7px; }
.main-nav { gap: 4px; }
.main-nav button,
.main-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px !important;
  padding: 8px 13px;
  border: 0;
  border-radius: 9px;
  color: #b9c4ca;
  background: transparent;
  font-size: 14px;
  font-weight: 850;
  text-decoration: none;
}
.main-nav button:hover,
.main-nav a:hover { color: #fff; background: rgba(255,255,255,.06); }
.main-nav button.active { color: #141c22; background: var(--yellow); box-shadow: 0 5px 16px rgba(255,214,51,.18); }
.language-switch {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  background: rgba(255,255,255,.055);
}
.language-switch button {
  min-height: 30px !important;
  padding: 5px 9px;
  border: 0;
  border-radius: 7px;
  color: #9facb5;
  background: transparent;
  font-size: 10px;
  font-weight: 900;
}
.language-switch button:hover { color: #fff; }
.language-switch button.active { color: #141c22; background: var(--yellow); }
.status-pill { padding: 7px 11px; font-size: 11px; }
main { padding-top: 16px; }

.hero {
  min-height: 220px;
  grid-template-columns: minmax(0, 1.45fr) minmax(330px, .55fr);
  border: 0;
  border-radius: 22px;
  background: linear-gradient(135deg, #0f171e 0%, #17232c 100%);
  box-shadow: var(--shadow-sm);
}
.hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 260px;
  height: 260px;
  left: -120px;
  bottom: -190px;
  border-radius: 50%;
  background: rgba(255,214,51,.22);
  filter: blur(12px);
}
.hero::after { display: none; }
.hero-copy { padding: 28px 34px; }
.eyebrow { padding: 6px 10px; border-color: rgba(255,214,51,.36); font-size: 10px; letter-spacing: .1em; }
.hero h1 { margin: 14px 0 9px; font-size: clamp(31px, 3.4vw, 44px); line-height: 1.08; }
.hero p { max-width: 660px; color: #c4cdd3; font-size: 14px; line-height: 1.65; }
.hero-points { margin-top: 16px; }
.hero-points span { padding: 6px 9px; color: #c7d1d6; border: 1px solid rgba(255,255,255,.06); border-radius: 7px; background: rgba(255,255,255,.055); font-size: 11px; }
.hero-image { min-height: 220px; background-position: center 48%; }
.lesson-hero .hero-image { background-position: center 42%; filter: saturate(.86) contrast(1.04); }

.booking-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.booking-steps.rental { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.booking-steps li {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 10px 14px;
  color: #8a949c;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255,255,255,.72);
}
.booking-steps li > span {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  place-items: center;
  color: #74808a;
  border: 1px solid #d8dfe2;
  border-radius: 50%;
  background: #fff;
  font-size: 12px;
  font-weight: 900;
}
.booking-steps li strong { min-width: 0; font-size: 13px; overflow-wrap: anywhere; }
.booking-steps li.done { color: #496159; background: #f4faf7; }
.booking-steps li.done > span { color: #fff; border-color: var(--green); background: var(--green); }
.booking-steps li.current { color: #171a1d; border-color: #e2c14a; background: #fffdf3; box-shadow: inset 0 0 0 1px rgba(255,214,51,.3); }
.booking-steps li.current > span { color: #171a1d; border-color: var(--yellow); background: var(--yellow); }

.section { margin-top: 16px; }
.panel,
.console-card,
.settings-card,
.admin-card,
.ops-panel,
.admin-table-wrap { border-color: var(--line); box-shadow: var(--shadow-sm); }
.panel { overflow: hidden; border-radius: 18px; }
.panel-head { padding: 24px 24px 0; }
.panel-head h2 { margin-top: 3px; font-size: 23px; }
.panel-head p { margin-top: 6px; font-size: 13px; }
.panel-body { padding: 22px 24px 24px; }
.step-kicker { color: #7b6108; font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.field { gap: 7px; }
.field label,
.label { color: #4f5a63; font-size: 12px; }
input,
select,
textarea { min-height: 48px; border-color: #d5dde1; border-radius: 10px; padding: 11px 13px; background: #fff; }
input:hover,
select:hover,
textarea:hover { border-color: #aeb9bf; }
input:focus,
select:focus,
textarea:focus { border-color: var(--cyan-ink); box-shadow: 0 0 0 4px rgba(20,109,136,.1); }

.court-product-grid { gap: 12px; }
.court-product {
  grid-template-columns: 124px minmax(0, 1fr) auto;
  gap: 18px;
  min-height: 160px;
  padding: 12px 18px 12px 12px;
  border-color: var(--line);
  border-radius: 16px;
  box-shadow: 0 1px 1px rgba(16,24,32,.02);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.court-product:hover { border-color: #aab5bb; box-shadow: 0 12px 30px rgba(16,24,32,.08); transform: translateY(-1px); }
.court-product.active { border: 2px solid #18232c; background: #fff; box-shadow: 0 12px 28px rgba(16,24,32,.09); }
.court-product-visual {
  position: relative;
  align-self: stretch;
  min-height: 132px;
  overflow: hidden;
  border-radius: 12px;
  background-color: #17212a;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.court-alpha .court-product-visual {
  background-image: linear-gradient(rgba(13,21,28,.04), rgba(13,21,28,.42)), url("./court-alpha.jpg");
  background-position: center 42%;
}
.court-private .court-product-visual {
  background-image: linear-gradient(rgba(13,21,28,.02), rgba(13,21,28,.38)), url("./court-private.jpg");
  background-position: center;
}
.court-product-visual > span { position: absolute; left: 10px; bottom: 9px; color: #fff; font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.court-product-copy { min-width: 0; text-align: left; }
.court-product .instant { padding: 5px 8px; color: #12664c; background: #e8f6ef; }
.selected-mark { display: none; margin-left: 6px; color: #1b2730; font-size: 10px; font-weight: 900; }
.court-product.active .selected-mark { display: inline-flex; }
.court-product h3 { margin: 9px 0 4px; font-size: 21px; }
.court-product p { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; color: #66727b; font-size: 12px; line-height: 1.52; }
.court-product p strong { color: #303b43; }
.court-product-price strong { font-size: 20px; }
.court-product-price span { font-size: 10px; }
.booking-caution { display: flex; gap: 10px; margin-top: 14px; padding: 13px 15px; border: 1px solid #f0dda0; border-left: 4px solid var(--yellow-deep); border-radius: 10px; background: #fffaf0; }
.booking-caution b { flex: 0 0 auto; }
.booking-caution span { color: #6f5b1d; }
.booking-step-card { scroll-margin-top: 92px; }
.booking-step-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid #e8edef;
}
.booking-step-actions > div { margin-right: auto; }
.booking-step-actions span,
.selected-court-strip span { display: block; color: #748089; font-size: 10px; font-weight: 900; }
.booking-step-actions strong,
.selected-court-strip strong { display: block; margin-top: 4px; color: #1b252d; font-size: 17px; }
.booking-step-actions .primary { width: auto; min-width: 150px; }
.selected-court-strip {
  display: grid;
  width: 100%;
  box-sizing: border-box;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  justify-items: start;
  gap: 12px;
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid #dce4e7;
  border-radius: 13px;
  background: #f8faf9;
}
.selected-court-strip strong { margin-top: 0; }

.select-row { align-items: end; margin-bottom: 14px; }
.date-field { min-width: 210px; }
.rental-week-picker { margin-bottom: 16px; padding: 14px; border: 1px solid #dce4e7; border-radius: 13px; background: #f8faf9; }
.rental-week-toolbar { display: grid; grid-template-columns: 42px minmax(0,1fr) 42px; align-items: center; gap: 10px; }
.rental-week-toolbar > strong { overflow: hidden; color: #26323a; text-align: center; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.week-nav-button { display: grid; width: 42px; min-height: 42px !important; place-items: center; padding: 0; border: 1px solid #ced8dc; border-radius: 9px; color: #26323a; background: #fff; font-size: 18px; font-weight: 900; }
.week-nav-button:hover:not(:disabled) { border-color: #819299; background: #f2f6f6; }
.week-nav-button:disabled { color: #aeb7bc; background: #eef1f2; }
.court-switcher button { min-width: 176px; min-height: 52px !important; padding: 10px 13px; border-radius: 11px; }
.court-switcher button.active { box-shadow: 0 7px 18px rgba(16,24,32,.12); }
.availability-status {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  margin-bottom: 10px;
  padding: 10px 13px;
  color: #7a4d45;
  border: 1px solid #f0d7d3;
  border-radius: 11px;
  background: #fff8f7;
}
.availability-status.available { color: #17664f; border-color: #cfe8df; background: #f1faf6; }
.availability-status > span { padding: 5px 7px; border-radius: 6px; background: rgba(255,255,255,.72); font-size: 10px; font-weight: 900; }
.availability-status strong { font-size: 13px; }
.availability-status small { margin-left: auto; color: #69757e; font-size: 11px; }
.rental-load-feedback {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid #dce4e7;
  border-radius: 12px;
  background: #f8faf9;
}
.rental-load-feedback.error { color: #7f332c; border-color: #edc6c1; background: #fff7f6; }
.rental-load-feedback p { margin: 3px 0 0; color: #65727b; font-size: 11px; line-height: 1.45; }
.rental-load-feedback button { width: auto; min-width: 108px; flex: 0 0 auto; }
.rental-load-feedback.loading-state { justify-content: flex-start; }
.rental-data-empty { padding: 24px 18px; color: #68757d; border: 1px dashed #d4dde0; border-radius: 12px; background: #f8fafb; text-align: center; font-size: 12px; }
.rental-preview-actions { display: grid; gap: 14px; padding-top: 4px; }
.rental-preview-actions p { margin: 0; color: #66737c; font-size: 12px; line-height: 1.55; }
.rental-preview-actions > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rental-preview-actions a { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: 9px 12px; border-radius: 10px; font-size: 11px; font-weight: 900; text-align: center; }
.rental-preview-actions a.primary { color: #171d22; }
.rental-preview-actions a.secondary { color: #fff; }
.mobile-rental-schedule { display: none; }
.schedule-layout { grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; }
.schedule-layout > *,
.timeline-column { min-width: 0; }
.weekly-timeline-wrap {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
  scrollbar-color: #aab5ba #eef2f3;
  scrollbar-width: thin;
}
.weekly-timeline-grid { min-width: 1542px; }
.weekly-timeline-head,
.weekly-day-row { display: grid; grid-template-columns: 150px repeat(24, 58px); }
.weekly-timeline-head {
  position: sticky;
  z-index: 8;
  top: 0;
  color: #66737c;
  border-bottom: 1px solid #dce3e5;
  background: #f6f8f9;
  font-size: 11px;
  font-weight: 850;
}
.weekly-timeline-head > div { display: grid; height: 42px; place-items: center; border-right: 1px solid #e6eaeb; }
.weekly-timeline-head > div:first-child { position: sticky; z-index: 10; left: 0; justify-items: start; padding-left: 14px; background: #f6f8f9; box-shadow: 8px 0 16px rgba(16,24,32,.05); }
.weekly-day-row { min-height: 64px; border-bottom: 1px solid #e6eaeb; }
.weekly-day-row:last-child { border-bottom: 0; }
.weekly-day-row.selected-date { box-shadow: inset 4px 0 0 var(--yellow-deep); }
.weekly-day-row.has-selection .weekly-date-cell { background: #fffaf0; }
.weekly-day-row.has-selection .weekly-date-cell span { color: #6b5408; }
.weekly-date-cell {
  position: sticky;
  z-index: 6;
  left: 0;
  display: grid;
  grid-template-columns: 30px minmax(0,1fr);
  align-content: center;
  align-items: center;
  gap: 2px 8px;
  padding: 9px 13px;
  border-right: 1px solid #e0e6e8;
  background: #fff;
  box-shadow: 8px 0 16px rgba(16,24,32,.05);
}
.weekly-date-cell strong { grid-row: 1 / span 2; display: grid; width: 28px; height: 28px; place-items: center; border-radius: 8px; color: #26323a; background: #eef2f3; font-size: 12px; }
.weekly-date-cell span { color: #1c2730; font-size: 13px; font-weight: 900; }
.weekly-date-cell small { color: #8b6b00; font-size: 9px; font-weight: 900; }
.weekly-day-row.today .weekly-date-cell { background: #fffdf3; }
.weekly-day-row.today .weekly-date-cell strong { color: #171d22; background: var(--yellow); }
.weekly-day-row.past .weekly-date-cell { color: #9ba5aa; background: #f4f6f6; }
.weekly-day-row.past .weekly-date-cell strong,
.weekly-day-row.past .weekly-date-cell span { color: #9ba5aa; }
.weekly-day-row .slot { min-height: 64px; }
.slot { display: flex; min-height: 74px; align-items: center; justify-content: center; padding: 4px; border-right-color: #edf1f2; }
.slot-time { display: none; }
.slot-price { font-size: 9px; font-weight: 900; }
.slot.closed { color: #9ca6ac; background: #f2f4f5; }
.slot.open { color: #155f78; background: #e3f4f9; }
.slot.open:hover { background: #caecf6; }
.slot.blocked { background: #53616c; }
.slot.selected { color: #141c22; background: var(--yellow); box-shadow: inset 0 0 0 2px #bd9410; }
.legend { color: #65727b; font-size: 11px; }

.summary-card {
  top: 120px;
  padding: 20px;
  color: var(--ink);
  border: 1px solid #dbe2e5;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(16,24,32,.11);
}
.summary-heading { margin: -20px -20px 12px; padding: 18px 20px 16px; color: #fff; border-radius: 15px 15px 0 0; background: linear-gradient(135deg, #111a21, #1e2b35); }
.summary-heading > span { color: var(--yellow); font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.summary-card h3 { margin: 4px 0; font-size: 20px; }
.summary-heading p { margin: 0; color: #b8c4ca; }
.summary-line { border-top-color: #edf0f1; font-size: 12px; }
.summary-line span { color: #67737c; }
.summary-line strong { color: #202a31; }
.summary-line.total { align-items: center; margin: 7px -8px 14px; padding: 13px 10px; border: 0; border-radius: 10px; background: #fff8d9; }
.summary-line.total span { color: #66530c; font-weight: 900; }
.summary-line.total strong { color: #171a1d; font-size: 22px; }
.summary-empty-selection { margin: 4px 0 12px; padding: 13px; color: #69757d; border: 1px dashed #d4dde0; border-radius: 10px; background: #f8fafb; font-size: 11px; line-height: 1.55; }
.rental-selection-list { display: grid; gap: 7px; margin: 4px 0 12px; }
.summary-selection-list { max-height: 236px; overflow-y: auto; padding-right: 3px; scrollbar-width: thin; }
.rental-selection-item { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 10px 11px; border: 1px solid #e1e7e9; border-radius: 10px; background: #f8fafb; }
.summary-selection-list .rental-selection-item { grid-template-columns: minmax(0,1fr) auto 28px; }
.rental-selection-item strong,
.rental-selection-item small { display: block; }
.rental-selection-item strong { color: #222c33; font-size: 12px; }
.rental-selection-item small { margin-top: 3px; color: #6c7880; font-size: 10px; }
.rental-selection-item > span { color: #28343b; font-size: 11px; font-weight: 900; white-space: nowrap; }
.selection-remove { display: grid; width: 28px; min-height: 28px !important; place-items: center; padding: 0; color: #6b747b; border: 1px solid #d5dde0; border-radius: 8px; background: #fff; font-size: 16px; font-weight: 900; }
.selection-remove:hover { color: #9b3e35; border-color: #e4b8b2; background: #fff5f4; }
.clear-selection-button { width: 100%; min-height: 34px !important; margin: -4px 0 12px; padding: 6px 9px; color: #59656d; border: 0; background: transparent; text-decoration: underline; text-underline-offset: 3px; font-size: 10px; font-weight: 800; }
.clear-selection-button:hover { color: #9b3e35; }
.summary-card form { display: grid; gap: 13px; padding-top: 15px; border-top: 1px solid #edf0f1; }
.summary-card .field { margin-top: 0; }
.summary-card label,
.summary-card .label { color: #4f5a63; font-size: 11px; }
.summary-card input,
.summary-card select,
.summary-card textarea { color: var(--ink); background: #fff; }
.addon-list { gap: 8px; }
.addon-row { padding: 10px; color: var(--ink); border-color: #e0e6e8; border-radius: 9px; background: #f8fafb; }
.addon-row strong { color: #27323a; }
.addon-row small { color: #69757d; font-size: 10px; }
.quantity-stepper span { color: #253039; }
.mini-button { min-width: 38px; min-height: 38px !important; border-radius: 9px; }
.summary-card .mini-button { color: #1d2931; border-color: #d6dee1; background: #fff; }
.summary-card .mini-button:hover { background: #f2f5f6; }
.rental-consent-status {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  color: #735c14;
  border: 1px solid #eadca6;
  border-radius: 10px;
  background: #fffaf0;
}
.rental-consent-status > span {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #b1890d;
  font-size: 12px;
  font-weight: 900;
}
.rental-consent-status strong,
.rental-consent-status small { display: block; }
.rental-consent-status strong { color: #4f4217; font-size: 12px; }
.rental-consent-status small { margin-top: 3px; color: #7b6a32; font-size: 10px; line-height: 1.45; }
.rental-consent-status.accepted { color: #17664f; border-color: #cde7dd; background: #f0faf6; }
.rental-consent-status.accepted > span { background: var(--green); }
.rental-consent-status.accepted strong { color: #155942; }
.rental-consent-status.accepted small { color: #4f7568; }
.party-row { grid-template-columns: minmax(0, 1fr) 94px 38px; gap: 7px; }
.primary,
.secondary,
.ghost { min-height: 46px; border-radius: 10px; }
.primary { background: var(--yellow); box-shadow: 0 7px 18px rgba(255,214,51,.18); }
.primary:hover { background: #ffe066; }
.secondary { background: #17222b; }
.secondary:hover { background: #25343f; }
.ghost { border-color: #d3dce0; }
.booking-policy { margin-top: 14px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow-sm); }
.booking-policy summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 60px; padding: 15px 18px; cursor: pointer; list-style: none; }
.booking-policy summary::-webkit-details-marker { display: none; }
.booking-policy summary::after { content: "+"; display: grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #f1f4f5; font-size: 18px; }
.booking-policy[open] summary::after { content: "−"; }
.booking-policy summary span { font-weight: 900; }
.booking-policy summary strong { margin-left: auto; color: #6a757d; font-size: 11px; }
.booking-policy .policy-grid { margin: 0; padding: 0 18px 18px; }
.policy-item { border: 1px solid #e7ecee; border-radius: 10px; background: #f8faf9; }
.mobile-booking-bar { display: none; }

.lesson-date-row { display: flex; align-items: end; gap: 14px; margin: 0 0 14px; padding: 14px; border: 1px solid #e2e8ea; border-radius: 12px; background: #f8fafb; }
.lesson-date-row .field { min-width: 220px; }
.lesson-date-row > span { padding-bottom: 13px; color: #69757d; font-size: 11px; }
.lesson-schedule-panel .filter-tabs { margin-top: 0; }
.occurrence { grid-template-columns: 92px minmax(0,1fr) auto; min-height: 84px; padding: 15px 16px; border-radius: 13px; transition: border-color .15s ease, box-shadow .15s ease; }
.occurrence:hover { border-color: #b7c2c7; box-shadow: 0 10px 24px rgba(16,24,32,.06); }
.occurrence-time { display: flex; flex-direction: column; justify-content: center; padding-right: 14px; border-right: 1px solid #e5eaec; }
.occurrence-time > span { font-size: 17px; font-weight: 900; }
.occurrence-time small { margin-top: 4px; color: #75818a; font-size: 10px; }
.occurrence-main strong { font-size: 15px; }
.occurrence-main span { margin-top: 5px; font-size: 11px; }
.occurrence-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.occurrence-actions .secondary { min-width: 78px; }
.lesson-grid { gap: 12px; }
.lesson-card { min-height: 218px; border-radius: 14px; box-shadow: var(--shadow-sm); }
.lesson-card::after { opacity: .52; }
.empty { border-color: #d7dfe2; border-radius: 12px; background: #fafbfb; }
.footnote { color: #5e6a73; }

/* Operations console */
body.admin-mode { background: #eef1f3; }
body.admin-mode .shell { width: 100%; margin: 0; }
body.admin-mode .topbar {
  top: 0;
  min-height: 84px;
  margin: 0;
  padding: 9px 24px 8px;
  border: 0;
  border-radius: 0;
  box-shadow: 0 1px 0 rgba(255,255,255,.08);
}
body.admin-mode .brand img { width: 100px; height: 38px; }
body.admin-mode .navline { margin-top: 3px; }
body.admin-mode .main-nav button,
body.admin-mode .main-nav a { min-height: 34px !important; padding: 6px 11px; font-size: 12px; }
body.admin-mode .status-pill { padding: 5px 9px; }
.admin-workspace {
  grid-template-columns: 244px minmax(0,1fr);
  min-height: calc(100vh - 84px);
  margin: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: #f2f4f5;
  box-shadow: none;
}
.admin-sidebar {
  position: sticky;
  top: 84px;
  height: calc(100vh - 84px);
  min-height: 0;
  padding: 18px 14px;
  background: #111920;
}
.admin-sidebar-head { padding: 4px 10px 17px; }
.admin-sidebar-head span { color: #7f909b; }
.admin-menu { gap: 4px; }
.admin-menu button { min-height: 44px !important; gap: 11px; padding: 9px 11px; border-radius: 9px; color: #aebbc3; font-size: 12px; }
.admin-menu button::before { display: none; }
.admin-menu button .ui-icon { width: 18px; height: 18px; flex: 0 0 auto; opacity: .82; }
.admin-menu button.active { color: #171d22; background: var(--yellow); box-shadow: 0 7px 18px rgba(255,214,51,.12); }
.admin-menu button.active .ui-icon { opacity: 1; }
.admin-menu-group { position: relative; min-width: 0; }
.admin-menu-group > .admin-menu-disclosure { width: 100%; }
.admin-menu-caret {
  margin-left: auto;
  color: currentColor;
  font-size: 15px;
  font-style: normal;
  line-height: 1;
  transition: transform .18s ease;
}
.admin-menu-group.open > .admin-menu-disclosure:not(.active) {
  color: #fff;
  background: rgba(255,255,255,.08);
}
.admin-menu-group.open .admin-menu-caret { transform: rotate(180deg); }
.admin-openplay-menu {
  position: fixed;
  z-index: 76;
  display: grid;
  gap: 3px;
  max-height: calc(100svh - 20px);
  padding: 9px;
  overflow-y: auto;
  color: #dce4e8;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 12px;
  background: #162029;
  box-shadow: 0 20px 46px rgba(7,13,18,.32);
}
.admin-openplay-menu[hidden] { display: none !important; }
.admin-openplay-menu-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px 10px;
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.admin-openplay-menu-head span {
  color: var(--yellow);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .12em;
}
.admin-openplay-menu-head strong { color: #fff; font-size: 12px; }
.admin-openplay-menu > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 9px 11px;
  color: #c4cfd5;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 850;
  text-decoration: none;
}
.admin-openplay-menu > a i { color: #82939d; font-size: 12px; font-style: normal; }
.admin-openplay-menu > a:hover,
.admin-openplay-menu > a:focus-visible {
  color: #17212a;
  outline: 0;
  background: var(--yellow);
}
.admin-openplay-menu > a:hover i,
.admin-openplay-menu > a:focus-visible i { color: #17212a; }
.admin-sidebar-foot { color: #82919a; }
.admin-main { min-width: 0; }
.admin-commandbar {
  position: sticky;
  top: 84px;
  min-height: 64px;
  padding: 10px 22px;
  border-bottom-color: #dbe1e4;
  background: rgba(255,255,255,.97);
  box-shadow: 0 5px 18px rgba(16,24,32,.035);
}
.location-control { min-width: 230px; }
.location-control select,
.command-search input,
.command-date { min-height: 42px; }
.command-search { max-width: 520px; }
.quick-button { min-height: 42px !important; border-radius: 9px; }
.admin-content { min-width: 0; padding: 24px 26px 38px; }
.admin-page-title { margin-bottom: 16px; }
.admin-page-title h1 { font-size: 25px; }
.admin-page-title p { color: #5f6c75; font-size: 12px; }
.commercial-kpi-grid { gap: 12px; margin-bottom: 16px; }
.commercial-kpi { min-height: 108px; padding: 16px; border-top: 3px solid #dfe5e7; border-radius: 12px; box-shadow: var(--shadow-sm); }
.commercial-kpi::after { display: none; }
.commercial-kpi.attention { border-top-color: var(--yellow-deep); background: #fffdf6; }
.commercial-kpi span { color: #5f6c75; font-size: 11px; }
.commercial-kpi strong { font-size: 25px; }
.commercial-kpi small { color: #66737c; font-size: 10px; }
.financial-ledger-card .list-toolbar {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr)) auto;
  align-items: end;
}
.financial-ledger-card .list-toolbar .field { min-width: 0; }
.financial-ledger-card .list-toolbar button { min-height: 42px; }
.openplay-report-filter {
  display: grid;
  grid-template-columns: minmax(150px,.8fr) repeat(2,minmax(160px,1fr)) auto;
  align-items: end;
}
.openplay-report-filter .field { min-width: 0; }
.openplay-report-filter input,
.openplay-report-filter select { width: 100%; min-width: 0; }
.openplay-report-filter button { min-height: 42px; }
.financial-ledger-kpis { margin: 14px 0 16px; }
.financial-ledger-table .admin-table { min-width: 940px; }
.financial-ledger-table th:last-child,
.financial-ledger-table td:last-child { text-align: right; }
.financial-ledger-table .ledger-refund strong { color: #c33b31; }
.console-card,
.settings-card,
.admin-card,
.ops-panel,
.admin-table-wrap { border-radius: 13px; background: #fff; }
.console-card-head { padding: 16px 18px 13px; }
.console-card-head p,
.settings-card > p,
.admin-card > p { color: #5f6d76; font-size: 11px; }
.action-item { min-height: 58px; border-radius: 10px; }
.action-item span { color: #5f6d76; font-size: 10px; }
.action-item button,
.table-actions button { min-height: 36px !important; font-size: 10px; }
.admin-table th { color: #59666f; font-size: 10px; }
.admin-table td { font-size: 12px; }
.table-sub { color: #65717a; font-size: 10px; }
.status-chip { font-size: 10px; }
.ops-toolbar { padding: 16px 18px 12px; }
.ops-toolbar h3 { font-size: 18px; }
.ops-summary span { color: #46545d; }
.ops-scroll { width: auto; max-width: calc(100% - 36px); height: min(610px, calc(100vh - 300px)); max-height: none; min-height: 420px; }
.ops-board { position: relative; }
.ops-time-axis,
.ops-court-track { height: 936px; }
.ops-court-track { background: repeating-linear-gradient(to bottom, #fff 0, #fff 38px, #edf1f2 39px); }
.ops-time-label { color: #5d6a73; font-size: 10px; }
.ops-now-line { position: absolute; z-index: 6; right: 0; left: 64px; height: 2px; background: #df4d3f; pointer-events: none; }
.ops-now-line::before { content: ""; position: absolute; left: -4px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: #df4d3f; }
.ops-now-line span { position: absolute; right: 7px; top: -20px; padding: 3px 6px; color: #fff; border-radius: 5px; background: #df4d3f; font-size: 9px; font-weight: 900; }
.ops-event { min-height: 28px; border-radius: 8px; }
.operator-drawer { width: min(640px, 100%); padding: 24px; }
.drawer-section { border-radius: 12px; }
.drawer-actions { position: sticky; bottom: -22px; z-index: 4; margin: 16px -22px -22px; padding: 12px 22px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid #dce3e6; background: rgba(255,255,255,.96); backdrop-filter: blur(14px); }
.modal { border-radius: 16px; }
.rental-terms-modal { width: min(720px, 100%); }
.terms-booking-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 8px;
  margin: 18px 0;
}
.terms-booking-summary > div { padding: 12px; border: 1px solid #e1e7e9; border-radius: 10px; background: #f7f9fa; }
.terms-booking-summary span,
.terms-booking-summary strong { display: block; }
.terms-booking-summary span { color: #76818a; font-size: 10px; font-weight: 900; }
.terms-booking-summary strong { margin-top: 4px; color: #1f2930; font-size: 13px; }
.terms-selection-list { max-height: 190px; overflow-y: auto; margin-bottom: 14px; padding: 10px; border: 1px solid #e2e8ea; border-radius: 12px; background: #f8fafb; scrollbar-width: thin; }
.terms-selection-list .rental-selection-item { background: #fff; }
.rental-terms-list { display: grid; gap: 8px; }
.rental-terms-list section { display: grid; grid-template-columns: 32px minmax(0,1fr); gap: 10px; padding: 12px; border: 1px solid #e4e9eb; border-radius: 10px; background: #fff; }
.rental-terms-list section > span { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 8px; color: #665008; background: #fff0ae; font-size: 10px; font-weight: 900; }
.rental-terms-list h3 { margin: 0; color: #202a31; font-size: 14px; }
.rental-terms-list p { margin: 4px 0 0; color: #5f6b73; font-size: 12px; line-height: 1.58; }
.terms-agreement { margin-top: 14px; padding: 13px 14px; color: #203029; border: 1px solid #cce4d9; border-radius: 10px; background: #f0faf5; font-size: 12px; font-weight: 900; }
.toast { bottom: 28px; border-radius: 10px; }

@media (max-width: 1080px) {
  .lesson-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .court-product { grid-template-columns: 100px minmax(0,1fr); }
  .court-product-price { grid-column: 2; text-align: left; }
  .schedule-layout { grid-template-columns: minmax(0,1fr) 330px; }
  .commercial-kpi-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .console-grid { grid-template-columns: minmax(0,1fr); }
  .console-grid > * { min-width: 0; }
  .financial-ledger-card .list-toolbar { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .financial-ledger-card .list-toolbar button { width: 100%; }
}

@media (max-width: 860px) {
  body { overflow-x: hidden; }
  .shell { width: min(100% - 16px, 1320px); margin-bottom: 30px; }
  .topbar { top: 6px; min-height: 104px; margin-top: 6px; padding: 11px 12px 10px; border-radius: 15px; }
  .topline { align-items: center; }
  .brand { min-width: 0; gap: 7px; }
  .brand img { width: 86px; height: 36px; }
  .product-label { display: none; }
  .header-tools { gap: 5px; }
  .utility { min-width: 0; gap: 3px; font-size: 10px; }
  .utility > span,
  .utility a { display: none; }
  .utility strong { max-width: 82px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .utility strong ~ button:not([data-action="open-dependents"]) { display: none; }
  .utility a,
  .utility button { min-height: 34px !important; padding: 5px 7px; }
  .navline { margin-top: 8px; }
  .language-switch { padding: 2px; }
  .financial-ledger-card .list-toolbar { grid-template-columns: minmax(0,1fr); }
  .openplay-report-filter { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .openplay-report-filter .field:first-child,
  .openplay-report-filter button { grid-column: 1 / -1; }
  .openplay-report-filter button { width: 100%; }
  .financial-ledger-kpis { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); overflow: visible; }
  .financial-ledger-kpis .commercial-kpi { min-width: 0; }
  .language-switch button { min-height: 32px !important; padding: 4px 7px; font-size: 9px; }
  .main-nav { width: 100%; gap: 3px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .main-nav::-webkit-scrollbar { display: none; }
  .main-nav button,
  .main-nav a { flex: 1 1 0; min-width: 0; min-height: 40px !important; padding: 7px 4px; font-size: 10px; white-space: nowrap; }
  .status-pill { display: none; }
  main { padding-top: 10px; }

  .hero { min-height: 184px; grid-template-columns: 1fr; border-radius: 16px; }
  .hero-copy { padding: 22px 20px; }
  .hero h1 { margin-top: 12px; font-size: 31px; }
  .hero p { font-size: 12px; line-height: 1.6; }
  .hero-points { margin-top: 13px; }
  .hero-points span { font-size: 9px; }
  .hero-image { display: none; }
  .booking-steps { gap: 5px; margin-top: 8px; }
  .booking-steps li { min-height: 50px; gap: 6px; padding: 8px; border-radius: 10px; }
  .booking-steps li > span { width: 24px; height: 24px; font-size: 10px; }
  .booking-steps li strong { font-size: 10px; line-height: 1.25; }

  .panel { border-radius: 14px; }
  .panel-head { flex-direction: column; align-items: stretch; gap: 14px; padding: 20px 16px 0; }
  .panel-head > .field { width: 100%; min-width: 0 !important; }
  .panel-head h2 { font-size: 21px; }
  .panel-body { padding: 18px 16px 20px; }
  .court-product-grid { grid-template-columns: 1fr; }
  .court-product { grid-template-columns: 88px minmax(0,1fr); gap: 12px; min-height: 146px; padding: 10px; }
  .court-product-visual { min-height: 122px; }
  .court-product h3 { font-size: 18px; }
  .court-product p { -webkit-line-clamp: 2; font-size: 11px; }
  .court-product-price { grid-column: 2; }
  .court-product-price strong { display: inline; margin-right: 6px; font-size: 17px; }
  .booking-caution { align-items: flex-start; flex-direction: column; gap: 4px; font-size: 11px; }
  .booking-step-actions { align-items: stretch; flex-direction: column; gap: 12px; }
  .booking-step-actions .primary { width: 100%; }
  .select-row { align-items: stretch; flex-direction: column; }
  .select-row .field,
  .date-field { width: 100%; min-width: 0; }
  .selected-court-strip,
  .rental-week-picker { padding: 10px 8px; }
  .rental-week-toolbar { grid-template-columns: 38px minmax(0,1fr) 38px; gap: 7px; margin-bottom: 9px; }
  .rental-week-toolbar > strong { font-size: 12px; }
  .week-nav-button { width: 38px; min-height: 38px !important; }
  .court-switcher { display: grid; grid-template-columns: 1fr 1fr; }
  .court-switcher button { min-width: 0; }
  .schedule-layout,
  .console-grid { grid-template-columns: minmax(0,1fr); }
  .schedule-layout > *,
  .console-grid > *,
  .timeline-column,
  .admin-main,
  .admin-content { min-width: 0; }
  .availability-status { align-items: flex-start; flex-wrap: wrap; }
  .availability-status small { width: 100%; margin-left: 0; }
  .booking-step-card { scroll-margin-top: 118px; }
  .weekly-timeline-wrap,
  .desktop-rental-legend { display: none; }
  .mobile-rental-schedule { display: block; }
  .mobile-rental-date-tabs { display: grid; grid-template-columns: repeat(7, minmax(58px,1fr)); gap: 6px; overflow-x: auto; padding: 2px 0 8px; scrollbar-width: none; }
  .mobile-rental-date-tabs::-webkit-scrollbar { display: none; }
  .mobile-rental-date-tabs button { display: grid; min-width: 58px; min-height: 58px !important; place-items: center; gap: 2px; padding: 7px 6px; color: #67737b; border: 1px solid #dce3e6; border-radius: 10px; background: #fff; }
  .mobile-rental-date-tabs button strong { color: #2a353c; font-size: 12px; }
  .mobile-rental-date-tabs button span { font-size: 10px; }
  .mobile-rental-date-tabs button[aria-selected="true"] { color: #171d22; border-color: #c59b11; background: var(--yellow); box-shadow: 0 6px 14px rgba(138,104,0,.16); }
  .mobile-rental-date-tabs button:disabled { opacity: .42; }
  .mobile-rental-date-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 7px 0 10px; }
  .mobile-rental-date-heading span { color: #202b32; font-size: 13px; font-weight: 900; }
  .mobile-rental-date-heading strong { color: #77838a; font-size: 9px; }
  .mobile-rental-slot-list { display: grid; gap: 8px; }
  .mobile-rental-slot { display: flex; width: 100%; min-height: 66px !important; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; color: #1d2931; border: 1px solid #d8e4e8; border-radius: 12px; background: #f4fbfd; text-align: left; }
  .mobile-rental-slot > span { min-width: 0; }
  .mobile-rental-slot strong,
  .mobile-rental-slot small { display: block; }
  .mobile-rental-slot strong { font-size: 15px; }
  .mobile-rental-slot small { margin-top: 4px; overflow: hidden; color: #68767e; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
  .mobile-rental-slot b { flex: 0 0 auto; font-size: 12px; }
  .mobile-rental-slot.selected { border-color: #c59b11; background: var(--yellow); box-shadow: inset 0 0 0 1px #c59b11; }
  .mobile-rental-empty { padding: 24px 16px; color: #65727a; border: 1px dashed #d4dde0; border-radius: 12px; background: #f8fafb; text-align: center; }
  .mobile-rental-empty strong { color: #263139; font-size: 12px; }
  .mobile-rental-empty p { margin: 7px 0 0; font-size: 10px; line-height: 1.5; }
  .rental-load-feedback { align-items: stretch; flex-direction: column; }
  .rental-load-feedback button { width: 100%; }
  .rental-preview-actions > div { grid-template-columns: 1fr; }
  .slot { min-width: 0; min-height: 62px; flex-direction: column; gap: 3px; padding: 8px 4px; border: 1px solid #e0e6e8; border-radius: 9px; }
  .slot-time { display: block; font-size: 12px; font-weight: 900; }
  .slot-price { font-size: 9px; }
  .legend { gap: 8px; font-size: 10px; }
  .summary-card { position: static; width: 100%; padding: 18px; }
  .summary-heading { margin: -18px -18px 12px; }
  .party-row { grid-template-columns: minmax(0,1fr) 88px 38px; }
  .booking-policy summary { align-items: flex-start; flex-wrap: wrap; }
  .booking-policy summary strong { order: 3; width: calc(100% - 40px); margin-left: 0; }
  .booking-policy .policy-grid { grid-template-columns: 1fr 1fr; }
  .terms-booking-summary { grid-template-columns: 1fr; }
  .rental-terms-modal { padding: 18px 15px; }
  .booking-page { padding-bottom: 88px; }
  .mobile-booking-bar {
    position: fixed;
    z-index: 45;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: minmax(0,1fr) 132px;
    gap: 12px;
    align-items: center;
    padding: 11px 14px calc(11px + env(safe-area-inset-bottom));
    border-top: 1px solid #dce3e6;
    background: rgba(255,255,255,.97);
    box-shadow: 0 -12px 30px rgba(16,24,32,.10);
    backdrop-filter: blur(16px);
  }
  .mobile-booking-bar span { display: block; overflow: hidden; color: #66737c; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
  .mobile-booking-bar strong { display: block; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
  .mobile-booking-bar button { display: flex; min-height: 48px !important; align-items: center; justify-content: center; overflow: hidden; border: 0; border-radius: 10px; color: #171d22; background: var(--yellow); font-size: 12px; font-weight: 900; white-space: nowrap; }

  .lesson-date-row { align-items: stretch; flex-direction: column; }
  .lesson-date-row .field { min-width: 0; }
  .lesson-date-row > span { padding: 0; }
  .lesson-grid { grid-template-columns: 1fr; }
  .lesson-card { min-height: 0; }
  .lesson-program-summary { grid-template-columns: 1fr; }
  .lesson-program-option { grid-template-columns: 1fr; gap: 10px; }
  .lesson-program-option-price { min-width: 0; text-align: left; }
  .occurrence { grid-template-columns: 72px minmax(0,1fr); gap: 12px; }
  .occurrence-time { padding-right: 10px; }
  .occurrence-actions { grid-column: 2; justify-content: flex-start; }
  .my-card { grid-template-columns: 72px minmax(0,1fr); }
  .my-actions { grid-column: 2; flex-wrap: wrap; justify-content: flex-start; }

  body.admin-mode .topbar { min-height: 104px; padding: 10px 12px; }
  body.admin-mode .brand img { width: 84px; height: 34px; }
  body.admin-mode .main-nav button,
  body.admin-mode .main-nav a { flex: 0 0 auto; min-width: 66px; min-height: 36px !important; padding: 6px 7px; font-size: 10px; }
  .admin-workspace { grid-template-columns: minmax(0,1fr); min-height: calc(100vh - 104px); }
  .admin-sidebar { position: static; width: 100%; height: auto; min-height: 0; padding: 8px; }
  .admin-sidebar-head,
  .admin-sidebar-foot { display: none; }
  .admin-menu { display: flex; gap: 5px; margin: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .admin-menu::-webkit-scrollbar { display: none; }
  .admin-menu-group { flex: 0 0 72px; }
  .admin-menu button { flex: 0 0 72px; min-height: 58px !important; flex-direction: column; justify-content: center; gap: 4px; padding: 7px 5px; font-size: 10px; }
  .admin-menu button .ui-icon { width: 17px; height: 17px; }
  .admin-commandbar { position: static; flex-wrap: wrap; padding: 10px; }
  .location-control { flex: 0 0 100%; min-width: 0; }
  .location-control select { min-width: 0; }
  .command-search { order: 3; max-width: none; flex-basis: 100%; }
  .command-date { flex: 1; width: auto; min-width: 135px; }
  .admin-content { padding: 18px 10px 28px; }
  .admin-page-title { align-items: flex-start; }
  .admin-page-title h1 { font-size: 23px; }
  .live-badge { white-space: nowrap; }
  .commercial-kpi-grid { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 5px; scroll-snap-type: x proximity; }
  .commercial-kpi { min-width: 154px; flex: 0 0 154px; min-height: 102px; scroll-snap-align: start; }
  .commercial-kpi strong { font-size: 22px; }
  .console-grid,
  .settings-grid,
  .customer-card-grid { grid-template-columns: minmax(0,1fr); }
  .ops-panel,
  .ops-scroll { width: 100%; max-width: 100%; }
  .ops-toolbar { align-items: stretch; flex-direction: column; }
  .ops-controls { display: grid; grid-template-columns: minmax(0,1fr) auto; }
  .ops-controls .field { min-width: 0; }
  .ops-summary { flex-wrap: nowrap; overflow-x: auto; }
  .ops-summary span { flex: 0 0 auto; }
  .ops-scroll { height: 560px; min-height: 420px; margin: 12px 0 0; border-right: 0; border-left: 0; border-radius: 0; }
  .ops-board { min-width: max(660px, calc(64px + var(--court-count) * 280px)); }
  .admin-table-wrap { width: 100%; max-width: 100%; }
  .drawer-actions { grid-template-columns: 1fr 1fr; }
  .operator-drawer { padding: 18px 14px; }
  .drawer-actions { bottom: -18px; margin: 14px -14px -18px; padding-right: 14px; padding-left: 14px; }
  .toast { bottom: calc(84px + env(safe-area-inset-bottom)); }
}

@media (max-width: 380px) {
  .booking-steps li { flex-direction: column; justify-content: center; text-align: center; }
  .court-switcher { grid-template-columns: 1fr; }
  .court-row { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .court-product { grid-template-columns: 76px minmax(0,1fr); }
  .mobile-booking-bar { grid-template-columns: minmax(0,1fr) 116px; }
  .booking-policy .policy-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Open Play header parity — sourced from the production commercial UI layer. */
:root {
  --openplay-ui-navy: #101922;
  --openplay-ui-yellow: #ffd21e;
  --openplay-page-width: 1280px;
  --openplay-page-gutter: clamp(16px, 3vw, 36px);
}

.shell {
  width: 100%;
  margin: 0 0 56px;
}

.shell > main {
  width: min(calc(100% - (var(--openplay-page-gutter) * 2)), var(--openplay-page-width));
  max-width: var(--openplay-page-width);
  margin-inline: auto;
}

body.admin-mode .shell > main {
  width: 100%;
  max-width: none;
}

.topbar,
body.admin-mode .topbar {
  position: sticky;
  top: 10px;
  z-index: 60;
  width: min(calc(100% - (var(--openplay-page-gutter) * 2)), var(--openplay-page-width));
  max-width: var(--openplay-page-width);
  min-height: 112px;
  margin: 0 auto;
  padding: 12px 24px 13px;
  display: grid;
  grid-template-columns: minmax(140px, auto) minmax(0, 1fr) auto;
  grid-template-areas:
    "brand spacer utility"
    "nav nav nav";
  align-items: center;
  gap: 8px 20px;
  overflow: visible;
  color: #f8fafb;
  border: 1px solid rgba(255, 210, 30, .18);
  border-radius: 8px;
  background: rgba(16, 25, 34, .98);
  box-shadow: 0 16px 34px rgba(10, 16, 22, .16);
  backdrop-filter: blur(16px);
  box-sizing: border-box;
  font-family: Inter, Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  letter-spacing: 0;
}

.topbar button,
.topbar a {
  letter-spacing: 0;
}

.topbar [hidden] {
  display: none !important;
}

.topbar .top-brand,
body.admin-mode .topbar .top-brand {
  grid-area: brand;
  width: 130px;
  min-width: 0;
  min-height: 42px !important;
  height: 42px;
  padding: 0;
  display: grid;
  place-items: center start;
  justify-self: start;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.topbar .top-brand-logo,
body.admin-mode .topbar .top-brand-logo {
  width: 126px;
  height: 40px;
  object-fit: contain;
  object-position: left center;
  display: block;
}

.product-label,
.topbar .status-pill {
  display: none !important;
}

.topbar .header-utility {
  grid-area: utility;
  justify-self: end;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  min-width: 0;
}

.topbar .header-utility > *,
.topbar .utility > * {
  position: relative;
}

.topbar .header-utility > * + *::before,
.topbar .utility > * + *::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 12px;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, .16);
}

.topbar .utility {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: 0;
  color: inherit;
  font-size: inherit;
}

.topbar .header-utility .top-link,
.topbar .header-utility .lang-switch button,
.topbar .utility .top-link {
  min-height: 30px !important;
  height: auto;
  padding: 0 10px !important;
  display: inline-flex !important;
  align-items: center;
  flex: 0 0 auto;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none;
  color: rgba(236, 241, 244, .7) !important;
  font-size: 12px !important;
  font-weight: 760 !important;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.topbar .header-utility .top-link:hover,
.topbar .header-utility .lang-switch button:hover,
.topbar .header-utility .lang-switch button.active,
.topbar .utility .top-link:hover {
  color: var(--openplay-ui-yellow) !important;
  background: transparent !important;
  box-shadow: none;
}

.topbar .header-utility .lang-switch.compact {
  min-height: 0;
  height: auto;
  padding: 0;
  display: flex;
  gap: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.topbar .language-switch button:first-child::after {
  content: "/";
  margin-left: 9px;
  color: rgba(235, 242, 246, .28);
  font-weight: 700;
}

.topbar .top-primary-nav {
  grid-area: nav;
  width: 100%;
  min-width: 0;
  padding: 4px 0 0;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: nowrap;
  overflow: visible;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
}

.topbar .top-primary-nav::-webkit-scrollbar {
  display: none;
}

.topbar .top-primary-nav > button,
.topbar .top-primary-nav > a,
body.admin-mode .topbar .top-primary-nav > button,
body.admin-mode .topbar .top-primary-nav > a {
  flex: 0 0 auto;
  width: auto;
  min-width: max-content;
  min-height: 34px !important;
  height: auto;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  border: 0;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(236, 241, 244, .7) !important;
  font-size: 14px !important;
  font-weight: 830 !important;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.topbar .top-primary-nav > button:hover,
.topbar .top-primary-nav > button.active,
.topbar .top-primary-nav > a:hover,
body.admin-mode .topbar .top-primary-nav > button:hover,
body.admin-mode .topbar .top-primary-nav > button.active,
body.admin-mode .topbar .top-primary-nav > a:hover {
  color: var(--openplay-ui-yellow) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.topbar .top-nav-dropdown {
  position: relative;
  flex: 0 0 auto;
  min-width: 0;
}

.topbar .top-nav-dropdown-trigger,
body.admin-mode .topbar .top-nav-dropdown-trigger {
  width: auto;
  min-width: max-content;
  min-height: 34px !important;
  height: auto;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  border: 0;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(236, 241, 244, .7) !important;
  font-size: 14px !important;
  font-weight: 830 !important;
  line-height: 1.2;
  white-space: nowrap;
}

.topbar .top-nav-dropdown-trigger:hover,
.topbar .top-nav-dropdown-trigger.active,
.topbar .top-nav-dropdown.open .top-nav-dropdown-trigger {
  color: var(--openplay-ui-yellow) !important;
}

.topbar .top-nav-caret {
  display: inline-block;
  color: currentColor;
  font-size: 12px;
  line-height: 1;
  transform: translateY(-1px);
  transition: transform .16s ease;
}

.topbar .top-nav-dropdown.open .top-nav-caret {
  transform: translateY(-1px) rotate(180deg);
}

.topbar .top-nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: -14px;
  z-index: 90;
  width: 262px;
  padding: 8px;
  display: grid;
  gap: 4px;
  border: 1px solid rgba(255, 210, 30, .2);
  border-radius: 8px;
  background: #16212a;
  box-shadow: 0 22px 48px rgba(4, 9, 14, .34);
}

.topbar .top-nav-dropdown-menu[hidden] {
  display: none !important;
}

.topbar .top-nav-dropdown-menu > button,
body.admin-mode .topbar .top-nav-dropdown-menu > button {
  width: 100%;
  min-height: 54px !important;
  padding: 9px 11px !important;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  justify-items: start;
  gap: 3px;
  border: 0;
  border-radius: 6px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #f5f7f8 !important;
  font-size: 13px !important;
  font-weight: 830 !important;
  line-height: 1.25;
  text-align: left;
  white-space: normal;
}

.topbar .top-nav-dropdown-menu > button small {
  color: rgba(226, 234, 238, .58);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.35;
}

.topbar .top-nav-dropdown-menu > button:not(:disabled):hover,
.topbar .top-nav-dropdown-menu > button:not(:disabled):focus-visible,
.topbar .top-nav-dropdown-menu > button.active {
  background: rgba(255, 255, 255, .07) !important;
  color: var(--openplay-ui-yellow) !important;
  outline: none;
}

.topbar .top-nav-dropdown-menu > button:disabled {
  cursor: not-allowed;
  opacity: .58;
}

.topbar .top-nav-services {
  margin-left: auto;
}

.topbar .top-nav-services-trigger,
body.admin-mode .topbar .top-nav-services-trigger {
  min-height: 34px !important;
  padding: 0 12px !important;
  border: 1px solid rgba(255, 255, 255, .22) !important;
  border-radius: 5px !important;
  background: rgba(255, 255, 255, .06) !important;
  color: rgba(245, 248, 249, .84) !important;
}

.topbar .top-nav-services-trigger:hover,
.topbar .top-nav-services.open .top-nav-services-trigger {
  border-color: rgba(255, 210, 30, .48) !important;
  background: rgba(255, 210, 30, .08) !important;
  color: var(--openplay-ui-yellow) !important;
}

.topbar .top-nav-services-menu {
  right: 0;
  left: auto;
}

.topbar .top-nav-services-label-mobile,
.topbar .top-nav-mobile-only {
  display: none !important;
}

body.admin-mode .admin-workspace {
  min-height: calc(100vh - 122px);
  margin-top: 10px;
}

body.admin-mode .admin-sidebar {
  top: 122px;
  height: calc(100vh - 122px);
}

@media (max-width: 1080px) {
  :root { --openplay-page-gutter: 16px; }

  .topbar,
  body.admin-mode .topbar {
    top: 0;
    width: 100%;
    max-width: none;
    border-width: 0 0 1px;
    border-radius: 0;
  }

  .topbar .top-primary-nav { gap: 22px; }

  body.admin-mode .admin-workspace {
    min-height: calc(100vh - 112px);
    margin-top: 0;
  }

  body.admin-mode .admin-sidebar {
    top: 112px;
    height: calc(100vh - 112px);
  }
}

@media (max-width: 760px) {
  :root { --openplay-page-gutter: 10px; }

  .topbar,
  body.admin-mode .topbar {
    position: relative;
    top: auto;
    grid-template-columns: 112px minmax(0, 1fr);
    grid-template-areas:
      "brand utility"
      "nav nav";
    min-height: 104px;
    gap: 8px 12px;
    padding: 10px 12px 9px;
    overflow: visible;
  }

  .topbar .top-brand,
  body.admin-mode .topbar .top-brand {
    width: 108px;
    min-height: 36px !important;
    height: 36px;
  }

  .topbar .top-brand-logo,
  body.admin-mode .topbar .top-brand-logo {
    width: 104px;
    height: 34px;
  }

  .topbar .header-utility {
    width: 100%;
    justify-self: stretch;
    justify-content: flex-end;
    overflow: visible;
    scrollbar-width: none;
  }

  .topbar .header-utility::-webkit-scrollbar { display: none; }

  .topbar .header-utility .top-link,
  .topbar .header-utility .lang-switch button,
  .topbar .utility .top-link {
    min-height: 28px !important;
    padding: 0 5px !important;
    font-size: 10px !important;
  }

  .topbar .top-primary-nav {
    width: 100%;
    gap: 4px 18px;
    padding: 2px 2px 3px;
    flex-wrap: wrap;
    overflow: visible;
  }

  .topbar .top-primary-nav > button,
  .topbar .top-primary-nav > a,
  body.admin-mode .topbar .top-primary-nav > button,
  body.admin-mode .topbar .top-primary-nav > a {
    scroll-snap-align: start;
    font-size: 14px !important;
  }

  .topbar .top-nav-dropdown-trigger,
  body.admin-mode .topbar .top-nav-dropdown-trigger {
    font-size: 14px !important;
  }

  .topbar .top-nav-dropdown-menu {
    left: -10px;
    width: min(272px, calc(100vw - 32px));
  }

  .topbar .top-nav-services {
    margin-left: auto;
  }

  .topbar .top-nav-services-menu {
    right: 0;
    left: auto;
  }

  body.admin-mode .admin-workspace {
    min-height: calc(100vh - 104px);
    margin-top: 0;
  }

  body.admin-mode .admin-sidebar {
    top: auto;
    height: auto;
  }
}

@media (max-width: 760px) {
  :root { --openplay-page-gutter: 8px; }

  .topbar,
  body.admin-mode .topbar {
    position: relative;
    top: auto;
    z-index: 60;
    width: calc(100% - 16px);
    max-width: none;
    min-height: auto;
    margin-inline: auto;
    grid-template-columns: 118px minmax(0, 1fr);
    grid-template-areas:
      "brand utility"
      "nav nav";
    gap: 4px 8px;
    padding: 8px 10px 9px;
    overflow: visible;
    border: 1px solid rgba(255, 210, 30, .16);
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(13, 20, 27, .98), rgba(16, 24, 32, .98));
    box-shadow: 0 18px 42px rgba(8, 13, 19, .18);
  }

  .topbar .top-brand,
  body.admin-mode .topbar .top-brand {
    width: 118px;
    min-width: 0;
    min-height: 38px !important;
    height: 38px;
  }

  .topbar .top-brand-logo,
  body.admin-mode .topbar .top-brand-logo {
    width: 112px;
    height: 36px;
  }

  .topbar .header-utility {
    width: 100%;
    gap: 7px;
    min-width: 0;
    justify-content: flex-end;
    overflow-x: hidden;
    overflow-y: hidden;
    white-space: normal;
    scrollbar-width: none;
  }

  .topbar .header-utility::-webkit-scrollbar { display: none; }

  .topbar .header-utility > .top-home { display: none !important; }

  .topbar .utility { gap: 7px; }

  .topbar .header-utility .top-link,
  .topbar .header-utility .lang-switch button,
  .topbar .utility .top-link {
    flex: 0 0 auto;
    min-height: auto !important;
    height: auto;
    padding: 0 !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    line-height: 1.2;
    white-space: nowrap;
  }

  .topbar .header-utility > * + *::before,
  .topbar .utility > * + *::before {
    display: none;
  }

  .topbar .language-switch button:first-child::after {
    margin-left: 7px;
  }

  .topbar .utility .top-link::before {
    position: static;
    display: inline-block;
    width: 1px;
    height: 10px;
    margin-right: 7px;
    transform: none;
    vertical-align: -1px;
    background: rgba(235, 242, 246, .22);
    content: "";
  }

  .topbar .top-primary-nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: minmax(44px, auto);
    align-items: center;
    gap: 3px;
    max-width: 100%;
    padding: 0 0 3px;
    box-sizing: border-box;
    overflow: visible;
  }

  .topbar .top-primary-nav > :nth-child(1) { grid-column: 1; grid-row: 1; }
  .topbar .top-primary-nav > :nth-child(2) { grid-column: 2; grid-row: 1; }
  .topbar .top-primary-nav > :nth-child(3),
  .topbar .top-primary-nav > :nth-child(4),
  .topbar .top-primary-nav > :nth-child(5) { display: none !important; }
  .topbar .top-primary-nav > :nth-child(6) { grid-column: 3; grid-row: 1; }
  .topbar .top-primary-nav > :nth-child(7) { grid-column: 4; grid-row: 1; }

  .topbar .top-primary-nav > button,
  .topbar .top-primary-nav > a,
  body.admin-mode .topbar .top-primary-nav > button,
  body.admin-mode .topbar .top-primary-nav > a {
    width: 100%;
    min-width: 0;
    min-height: 44px !important;
    padding: 0 3px !important;
    justify-content: center;
    overflow: hidden;
    font-size: 13px !important;
    font-weight: 850 !important;
    text-overflow: ellipsis;
  }

  .topbar .top-nav-dropdown-trigger,
  body.admin-mode .topbar .top-nav-dropdown-trigger {
    width: 100%;
    min-width: 0;
    min-height: 44px !important;
    justify-content: center;
    font-size: 13px !important;
    font-weight: 850 !important;
  }

  .topbar .top-nav-services {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative;
    right: auto;
    bottom: auto;
    margin-left: 0;
  }

  .topbar .top-nav-services-trigger,
  body.admin-mode .topbar .top-nav-services-trigger {
    min-height: 44px !important;
    padding: 0 3px !important;
    border: 0 !important;
    background: transparent !important;
    font-size: 13px !important;
  }

  .topbar .top-nav-services-label-desktop { display: none !important; }
  .topbar .top-nav-services-label-mobile { display: inline !important; }
  .topbar .top-nav-mobile-only { display: grid !important; }

  .topbar .top-nav-dropdown-menu {
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    width: min(300px, calc(100vw - 32px));
    max-height: min(70dvh, 500px);
    overflow-y: auto;
  }
}

/* Unified member communication */
.member-select-cell {
  width: 46px;
  min-width: 46px;
  text-align: center;
}

.member-select-cell input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #17232b;
  cursor: pointer;
}

.member-bulk-toolbar {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 12px 14px;
  border: 1px solid #dce3e6;
  border-radius: 10px;
  background: #f7f9fa;
}

.member-bulk-toolbar > div:first-child { display: grid; gap: 3px; }
.member-bulk-toolbar strong { color: #17232b; font-size: 13px; }
.member-bulk-toolbar span { color: #6d7a82; font-size: 10px; }
.member-bulk-actions { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.member-bulk-actions button { min-height: 38px; }

.member-message-modal { width: min(680px, calc(100vw - 32px)); }
.member-message-recipients {
  display: grid;
  gap: 4px;
  margin-bottom: 16px;
  padding: 13px 14px;
  border: 1px solid #dce3e6;
  border-radius: 9px;
  background: #f7f9fa;
}
.member-message-recipients strong { color: #17232b; font-size: 12px; }
.member-message-recipients span { color: #6d7a82; font-size: 10px; }
.member-message-modal textarea { min-height: 190px; resize: vertical; }
.member-message-actions { display: flex; gap: 8px; justify-content: flex-end; }

@media (max-width: 720px) {
  .member-bulk-toolbar { align-items: stretch; flex-direction: column; }
  .member-bulk-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .member-bulk-actions button { min-width: 0; padding-inline: 8px; }
  .member-message-modal { width: calc(100vw - 20px); }
  .member-message-actions { display: grid; grid-template-columns: 1fr 1fr; }
}

/* Payment completion */
.payment-success-page {
  display: grid;
  min-height: calc(100vh - 150px);
  padding: clamp(22px, 5vw, 64px) 0;
  place-items: start center;
}

.payment-success-card {
  width: min(920px, 100%);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--paper);
  box-shadow: 0 24px 64px rgba(16, 24, 32, .12);
}

.payment-success-hero {
  position: relative;
  overflow: hidden;
  padding: 42px 28px 36px;
  color: #fff;
  text-align: center;
  background: linear-gradient(135deg, #101820 0%, #1b2a35 100%);
}

.payment-success-hero::after {
  position: absolute;
  right: -80px;
  bottom: -140px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: rgba(255, 210, 30, .16);
  content: "";
}

.payment-success-mark {
  display: grid;
  width: 68px;
  height: 68px;
  margin: 0 auto 18px;
  place-items: center;
  color: #17212a;
  border-radius: 50%;
  background: var(--openplay-ui-yellow, var(--yellow));
  box-shadow: 0 0 0 9px rgba(255, 210, 30, .10);
  font-size: 31px;
  font-weight: 950;
}

.payment-success-hero > span {
  position: relative;
  z-index: 1;
  color: var(--openplay-ui-yellow, var(--yellow));
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .16em;
}

.payment-success-hero h1 {
  position: relative;
  z-index: 1;
  margin: 10px 0 8px;
  font-size: clamp(29px, 4vw, 40px);
  line-height: 1.14;
}

.payment-success-hero p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #c5d0d6;
  font-size: 14px;
  line-height: 1.6;
}

.payment-success-meta {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(180px, 1fr);
  gap: 0;
  margin: 0 28px;
  border-bottom: 1px solid var(--line);
}

.payment-success-meta > div {
  min-width: 0;
  padding: 22px 18px;
  border-right: 1px solid var(--line);
}

.payment-success-meta > div:first-child { padding-left: 0; }
.payment-success-meta > div:nth-child(2) { padding-right: 0; border-right: 0; }
.payment-success-meta.is-single { grid-template-columns: 1fr; }
.payment-success-meta.is-single > div:first-child { padding-right: 0; border-right: 0; }
.payment-success-meta span,
.payment-success-meta strong { display: block; }
.payment-success-meta span { color: #77838b; font-size: 10px; font-weight: 900; }
.payment-success-meta strong { margin-top: 6px; overflow-wrap: anywhere; color: #1b252c; font-size: 13px; }
.payment-success-meta .payment-success-total {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0 20px;
  border-right: 0;
}
.payment-success-meta .payment-success-total span { font-size: 12px; }
.payment-success-meta .payment-success-total strong { margin-top: 0; color: #111a21; font-size: 26px; }

.payment-success-bookings { padding: 26px 28px 0; }
.payment-success-section-head > span { color: #8a6b00; font-size: 9px; font-weight: 950; letter-spacing: .14em; }
.payment-success-section-head h2 { margin: 5px 0 4px; font-size: 22px; }
.payment-success-section-head p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.payment-success-list { display: grid; gap: 9px; margin-top: 16px; }

.payment-success-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid #e0e6e8;
  border-radius: 13px;
  background: #fbfcfc;
}

.payment-success-date {
  display: grid;
  min-height: 58px;
  padding: 8px;
  place-items: center;
  align-content: center;
  border-radius: 10px;
  color: #f4f7f8;
  background: var(--navy);
}
.payment-success-date span { color: #aebbc2; font-size: 9px; font-weight: 900; }
.payment-success-date strong { margin-top: 2px; font-size: 16px; }
.payment-success-item-main { min-width: 0; }
.payment-success-item-main > strong { display: block; color: #182128; font-size: 15px; }
.payment-success-item-main p { margin: 4px 0 0; color: #59666f; font-size: 12px; line-height: 1.45; }
.payment-success-item-main > span { display: inline-block; margin-top: 5px; color: #829098; font-size: 10px; font-weight: 850; }
.payment-success-item-side { display: grid; min-width: 110px; justify-items: end; gap: 8px; }
.payment-success-item-side > strong { color: #17212a; font-size: 15px; }
.payment-success-empty { margin-top: 16px; padding: 24px; text-align: center; border: 1px dashed #cfd9dc; border-radius: 12px; background: #f8faf9; }
.payment-success-empty strong { font-size: 14px; }
.payment-success-empty p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }

.payment-success-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 18px 28px 0;
  padding: 13px 14px;
  color: #44535c;
  border-radius: 11px;
  background: #f1f5f4;
}
.payment-success-notice > span { display: grid; width: 20px; height: 20px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #fff; background: #667781; font-size: 11px; font-weight: 900; }
.payment-success-notice p { margin: 1px 0 0; font-size: 11px; line-height: 1.55; }
.payment-success-actions { display: grid; grid-template-columns: 1fr 1.35fr; gap: 10px; padding: 20px 28px 28px; }
.payment-success-actions .primary { min-height: 50px; }
.payment-success-actions .ghost { min-height: 50px; }

@media (max-width: 700px) {
  .payment-success-page { min-height: auto; padding: 14px 0 28px; }
  .payment-success-card { border-radius: 16px; }
  .payment-success-hero { padding: 32px 18px 28px; }
  .payment-success-mark { width: 58px; height: 58px; font-size: 27px; }
  .payment-success-meta { grid-template-columns: 1fr; margin: 0 16px; }
  .payment-success-meta > div { padding: 16px 0; border-right: 0; }
  .payment-success-meta > div:first-child { grid-column: auto; padding-left: 0; border-right: 0; }
  .payment-success-meta > div + div:not(.payment-success-total) { border-top: 1px solid var(--line); }
  .payment-success-meta .payment-success-total { padding: 14px 0 18px; }
  .payment-success-bookings { padding: 22px 16px 0; }
  .payment-success-item { grid-template-columns: 54px minmax(0, 1fr); gap: 11px; padding: 11px; }
  .payment-success-date { min-height: 54px; }
  .payment-success-item-side { grid-column: 2; grid-template-columns: auto auto; justify-content: space-between; justify-items: start; width: 100%; min-width: 0; }
  .payment-success-notice { margin: 16px 16px 0; }
  .payment-success-actions { grid-template-columns: 1fr; padding: 16px; }
  .payment-success-actions .primary { grid-row: 1; }
  .payment-success-actions .ghost { grid-row: 2; }
}

/* My bookings — Programs / Court / Lessons */
.my-bookings-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin: 0 0 24px;
  padding: 4px;
  border: 1px solid #dce3e6;
  border-radius: 14px;
  background: #eef2f3;
  box-shadow: inset 0 1px 2px rgba(16, 24, 32, .035);
}

.my-bookings-tab {
  position: relative;
  display: inline-flex;
  min-width: 0;
  min-height: 48px !important;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  overflow: hidden;
  border: 0;
  border-radius: 10px;
  color: #5c6871;
  background: transparent;
  box-shadow: none;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  transition: color .16s ease, background-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.my-bookings-tab:hover {
  color: #1d2931;
  background: rgba(255, 255, 255, .68);
}

.my-bookings-tab[aria-selected="true"],
.my-bookings-tab.active {
  color: #121b22;
  background: #fff;
  box-shadow: 0 6px 16px rgba(16, 24, 32, .09), inset 0 -3px 0 var(--openplay-ui-yellow, var(--yellow));
}

.my-bookings-tab:active { transform: translateY(1px); }
.my-bookings-tab:disabled,
.my-bookings-tab[aria-disabled="true"] { opacity: .48; cursor: not-allowed; }

.my-bookings-tab:focus-visible {
  z-index: 1;
  outline: 3px solid rgba(20, 109, 136, .34);
  outline-offset: 2px;
}

.my-bookings-tab > span {
  min-width: 0;
  max-width: 100%;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: normal;
  word-break: keep-all;
  line-height: 1.25;
}

.my-bookings-panel {
  min-width: 0;
  scroll-margin-top: 132px;
}

.my-bookings-panel[hidden] { display: none !important; }
.my-bookings-panel:focus { outline: none; }
.my-bookings-panel:focus-visible {
  outline: 3px solid rgba(20, 109, 136, .22);
  outline-offset: 5px;
  border-radius: 12px;
}

.my-bookings-section {
  min-width: 0;
}

.my-bookings-section + .my-bookings-section {
  margin-top: 28px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.my-bookings-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 0;
  padding: 24px 24px 0;
}

.my-bookings-section-head > div { min-width: 0; }
.my-bookings-section-head h2,
.my-bookings-section-head h3 {
  margin: 3px 0 0;
  color: #182128;
  font-size: 23px;
  line-height: 1.35;
}

.my-bookings-section-head p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.my-bookings-section-head > span {
  flex: 0 0 auto;
  color: #7a8790;
  font-size: 10px;
  font-weight: 850;
  white-space: nowrap;
}

.my-bookings-panel .active-lessons-panel {
  margin-top: 0;
  border-radius: 14px;
  box-shadow: none;
}

.my-bookings-panel .my-card:not(.my-openplay-card) .my-actions > .tag,
.my-bookings-panel .my-card:not(.my-openplay-card) .my-actions > button.danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 11px;
  line-height: 1;
}

.my-openplay-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  overflow: hidden;
  padding: 22px;
  border: 1px solid #dbe3e6;
  border-radius: 15px;
  background: linear-gradient(135deg, #fbfcfc 0%, #f3f7f6 100%);
  box-shadow: var(--shadow-sm);
}

.my-openplay-card::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--openplay-ui-yellow, var(--yellow)) 0 30%, var(--navy) 30% 100%);
  content: "";
}

.my-openplay-card-copy { min-width: 0; }
.my-openplay-card-copy > span {
  color: #806300;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .13em;
}

.my-openplay-card-copy h3 {
  margin: 7px 0 0;
  color: #172129;
  font-size: 19px;
  line-height: 1.35;
}

.my-openplay-card-copy p {
  max-width: 680px;
  margin: 6px 0 0;
  color: #5c6871;
  font-size: 12px;
  line-height: 1.6;
}

.my-openplay-manage-link {
  display: inline-flex;
  min-width: 154px;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 10px 16px;
  border: 1px solid var(--navy);
  border-radius: 10px;
  color: #fff;
  background: var(--navy);
  box-shadow: 0 8px 20px rgba(16, 24, 32, .13);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: color .16s ease, background-color .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.my-openplay-manage-link::after {
  content: "\2197";
  font-size: 14px;
  line-height: 1;
}

.my-openplay-manage-link:hover {
  color: #172129;
  border-color: var(--openplay-ui-yellow, var(--yellow));
  background: var(--openplay-ui-yellow, var(--yellow));
  box-shadow: 0 10px 22px rgba(212, 168, 0, .17);
  transform: translateY(-1px);
}

.my-openplay-manage-link:focus-visible {
  outline: 3px solid rgba(20, 109, 136, .34);
  outline-offset: 3px;
}

.my-bookings-empty {
  padding: 30px 20px;
  color: #64717a;
  text-align: center;
  border: 1px dashed #cfd9dc;
  border-radius: 12px;
  background: #fafbfb;
  font-size: 12px;
  line-height: 1.6;
}

.my-bookings-empty strong {
  display: block;
  margin-bottom: 5px;
  color: #26323a;
  font-size: 14px;
}

@media (max-width: 700px) {
  .my-bookings-tabs { margin-bottom: 18px; }
  .my-bookings-tab { min-height: 44px !important; padding: 9px 8px; font-size: 12px; }
  .my-bookings-section + .my-bookings-section { margin-top: 22px; padding-top: 21px; }
  .my-bookings-section-head { align-items: flex-start; flex-direction: column; gap: 6px; margin-bottom: 0; padding: 20px 16px 0; }
  .my-bookings-section-head h2,
  .my-bookings-section-head h3 { font-size: 21px; }
  .my-bookings-section-head > span { white-space: normal; }
  .my-openplay-card { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 20px 16px 16px; }
  .my-openplay-manage-link { width: 100%; min-width: 0; min-height: 48px; }
  .my-bookings-empty { padding: 25px 16px; }
}

@media (max-width: 380px) {
  .my-bookings-tabs { gap: 2px; padding: 3px; border-radius: 12px; }
  .my-bookings-tab { padding-inline: 4px; border-radius: 9px; font-size: 11px; }
}

@media (forced-colors: active) {
  .my-bookings-tab[aria-selected="true"],
  .my-bookings-tab.active,
  .my-openplay-manage-link { border: 2px solid ButtonText; }
  .my-bookings-tab:focus-visible,
  .my-bookings-panel:focus-visible,
  .my-openplay-manage-link:focus-visible { outline: 3px solid Highlight; }
}

/* Dedicated operator command center */
body.admin-console-mode {
  min-width: 0;
  color: #182229;
  background: #edf1f2;
}

body.admin-console-mode .shell {
  width: 100%;
  min-height: 100svh;
  margin: 0;
}

body.admin-console-mode .shell > .topbar {
  display: none !important;
}

body.admin-console-mode .shell > main,
body.admin-console-mode .shell > main > .view {
  width: 100%;
  max-width: none;
  min-height: 100svh;
  margin: 0;
}

.command-login-page {
  min-height: 100svh;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  place-items: center;
  gap: 22px;
  padding: clamp(22px, 4vw, 54px);
  background: #eef2f3;
}

.command-login-card {
  width: min(980px, 100%);
  min-height: 610px;
  display: grid;
  grid-template-columns: minmax(330px, .9fr) minmax(420px, 1.1fr);
  overflow: hidden;
  border: 1px solid #d5dde0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 28px 72px rgba(14, 24, 31, .13);
}

.command-login-brand {
  position: relative;
  min-width: 0;
  padding: clamp(40px, 6vw, 70px) clamp(32px, 5vw, 58px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #f4f7f8;
  background: #111a22;
}

.command-login-brand::after {
  position: absolute;
  right: 0;
  bottom: 64px;
  width: 76%;
  height: 1px;
  background: #e8bd16;
  content: "";
}

.command-login-brand img {
  width: 176px;
  height: 68px;
  object-fit: contain;
  object-position: left center;
}

.command-login-brand > span {
  margin-top: 46px;
  color: #e8bd16;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .13em;
}

.command-login-brand h1 {
  margin: 12px 0 0;
  color: #fff;
  font-size: clamp(34px, 4vw, 48px);
  line-height: 1.08;
  letter-spacing: 0;
}

.command-login-brand p {
  max-width: 360px;
  margin: 22px 0 0;
  color: #aeb9bf;
  font-size: 13px;
  line-height: 1.75;
}

.command-login-panel {
  min-width: 0;
  padding: clamp(38px, 6vw, 70px) clamp(32px, 5vw, 62px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.command-login-eyebrow {
  color: #8b6b00;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
}

.command-login-panel h2 {
  margin: 10px 0 0;
  color: #172129;
  font-size: 30px;
  line-height: 1.25;
}

.command-login-panel > p {
  margin: 8px 0 28px;
  color: #68757d;
  font-size: 12px;
}

.command-login-form {
  display: grid;
  gap: 16px;
}

.command-login-form .field label {
  color: #34414a;
  font-size: 11px;
  font-weight: 850;
}

.command-login-form .field input {
  min-height: 50px;
  border-color: #cfd8dc;
  border-radius: 7px;
  background: #fbfcfc;
}

.command-login-form .primary {
  min-height: 50px !important;
  border-radius: 7px;
  color: #111920;
  background: #f1c719;
  box-shadow: none;
}

.command-recovery-link {
  justify-self: start;
  min-height: 30px !important;
  padding: 0 !important;
  color: #66737b;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 11px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.command-login-denied {
  padding: 18px;
  border: 1px solid #edceca;
  border-radius: 7px;
  background: #fff7f6;
}

.command-login-denied strong { color: #9b3026; }
.command-login-denied p { margin: 7px 0 14px; color: #6d5855; font-size: 12px; line-height: 1.55; }

.command-login-domains {
  margin-top: 32px;
  padding-top: 20px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  border-top: 1px solid #e2e7e9;
}

.command-login-domains span {
  min-width: 0;
  color: #66737b;
  font-size: 10px;
  line-height: 1.45;
}

.command-login-domains b {
  display: block;
  margin-bottom: 4px;
  color: #1e2a31;
  font-size: 10px;
}

.command-login-page > footer {
  color: #77838a;
  font-size: 10px;
}

.command-center-shell {
  min-height: 100svh;
  background: #edf1f2;
}

.command-center-topbar {
  position: sticky;
  top: 0;
  z-index: 80;
  min-height: 68px;
  padding: 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: #f4f7f8;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: #111920;
}

.command-center-brand,
.command-center-account {
  min-width: 0;
  display: flex;
  align-items: center;
}

.command-center-brand { gap: 14px; }
.command-center-brand img { width: 92px; height: 38px; object-fit: contain; object-position: left center; }
.command-center-brand div { padding-left: 14px; border-left: 1px solid rgba(255,255,255,.16); }
.command-center-brand span,
.command-center-brand strong { display: block; }
.command-center-brand span { color: #82919a; font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.command-center-brand strong { margin-top: 2px; color: #f5f7f8; font-size: 13px; }

.command-center-location {
  position: relative;
  width: min(280px, 32vw);
  margin-inline: auto;
}
.command-center-location > span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.command-center-location select {
  width: 100%;
  min-height: 40px;
  padding: 8px 38px 8px 13px;
  color: #eef3f5;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 8px;
  background-color: #1a252d;
  font-size: 12px;
  font-weight: 850;
  box-shadow: none;
}
.command-center-location select:hover,
.command-center-location select:focus {
  color: #fff;
  border-color: rgba(255,216,77,.58);
  box-shadow: 0 0 0 3px rgba(255,216,77,.08);
}

.command-center-account { justify-content: flex-end; gap: 12px; }
.command-center-account > span { max-width: 220px; overflow: hidden; color: #c2cbd0; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.command-center-account button {
  min-height: 34px !important;
  padding: 6px 9px;
  color: #c3cbd0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 10px;
}
.command-center-account button:hover { color: #f1c719; background: transparent; box-shadow: none; }

body.admin-console-mode .admin-workspace {
  min-height: calc(100svh - 68px);
  margin: 0;
  grid-template-columns: 244px minmax(0, 1fr);
}

body.admin-console-mode .admin-sidebar {
  top: 68px;
  height: calc(100svh - 68px);
}

body.admin-console-mode .admin-commandbar { top: 68px; }
body.admin-console-mode .admin-content { max-width: 1680px; width: 100%; margin-inline: auto; }

.command-domain-grid {
  margin-bottom: 16px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.command-domain-card {
  position: relative;
  min-width: 0;
  min-height: 148px !important;
  padding: 18px;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  text-align: left;
  color: #1a252c;
  border: 1px solid #d8e0e3;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(16,24,32,.045);
}

.command-domain-card:hover {
  border-color: #aebbc1;
  background: #fff;
  box-shadow: 0 12px 28px rgba(16,24,32,.08);
  transform: translateY(-1px);
}

.command-domain-card > span { color: #8d6f00; font-size: 9px; font-weight: 950; letter-spacing: .1em; }
.command-domain-card > strong { margin-top: 9px; color: #172129; font-size: 20px; }
.command-domain-card > b { margin-top: 18px; color: #26343c; font-size: 17px; }
.command-domain-card > small { margin-top: 4px; color: #66747c; font-size: 10px; }
.command-domain-card > i { position: absolute; right: 18px; bottom: 17px; color: #96a2a8; font-size: 17px; font-style: normal; }

.openplay-admin-actions {
  margin-bottom: 14px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.openplay-kpis {
  margin-bottom: 16px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.openplay-kpis > div {
  min-width: 0;
  padding: 14px;
  border: 1px solid #dce3e6;
  border-radius: 8px;
  background: #fff;
}

.openplay-kpis span,
.openplay-kpis strong { display: block; }
.openplay-kpis span { color: #66737b; font-size: 12px; font-weight: 850; }
.openplay-kpis strong { margin-top: 6px; color: #182229; font-size: 22px; }

.openplay-session-grid {
  display: grid;
  gap: 18px;
}

.openplay-session-day {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.openplay-session-day-head {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px 8px;
  border-bottom: 2px solid #16232c;
}

.openplay-session-day-label {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 7px;
  color: #17242c;
}

.openplay-session-day-label span {
  color: #6b7880;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .04em;
}

.openplay-session-day-label strong {
  font-size: 24px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.openplay-session-day-label em {
  color: #44525b;
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.openplay-session-day-summary {
  flex: 0 0 auto;
  color: #66747c;
  font-size: 12px;
  font-weight: 800;
}

.openplay-session-scroll-hint { display: none; }

.openplay-session-day-track {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
  gap: 10px;
}

.openplay-manager-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(380px, .92fr);
  gap: 16px;
  align-items: start;
}

.openplay-manager-panel { min-width: 0; }

.openplay-manager-panel .openplay-session-day-track {
  grid-template-columns: minmax(0, 1fr);
}

.openplay-manager-panel .openplay-session-card {
  grid-template-columns: 78px minmax(0, 1fr);
  align-items: start;
}

.openplay-manager-panel .openplay-session-actions {
  grid-column: 1 / -1;
  justify-content: flex-start;
  flex-wrap: wrap;
}

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

.openplay-template-toolbar select,
.openplay-template-toolbar button { min-height: 42px; }

.openplay-session-editor {
  margin: 0;
  padding: 0;
  gap: 14px;
}

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

.openplay-editor-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
}

.openplay-editor-actions .primary { min-width: 144px; }

.openplay-external-participants {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid #dce3e6;
  border-radius: 14px;
  background: #f7f9fa;
}

.openplay-external-participants-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.openplay-external-participants-head > div { display: grid; gap: 3px; }
.openplay-external-participants-head strong { color: #17242d; font-size: 13px; }
.openplay-external-participants-head strong small { color: #74818a; font-weight: 600; }
.openplay-external-participants-head span { color: #65737c; font-size: 12px; }
.openplay-external-participants-head button { min-height: 40px; white-space: nowrap; }
.openplay-external-participant-list { display: grid; gap: 8px; }

.openplay-external-participant-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(150px, 0.8fr) auto;
  align-items: end;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid #dfe5e8;
}

.openplay-external-participant-row .field { min-width: 0; }
.openplay-external-participant-row input,
.openplay-external-participant-row select,
.openplay-external-participant-remove { min-height: 42px; }

.openplay-external-roster {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}

.openplay-external-roster > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border: 1px solid #d9e2e6;
  border-radius: 999px;
  background: #fff;
}

.openplay-external-roster b { color: #17242d; font-size: 12px; }
.openplay-external-roster small { color: #65737c; font-size: 11px; }

.openplay-saved-templates {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid #dce3e6;
}

.openplay-subhead h4 { margin: 0; color: #1d2931; font-size: 14px; }
.openplay-subhead p { margin: 5px 0 14px; color: #697780; font-size: 12px; }

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

.openplay-template-row {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 13px;
  border: 1px solid #dce3e6;
  border-radius: 7px;
  background: #fafbfb;
}

.openplay-template-row > div:first-child { min-width: 0; }
.openplay-template-row strong,
.openplay-template-row span { display: block; }
.openplay-template-row strong { overflow: hidden; color: #202b32; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.openplay-template-row span { margin-top: 4px; color: #6c7880; font-size: 12px; }
.openplay-template-row > div:last-child { display: flex; gap: 6px; flex: 0 0 auto; }
.openplay-template-row button { min-height: 34px; padding: 7px 9px; }

.openplay-session-card {
  min-width: 0;
  padding: 15px;
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  border: 1px solid #dce3e6;
  border-radius: 8px;
  background: #fafbfb;
}

.openplay-session-card.is-closed {
  background: #f4f6f6;
}

.openplay-session-time {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 3px;
  color: #182229;
  border: 1px solid #d4dde0;
  border-radius: 7px;
  background: #fff;
  text-align: center;
}

.openplay-session-time span {
  display: block;
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.openplay-session-time i {
  width: 18px;
  height: 1px;
  overflow: hidden;
  background: #9aa6ac;
  font-size: 0;
  font-style: normal;
}

.openplay-session-copy { min-width: 0; }
.openplay-session-copy strong { display: block; color: #202b32; font-size: 13px; }
.openplay-session-copy h3 { margin: 7px 0 0; color: #17242c; font-size: 15px; line-height: 1.35; }
.openplay-session-copy p { margin: 5px 0 0; color: #64717a; font-size: 12px; line-height: 1.5; }

.session-closed-chip {
  color: #8c3f38 !important;
  border-color: #efc5bf !important;
  background: #fff0ee !important;
}

.openplay-session-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.openplay-session-actions button {
  min-height: 36px;
  padding: 8px 10px;
  white-space: nowrap;
}

.openplay-session-roster {
  min-width: 0;
  grid-column: 1 / -1;
  padding-top: 13px;
  border-top: 1px solid #dce3e6;
}

.openplay-inline-roster { display: grid; gap: 7px; }

.openplay-roster-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(150px, .9fr) minmax(180px, .8fr) minmax(150px, auto);
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid #e0e6e8;
  border-radius: 7px;
  background: #fff;
}

.openplay-roster-row > div { min-width: 0; }
.openplay-roster-row strong,
.openplay-roster-row span,
.openplay-roster-row small { display: block; }
.openplay-roster-row strong { color: #202b32; font-size: 13px; }
.openplay-roster-row > div:first-child span { margin-top: 4px; overflow: hidden; color: #6b7880; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.openplay-roster-row small { margin-top: 5px; color: #6b7880; font-size: 12px; }
.openplay-roster-row .table-actions { justify-content: flex-end; }

.openplay-roster-finance .openplay-roster-payment-total {
  margin-top: 9px;
  color: #202b32;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.openplay-roster-finance .openplay-roster-payment-breakdown,
.openplay-roster-finance .openplay-roster-paddle {
  color: #66757d;
  line-height: 1.4;
}

.openplay-roster-finance .openplay-roster-paddle {
  color: #725a00;
  font-weight: 850;
}

.openplay-manual-application-form {
  margin-top: 12px;
  padding: 14px;
  gap: 10px;
  border: 1px dashed #bdc9ce;
  border-radius: 8px;
  background: #f8faf9;
}

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

.openplay-manual-application-form .full > small {
  display: block;
  margin-top: 7px;
  color: #68767e;
  font-size: 12px;
  line-height: 1.5;
}

.openplay-session-modal {
  width: min(880px, 100%);
  max-height: min(860px, calc(100dvh - 36px));
}

.openplay-session-form {
  margin-top: 18px;
  gap: 14px;
}

.openplay-session-form .time-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.openplay-session-form .time-pair > div {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.openplay-criteria-box {
  min-width: 0;
  margin: 2px 0 0;
  padding: 16px;
  border: 1px solid #d9e1e4;
  border-radius: 9px;
  background: #f8faf9;
}

.openplay-criteria-box legend {
  padding: 0 7px;
  color: #26333b;
  font-size: 12px;
  font-weight: 900;
}

.openplay-criteria-grid,
.openplay-rule-grid {
  display: grid;
  gap: 10px;
}

.openplay-criteria-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.openplay-rule-grid {
  margin-top: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.openplay-rule-grid .choice {
  min-height: 44px;
  margin: 0;
  padding: 10px;
  align-items: center;
  border: 1px solid #dce3e6;
  border-radius: 7px;
  background: #fff;
}

.openplay-admin-table { max-width: 100%; overflow-x: auto; }
.openplay-admin-table .admin-table { min-width: 860px; }
.openplay-admin-error { margin-bottom: 14px; overflow-wrap: anywhere; }

.openplay-load-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 0 2px;
}

.openplay-load-more button { min-width: 160px; }
.openplay-load-more span { color: #69757d; font-size: 12px; font-weight: 800; }

.location-settings-tabs {
  display: inline-flex;
  gap: 4px;
  margin-bottom: 16px;
  padding: 4px;
  border: 1px solid #d7dfe2;
  border-radius: 7px;
  background: #edf1f2;
}

.location-settings-tabs button {
  min-height: 38px;
  padding: 0 18px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #607079;
  font-weight: 800;
}

.location-settings-tabs button[aria-selected="true"] {
  background: #121c24;
  color: #fff;
  box-shadow: 0 4px 12px rgba(18, 28, 36, .12);
}

.location-profile-card,
.location-add-card {
  margin-bottom: 16px;
}

.location-profile-head,
.settings-section-heading,
.location-draft-actions,
.settings-save-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.settings-eyebrow {
  display: block;
  margin-bottom: 6px;
  color: #1687a9;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
}

.settings-section-heading h3,
.location-profile-head h3 {
  margin: 0;
}

.settings-section-heading p {
  margin: 6px 0 0;
  color: #74828b;
  font-size: 12px;
  line-height: 1.55;
}

.location-picker {
  width: min(320px, 42%);
  margin: 0;
}

.location-profile-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 20px;
  border: 1px solid #dce3e5;
  border-radius: 7px;
  overflow: hidden;
}

.location-profile-grid > div {
  min-width: 0;
  padding: 14px 16px;
  border-right: 1px solid #e3e8ea;
  border-bottom: 1px solid #e3e8ea;
  background: #fafbfb;
}

.location-profile-grid > div:nth-child(4n) { border-right: 0; }
.location-profile-grid > div:nth-last-child(-n + 4) { border-bottom: 0; }
.location-profile-grid .wide { grid-column: span 2; }
.location-profile-grid span { display: block; margin-bottom: 6px; color: #7a8790; font-size: 10px; font-weight: 800; }
.location-profile-grid strong { display: block; overflow-wrap: anywhere; color: #17212a; font-size: 13px; }

.location-draft-actions {
  align-items: center;
  margin-top: 14px;
}

.location-draft-actions .form-status { flex: 1; margin: 0; }
.location-draft-actions button { flex: 0 0 auto; }

.policy-settings-grid {
  align-items: start;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.policy-card {
  min-width: 0;
  height: 100%;
}

.policy-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 16px 0;
  padding: 12px 14px;
  border-left: 3px solid #ffd21f;
  background: #f4f7f7;
}

.policy-summary strong { color: #1b2730; font-size: 12px; }
.policy-summary span { color: #5f6d76; font-size: 11px; text-align: right; }

.settings-save-bar {
  position: sticky;
  bottom: 16px;
  z-index: 4;
  align-items: center;
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid #d8e0e2;
  border-radius: 7px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 12px 30px rgba(22, 38, 47, .12);
  backdrop-filter: blur(12px);
}

.settings-save-bar p { margin: 0; color: #697780; font-size: 11px; }
.settings-save-bar button { flex: 0 0 auto; }

@media (max-width: 980px) {
  .command-login-card { grid-template-columns: minmax(280px, .8fr) minmax(390px, 1.2fr); }
  .command-domain-grid { grid-template-columns: 1fr; }
  .command-domain-card { min-height: 112px !important; }
  .command-domain-card > b { margin-top: 10px; }
  .openplay-session-day-track { grid-template-columns: 1fr; }
  .openplay-manager-layout { grid-template-columns: 1fr; }
  .location-profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .location-profile-grid > div:nth-child(4n) { border-right: 1px solid #e3e8ea; }
  .location-profile-grid > div:nth-child(2n) { border-right: 0; }
  .location-profile-grid > div:nth-last-child(-n + 4) { border-bottom: 1px solid #e3e8ea; }
  .location-profile-grid > div:nth-last-child(-n + 2) { border-bottom: 0; }
}

@media (max-width: 860px) {
  body.admin-console-mode .admin-workspace { grid-template-columns: minmax(0, 1fr); min-height: calc(100svh - 64px); }
  body.admin-console-mode .admin-sidebar { position: static; width: 100%; height: auto; padding: 7px 10px; }
  body.admin-console-mode .admin-sidebar-head,
  body.admin-console-mode .admin-sidebar-foot { display: none; }
  body.admin-console-mode .admin-menu { display: flex; gap: 6px; overflow-x: auto; margin: 0; scrollbar-width: none; }
  body.admin-console-mode .admin-menu::-webkit-scrollbar { display: none; }
  body.admin-console-mode .admin-menu button { flex: 0 0 auto; min-height: 38px !important; }
  body.admin-console-mode .admin-menu-group { flex: 0 0 auto; }
  body.admin-console-mode .admin-commandbar { position: static; }
  body.admin-console-mode .admin-content { padding: 18px 14px 30px; }
  .command-center-topbar { min-height: 64px; padding: 0 14px; }
  .command-center-brand img { width: 76px; }
  .command-center-brand div { padding-left: 10px; }
  .command-center-brand strong { font-size: 11px; }
  .command-center-location { width: min(240px, 36vw); }
  .command-center-account > span { display: none; }
  .openplay-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .command-login-page { display: block; padding: 0; background: #fff; }
  .command-login-card { width: 100%; min-height: 100svh; grid-template-columns: 1fr; border: 0; border-radius: 0; box-shadow: none; }
  .command-login-brand { min-height: 244px; padding: 36px 24px 32px; justify-content: flex-end; }
  .command-login-brand::after { right: 24px; bottom: 20px; width: 48%; }
  .command-login-brand img { position: absolute; top: 30px; left: 24px; width: 128px; height: 50px; }
  .command-login-brand > span { margin-top: 0; }
  .command-login-brand h1 { font-size: 32px; }
  .command-login-brand p { margin-top: 12px; font-size: 11px; }
  .command-login-panel { padding: 34px 24px 42px; justify-content: flex-start; }
  .command-login-domains { margin-top: 26px; }
  .command-login-page > footer { display: none; }
  .command-center-account { gap: 4px; }
  .command-center-account button { padding-inline: 5px; }
  .command-center-brand div { display: none; }
  .command-center-location { width: min(190px, 42vw); }
  .command-center-location select { min-height: 38px; padding-inline: 10px 30px; font-size: 11px; }
  .openplay-admin-actions { justify-content: stretch; }
  .openplay-admin-actions > * { flex: 1; }
  .openplay-kpis { gap: 8px; }
  .openplay-session-grid { gap: 22px; }
  .openplay-session-day { gap: 9px; }
  .openplay-session-day-head { padding-inline: 1px; }
  .openplay-session-scroll-hint { display: none; }
  .openplay-session-day-track {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 0;
    padding: 0;
    overflow: visible;
  }
  .openplay-session-day-track > .openplay-session-card {
    width: 100%;
  }
  .openplay-session-card,
  .openplay-manager-panel .openplay-session-card { grid-template-columns: 76px minmax(0, 1fr); padding: 12px; }
  .openplay-session-time { min-height: 70px; }
  .openplay-session-time span { font-size: 16px; }
  .openplay-session-actions { grid-column: 1 / -1; justify-content: stretch; }
  .openplay-session-actions > .openplay-roster-primary { flex: 1; }
  .openplay-template-toolbar { grid-template-columns: 1fr 1fr; }
  .openplay-template-toolbar select { grid-column: 1 / -1; }
  .openplay-template-toolbar button:last-child { grid-column: 1 / -1; }
  .openplay-template-row { align-items: flex-start; flex-direction: column; }
  .openplay-template-row > div:last-child { width: 100%; }
  .openplay-template-row button { flex: 1; }
  .openplay-roster-row { grid-template-columns: 1fr; gap: 9px; }
  .openplay-roster-row .table-actions { justify-content: flex-start; }
  .openplay-roster-row .table-actions button { flex: 1; }
  .openplay-manual-search { grid-template-columns: 1fr; }
  .openplay-manual-search button { width: 100%; }
  .openplay-load-more { align-items: stretch; flex-direction: column; }
  .openplay-load-more button { width: 100%; }
  .openplay-load-more span { text-align: center; }
  .openplay-editor-actions { align-items: stretch; flex-direction: column; }
  .openplay-editor-actions button { width: 100%; }
  .openplay-external-participants-head { align-items: stretch; flex-direction: column; }
  .openplay-external-participants-head button { width: 100%; }
  .openplay-external-participant-row { grid-template-columns: 1fr; align-items: stretch; }
  .openplay-external-participant-remove { width: 100%; }
  .openplay-session-modal { max-height: calc(100dvh - 20px); padding: 18px; }
  .openplay-session-form .time-pair,
  .openplay-criteria-grid,
  .openplay-rule-grid { grid-template-columns: 1fr; }
  .location-settings-tabs { display: flex; width: 100%; }
  .location-settings-tabs button { flex: 1; padding-inline: 10px; }
  .location-profile-head,
  .settings-section-heading,
  .location-draft-actions,
  .settings-save-bar { flex-direction: column; align-items: stretch; }
  .location-picker { width: 100%; }
  .location-profile-grid { grid-template-columns: 1fr; }
  .location-profile-grid .wide { grid-column: auto; }
  .location-profile-grid > div,
  .location-profile-grid > div:nth-child(2n),
  .location-profile-grid > div:nth-child(4n),
  .location-profile-grid > div:nth-last-child(-n + 2) { border-right: 0; border-bottom: 1px solid #e3e8ea; }
  .location-profile-grid > div:last-child { border-bottom: 0; }
  .policy-settings-grid { grid-template-columns: 1fr; }
  .policy-summary { align-items: flex-start; flex-direction: column; }
  .policy-summary span { text-align: left; }
  .settings-save-bar { bottom: 8px; }
  .settings-save-bar button { width: 100%; }
}

@media (max-width: 380px) {
  .command-login-domains { grid-template-columns: 1fr; }
  .command-login-domains b { display: inline; margin-right: 5px; }
  .command-center-topbar { padding-inline: 10px; }
  .command-center-brand img { width: 68px; }
  .command-center-account button { font-size: 9px; }
}

/* Lesson + My SPOMOTIVE — customer experience polish */
.lesson-page,
.my-bookings-page {
  --customer-line: #dfe5e8;
  --customer-soft: #f6f8f9;
  --customer-muted: #66737c;
}

.lesson-page .lesson-hero { min-height: 198px; }
.lesson-page .lesson-hero .hero-image { min-height: 198px; }

.lesson-catalog-panel .panel-head {
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

.lesson-section-link {
  flex: 0 0 auto;
  gap: 10px;
  padding-inline: 16px;
}

.lesson-section-link span {
  color: #9a7600;
  font-size: 15px;
  line-height: 1;
}

.lesson-page .lesson-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}

.lesson-page .lesson-card {
  min-height: 252px;
  padding: 22px;
  overflow: hidden;
  border-color: var(--customer-line);
  border-radius: var(--radius-card);
  box-shadow: 0 1px 2px rgba(16, 24, 32, .035), 0 10px 26px rgba(16, 24, 32, .045);
}

.lesson-page .lesson-card--featured {
  grid-column: span 2;
  min-height: 268px;
  padding: 25px;
}

.lesson-page .lesson-card::before {
  right: 0;
  bottom: auto;
  left: 0;
  height: 4px;
  border-radius: 0;
}

.lesson-page .lesson-card::after {
  top: -82px;
  right: -70px;
  width: 190px;
  height: 190px;
  opacity: .42;
}

.lesson-card-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.lesson-card-index {
  color: #a5afb5;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
}

.lesson-card-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.lesson-page .lesson-card h3 {
  margin: 18px 0 8px;
  font-size: 21px;
  line-height: 1.24;
}

.lesson-page .lesson-card--featured h3 { font-size: 27px; }
.lesson-page .lesson-card p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  color: var(--customer-muted);
  font-size: 13px;
  line-height: 1.62;
}

.lesson-page .lesson-card--featured p {
  max-width: 520px;
  font-size: 14px;
}

.lesson-page .lesson-meta { margin: 18px 0 14px; }
.lesson-page .lesson-meta span {
  padding: 6px 8px;
  color: #526069;
  border: 1px solid #e4e9eb;
  border-radius: 7px;
  background: #f7f9f9;
  font-size: 10px;
}

.lesson-page .lesson-card-footer {
  align-items: center;
  padding-top: 14px;
}

.lesson-page .lesson-card-footer strong {
  min-width: 0;
  font-size: 17px;
}

.lesson-card-cta {
  flex: 0 0 auto;
  color: #39464f !important;
}

.lesson-schedule-panel { scroll-margin-top: 132px; }
.lesson-schedule-toolbar {
  display: grid;
  grid-template-columns: minmax(210px, .85fr) minmax(190px, .7fr) minmax(320px, 1.25fr);
  gap: var(--space-3);
  align-items: end;
  padding: var(--space-4);
  border: 1px solid var(--customer-line);
  border-radius: 14px;
  background: var(--customer-soft);
}

.lesson-location-control,
.lesson-location-control > .field,
.lesson-date-field,
.lesson-type-control { min-width: 0; }

.lesson-location-control > .field {
  width: 100%;
  min-width: 0 !important;
}

.lesson-control-label {
  display: block;
  margin-bottom: 7px;
  color: #4f5a63;
  font-size: 12px;
  font-weight: 800;
}

.lesson-page .lesson-filter-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin: 0;
  padding: 4px;
  border: 1px solid #d8e0e3;
  border-radius: 11px;
  background: #e9eef0;
}

.lesson-page .lesson-filter-tabs button {
  min-width: 0;
  min-height: 40px !important;
  padding: 8px 7px;
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lesson-page .lesson-filter-tabs button.active {
  color: #171d22;
  background: #fff;
  box-shadow: 0 4px 12px rgba(16, 24, 32, .08), inset 0 -3px 0 var(--yellow);
}

.lesson-schedule-context {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 12px 2px 0;
  color: #68747c;
  font-size: 11px;
  line-height: 1.5;
}

.lesson-schedule-context span {
  color: var(--green);
  font-size: 8px;
}

.lesson-page .occurrence-list { gap: 10px; margin-top: 14px; }
.lesson-page .occurrence {
  grid-template-columns: 104px minmax(0, 1fr) minmax(150px, auto);
  min-height: 104px;
  gap: 18px;
  padding: 14px 16px;
  border-color: var(--customer-line);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(16, 24, 32, .025);
}

.lesson-page .occurrence-time {
  align-items: center;
  padding: 13px 14px;
  border: 0;
  border-radius: 11px;
  background: #f1f4f5;
  text-align: center;
}

.lesson-page .occurrence-time > span { font-size: 20px; }
.lesson-page .occurrence-time small { font-size: 10px; }
.occurrence-title-row {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
}

.occurrence-title-row strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.lesson-occurrence-type {
  flex: 0 0 auto;
  padding: 4px 6px;
  color: #146d88;
  border-radius: 5px;
  background: #e4f4f9;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .05em;
}

.lesson-occurrence-type.private {
  color: #7a5900;
  background: #fff1bd;
}

.lesson-page .occurrence-main > span {
  margin-top: 7px;
  font-size: 12px;
}

.occurrence-meta {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.occurrence-meta span {
  margin: 0 !important;
  padding: 5px 7px;
  color: #59666e !important;
  border-radius: 6px;
  background: #f1f4f5;
  font-size: 10px !important;
  font-weight: 800;
}

.lesson-page .occurrence-actions {
  min-width: 150px;
  align-items: stretch;
  flex-direction: column;
  justify-content: center;
}

.lesson-page .occurrence-actions .tag {
  align-self: flex-end;
  max-width: 190px;
  text-align: center;
}

.lesson-page .lesson-apply-button,
.lesson-page .lesson-waitlist-button {
  width: 100%;
  min-width: 132px;
  min-height: var(--control-sm);
}

.lesson-page .lesson-waitlist-button {
  color: #6d5300;
  border-color: #e0c257;
  background: #fffdf5;
}

.lesson-page .lesson-waitlist-button:hover { background: #fff6cd; }
.lesson-empty-state {
  display: grid;
  justify-items: center;
  margin-top: 14px;
  padding: 40px 20px;
  color: var(--customer-muted);
  text-align: center;
  border: 1px dashed #cfd8dc;
  border-radius: 14px;
  background: #fafbfb;
}

.lesson-empty-state > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: #7c6206;
  border-radius: 12px;
  background: #fff1b7;
  font-size: 21px;
}

.lesson-empty-state strong {
  margin-top: 14px;
  color: #253139;
  font-size: 15px;
}

.lesson-empty-state p {
  max-width: 470px;
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.6;
}

.lesson-occurrence-skeleton,
.my-bookings-skeleton,
.member-lesson-loading {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.lesson-occurrence-skeleton span,
.my-bookings-skeleton span,
.member-lesson-loading span {
  display: block;
  min-height: 92px;
  border: 1px solid #e5eaec;
  border-radius: 14px;
  background: linear-gradient(100deg, #f3f5f6 28%, #fafbfb 40%, #f3f5f6 54%);
  background-size: 240% 100%;
  animation: customer-skeleton 1.25s ease-in-out infinite;
}

@keyframes customer-skeleton {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

.lesson-program-modal .modal-actions {
  position: sticky;
  z-index: 3;
  bottom: -20px;
  margin: 18px -20px -20px;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid #dfe5e8;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 -10px 24px rgba(16, 24, 32, .05);
  backdrop-filter: blur(14px);
}

.lesson-program-modal .modal-actions .primary { width: auto; min-width: 190px; }
.lesson-program-option > div { min-width: 0; }

/* My bookings */
.my-bookings-page .my-bookings-shell { overflow: visible; }
.my-bookings-page .my-bookings-shell .panel-head {
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-bottom: 0;
}

.my-bookings-page .my-bookings-shell .panel-head h1 {
  margin: 5px 0 0;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.16;
}

.my-bookings-page .my-bookings-shell .panel-body { padding-top: 18px; }
.my-bookings-account-note {
  flex: 0 0 auto;
  padding: 8px 11px;
  color: #5e6971;
  border: 1px solid #dfe5e8;
  border-radius: 999px;
  background: #f7f9f9;
  font-size: 10px;
  font-weight: 800;
}

.my-bookings-page .my-bookings-tabs { margin: 0; }
.my-bookings-page .my-bookings-panel { margin-top: 16px; }
.my-bookings-page .my-bookings-section { border-radius: var(--radius-card); }
.my-bookings-page .my-bookings-section-head { padding: 24px 24px 0; }
.my-bookings-page .my-bookings-section-head h2,
.my-bookings-page .my-bookings-section-head h3 { font-size: 23px; }
.my-bookings-page .my-list { gap: 10px; }

.my-bookings-page .my-booking-card {
  position: relative;
  grid-template-columns: 72px minmax(0, 1fr) minmax(150px, auto);
  gap: 16px;
  min-height: 104px;
  padding: 16px;
  overflow: hidden;
  border-color: var(--customer-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 32, .03);
}

.my-bookings-page .my-booking-card::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: #b7c2c7;
  content: "";
}

.my-bookings-page .my-booking-card--openplay::before { background: var(--yellow); }
.my-bookings-page .my-booking-card--rental::before { background: #146d88; }
.my-bookings-page .my-booking-card--lesson::before { background: #8064b3; }

.my-bookings-page .my-date {
  display: flex;
  width: 72px;
  min-height: 68px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 9px 7px;
  border-radius: 11px;
  background: var(--navy);
  line-height: 1.1;
}

.my-bookings-page .my-date span { font-size: 15px; }
.my-bookings-page .my-date small {
  margin-top: 7px;
  color: #b9c7ce;
  font-size: 10px;
}

.my-booking-copy { min-width: 0; }
.my-booking-kind {
  display: inline-flex;
  margin-bottom: 6px;
  color: #7a610b;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .1em;
}

.my-bookings-page .my-booking-copy > strong {
  color: #1b252c;
  font-size: 17px;
  line-height: 1.38;
  overflow-wrap: anywhere;
}

.my-booking-meta {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
  margin-top: 8px;
  color: var(--customer-muted);
  font-size: 12px;
  line-height: 1.45;
}

.my-booking-meta span {
  display: inline-flex;
  align-items: center;
}

.my-booking-meta span + span::before {
  width: 3px;
  height: 3px;
  margin: 0 8px;
  border-radius: 50%;
  background: #a7b1b7;
  content: "";
}

.my-booking-time { color: #32414a; font-weight: 800; }
.my-booking-note {
  margin: 9px 0 0 !important;
  color: #785d0a !important;
  font-size: 10px !important;
  line-height: 1.5;
}

.my-bookings-page .my-booking-card .my-actions {
  min-width: 150px;
  flex-wrap: wrap;
  align-content: center;
  justify-content: flex-end;
}

.my-bookings-page .my-booking-card .my-actions > .tag,
.my-bookings-page .my-booking-card .my-actions > button,
.my-bookings-page .my-booking-card .my-actions > a {
  min-height: var(--control-sm);
}

.my-bookings-page .my-booking-card .my-actions > .tag {
  align-items: center;
  justify-content: center;
  padding: 0 11px;
  line-height: 1.2;
}

.my-bookings-page .my-booking-primary { width: auto; }
.my-bookings-page .booking-status--success { color: #17654e; background: #e5f5ee; }
.my-bookings-page .booking-status--pending { color: #715600; background: #fff0b5; }
.my-bookings-page .booking-status--danger { color: #a13e35; background: #fff0ee; }
.my-bookings-page .booking-status--neutral { color: #53616a; background: #edf1f2; }
.my-bookings-page .danger {
  min-height: var(--control-sm);
  padding-inline: 12px;
  border-radius: var(--radius-control);
  background: #fff;
}

.my-bookings-page .my-openplay-card {
  grid-template-columns: 72px minmax(0, 1fr) minmax(150px, auto);
  gap: 16px;
  padding: 16px;
  background: #fff;
}

.my-bookings-page .my-openplay-card::before {
  top: 0;
  right: auto;
  bottom: 0;
  left: 0;
  width: 3px;
  height: auto;
  background: var(--yellow);
}

.my-bookings-page .my-openplay-manage-link { min-width: 156px; }
.my-bookings-empty {
  display: grid;
  justify-items: center;
  padding: 34px 20px;
  border-radius: 14px;
}

.my-bookings-empty strong { font-size: 15px; }
.my-bookings-empty p {
  max-width: 480px;
  margin: 3px 0 0;
  color: #68747c;
  font-size: 12px;
  line-height: 1.6;
}

.my-empty-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 16px;
}

.my-empty-actions > * { min-width: 150px; }
.my-bookings-skeleton { margin: 0; }
.my-bookings-skeleton span { min-height: 104px; }

.my-bookings-page .active-lessons-panel { border-radius: var(--radius-card); }
.my-bookings-page .member-lesson-grid { gap: 16px; }
.my-bookings-page .member-lesson-card {
  border-radius: var(--radius-card);
  box-shadow: 0 1px 2px rgba(16, 24, 32, .035), 0 12px 30px rgba(16, 24, 32, .045);
}

.my-bookings-page .member-lesson-card.has-payment-request {
  border-color: #e2c14a;
  box-shadow: 0 1px 2px rgba(16, 24, 32, .035), 0 14px 34px rgba(183, 138, 0, .09);
}

.my-bookings-page .member-lesson-card-head { padding: 22px 22px 16px; }
.my-bookings-page .member-lesson-card-head > div { min-width: 0; }
.my-bookings-page .member-lesson-card-head h3 {
  font-size: 21px;
  overflow-wrap: anywhere;
}

.my-bookings-page .member-lesson-card-head small {
  display: block;
  margin-top: 6px;
  color: var(--customer-muted);
  font-size: 12px;
}

.my-bookings-page .member-lesson-next {
  margin: 0 22px 16px;
  padding: 15px 16px;
  border-radius: 11px;
}

.my-bookings-page .member-lesson-next strong { font-size: 15px; }
.my-bookings-page .member-lesson-next small { font-size: 12px; }
.my-bookings-page .member-lesson-payment-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 22px 16px;
  padding: 14px;
  border-radius: 11px;
}

.my-bookings-page .member-lesson-payment-note > div { min-width: 0; }
.my-bookings-page .member-lesson-payment-note span {
  display: block;
  margin-top: 4px;
  line-height: 1.5;
}

.my-bookings-page .member-lesson-payment-note .primary {
  width: auto;
  min-width: 112px;
  flex: 0 0 auto;
}

.my-bookings-page .member-lesson-progress { padding: 0 22px 18px; }
.my-bookings-page .member-lesson-progress-copy span,
.my-bookings-page .member-lesson-period { font-size: 12px; }
.my-bookings-page .member-lesson-sessions { gap: 7px; margin: 0 22px 18px; }
.my-bookings-page .member-lesson-session {
  min-height: 46px;
  padding: 10px 11px;
  font-size: 12px;
}

.my-bookings-page .member-lesson-session small { font-size: 10px; }
.member-lesson-sessions-empty {
  padding: 18px 12px;
  color: var(--customer-muted);
  text-align: center;
  border: 1px dashed #d7dfe2;
  border-radius: 10px;
  background: #fafbfb;
  font-size: 12px;
  line-height: 1.55;
}

.member-lesson-session-footnote {
  color: var(--customer-muted);
  text-align: right;
  font-size: 11px;
}

.my-bookings-page .member-lesson-renewal-state { margin-inline: 22px; font-size: 11px; }
.my-bookings-page .member-lesson-card-actions {
  min-height: 66px;
  padding: 12px 22px 16px;
}

.my-bookings-page .member-lesson-card-actions .ghost { min-width: 112px; }
.my-bookings-page .member-lesson-request-state {
  max-width: 360px;
  font-size: 11px;
  line-height: 1.5;
}

.member-lesson-loading { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.member-lesson-loading span { min-height: 340px; }

.my-auth-panel {
  width: min(660px, 100%);
  margin: 48px auto 0;
  text-align: center;
}

.my-auth-panel .panel-body { padding: 48px 36px; }
.my-auth-mark {
  display: grid;
  width: 56px;
  height: 56px;
  margin: 0 auto 20px;
  place-items: center;
  color: var(--navy);
  border-radius: 16px;
  background: var(--yellow);
  box-shadow: 0 10px 24px rgba(212, 168, 0, .18);
  font-size: 24px;
  font-weight: 900;
}

.my-auth-panel h1 { margin: 6px 0 0; font-size: 34px; }
.my-auth-panel p {
  max-width: 480px;
  margin: 12px auto 0;
  color: var(--customer-muted);
  font-size: 13px;
  line-height: 1.65;
}

.my-auth-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  max-width: 360px;
  margin: 24px auto 0;
}

/* Operator lesson timetable import status */
.lesson-import-status {
  margin: 0 0 14px;
  overflow: hidden;
  border: 1px solid #d9e0e3;
  border-radius: var(--radius-card);
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.lesson-import-status-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px 18px;
  color: #f7fafb;
  background:
    radial-gradient(circle at 88% 12%, rgba(255, 214, 51, .16), transparent 32%),
    linear-gradient(135deg, #111b23 0%, #1b2a34 100%);
}

.lesson-import-status-head > div { min-width: 0; }
.lesson-import-status-head .step-kicker { color: var(--yellow); }
.lesson-import-status-head h3 {
  margin: 6px 0 0;
  color: #fff;
  font-size: 21px;
  line-height: 1.24;
}

.lesson-import-status-head p {
  margin: 7px 0 0;
  color: #b9c6cd;
  font-size: 12px;
  line-height: 1.55;
}

.lesson-import-state {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 6px 10px;
  color: #124f3d;
  border: 1px solid rgba(185, 235, 216, .5);
  border-radius: 999px;
  background: #dff5eb;
  font-size: 10px;
  font-weight: 900;
}

.lesson-import-status.has-review .lesson-import-state {
  color: #725600;
  border-color: rgba(234, 210, 122, .72);
  background: #fff0b5;
}

.lesson-import-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 14px 16px;
}

.lesson-import-metrics > div {
  display: grid;
  min-width: 0;
  align-content: center;
  min-height: 96px;
  padding: 14px 15px;
  border: 1px solid #e2e7e9;
  border-radius: 12px;
  background: #f8fafb;
}

.lesson-import-metrics span {
  color: #64717a;
  font-size: 10px;
  font-weight: 850;
}

.lesson-import-metrics strong {
  margin-top: 3px;
  color: #172229;
  font-size: 27px;
  font-variant-numeric: tabular-nums;
  line-height: 1.08;
}

.lesson-import-metrics > div:first-child strong { color: var(--green); }
.lesson-import-metrics > div:nth-child(2) strong { color: #9a6800; }

.lesson-import-metrics small {
  margin-top: 6px;
  color: #7c878e;
  font-size: 10px;
  line-height: 1.45;
}

.lesson-import-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 16px 16px;
  padding: 12px 14px;
  color: #52616a;
  border: 1px solid #dbe9e4;
  border-radius: 11px;
  background: #f2f8f5;
}

.lesson-import-note > span {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  flex: 0 0 auto;
  color: #fff;
  border-radius: 50%;
  background: var(--green);
  font-size: 11px;
  font-weight: 900;
}

.lesson-import-note p {
  margin: 1px 0 0;
  font-size: 11px;
  line-height: 1.6;
}

.lesson-roster-review {
  margin: 0 0 14px;
  border-color: #dbe2e5;
  box-shadow: var(--shadow-sm);
}

.lesson-roster-review .console-card-head {
  align-items: center;
  padding: 18px 20px;
  background: linear-gradient(180deg, #fff 0%, #fbfcfc 100%);
}

.lesson-roster-review .console-card-head h3 {
  margin-top: 4px;
  font-size: 18px;
}

.lesson-roster-review .console-card-head p {
  max-width: 720px;
  line-height: 1.55;
}

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

.lesson-roster-row {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 14px;
  border: 1px solid #e0e6e8;
  border-radius: 12px;
  background: #fff;
}

.lesson-roster-time {
  display: grid;
  min-height: 64px;
  align-content: center;
  padding: 10px 11px;
  color: #fff;
  border-radius: 10px;
  background: #14212a;
}

.lesson-roster-time strong {
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.lesson-roster-time span {
  margin-top: 5px;
  color: #aebbc2;
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}

.lesson-roster-copy { min-width: 0; }

.lesson-roster-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.lesson-roster-title > strong {
  min-width: 0;
  color: #18242b;
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.lesson-roster-progress {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  flex: 0 0 auto;
  padding: 5px 9px;
  color: #6d5200;
  border: 1px solid #ecd98a;
  border-radius: 999px;
  background: #fff8d8;
  font-size: 10px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.lesson-roster-copy > p {
  margin: 5px 0 0;
  color: #748088;
  font-size: 10px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.lesson-roster-issues {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 9px;
}

.lesson-roster-schedule,
.lesson-roster-issue {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 850;
}

.lesson-roster-schedule.is-applied {
  color: #126048;
  border: 1px solid #bee2d5;
  background: #e9f7f2;
}

.lesson-roster-schedule.needs-review {
  color: #8c3f2d;
  border: 1px solid #edc5bb;
  background: #fff0ec;
}

.lesson-roster-issue {
  color: #5e6970;
  border: 1px solid #dce2e5;
  background: #f5f7f8;
}

@media (max-width: 1100px) {
  .lesson-page .lesson-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lesson-page .lesson-card--featured { grid-column: span 1; }
  .lesson-schedule-toolbar { grid-template-columns: 1fr 1fr; }
  .lesson-type-control { grid-column: 1 / -1; }
  .my-bookings-page .member-lesson-grid { grid-template-columns: 1fr; }
  .member-lesson-loading { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .lesson-import-status-head {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
    padding: 18px 16px 16px;
  }
  .lesson-import-state { align-self: flex-start; }
  .lesson-import-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; }
  .lesson-import-metrics > div { min-height: 88px; padding: 12px; }
  .lesson-import-metrics > div:last-child { grid-column: 1 / -1; }
  .lesson-import-note { margin: 0 12px 12px; padding: 11px 12px; }
  .lesson-roster-review .console-card-head {
    align-items: stretch;
    flex-direction: column;
    padding: 16px;
  }
  .lesson-roster-review .console-card-head .ghost { width: 100%; }
  .lesson-roster-review .console-card-body { padding: 12px; }
  .lesson-roster-row {
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 10px;
    padding: 11px;
  }
  .lesson-roster-time { min-height: 60px; padding: 9px; }
  .lesson-roster-time strong { font-size: 15px; }
  .lesson-roster-title { align-items: stretch; flex-direction: column; gap: 7px; }
  .lesson-roster-progress { align-self: flex-start; }
  .lesson-page .lesson-hero,
  .lesson-page .lesson-hero .hero-image { min-height: 166px; }
  .lesson-page .lesson-hero .hero-copy { padding-block: 20px; }
  .lesson-page .lesson-hero h1 { font-size: 30px; }
  .lesson-catalog-panel .panel-head { align-items: stretch; }
  .lesson-section-link { width: 100%; }
  .lesson-page .lesson-grid { grid-template-columns: 1fr; }
  .lesson-page .lesson-card,
  .lesson-page .lesson-card--featured {
    grid-column: span 1;
    min-height: 0;
    padding: 20px;
  }
  .lesson-page .lesson-card--featured h3,
  .lesson-page .lesson-card h3 { font-size: 22px; }
  .lesson-page .lesson-card--featured p,
  .lesson-page .lesson-card p { font-size: 12px; }
  .lesson-schedule-toolbar { grid-template-columns: 1fr; padding: 14px; }
  .lesson-type-control { grid-column: auto; }
  .lesson-page .lesson-filter-tabs button { min-height: var(--control-sm) !important; font-size: 10px; }
  .lesson-page .occurrence {
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 12px;
    padding: 13px;
  }
  .lesson-page .occurrence-time { min-height: 70px; padding: 10px 7px; }
  .lesson-page .occurrence-time > span { font-size: 17px; }
  .occurrence-title-row { align-items: flex-start; flex-direction: column; gap: 5px; }
  .lesson-page .occurrence-actions {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) minmax(132px, 1.2fr);
    gap: 8px;
    min-width: 0;
  }
  .lesson-page .occurrence-actions .tag { align-self: stretch; max-width: none; }
  .lesson-page .lesson-apply-button,
  .lesson-page .lesson-waitlist-button { min-width: 0; }
  .lesson-program-modal .modal-actions { bottom: -18px; margin: 16px -15px -18px; padding-inline: 15px; }
  .lesson-program-modal .modal-actions .primary { width: 100%; min-width: 0; }

  .my-bookings-page .my-bookings-shell .panel-head { align-items: flex-start; gap: 12px; }
  .my-bookings-account-note { align-self: flex-start; }
  .my-bookings-page .my-bookings-shell .panel-body { padding-top: 15px; }
  .my-bookings-page .my-bookings-panel { margin-top: 12px; }
  .my-bookings-page .my-bookings-tabs { margin-bottom: 0; }
  .my-bookings-page .my-bookings-section-head { padding: 20px 16px 0; }
  .my-bookings-page .my-booking-card,
  .my-bookings-page .my-openplay-card {
    grid-template-columns: 60px minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
  }
  .my-bookings-page .my-date {
    width: 60px;
    min-height: 60px;
    padding: 7px 5px;
  }
  .my-bookings-page .my-date span { font-size: 13px; }
  .my-bookings-page .my-booking-copy > strong { font-size: 16px; }
  .my-booking-meta { row-gap: 4px; font-size: 11px; }
  .my-bookings-page .my-booking-card .my-actions {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    min-width: 0;
    margin-top: 2px;
  }
  .my-bookings-page .my-booking-card .my-actions > .tag {
    justify-self: start;
    min-height: 40px;
  }
  .my-bookings-page .my-booking-card .my-actions > .my-booking-primary,
  .my-bookings-page .my-booking-card .my-actions > .my-openplay-manage-link {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    min-width: 0;
  }
  .my-bookings-page .my-booking-card .my-actions > .danger {
    grid-column: 2;
    grid-row: 1;
  }
  .my-bookings-empty { padding: 28px 16px; }
  .my-empty-actions { width: 100%; }
  .my-empty-actions > * { width: 100%; min-width: 0; }
  .my-bookings-page .member-lesson-card-head { padding: 19px 16px 14px; }
  .my-bookings-page .member-lesson-card-head .lesson-type { font-size: 9px; }
  .my-bookings-page .member-lesson-card-head h3 { font-size: 19px; }
  .my-bookings-page .member-lesson-next,
  .my-bookings-page .member-lesson-payment-note { margin-inline: 16px; }
  .my-bookings-page .member-lesson-payment-note { align-items: stretch; flex-direction: column; }
  .my-bookings-page .member-lesson-payment-note .primary { width: 100%; min-height: var(--control-md); }
  .my-bookings-page .member-lesson-progress { padding-inline: 16px; }
  .my-bookings-page .member-lesson-sessions { margin-inline: 16px; }
  .my-bookings-page .member-lesson-session {
    grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: 7px;
    padding: 9px;
  }
  .my-bookings-page .member-lesson-renewal-state { margin-inline: 16px; }
  .my-bookings-page .member-lesson-card-actions {
    align-items: stretch;
    flex-direction: column;
    padding: 14px 16px 16px;
  }
  .my-bookings-page .member-lesson-card-actions .ghost {
    order: 1;
    width: 100%;
    min-height: var(--control-md);
  }
  .my-bookings-page .member-lesson-request-state {
    order: 2;
    max-width: none;
    margin: 0;
    text-align: center;
  }
  .my-auth-panel { margin-top: 18px; }
  .my-auth-panel .panel-body { padding: 36px 20px; }
  .my-auth-actions { grid-template-columns: 1fr; }
}

@media (max-width: 390px) {
  .lesson-import-metrics { grid-template-columns: 1fr; }
  .lesson-import-metrics > div:last-child { grid-column: auto; }
  .lesson-page .lesson-filter-tabs { gap: 2px; padding: 3px; }
  .lesson-page .lesson-filter-tabs button { padding-inline: 4px; font-size: 9px; }
  .lesson-page .occurrence-actions { grid-template-columns: 1fr; }
  .lesson-page .occurrence-actions .tag { min-height: 36px; }
  .my-bookings-page .member-lesson-session {
    grid-template-columns: 48px minmax(0, 1fr);
  }
  .my-bookings-page .member-lesson-session small {
    grid-column: 2;
    justify-self: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lesson-occurrence-skeleton span,
  .my-bookings-skeleton span,
  .member-lesson-loading span { animation: none; }
}

/* Group lesson operations */
.lesson-series-console { margin-top: 16px; overflow: hidden; }
.lesson-series-create-card textarea { min-height: 96px; }
.lesson-private-create-card textarea { min-height: 96px; }
.lesson-private-block-rule,
.group-fixed-price {
  padding: 13px 14px;
  border: 1px solid #d9e3e5;
  border-radius: 11px;
  background: #f8faf9;
}
.lesson-private-block-rule b,
.lesson-private-block-rule span,
.group-fixed-price span,
.group-fixed-price strong,
.group-fixed-price small { display: block; }
.lesson-private-block-rule b { color: #204b5e; font-size: 11px; }
.lesson-private-block-rule span { margin-top: 5px; color: #63747c; font-size: 10px; line-height: 1.55; }
.group-fixed-price { border-color: #ead471; background: #fff9de; }
.group-fixed-price span { color: #806800; font-size: 9px; font-weight: 900; }
.group-fixed-price strong { margin-top: 5px; color: #1c2931; font-size: 21px; }
.group-fixed-price small { margin-top: 4px; color: #756b49; font-size: 9px; }
.lesson-series-ops-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.lesson-series-ops-card {
  min-width: 0;
  padding: 20px;
  border: 1px solid #d9e1e3;
  border-radius: 16px;
  background: linear-gradient(180deg, #fff 0%, #fbfcfc 100%);
  box-shadow: 0 9px 28px rgba(20, 37, 46, .055);
}
.lesson-series-ops-head,
.lesson-series-modal-section-head,
.lesson-series-upcoming-row,
.lesson-series-roster-row,
.lesson-payment-status-row {
  display: flex;
  align-items: center;
}
.lesson-series-ops-head { align-items: flex-start; justify-content: space-between; gap: 16px; }
.lesson-series-weekday {
  display: inline-flex;
  margin-bottom: 7px;
  color: #8c7100;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.lesson-series-ops-head h4 { margin: 0; color: #17242d; font-size: 19px; line-height: 1.35; }
.lesson-series-capacity {
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid #bfe2d5;
  border-radius: 999px;
  color: #16684f;
  background: #edf9f4;
  font-size: 11px;
  font-weight: 900;
}
.lesson-series-capacity.is-full { color: #8b4038; border-color: #ebc6c2; background: #fff4f2; }
.lesson-series-capacity.is-open { color: #315e74; border-color: #bfd9e4; background: #edf7fb; }
.lesson-series-chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
.lesson-series-chip-row span {
  padding: 6px 9px;
  border: 1px solid #e0e6e7;
  border-radius: 999px;
  color: #53636c;
  background: #f5f7f7;
  font-size: 10px;
  font-weight: 800;
}
.lesson-series-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 15px; }
.lesson-series-metrics > div { padding: 12px; border: 1px solid #e2e7e8; border-radius: 11px; background: #fff; }
.lesson-series-metrics > div.is-alert { border-color: #edcf62; background: #fff9df; }
.lesson-series-metrics span { display: block; color: #7b878d; font-size: 9px; font-weight: 800; }
.lesson-series-metrics strong { display: block; margin-top: 5px; color: #18262f; font-size: 18px; line-height: 1; }
.lesson-series-metrics small { color: #758188; font-size: 10px; }
.lesson-series-period { margin: 11px 0 0; color: #718087; font-size: 10px; }
.lesson-series-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  margin-top: 12px;
  padding: 10px 12px;
  border-left: 3px solid #e4ba1d;
  border-radius: 0 9px 9px 0;
  color: #615a3d;
  background: #fffbed;
  font-size: 10px;
  line-height: 1.5;
}
.lesson-series-note b { color: #8a6f00; white-space: nowrap; }
.lesson-series-upcoming { margin-top: 14px; padding-top: 13px; border-top: 1px solid #e4e9ea; }
.lesson-series-upcoming > span { display: block; margin-bottom: 8px; color: #748188; font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.lesson-series-upcoming-row { justify-content: space-between; gap: 12px; min-height: 48px; padding: 7px 0; border-top: 1px solid #eef1f2; }
.lesson-series-upcoming-row:first-of-type { border-top: 0; }
.lesson-series-upcoming-row strong,
.lesson-series-upcoming-row small { display: block; }
.lesson-series-upcoming-row strong { color: #1c2a33; font-size: 12px; }
.lesson-series-upcoming-row small { margin-top: 3px; color: #7a878e; font-size: 10px; }
.lesson-series-upcoming.is-empty p { margin: 0; color: #879299; font-size: 10px; }
.lesson-series-skip { min-height: 34px !important; padding: 7px 10px !important; font-size: 10px !important; }
.lesson-series-ops-actions { display: grid; grid-template-columns: minmax(0, 1.2fr) 1fr auto; gap: 7px; margin-top: 14px; }
.lesson-series-ops-actions button { min-width: 0; min-height: 40px; padding-inline: 10px; }
.lesson-private-console { margin-top: 16px; }
.lesson-private-session-card { border-color: #cfdee3; }
.lesson-private-session-metrics > div:nth-child(2) strong { overflow: hidden; font-size: 14px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.lesson-private-session-actions { grid-template-columns: minmax(0, 1fr) auto; }

.lesson-series-members-modal { width: min(900px, 100%); }
.lesson-series-modal-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.lesson-series-modal-summary > div { padding: 13px 14px; border: 1px solid #e0e6e7; border-radius: 11px; background: #f8faf9; }
.lesson-series-modal-summary span,
.lesson-series-modal-summary strong { display: block; }
.lesson-series-modal-summary span { color: #79868d; font-size: 9px; font-weight: 800; }
.lesson-series-modal-summary strong { margin-top: 5px; color: #17262f; font-size: 15px; }
.lesson-series-modal-section { margin-top: 12px; padding: 17px; border: 1px solid #dce3e5; border-radius: 13px; background: #fff; }
.lesson-series-modal-section-head { align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.lesson-series-modal-section-head h3 { margin: 0; color: #17252e; font-size: 15px; }
.lesson-series-modal-section-head p { margin: 4px 0 0; color: #77848b; font-size: 10px; line-height: 1.45; }
.lesson-series-roster { display: grid; gap: 7px; }
.lesson-series-roster-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 11px; padding: 11px; border: 1px solid #e4e9ea; border-radius: 10px; background: #fbfcfc; }
.lesson-series-roster-avatar { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 12px; color: #ffd92e; background: #17232c; font-size: 14px; font-weight: 900; }
.lesson-series-roster-copy { min-width: 0; }
.lesson-series-roster-copy strong { display: block; overflow: hidden; color: #18252e; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.lesson-series-roster-copy p { overflow: hidden; margin: 4px 0 0; color: #77838a; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.lesson-series-roster-progress { display: flex; align-items: flex-end; flex-direction: column; gap: 5px; }
.lesson-series-roster-progress b { color: #263640; font-size: 12px; }
.lesson-series-roster-empty { padding: 26px 18px; border: 1px dashed #ced8da; border-radius: 11px; text-align: center; background: #fafbfb; }
.lesson-series-roster-empty strong { color: #42525b; font-size: 13px; }
.lesson-series-roster-empty p { margin: 6px 0 0; color: #849097; font-size: 10px; }
.lesson-series-member-add { background: #fbfcfc; }
.learner-source-selector { min-width: 0; margin: 0; padding: 0; border: 0; }
.learner-source-selector > legend { margin-bottom: 8px; color: #35454e; font-size: 11px; font-weight: 900; }
.learner-source-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.learner-source-options label { position: relative; display: block; cursor: pointer; }
.learner-source-options input { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }
.learner-source-options label > span { display: block; min-height: 72px; padding: 12px 13px; border: 1px solid #d8e0e2; border-radius: 10px; background: #fff; }
.learner-source-options b,
.learner-source-options small { display: block; }
.learner-source-options b { color: #1d2b34; font-size: 12px; }
.learner-source-options small { margin-top: 5px; color: #79868d; font-size: 9px; line-height: 1.4; }
.learner-source-options input:checked + span { border-color: #d0a400; background: #fff9df; box-shadow: inset 0 0 0 1px #d0a400; }
.learner-source-options input:focus-visible + span { outline: 3px solid rgba(29, 111, 154, .24); outline-offset: 2px; }
.lesson-four-session-rule,
.lesson-series-settings-lock { padding: 12px 13px; border: 1px solid #eadb9f; border-radius: 10px; color: #6e6240; background: #fffbed; }
.lesson-four-session-rule b,
.lesson-four-session-rule span,
.lesson-series-settings-lock b,
.lesson-series-settings-lock span,
.lesson-series-settings-lock small { display: block; }
.lesson-four-session-rule b,
.lesson-series-settings-lock b { color: #8b7000; font-size: 11px; }
.lesson-four-session-rule span,
.lesson-series-settings-lock span { margin-top: 4px; font-size: 10px; line-height: 1.5; }
.lesson-series-settings-lock small { margin-top: 6px; color: #877d5b; font-size: 9px; }
.lesson-series-settings-modal { width: min(650px, 100%); }
.lesson-series-settings-modal textarea { min-height: 116px; }

.lesson-payment-status-row { flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.lesson-payment-gate { display: inline-flex; align-items: center; min-height: 26px; padding: 5px 9px; border: 1px solid #dbe2e4; border-radius: 999px; color: #6b7981; background: #f4f6f6; font-size: 9px; font-weight: 900; }
.lesson-payment-gate.is-ready { color: #7d6200; border-color: #e8ce68; background: #fff8d9; }
.lesson-payment-gate.is-sent { color: #265f7b; border-color: #b9d9e8; background: #eef8fc; }
.lesson-payment-gate.is-paid { color: #16684f; border-color: #bfe2d5; background: #edf9f4; }
.lesson-billing-ops-card .my-actions button[disabled] { color: #8e989d; border-color: #dfe4e5; background: #eef1f1; opacity: 1; }

@media (max-width: 1020px) {
  .lesson-series-ops-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .lesson-series-ops-card { padding: 16px; border-radius: 13px; }
  .lesson-series-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lesson-series-metrics > div { padding: 10px 8px; }
  .lesson-series-ops-actions { grid-template-columns: 1fr 1fr; }
  .lesson-series-ops-actions .danger { grid-column: 1 / -1; }
  .lesson-series-modal-summary { grid-template-columns: 1fr; }
  .lesson-series-roster-row { grid-template-columns: 38px minmax(0, 1fr); }
  .lesson-series-roster-avatar { width: 38px; height: 38px; }
  .lesson-series-roster-progress { grid-column: 2; align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
  .lesson-series-members-modal .lesson-series-modal-section { padding: 14px; }
  .learner-source-options { grid-template-columns: 1fr; }
}

@media (max-width: 390px) {
  .lesson-series-ops-actions { grid-template-columns: 1fr; }
  .lesson-series-ops-actions .danger { grid-column: auto; }
  .lesson-series-upcoming-row { align-items: flex-start; flex-direction: column; }
  .lesson-series-skip { width: 100%; }
}

/* Explicit-date lesson operations and public group applications */
.lesson-available-location {
  width: min(280px, 100%);
  flex: 0 0 auto;
}
.lesson-available-location .field { margin: 0; }
.lesson-public-series-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.lesson-public-series-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #d7e0e2;
  border-radius: 18px;
  background: linear-gradient(155deg, #fff 0%, #f7faf9 100%);
  box-shadow: 0 14px 34px rgba(18, 38, 48, .075);
}
.lesson-public-series-card::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  content: "";
  background: linear-gradient(90deg, #f4c900 0 34%, #16232c 34% 100%);
}
.lesson-public-series-card.is-full::before { background: linear-gradient(90deg, #b45a51 0 34%, #16232c 34% 100%); }
.lesson-public-series-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 22px 22px 17px;
}
.lesson-public-series-head > div { min-width: 0; }
.lesson-series-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #1c7558;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.lesson-series-live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2aa87c;
  box-shadow: 0 0 0 4px rgba(42, 168, 124, .12);
}
.lesson-public-series-card.is-full .lesson-series-live { color: #9b4a43; }
.lesson-public-series-card.is-full .lesson-series-live i { background: #b45a51; box-shadow: 0 0 0 4px rgba(180, 90, 81, .12); }
.lesson-public-series-head h3 {
  margin: 10px 0 0;
  color: #15232c;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -.035em;
}
.lesson-public-series-head p { margin: 7px 0 0; color: #6d7b83; font-size: 11px; }
.lesson-series-seat {
  flex: 0 0 auto;
  padding: 8px 11px;
  border: 1px solid #c8dfd7;
  border-radius: 999px;
  color: #17664e;
  background: #edf8f4;
  font-size: 10px;
  font-weight: 900;
}
.lesson-public-series-card.is-full .lesson-series-seat { color: #8e443d; border-color: #e5c9c6; background: #fff4f2; }
.lesson-public-series-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0 22px;
  overflow: hidden;
  border: 1px solid #dde4e6;
  border-radius: 12px;
  background: #dde4e6;
}
.lesson-public-series-facts > div { min-width: 0; padding: 12px; background: #fff; }
.lesson-public-series-facts span,
.lesson-public-series-facts strong { display: block; }
.lesson-public-series-facts span { color: #819097; font-size: 8px; font-weight: 900; letter-spacing: .07em; }
.lesson-public-series-facts strong { overflow: hidden; margin-top: 5px; color: #25343d; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.lesson-series-date-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 16px 22px; }
.lesson-series-date-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 5px 9px 5px 6px;
  border: 1px solid #dbe3e5;
  border-radius: 9px;
  color: #4f5f68;
  background: #fff;
  font-size: 10px;
  font-weight: 800;
}
.lesson-series-date-chip b {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 6px;
  color: #f5ce12;
  background: #17242d;
  font-size: 8px;
}
.lesson-series-date-chip.more,
.lesson-series-date-chip.is-pending { color: #75838a; background: #f4f6f6; }
.lesson-public-series-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 22px 20px;
  border-top: 1px solid #e4e9ea;
  background: rgba(255, 255, 255, .72);
}
.lesson-public-series-footer > div span,
.lesson-public-series-footer > div strong,
.lesson-public-series-footer > div small { display: block; }
.lesson-public-series-footer > div span { color: #8a7205; font-size: 8px; font-weight: 900; letter-spacing: .08em; }
.lesson-public-series-footer > div strong { margin-top: 4px; color: #14232c; font-size: 20px; }
.lesson-public-series-footer > div small { margin-top: 2px; color: #849097; font-size: 8px; }
.lesson-public-series-footer button { flex: 0 0 auto; min-width: 145px; }
.lesson-public-series-footer button span { margin-left: 6px; }
.lesson-public-series-card.skeleton { min-height: 360px; border-color: transparent; background: linear-gradient(90deg, #f1f3f3 20%, #fafbfb 45%, #f1f3f3 70%); background-size: 240% 100%; animation: lesson-public-loading 1.25s ease-in-out infinite; }
@keyframes lesson-public-loading { to { background-position: -240% 0; } }

.lesson-public-series-modal { width: min(820px, 100%); }
.lesson-series-detail-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}
.lesson-series-detail-summary > div {
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid #dfe6e7;
  border-radius: 11px;
  background: #f8faf9;
}
.lesson-series-detail-summary span,
.lesson-series-detail-summary strong { display: block; }
.lesson-series-detail-summary span { color: #839098; font-size: 8px; font-weight: 900; letter-spacing: .07em; }
.lesson-series-detail-summary strong { overflow: hidden; margin-top: 6px; color: #1d2d36; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.lesson-series-detail-section { padding: 17px; border: 1px solid #dce4e5; border-radius: 14px; }
.lesson-series-detail-section h3 { margin: 5px 0 13px; color: #17262f; font-size: 17px; }
.lesson-series-detail-dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.lesson-series-detail-dates > div {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid #e3e8e9;
  border-radius: 10px;
  background: #fbfcfc;
}
.lesson-series-detail-dates > div > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 9px; color: #f5ce12; background: #17242d; font-size: 9px; font-weight: 900; }
.lesson-series-detail-dates strong { color: #283942; font-size: 11px; }
.lesson-series-detail-dates small { color: #78858c; font-size: 9px; }
.lesson-series-detail-empty { padding: 25px; border: 1px dashed #d2dcde; border-radius: 10px; color: #7c898f; text-align: center; background: #fafbfb; font-size: 11px; }
.lesson-series-detail-price,
.lesson-series-application-total {
  margin-top: 14px;
  padding: 15px 17px;
  border: 1px solid #ead36a;
  border-radius: 13px;
  background: linear-gradient(135deg, #fff9d9, #fffdf1);
}
.lesson-series-detail-price span,
.lesson-series-detail-price strong,
.lesson-series-detail-price small,
.lesson-series-application-total span,
.lesson-series-application-total strong,
.lesson-series-application-total small { display: block; }
.lesson-series-detail-price span,
.lesson-series-application-total span { color: #806800; font-size: 8px; font-weight: 900; letter-spacing: .08em; }
.lesson-series-detail-price strong,
.lesson-series-application-total strong { margin-top: 5px; color: #18262f; font-size: 25px; }
.lesson-series-detail-price small,
.lesson-series-application-total small { margin-top: 4px; color: #746b49; font-size: 9px; line-height: 1.5; }
.lesson-series-application-flow { display: flex; align-items: center; gap: 8px; margin-bottom: 17px; padding: 12px 14px; border: 1px solid #dde4e5; border-radius: 11px; background: #f7f9f9; }
.lesson-series-application-flow span { color: #879299; font-size: 9px; font-weight: 900; white-space: nowrap; }
.lesson-series-application-flow span.active { color: #17242d; }
.lesson-series-application-flow i { flex: 1; height: 1px; background: #d8dfe1; }
.lesson-series-single-applicant { display: block; margin-top: 7px; color: #7d898f; font-size: 9px; line-height: 1.5; }
.lesson-series-party-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 9px; }
.lesson-series-party-tools .ghost { flex: 0 0 auto; min-height: 35px; padding: 7px 11px; }
.lesson-series-party-tools small { color: #748087; font-size: 9px; line-height: 1.5; text-align: right; }
.lesson-series-application-total small b { color: #5f511f; font-weight: 900; }
.lesson-product-terms { display: grid; gap: 10px; margin-top: 16px; }
.product-terms-highlight { padding: 14px 16px; border: 1px solid #ead36a; border-radius: 12px; background: #fffbe8; }
.product-terms-highlight strong { display: block; color: #392f0a; font-size: 12px; }
.product-terms-highlight ul { display: grid; gap: 5px; margin: 9px 0 0; padding-left: 18px; color: #685d35; font-size: 10px; line-height: 1.55; }
.lesson-product-terms details { border: 1px solid #dce4e5; border-radius: 11px; background: #fff; }
.lesson-product-terms summary { padding: 12px 14px; color: #283840; cursor: pointer; font-size: 10px; font-weight: 900; }
.product-terms-copy { display: grid; gap: 8px; padding: 0 14px 14px; color: #68757c; font-size: 10px; line-height: 1.62; }
.product-terms-copy p { margin: 0; }
.consent-line { display: flex; align-items: flex-start; gap: 9px; padding: 12px 14px; border: 1px solid #cce4d9; border-radius: 11px; color: #203c32; background: #f1faf6; font-size: 10px; font-weight: 900; line-height: 1.5; }
.consent-line input { flex: 0 0 auto; width: 16px; height: 16px; margin: 0; accent-color: #157357; }

.lesson-create-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.lesson-create-card-head h3 { margin: 5px 0 0; }
.lesson-create-card-head p { margin-bottom: 0; }
.lesson-create-type { flex: 0 0 auto; padding: 7px 9px; border: 1px solid #d9c354; border-radius: 999px; color: #806900; background: #fff9dd; font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.lesson-standard-program {
  box-sizing: border-box;
  padding: 13px 14px;
  border: 1px solid #d9e2e4;
  border-radius: 11px;
  background: linear-gradient(135deg, #f8faf9, #fff);
}
.lesson-standard-program span,
.lesson-standard-program strong,
.lesson-standard-program small { display: block; }
.lesson-standard-program span { color: #7e8b91; font-size: 9px; font-weight: 900; }
.lesson-standard-program strong { margin-top: 5px; color: #182730; font-size: 16px; }
.lesson-standard-program small { margin-top: 4px; color: #77858c; font-size: 9px; }
.lesson-date-selection {
  overflow: hidden;
  border: 1px solid #d8e1e3;
  border-radius: 13px;
  background: #f9fbfa;
}
.lesson-date-selection-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  border-bottom: 1px solid #e2e7e8;
  background: #fff;
}
.lesson-date-selection-head span,
.lesson-date-selection-head strong { display: block; }
.lesson-date-selection-head > div > span { color: #75838a; font-size: 9px; font-weight: 800; }
.lesson-date-selection-head > div > strong { margin-top: 3px; color: #1b2a33; font-size: 13px; }
.lesson-date-selection-head button { min-height: 36px; padding: 8px 11px; font-size: 10px; }
.lesson-date-selection-head button span { display: inline; margin-right: 5px; }
.lesson-date-selection-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 14px; }
.lesson-date-selection-chips span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px 6px 6px; border: 1px solid #dbe3e5; border-radius: 9px; color: #4f5f68; background: #fff; font-size: 9px; font-weight: 800; }
.lesson-date-selection-chips b { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 6px; color: #f4cb0a; background: #17242d; font-size: 8px; }
.lesson-date-selection-empty { padding: 16px 14px; }
.lesson-date-selection-empty strong,
.lesson-date-selection-empty span { display: block; }
.lesson-date-selection-empty strong { color: #53626a; font-size: 11px; }
.lesson-date-selection-empty span { margin-top: 4px; color: #869198; font-size: 9px; line-height: 1.5; }
.lesson-series-more-dates { margin: 8px 0 0; color: #7e8a91; font-size: 9px; }
.lesson-series-ops-actions--dates { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto; }
.lesson-applications-console { margin-top: 16px; overflow: hidden; }
.lesson-application-count { display: inline-grid; min-width: 48px; min-height: 34px; padding: 7px 10px; place-items: center; border: 1px solid #dfca64; border-radius: 999px; color: #7f6800; background: #fff9dc; font-size: 10px; font-weight: 900; }
.lesson-application-admin-list { display: grid; gap: 8px; }
.lesson-application-admin-row { display: grid; grid-template-columns: 122px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 13px 14px; border: 1px solid #dee5e6; border-radius: 12px; background: #fff; }
.lesson-application-admin-status { display: flex; align-items: flex-start; flex-direction: column; gap: 5px; }
.lesson-application-admin-status small { color: #7d898f; font-size: 9px; }
.lesson-application-admin-copy { min-width: 0; }
.lesson-application-admin-copy strong { display: block; overflow: hidden; color: #1c2b34; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.lesson-application-admin-copy p { overflow: hidden; margin: 5px 0 0; color: #748188; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.lesson-application-admin-actions button { min-width: 104px; min-height: 38px; }

.lesson-date-picker-modal { width: min(670px, 100%); }
.lesson-calendar-toolbar { display: grid; grid-template-columns: 42px minmax(0, 1fr) 42px; align-items: center; gap: 10px; margin-bottom: 12px; }
.lesson-calendar-toolbar strong { color: #182730; text-align: center; font-size: 16px; }
.lesson-calendar-toolbar .mini-button { width: 42px; height: 42px; }
.lesson-calendar-weekdays,
.lesson-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.lesson-calendar-weekdays { margin-bottom: 4px; }
.lesson-calendar-weekdays span { padding: 7px 0; color: #7f8c92; text-align: center; font-size: 9px; font-weight: 900; }
.lesson-calendar-weekdays span:nth-child(6) { color: #397598; }
.lesson-calendar-weekdays span:nth-child(7) { color: #aa5148; }
.lesson-calendar-grid { gap: 5px; }
.lesson-calendar-day {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 50px !important;
  padding: 6px !important;
  place-items: center;
  border: 1px solid #e0e6e7 !important;
  border-radius: 10px !important;
  color: #283841 !important;
  background: #fff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}
.lesson-calendar-day.outside { color: #aab2b6 !important; background: #f6f8f8 !important; }
.lesson-calendar-day.today { border-color: #d5b51f !important; box-shadow: inset 0 0 0 1px #d5b51f; }
.lesson-calendar-day.selected { color: #f8d21b !important; border-color: #17242d !important; background: #17242d !important; box-shadow: 0 7px 16px rgba(23, 36, 45, .18); }
.lesson-calendar-day.selected b { position: absolute; top: 4px; right: 5px; display: grid; width: 16px; height: 16px; place-items: center; border-radius: 50%; color: #17242d; background: #f8d21b; font-size: 7px; }
.lesson-calendar-day.scheduled { color: #5c6b72 !important; background: #edf1f1 !important; }
.lesson-calendar-day em { position: absolute; right: 3px; bottom: 3px; color: #78858b; font-size: 6px; font-style: normal; font-weight: 900; }
.lesson-calendar-day[disabled] { cursor: not-allowed; opacity: .4; }
.lesson-calendar-day.selected[disabled] { opacity: 1; }
.lesson-calendar-count { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding: 11px 13px; border: 1px solid #e2d07e; border-radius: 10px; color: #6f6132; background: #fffbed; }
.lesson-calendar-count span { font-size: 10px; font-weight: 800; }
.lesson-calendar-count strong { color: #7d6500; font-size: 13px; }
.lesson-calendar-selection-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.lesson-calendar-selection-list button { display: inline-grid; grid-template-columns: auto auto auto; align-items: center; gap: 6px; min-height: 34px; padding: 6px 8px; border: 1px solid #dbe3e4; border-radius: 9px; color: #45565f; background: #fff; font-size: 9px; }
.lesson-calendar-selection-list button b { color: #866d00; }
.lesson-calendar-selection-list button i { color: #9a4d46; font-style: normal; }
.lesson-calendar-session-times { display: grid; gap: 8px; margin-top: 12px; }
.lesson-calendar-session-time { display: grid; grid-template-columns: minmax(120px,1fr) minmax(90px,120px) minmax(90px,120px) auto; align-items: center; gap: 10px; padding: 10px; border: 1px solid #dbe3e4; border-radius: 10px; background: #fff; }
.lesson-calendar-session-time strong { font-size: 13px; }
.lesson-calendar-session-time label { display: grid; gap: 4px; font-size: 12px; }
.lesson-calendar-session-time input { min-width: 0; width: 100%; }
@media (max-width: 520px) { .lesson-calendar-session-time { grid-template-columns: 1fr 1fr auto; } .lesson-calendar-session-time strong { grid-column: 1 / -1; } }
.lesson-calendar-selection-empty { margin-top: 9px; padding: 14px; border: 1px dashed #d5dddf; border-radius: 9px; color: #859097; text-align: center; background: #fafbfb; font-size: 9px; }

@media (max-width: 1020px) {
  .lesson-public-series-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .lesson-schedule-panel .panel-head { align-items: stretch; flex-direction: column; }
  .lesson-available-location { width: 100%; }
  .lesson-public-series-head { padding: 19px 16px 14px; }
  .lesson-public-series-facts { margin-inline: 16px; }
  .lesson-series-date-chips { padding-inline: 16px; }
  .lesson-public-series-footer { align-items: stretch; flex-direction: column; padding: 15px 16px 18px; }
  .lesson-public-series-footer button { width: 100%; min-width: 0; }
  .lesson-series-detail-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lesson-series-detail-dates { grid-template-columns: 1fr; }
  .lesson-series-application-flow { gap: 5px; overflow-x: auto; }
  .lesson-series-party-tools { align-items: stretch; flex-direction: column; }
  .lesson-series-party-tools .ghost { width: 100%; }
  .lesson-series-party-tools small { text-align: left; }
  .lesson-create-card-head { flex-direction: column; }
  .lesson-date-selection-head { align-items: stretch; flex-direction: column; }
  .lesson-date-selection-head button { width: 100%; }
  .lesson-series-ops-actions--dates { grid-template-columns: 1fr 1fr; }
  .lesson-series-ops-actions--dates .danger { grid-column: 1 / -1; }
  .lesson-application-admin-row { grid-template-columns: 1fr auto; }
  .lesson-application-admin-status { align-items: center; grid-column: 1 / -1; flex-direction: row; }
  .lesson-calendar-day { min-height: 43px !important; padding: 4px !important; border-radius: 8px !important; }
}

@media (max-width: 390px) {
  .lesson-public-series-facts { grid-template-columns: 1fr; }
  .lesson-public-series-facts > div { padding: 10px 12px; }
  .lesson-series-detail-summary { grid-template-columns: 1fr; }
  .lesson-calendar-grid { gap: 3px; }
  .lesson-calendar-day { min-height: 39px !important; font-size: 10px !important; }
  .lesson-series-ops-actions--dates { grid-template-columns: 1fr; }
  .lesson-series-ops-actions--dates .danger { grid-column: auto; }
  .lesson-application-admin-row { grid-template-columns: 1fr; }
  .lesson-application-admin-actions button { width: 100%; }
}

/* Lesson operations workspace */
.lesson-admin-subnav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  margin: 0 0 16px;
  padding: 6px;
  overflow: hidden;
  border: 1px solid #202d36;
  border-radius: 14px;
  background: #131d25;
  box-shadow: 0 10px 26px rgba(14, 24, 31, .09);
}

.lesson-admin-subnav a {
  display: flex;
  min-width: 0;
  min-height: 56px;
  padding: 9px 13px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 3px;
  color: #aebbc3;
  border-radius: 9px;
  text-align: center;
  text-decoration: none;
  transition: color .16s ease, background .16s ease, transform .16s ease;
}

.lesson-admin-subnav a:hover,
.lesson-admin-subnav a:focus-visible {
  color: #fff;
  outline: 0;
  background: rgba(255, 255, 255, .07);
}

.lesson-admin-subnav a.active,
.lesson-admin-subnav a[aria-current="page"] {
  color: #17212a;
  background: var(--yellow);
  box-shadow: 0 6px 18px rgba(255, 214, 51, .16);
}

.lesson-admin-subnav a:active { transform: translateY(1px); }
.lesson-admin-subnav span { font-size: 8px; font-weight: 950; letter-spacing: .13em; opacity: .72; }
.lesson-admin-subnav strong { overflow: hidden; max-width: 100%; font-size: 12px; font-weight: 950; text-overflow: ellipsis; white-space: nowrap; }
.lesson-admin-view { min-width: 0; }

.lesson-admin-management-grid {
  display: grid;
  grid-template-columns: minmax(360px, .72fr) minmax(0, 1.48fr);
  gap: 16px;
  align-items: start;
}

.lesson-admin-management-grid > .settings-card {
  position: sticky;
  top: 24px;
  min-width: 0;
}

.lesson-admin-management-grid > .console-card { min-width: 0; }
.lesson-admin-view > .lesson-applications-console { margin-top: 16px; }

.lesson-today-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.lesson-today-kpis > div {
  position: relative;
  min-width: 0;
  min-height: 102px;
  padding: 15px 16px;
  overflow: hidden;
  border: 1px solid #dce3e6;
  border-top: 3px solid #cbd5d9;
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.lesson-today-kpis > div::after {
  position: absolute;
  right: -14px;
  bottom: -22px;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: #f0f3f4;
  content: "";
}

.lesson-today-kpis > div.attention { border-top-color: var(--yellow-deep); background: #fffdf5; }
.lesson-today-kpis > div.attention::after { background: rgba(255, 214, 51, .19); }
.lesson-today-kpis span,
.lesson-today-kpis strong,
.lesson-today-kpis small { position: relative; z-index: 1; display: block; }
.lesson-today-kpis span { color: #65727a; font-size: 10px; font-weight: 850; }
.lesson-today-kpis strong { margin-top: 7px; color: #17232b; font-size: 23px; line-height: 1.05; }
.lesson-today-kpis small { margin-top: 8px; overflow: hidden; color: #7b878e; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }

.lesson-today-console,
.lesson-billing-console,
.lesson-week-console { margin-top: 16px; }
.lesson-today-console { margin-top: 0; }
.lesson-today-date {
  flex: 0 0 auto;
  padding: 7px 10px;
  color: #4f5c64;
  border: 1px solid #dbe2e5;
  border-radius: 8px;
  background: #f7f9f9;
  font-size: 10px;
  font-weight: 900;
}

.lesson-schedule-weekbar {
  display: grid;
  grid-template-columns: 42px minmax(180px, 220px) minmax(220px, 1fr) auto 42px;
  gap: 9px;
  align-items: stretch;
  margin-bottom: 13px;
  padding: 10px;
  border: 1px solid #dfe6e8;
  border-radius: 11px;
  background: #f7f9fa;
}

.lesson-schedule-weekbar > button {
  min-width: 42px;
  min-height: 42px !important;
  padding: 7px 10px;
  border-radius: 8px;
}

.lesson-schedule-weekbar > label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 0 10px;
  border: 1px solid #dce3e6;
  border-radius: 8px;
  background: #fff;
}

.lesson-schedule-weekbar > label span { color: #738088; font-size: 9px; font-weight: 900; white-space: nowrap; }
.lesson-schedule-weekbar input { min-width: 0; min-height: 38px; padding: 4px 0; border: 0; background: transparent; font-size: 11px; font-weight: 850; }
.lesson-schedule-weekbar > div { display: flex; min-width: 0; padding: 2px 10px; justify-content: center; flex-direction: column; text-align: center; }
.lesson-schedule-weekbar > div strong { overflow: hidden; color: #1c2931; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.lesson-schedule-weekbar > div small { margin-top: 3px; color: #75828a; font-size: 9px; }

.lesson-schedule-summary {
  display: flex;
  gap: 6px;
  margin-bottom: 11px;
  flex-wrap: wrap;
}

.lesson-schedule-summary span {
  padding: 6px 9px;
  color: #5f6d75;
  border: 1px solid #dfe5e7;
  border-radius: 999px;
  background: #fff;
  font-size: 9px;
  font-weight: 800;
}

.lesson-schedule-summary b { color: #18252d; }
.lesson-schedule-table { width: 100%; max-width: 100%; box-shadow: none; }
.lesson-schedule-table table { min-width: 900px; }
.lesson-schedule-type {
  display: inline-flex;
  min-width: 44px;
  min-height: 25px;
  padding: 4px 8px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #1c5c4b;
  background: #e7f4ef;
  font-size: 9px;
  font-weight: 950;
}

.lesson-schedule-type.private { color: #655110; background: #fff4c4; }
.lesson-schedule-type.other { color: #56646c; background: #eef2f3; }

@media (max-width: 1180px) {
  .lesson-admin-management-grid { grid-template-columns: 1fr; }
  .lesson-admin-management-grid > .settings-card { position: static; }
}

@media (max-width: 860px) {
  .lesson-admin-subnav {
    display: flex;
    gap: 5px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: inline proximity;
    scrollbar-width: none;
  }

  .lesson-admin-subnav::-webkit-scrollbar { display: none; }
  .lesson-admin-subnav a { min-width: 132px; min-height: 52px; flex: 0 0 132px; scroll-snap-align: start; }
  .lesson-today-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lesson-schedule-weekbar { grid-template-columns: 42px minmax(0, 1fr) 42px; }
  .lesson-schedule-weekbar > label { grid-column: 1 / -1; grid-row: 2; }
  .lesson-schedule-weekbar > div { grid-column: 2; grid-row: 1; padding-inline: 2px; }
  .lesson-schedule-weekbar > button:nth-of-type(2) { grid-column: 1 / -1; grid-row: 3; }
}

@media (max-width: 520px) {
  .lesson-admin-subnav { margin-inline: -2px; border-radius: 11px; }
  .lesson-admin-subnav a { min-width: 122px; flex-basis: 122px; padding-inline: 9px; }
  .lesson-admin-subnav strong { font-size: 11px; }
  .lesson-today-kpis { gap: 7px; }
  .lesson-today-kpis > div { min-height: 92px; padding: 13px; }
  .lesson-today-kpis strong { font-size: 20px; }
  .lesson-today-console .console-card-head,
  .lesson-billing-console .console-card-head,
  .lesson-week-console .console-card-head { align-items: flex-start; flex-direction: column; }
  .lesson-today-date { align-self: flex-start; }
  .lesson-schedule-weekbar > div strong { font-size: 10px; }
  .lesson-schedule-weekbar > div small { display: none; }
  .lesson-schedule-weekbar > label { padding-inline: 8px; }
}

/* Unified Program surface */
.program-embedded-shell {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: transparent;
}

.program-frame {
  display: block;
  width: 100%;
  min-height: 1100px;
  border: 0;
  background: transparent;
}

.my-booking-card--openplay { border-inline-start: 3px solid #f4c900; }
.my-booking-card--openplay .my-booking-kind { color: #705900; background: #fff6c8; }

@media (max-width: 720px) {
  .program-frame { min-height: 1250px; }
}

/* Monthly inventory and source-separated assignment */
.court-inventory-open-card {
  overflow: hidden;
  border-color: #cfd9dd;
  background: linear-gradient(180deg, rgba(255, 215, 57, .08), transparent 118px), #fff;
}

.court-inventory-open-card .court-planning-prepare-form {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
}

.court-inventory-open-card .planning-cutoff { grid-column: auto; }
.court-inventory-open-card .court-planning-calendar-tip { min-height: 58px; align-items: flex-start; }
.court-inventory-open-card .court-planning-calendar-tip b { min-width: 78px; text-align: center; }

.court-source-next-links {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) repeat(3, auto);
  gap: 8px;
  align-items: center;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #e4eaec;
}

.court-source-next-links > div { display: grid; gap: 3px; min-width: 0; }
.court-source-next-links strong { color: #1b2932; font-size: 11px; }
.court-source-next-links span { color: #748189; font-size: 9px; line-height: 1.5; }
.court-source-next-links button { min-height: 36px; padding: 7px 11px; white-space: nowrap; }

.source-assignment-console {
  display: grid;
  grid-template-columns: minmax(230px, .8fr) minmax(430px, 1.2fr);
  gap: 18px 24px;
  align-items: end;
  margin-bottom: 14px;
  padding: 20px;
  overflow: hidden;
  border: 1px solid #243741;
  border-radius: 14px;
  color: #f3f6f7;
  background: radial-gradient(circle at 91% -20%, rgba(255, 215, 57, .22), transparent 38%), linear-gradient(128deg, #111d25 0%, #1b303a 72%, #28444f 100%);
  box-shadow: 0 14px 34px rgba(20, 32, 41, .12);
}

.source-assignment-copy { min-width: 0; align-self: center; }
.source-assignment-copy .step-kicker { color: #ffd739; }
.source-assignment-copy h3 { margin: 5px 0; color: #fff; font-size: clamp(18px, 2.2vw, 24px); letter-spacing: -.025em; }
.source-assignment-copy p { max-width: 540px; margin: 0; color: #bac8ce; font-size: 10px; line-height: 1.65; }

.source-assignment-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(132px, auto);
  gap: 8px;
  align-items: end;
}

.source-assignment-form label { display: grid; gap: 6px; min-width: 0; }
.source-assignment-form label > span { color: #aebdc3; font-size: 9px; font-weight: 850; }
.source-assignment-form input { width: 100%; min-height: 43px; border-color: rgba(255, 255, 255, .16); color: #17242d; background: #fff; font-size: 11px; font-weight: 850; }
.source-assignment-form button { min-height: 43px; border-color: #ffd739; color: #17242d; background: #ffd739; box-shadow: none; white-space: nowrap; }

.source-assignment-aftercare {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 9px 12px;
  align-items: center;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .11);
}

.source-assignment-aftercare b { padding: 4px 7px; border-radius: 5px; color: #ffd739; background: rgba(255, 255, 255, .08); font-size: 8px; letter-spacing: .04em; }
.source-assignment-aftercare span { color: #aabac1; font-size: 9px; line-height: 1.5; }
.source-assignment-aftercare button { min-height: 32px; padding: 6px 10px; border-color: rgba(255, 255, 255, .18); color: #eef3f5; background: rgba(255, 255, 255, .05); font-size: 9px; }

.source-billing-summary {
  margin-bottom: 14px;
  overflow: hidden;
  border: 1px solid #d9e2e5;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 9px 24px rgba(24, 39, 47, .055);
}

.source-billing-summary-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; padding: 18px 20px 15px; border-bottom: 1px solid #e6ebed; background: linear-gradient(100deg, #fbfcfc, #f3f7f6); }
.source-billing-summary-head h3 { margin: 4px 0 0; color: #1c2a32; font-size: 17px; }
.source-billing-summary-head > strong { color: #17242d; font-size: clamp(20px, 3vw, 28px); letter-spacing: -.035em; }
.source-billing-summary--rental .source-billing-summary-head > strong { color: #215f80; }

.source-billing-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid #e9edef; }
.source-billing-metrics > div { min-width: 0; padding: 13px 20px; border-left: 1px solid #e9edef; }
.source-billing-metrics > div:first-child { border-left: 0; }
.source-billing-metrics span,
.source-billing-metrics strong { display: block; }
.source-billing-metrics span { color: #7c8990; font-size: 8px; font-weight: 850; }
.source-billing-metrics strong { margin-top: 4px; color: #24343d; font-size: 13px; }

.source-billing-plan-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; padding: 12px; background: #f6f8f8; }
.source-billing-plan-list > div:not(.source-billing-empty) { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 8px; align-items: center; min-width: 0; padding: 10px 11px; border: 1px solid #e0e6e8; border-radius: 9px; background: #fff; }
.source-billing-plan-list strong { overflow: hidden; color: #26363e; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.source-billing-plan-list span { grid-column: 1; color: #77858c; font-size: 8px; }
.source-billing-plan-list em { grid-column: 2; grid-row: 1 / span 2; padding: 4px 6px; border-radius: 999px; color: #7a5811; background: #fff3c5; font-size: 7px; font-style: normal; font-weight: 900; white-space: nowrap; }
.source-billing-plan-list em.is-on { color: #17654f; background: #e5f5ee; }
.source-billing-empty { grid-column: 1 / -1; padding: 12px 13px; border: 1px dashed #d2dadd; border-radius: 9px; color: #7a878e; background: #fff; font-size: 9px; line-height: 1.6; }
.source-billing-note { margin: 0; padding: 11px 20px 13px; color: #758289; background: #fafbfb; font-size: 9px; line-height: 1.55; }

.lesson-recurring-create-card .form-grid { align-items: start; }
.lesson-recurring-create-card .lesson-private-block-rule { border-color: #d7e1e4; color: #4d5e67; background: #f1f5f5; }
.lesson-recurring-create-card .lesson-private-block-rule b { color: #182832; }
.recurring-form-note strong { display: block; margin-bottom: 3px; color: #273941; }

@media (max-width: 980px) {
  .source-assignment-console { grid-template-columns: 1fr; align-items: stretch; }
  .source-assignment-form { grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(140px, auto); }
  .source-billing-plan-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .court-source-next-links { grid-template-columns: 1fr repeat(3, auto); }
}

@media (max-width: 700px) {
  .court-inventory-open-card .court-planning-prepare-form { grid-template-columns: 1fr; }
  .court-source-next-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .court-source-next-links > div { grid-column: 1 / -1; }
  .court-source-next-links button { width: 100%; padding-inline: 6px; }
  .source-assignment-console { gap: 15px; padding: 17px; border-radius: 12px; }
  .source-assignment-form { grid-template-columns: 1fr 1fr; }
  .source-assignment-form button { grid-column: 1 / -1; width: 100%; }
  .source-assignment-aftercare { grid-template-columns: auto minmax(0, 1fr); }
  .source-assignment-aftercare button { grid-column: 1 / -1; width: 100%; }
  .source-billing-summary-head { align-items: flex-start; flex-direction: column; gap: 8px; padding: 16px; }
  .source-billing-metrics { grid-template-columns: 1fr; }
  .source-billing-metrics > div { padding: 11px 16px; border-top: 1px solid #e9edef; border-left: 0; }
  .source-billing-metrics > div:first-child { border-top: 0; }
  .source-billing-plan-list { grid-template-columns: 1fr; padding: 9px; }
  .source-billing-note { padding-inline: 16px; }
}

@media (max-width: 440px) {
  .source-assignment-form { grid-template-columns: 1fr; }
  .source-assignment-form button { grid-column: auto; }
  .court-source-next-links { grid-template-columns: 1fr; }
  .court-source-next-links > div { grid-column: auto; }
}

/* Court planning console — aligned with the public reservation UI */
.court-planning-page {
  --planner-navy: #111d25;
  --planner-ink: #18252e;
  --planner-muted: #6f7d85;
  --planner-line: #d9e1e4;
  --planner-surface: #fff;
  --planner-soft: #f5f7f7;
  gap: 16px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
  color: var(--planner-ink);
}

.court-planning-page .court-planning-hero {
  border-color: #263840;
  border-radius: 18px;
  background: linear-gradient(128deg, #111d25, #1d313b);
  box-shadow: 0 12px 30px rgba(16, 29, 37, .12);
}

.court-planning-page .court-planning-hero-main { padding: 22px 24px 18px; }
.court-planning-page .court-planning-hero h2 { margin-block: 4px 6px; font-size: clamp(25px, 3vw, 34px); }
.court-planning-page .court-planning-hero p { max-width: 860px; font-size: 13px; line-height: 1.65; }
.court-planning-page .court-planning-month-control { border-radius: 12px; }
.court-planning-page .court-planning-month-control button,
.court-planning-page .court-planning-month-control input { min-height: 42px; font-size: 13px; }
.court-planning-page .court-planning-hero-metrics > div { padding: 13px 18px; }
.court-planning-page .court-planning-hero-metrics span { font-size: 11px; }
.court-planning-page .court-planning-hero-metrics strong { font-size: 20px; }

.court-planning-page .court-planning-workflow {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  padding: 8px;
  border-color: var(--planner-line);
  border-radius: 14px;
}

.court-planning-page .court-planning-step {
  min-height: 68px;
  padding: 10px;
  border-radius: 10px;
}

.court-planning-page .court-planning-step b { width: 21px; height: 21px; font-size: 10px; }
.court-planning-page .court-planning-step strong { margin-top: 6px; font-size: 12px; }
.court-planning-page .court-planning-step span { margin-top: 3px; font-size: 10px; line-height: 1.35; }

.court-planning-page .court-planning-config {
  grid-template-columns: minmax(0, 1fr) minmax(290px, 340px);
  gap: 16px;
  align-items: start;
}

.court-planning-page .court-planning-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 22px;
  border-color: var(--planner-line);
  border-radius: 16px;
  background: var(--planner-surface);
  box-shadow: 0 8px 24px rgba(24, 40, 49, .045);
}

.court-planning-page .court-inventory-open-card {
  background: #fff;
}

.court-planning-page .court-planning-card-head { margin-bottom: 18px; }
.court-planning-page .court-planning-card-head h3 { font-size: 21px; letter-spacing: -.025em; }
.court-planning-page .court-planning-card-head p { max-width: 740px; font-size: 12px; line-height: 1.6; }
.court-planning-page .court-planning-prepare-form {
  grid-template-columns: minmax(190px, .42fr) minmax(260px, .58fr);
  gap: 14px;
}

.court-planning-page .court-planning-prepare-form .planning-cutoff { grid-column: auto; }
.court-planning-page .court-planning-prepare-form .field { gap: 7px; }
.court-planning-page .court-planning-prepare-form .field > label { font-size: 12px; }
.court-planning-page .court-planning-prepare-form input,
.court-planning-page .court-planning-prepare-form select,
.court-planning-page .court-planning-prepare-form button { min-height: 44px; font-size: 13px; }

.court-planning-rate-plan {
  overflow: hidden;
  border: 1px solid var(--planner-line);
  border-radius: 14px;
  background: var(--planner-soft);
}

.court-planning-rate-plan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--planner-line);
  background: #fff;
}

.court-planning-rate-plan-head strong,
.court-planning-rate-plan-head span { display: block; }
.court-planning-rate-plan-head strong { color: var(--planner-ink); font-size: 15px; }
.court-planning-rate-plan-head div > span { margin-top: 3px; color: var(--planner-muted); font-size: 11px; }
.court-planning-rate-courts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 10px; }
.court-planning-rate-court { overflow: hidden; border: 1px solid #dde4e6; border-radius: 12px; background: #fff; }
.court-planning-rate-court > header { padding: 13px 14px 11px; border-bottom: 1px solid #e4e9eb; background: #17252d; }
.court-planning-rate-court > header span { color: #ffd739; font-size: 9px; font-weight: 900; letter-spacing: .11em; }
.court-planning-rate-court > header h4 { margin: 4px 0 0; color: #fff; font-size: 16px; }
.court-planning-rate-day { padding: 12px 13px; border-top: 1px solid #e8edef; }
.court-planning-rate-day:first-of-type { border-top: 0; }
.court-planning-rate-day-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.court-planning-rate-day-head strong,
.court-planning-rate-day-head span { display: block; }
.court-planning-rate-day-head strong { font-size: 13px; }
.court-planning-rate-day-head span { margin-top: 2px; color: var(--planner-muted); font-size: 10px; }
.court-planning-rate-day-head button { min-height: 32px !important; padding: 5px 9px; font-size: 10px !important; }
.court-planning-rate-list { display: grid; gap: 7px; }
.court-planning-page .court-planning-rate-band {
  display: grid;
  grid-template-columns: minmax(78px, .8fr) 12px minmax(78px, .8fr) minmax(105px, 1fr) minmax(105px, 1fr) auto;
  gap: 7px;
  align-items: end;
  padding: 9px;
  border: 1px solid #e1e7e9;
  border-radius: 10px;
  background: #f8fafa;
}
.court-planning-page .court-planning-rate-band .field {
  width: auto;
  min-width: 0;
  gap: 4px;
}
.court-planning-page .court-planning-rate-band .field label { font-size: 9px; }
.court-planning-page .court-planning-rate-band select,
.court-planning-page .court-planning-rate-band input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 38px;
  padding-inline: 9px;
  box-sizing: border-box;
  font-size: 11px;
}
.court-planning-rate-band > i { align-self: center; color: #9aa5aa; font-style: normal; text-align: center; }
.court-planning-rate-remove {
  width: auto;
  min-width: 46px;
  min-height: 38px !important;
  padding: 6px 8px !important;
  border-color: #e1c7c3 !important;
  color: #924139 !important;
  background: #fff !important;
  font-size: 9px !important;
  white-space: nowrap;
}
.court-planning-rate-list > .court-planning-rate-band:only-child .court-planning-rate-remove { visibility: hidden; }

.court-planning-page .court-planning-calendar-tip {
  min-height: auto;
  padding: 12px 14px;
  border-color: #e5d47d;
  border-radius: 11px;
  font-size: 11px;
}
.court-planning-page .court-planning-calendar-tip b { min-width: auto; font-size: 9px; }
.court-planning-page .court-planning-prepare-form > button.primary { min-height: 48px; font-size: 14px; }
.court-planning-status-card { position: sticky; top: 14px; }
.court-planning-page .court-planning-readiness > div { padding: 13px 14px; border-radius: 11px; }
.court-planning-page .court-planning-readiness span { font-size: 11px; }
.court-planning-page .court-planning-readiness strong { font-size: 15px; }
.court-planning-page .court-planning-readiness small { font-size: 10px; }

.court-planning-page .court-planning-calendar-shell { width: 100%; max-width: 100%; min-width: 0; border-radius: 16px; box-shadow: 0 8px 24px rgba(24, 40, 49, .04); }
.court-planning-page .court-planning-calendar-toolbar { width: 100%; max-width: 100%; min-width: 0; padding: 18px 20px; box-sizing: border-box; }
.court-planning-page .court-planning-calendar-toolbar > * { min-width: 0; }
.court-planning-page .court-planning-calendar-toolbar h3 { font-size: 20px; }
.court-planning-page .court-planning-calendar-toolbar p { font-size: 11px; }
.court-planning-page .court-planning-legend { font-size: 10px; }
.court-planning-page .court-planning-calendar-scroll { overflow: visible; padding: 12px; background: #f5f7f7; }
.court-planning-page .court-planning-calendar { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 7px; min-width: 0; }
.court-planning-page .court-planning-weekday { font-size: 10px; }
.court-planning-page .court-planning-day { min-height: 126px; border-radius: 11px; }
.court-planning-page .court-planning-day.is-outside { min-height: 0; }
.court-planning-page .court-planning-day.in-cutoff { background: #fff; }
.court-planning-page .court-planning-day.is-selected { border-color: #d6b60e; box-shadow: 0 0 0 2px rgba(255, 215, 57, .24); }
.court-planning-page .court-planning-day-head { padding: 9px 10px 8px; }
.court-planning-page .court-planning-day-head button { font-size: 12px; }
.court-planning-page .court-planning-cutoff-button { padding: 4px 6px !important; font-size: 8px !important; }
.court-planning-day-overview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
  min-height: 82px !important;
  padding: 10px !important;
  border: 0 !important;
  color: var(--planner-ink) !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left;
}
.court-planning-day-overview span,
.court-planning-day-overview b,
.court-planning-day-overview strong,
.court-planning-day-overview small { display: block; }
.court-planning-day-overview b { color: #8a969c; font-size: 8px; }
.court-planning-day-overview strong { margin-top: 3px; font-size: 11px; }
.court-planning-day-overview small { grid-column: 1 / -1; overflow: hidden; color: #6f7d85; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.court-planning-page .court-planning-detail-event { min-height: 58px; }
.court-planning-page .court-planning-detail-event time,
.court-planning-page .court-planning-detail-event strong { font-size: 12px; }
.court-planning-page .court-planning-detail-event span { font-size: 10px; }

.court-planning-calendar-toolbar-side {
  display: grid;
  width: min(100%, 440px);
  max-width: 100%;
  min-width: 0;
  justify-items: end;
  gap: 11px;
  box-sizing: border-box;
}

.court-planning-calendar-toolbar-side .court-planning-legend { gap: 12px; }

.court-planning-calendar-month-nav {
  display: grid;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  grid-template-columns: minmax(132px, auto) minmax(126px, auto) minmax(132px, auto);
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--planner-line);
  border-radius: 11px;
  background: #fff;
  box-sizing: border-box;
}

.court-planning-calendar-month-nav button,
.court-planning-calendar-month-nav > strong {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 11px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-size: 12px;
  white-space: nowrap;
}

.court-planning-calendar-month-nav button {
  color: #41515a;
  background: #f6f8f8;
}

.court-planning-calendar-month-nav button:hover,
.court-planning-calendar-month-nav button:focus-visible {
  color: #111d25;
  background: #edf2f2;
}

.court-planning-calendar-month-nav button b { font: inherit; font-weight: 800; }
.court-planning-calendar-month-nav > strong {
  border-inline: 1px solid var(--planner-line);
  color: #111d25;
  background: #fff;
  font-weight: 900;
}

.court-planning-page .court-day-timeline-card {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  min-width: 0;
}

.court-day-timeline-scroll {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: auto;
  max-height: min(72vh, 920px);
  border: 1px solid var(--planner-line);
  border-radius: 14px;
  background: #fff;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  box-sizing: border-box;
}

.court-day-timeline {
  display: grid !important;
  position: relative;
  grid-template-columns: 68px repeat(var(--court-count), minmax(240px, 1fr));
  grid-template-rows: 54px repeat(48, var(--timeline-row-height));
  grid-auto-flow: row;
  min-width: max(100%, 640px);
  color: var(--planner-ink);
  background: #fff;
}

.court-day-time-head,
.court-day-lane-head {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  min-width: 0;
  border-bottom: 1px solid #cfd9dc;
  background: #f7f9f9;
}

.court-day-time-head {
  left: 0;
  z-index: 8;
  justify-content: center;
  border-right: 1px solid #d9e1e3;
  color: #75838a;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .06em;
}

.court-day-lane-head {
  justify-content: space-between;
  gap: 10px;
  padding: 0 14px;
  border-left: 1px solid #e0e6e8;
}

.court-day-lane-head strong,
.court-day-lane-head span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.court-day-lane-head strong {
  font-size: 14px;
  letter-spacing: -.015em;
}

.court-day-lane-head span {
  color: #738087;
  font-size: 10px;
  font-weight: 750;
}

.court-day-time-label {
  position: sticky;
  left: 0;
  z-index: 4;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 4px;
  border-top: 1px solid #edf1f2;
  border-right: 1px solid #d9e1e3;
  color: #7c898f;
  background: #fbfcfc;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.court-day-slot {
  min-width: 0;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-top: 1px solid #edf1f2 !important;
  border-left: 1px solid #e4eaec !important;
  border-radius: 0 !important;
  background: #f7fbfa !important;
  box-shadow: none !important;
  cursor: cell;
}

.court-day-slot:hover,
.court-day-slot:focus-visible {
  z-index: 2;
  outline: 2px solid #11a37f !important;
  outline-offset: -2px;
  background: #e9f8f3 !important;
}

.court-day-slot.is-unavailable {
  opacity: 1;
  background: #f1f3f4 !important;
  cursor: default;
}

.court-day-lane-event {
  z-index: 3;
  align-self: stretch;
  overflow: hidden;
  min-width: 0;
  min-height: 0 !important;
  margin: 2px 6px;
  padding: 6px 9px !important;
  border: 1px solid #c9d4d8 !important;
  border-left: 4px solid #455b67 !important;
  border-radius: 8px !important;
  color: #182830 !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 3px 9px rgba(24, 40, 49, .08) !important;
  text-align: left;
}

.court-day-lane-event strong,
.court-day-lane-event span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.court-day-lane-event strong {
  font-size: 11px;
  line-height: 1.25;
}

.court-day-lane-event span {
  margin-top: 2px;
  color: #6e7d84;
  font-size: 9px;
  font-variant-numeric: tabular-nums;
}

.court-day-lane-event.openplay { border-left-color: #138f77 !important; background: #edf9f5 !important; }
.court-day-lane-event.rental,
.court-day-lane-event.recurring-rental { border-left-color: #b68308 !important; background: #fffaf0 !important; }
.court-day-lane-event.group-lesson { border-left-color: #7458ad !important; background: #f7f3ff !important; }
.court-day-lane-event.private-lesson { border-left-color: #4e8665 !important; background: #f1faf5 !important; }
.court-day-lane-event.special-block { border-left-color: #b04940 !important; background: #fff4f2 !important; }

.court-day-timeline-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 10px;
  color: #738087;
  font-size: 10px;
  font-weight: 700;
}

.court-day-timeline-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.court-day-timeline-legend i {
  width: 11px;
  height: 11px;
  border: 1px solid #d8e0e2;
  border-radius: 3px;
  background: #f7fbfa;
}

.court-day-timeline-legend i.is-occupied { background: #f1f3f4; }

@media (max-width: 1120px) {
  .court-planning-page .court-planning-config { grid-template-columns: 1fr; }
  .court-planning-status-card { position: static; }
  .court-planning-rate-courts { grid-template-columns: 1fr; }
  .court-planning-page .court-planning-workflow { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .court-planning-page { gap: 12px; }
  .court-planning-page .court-planning-hero-main { padding: 19px 17px 16px; }
  .court-planning-page .court-planning-hero p { font-size: 12px; }
  .court-planning-page .court-planning-workflow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .court-planning-page .court-planning-step { min-height: 64px; }
  .court-planning-page .court-planning-card { padding: 16px; border-radius: 14px; }
  .court-planning-page .court-planning-card-head { align-items: flex-start; margin-bottom: 14px; }
  .court-planning-page .court-planning-card-head h3 { font-size: 19px; }
  .court-planning-page .court-planning-prepare-form { grid-template-columns: 1fr; gap: 11px; }
  .court-planning-rate-courts { padding: 7px; }
  .court-planning-page .court-planning-rate-band {
    grid-template-columns: minmax(0, 1fr) 10px minmax(0, 1fr) auto;
  }
  .court-planning-page .court-planning-rate-band .rate-price,
  .court-planning-page .court-planning-rate-band .rate-price-usd { grid-column: 1 / span 3; }
  .court-planning-rate-remove { grid-column: 4; grid-row: 3; }
  .court-planning-page .court-planning-calendar-toolbar { align-items: stretch; flex-direction: column; padding: 16px; }
  .court-planning-calendar-toolbar-side { width: 100%; max-width: 100%; justify-items: stretch; }
  .court-planning-calendar-month-nav { grid-template-columns: minmax(0, 1fr) minmax(116px, 1.05fr) minmax(0, 1fr); }
  .court-planning-calendar-month-nav button b { display: inline; }
  .court-planning-calendar-month-nav .month-nav-year { display: none; }
  .court-planning-page .court-planning-calendar-scroll { padding: 9px; }
  .court-planning-page .court-planning-calendar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .court-planning-page .court-planning-weekday,
  .court-planning-page .court-planning-day.is-outside { display: none; }
  .court-planning-page .court-planning-day { min-height: 118px; }
  .court-day-timeline-scroll { max-height: 68vh; border-radius: 12px; }
  .court-day-timeline { grid-template-columns: 62px repeat(var(--court-count), minmax(220px, 1fr)); }
  .court-day-lane-head { padding-inline: 11px; }
}

@media (max-width: 420px) {
  .court-planning-page .court-planning-rate-band { grid-template-columns: minmax(0, 1fr) 8px minmax(0, 1fr); }
  .court-planning-page .court-planning-rate-band .rate-price,
  .court-planning-page .court-planning-rate-band .rate-price-usd { grid-column: 1 / -1; }
  .court-planning-rate-remove { grid-column: 1 / -1; grid-row: auto; width: 100%; }
}

/* Unified member check-in pass */
.checkin-pass-modal {
  width: min(520px, calc(100vw - 28px));
  max-width: 520px;
  max-height: min(760px, calc(100dvh - 28px));
  overflow: hidden;
}

.checkin-pass-body {
  display: grid;
  gap: 16px;
  padding: 22px;
  overflow-y: auto;
  text-align: center;
}

.checkin-pass-code {
  display: grid;
  width: min(100%, 340px);
  aspect-ratio: 1;
  box-sizing: border-box;
  justify-self: center;
  margin-block: 0;
  margin-inline: auto;
  padding: 10px;
  place-items: center;
  overflow: hidden;
  border: 1px solid #d8e0e2;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(18, 32, 40, .08);
}

.checkin-pass-code[hidden] {
  display: none !important;
}

.checkin-pass-code img {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  justify-self: center;
  margin-inline: auto;
}

.checkin-pass-help {
  max-width: 420px;
  margin: 0 auto;
  color: #66747c;
  font-size: 13px;
  line-height: 1.6;
}

.checkin-pass-body > .status-note {
  width: 100%;
  margin: 0;
  text-align: center;
}

.member-service-schedule-card .actions {
  align-items: center;
}

.checkin-complete-badge {
  display: inline-flex;
  min-height: 40px;
  padding: 0 14px;
  align-items: center;
  justify-content: center;
  border: 1px solid #b9dfd2;
  border-radius: 999px;
  color: #0b6f59;
  background: #edf9f5;
  font-size: 13px;
  font-weight: 800;
}

.checkin-schedule-loading {
  display: grid;
  gap: 10px;
  padding-block: 8px;
}

.checkin-schedule-loading span {
  display: block;
  height: 86px;
  border-radius: 14px;
  background: linear-gradient(90deg, #eef2f3 25%, #f8fafb 40%, #eef2f3 65%);
  background-size: 400% 100%;
  animation: checkin-schedule-shimmer 1.2s ease-in-out infinite;
}

@keyframes checkin-schedule-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

@media (max-width: 640px) {
  .checkin-pass-modal { width: calc(100vw - 20px); }
  .checkin-pass-body { gap: 13px; padding: 16px; }
  .checkin-pass-code { width: min(100%, 300px); border-radius: 15px; }
  .checkin-pass-help { font-size: 12px; line-height: 1.55; }
  .member-service-schedule-card .actions > :is(button, .checkin-complete-badge) { width: 100%; }
}