@charset "UTF-8";
:root {
  /* Colors - Backgrounds & Surfaces */
  --color-bg-base: #0B0E14;
  --color-surface-1: #151821;
  --color-surface-2: #1E222D;
  --color-surface-glass: rgba(255, 255, 255, 0.05);
  --color-border-subtle: rgba(255, 255, 255, 0.1);
  /* Colors - Primary & Accent */
  --color-primary: #0091FF;
  --color-primary-light: #52B4FF;
  --color-accent: #00E5FF;
  /* Colors - Semantic */
  --color-success: #00E676;
  --color-warning: #FFAB00;
  --color-danger: #FF3D00;
  --color-info: #29B6F6;
  /* Alpha Colors for interactive states & glows */
  --color-primary-alpha-20: rgba(0, 145, 255, 0.2);
  --color-primary-alpha-40: rgba(0, 145, 255, 0.4);
  --color-danger-alpha-10: rgba(255, 61, 0, 0.1);
  --color-success-alpha-10: rgba(0, 230, 118, 0.1);
  /* Colors - Text */
  --color-text-primary: #FFFFFF;
  --color-text-secondary: #A0A5B5;
  --color-text-muted: #6B7280;
  /* Typography */
  --font-family-display: 'Clash Display', sans-serif;
  --font-family-body: 'Inter', sans-serif;
  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  /* Border Radius */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 999rem;
  /* Shadows & Glows */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 16px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.7), 0 8px 16px rgba(0, 0, 0, 0.5);
  --shadow-nav: 0 -12px 32px rgba(0, 0, 0, 0.8), 0 -2px 0 rgba(255, 255, 255, 0.05);
  --shadow-recessed: inset 2px 2px 5px rgba(0, 0, 0, 0.5), inset -1px -1px 2px rgba(255, 255, 255, 0.05);
  --glow-primary: 0 0 0.9375rem var(--color-primary-alpha-40);
  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #0091FF 0%, #0062CC 100%);
  --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%);
  /* Surface tokens — overridden per theme */
  --color-nav-bg: rgba(15, 18, 25, 0.98);
  --color-card-bg: rgba(21, 24, 33, 0.85);
  --color-card-bevel: rgba(255, 255, 255, 0.15);
  --color-overlay-bg: rgba(0, 0, 0, 0.8);
  --color-recessed-bg: rgba(0, 0, 0, 0.2);
  /* Logo fills — overridden per theme */
  --logo-form-bg: #FFFFFF;
  --logo-form-shape: #0B0E14;
  --logo-loading-shape: #FFFFFF;
}

/* ── Light Theme ─────────────────────────────────────────────────── */
/* System preference → light */
@media (prefers-color-scheme: light) {
  html:not([data-theme=dark]) {
    --color-bg-base: #F0F4F9;
    --color-surface-1: #FFFFFF;
    --color-surface-2: #E6ECF5;
    --color-surface-glass: rgba(0, 0, 0, 0.03);
    --color-border-subtle: rgba(0, 0, 0, 0.1);
    --color-primary: #0082E6;
    --color-primary-light: #3AAEFF;
    --color-accent: #00B8CC;
    --color-success: #00A854;
    --color-warning: #CC8800;
    --color-danger: #CC3100;
    --color-info: #0288D1;
    --color-primary-alpha-20: rgba(0, 130, 230, 0.15);
    --color-primary-alpha-40: rgba(0, 130, 230, 0.18);
    --color-danger-alpha-10: rgba(204, 49, 0, 0.08);
    --color-success-alpha-10: rgba(0, 168, 84, 0.08);
    --color-text-primary: #0B0E14;
    --color-text-secondary: #4A5568;
    --color-text-muted: #9AA3B2;
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 8px 16px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.06);
    --shadow-nav: 0 -4px 20px rgba(0, 0, 0, 0.08), 0 -1px 0 rgba(0, 0, 0, 0.06);
    --shadow-recessed: inset 1px 1px 3px rgba(0, 0, 0, 0.08), inset -1px -1px 2px rgba(255, 255, 255, 0.9);
    --gradient-glass: linear-gradient(135deg, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0.01) 100%);
    --color-nav-bg: rgba(255, 255, 255, 0.98);
    --color-card-bg: rgba(255, 255, 255, 0.92);
    --color-card-bevel: rgba(0, 0, 0, 0.06);
    --color-overlay-bg: rgba(0, 0, 0, 0.5);
    --color-recessed-bg: rgba(0, 0, 0, 0.05);
    --logo-form-bg: #0B0E14;
    --logo-form-shape: #FFFFFF;
    --logo-loading-shape: #0B0E14;
  }
}
/* Explicit user choice → light */
html[data-theme=light] {
  --color-bg-base: #F0F4F9;
  --color-surface-1: #FFFFFF;
  --color-surface-2: #E6ECF5;
  --color-surface-glass: rgba(0, 0, 0, 0.03);
  --color-border-subtle: rgba(0, 0, 0, 0.1);
  --color-primary: #0082E6;
  --color-primary-light: #3AAEFF;
  --color-accent: #00B8CC;
  --color-success: #00A854;
  --color-warning: #CC8800;
  --color-danger: #CC3100;
  --color-info: #0288D1;
  --color-primary-alpha-20: rgba(0, 130, 230, 0.15);
  --color-primary-alpha-40: rgba(0, 130, 230, 0.18);
  --color-danger-alpha-10: rgba(204, 49, 0, 0.08);
  --color-success-alpha-10: rgba(0, 168, 84, 0.08);
  --color-text-primary: #0B0E14;
  --color-text-secondary: #4A5568;
  --color-text-muted: #9AA3B2;
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 8px 16px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.06);
  --shadow-nav: 0 -4px 20px rgba(0, 0, 0, 0.08), 0 -1px 0 rgba(0, 0, 0, 0.06);
  --shadow-recessed: inset 1px 1px 3px rgba(0, 0, 0, 0.08), inset -1px -1px 2px rgba(255, 255, 255, 0.9);
  --gradient-glass: linear-gradient(135deg, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0.01) 100%);
  --color-nav-bg: rgba(255, 255, 255, 0.98);
  --color-card-bg: rgba(255, 255, 255, 0.92);
  --color-card-bevel: rgba(0, 0, 0, 0.06);
  --color-overlay-bg: rgba(0, 0, 0, 0.5);
  --color-recessed-bg: rgba(0, 0, 0, 0.05);
  --logo-form-bg: #0B0E14;
  --logo-form-shape: #FFFFFF;
  --logo-loading-shape: #0B0E14;
}

/* --------------------------------------------------------------------------
   2. BASE STYLES & APP SHELL
   -------------------------------------------------------------------------- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

body {
  background-color: var(--color-bg-base);
  color: var(--color-text-primary);
  font-family: var(--font-family-body);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  overscroll-behavior-y: none;
}

h1, h2, h3 {
  font-family: var(--font-family-display);
  font-weight: 600;
  margin-bottom: var(--space-4);
}

h1 {
  font-size: 1.75rem;
  border-bottom: 0.0625rem solid var(--color-border-subtle);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-6);
}

h3 {
  font-size: 1.25rem;
}

/* Splash Screen & Loading */
.splash, .loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--color-bg-base);
  z-index: 1000;
  padding: var(--space-4);
}

.splash {
  overflow-y: auto;
}
.splash::before, .splash::after {
  content: "";
  flex: 1;
  min-height: var(--space-4);
}

.loading {
  z-index: 2000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  justify-content: center;
  overflow: hidden;
  perspective: 1000px;
}
.loading.in {
  opacity: 1;
  pointer-events: auto;
}
.loading svg {
  max-width: 64px;
  animation: loadingFlip3D 3s ease-in-out infinite;
}
.loading svg .app-background {
  fill: transparent;
}
.loading svg .app-shape {
  fill: var(--logo-loading-shape);
}

@keyframes loadingFlip3D {
  0% {
    transform: rotateY(0deg) rotateX(0deg);
  }
  33% {
    transform: rotateY(180deg) rotateX(0deg);
  }
  66% {
    transform: rotateY(360deg) rotateX(180deg);
  }
  100% {
    transform: rotateY(360deg) rotateX(360deg);
  }
}
.logo {
  text-align: center;
  margin-bottom: var(--space-6);
}
.logo svg {
  max-width: 150px;
  height: auto;
}

form .logo .app-background, .forgot-step .logo .app-background, .email-verify-step .logo .app-background {
  fill: var(--logo-form-bg);
}
form .logo .app-shape, .forgot-step .logo .app-shape, .email-verify-step .logo .app-shape {
  fill: var(--logo-form-shape);
}

/* Main App Wrapper */
main.pages {
  padding: var(--space-4);
  padding-bottom: calc(5rem + 4rem + env(safe-area-inset-bottom)); /* Room for bottom nav + the floating card button above it */
  position: relative;
  min-height: 100vh;
  overscroll-behavior-y: contain;
}

.page {
  display: none !important;
}
.page.active {
  display: block !important;
  animation: fadeIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.page.settings-view,
.page.membership-details-view,
.page.loyalty-details-view,
.page.history-view,
.page.edit-view,
.page.password-view,
.page.conversation-view,
.page.instructor-sessions-view,
.page.change-place-view,
.page.my-feedback-view,
.page.fb-thread-view {
  display: block !important;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1050;
  background: var(--color-bg-base);
  overflow: hidden;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.page.settings-view.active,
.page.membership-details-view.active,
.page.loyalty-details-view.active,
.page.history-view.active,
.page.edit-view.active,
.page.password-view.active,
.page.conversation-view.active,
.page.instructor-sessions-view.active,
.page.change-place-view.active,
.page.my-feedback-view.active,
.page.fb-thread-view.active {
  transform: translateX(0);
  pointer-events: auto;
  animation: none;
}

.page.change-place-view.active {
  display: flex !important;
  flex-direction: column;
  bottom: calc(4.5rem + env(safe-area-inset-bottom)) !important;
}
.page.change-place-view .section-header {
  flex-shrink: 0;
  padding: var(--space-4) var(--space-6);
  margin-bottom: 0;
}
.page.change-place-view #clubs-map {
  flex: 1;
  min-height: 0;
  width: 100%;
}
.page.change-place-view .club-info-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 60vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-surface-1);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.35);
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 10;
}
.page.change-place-view .club-info-overlay.active {
  transform: translateY(0);
}
.page.change-place-view .club-info-overlay .club-info-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: var(--space-3) var(--space-4);
}
.page.change-place-view .club-info-overlay .club-info-close {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: rgba(128, 128, 128, 0.15);
  border: 1px solid var(--color-border-subtle);
  color: var(--color-text-primary);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page.change-place-view .club-info-overlay .club-info-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 var(--space-6) var(--space-2);
}
.page.change-place-view .club-info-overlay .club-info-photo img {
  width: 100%;
  height: 120px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--radius-md);
  display: block;
  margin-bottom: var(--space-4);
}
.page.change-place-view .club-info-overlay .club-info-body h2 {
  font-size: 1.25rem;
  margin-bottom: var(--space-1);
  border: none;
}
.page.change-place-view .club-info-overlay .club-info-body p {
  color: var(--color-text-muted);
  font-size: 0.875rem;
}
.page.change-place-view .club-info-overlay .club-info-footer {
  flex-shrink: 0;
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border-subtle);
  background: var(--color-surface-1);
}
.page.change-place-view .club-info-overlay .club-info-footer #club-info-fav-btn {
  width: 100%;
  justify-content: center;
}

.page.fb-thread-view.active {
  display: flex !important;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: calc(5rem + env(safe-area-inset-bottom));
  z-index: 1050;
  background: var(--color-bg-base);
  animation: none;
}
.page.conversation-view.active {
  display: flex !important;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: calc(5rem + env(safe-area-inset-bottom));
  z-index: 1050;
  background: var(--color-bg-base);
  animation: none;
}
.page.conversation-view.active .conv-profile-form {
  flex: 1;
  min-height: 0;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(1rem) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
/* --------------------------------------------------------------------------
   3. COMPONENTS
   -------------------------------------------------------------------------- */
/* --- Cards --- */
.card {
  background-color: var(--color-card-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  border: 1px solid var(--color-border-subtle);
  border-top: 1px solid var(--color-card-bevel); /* Bevel highlight */
  width: 100%;
  max-width: 500px; /* Constrain on tablets/desktop */
  margin: 0 auto var(--space-4) auto;
  box-shadow: var(--shadow-md);
}
@media (max-width: 480px) {
  .card {
    padding: var(--space-4);
  }
}

.link-card-icon {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-4);
  color: var(--color-text-muted);
}
.link-card-icon svg {
  width: 3rem;
  height: 3rem;
}

.link-card-manual-toggle {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-top: var(--space-4);
  margin-bottom: 0;
}
.link-card-manual-toggle button {
  background: none;
  border: none;
  padding: 0;
  color: #0091FF;
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  -webkit-tap-highlight-color: transparent;
}

.link-card-manual {
  display: none;
  width: 100%;
  margin-top: var(--space-4);
  text-align: left;
}
.link-card-manual.visible {
  display: block;
}
.link-card-manual .button--primary {
  width: 100%;
  justify-content: center;
  margin-top: var(--space-2);
}

/* --- Flip Cards --- */
.flip-card {
  background-color: transparent;
  perspective: 1500px;
  margin-bottom: var(--space-4);
  cursor: pointer;
  touch-action: manipulation;
  width: 100%;
  max-width: 500px;
  margin: 0 auto var(--space-4) auto;
  min-height: 22rem;
}
.flip-card:active {
  opacity: 0.9;
  transform: scale(0.99);
  transition: transform 0.1s ease;
}
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 22rem;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
  will-change: transform;
}
.flip-card-inner.flipped {
  transform: rotateY(180deg);
  height: auto;
  min-height: unset;
}
.flip-card-inner.flipped .flip-card-front {
  display: none !important;
}
.flip-card-inner.flipped .flip-card-back {
  position: relative !important;
  height: auto !important;
  top: auto;
  left: auto;
}
.flip-card-front, .flip-card-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.flip-card-front {
  justify-content: space-between;
}
.flip-card-back {
  transform: rotateY(180deg);
}

