.schedule-mode-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 18px 0; padding: 12px; background: #f4f8f8; border: 1px solid #dce8e9; border-radius: 8px; }
.schedule-mode-tabs { display: inline-flex; gap: 4px; padding: 4px; background: #e8eff0; border-radius: 7px; }
.schedule-mode-tabs button { border: 0; background: transparent; padding: 10px 16px; font-weight: 700; border-radius: 5px; }
.schedule-mode-tabs button.selected { background: #fff; color: #087c85; box-shadow: 0 1px 5px rgba(20,45,55,.12); }
.schedule-date-controls { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; }
.schedule-date-controls label { display: grid; gap: 4px; font-size: .8rem; font-weight: 700; }
.schedule-date-controls input { min-height: 42px; border: 1px solid #cbdadd; border-radius: 6px; padding: 6px 10px; }
.schedule-grid.date-mode { grid-template-columns: 82px minmax(260px, 1fr); max-width: 760px; }
.booking-time-button span, .booking-week-slot span { display: block; font-size: .72rem; font-weight: 700; opacity: .8; }
.pass-count-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pass-count-choice input { position: absolute; opacity: 0; }
.pass-count-choice span { display: block; padding: 12px; border: 1px solid #cbdadd; border-radius: 6px; text-align: center; font-weight: 700; }
.pass-count-choice input:checked + span { border-color: #087c85; background: #e9f7f6; color: #087c85; }
.pass-form-top { display: grid; grid-template-columns: minmax(280px, 1.5fr) minmax(240px, .8fr) minmax(240px, .8fr); gap: 18px; align-items: end; margin-bottom: 24px; }
.pass-name-field { display: grid; }
.pass-validity { display: flex; flex-direction: column; justify-content: center; gap: 3px; min-height: 50px; padding: 10px 14px; background: #f0f6f6; border-radius: 6px; }
.pass-service-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; row-gap: 4px; }
.pass-service-row { display: grid; grid-template-columns: minmax(0,1fr) 130px; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid #e7eded; }
.client-pass-card { display: grid; gap: 3px; padding: 12px; margin: 8px 0; border-left: 4px solid #20a9a0; background: #f1f8f7; border-radius: 4px; }
.client-pass-card span { color: #087c85; font-weight: 700; }
.client-account-page .booking-page { padding-top: 18px; }
.client-account-wrap { max-width: 980px; }
.client-auth-header { display: flex; align-items: center; justify-content: center; gap: 24px; margin: 0 auto 20px; padding: 4px 12px; }
.client-auth-header .client-logo { width: 138px; max-width: 138px; height: auto; margin: 0; }
.client-auth-header .eyebrow { margin: 0 0 4px; font-size: 11px; }
.client-auth-header h1 { margin: 0; font-size: 36px; line-height: 1.05; }
.client-account-grid { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 16px; align-items: start; }
.client-auth-card { padding: 24px; }
.client-auth-card h2 { margin: 0 0 18px; font-size: 22px; line-height: 1.2; }
.client-auth-note { margin: -8px 0 16px; color: #657386; font-size: 13px; line-height: 1.45; }
.client-auth-form { display: grid; gap: 14px; }
.client-auth-form .form-label { display: grid; gap: 6px; margin: 0; font-size: 14px; }
.client-auth-form .form-control { min-height: 44px; border-radius: 7px; }
.client-auth-form .btn { min-height: 44px; margin-top: 2px; border-radius: 7px; }
.client-register-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.client-register-wide { grid-column: 1 / -1; }
.client-dashboard-card { padding: 22px; }
.client-dashboard-card h2 { margin: 0 0 16px; font-size: 22px; }
.client-activation-card { max-width: 620px; margin: 0 auto; padding: 28px; text-align: center; }
.client-activation-card h2 { margin: 0 0 10px; font-size: 24px; }
.client-activation-card p { margin: 0 0 20px; color: #657386; line-height: 1.55; }
.client-account-actions { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; }
.client-pass-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 10px; }
.booking-login-gate { padding: 20px; background: #f1f8f7; border: 1px solid #cfe5e3; border-radius: 7px; }
.booking-login-gate p { margin-bottom: 14px; }
.booking-login-required { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px; border: 1px solid #cfe5e3; border-radius: 7px; background: #f1f8f7; }
.booking-login-required > div { display: grid; gap: 4px; }
.booking-login-required strong { color: #1f2a3d; font-size: 16px; }
.booking-login-required span { color: #657386; font-size: 13px; line-height: 1.45; }
.booking-login-required .btn { flex: 0 0 auto; }
.booking-header.booking-header-compact { display: grid; grid-template-columns: 190px minmax(0,1fr); align-items: center; gap: 34px; min-height: 0; padding: 22px 28px; margin-bottom: 18px; text-align: left; }
.booking-header-compact .brand-full { display: flex; align-items: center; justify-content: center; width: 190px; min-height: 118px; margin: 0; overflow: visible; }
.booking-header-compact .brand-full img { display: block; width: 180px; height: auto; max-width: 100%; max-height: 118px; margin: 0; object-fit: contain; object-position: center; }
.booking-header-copy { min-width: 0; }
.booking-header-copy .eyebrow { margin-bottom: 5px; }
.booking-header-copy h1 { margin: 0 0 6px; font-size: 3rem; line-height: 1.05; }
.booking-header-copy p { max-width: 680px; margin: 0; font-size: 1rem; line-height: 1.45; }
.booking-entry-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.booking-entry-actions .btn { min-width: 190px; padding: 10px 18px; font-weight: 800; }
.booking-week-first { scroll-margin-top: 16px; }
.booking-week-first { padding: 28px; background: #fff; border: 1px solid #e0e8eb; border-radius: 8px; }
.public-week-toolbar { display: grid; grid-template-columns: 44px minmax(210px,1fr) 44px minmax(190px,.7fr) minmax(190px,.7fr); gap: 10px; align-items: end; margin: 18px 0; }
.public-week-toolbar > strong { align-self: center; text-align: center; font-size: 1.05rem; }
.public-week-toolbar label { display: grid; gap: 5px; color: #657087; font-size: .76rem; font-weight: 800; }
.public-week-toolbar select { min-height: 44px; padding: 8px 34px 8px 10px; border: 1px solid #d6e0e5; border-radius: 6px; background: #fff; }
.public-week-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); border: 1px solid #dce6e9; border-radius: 7px; overflow: hidden; }
.public-week-day { min-height: 310px; border-right: 1px solid #dce6e9; background: #fbfcfd; }
.public-week-day:last-child { border-right: 0; }
.public-week-day > header { display: flex; align-items: baseline; justify-content: center; gap: 5px; min-height: 66px; padding: 12px 6px; background: #f0f5f6; border-bottom: 1px solid #dce6e9; }
.public-week-day > header span,.public-week-day > header small { color: #69758a; font-size: .72rem; }
.public-week-day > header strong { font-size: 1.35rem; }
.public-class-card { display: grid; width: calc(100% - 12px); gap: 4px; margin: 8px 6px; padding: 10px; border: 1px solid color-mix(in srgb,var(--class-color) 55%,white); border-left: 5px solid var(--class-color); border-radius: 6px; background: color-mix(in srgb,var(--class-color) 10%,white); color: #202b3b; text-align: left; }
.public-class-card span { color: var(--class-color); font-weight: 900; font-size: .82rem; }
.public-class-card strong { font-size: .84rem; line-height: 1.25; }
.public-class-card small { color: #5f6b7d; line-height: 1.2; }
.public-class-card em { color: #087c85; font-size: .7rem; font-style: normal; font-weight: 800; }
.public-class-card:hover:not(:disabled),.public-class-card.selected { outline: 2px solid var(--class-color); outline-offset: 1px; }
.public-class-card.unavailable { filter: grayscale(.35); opacity: .68; cursor: not-allowed; }
.public-class-card.unavailable em { color: #9d3150; }
.public-week-empty { padding: 24px 8px; color: #8490a1; text-align: center; font-size: .78rem; }
@media (max-width: 767px) {
  html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
  .schedule-mode-bar, .schedule-date-controls, .client-account-actions { align-items: stretch; flex-direction: column; }
  .schedule-mode-tabs { display: grid; grid-template-columns: 1fr 1fr; }
  .schedule-mode-tabs button { padding: 9px 7px; }
  .schedule-grid.date-mode { grid-template-columns: 64px minmax(0,1fr); width: 100%; }
  .client-account-grid { grid-template-columns: 1fr; }
  .client-account-page .booking-page { padding: 10px 10px 30px; }
  .client-auth-header { gap: 12px; justify-content: flex-start; margin-bottom: 14px; padding: 4px 6px; }
  .client-auth-header .client-logo { width: 92px; max-width: 92px; }
  .client-auth-header .eyebrow { font-size: 10px; }
  .client-auth-header h1 { font-size: 28px; }
  .client-auth-card { padding: 18px 16px; }
  .client-auth-card h2 { margin-bottom: 15px; font-size: 20px; }
  .client-auth-form { gap: 12px; }
  .client-register-grid { grid-template-columns: 1fr; gap: 12px; }
  .client-register-wide { grid-column: auto; }
  .client-dashboard-card { padding: 18px 16px; }
  .booking-login-required { align-items: stretch; flex-direction: column; padding: 16px; }
  .booking-login-required .btn { width: 100%; }
  .pass-form-top, .pass-service-list { grid-template-columns: 1fr; }
  .pass-service-row { grid-template-columns: minmax(0,1fr) 120px; }
  .booking-week-first { padding: 16px 12px; }
  .booking-page { overflow-x: clip; }
  .booking-wrap, .booking-flow, .booking-week-first, .public-week-toolbar { width: 100%; min-width: 0; }
  .booking-header.booking-header-compact { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 8px 6px 16px; text-align: center; }
  .booking-header-compact .brand-full { width: 112px; height: auto; min-height: 92px; }
  .booking-header-compact .brand-full img { width: 110px; height: auto; max-height: none; margin: 0; }
  .booking-header-copy { width: 100%; max-width: 100%; }
  .booking-header-copy .eyebrow { font-size: .68rem; }
  .booking-header-copy h1 { max-width: 100%; margin: 3px 0 0; font-size: 28px; line-height: 1.08; white-space: normal; overflow-wrap: anywhere; }
  .booking-header-copy p { display: none; }
  .booking-entry-actions { display: grid; grid-template-columns: 1fr; gap: 7px; margin-top: 9px; }
  .booking-entry-actions .btn { min-width: 0; width: 100%; padding: 8px 10px; font-size: .82rem; }
  .public-week-toolbar { grid-template-columns: 42px minmax(0,1fr) 42px; }
  .public-week-toolbar > * { min-width: 0; }
  .public-week-toolbar > strong { font-size: .92rem; line-height: 1.25; }
  .public-week-toolbar label { grid-column: span 3; }
  .public-week-toolbar select { width: 100%; max-width: 100%; }
  .public-week-grid { display: grid; grid-template-columns: 1fr; gap: 10px; border: 0; overflow: visible; }
  .public-week-day { display: grid; grid-template-columns: 84px minmax(0,1fr); min-height: 0; border: 1px solid #dce6e9; border-radius: 7px; overflow: hidden; background: #fff; }
  .public-week-day:last-child { border-right: 1px solid #dce6e9; }
  .public-week-day > header { grid-column: 1; grid-row: 1 / span 20; min-height: 100%; padding: 14px 8px; flex-direction: column; align-items: center; justify-content: flex-start; gap: 1px; border: 0; border-right: 1px solid #dce6e9; }
  .public-week-day > header strong { font-size: 1.55rem; }
  .public-class-card { grid-column: 2; width: auto; margin: 8px; padding: 11px 12px; }
  .public-week-empty { grid-column: 2; margin: 0; padding: 22px 12px; text-align: left; }
}
@media (min-width: 768px) and (max-width: 1100px) {
  .pass-form-top { grid-template-columns: 1fr 1fr; }
  .pass-validity { grid-column: 1 / -1; }
}