.flip-hint {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  color: var(--color-primary);
  opacity: 0.8;
}
.flip-hint.back-hint {
  right: auto;
  left: var(--space-4);
}
.flip-hint .icon {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.flip-hint .icon svg {
  width: 1.25rem;
  height: 1.25rem;
}
.flip-hint .icon svg:first-child:not(:last-child), .flip-hint .icon svg:last-child:not(:first-child) {
  width: 1rem;
  height: 1rem;
  opacity: 0.6;
}

.flip-instruction {
  position: absolute;
  bottom: var(--space-4);
  left: 0;
  right: 0;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* --- Forms & Inputs --- */
.group {
  display: flex;
  gap: var(--space-4);
}
.group > * {
  flex: 1;
}
.field-exists-msg {
  font-size: 0.78rem;
  color: var(--color-danger);
  margin-top: var(--space-2);
  line-height: 1.4;
}
.field-exists-msg .trigger {
  color: var(--color-primary);
  text-decoration: underline;
  cursor: pointer;
  font-weight: 600;
}

.input-group, .row:not(.buttons) {
  display: flex;
  flex-direction: column-reverse; /* Puts label visually above input based on your HTML */
  margin-bottom: var(--space-4);
  position: relative;
  opacity: 0;
  transform: translateY(0.625rem);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.input-group.in, .row:not(.buttons).in {
  opacity: 1;
  transform: translateY(0);
}
.input-group label, .row:not(.buttons) label {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-1);
  display: block;
}
.input-group label span, .row:not(.buttons) label span {
  color: var(--color-danger);
  margin-left: 0.25rem;
}

.input {
  width: 100%;
  background-color: var(--color-surface-2);
  border: 0.0625rem solid var(--color-border-subtle);
  color: var(--color-text-primary);
  -webkit-text-fill-color: var(--color-text-primary);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-family: var(--font-family-body);
  font-size: 1rem;
  box-shadow: var(--shadow-recessed);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.125rem var(--color-primary-alpha-20), var(--shadow-recessed);
}
.input:disabled {
  background-color: var(--color-bg-base);
  color: var(--color-text-muted);
  cursor: not-allowed;
  opacity: 0.7;
}
.input::-moz-placeholder {
  color: var(--color-text-muted);
}
.input::placeholder {
  color: var(--color-text-muted);
}
.input.valid {
  border-color: var(--color-success, #22c55e);
  box-shadow: 0 0 0 0.125rem rgba(34, 197, 94, 0.2), var(--shadow-recessed);
}
.input.invalid {
  border-color: var(--color-danger, #ef4444);
  box-shadow: 0 0 0 0.125rem rgba(239, 68, 68, 0.2), var(--shadow-recessed);
}

.phone-inputs {
  display: flex;
  gap: var(--space-2);
}
.phone-inputs input[name=prefix] {
  width: 4.5rem;
  text-align: center;
  padding-left: var(--space-2);
  padding-right: var(--space-2);
  flex-shrink: 0;
}

.error-container {
  color: var(--color-danger);
  font-size: 0.875rem;
  margin-bottom: var(--space-2);
  text-align: center;
}
.error-container:empty {
  display: none;
}
.error-container.is-success {
  color: var(--color-success);
}

.warning {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  background: var(--color-danger-alpha-10);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-md);
  color: var(--color-danger);
  font-size: 0.875rem;
  font-weight: 500;
  padding: var(--space-4);
  text-align: center;
  margin-bottom: var(--space-4);
}
.warning .trigger {
  display: inline-block;
  color: var(--color-danger);
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
  font-size: 0.8125rem;
}
.warning .trigger:active {
  opacity: 0.7;
}

/* --- Buttons & Triggers --- */
.button {
  display: inline-flex;
  align-items: center;
  text-align: left;
  justify-content: flex-start;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-full);
  font-family: var(--font-family-body);
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  border: none;
  text-decoration: none;
  color: var(--color-text-primary);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.3);
  transition: transform 0.1s ease, opacity 0.1s ease, box-shadow 0.1s ease;
}
.button:active {
  transform: scale(0.96);
  box-shadow: var(--shadow-recessed);
}
.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.button.btn--loading {
  justify-content: center;
  pointer-events: none;
}
.button .icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.button .icon svg {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
}
.button--primary {
  background: var(--gradient-primary);
  color: white;
  box-shadow: var(--glow-primary), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}
.button--accent {
  background: var(--color-surface-2);
  color: var(--color-accent);
  border: 0.0625rem solid var(--color-border-subtle);
}
.button--ghost {
  background: var(--color-surface-2);
  color: var(--color-text-primary);
  border: 0.0625rem solid var(--color-border-subtle);
  box-shadow: none;
}
.button.secondary {
  background: transparent;
  color: var(--color-text-primary);
  border: 0.0625rem solid var(--color-border-subtle);
}
.button--secondary {
  background: rgba(0, 145, 255, 0.12);
  color: #0091FF;
  border: 0.0625rem solid rgba(0, 145, 255, 0.4);
}
.button.warnng { /* Kept your typo 'warnng' */
  background: var(--color-danger-alpha-10);
  color: var(--color-danger);
  border: 0.0625rem solid rgba(255, 61, 0, 0.3);
}
.button--glass {
  background: var(--gradient-glass);
  border: 0.0625rem solid var(--color-border-subtle);
  color: var(--color-text-primary);
}
.button--danger {
  background: var(--color-danger);
  color: #fff;
  border: none;
}

.buttons {
  display: flex;
  gap: var(--space-4);
}
.buttons.column {
  flex-direction: column;
  align-items: flex-start;
}
.buttons.column > span {
  color: var(--color-text-muted);
  font-size: 0.875rem;
}
.buttons.buttons-row {
  width: 100%;
  flex-direction: row;
  justify-content: space-between;
  margin: 0;
  padding: var(--space-4) var(--space-6) calc(var(--space-4) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--color-border-subtle);
  background: var(--color-nav-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-primary-light);
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
}
.trigger .icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.trigger .icon svg {
  width: 1rem;
  height: 1rem;
  display: block;
}
.trigger:active {
  opacity: 0.7;
}

/* --- Overlay & Modals --- */
.overlay {
  position: fixed;
  inset: 0;
  background-color: var(--color-overlay-bg);
  backdrop-filter: blur(0.5rem);
  -webkit-backdrop-filter: blur(0.5rem);
  z-index: 3000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.overlay.in {
  opacity: 1;
  pointer-events: auto;
}
.overlay.in .card {
  transform: translateY(0);
  opacity: 1;
}
.overlay.out {
  opacity: 0;
  pointer-events: none;
}
.overlay.out .card {
  transform: translateY(100%);
}
.overlay .card {
  width: 100%;
  max-width: 100%;
  padding: 0;
  height: 100%;
  max-height: 100vh;
  margin: 0;
  border-radius: 0;
  border: none;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.32, 1, 0.23, 1);
}
.overlay .card h1 {
  text-align: left;
  font-size: 1.5rem;
  margin-bottom: var(--space-6);
}
.overlay .spinner {
  padding: var(--space-8) 0;
  display: flex;
  justify-content: center;
}
.overlay .spinner svg {
  width: 3rem;
  height: 3rem;
  animation: spin 1s linear infinite;
  color: var(--color-primary);
}
.overlay .membership-info-card,
.overlay .services-section {
  padding: 0 var(--space-6);
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.icon-spin {
  animation: spin 0.8s linear infinite;
}

/* --------------------------------------------------------------------------
   4. LAYOUT SPECIFIC SECTIONS
   -------------------------------------------------------------------------- */
/* --- Bottom Navigation --- */
header {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1100; /* Higher than days-nav (10) and page content */
  pointer-events: none;
}
header ul.bottom-nav {
  pointer-events: auto;
  list-style: none;
  background: var(--color-nav-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(15px);
  border-top: 1px solid var(--color-border-subtle);
  box-shadow: var(--shadow-nav);
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: var(--space-3) var(--space-2) max(var(--space-3), env(safe-area-inset-bottom));
  width: 100%;
  margin: 0;
  border-radius: 0;
}
.fab-mycard {
  position: absolute;
  bottom: calc(100% + var(--space-2));
  right: var(--space-4);
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  border: none;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.15s ease, opacity 0.2s ease;
}
.fab-mycard svg {
  width: 1.5rem;
  height: 1.5rem;
}
.fab-mycard:active {
  transform: scale(0.9);
}
.fab-mycard.hidden {
  display: none;
}
header .item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  flex: 1;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: color 0.2s ease, transform 0.15s ease;
}
header .item span {
  font-size: 0.65rem;
  text-align: center;
  line-height: 1.2;
  min-height: 1.6rem;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
header .item .icon {
  display: flex;
  justify-content: center;
  align-items: center;
}
header .item .icon svg {
  width: 1.5rem;
  height: 1.5rem;
}
header .item .icon svg .app-background {
  fill: transparent;
}
header .item .icon svg .app-shape {
  fill: currentColor;
}
header .item {
  /* Active State (checking both for redundancy based on your code) */
}
header .item.active, header .item--active {
  color: var(--color-primary);
}
header .item.active .icon svg, header .item--active .icon svg {
  filter: drop-shadow(0 0 0.5rem var(--color-primary-alpha-40)) drop-shadow(0 0 0.125rem var(--color-primary-alpha-40));
  transform: translateY(-2px);
}
header .item.active span, header .item--active span {
  text-shadow: 0 0 0.5rem var(--color-primary-alpha-40);
}
header .item .icon svg {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
header .item:active {
  transform: scale(0.9);
}

/* --- Profile Page --- */
.profile-data {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.client-section {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  padding: 0 var(--space-2);
}
.client-section .profile-image {
  width: 4.5rem;
  height: 4.5rem;
  flex-shrink: 0;
}
.dashboard-avatar-wrap {
  flex-shrink: 0;
}
.dashboard-avatar-wrap .avatar-edit-btn {
  bottom: 1.1rem;
}
.client-section .client-data h2 {
  margin-bottom: 0.125rem;
  font-size: 1.35rem;
  line-height: 1.2;
}
.client-section .client-data .client-club {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
}
.client-section .client-data .client-club span {
  color: var(--color-primary-light);
  margin-left: 0.25rem;
  font-weight: 500;
}
.client-section .client-data .client-club .client-club-unset {
  cursor: pointer;
}
.client-section .client-data .client-club .client-club-unset::after {
  content: " ›";
  opacity: 0.7;
}
.client-section .client-data .client-club .client-club-unset:active {
  opacity: 0.6;
}

.status-card {
  background: linear-gradient(135deg, var(--color-surface-1) 0%, var(--color-surface-2) 100%);
  position: relative;
  overflow: hidden;
}
.status-card > .heading {
  display: none !important;
}
.status-card .heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-6);
}
.status-card .heading .heading-left h3 {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  margin-bottom: 0.25rem;
}
.status-card .heading .heading-left h2 {
  font-size: 1.75rem;
  color: var(--color-text-primary);
  margin-bottom: 0.5rem;
  border: none;
  padding: 0;
}
.status-card .heading .heading-left p {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.status-card .heading .heading-right {
  color: var(--color-primary-light);
}
.status-card .heading .heading-right svg {
  width: 4rem;
  height: 4rem;
  filter: drop-shadow(0 0 1rem var(--color-primary-alpha-40));
}
.status-card .client-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: var(--space-3); /* Vertical padding */
  border-bottom: 0.0625rem solid var(--color-border-subtle);
  margin-bottom: var(--space-4); /* Space before the next section */
}
.status-card .client-card .card-name {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}
.status-card .client-card.trigger-cards {
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.2s ease, transform 0.1s ease;
}
.status-card .client-card.trigger-cards .card-name {
  color: var(--color-primary);
}
.status-card .client-card.trigger-cards .icon {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-primary);
}
.status-card .client-card.trigger-cards .icon svg {
  width: 1.25rem;
  height: 1.25rem;
}
.status-card .client-card.trigger-cards .icon svg:first-child:not(:last-child) {
  width: 1rem;
  height: 1rem;
  opacity: 0.6;
}
.status-card .client-card.trigger-cards:active {
  transform: scale(0.95);
  opacity: 1;
}
.status-card .client-card.no-card {
  display: block;
  padding: 0;
  border-bottom: none;
  margin-bottom: var(--space-4);
  opacity: 1;
}
.status-card .client-card.no-card .no-card-cta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: linear-gradient(135deg, var(--color-primary-alpha-20) 0%, transparent 100%);
  border: 1px solid var(--color-primary-alpha-40);
  border-radius: var(--radius-md);
  animation: noCardPulse 2.5s ease-in-out infinite;
}
.status-card .client-card.no-card .no-card-icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--color-primary-alpha-20);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
}
.status-card .client-card.no-card .no-card-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}
.status-card .client-card.no-card .no-card-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.status-card .client-card.no-card .no-card-text strong {
  font-size: 0.875rem;
  color: var(--color-primary);
  font-weight: 600;
}
.status-card .client-card.no-card .no-card-text span {
  font-size: 0.7rem;
  color: var(--color-text-muted);
}
.status-card .client-card.no-card .no-card-arrow {
  flex-shrink: 0;
  color: var(--color-primary);
  opacity: 0.7;
}
.status-card .client-card.no-card .no-card-arrow svg {
  width: 1rem;
  height: 1rem;
}
.status-card .client-card.no-card:active .no-card-cta {
  transform: scale(0.97);
}
@keyframes noCardPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 var(--color-primary-alpha-20);
  }
  50% {
    box-shadow: 0 0 0 4px var(--color-primary-alpha-20);
  }
}
.status-card .data {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  padding: var(--space-4);
  background: var(--color-recessed-bg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-recessed);
}
.status-card .data > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.status-card .data > div span {
  font-size: 0.65rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.status-card .data > div strong {
  font-size: 3.5rem;
  font-weight: 700;
  color: var(--color-text-primary);
  font-family: var(--font-family-display);
  line-height: 1;
}
.status-card .data .remaining-days {
  border-right: 0.0625rem solid var(--color-border-subtle);
}
.status-card .loyalty-data .loyalty-title {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
  border: none;
  padding: 0;
}
.status-card .loyalty-data .loyalty-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}
.status-card .loyalty-data .loyalty-content strong {
  color: var(--color-success);
  font-size: 1.25rem;
}
.status-card .loyalty-data .loyalty-content strong span {
  font-size: 0.75rem;
  margin-left: 0.25rem;
  color: var(--color-text-muted);
  font-weight: normal;
}

.promo-vertical-card {
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, var(--color-surface-2) 0%, var(--color-bg-base) 100%);
  padding: 0;
  overflow: hidden;
}
.promo-vertical-card .promo-image-container {
  width: 100%;
  height: auto;
  min-height: 200px;
  background-color: var(--color-recessed-bg);
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.promo-vertical-card .promo-image-container picture, .promo-vertical-card .promo-image-container img {
  width: 100%;
  height: auto;
  max-height: 400px;
  -o-object-fit: contain;
     object-fit: contain;
  transform: none;
  filter: none;
  display: block;
}
.promo-vertical-card .promo-content-area {
  padding: var(--space-6);
  background: var(--color-surface-glass);
  border-top: 1px solid var(--color-border-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.promo-vertical-card .promo-content-area .badge {
  align-self: flex-start;
  width: -moz-fit-content;
  width: fit-content;
  background: var(--color-warning);
  color: var(--color-bg-base);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.promo-vertical-card .promo-content-area h2 {
  font-size: 1.25rem;
  margin-bottom: var(--space-2);
  border: none;
  padding: 0;
  color: var(--color-text-primary);
}
.promo-vertical-card .promo-content-area p, .promo-vertical-card .promo-content-area ul li {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
}
.promo-vertical-card .promo-content-area ul {
  margin: var(--space-3) 0 var(--space-4) 0;
  padding-left: 1.25rem;
  list-style-type: disc;
}
.promo-vertical-card .promo-content-area ul li {
  margin-bottom: var(--space-1);
}
.promo-vertical-card .promo-content-area ul li::marker {
  color: var(--color-primary);
}
.promo-vertical-card .promo-content-area button {
  align-self: flex-start;
  margin-top: var(--space-2);
}

/* Old .product-month-card styles are removed as they are replaced by .promo-vertical-card */
/* .product-month-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, var(--color-surface-2) 0%, var(--color-bg-base) 100%);
  padding-right: 0 !important;
  overflow: hidden;

  .product-content {
    flex: 1;
    .badge {
      display: inline-block;
      background: var(--color-warning);
      color: var(--color-bg-base);
      font-size: 0.65rem;
      font-weight: 700;
      padding: 0.125rem 0.5rem;
      border-radius: var(--radius-sm);
      text-transform: uppercase;
      margin-bottom: var(--space-2);
    }
    h2 { font-size: 1.25rem; margin-bottom: var(--space-2); border: none; padding: 0; }
    p { font-size: 0.875rem; color: var(--color-text-secondary); margin-bottom: var(--space-4); }
  }

  .product-image {
    width: 40%;
    img { width: 100%; height: auto; transform: scale(1.2) rotate(-10deg); filter: drop-shadow(0 10px 20px rgba(0,0,0,0.5)); }
  }
} */
/* Existing promo-card and tip-card styles remain unchanged */
/* .promo-card {
  border-left: 4px solid var(--color-primary);
  .promo-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    .icon { color: var(--color-primary-light); svg { width: 2rem; height: 2rem; } }
    .promo-title {
      h3 { font-size: 0.75rem; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 0; border: none; padding: 0;}
      h2 { font-size: 1.25rem; margin-bottom: 0; border: none; padding: 0; }
    }
  }
  p { font-size: 0.9375rem; color: var(--color-text-secondary); }
}

.tip-card {
  background: var(--color-surface-glass);
  border-style: dashed;
  .tip-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    color: var(--color-accent);
    .icon svg { width: 1.25rem; height: 1.25rem; }
    h3 { font-size: 0.875rem; margin-bottom: 0; text-transform: uppercase; border: none; padding: 0;}
  }
  p { font-size: 0.875rem; color: var(--color-text-secondary); font-style: italic; }
} */
/* Other styles remain unchanged */
/* .profile-header {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-6);
}

.profile-image {
  width: 5.5rem;
  height: 5.5rem;
  border-radius: var(--radius-full);
  background-color: var(--color-surface-2);
  border: 0.125rem solid var(--color-border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: var(--shadow-md), var(--glow-primary);

  img { width: 100%; height: 100%; object-fit: cover; }
  svg { 
    width: 2.5rem; 
    height: 2.5rem; 
    color: var(--color-text-muted); 
  }
}

.profile-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: var(--space-3);
  border-bottom: 0.0625rem solid var(--color-border-subtle);

  p:first-child { color: var(--color-text-secondary); font-size: 0.875rem; }
  p:last-child { color: var(--color-text-primary); font-weight: 500; }

  &:last-of-type { border-bottom: none; }
}

.section-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  border-bottom: 0.0625rem solid var(--color-border-subtle);
  padding-bottom: var(--space-4);

  .back-arrow {
    cursor: pointer;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    background: var(--color-surface-2);
    transition: all 0.2s ease;

    svg { width: 1.25rem; height: 1.25rem; }
    &:active { color: var(--color-primary); transform: scale(0.9); }
  }

  h1 {
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
    flex: 1;
  }

  .icon-button {
  }

  .icon-button {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: var(--color-surface-2);
    color: var(--color-warning);
    cursor: pointer;
    transition: all 0.2s ease;

    svg { width: 1.25rem; height: 1.25rem; }
    &:active { transform: scale(0.9); background: var(--color-primary-alpha-20); color: var(--color-primary); }
  }
}

.profile-menu {
  margin-top: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);

  .menu-item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface-2);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;

    .icon {
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--color-primary-light);
      svg { width: 1.25rem; height: 1.25rem; }
    }

    span {
      flex: 1;
      font-weight: 500;
      font-size: 0.9375rem;
    }

    .arrow {
      color: var(--color-text-muted);
      svg { width: 1rem; height: 1rem; }
    }

    &:active {
      background: var(--color-surface-glass);
      transform: scale(0.98);
    }

    &.danger {
      color: var(--color-danger);
      .icon { color: var(--color-danger); }
      .arrow { color: rgba(255, 61, 0, 0.4); }
    }
  }

  .menu-divider {
    height: 1px;
    background: var(--color-border-subtle);
    margin: var(--space-2) 0;
  }
}

/* --- Settings Specific Styles --- */
.profile-form {
  display: flex;
  flex-direction: column;
  height: calc(100dvh - 4.5rem - env(safe-area-inset-bottom));
  padding-top: calc(var(--space-4) + env(safe-area-inset-top));
  padding-bottom: 0;
  overflow: hidden;
}
.profile-form .section-header {
  padding: 0 var(--space-6) var(--space-4) var(--space-6);
  margin-bottom: 0;
}
.profile-form .scroll-area {
  flex: 1;
  overflow-y: auto;
  overflow-anchor: none;
  padding: 0 var(--space-4) var(--space-6);
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-subtle) transparent;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
.profile-form .scroll-area::-webkit-scrollbar {
  width: 4px;
}
.profile-form .scroll-area::-webkit-scrollbar-thumb {
  background: var(--color-border-subtle);
  border-radius: var(--radius-full);
}

.places-list,
.loyalty-list, .history-list {
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}

/* --- History List Styles --- */
.history-section-title {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  margin: var(--space-6) var(--space-6) var(--space-3);
}

.history-section-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-6) var(--space-6) var(--space-3);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.history-section-toggle .history-section-title {
  margin: 0;
}
.history-section-toggle .toggle-chevron {
  color: var(--color-text-muted);
  transition: transform 0.25s ease;
  flex-shrink: 0;
}
.history-section-toggle .toggle-chevron svg {
  width: 1rem;
  height: 1rem;
  display: block;
}
.history-section-toggle.open .toggle-chevron {
  transform: rotate(180deg);
}

.history-loading {
  padding: var(--space-4) var(--space-6);
  color: var(--color-text-muted);
}

/* --- Group Class Cards --- */
.group-section-card {
  background: var(--color-card-bg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-subtle);
  border-top: 1px solid var(--color-card-bevel);
  box-shadow: var(--shadow-sm);
  margin: 0 var(--space-4) var(--space-4);
  overflow: hidden;
}
.group-section-card .history-section-title {
  margin: var(--space-4) var(--space-4) var(--space-3);
}
.group-section-card .history-section-toggle {
  padding: var(--space-4) var(--space-4) var(--space-3);
}
.group-section-card #group-upcoming-list, .group-section-card #group-past-list {
  padding: 0 var(--space-3) var(--space-3);
}

.group-booking-card {
  background: var(--color-surface-1);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-subtle);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.group-booking-card:last-child {
  margin-bottom: 0;
}

.group-booking-body {
  flex: 1;
  min-width: 0;
}

.group-booking-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 0.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.group-booking-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
}

.group-booking-time {
  font-weight: 600;
}

.group-booking-instructor {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 0.15rem;
}

.group-cancel-btn, .sched-cancel-btn {
  flex-shrink: 0;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-danger);
  background: var(--color-danger-alpha-10);
  color: var(--color-danger);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}
.group-cancel-btn:hover, .sched-cancel-btn:hover {
  background: rgba(255, 61, 0, 0.18);
}
.group-cancel-btn:disabled, .sched-cancel-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.btn-book-class {
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-primary);
  background: var(--color-primary-alpha-20);
  color: var(--color-primary-light);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}
.btn-book-class:hover {
  background: var(--color-primary-alpha-40);
}
.btn-book-class:disabled {
  opacity: 0.5;
  cursor: default;
}

.group-empty {
  padding: var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
}

.history-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-subtle);
}
.history-item .history-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.history-item .history-info .club-name {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text-primary);
}
.history-item .history-info .activity-type {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.history-item .history-date {
  text-align: right;
}
.history-item .history-date .date {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  font-weight: 500;
}
.history-item .history-date .time {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.setting-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.setting-row.setting-row--sub {
  padding-left: var(--space-6);
  border-top-color: transparent;
  font-size: 0.875rem;
}
.setting-row {
  padding: var(--space-3) 0;
  padding: var(--space-3) var(--space-6); /* Apply consistent horizontal padding */
  border-bottom: 1px solid var(--color-border-subtle);
}
.setting-row label {
  font-size: 0.9375rem;
  color: var(--color-text-primary);
  margin-bottom: 0;
}
.setting-row:last-of-type {
  border-bottom: none;
}

.settings-section-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  padding: var(--space-4) var(--space-6) var(--space-2);
}

.setting-label-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.setting-label-group small {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

/* --- Custom Switch Toggle --- */
.switch {
  position: relative;
  display: inline-block;
  width: 2.75rem;
  height: 1.5rem;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-surface-2);
  transition: 0.4s;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border-subtle);
}
.switch .slider:before {
  position: absolute;
  content: "";
  height: 1.125rem;
  width: 1.125rem;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}
.switch input:checked + .slider {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
.switch input:checked + .slider:before {
  transform: translateX(1.25rem);
}
.switch input:disabled + .slider {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* --- QR Code Card --- */
.card .qr {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--space-4);
}
.card .qr img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  display: block;
}

.membership-details {
  flex-grow: 1;
}
.membership-details h1 {
  text-align: left;
  border-bottom: none;
  padding-bottom: 0;
  border-bottom: 0.0625rem solid var(--color-border-subtle);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  font-size: 1.5rem;
}

.card-type-badge {
  background-color: var(--color-primary-alpha-20);
  color: var(--color-primary-light);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* --- Schedule / Group Classes --- */
.schedule-view {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.days-nav {
  display: flex;
  gap: 0;
  padding: 0;
  margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) var(--space-4) calc(var(--space-4) * -1);
  position: sticky;
  top: 0;
  z-index: 100; /* Below bottom-nav but above content */
  background: var(--color-surface-1);
  border-bottom: 0.0625rem solid var(--color-border-subtle);
  transition: box-shadow 0.3s ease;
}
.days-nav.is-stuck {
  box-shadow: var(--shadow-md);
  border-bottom-color: var(--color-border-subtle);
}
.days-nav a {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: var(--space-3) 0;
  color: var(--color-text-secondary);
  text-decoration: none;
  position: relative;
  transition: color 0.25s ease, background 0.25s ease;
}
.days-nav a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gradient-primary);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  z-index: 0;
}
.days-nav a strong, .days-nav a small, .days-nav a .desktop-day, .days-nav a .mobile-day {
  position: relative;
  z-index: 1;
}
.days-nav a strong {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary);
  transition: color 0.25s ease;
}
.days-nav a small {
  font-size: 0.75rem;
  margin-top: 0.125rem;
}
.days-nav a .desktop-day {
  display: none;
}
.days-nav a .mobile-day {
  display: block;
}
.days-nav a.current {
  color: var(--color-primary-light);
  background: var(--color-primary-alpha-10);
}
.days-nav a.current strong {
  color: var(--color-primary-light);
}
.days-nav a.current::before {
  content: "";
  position: absolute;
  bottom: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 0.25rem;
  height: 0.25rem;
  background: var(--color-primary);
  border-radius: 50%;
  box-shadow: 0 0 0.5rem var(--color-primary);
  z-index: 1;
}
.days-nav a.active {
  color: white;
  background: transparent;
}
.days-nav a.active strong, .days-nav a.active small {
  color: white;
}
.days-nav a.active::after {
  opacity: 1;
}
.days-nav a.active.current::before {
  background: white;
  box-shadow: 0 0 0.5rem white;
}
.days-nav a:active {
  transform: scale(0.95);
}

.schedule-day {
  overflow: hidden;
}
.schedule-day h3 {
  font-size: 1rem;
  color: var(--color-text-secondary);
  border-bottom: 0.0625rem solid var(--color-border-subtle);
  padding-bottom: var(--space-3);
  margin-bottom: 0;
}
.schedule-day h3 small {
  font-weight: 400;
  font-size: 0.875rem;
}
.schedule-day h3 .today-label {
  background: var(--color-primary-alpha-20);
  color: var(--color-primary-light);
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  margin-left: var(--space-2);
}

.class-list__item {
  display: flex;
  flex-direction: column;
  padding: var(--space-4) 0;
  border-bottom: 0.0625rem solid var(--color-border-subtle);
  position: relative;
}
.class-list__item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.class-list__item {
  /* States */
}
.class-list__item.canceled .time, .class-list__item.canceled .title {
  text-decoration: line-through;
  color: var(--color-text-muted);
}
.class-list__item.canceled .class-header {
  opacity: 0.55;
}
.class-list__item.finished {
  background: var(--color-bg-base);
  margin: 0 calc(-1 * var(--space-6));
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}
.class-list__item.finished .class-header {
  opacity: 0.35;
}

.class-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.class-header.has-details {
  cursor: pointer;
}
.class-header .time {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-primary-light);
  width: 3.5rem;
}
.class-header .title {
  font-size: 1rem;
  font-weight: 600;
  flex-grow: 1;
}
.class-header .instructor {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  background: var(--color-surface-2);
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-sm);
  width: -moz-fit-content;
  width: fit-content;
}
.class-header .instructor .icon svg {
  width: 0.75rem;
  height: 0.75rem;
}
.class-header .toggle-icon {
  margin-left: auto;
  color: var(--color-text-muted);
}
.class-header .toggle-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.status-text {
  position: absolute;
  top: var(--space-4);
  right: 0;
  z-index: 1;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.4;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-sm);
}
.status-text.canceled {
  background: rgba(220, 53, 69, 0.15);
  color: var(--color-danger);
}
.status-text.finished {
  background: var(--color-surface-2);
  color: var(--color-text-muted);
}

.note {
  font-size: 0.875rem;
  color: var(--color-warning);
  background: rgba(255, 171, 0, 0.1);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
}

.class-details {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  background: var(--color-bg-base);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  display: none; /* Handled by JS ideally, or set to block if always shown */
}

.booking-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-2);
  border-top: 0.0625rem dashed var(--color-border-subtle);
  padding-top: var(--space-3);
  align-items: flex-start;
}

.booking-option {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: flex-start;
}

.availability-info {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.availability-info.full {
  color: var(--color-danger);
  font-weight: 500;
}

.booking-success {
  font-size: 0.875rem;
  color: var(--color-success);
  background: var(--color-success-alpha-10);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  text-align: center;
  font-weight: 500;
}

/* Auth Screens Adjustments */
form.login.card, form.register.card {
  display: none !important;
  margin: auto;
}
form.login.card.active, form.register.card.active {
  display: block !important;
  animation: fadeIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
form.login.card .logo, form.register.card .logo {
  margin-top: var(--space-4);
}

.forgot-step,
.email-verify-step {
  display: none !important;
  margin: auto;
}
.forgot-step.active,
.email-verify-step.active {
  display: block !important;
  animation: fadeIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.forgot-step .logo,
.email-verify-step .logo {
  margin-top: var(--space-4);
}
.email-verify-step .row.buttons {
  align-items: center;
}
.email-verify-step .row.buttons .button {
  width: 100%;
  justify-content: center;
}
.email-verify-step .row.buttons .trigger {
  text-align: center;
}

.form-subtitle {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  text-align: center;
  margin-bottom: var(--space-4);
  line-height: 1.4;
}

form .logo {
  margin-bottom: var(--space-4);
}
form .logo svg {
  max-width: 100px;
}
@media (max-width: 375px) {
  form .logo svg {
    max-width: 80px;
  }
}

/* --- Place Selection --- */
.select-place-heading {
  text-align: center;
  margin-bottom: var(--space-8);
}
.select-place-heading h1 {
  border-bottom: none;
  margin-bottom: var(--space-2);
  padding-bottom: 0;
}
.select-place-heading small {
  color: var(--color-text-muted);
  display: block;
  max-width: 280px;
  margin: 0 auto;
}

.select-place {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: transform 0.2s ease;
}
.select-place .photo {
  aspect-ratio: 2.35/1;
  overflow: hidden;
  border-radius: var(--radius-md);
}
.select-place .photo img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.select-place .name h2 {
  font-size: 1.25rem;
  margin-bottom: var(--space-1);
  border: none;
}
.select-place .name p {
  color: var(--color-text-muted);
  font-size: 0.875rem;
}
.select-place .button {
  width: 100%;
  justify-content: center;
}
.select-place.active {
  outline: 3px solid var(--accent-600);
  outline-offset: -3px;
}
.select-place:active {
  transform: scale(0.98);
}

/* --- Subscriptions List (mycard page) --- */
.subscriptions-list {
  width: 100%;
  max-width: 500px;
  margin: var(--space-4) auto 0 auto;
}
.subscriptions-list h3 {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-3);
  padding-inline: var(--space-2);
  border: none;
  padding-bottom: 0;
}

.subscription-item {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border-subtle);
  border-top: 1px solid var(--color-card-bevel);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
  box-shadow: var(--shadow-sm);
}
.subscription-item:last-child {
  margin-bottom: 0;
}
.subscription-item .subscription-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
}
.subscription-item .subscription-item-header .subscription-title {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--color-text-primary);
}
.subscription-item .subscription-item-details {
  display: flex;
  flex-direction: column;
}
.subscription-item .subscription-item-details .profile-row {
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--color-border-subtle);
}
.subscription-item .subscription-item-details .profile-row:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

.promo-card {
  border-left: 4px solid var(--color-primary);
}
.promo-card .promo-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.promo-card .promo-header .icon {
  color: var(--color-primary-light);
}
.promo-card .promo-header .icon svg {
  width: 2rem;
  height: 2rem;
}
.promo-card .promo-header .promo-title h3 {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 0;
  border: none;
  padding: 0;
}
.promo-card .promo-header .promo-title h2 {
  font-size: 1.25rem;
  margin-bottom: 0;
  border: none;
  padding: 0;
}
.promo-card p {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
}

.tip-card {
  background: var(--color-surface-glass);
  border-style: dashed;
}
.tip-card .tip-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  color: var(--color-accent);
}
.tip-card .tip-header .icon svg {
  width: 1.25rem;
  height: 1.25rem;
}
.tip-card .tip-header h3 {
  font-size: 0.875rem;
  margin-bottom: 0;
  text-transform: uppercase;
  border: none;
  padding: 0;
}
.tip-card p {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  font-style: italic;
}

.profile-header {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-6);
}

.profile-image {
  width: 5.5rem;
  height: 5.5rem;
  border-radius: var(--radius-full);
  background-color: var(--color-surface-2);
  border: 0.125rem solid var(--color-border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: var(--shadow-md), var(--glow-primary);
}
.profile-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.profile-image svg {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--color-text-muted);
}

.avatar-wrap {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.avatar-edit-btn {
  position: absolute;
  bottom: 1.75rem;
  right: -0.25rem;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: #fff;
  border: 0.125rem solid var(--color-surface-1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease;
  padding: 0;
}
.avatar-edit-btn:active {
  transform: scale(0.9);
}
.avatar-edit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.avatar-edit-btn svg {
  width: 0.875rem;
  height: 0.875rem;
}

.avatar-remove-btn {
  position: absolute;
  bottom: 1.75rem;
  left: -0.25rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--color-danger, #ef4444);
  color: #fff;
  border: 2px solid var(--color-bg-base);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s ease;
  padding: 0;
}
.avatar-remove-btn:active { transform: scale(0.9); }
.dashboard-avatar-wrap .avatar-remove-btn { bottom: 1.1rem; }

.dashboard-avatar-wrap .avatar-progress { width: 4.5rem; }

#avatar-wrap .profile-image {
  width: 7rem;
  height: 7rem;
}
#avatar-wrap .profile-image img {
  cursor: pointer;
}
#avatar-wrap .avatar-progress {
  width: 7rem;
}

.avatar-progress {
  width: 5.5rem;
  height: 0.25rem;
  background: var(--color-surface-2);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.avatar-progress__bar {
  height: 100%;
  width: 0%;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  transition: width 0.1s linear;
}

/* Apply saved position + zoom to all client avatar images */
#dashboard-profile-image img,
#profile-image-circle img {
  object-position: var(--avatar-pos, 50% 50%);
  transform: scale(var(--avatar-scale, 1));
  transform-origin: var(--avatar-pos, 50% 50%);
}

.avatar-reposition-btn {
  position: absolute;
  top: 0;
  right: -0.25rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--color-surface-1);
  color: var(--color-text-secondary);
  border: 2px solid var(--color-bg-base);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s ease;
}
.avatar-reposition-btn:active { transform: scale(0.9); }

/* Crop / reposition modal */
.avatar-crop-modal {
  position: fixed; inset: 0; z-index: 9500;
  background: rgba(0,0,0,0.93);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}
.avatar-crop-modal:not([aria-hidden="true"]) {
  opacity: 1; visibility: visible; pointer-events: auto;
}
.avatar-crop-inner {
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  padding: 1.5rem; max-width: 320px; width: 100%;
}
.avatar-crop-title {
  color: #fff; font-size: 1rem; font-weight: 600; margin: 0; text-align: center;
}
.avatar-crop-circle {
  width: 240px; height: 240px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--color-primary);
  position: relative;
  touch-action: none;
  cursor: grab;
  background: #111;
  flex-shrink: 0;
}
.avatar-crop-circle:active { cursor: grabbing; }
#avatar-crop-img {
  position: absolute;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
.avatar-crop-hint {
  color: rgba(255,255,255,0.55); font-size: 0.78rem; margin: 0; text-align: center;
}
.avatar-crop-zoom {
  display: flex; align-items: center; gap: 0.6rem; width: 240px;
}
.avatar-crop-zoom-btn {
  width: 2rem; height: 2rem; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,0.14); color: #fff; border: none;
  font-size: 1.25rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.12s;
}
.avatar-crop-zoom-btn:active { background: rgba(255,255,255,0.28); }
.avatar-crop-zoom-track {
  flex: 1; height: 4px; background: rgba(255,255,255,0.18); border-radius: 2px; overflow: hidden;
}
.avatar-crop-zoom-fill {
  height: 100%; width: 0%; background: var(--color-primary); border-radius: 2px; transition: width 0.08s;
}
.avatar-crop-actions {
  display: flex; gap: 0.75rem; width: 100%;
}
.avatar-crop-btn {
  flex: 1; padding: 0.65rem; border-radius: var(--radius-md);
  font-size: 0.9rem; font-weight: 600; border: none; cursor: pointer;
  transition: opacity 0.15s;
}
.avatar-crop-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.avatar-crop-btn--cancel { background: rgba(255,255,255,0.12); color: #fff; }
.avatar-crop-btn--save   { background: var(--color-primary); color: #fff; }

.profile-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: var(--space-3);
  border-bottom: 0.0625rem solid var(--color-border-subtle);
}
.profile-row p:first-child {
  color: var(--color-text-secondary);
  font-size: 0.875rem;
}
.profile-row p:last-child {
  color: var(--color-text-primary);
  font-weight: 500;
}
.profile-row:last-of-type {
  border-bottom: none;
}

.section-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  border-bottom: 0.0625rem solid var(--color-border-subtle);
  padding-bottom: var(--space-4);
}
.section-header .back-arrow {
  cursor: pointer;
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--color-surface-2);
  transition: all 0.2s ease;
}
.section-header .back-arrow svg {
  width: 1.25rem;
  height: 1.25rem;
}
.section-header .back-arrow:active {
  color: var(--color-primary);
  transform: scale(0.9);
}
.section-header h1 {
  margin-bottom: 0;
  border-bottom: none;
  padding-bottom: 0;
  flex: 1;
}
.section-header .icon-button {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--color-surface-2);
  color: var(--color-warning);
  cursor: pointer;
  transition: all 0.2s ease;
}
.section-header .icon-button svg {
  width: 1.25rem;
  height: 1.25rem;
}
.section-header .icon-button:active {
  transform: scale(0.9);
  background: var(--color-primary-alpha-20);
  color: var(--color-primary);
}

.profile-menu {
  margin-top: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.profile-menu .menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
}
.profile-menu .menu-item .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-light);
}
.profile-menu .menu-item .icon svg {
  width: 1.25rem;
  height: 1.25rem;
}
.profile-menu .menu-item span {
  flex: 1;
  font-weight: 500;
  font-size: 0.9375rem;
}
.profile-menu .menu-item .menu-item-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.profile-menu .menu-item .menu-item-content span {
  flex: none;
}
.profile-menu .menu-item .menu-item-content small {
  font-size: 0.75rem;
  color: var(--color-primary-light);
  font-weight: 400;
}
.profile-menu .menu-item .arrow {
  color: var(--color-text-muted);
}
.profile-menu .menu-item .arrow svg {
  width: 1rem;
  height: 1rem;
}
.profile-menu .menu-item:active {
  background: var(--color-surface-glass);
  transform: scale(0.98);
}
.profile-menu .menu-item.danger {
  color: var(--color-danger);
}
.profile-menu .menu-item.danger .icon {
  color: var(--color-danger);
}
.profile-menu .menu-item.danger .arrow {
  color: rgba(255, 61, 0, 0.4);
}
.profile-menu .menu-divider {
  height: 1px;
  background: var(--color-border-subtle);
  margin: var(--space-2) 0;
}

/* --- Settings Specific Styles --- */
.profile-form {
  display: flex;
  flex-direction: column;
  height: calc(100dvh - 4.5rem - env(safe-area-inset-bottom));
  padding-top: calc(var(--space-4) + env(safe-area-inset-top));
  padding-bottom: 0;
  overflow: hidden;
}
.profile-form .section-header {
  padding: 0 var(--space-6) var(--space-4) var(--space-6);
  margin-bottom: 0;
}
.profile-form .scroll-area {
  flex: 1;
  overflow-y: auto;
  overflow-anchor: none;
  padding: 0 var(--space-4) var(--space-6);
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-subtle) transparent;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
.messages-view .profile-form .scroll-area {
  padding-left: 0;
  padding-right: 0;
}
.profile-form .scroll-area::-webkit-scrollbar {
  width: 4px;
}
.profile-form .scroll-area::-webkit-scrollbar-thumb {
  background: var(--color-border-subtle);
  border-radius: var(--radius-full);
}

.places-list,
.loyalty-list, .history-list {
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}

/* --- History List Styles --- */
.history-section-title {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  margin: var(--space-6) var(--space-6) var(--space-3);
}

.history-section-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-6) var(--space-6) var(--space-3);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.history-section-toggle .history-section-title {
  margin: 0;
}
.history-section-toggle .toggle-chevron {
  color: var(--color-text-muted);
  transition: transform 0.25s ease;
  flex-shrink: 0;
}
.history-section-toggle .toggle-chevron svg {
  width: 1rem;
  height: 1rem;
  display: block;
}
.history-section-toggle.open .toggle-chevron {
  transform: rotate(180deg);
}

.history-loading {
  padding: var(--space-4) var(--space-6);
  color: var(--color-text-muted);
}

.history-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-subtle);
}
.history-item .history-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.history-item .history-info .club-name {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text-primary);
}
.history-item .history-info .activity-type {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.history-item .history-date {
  text-align: right;
}
.history-item .history-date .date {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  font-weight: 500;
}
.history-item .history-date .time {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.setting-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.setting-row.setting-row--sub {
  padding-left: var(--space-6);
  border-top-color: transparent;
  font-size: 0.875rem;
}
.setting-row {
  padding: var(--space-3) 0;
  padding: var(--space-3) var(--space-6); /* Apply consistent horizontal padding */
  border-bottom: 1px solid var(--color-border-subtle);
}
.setting-row label {
  font-size: 0.9375rem;
  color: var(--color-text-primary);
  margin-bottom: 0;
}
.setting-row:last-of-type {
  border-bottom: none;
}

/* --- Custom Switch Toggle --- */
.switch {
  position: relative;
  display: inline-block;
  width: 2.75rem;
  height: 1.5rem;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-surface-2);
  transition: 0.4s;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border-subtle);
}
.switch .slider:before {
  position: absolute;
  content: "";
  height: 1.125rem;
  width: 1.125rem;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}
.switch input:checked + .slider {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
.switch input:checked + .slider:before {
  transform: translateX(1.25rem);
}
.switch input:disabled + .slider {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* --- QR Code Card --- */
.card .qr {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--space-4);
}
.card .qr img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  display: block;
}

.membership-details {
  flex-grow: 1;
}
.membership-details h1 {
  text-align: left;
  border-bottom: none;
  padding-bottom: 0;
  border-bottom: 0.0625rem solid var(--color-border-subtle);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  font-size: 1.5rem;
}

.card-type-badge {
  background-color: var(--color-primary-alpha-20);
  color: var(--color-primary-light);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* --- Booking / Instructors Page --- */
.instructor-section {
  margin-bottom: var(--space-4);
}
.instructor-section--featured .place-heading {
  color: var(--color-text-primary);
  font-size: 1.25rem;
}
.instructor-section--active {
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  margin-bottom: var(--space-6);
}
.instructor-section--active .place-heading {
  color: var(--color-primary-light);
}
.instructor-section--collapsible {
  background-color: var(--color-card-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  border: 1px solid var(--color-border-subtle);
  border-top: 1px solid var(--color-card-bevel);
  box-shadow: var(--shadow-md);
}
.instructor-section--collapsible > summary {
  list-style: none;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  margin-bottom: 0;
}
.instructor-section--collapsible > summary::-webkit-details-marker {
  display: none;
}
.instructor-section--collapsible .place-heading {
  margin-bottom: 0;
}
.instructor-section--collapsible[open] .toggle-chevron {
  transform: rotate(180deg);
}
.instructor-section--collapsible > .instructors-grid {
  margin-top: var(--space-4);
  overflow: hidden;
  transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1), margin-top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.place-heading--toggle .toggle-chevron {
  margin-left: auto;
  color: var(--color-text-muted);
  transition: transform 0.28s ease;
  flex-shrink: 0;
}
.place-heading--toggle .toggle-chevron svg {
  width: 1.1rem;
  height: 1.1rem;
  display: block;
}

.booking-no-place {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-8) var(--space-4);
  min-height: 60vh;
  text-align: center;
}
.booking-no-place p {
  color: var(--color-text-secondary);
  font-size: 0.9375rem;
  max-width: 240px;
  margin: 0 auto;
}

.place-heading {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: none;
  padding: 0;
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.fav-badge {
  font-size: 0.65rem;
  font-weight: 700;
  background: var(--color-primary-alpha-20);
  color: var(--color-primary-light);
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.instructors-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

.instructor-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-subtle);
  border-top: 1px solid var(--color-card-bevel);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}
.instructor-card:active {
  transform: scale(0.97);
  background: var(--color-surface-1);
}

/* --- Instructor list (Моите инструктори row layout) --- */
.instructor-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.instructor-list .instructor-row {
  flex-direction: row !important;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  text-align: left;
}
.instructor-row .instructor-photo {
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
}
.instructor-row-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.instructor-row-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.instructor-row-places {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.instructor-photo {
  width: 5rem;
  height: 5rem;
  border-radius: var(--radius-full);
  overflow: hidden;
  background: var(--color-surface-2);
  border: 2px solid var(--color-border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.instructor-photo picture {
  display: contents;
}
.instructor-photo img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.instructor-photo--empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
}
.instructor-photo--empty svg {
  width: 2rem;
  height: 2rem;
}

.instructor-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary);
  text-align: center;
  line-height: 1.3;
}

.instructor-schedule-hint {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-primary-light);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* --- Instructor Sessions View --- */
.instructor-sessions-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.sessions-day-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.sessions-day-header {
  position: sticky;
  top: 0;
  z-index: 10;
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--color-text-primary);
  background: var(--color-bg-base);
  margin-left: calc(var(--space-4) * -1);
  margin-right: calc(var(--space-4) * -1);
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-6);
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.sessions-day-header.is-stuck {
  background: var(--color-surface-1);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
}

.sessions-day-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.instructor-session-item {
  position: relative;
  background: var(--color-surface-1);
  border: 1px solid var(--color-border-subtle);
  border-top: 1px solid var(--color-card-bevel);
  border-left: 4px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.instructor-session-item.level-beginner {
  border-left-color: #EC4899;
}
.instructor-session-item.level-intermediate {
  border-left-color: #2563EB;
}
.instructor-session-item.level-advanced {
  border-left-color: #22C55E;
}
.instructor-session-item.level-all {
  border-left-color: var(--color-primary);
}

.session-card {
  position: relative;
}
.session-card.level-beginner {
  border-left: 3px solid #EC4899;
}
.session-card.level-intermediate {
  border-left: 3px solid #2563EB;
}
.session-card.level-advanced {
  border-left: 3px solid #22C55E;
}
.session-card.has-place-badge {
  margin-top: 0.95rem;
  padding-top: calc(var(--space-4) + 0.55rem);
}

.session-meta {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  flex-wrap: wrap;
}
.session-meta .session-time {
  color: var(--color-primary-light);
  font-weight: 700;
  font-size: 1.15rem;
  margin-right: 0.1rem;
}
.session-meta .session-dot {
  color: var(--color-text-muted);
}

.session-tags {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  align-items: center;
}

.session-type-badge {
  font-size: 0.65rem;
  font-weight: 600;
  background: var(--color-surface-2);
  color: var(--color-text-secondary);
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.session-place-badge {
  position: absolute;
  top: -0.8rem;
  left: var(--space-4);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.28rem 0.9rem;
  border-radius: var(--radius-full);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-subtle);
  color: var(--color-text-primary);
}

.session-level-badge {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--color-primary-alpha-20);
  color: var(--color-primary-light);
}
.session-level-badge.level-beginner {
  background: rgba(236, 72, 153, 0.15);
  color: #EC4899;
}
.session-level-badge.level-intermediate {
  background: rgba(37, 99, 235, 0.15);
  color: #2563EB;
}
.session-level-badge.level-advanced {
  background: rgba(34, 197, 94, 0.15);
  color: #22C55E;
}

.session-spots {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}
.session-spots.full {
  color: var(--color-danger);
  font-weight: 600;
}

.session-notes {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  font-style: italic;
}

.session-book-action {
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-subtle);
}

.booking-sent {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  color: var(--color-warning);
  font-weight: 500;
}
.booking-sent svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}
.booking-sent.booking-confirmed {
  color: var(--color-success);
}

.booking-action-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
}
.btn-cancel-session {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
  background: var(--color-danger);
  border: none;
  padding: 0.3rem var(--space-3);
  border-radius: var(--radius-full);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-cancel-session:active {
  filter: brightness(0.85);
}
.cancel-contact-msg {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  font-style: italic;
}
.btn-notify-session {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-family: var(--font-family-body);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  background: transparent;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border-subtle);
  transition: color 0.15s, border-color 0.15s;
}
.btn-notify-session:active {
  opacity: 0.7;
}
.btn-notify-session:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.btn-notify--active {
  color: var(--color-primary-light);
  border-color: var(--color-primary-light);
}

.session-book-error {
  font-size: 0.8125rem;
  color: var(--color-danger);
  margin-top: var(--space-2);
}

.sessions-loading,
.sessions-empty {
  text-align: center;
  color: var(--color-text-muted);
  padding: var(--space-8) var(--space-6);
  font-size: 0.9375rem;
}

/* --- Member Card (mycard page — barcode card) --- */
.member-card {
  overflow: hidden;
  display: flex !important;
  flex-direction: column;
  justify-content: flex-start;
  gap: 1rem;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: linear-gradient(160deg, #0c0f18 0%, #161b28 50%, #0a0d15 100%) !important;
}
.member-card::before {
  content: "";
  position: absolute;
  top: -6rem;
  left: -5rem;
  width: 18rem;
  height: 18rem;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  background: rgba(255, 255, 255, 0.055);
  pointer-events: none;
  z-index: 0;
}
.member-card .member-card-watermark {
  position: absolute;
  top: 1rem;
  left: 1rem;
  transform: none;
  pointer-events: none;
  opacity: 0.18;
  z-index: 0;
}
.member-card .member-card-watermark svg {
  width: 8rem;
  height: 8rem;
}
.member-card .member-card-watermark svg path, .member-card .member-card-watermark svg rect, .member-card .member-card-watermark svg circle, .member-card .member-card-watermark svg polygon, .member-card .member-card-watermark svg ellipse {
  fill: #ffffff !important;
}
.member-card .member-card-watermark svg .app-background {
  fill: transparent !important;
}
.member-card .member-card-watermark svg .app-shape {
  fill: #ffffff !important;
}
.member-card .member-card-top {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}
.member-card .member-card-top .member-card-name {
  font-family: var(--font-family-display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffffff;
  text-align: center;
}
.member-card .member-card-bottom {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}
.member-card .member-card-bottom .member-card-barcode {
  background: #ffffff;
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-4);
  width: 100%;
}
.member-card .member-card-bottom .member-card-barcode img {
  display: block;
  width: 100%;
  height: auto;
}
.member-card .member-card-bottom .member-card-barcode-number {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--color-text-secondary);
}
.member-card .member-card-bottom .member-card-hint {
  font-size: 0.65rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* --- Member card light mode --- */
[data-theme=light] .member-card {
  background: linear-gradient(160deg, #dde3f0 0%, #edf0f8 50%, #d8dff0 100%) !important;
}
[data-theme=light] .member-card::before {
  background: rgba(0, 0, 0, 0.04);
}
[data-theme=light] .member-card .member-card-watermark svg path, [data-theme=light] .member-card .member-card-watermark svg rect, [data-theme=light] .member-card .member-card-watermark svg polygon, [data-theme=light] .member-card .member-card-watermark svg ellipse {
  fill: #1a1f2e !important;
}
[data-theme=light] .member-card .member-card-watermark svg .app-background {
  fill: transparent !important;
}
[data-theme=light] .member-card .member-card-watermark svg .app-shape {
  fill: #1a1f2e !important;
}
[data-theme=light] .member-card .member-card-top .member-card-name {
  color: #1a1f2e;
}

/* --- Instructor card indicators --- */
.instructor-indicators {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  margin-top: var(--space-2);
}

.inst-badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.inst-badge--confirmed {
  background: var(--color-success-alpha-10);
  color: var(--color-success);
}
.inst-badge--pending {
  background: rgba(255, 171, 0, 0.12);
  color: var(--color-warning);
}
.inst-badge--msg {
  background: var(--color-primary-alpha-20);
  color: var(--color-primary-light);
}
.inst-badge--club {
  background: var(--color-surface-2);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border-subtle);
}

/* --- Messaging --- */
.nav-msg-badge {
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--radius-full);
  background: var(--color-danger);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

.sessions-chat-btn {
  margin-left: auto;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: 0.5rem;
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.sessions-chat-btn svg {
  width: 22px;
  height: 22px;
}

.client-conversations-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.msg-conv-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  cursor: pointer;
}
.msg-conv-item:active {
  background: var(--color-surface-2);
}

.msg-conv-avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  overflow: hidden;
  background: var(--color-primary-alpha-20);
  color: var(--color-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 700;
}
.msg-conv-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.conv-header-left {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}
.conv-header-left h1 { flex: 1; margin: 0; }
.conv-header-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--color-primary-alpha-20);
  color: var(--color-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 700;
}
.conv-header-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.msg-conv-info {
  flex: 1;
  min-width: 0;
}

.msg-conv-name {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--color-text-primary);
}

.msg-conv-last {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msg-preview-media {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  vertical-align: middle;
}
.msg-preview-media svg { flex-shrink: 0; opacity: 0.8; }

.msg-conv-arrow {
  flex-shrink: 0;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
}

.msg-unread-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-full);
  background: var(--color-danger);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.conv-profile-form {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 0 !important;
}

.msg-scroll-area {
  flex: 1;
  min-height: 0;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-3) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.conv-footer {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-surface-1);
  border-top: 1px solid var(--color-border-subtle);
}

.conv-emoji-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  max-height: 13rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.conv-emoji-picker.hidden {
  display: none;
}
.conv-emoji-picker button {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.2rem;
  border-radius: var(--radius-sm);
}
.conv-emoji-picker button:hover {
  background: var(--color-surface-2);
}
.conv-emoji-picker button:active {
  transform: scale(0.88);
}

.conv-input-bar {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
}
.conv-input-bar textarea {
  flex: 1;
  min-width: 0;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  color: var(--color-text-primary);
  font-family: var(--font-family-body);
  font-size: 1rem;
  padding: 0.625rem 1rem;
  resize: none;
  max-height: 7.5rem;
  overflow-y: auto;
  line-height: 1.45;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.conv-input-bar textarea::-moz-placeholder {
  color: var(--color-text-muted);
}
.conv-input-bar textarea::placeholder {
  color: var(--color-text-muted);
}
.conv-input-bar textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-alpha-20);
}
.conv-input-bar .conv-btn-icon,
.fb-compose .conv-btn-icon {
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
  padding: 0;
}
.conv-input-bar .conv-btn-icon:active,
.fb-compose .conv-btn-icon:active {
  transform: scale(0.88);
}
.conv-input-bar .conv-btn-icon.active,
.fb-compose .conv-btn-icon.active {
  color: var(--color-primary-light);
  background: var(--color-primary-alpha-20);
}
.conv-input-bar .conv-btn-icon svg,
.fb-compose .conv-btn-icon svg {
  width: 1.125rem;
  height: 1.125rem;
  pointer-events: none;
}
.conv-input-bar .btn-send {
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: var(--gradient-primary);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--glow-primary);
  transition: transform 0.12s ease;
}
.conv-input-bar .btn-send svg {
  width: 1.125rem;
  height: 1.125rem;
}
.conv-input-bar .btn-send:active {
  transform: scale(0.88);
}

.msg-bubble {
  max-width: 78%;
  padding: 0.55rem 0.9rem;
  border-radius: var(--radius-lg);
  font-size: 0.9375rem;
  line-height: 1.45;
  word-break: break-word;
}
.msg-bubble--client {
  align-self: flex-end;
  background: var(--color-primary);
  color: #fff;
  border-bottom-right-radius: var(--radius-sm);
}
.msg-bubble--instructor {
  align-self: flex-start;
  background: var(--color-surface-2);
  color: var(--color-text-primary);
  border-bottom-left-radius: var(--radius-sm);
}

.msg-bubble--sending {
  opacity: 0.65;
}
.msg-bubble--media {
  padding: 0;
  background: none !important;
  border-radius: 0;
  max-width: 85%;
}

.msg-sending-dot {
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  vertical-align: middle;
  margin-left: 0.3rem;
  opacity: 0.7;
  animation: spin 1s linear infinite;
}

.msg-image-uploading-wrap {
  position: relative;
}

.msg-image-uploading-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  border-radius: var(--radius-md);
}
.msg-image-uploading-overlay svg {
  width: 2rem;
  height: 2rem;
  color: #fff;
  animation: spin 1s linear infinite;
}

.msg-image {
  display: block;
  max-width: 100%;
  border-radius: var(--radius-md);
  margin-bottom: 0.25rem;
  cursor: pointer;
}

.img-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.93);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}
html:not([data-theme=dark]) .img-lightbox,
html[data-theme=light] .img-lightbox { background: rgba(240, 244, 249, 0.97); }
.img-lightbox.lb-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.img-lightbox img {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: var(--radius-md);
  transform: scale(0.72);
  opacity: 0;
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.22s ease;
}
.img-lightbox.lb-open img {
  transform: scale(1);
  opacity: 1;
}
.img-lightbox__close {
  position: absolute;
  top: calc(1.25rem + env(safe-area-inset-top));
  right: 1.25rem;
  z-index: 1;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  border: none;
  color: #fff;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
html:not([data-theme=dark]) .img-lightbox__close,
html[data-theme=light] .img-lightbox__close {
  background: rgba(0, 0, 0, 0.1);
  color: var(--color-text-primary);
}

.msg-action-menu {
  position: fixed;
  inset: 0;
  z-index: 9998;
}
.msg-action-menu[aria-hidden=true] {
  display: none;
}
.msg-action-menu__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}
.msg-action-menu__sheet {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-surface-1);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: var(--space-2) 0 calc(var(--space-5) + env(safe-area-inset-bottom));
}
.msg-action-menu__sheet button {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--space-4) var(--space-5);
  background: none;
  border: none;
  font-size: 1rem;
  color: var(--color-text-primary);
  cursor: pointer;
}
.msg-action-menu__sheet button:active {
  background: var(--color-surface-2);
}
.msg-action-menu__sheet button.danger {
  color: #EF4444;
}
.msg-action-menu__sheet button.cancel {
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border-subtle);
  margin-top: var(--space-2);
}

.pwa-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9000;
  background: var(--color-surface-1);
  border-top: 1px solid var(--color-border-subtle);
  box-shadow: var(--shadow-nav);
  padding: 0.875rem 1rem calc(0.875rem + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  gap: 0.75rem;
  transform: translateY(110%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.pwa-bar.pwa-show {
  transform: translateY(0);
}
.pwa-bar__icon {
  flex-shrink: 0;
}
.pwa-bar__icon img {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: block;
}
.pwa-bar__icon--bell {
  width: 44px;
  height: 44px;
  background: var(--color-primary-alpha-20);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
}
.pwa-bar__text {
  flex: 1;
  min-width: 0;
}
.pwa-bar__text strong {
  display: block;
  color: var(--color-text-primary);
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pwa-bar__text span {
  display: block;
  color: var(--color-text-secondary);
  font-size: 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pwa-bar__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.pwa-bar__btn {
  background: var(--color-primary);
  color: #fff;
  border: none;
  cursor: pointer;
  padding: 0.4375rem 0.9375rem;
  border-radius: var(--radius-full);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1;
}
.pwa-bar__close {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: 1rem;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
}
.pwa-bar__close:hover {
  background: var(--color-surface-glass);
}

.pwa-sheet {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: flex-end;
  background: var(--color-overlay-bg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.pwa-sheet.pwa-show {
  opacity: 1;
  pointer-events: auto;
}
.pwa-sheet.pwa-show .pwa-sheet__inner {
  transform: translateY(0);
}
.pwa-sheet__inner {
  width: 100%;
  background: var(--color-surface-1);
  border-top: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: 1.75rem 1.5rem calc(1.75rem + env(safe-area-inset-bottom, 0px));
  text-align: center;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.pwa-sheet__app-icon {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-lg);
  margin-bottom: 1rem;
}
.pwa-sheet__title {
  color: var(--color-text-primary);
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: 0.375rem;
}
.pwa-sheet__subtitle {
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  margin-bottom: 1.5rem;
}
.pwa-sheet__steps {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.pwa-sheet__steps li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--color-text-primary);
  font-size: 0.9375rem;
}
.pwa-sheet__step-num {
  width: 28px;
  height: 28px;
  background: var(--color-primary-alpha-20);
  color: var(--color-primary);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  font-weight: 700;
  flex-shrink: 0;
}
.pwa-sheet__ok-btn {
  width: 100%;
  background: var(--color-primary);
  color: #fff;
  border: none;
  cursor: pointer;
  padding: 0.875rem;
  border-radius: var(--radius-lg);
  font-size: 1rem;
  font-weight: 600;
}

.pwa-ios-share-icon {
  vertical-align: middle;
  margin: 0 1px;
}

.pwa-home-bar {
  display: none;
  align-items: center;
  gap: 0.75rem;
  background: var(--color-surface-1);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: 0.875rem 1rem;
  margin: 0rem 1rem 1.5rem;
  cursor: pointer;
  transition: background 0.2s;
}
.pwa-home-bar:active {
  background: var(--color-surface-2);
}
.pwa-home-bar__icon img {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: block;
}
.pwa-home-bar__text {
  flex: 1;
  min-width: 0;
}
.pwa-home-bar__text strong {
  display: block;
  color: var(--color-text-primary);
  font-size: 0.875rem;
  font-weight: 600;
}
.pwa-home-bar__text span {
  display: block;
  color: var(--color-text-secondary);
  font-size: 0.75rem;
  margin-top: 0.125rem;
}
.pwa-home-bar__arrow {
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.theme-picker {
  display: flex;
  background: var(--color-surface-2);
  border-radius: var(--radius-full);
  padding: 3px;
  gap: 2px;
}

.theme-btn {
  padding: 0.3125rem 0.8125rem;
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  border-radius: var(--radius-full);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  white-space: nowrap;
}
.theme-btn.active {
  background: var(--color-surface-1);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-sm);
  font-weight: 600;
}

/* --- App Modal --- */
#app-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}
#app-modal[aria-hidden=true] {
  display: none;
}
#app-modal .app-modal__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
#app-modal .app-modal__box {
  position: relative;
  background: var(--color-surface-1);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  max-width: 320px;
  width: 100%;
  box-shadow: var(--shadow-md);
  z-index: 1;
}
#app-modal .app-modal__msg {
  font-size: 1rem;
  color: var(--color-text-primary);
  text-align: center;
  line-height: 1.5;
  margin-bottom: var(--space-4);
}
#app-modal .app-modal__btns {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
}
#app-modal .app-modal__btns .button {
  flex: 1;
  justify-content: center;
}

#scan-card-btn {
  width: 100%;
  justify-content: center;
  margin-top: var(--space-2);
  margin-bottom: var(--space-2);
}

.scan-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.scan-modal.active {
  opacity: 1;
  pointer-events: auto;
}
.scan-modal__inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.scan-modal__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 20;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.scan-modal__close svg {
  width: 1.25rem;
  height: 1.25rem;
}
.scan-modal__close:active {
  background: rgba(255, 255, 255, 0.3);
}
.scan-modal #scan-video, .scan-modal__aim, .scan-modal__hint {
  display: none;
}
.scan-modal #scan-reader {
  display: none;
}
.scan-modal.mode--android #scan-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.scan-modal.mode--android .scan-modal__aim {
  display: block;
  position: relative;
  z-index: 10;
  width: 75%;
  max-width: 320px;
  aspect-ratio: 2/1;
  border-radius: 0.75rem;
  border: 2.5px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.52);
}
.scan-modal.mode--android .scan-modal__hint {
  display: block;
  position: relative;
  z-index: 10;
  color: #fff;
  font-size: 0.875rem;
  text-align: center;
  margin-top: var(--space-5);
  padding: 0 var(--space-6);
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.7);
}
.scan-modal.mode--ios [id^=scan-reader__] {
  display: none !important;
}
.scan-modal.mode--ios #scan-reader {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 5 !important;
}
.scan-modal.mode--ios #scan-reader #qr-shaded-region {
  display: none !important;
}
.scan-modal.mode--ios .scan-modal__aim {
  display: block;
  position: relative;
  z-index: 10;
  width: 75%;
  max-width: 320px;
  aspect-ratio: 2/1;
  border-radius: 0.75rem;
  border: 2.5px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.52);
}
.scan-modal.mode--ios .scan-modal__hint {
  display: block;
  position: relative;
  z-index: 10;
  color: #fff;
  font-size: 0.875rem;
  text-align: center;
  margin-top: var(--space-5);
  padding: 0 var(--space-6);
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.7);
}
/* ---- Instructor Calendar ---- */
.instructor-calendar {
  padding: 0.75rem var(--space-4) 0.5rem;
  border-bottom: 1px solid rgba(128,128,128,0.1);
  margin-bottom: 0.5rem;
}

.cal-nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
}

.cal-btn-icon {
  width: 2rem;
  height: 2rem;
  border: none;
  background: none;
  color: var(--color-text-primary);
  font-size: 1.375rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s;
}
.cal-btn-icon:active { background: var(--color-surface-2); }

.cal-title-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  background: none;
  border: none;
  color: var(--color-text-primary);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.4rem 0.5rem;
  border-radius: 0.5rem;
  -webkit-tap-highlight-color: transparent;
  letter-spacing: 0.01em;
}
.cal-title-btn:active { background: var(--color-surface-2); }
.cal-title-chevron {
  transition: transform 0.2s ease;
  flex-shrink: 0;
  opacity: 0.65;
}
.cal-title-btn[aria-expanded="true"] .cal-title-chevron { transform: rotate(180deg); }

.cal-month-picker {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  right: 0;
  background: var(--color-surface-1);
  border: 1px solid rgba(128,128,128,0.15);
  border-radius: 0.75rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.22);
  z-index: 150;
  padding: 0.75rem;
}
.cal-month-picker.hidden { display: none; }

.cal-picker-year {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.625rem;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--color-text-primary);
}

.cal-picker-months {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.375rem;
  margin-bottom: 0.625rem;
}
.cal-picker-month-btn,
.jcal-picker-month-btn {
  background: none;
  border: none;
  border-radius: 0.5rem;
  padding: 0.5rem 0.25rem;
  font-size: 0.8125rem;
  color: var(--color-text-primary);
  cursor: pointer;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s;
}
.cal-picker-month-btn:active,
.jcal-picker-month-btn:active { background: var(--color-primary-alpha-20); }
.cal-picker-month-btn.cal-picker-current,
.jcal-picker-month-btn.cal-picker-current {
  background: var(--color-primary-alpha-20);
  color: var(--color-primary);
  font-weight: 600;
}

.cal-picker-today-btn {
  display: block;
  width: 100%;
  background: none;
  border: 1px solid rgba(128,128,128,0.2);
  border-radius: 0.5rem;
  padding: 0.5rem;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cal-picker-today-btn:active { background: var(--color-surface-2); }

.cal-content { overflow: hidden; }

.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 2px;
}
.cal-weekdays span {
  text-align: center;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-text-muted);
  padding: 0.2rem 0;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.cal-day {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-primary);
  cursor: pointer;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: background 0.12s, transform 0.1s;
}
.cal-day:active { transform: scale(0.78); }
.cal-day.empty { cursor: default; pointer-events: none; }
.cal-day.past { opacity: 0.35; }
.cal-day.today { font-weight: 700; color: var(--color-primary); }
.cal-day.selected {
  background: var(--color-primary-alpha-20);
  color: var(--color-primary);
  font-weight: 700;
}
.cal-dots {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 2px;
  align-items: center;
}
.cal-dot {
  width: 3.5px;
  height: 3.5px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cal-dot--session   { background: var(--color-primary); }
.cal-dot--confirmed { background: #22C55E; }
.cal-dot--pending   { background: #F59E0B; }
.cal-dot--measure   { background: #3B82F6; }
.cal-dot--workout   { background: #A855F7; }
.cal-dot--task      { background: #F43F5E; }
.cal-day.past .cal-dots { opacity: 0.5; }

/* Calendar slide animations */
@keyframes calExitLeft  { to { opacity: 0; transform: translateX(-40%); } }
@keyframes calExitRight { to { opacity: 0; transform: translateX(40%);  } }
@keyframes calEnterRight { from { opacity: 0; transform: translateX(40%);  } to { opacity: 1; transform: translateX(0); } }
@keyframes calEnterLeft  { from { opacity: 0; transform: translateX(-40%); } to { opacity: 1; transform: translateX(0); } }
.cal-exit-left   { animation: calExitLeft   0.2s ease forwards; }
.cal-exit-right  { animation: calExitRight  0.2s ease forwards; }
.cal-enter-right { animation: calEnterRight 0.25s cubic-bezier(0.34,1.08,0.64,1) forwards; }
.cal-enter-left  { animation: calEnterLeft  0.25s cubic-bezier(0.34,1.08,0.64,1) forwards; }

.session-card--past { opacity: 0.45; }
.session-card--past .session-book-action { display: none; }

.sessions-instructor-photo {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.sessions-instructor-photo.hidden { display: none; }

.booking-section--upcoming { margin-bottom: var(--space-6); }

.upcoming-bookings-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.upcoming-booking-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-2);
  border-radius: var(--radius-lg);
  border-left: 3px solid transparent;
}
.upcoming-booking-item--confirmed { border-left-color: var(--color-success); }
.upcoming-booking-item--pending   { border-left-color: var(--color-warning); }

.upbk-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  flex-shrink: 0;
}
.upbk-day {
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-text-primary);
}
.upbk-month {
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 1px;
}

.upbk-body {
  flex: 1;
  min-width: 0;
}
.upbk-row-top {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 3px;
}
.upbk-name {
  flex: 1;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.upbk-sub {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.upbk-cal-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: var(--radius-full);
  transition: background 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.upbk-cal-btn:active {
  background: var(--color-primary-alpha-20);
  color: var(--color-primary);
}
.session-cal-btn {
  position: absolute;
  top: -0.8rem;
  right: var(--space-4);
  width: 1.75rem;
  height: 1.75rem;
  background: var(--color-surface-1);
  color: #22C55E;
  border: 1px solid rgba(34, 197, 94, 0.4);
}
.session-card.has-cal-btn:not(.has-place-badge) {
  margin-top: 0.95rem;
  padding-top: calc(var(--space-4) + 0.55rem);
}

#cal-booking-sheet {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}
#cal-booking-sheet[aria-hidden="true"] { display: none; }
.cal-booking-sheet__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}
.cal-booking-sheet__box {
  position: relative;
  width: 100%;
  max-width: 22rem;
  background: var(--color-surface-1);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-4) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.cal-booking-sheet__x {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: none;
  background: var(--color-surface-2);
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cal-booking-sheet__x:active { opacity: 0.7; }
.cal-booking-sheet__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-primary);
  text-align: center;
  margin-bottom: var(--space-1);
}
.cal-booking-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-4);
  background: var(--color-surface-2);
  border-radius: var(--radius-lg);
  border: none;
  cursor: pointer;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text-primary);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s;
}
.cal-booking-option:active { opacity: 0.7; }

/* ── Modal Animations ────────────────────────────────────── */
@keyframes modal-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes modal-overlay-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes modal-box-in {
  from { opacity: 0; transform: scale(0.88) translateY(16px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes modal-box-out {
  from { opacity: 1; transform: scale(1) translateY(0); }
  to   { opacity: 0; transform: scale(0.88) translateY(10px); }
}

#app-modal:not([aria-hidden="true"]) .app-modal__overlay {
  animation: modal-overlay-in 0.22s ease forwards;
}
#app-modal.is-closing .app-modal__overlay {
  animation: modal-overlay-out 0.2s ease forwards;
}
#app-modal:not([aria-hidden="true"]) .app-modal__box {
  animation: modal-box-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
#app-modal.is-closing .app-modal__box {
  animation: modal-box-out 0.2s ease forwards;
}

#cal-booking-sheet:not([aria-hidden="true"]) .cal-booking-sheet__overlay {
  animation: modal-overlay-in 0.22s ease forwards;
}
#cal-booking-sheet.is-closing .cal-booking-sheet__overlay {
  animation: modal-overlay-out 0.2s ease forwards;
}
#cal-booking-sheet:not([aria-hidden="true"]) .cal-booking-sheet__box {
  animation: modal-box-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
#cal-booking-sheet.is-closing .cal-booking-sheet__box {
  animation: modal-box-out 0.2s ease forwards;
}

/* ── Feedback ─────────────────────────────────────────────────── */
.feedback-banner {
  margin: var(--space-3) calc(-1 * var(--space-4)) var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: rgba(234, 179, 8, 0.08);
  border-top: 1px solid rgba(234, 179, 8, 0.3);
  border-bottom: 1px solid rgba(234, 179, 8, 0.3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.feedback-banner__notice {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  line-height: 1.4;
}
.feedback-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  background: #d97706;
  color: #ffffff;
  border: none;
  transition: background 0.15s;
}
.feedback-btn:active {
  background: #b45309;
}

/* Modal — bottom sheet */
.feedback-modal {
  position: fixed;
  inset: 0;
  z-index: 8500;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.feedback-modal[aria-hidden="true"] { display: none; }
.feedback-modal__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.feedback-modal__sheet {
  position: relative;
  z-index: 1;
  background: var(--color-surface-1);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  max-height: 92vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.feedback-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-4) var(--space-2);
  position: sticky;
  top: 0;
  background: var(--color-surface-1);
  z-index: 1;
  border-bottom: 1px solid var(--color-border-subtle);
}
.feedback-modal__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary);
}
.feedback-modal__close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-secondary);
  padding: var(--space-1);
  display: flex;
  align-items: center;
}
.feedback-modal__body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.feedback-modal__footer {
  position: sticky;
  bottom: 0;
  z-index: 1;
  padding: var(--space-3) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--color-border-subtle);
  background: var(--color-surface-1);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.feedback-submit-error {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-danger);
}
.feedback-submit-btn {
  width: 100%;
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
  font-size: 1rem;
  opacity: 1 !important;
}
.feedback-modal__label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.feedback-media-hint {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

/* Category list */
.feedback-category-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.feedback-category-list li + li {
  border-top: 1px solid var(--color-border-subtle);
}
.feedback-cat-btn {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-3) var(--space-4);
  font-size: 0.9375rem;
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.12s;
}
.feedback-cat-btn::after {
  content: '';
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--color-border-subtle);
  flex-shrink: 0;
  transition: border-color 0.12s, background 0.12s;
}
.feedback-cat-btn.is-selected {
  color: var(--color-primary-light);
}
.feedback-cat-btn.is-selected::after {
  border-color: var(--color-primary-light);
  background: var(--color-primary-light);
  box-shadow: inset 0 0 0 3px var(--color-surface-1);
}
.feedback-cat-btn:active {
  background: var(--color-surface-2);
}

/* Free-text area */
.feedback-message {
  width: 100%;
  box-sizing: border-box;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-size: 0.9375rem;
  padding: var(--space-3);
  resize: vertical;
  font-family: inherit;
}
.feedback-message:focus {
  outline: none;
  border-color: var(--color-primary-light);
}

/* Media section */
.feedback-media-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.feedback-media-btns {
  display: flex;
  gap: var(--space-3);
}
.feedback-media-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  background: var(--color-surface-2);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-subtle);
  transition: background 0.12s;
}
.feedback-media-add-btn:active {
  background: var(--color-surface-3, var(--color-surface-2));
}

/* Previews */
.feedback-media-previews {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.fb-preview {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-subtle);
}
.fb-preview img,
.fb-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fb-preview__label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 0.6875rem;
  text-align: center;
  padding: 2px 0;
}
.fb-preview__remove {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0,0,0,0.65);
  color: #fff;
  font-size: 0.875rem;
  line-height: 1;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.feedback-media-error,
.feedback-submit-error {
  font-size: 0.8125rem;
  color: var(--color-danger, #e53e3e);
  margin: 0;
}

/* Submit button — full width */
.feedback-submit-btn {
  width: 100%;
  justify-content: center;
}

/* Animations — reuse app-modal keyframes */
.feedback-modal:not([aria-hidden="true"]) .feedback-modal__overlay {
  animation: modal-overlay-in 0.22s ease forwards;
}
.feedback-modal.is-closing .feedback-modal__overlay {
  animation: modal-overlay-out 0.2s ease forwards;
}
.feedback-modal:not([aria-hidden="true"]) .feedback-modal__sheet {
  animation: sheet-in 0.3s cubic-bezier(0.32, 0.72, 0, 1) forwards;
}
.feedback-modal.is-closing .feedback-modal__sheet {
  animation: sheet-out 0.22s ease forwards;
}
@keyframes sheet-in  { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes sheet-out { from { transform: translateY(0); }    to { transform: translateY(100%); } }

/* Dark-theme overrides for feedback banner */
@media (prefers-color-scheme: dark) {
  .feedback-banner {
    background: rgba(234, 179, 8, 0.06);
    border-color: rgba(234, 179, 8, 0.2);
  }
  .feedback-btn {
    background: rgba(234, 179, 8, 0.15);
    color: #fde68a;
    border: 1px solid rgba(234, 179, 8, 0.3);
  }
  .feedback-btn:active { background: rgba(234, 179, 8, 0.25); }
}
:root[data-theme="light"] .feedback-btn {
  background: #d97706;
  color: #ffffff;
  border: none;
}
:root[data-theme="light"] .feedback-btn:active { background: #b45309; }
:root[data-theme="dark"] .feedback-banner {
  background: rgba(234, 179, 8, 0.06);
  border-color: rgba(234, 179, 8, 0.2);
}
:root[data-theme="dark"] .feedback-btn {
  background: rgba(234, 179, 8, 0.15);
  color: #fde68a;
  border: 1px solid rgba(234, 179, 8, 0.3);
}
:root[data-theme="dark"] .feedback-btn:active { background: rgba(234, 179, 8, 0.25); }

/* ── My Feedback list ─────────────────────────────────────────── */
.my-feedback-list {
  padding: 0;
  display: flex;
  flex-direction: column;
}
.my-feedback-empty {
  color: var(--color-text-secondary);
  font-size: 0.9rem;
  text-align: center;
  padding: var(--space-6) 0;
  margin: 0;
}
.fb-item {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.fb-item:active { opacity: 0.7; }
.fb-item__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.fb-item__cat {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-primary);
}
.fb-item__date {
  margin: 0;
  font-size: 0.75rem;
  color: var(--color-text-secondary);
}
.fb-item__message {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
}
.fb-item__admin-note {
  margin-top: var(--space-1);
  font-size: 0.875rem;
  color: var(--color-text-primary);
  border-left: 3px solid var(--color-primary-light);
  padding: var(--space-2) var(--space-3);
  white-space: pre-wrap;
  word-break: break-word;
}
.fb-item__admin-stamp {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: 0.2rem;
}

/* Status badges */
.fb-status {
  display: inline-block;
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.fb-status--new        { background: rgba(100,116,139,0.15); color: #475569; }
.fb-status--seen       { background: rgba(59,130,246,0.15);  color: #2563eb; }
.fb-status--in_progress{ background: rgba(234,179,8,0.18);   color: #92400e; }
.fb-status--resolved   { background: rgba(34,197,94,0.18);   color: #166534; }

@media (prefers-color-scheme: dark) {
  .fb-status--new        { color: #94a3b8; }
  .fb-status--seen       { color: #60a5fa; }
  .fb-status--in_progress{ color: #fde68a; }
  .fb-status--resolved   { color: #86efac; }
}
:root[data-theme="dark"] .fb-status--new        { color: #94a3b8; }
:root[data-theme="dark"] .fb-status--seen       { color: #60a5fa; }
:root[data-theme="dark"] .fb-status--in_progress{ color: #fde68a; }
:root[data-theme="dark"] .fb-status--resolved   { color: #86efac; }

/* ── Card Link Notice ─────────────────────────────────────────── */
.link-card-notice {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-3) var(--space-3) calc(var(--space-3) + 2px);
  background: rgba(217, 119, 6, 0.08);
  border-left: 3px solid #d97706;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: #92400e;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.5;
  text-align: left;
}
:root[data-theme="dark"] .link-card-notice {
  background: rgba(217, 119, 6, 0.12);
  color: #fcd34d;
}

/* ── Card Code Input ──────────────────────────────────────────── */
.card-code-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.card-code-row .button { width: 100%; }
.card-code-input {
  width: 100%;
  padding: var(--space-3) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2, var(--color-surface-1));
  color: var(--color-text-primary);
  font-size: 1rem;
  outline: none;
  min-width: 0;
}
.card-code-input:focus { border-color: var(--color-primary); }

/* ── Delete Account Modal ─────────────────────────────────────── */
.da-modal {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; flex-direction: column; justify-content: flex-end;
  pointer-events: none; opacity: 0;
  transition: opacity 0.25s;
}
.da-modal.is-open { pointer-events: all; opacity: 1; }
.da-modal__overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.da-modal__sheet {
  position: relative; z-index: 1;
  background: var(--color-surface-1);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  max-height: 92vh;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32,0.72,0,1);
}
.da-modal.is-open .da-modal__sheet { transform: translateY(0); }
.da-modal__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) var(--space-4) var(--space-2);
  position: sticky; top: 0;
  background: var(--color-surface-1); z-index: 1;
  border-bottom: 1px solid var(--color-border-subtle);
}
.da-modal__title { font-size: 1rem; font-weight: 600; color: var(--color-text-primary); }
.da-modal__close {
  background: none; border: none; cursor: pointer;
  color: var(--color-text-secondary); padding: var(--space-1);
  display: flex; align-items: center;
}
.da-modal__body {
  padding: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.da-modal__footer {
  position: sticky; bottom: 0; z-index: 1;
  padding: var(--space-3) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom));
  margin: 0 0 var(--space-3);
  border-top: 1px solid var(--color-border-subtle);
  background: var(--color-surface-1);
  display: flex; flex-direction: row; justify-content: space-between;
  align-items: center;
}
.da-warning-icon {
  display: flex; justify-content: center;
  padding: var(--space-2) 0;
  color: var(--color-danger);
}
.da-modal__text {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--color-text-primary);
  line-height: 1.5;
}
.da-list {
  margin: 0; padding-left: 1.25rem;
  display: flex; flex-direction: column; gap: var(--space-1);
  color: var(--color-text-secondary);
  font-size: 0.875rem; line-height: 1.5;
}
.da-modal__note {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-text-tertiary, var(--color-text-secondary));
  font-style: italic;
}
.da-error {
  margin: 0; font-size: 0.8125rem; color: var(--color-danger);
}
.da-btn-full { flex: 0; white-space: nowrap; padding: var(--space-3) var(--space-4); }
.da-code-input {
  width: 100%; box-sizing: border-box;
  text-align: center; letter-spacing: 0.5rem;
  font-size: 1.75rem; font-weight: 700;
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2, var(--color-surface-1));
  color: var(--color-text-primary);
  outline: none;
}
.da-code-input:focus { border-color: var(--color-primary); }
.da-resend-btn {
  background: none; border: none; cursor: pointer;
  font-size: 0.8125rem; color: var(--color-primary);
  padding: 0; text-decoration: underline; text-underline-offset: 2px;
  align-self: flex-start;
}
/* ── Feedback Thread View ─────────────────────────────────────── */
.fb-thread-form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding-top: calc(var(--space-4) + env(safe-area-inset-top));
}
.fb-thread-form .section-header {
  flex-shrink: 0;
  padding: 0 var(--space-6) var(--space-4) var(--space-6);
  margin-bottom: 0;
}
.fb-thread-title-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
}
.fb-thread-title-group h1 {
  flex: unset;
  font-size: 1.05rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fb-thread-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
}
.fb-thread-messages {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-4) var(--space-4);
}

/* ── Feedback Bubbles ─────────────────────────────────────────── */
.fb-bubble {
  max-width: 82%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-lg);
  font-size: 0.9375rem;
  line-height: 1.5;
  word-break: break-word;
}
.fb-bubble--client {
  align-self: flex-end;
  background: var(--color-primary);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.fb-bubble--admin {
  align-self: flex-start;
  background: var(--color-surface-2);
  color: var(--color-text-primary);
  border-bottom-left-radius: 4px;
}
.fb-bubble__stamp {
  font-size: 0.6875rem;
  opacity: 0.65;
  margin-top: 3px;
}
.fb-bubble--client .fb-bubble__stamp { text-align: right; color: rgba(255,255,255,0.85); opacity: 1; }
.fb-bubble--admin .fb-bubble__stamp  { text-align: left; }

/* ── Feedback Reply Compose ───────────────────────────────────── */
.fb-compose {
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-1);
}
.fb-compose-input {
  flex: 1;
  resize: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 0.5rem var(--space-3);
  background: var(--color-surface-2);
  color: var(--color-text-primary);
  font-size: 0.9375rem;
  font-family: inherit;
  line-height: 1.4;
  max-height: 120px;
  overflow-y: auto;
  outline: none;
}
.fb-compose-input:focus { border-color: var(--color-primary); }
.fb-compose-send {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.15s;
}
.fb-compose-send:disabled { opacity: 0.4; cursor: default; }

/* ── Feedback list item — tappable footer with chevron ────────── */
.fb-item__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-2);
}
.fb-item__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.fb-item__footer {
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding-left: var(--space-2);
}
.fb-item__reply-hint {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-primary);
  white-space: nowrap;
}
.fb-item__chevron {
  color: var(--color-text-muted);
}

/* ── Feedback compose photo button ────────────────────────────── */
.fb-compose .conv-btn-icon {
  align-self: flex-end;
  margin-bottom: 2px;
}

/* ── Feedback media bubbles (reuses .msg-image sizing/lightbox) ── */
.fb-bubble--media {
  padding: 0;
  background: none !important;
  border-radius: 0;
  max-width: 85%;
}
.fb-bubble--media .msg-image { margin-bottom: 0; }
video.msg-image { cursor: default; background: #000; }

/* ── Notification settings: master toggle prominence ──────────── */
.setting-row--master {
  background: var(--color-primary-alpha-10, rgba(217, 119, 6, 0.08));
  border-radius: var(--radius-md);
  margin: 0 var(--space-2) var(--space-2);
  padding: var(--space-4) var(--space-4) !important;
  border-bottom: none !important;
}
.setting-row--master .setting-label-group {
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
}
.setting-row--master .setting-master-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.setting-row--master .setting-master-text span {
  font-weight: 700;
  font-size: 1rem;
}
.setting-master-icon {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: #fff;
}
.setting-row--sub {
  transition: opacity 0.2s ease;
}
.setting-row--sub:has(input:disabled) {
  opacity: 0.5;
}

/* ── Fix: switch was shrinking in the master notification row ──── */
.switch {
  flex-shrink: 0;
}
.setting-row--master .setting-label-group {
  min-width: 0;
}
.setting-row--master .setting-master-text {
  min-width: 0;
}

/* ── Feedback Intro Modal (changelog before reporting) ────────── */
.fbi-section {
  margin-bottom: var(--space-5);
}
.fbi-section:last-child {
  margin-bottom: 0;
}
.fbi-section__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.9375rem;
  font-weight: 700;
  margin: 0 0 var(--space-3);
}
.fbi-section__title svg {
  flex-shrink: 0;
}
.fbi-section__title--done {
  color: #16a34a;
}
.fbi-section__title--progress {
  color: #d97706;
}
.fbi-list {
  margin: 0;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
}
.fbi-list li::marker {
  color: var(--color-text-muted);
}

/* ── Notification settings: master-controls-subs hint ─────────── */
.setting-master-hint {
  margin: 0;
  padding: var(--space-2) var(--space-6) var(--space-3);
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-style: italic;
}

/* ── Journal page ──────────────────────────────────────────────── */
.journal-add-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-bottom: var(--space-4);
}
.journal-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.journal-empty {
  color: var(--color-text-secondary);
  font-size: 0.9rem;
  text-align: center;
  padding: var(--space-6) 0;
  margin: 0;
}
.jrn-item {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-surface-1);
}
.jrn-item__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.jrn-item__date {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-primary);
}
.jrn-item__badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: rgba(34, 197, 94, 0.15);
  color: #16a34a;
}
:root[data-theme="dark"] .jrn-item__badge { color: #86efac; }
.jrn-item__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2) var(--space-4);
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}
.jrn-item__stats b {
  color: var(--color-text-primary);
  font-weight: 600;
}
.jrn-stat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border-subtle);
}
.jrn-stat__label {
  color: var(--color-text-muted);
}
.jrn-stat__value {
  color: var(--color-text-primary);
  font-weight: 600;
  text-align: right;
}
.jrn-item__exercises {
  margin-top: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.jrn-item__exercise {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}
.jrn-item__exercise b {
  color: var(--color-text-primary);
  font-weight: 600;
}
.jrn-item__note {
  margin-top: var(--space-2);
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  white-space: pre-wrap;
}
.jrn-item__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-subtle);
}
.jrn-item__action {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
}
.jrn-item__action--danger { color: #dc2626; }
.jrn-item__action--primary { color: var(--color-primary); }
.jrn-item__action--edit { color: var(--color-primary); }
.jrn-item--task-done { opacity: 0.6; }

/* ── Journal forms (measurement / workout modals) ─────────────── */
.jf-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: var(--space-3);
}
.jf-field label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-secondary);
}
.jf-input {
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2, var(--color-surface-1));
  color: var(--color-text-primary);
  font-size: 1rem;
  font-family: inherit;
  outline: none;
  min-width: 0;
  box-sizing: border-box;
}
.jf-input:focus { border-color: var(--color-primary); }
textarea.jf-input { resize: none; }
.jf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.jf-grid .jf-field { margin-bottom: 0; }
.jf-share-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  margin: var(--space-3) 0;
}

/* ── Workout exercise rows ─────────────────────────────────────── */
.jw-exercises {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.jw-exercise-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  position: relative;
}
.jw-exercise-row__nums {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-2);
}
.jw-ex-remove {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 1.5rem;
  height: 1.5rem;
  border: none;
  border-radius: 50%;
  background: var(--color-surface-1);
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.jw-add-exercise-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: 100%;
  padding: var(--space-2);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: none;
  color: var(--color-primary);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: var(--space-3);
}

/* ── Measurement photo picker ─────────────────────────────────── */
.jm-photo-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  padding: var(--space-3);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: none;
  color: var(--color-primary);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}
.jm-photo-preview {
  position: relative;
  margin-top: var(--space-2);
  width: 96px;
}
.jm-photo-preview img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: var(--radius-md);
  display: block;
}
.jm-photo-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 1.5rem;
  height: 1.5rem;
  border: none;
  border-radius: 50%;
  background: #dc2626;
  color: #fff;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.jrn-item__photo {
  margin-top: var(--space-2);
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: var(--radius-md);
}

/* ── Journal calendar layout ───────────────────────────────────── */
.journal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-2);
  margin-bottom: var(--space-3);
}
.journal-legend__item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--color-text-secondary);
}
.journal-legend__item .cal-dot {
  width: 7px;
  height: 7px;
}
.journal-undated-tasks {
  margin-bottom: var(--space-4);
}
.journal-add-row {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.journal-add-row .journal-add-btn {
  flex: 1;
  margin-bottom: 0;
}

/* ── Profile & Journal: match the open layout used by other top-level
   tabs (home/booking) instead of one big boxed panel ────────────── */
.page.profile > .card,
.page.journal > .card {
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  border-radius: 0;
  padding: 0;
  max-width: none;
  margin: 0;
  box-shadow: none;
}

/* ── Relink card (change card) section on the linked-card view ─── */
.relink-card-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}
.relink-card-hint {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.4;
  margin-bottom: var(--space-4);
}
.relink-scan-btn {
  width: 100%;
  justify-content: center;
  text-align: center;
}
.relink-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-4) 0;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}
.relink-divider::before,
.relink-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border-subtle);
}