.card {
  background: var(--surface-panel);
  border: 1px solid var(--border-surface);
  border-radius: var(--radius-lg);
  background-clip: padding-box;
  box-shadow: var(--shadow-soft), var(--glass-inset-shadow);
  backdrop-filter: var(--glass-filter);
  -webkit-backdrop-filter: var(--glass-filter);
}

.cardPad {
  padding: 16px;
}

.surfaceFinishPlain {
  background: var(--surface-panel);
}

.surfaceFinishSilver {
  background: var(--surface-metal);
  border-color: var(--border-surface-strong);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--border-surface-emphasis);
  background: var(--surface-panel);
  color: var(--text-primary);
  font-family: var(--type-control-family);
  font-size: var(--type-control-size);
  line-height: var(--type-control-line-height);
  font-weight: var(--type-control-weight);
  letter-spacing: var(--type-control-tracking);
  cursor: pointer;
  gap: var(--space-2);
  box-shadow: var(--glass-inset-shadow);
  backdrop-filter: var(--glass-filter-soft);
  -webkit-backdrop-filter: var(--glass-filter-soft);
  transition:
    transform 140ms ease,
    border-color 140ms ease,
    background-color 140ms ease,
    box-shadow 140ms ease;
}

.btn:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: var(--silver-strong);
  box-shadow: var(--shadow-soft-hover);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btnPrimary {
  background: var(--button-primary-bg);
  border-color: var(--button-primary-border);
  color: var(--button-primary-text);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.2);
}

.btnPrimary:hover:not(:disabled) {
  background: var(--button-primary-bg);
  border-color: var(--button-primary-border);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.24);
}

.btnGhost {
  border-color: transparent;
  background: transparent;
  padding: 0;
  height: auto;
  min-height: auto;
  box-shadow: none;
}

.contactAdminAction {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
}

.contactAdminPrimaryLink {
  text-decoration: none;
}

.contactAdminSecondaryActions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.contactAdminSecondaryLink {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  width: fit-content;
}

.contactAdminEmailOption {
  display: grid;
  gap: var(--space-1);
}

.contactAdminEmailNote {
  margin-left: calc(16px + var(--space-2));
}

.contactAdminLocationPicker {
  display: grid;
  gap: var(--space-2);
  width: 100%;
}

.contactAdminLocationOptions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  width: 100%;
}

.contactAdminLocationOption {
  min-height: 40px;
  border: 1px solid var(--border-surface);
  border-radius: var(--radius-md);
  background: var(--surface-field);
  color: var(--text-primary);
  font-family: var(--type-control-family);
  font-size: var(--type-control-size);
  font-weight: var(--type-control-weight);
  cursor: pointer;
}

.contactAdminLocationOptionActive {
  border-color: var(--border-surface-emphasis);
  background: var(--surface-metal);
}

.contactAdminMoreOptions {
  display: grid;
  gap: var(--space-2);
}

.contactAdminMoreOptions summary {
  cursor: pointer;
  color: var(--text-secondary);
  font-size: var(--type-caption-size);
}

.segmentedControl {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 2px;
  width: 100%;
  padding: 3px;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  background: var(--surface-field);
  box-shadow: var(--glass-inset-shadow);
  backdrop-filter: var(--glass-filter-soft);
  -webkit-backdrop-filter: var(--glass-filter-soft);
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.segmentedControl::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: var(--segment-width);
  border-radius: 999px;
  background: var(--surface-segment-active);
  box-shadow:
    inset 0 0 0 1px rgba(110, 121, 135, 0.28),
    0 2px 7px rgba(8, 10, 14, 0.06);
  pointer-events: none;
  transform: translateX(var(--segment-offset));
  transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.segmentedControlDragging::before {
  transition: none;
}

.segmentedControlButton {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--type-control-family);
  font-size: var(--font-size-200);
  line-height: var(--line-height-ui);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0;
  cursor: pointer;
  overflow-wrap: anywhere;
  -webkit-tap-highlight-color: transparent;
}

.segmentedControlButtonActive {
  background: transparent;
  color: var(--text-segment-active);
  box-shadow: none;
}

.segmentedControlButton:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px var(--focus-ring),
    inset 0 0 0 1px var(--border-field-focus);
}

@media (prefers-reduced-motion: reduce) {
  .segmentedControl::before {
    transition: none;
  }
}

.sticky .btnGhost,
.sticky .btnGhost:hover:not(:disabled) {
  background: var(--chrome-bg);
  color: var(--chrome-text);
  border: 0;
  box-shadow: none;
  transform: none;
}

.input {
  height: 44px;
  width: 100%;
  padding: 0 var(--space-3);
  border-radius: 12px;
  border: 1px solid var(--border-field);
  background: var(--surface-field);
  color: var(--text-primary);
  font-family: var(--type-input-family);
  font-size: var(--type-input-size);
  line-height: var(--type-input-line-height);
  font-weight: var(--type-input-weight);
  outline: none;
  box-shadow: var(--glass-inset-shadow);
  backdrop-filter: var(--glass-filter-soft);
  -webkit-backdrop-filter: var(--glass-filter-soft);
}

.input:focus {
  border-color: var(--border-field-focus);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.passwordInputShell {
  position: relative;
}

.passwordInput {
  padding-right: 46px;
}

.passwordVisibilityButton {
  position: absolute;
  top: 50%;
  right: 6px;
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}

.passwordVisibilityButton:hover:not(:disabled),
.passwordVisibilityButton:focus-visible {
  background: var(--surface-panel-muted);
  color: var(--text-primary);
}

.passwordVisibilityButton:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.passwordVisibilityButton:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.locationSelect {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.locationSelectHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.locationRequiredLabel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--surface-highlight);
  border: 1px solid var(--border-highlight);
  color: var(--accent-strong);
  font-family: var(--type-label-family);
  font-size: var(--font-size-200);
  line-height: 1;
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-status);
}

.scheduleControls {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border-surface);
  border-radius: var(--radius-lg);
  background: var(--surface-panel-muted);
  background-clip: padding-box;
  box-shadow: var(--shadow-soft), var(--glass-inset-shadow);
  backdrop-filter: var(--glass-filter);
  -webkit-backdrop-filter: var(--glass-filter);
}

.scheduleIntroActions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
}

.scheduleGuideCard {
  display: grid;
  gap: 10px;
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border-surface);
  border-radius: var(--radius-lg);
  background: var(--surface-panel-muted);
  background-clip: padding-box;
  box-shadow: var(--shadow-soft), var(--glass-inset-shadow);
  backdrop-filter: var(--glass-filter);
  -webkit-backdrop-filter: var(--glass-filter);
}

.scheduleGuideCardTitle {
  margin: 0;
  color: var(--text-primary);
  font-family: var(--type-card-title-family);
  font-size: var(--type-body-strong-size);
  line-height: var(--type-body-strong-line-height);
  font-weight: var(--type-body-strong-weight);
}

.scheduleGuideCardActions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr));
  gap: var(--space-2);
  min-width: 0;
}

.scheduleIntroGroup {
  position: relative;
  z-index: 2;
  overflow: visible;
}

.scheduleIntroGroup .scheduleControls {
  flex-flow: row wrap;
  align-items: flex-start;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.scheduleIntroGroup .scheduleFilters {
  flex-basis: 100%;
}

.scheduleFilterToggleRow {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  max-width: 100%;
}

.scheduleLocationControl {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 0;
}

.scheduleLocationControl .selectWrap {
  width: auto;
  min-width: 0;
  flex: 0 0 auto;
}

.scheduleLocationControl .select {
  width: 136px;
  min-width: 0;
  min-height: 40px;
  border-color: var(--border);
  background: var(--card-strong);
  font-size: var(--font-size-300);
  box-shadow:
    0 8px 20px rgba(8, 10, 14, 0.08),
    var(--glass-inset-shadow);
  backdrop-filter: var(--glass-filter-soft);
  -webkit-backdrop-filter: var(--glass-filter-soft);
}

.scheduleLocationControl .locationSelectHeader {
  justify-content: flex-start;
  gap: 6px;
}

.scheduleLocationControl .locationRequiredLabel {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: var(--font-size-100);
}

.scheduleFilterToggle {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  background: var(--surface-field);
  color: var(--text-secondary);
  font-family: var(--type-input-family);
  font-size: var(--font-size-300);
  line-height: var(--line-height-body);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  box-shadow: var(--glass-inset-shadow);
  backdrop-filter: var(--glass-filter-soft);
  -webkit-backdrop-filter: var(--glass-filter-soft);
  max-width: 100%;
}

.scheduleFilterToggle:hover,
.scheduleFilterToggleOpen {
  border-color: var(--border-field-hover);
  background: var(--surface-field);
  color: var(--text-primary);
}

.scheduleFilterToggle:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.scheduleFilterToggleIcon {
  flex-shrink: 0;
  transition: transform 140ms ease;
}

.scheduleFilterToggleIconOpen {
  transform: rotate(180deg);
}

.selectWrap {
  position: relative;
}

.select {
  width: auto;
  padding: 8px 32px 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-field);
  background: var(--surface-field-strong);
  box-shadow: var(--glass-inset-shadow);
  backdrop-filter: var(--glass-filter-soft);
  -webkit-backdrop-filter: var(--glass-filter-soft);
  font-family: var(--type-input-family);
  font-size: var(--type-input-size);
  line-height: var(--type-input-line-height);
  font-weight: var(--type-input-weight);
  appearance: none;
  cursor: pointer;
  color: var(--text-primary);
  min-width: 100px;
}

.select:hover {
  border-color: var(--border-field-hover);
}

.select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow:
    0 0 0 3px var(--focus-ring),
    var(--glass-inset-shadow);
}

.selectIcon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--text-secondary);
}

.actionDialogOverlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(20px + var(--safe-area-top, env(safe-area-inset-top, 0px))) 20px
    calc(20px + var(--safe-area-bottom, env(safe-area-inset-bottom, 0px)));
  background: rgba(24, 25, 27, 0.38);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.actionDialogPanel {
  width: min(100%, 380px);
  max-height: calc(
    100svh - 40px - var(--safe-area-top, env(safe-area-inset-top, 0px)) -
      var(--safe-area-bottom, env(safe-area-inset-bottom, 0px))
  );
  overflow-y: auto;
  background: var(--surface-panel-strong);
  background-clip: padding-box;
  box-shadow: var(--shadow-strong), var(--glass-inset-shadow);
  backdrop-filter: var(--glass-filter);
  -webkit-backdrop-filter: var(--glass-filter);
  outline: none;
}

.actionDialogTitle {
  font-size: var(--font-size-500);
}

.actionDialogBody {
  color: var(--text-secondary);
}

.actionDialogActions {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.actionDialogField {
  width: 100%;
  min-height: 96px;
  resize: vertical;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 10px;
}

.actionDialogProcessing {
  display: flex;
  min-height: 142px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  text-align: center;
}

.actionDialogSpinner {
  color: var(--accent-strong);
  animation: actionDialogSpin 1s linear infinite;
}

.actionDialogSuccessIcon {
  color: var(--text-status-paid);
}

.signInPromptOverlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(20px + var(--safe-area-top, env(safe-area-inset-top, 0px))) 20px
    calc(20px + var(--safe-area-bottom, env(safe-area-inset-bottom, 0px)));
  background: rgba(24, 25, 27, 0.38);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.signInPromptPanel {
  position: relative;
  width: min(100%, 360px);
  max-height: calc(
    100svh - 40px - var(--safe-area-top, env(safe-area-inset-top, 0px)) -
      var(--safe-area-bottom, env(safe-area-inset-bottom, 0px))
  );
  overflow-y: auto;
  background: var(--surface-panel-strong);
  background-clip: padding-box;
  box-shadow: var(--shadow-strong), var(--glass-inset-shadow);
  backdrop-filter: var(--glass-filter);
  -webkit-backdrop-filter: var(--glass-filter);
  outline: none;
}

.signInPromptClose {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}

.signInPromptClose:hover {
  border-color: var(--border-surface);
  background: var(--surface-field);
  color: var(--text-primary);
}

.signInPromptTitle {
  padding-right: 32px;
  font-size: var(--font-size-500);
}

.signInPromptBody {
  color: var(--text-secondary);
}

.signInPromptActions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-4);
}

.scheduleFilters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 220px));
  align-items: start;
  gap: 10px 14px;
  width: min(100%, 454px);
  max-width: 100%;
}

.filterGroup {
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  width: 100%;
  min-inline-size: 0;
}

.filterGroupLabel {
  margin: 0 0 4px;
  font-family: var(--type-label-family);
  font-size: var(--font-size-100);
  line-height: var(--type-label-line-height);
  font-weight: var(--font-weight-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-overline);
}

.filterGroupBody {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.filterControlRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
}

.filterDropdownButton {
  width: 100%;
  min-width: 0;
  max-width: none;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--type-input-family);
  font-size: var(--font-size-200);
  line-height: var(--line-height-body);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}

.filterDropdownButton:hover {
  border-color: var(--border-field-hover);
  background: var(--surface-field);
  color: var(--text-primary);
}

.filterDropdownButtonActive {
  border-color: var(--border-field);
  background: var(--surface-field-strong);
  color: var(--text-primary);
}

.filterDropdownButton:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.filterDropdownText {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filterDropdownIcon {
  flex-shrink: 0;
  color: var(--text-secondary);
  transition: transform 140ms ease;
}

.filterDropdownIconOpen {
  transform: rotate(180deg);
}

.filterDropdownPanel {
  position: static;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  max-height: 200px;
  overflow: auto;
  margin-top: 4px;
  padding: 6px;
  border: 1px solid var(--border-surface-strong);
  border-radius: var(--radius-md);
  background: var(--surface-panel-strong);
  background-clip: padding-box;
  box-shadow: var(--shadow-soft), var(--glass-inset-shadow);
  backdrop-filter: var(--glass-filter);
  -webkit-backdrop-filter: var(--glass-filter);
}

.filterOptionList {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.filterOption {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 5px 7px;
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--type-body-family);
  font-size: var(--font-size-300);
  line-height: var(--line-height-body);
  cursor: pointer;
}

.filterOption:hover {
  background: var(--surface-highlight);
}

.filterOptionCheckbox {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  accent-color: var(--accent);
}

.filterOptionText {
  min-width: 0;
  overflow-wrap: anywhere;
}

.filterClearButton {
  min-height: 28px;
  padding: 0 2px;
  white-space: nowrap;
}

.filterClearButton:disabled {
  opacity: 0;
}

.overviewSectionHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.surfaceHeaderStack {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.surfaceHeaderRow {
  align-items: flex-start;
}

.navItem {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-family: var(--type-label-family);
  font-size: var(--type-label-size);
  line-height: var(--type-label-line-height);
  letter-spacing: var(--type-label-tracking);
  color: var(--nav-item-text);
  transition: color 160ms ease;
}

.navItem::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 7px;
  width: 24px;
  height: 2px;
  border-radius: 999px;
  background: transparent;
  transform: translateX(-50%);
}

.navItem:hover,
.navItem:focus-visible {
  color: var(--nav-item-hover-text);
}

.navItem:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px var(--focus-ring);
}

.navItemActive {
  color: var(--nav-item-active-text);
}

.navItemActive::after {
  background: currentColor;
}

.navItemCue {
  position: absolute;
  top: 8px;
  right: calc(50% - 22px);
  width: 9px;
  height: 9px;
  border: 2px solid var(--nav-surface);
  border-radius: 999px;
  background: var(--accent-strong);
  box-shadow: 0 0 0 2px rgba(190, 151, 66, 0.2);
}

.navLabel {
  font-weight: var(--font-weight-medium);
}

.navLabelActive {
  font-weight: var(--font-weight-semibold);
}

.adminTopNavItem {
  position: relative;
  min-width: 0;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 6px;
  color: var(--text-secondary);
  font-family: var(--type-label-family);
  font-size: var(--font-size-200);
  line-height: var(--type-label-line-height);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  text-align: center;
  overflow-wrap: anywhere;
}

.adminTopNavItem span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.adminTopNavItem::after {
  content: '';
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 2px;
  border-radius: 999px;
  background: transparent;
}

.adminTopNavItem:hover,
.adminTopNavItem:focus-visible {
  color: var(--text-primary);
}

.adminTopNavItem:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px var(--focus-ring);
}

.adminTopNavItemActive {
  color: var(--text-primary);
}

.adminTopNavItemActive::after {
  background: currentColor;
}

.monthHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: var(--space-4) 0;
}

.weekCalendarRow {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-3);
  margin: 12px 0;
  padding: 12px;
  border: 1px solid var(--border-surface);
  border-radius: var(--radius-lg);
  background: var(--surface-panel-muted);
  background-clip: padding-box;
  box-shadow: var(--shadow-soft), var(--glass-inset-shadow);
  backdrop-filter: var(--glass-filter);
  -webkit-backdrop-filter: var(--glass-filter);
}

.scheduleResultsGroup {
  position: relative;
  z-index: 1;
}

.scheduleResultsGroup .weekCalendarRow {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.scheduleSelectedDateText {
  display: block;
  width: 100%;
  padding: 11px 0 0;
  border: 0;
  border-top: 1px solid var(--border-light);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.dateGrid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  text-align: center;
  min-width: 0;
}

.dateCircle {
  width: 40px;
  height: 40px;
  margin: 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-field);
  background: var(--surface-overlay);
  font-size: var(--font-size-600);
  line-height: 1;
  padding-top: 2px;
  font-weight: var(--type-body-strong-weight);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--text-primary);
  box-shadow: var(--glass-inset-shadow);
  backdrop-filter: var(--glass-filter-soft);
  -webkit-backdrop-filter: var(--glass-filter-soft);
}

.dateCircleActive {
  background: var(--button-primary-bg);
  border-color: var(--button-primary-border);
  color: var(--button-primary-text);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
}

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

.dateCircleDisabled {
  border-color: var(--border-light);
  color: var(--text-muted);
}

.weekDayBtn {
  border: 0;
  background: transparent;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.weekNavButton {
  width: 42px;
  min-width: 42px;
  padding: 0;
}

.monthLabel {
  font-family: var(--type-card-title-family);
  font-size: var(--type-card-title-size);
  line-height: var(--type-card-title-line-height);
  font-weight: var(--type-card-title-weight);
  letter-spacing: var(--type-card-title-tracking);
  text-align: center;
  flex: 1;
}

.todayDotWrap {
  height: 8px;
  display: flex;
  justify-content: center;
}

.todayDot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  margin-top: 4px;
  background: var(--accent);
}

.classRow {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-light);
}

.scheduleClassList {
  display: flex;
  flex-direction: column;
  margin-top: 2px;
}

.scheduleClassListDynamicCredit {
  margin-bottom: -14px;
}

.scheduleClassList .classRow {
  margin: 0 -6px;
  padding: 14px 6px;
  border-radius: 8px;
}

.scheduleClassList .classRowLink:last-child .classRow {
  border-bottom: 0;
}

.scheduleClassListDynamicCredit .classRow {
  border-bottom: 0;
}

.scheduleClassDivider {
  flex: 0 0 1px;
  align-self: center;
  width: calc(100% - clamp(16px, 4vw, 28px));
  max-width: 100%;
  height: 1px;
  background: var(--border-light);
}

.scheduleClassList .classRowLink:hover .classRow,
.scheduleClassList .classRowLink:focus-visible .classRow {
  background: var(--surface-field);
}

.scheduleResultsGroup .scheduleStateInGroup.card {
  margin-top: 4px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.classRowLink {
  display: block;
  color: inherit;
  text-decoration: none;
}

.classRowLink:hover .classTitle,
.classRowLink:focus-visible .classTitle {
  color: var(--accent-strong);
}

.classRowLink:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.classRowUnavailable .classStartTime,
.classRowUnavailable .classTitle {
  color: var(--text-action-disabled);
}

.classRowUnavailable .classDuration,
.classRowUnavailable .classInstructor,
.classRowUnavailable .classStatusMessage,
.classRowUnavailable .classCreditCost,
.classRowUnavailable .classCreditUnit {
  color: var(--text-action-disabled);
}

.classRowUnavailable .classTitle {
  font-weight: var(--font-weight-medium);
}

.classRowUnavailable .classCoachImageSlot,
.classRowUnavailable .classInstructorAvatar {
  opacity: 0.72;
  filter: saturate(0.72) brightness(1.08) contrast(0.9);
}

.classTimeBlock {
  width: 78px;
  flex: 0 0 78px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}

.classStartTime {
  margin: 0;
  font-family: var(--type-card-title-family);
  font-size: var(--font-size-700);
  line-height: 1.05;
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-normal);
  color: var(--text-primary);
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
}

.classTimeMeridiem {
  font-size: var(--font-size-200);
  line-height: 1;
  font-weight: var(--font-weight-medium);
}

.classDuration {
  margin: 0;
  font-family: var(--type-caption-family);
  font-size: var(--font-size-300);
  line-height: var(--type-caption-line-height);
  font-weight: var(--type-caption-weight);
  color: var(--text-muted);
  white-space: nowrap;
}

.classContent {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.classContentMain {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.classContentText {
  min-width: 0;
}

.classCoachImageSlot {
  position: relative;
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  align-self: center;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  background: var(--surface-avatar);
  color: var(--text-muted);
}

.classRowUnavailable .classCoachImageSlot::after,
.classRowUnavailable .classInstructorAvatar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(231, 235, 240, 0.32);
  pointer-events: none;
}

.classCoachImage {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.classCoachImageFallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-family: var(--type-label-family);
  font-size: var(--font-size-300);
  line-height: 1;
  font-weight: var(--font-weight-semibold);
  color: var(--text-muted);
}

.classCoachImageFallbackEmpty::before {
  content: '';
  width: 22px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.45;
}

.classTitle {
  font-family: var(--type-card-title-family);
  font-size: var(--font-size-400);
  line-height: var(--type-card-title-line-height);
  font-weight: var(--type-card-title-weight);
  letter-spacing: var(--type-card-title-tracking);
  color: var(--text-primary);
  overflow-wrap: anywhere;
  white-space: normal;
}

.classInstructor {
  min-width: 0;
  font-family: var(--type-caption-family);
  font-size: var(--font-size-200);
  line-height: var(--type-caption-line-height);
  font-weight: var(--type-caption-weight);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.classInstructorWithAvatar {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 6px;
}

.classInstructorAvatar {
  position: relative;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  background: var(--surface-avatar);
  color: var(--text-muted);
}

.scheduleClassListDynamicCredit .classCoachImageSlot,
.scheduleClassListDynamicCredit .classInstructorAvatar {
  border: 0;
}

.classInstructorAvatarImage {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.classInstructorAvatarFallback {
  font-family: var(--type-label-family);
  font-size: var(--font-size-100);
  line-height: 1;
  font-weight: var(--font-weight-semibold);
}

.classInstructorText {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.classAction {
  flex-shrink: 0;
}

.classStatusMessage {
  margin: 0;
}

.classCreditCost {
  min-width: 56px;
  flex: 0 0 auto;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  margin: 0;
  color: var(--text-primary);
  text-align: center;
}

.classCreditAmount {
  font-family: var(--type-card-title-family);
  font-size: 27px;
  line-height: 0.92;
  font-weight: var(--font-weight-semibold);
}

.classCreditUnit {
  font-family: var(--type-caption-family);
  font-size: var(--font-size-100);
  line-height: 1;
  font-weight: var(--font-weight-semibold);
  color: var(--text-secondary);
}

.classStatusNeutral {
  color: var(--text-secondary);
  font-weight: var(--fw-semibold);
}

.classDetail {
  display: flex;
  flex-direction: column;
}

.classDetail.pageGroup {
  gap: var(--space-3);
}

.classDetailBackLink {
  width: fit-content;
  max-width: 100%;
}

.classDetail .classDetailMeta,
.classDetail .classDetailSection {
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-light);
}

.classDetailLoadingText {
  min-height: min(42svh, 360px);
  display: grid;
  place-items: center;
  margin: 0;
  color: var(--text-secondary);
  font-family: var(--type-body-family);
  font-size: var(--font-size-400);
  line-height: var(--line-height-body);
  text-align: center;
}

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

.classDetailMeta dt {
  margin: 0 0 3px;
  font-family: var(--type-caption-family);
  font-size: var(--font-size-200);
  color: var(--text-muted);
}

.classDetailMeta dd {
  margin: 0;
  color: var(--text-primary);
  font-weight: var(--fw-medium);
  overflow-wrap: anywhere;
}

.classDetailCoach {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 8px;
}

.classDetailCoachAvatar {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  background: var(--surface-avatar);
  color: var(--text-muted);
}

.classDetailDynamicCredit .classDetailCoachAvatar {
  border: 0;
}

.classDetailCoachImage {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.classDetailCoachFallback {
  font-family: var(--type-label-family);
  font-size: var(--font-size-100);
  line-height: 1;
  font-weight: var(--font-weight-semibold);
}

.classDetailSection {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.classDetailSectionTitle {
  font-family: var(--type-section-title-family);
  font-size: var(--font-size-400);
  line-height: var(--type-section-title-line-height);
  font-weight: var(--type-section-title-weight);
  color: var(--text-primary);
}

.classDetailMessage {
  margin-bottom: var(--space-2);
}

.scheduleHeader {
  padding: 10px 16px 6px;
}

.scheduleHeaderTitle {
  font-family: var(--type-section-title-family);
  font-size: var(--type-section-title-size);
  line-height: var(--type-section-title-line-height);
  font-weight: var(--type-section-title-weight);
  letter-spacing: var(--type-section-title-tracking);
}

.scheduleHeaderSubtitle {
  margin-top: 4px;
}

.scheduleCardTitle {
  font-family: var(--type-card-title-family);
  font-size: var(--type-card-title-size);
  line-height: var(--type-card-title-line-height);
  font-weight: var(--type-card-title-weight);
  letter-spacing: var(--type-card-title-tracking);
}

.scheduleCardMeta {
  margin-top: 4px;
}

.listPad {
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

.packageSectionLabel {
  margin-bottom: var(--space-2);
  text-transform: uppercase;
  letter-spacing: var(--type-label-tracking);
}

.packageHeaderRow {
  align-items: flex-start;
}

.packageTitleWrap {
  min-width: 0;
  flex: 1;
}

.packagePrice {
  font-family: var(--type-card-title-family);
  font-size: var(--type-card-title-size);
  line-height: var(--type-card-title-line-height);
  font-weight: var(--type-card-title-weight);
  letter-spacing: var(--type-card-title-tracking);
  white-space: nowrap;
}

.paymentStatusMeta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.paymentReturnActions {
  justify-content: flex-start;
}

.statusPill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-family: var(--type-label-family);
  font-size: var(--type-label-size);
  line-height: var(--type-label-line-height);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-status);
}

.status-pending {
  background: var(--surface-status-pending);
  border-color: var(--border-status-pending);
  color: var(--text-status-pending);
}

.status-paid {
  background: var(--surface-status-paid);
  border-color: var(--border-status-paid);
  color: var(--text-status-paid);
}

.status-failed {
  background: var(--surface-status-failed);
  border-color: var(--border-status-failed);
  color: var(--text-status-failed);
}

.status-expired {
  background: var(--surface-status-expired);
  border-color: var(--border-status-expired);
  color: var(--text-status-expired);
}

.status-review {
  background: var(--surface-status-review);
  border-color: var(--border-status-review);
  color: var(--text-status-review);
}

.paymentReviewCard,
.recentPaymentCard {
  background: var(--surface-panel-strong);
  border-color: var(--border-surface-strong);
}

.recentPaymentCard {
  box-shadow: var(--shadow-soft), var(--glass-inset-shadow);
  backdrop-filter: var(--glass-filter);
  -webkit-backdrop-filter: var(--glass-filter);
}

.dashboardEyebrow {
  text-transform: uppercase;
  font-family: var(--type-label-family);
  font-size: var(--type-label-size);
  line-height: var(--type-label-line-height);
  letter-spacing: var(--tracking-overline);
  color: var(--accent-soft);
  font-weight: var(--font-weight-bold);
}

.dashboardHeroCard {
  background: var(--surface-metal);
  border: 1px solid var(--border-surface-strong);
  border-radius: var(--radius-xl);
  background-clip: padding-box;
  box-shadow: var(--shadow-strong), var(--glass-inset-shadow);
  backdrop-filter: var(--glass-filter);
  -webkit-backdrop-filter: var(--glass-filter);
  overflow: hidden;
}

.dashboardHeroCompact {
  padding: 14px 16px;
}

.dashboardHeroRow {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
}

.dashboardHeroCopy {
  flex: 1;
}

.dashboardHeroTitle {
  font-family: var(--type-page-title-family);
  font-size: var(--font-size-900);
  line-height: var(--type-page-title-line-height);
  letter-spacing: var(--type-page-title-tracking);
  font-weight: var(--type-page-title-weight);
  color: var(--text-primary);
}

.dashboardHeroBody {
  max-width: 42ch;
  color: var(--text-secondary);
  font-family: var(--type-body-family);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line-height);
  font-weight: var(--type-body-weight);
  letter-spacing: var(--type-body-tracking);
}

.dashboardHeroAction {
  flex-shrink: 0;
}

.dashboardQuickGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--space-3);
}

.dashboardQuickGridTwoCol {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboardQuickGrid > a {
  display: flex;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.dashboardQuickGrid > a > .dashboardQuickCard {
  width: 100%;
}

.dashboardQuickCard {
  height: 100%;
  min-height: 132px;
  gap: var(--space-2);
  justify-content: space-between;
}

.dashboardTeaserCard {
  min-height: 116px;
}

.dashboardQuickIcon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--surface-highlight);
  color: var(--accent-strong);
  border: 1px solid var(--border-highlight);
}

.dashboardQuickTitle {
  font-family: var(--type-card-title-family);
  font-size: var(--type-card-title-size);
  line-height: var(--type-card-title-line-height);
  font-weight: var(--type-card-title-weight);
  letter-spacing: var(--type-card-title-tracking);
}

.dashboardQuickFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--accent-soft);
}

.dashboardSurfaceCard {
  gap: var(--space-2);
}

.bookingSummaryCard {
  background: var(--card-strong);
  border-color: var(--border-surface-strong);
  backdrop-filter: var(--glass-filter-content);
  -webkit-backdrop-filter: var(--glass-filter-content);
}

.surfaceStateActions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.compactCardHeader {
  align-items: flex-start;
}

.dashboardCardAction {
  display: flex;
  justify-content: center;
}

.dashboardNextClassTitle {
  font-family: var(--type-card-title-family);
  font-size: var(--font-size-500);
  line-height: var(--type-card-title-line-height);
  font-weight: var(--type-card-title-weight);
  letter-spacing: var(--type-card-title-tracking);
}

.homeClassPreview {
  gap: var(--space-3);
}

.homeClassPreviewHeader {
  align-items: flex-start;
}

.homeClassPreviewList {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.homeClassPreviewItem {
  border-top: 1px solid var(--border-light);
}

.homeClassPreviewItem:first-child {
  border-top: 0;
}

.homeClassPreviewLink {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 0;
  color: inherit;
  text-decoration: none;
}

.homeClassPreviewInfoRow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.homeClassPreviewTitle {
  min-width: 0;
  font-family: var(--type-card-title-family);
  font-size: var(--type-body-strong-size);
  line-height: var(--type-body-strong-line-height);
  font-weight: var(--type-body-strong-weight);
  color: var(--text-primary);
}

.homeClassPreviewTime {
  flex-shrink: 0;
  color: var(--text-secondary);
  font-family: var(--type-caption-family);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line-height);
  font-weight: var(--type-caption-weight);
  text-align: left;
}

.homeClassPreviewMeta,
.homeClassPreviewStatus {
  color: var(--text-secondary);
  font-family: var(--type-caption-family);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line-height);
  font-weight: var(--type-caption-weight);
}

.homeClassPreviewStatus {
  color: var(--accent-soft);
  flex-shrink: 0;
  max-width: 42vw;
  text-align: right;
  overflow-wrap: anywhere;
}

.homeClassPreviewFooter {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: var(--space-1);
}

.classInfoEntryCard {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: 14px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: var(--card);
  color: inherit;
  text-decoration: none;
  box-shadow: var(--shadow-soft), var(--glass-inset-shadow);
  backdrop-filter: var(--glass-filter);
  -webkit-backdrop-filter: var(--glass-filter);
}

.classInfoEntryCard:hover,
.classInfoEntryCard:focus-visible {
  border-color: var(--border-field-hover);
  background: var(--surface-field);
}

.classInfoEntryCard:focus-visible,
.classInfoEntryInline:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

.classInfoEntryIcon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-highlight);
  border-radius: 8px;
  background: var(--surface-highlight);
  color: var(--accent-strong);
  box-shadow: var(--glass-inset-shadow);
  backdrop-filter: var(--glass-filter-soft);
  -webkit-backdrop-filter: var(--glass-filter-soft);
}

.classInfoEntryBody,
.classInfoEntryInlineBody {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.classInfoEntryLabel {
  font-family: var(--type-label-family);
  font-size: var(--type-label-size);
  line-height: var(--type-label-line-height);
  font-weight: var(--type-label-weight);
  letter-spacing: var(--type-label-tracking);
  text-transform: uppercase;
  color: var(--text-secondary);
}

.classInfoEntryTitle,
.classInfoEntryInlineTitle {
  font-family: var(--type-card-title-family);
  font-size: var(--type-body-strong-size);
  line-height: var(--type-body-strong-line-height);
  font-weight: var(--type-body-strong-weight);
  color: var(--text-primary);
}

.classInfoEntryDescription,
.classInfoEntryInlineCaption {
  font-family: var(--type-caption-family);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line-height);
  font-weight: var(--type-caption-weight);
  color: var(--text-secondary);
}

.classInfoEntryInline {
  width: fit-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border-surface);
  border-radius: var(--radius-lg);
  background: var(--surface-panel-muted);
  color: inherit;
  text-decoration: none;
  box-shadow: var(--shadow-soft), var(--glass-inset-shadow);
  backdrop-filter: var(--glass-filter);
  -webkit-backdrop-filter: var(--glass-filter);
}

.classInfoEntryInline:hover,
.classInfoEntryInline:focus-visible {
  border-color: var(--border-field-hover);
  background: var(--surface-field);
}

.classInfoEntryCompact {
  min-width: 0;
  min-height: 36px;
  display: grid;
  grid-template-columns: auto minmax(0, max-content);
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  background: var(--surface-field);
  color: inherit;
  text-decoration: none;
  box-shadow: var(--glass-inset-shadow);
}

.classInfoEntryCompact:hover,
.classInfoEntryCompact:focus-visible {
  border-color: var(--border-field-hover);
  background: var(--card-strong);
}

.classInfoEntryCompact:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

.classInfoEntryCompactLabel {
  min-width: 0;
  overflow: hidden;
  color: var(--text-primary);
  font-family: var(--type-input-family);
  font-size: var(--font-size-200);
  line-height: var(--line-height-ui);
  font-weight: var(--font-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.classInfoEntryCompact > svg:first-child {
  color: var(--accent-soft);
}

.scheduleIntroGroup .classInfoEntryInline,
.homeLeadGroup .classInfoEntryInline {
  width: 100%;
}

.classInfoEntryInline svg,
.classInfoEntryArrow {
  flex-shrink: 0;
}

.classInfoEntryInline > svg:first-child {
  color: var(--accent-soft);
}

.classInfoEntryArrow {
  color: var(--text-action);
}

.classInfoIntroActions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.classInfoIntroGroup .classInfoIntroActions {
  padding-top: var(--space-2);
}

.levelInfoIntroActions {
  align-items: center;
  justify-content: flex-start;
}

.levelInfoLanguageToggle {
  flex: 0 0 104px;
  width: 104px;
  margin-left: auto;
}

.levelInfoLanguageToggle .segmentedControlButton {
  min-height: 30px;
  padding: 0 8px;
}

.classInfoJump {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.classInfoIntroGroup .classInfoJump {
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-light);
}

.classInfoJumpLabel {
  font-family: var(--type-label-family);
  font-size: var(--type-label-size);
  line-height: var(--type-label-line-height);
  font-weight: var(--type-label-weight);
  letter-spacing: var(--type-label-tracking);
  text-transform: uppercase;
  color: var(--text-secondary);
}

.classInfoJumpSelectWrap {
  width: min(100%, 280px);
}

.classInfoJumpSelect {
  width: 100%;
  min-height: 40px;
  border-color: var(--border);
  background: var(--card-strong);
  box-shadow: var(--glass-inset-shadow);
}

.classInfoPosterList {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.classInfoPosterList.pageGroup {
  gap: var(--space-4);
  padding-right: 0;
  padding-left: 0;
  overflow: hidden;
}

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

.classInfoPosterHeader {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 14px;
  padding-left: 14px;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-light);
}

.classInfoPoster:first-child .classInfoPosterHeader {
  padding-top: 0;
  border-top: 0;
}

.classInfoPosterMetaRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 12px;
}

.levelInfoPosterMetaRow {
  gap: 8px 12px;
}

.levelInfoPosterMetaRow .smallLabel {
  min-width: 0;
}

.classInfoPosterMetaActions {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.infoPosterImageHeaderButton {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.56);
  color: var(--text-primary);
  box-shadow: var(--glass-inset-shadow);
  backdrop-filter: var(--glass-filter-soft);
  -webkit-backdrop-filter: var(--glass-filter-soft);
  cursor: pointer;
}

.infoPosterImageHeaderButton:hover,
.infoPosterImageHeaderButton:focus-visible {
  background: rgba(255, 255, 255, 0.82);
}

.infoPosterImageHeaderButton:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.classInfoPosterTitle {
  margin: 0;
  font-family: var(--type-section-title-family);
  font-size: var(--type-section-title-size);
  line-height: var(--type-section-title-line-height);
  font-weight: var(--type-section-title-weight);
  color: var(--text-primary);
}

.classInfoPosterAction {
  flex-shrink: 0;
}

.classInfoPicture {
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
}

.classInfoPosterImage {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border-light);
  border-radius: inherit;
  background: var(--surface-field);
}

.infoPosterImageOpenFrame {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  text-align: inherit;
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}

.infoPosterImageOpenFrame .classInfoPicture {
  pointer-events: none;
}

.infoPosterImageOpenFrame:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

.levelInfoPosterList {
  gap: var(--space-3);
}

.levelInfoCarouselFrame {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: 8px;
  cursor: zoom-in;
  touch-action: pan-y;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.levelInfoCarouselFrame .classInfoPicture {
  pointer-events: none;
}

.levelInfoPosterImage {
  -webkit-user-drag: none;
}

.levelInfoCarouselArrow {
  position: absolute;
  z-index: 2;
  top: 50%;
  width: 44px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  transform: translateY(-50%);
}

.levelInfoCarouselArrow::before {
  position: absolute;
  inset: 0;
  content: '';
}

.levelInfoCarouselArrow::after {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 0;
  width: 24px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.46);
  box-shadow:
    0 8px 20px rgba(8, 10, 14, 0.14),
    var(--glass-inset-shadow);
  backdrop-filter: var(--glass-filter-soft);
  -webkit-backdrop-filter: var(--glass-filter-soft);
  content: '';
}

.levelInfoCarouselArrow svg {
  position: relative;
  z-index: 1;
  pointer-events: none;
}

.levelInfoCarouselArrow:hover,
.levelInfoCarouselArrow:focus-visible {
  color: var(--text-primary);
}

.levelInfoCarouselArrow:hover::after,
.levelInfoCarouselArrow:focus-visible::after {
  background: rgba(255, 255, 255, 0.66);
}

.levelInfoCarouselArrow:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

.levelInfoCarouselArrowPrevious {
  left: 0;
}

.levelInfoCarouselArrowPrevious::after {
  left: 0;
  border-left: 0;
  border-radius: 0 8px 8px 0;
}

.levelInfoCarouselArrowPrevious svg {
  transform: translateX(-10px);
}

.levelInfoCarouselArrowNext {
  right: 0;
}

.levelInfoCarouselArrowNext::after {
  right: 0;
  border-right: 0;
  border-radius: 8px 0 0 8px;
}

.levelInfoCarouselArrowNext svg {
  transform: translateX(10px);
}

.levelInfoCarouselMenu {
  display: flex;
  justify-content: center;
  gap: 9px;
  padding-right: 14px;
  padding-left: 14px;
}

.levelInfoCarouselDot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 1px solid rgba(8, 10, 14, 0.42);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.28),
    0 2px 8px rgba(8, 10, 14, 0.16);
  cursor: pointer;
  opacity: 1;
}

.levelInfoCarouselDotActive {
  width: 24px;
  border-color: var(--text-primary);
  background: var(--text-primary);
  box-shadow: 0 2px 8px rgba(8, 10, 14, 0.24);
}

.detailOverlayBackdrop.infoPosterImageViewerBackdrop {
  align-items: stretch;
  padding: var(--safe-area-top, env(safe-area-inset-top, 0px)) 0
    var(--safe-area-bottom, env(safe-area-inset-bottom, 0px));
}

.detailOverlayCard.infoPosterImageViewerPanel {
  width: 100%;
  max-width: none;
  height: calc(
    100svh - var(--safe-area-top, env(safe-area-inset-top, 0px)) -
      var(--safe-area-bottom, env(safe-area-inset-bottom, 0px))
  );
  max-height: calc(
    100svh - var(--safe-area-top, env(safe-area-inset-top, 0px)) -
      var(--safe-area-bottom, env(safe-area-inset-bottom, 0px))
  );
  overflow: hidden;
  border-radius: 0;
  background: rgba(8, 10, 14, 0.9);
}

.infoPosterImageViewerPanel .detailOverlayClose {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  margin: 0;
  padding: 0;
  border-color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.94);
  color: var(--text-primary);
  z-index: 3;
}

.infoPosterImageViewerPanel .detailOverlayClose:hover,
.infoPosterImageViewerPanel .detailOverlayClose:focus-visible {
  border-color: #ffffff;
  background: #ffffff;
}

.infoPosterImageViewerPanel .detailOverlayClose svg {
  width: 26px;
  height: 26px;
}

.infoPosterImageViewerHeader {
  flex: 0 0 auto;
  padding: 16px 84px 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(8, 10, 14, 0.82);
}

.infoPosterImageViewerTitle {
  margin: 0;
  font-family: var(--type-section-title-family);
  font-size: var(--font-size-400);
  line-height: var(--line-height-ui);
  font-weight: var(--font-weight-semibold);
  color: #ffffff;
}

.infoPosterImageViewerViewport {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 12px;
  background: rgba(8, 10, 14, 0.94);
  touch-action: pan-x pan-y pinch-zoom;
}

.infoPosterImageViewerImage {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 8px;
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.45);
}

.glanceRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--border-light);
}

.glanceRow:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.glanceRow:last-of-type {
  padding-bottom: 0;
}

.glanceLabel {
  font-family: var(--type-caption-family);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line-height);
  font-weight: var(--type-caption-weight);
  color: var(--text-secondary);
}

.glanceValue {
  font-family: var(--type-body-family);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line-height);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.profileSummaryCard {
  gap: var(--space-3);
}

.profileSummaryList {
  margin: 0;
  padding: 0;
}

.profileSummaryList .glanceValue {
  margin: 0;
  text-align: right;
}

.accountSettingsList {
  margin-top: var(--space-3);
}

.privacyReadinessGroups {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.privacyReadinessGroup {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--border-light);
}

.privacyReadinessGroup:first-child {
  padding-top: 0;
  border-top: 0;
}

.privacyReadinessList {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
  color: var(--text-primary);
}

.reviewCaseActions {
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px;
}

.accountSettingValue {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px 12px;
}

.profileAchievementsSection {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.profileAchievementsGroup {
  border-color: var(--border-surface-strong);
  background: var(--surface-dialog-panel);
  box-shadow: var(--shadow-strong), var(--glass-inset-shadow);
  backdrop-filter: var(--glass-filter-content);
  -webkit-backdrop-filter: var(--glass-filter-content);
}

.profileAchievementsGroup .profileAchievementsSection {
  margin-top: 0;
  padding-top: var(--space-1);
}

.profileLeadGroup .pageHeaderInGroup {
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-light);
}

.profileAchievementGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  align-items: stretch;
  gap: var(--space-4) var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.profileAchievementGridItem {
  min-width: 0;
  display: grid;
}

.profileAchievementGridItem:only-child {
  grid-column: 1 / -1;
  width: min(100%, 320px);
  justify-self: center;
}

.profileAchievementCard {
  --achievement-visual-max-size: clamp(116px, 36vw, 164px);
  --achievement-badge-visual-max-size: clamp(108px, 32vw, 144px);
  --achievement-certificate-visual-max-height: clamp(76px, 24vw, 104px);
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100%;
  min-height: 168px;
  min-width: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 5px;
  padding: 9px 7px 10px;
  overflow: visible;
  border: 1px solid transparent;
  border-radius: 18px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: pointer;
  box-shadow: none;
  transition: transform 140ms ease;
}

.profileAchievementCard:hover,
.profileAchievementCard:focus-visible {
  transform: translateY(-1px);
}

.profileAchievementCard:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 6px;
}

.profileAchievementCard:hover .achievementVisualImage,
.profileAchievementCard:focus-visible .achievementVisualImage {
  transform: scale(1.025);
}

.profileAchievementCardNew {
  border-color: rgba(56, 189, 248, 0.86);
  background: rgba(255, 255, 255, 0.16);
  color: var(--text-primary);
  box-shadow:
    0 0 0 3px rgba(56, 189, 248, 0.24),
    0 14px 26px rgba(8, 10, 14, 0.1),
    var(--glass-inset-shadow);
}

.profileAchievementPreviewShell {
  position: relative;
  width: min(100%, var(--achievement-visual-max-size, 164px));
  max-height: var(--achievement-visual-max-size, 164px);
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: visible;
  border: 1px solid transparent;
  border-radius: 18px;
  background: transparent;
  transition:
    border-color 140ms ease,
    box-shadow 140ms ease;
}

.profileAchievementCard .profileAchievementPreviewShell {
  place-items: end center;
}

.profileAchievementOpenGlyph {
  position: absolute;
  right: 9px;
  bottom: 9px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  background: var(--surface-overlay-strong);
  color: var(--text-primary);
  box-shadow: 0 8px 18px rgba(8, 10, 14, 0.12), var(--glass-inset-shadow);
  backdrop-filter: var(--glass-filter-soft);
  -webkit-backdrop-filter: var(--glass-filter-soft);
}

.achievementVisualCertificate + .profileAchievementOpenGlyph {
  right: 7%;
  bottom: 16%;
}

.profileAchievementCardBody {
  min-width: 0;
  min-height: 38px;
  display: grid;
  place-items: start center;
  padding: 0 4px;
  overflow: hidden;
}

.profileAchievementCardTitle {
  color: var(--text-primary);
  font-family: var(--type-card-title-family);
  font-size: var(--font-size-400);
  line-height: var(--line-height-ui);
  font-weight: var(--font-weight-semibold);
  text-align: center;
  overflow: hidden;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.profileAchievementDialogPanel {
  width: min(100%, 520px);
  border-radius: 18px;
  overflow: hidden;
}

.profileAchievementDialogMedia {
  width: 100%;
  aspect-ratio: 1 / 1;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(232, 235, 240, 0.86)),
    var(--surface-avatar);
}

.profileAchievementDialogPdf {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: block;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  background: var(--surface-dialog-body);
}

.profileAchievementDialogBody {
  padding-top: 18px;
}

.profileAchievementDialogActions {
  align-items: center;
}

.achievementVisual {
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--accent-strong);
}

.achievementVisualTile {
  width: 100%;
  height: auto;
  max-height: var(--achievement-visual-max-size, 164px);
}

.achievementVisualDetail {
  width: 100%;
  height: 100%;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  background: var(--surface-dialog-body);
}

.achievementVisualHasAsset {
  background: transparent;
}

.achievementVisualDetail.achievementVisualHasAsset {
  border-color: transparent;
  background: transparent;
}

.achievementVisualAdmin {
  width: 100%;
  height: 100%;
}

.achievementVisualImage {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: top center;
  transition: transform 180ms ease;
}

.achievementVisualTile .achievementVisualImage {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: var(--achievement-visual-max-size, 164px);
  object-fit: contain;
  object-position: center center;
}

.profileAchievementCard .achievementVisualTile .achievementVisualImage {
  align-self: end;
  justify-self: center;
}

.achievementVisualTile.achievementVisualCertificate .achievementVisualImage {
  max-width: 96%;
  max-height: var(--achievement-certificate-visual-max-height, 104px);
  border: 0;
  border-radius: 6px;
  box-shadow: none;
}

.achievementVisualDetail .achievementVisualImage {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center center;
}

.achievementVisualDetail.achievementVisualBadge.achievementVisualHasAsset .achievementVisualImage {
  max-width: min(78%, 280px);
  max-height: min(78%, 280px);
  object-fit: contain;
}

.achievementVisualTile.achievementVisualBadge .achievementVisualImage {
  max-width: 88%;
  max-height: var(--achievement-badge-visual-max-size, 144px);
}

.achievementVisualFallback {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.76), rgba(238, 240, 243, 0.9)),
    var(--surface-avatar);
}

.achievementVisualTile.achievementVisualFallback {
  width: min(86%, var(--achievement-badge-visual-max-size, 144px));
  height: auto;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--border-surface-strong);
  border-radius: 999px;
  box-shadow:
    0 12px 22px rgba(8, 10, 14, 0.12),
    var(--glass-inset-shadow);
}

.achievementVisualTile.achievementVisualCertificate.achievementVisualFallback {
  width: min(78%, 128px);
  aspect-ratio: 0.86 / 1;
  border-radius: 16px;
}

.achievementVisualFallback svg {
  width: 34%;
  height: 34%;
  min-width: 30px;
  min-height: 30px;
  max-width: 68px;
  max-height: 68px;
}

.achievementVisualDetail.achievementVisualFallback svg {
  width: 82px;
  height: 82px;
  max-width: 26%;
  max-height: 26%;
}

.achievementHomeNotice {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 14px 16px 15px;
  border: 1px solid rgba(56, 189, 248, 0.42);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(238, 248, 251, 0.7)),
    var(--surface-panel-strong);
  color: inherit;
  text-align: center;
  text-decoration: none;
  box-shadow:
    0 14px 32px rgba(8, 10, 14, 0.09),
    var(--glass-inset-shadow);
  backdrop-filter: var(--glass-filter);
  -webkit-backdrop-filter: var(--glass-filter);
  transition:
    transform 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease;
}

.achievementHomeNotice:hover,
.achievementHomeNotice:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(56, 189, 248, 0.82);
  box-shadow:
    0 18px 38px rgba(8, 10, 14, 0.12),
    0 0 0 2px rgba(56, 189, 248, 0.16),
    var(--glass-inset-shadow);
}

.achievementHomeNotice:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px var(--focus-ring),
    0 18px 38px rgba(8, 10, 14, 0.13),
    var(--glass-inset-shadow);
}

.achievementHomeNoticeAchievement {
  --achievement-visual-max-size: 148px;
  --achievement-badge-visual-max-size: 130px;
  --achievement-certificate-visual-max-height: 104px;
  width: min(100%, 212px);
  display: grid;
  justify-items: center;
  gap: 5px;
}

.achievementHomeNoticeAchievement .profileAchievementPreviewShell {
  place-items: end center;
}

.achievementHomeNoticeAchievement .achievementVisualTile .achievementVisualImage {
  align-self: end;
  justify-self: center;
}

.achievementHomeNoticePreview {
  width: min(100%, var(--achievement-visual-max-size, 148px));
  max-height: var(--achievement-visual-max-size, 148px);
}

.achievementHomeNoticeHeading {
  max-width: min(100%, 260px);
  color: var(--text-primary);
  font-family: var(--type-card-title-family);
  font-size: var(--type-card-title-size);
  line-height: var(--type-card-title-line-height);
  font-weight: var(--type-card-title-weight);
  letter-spacing: var(--type-card-title-tracking);
  overflow-wrap: anywhere;
}

.achievementHomeNoticeTitle {
  max-width: min(100%, 260px);
  color: var(--accent-strong);
  font-family: var(--type-card-title-family);
  font-size: var(--font-size-400);
  line-height: var(--line-height-ui);
  font-weight: var(--font-weight-semibold);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-align: center;
  overflow-wrap: anywhere;
}

.achievementConfetti {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.achievementConfettiPiece {
  position: absolute;
  left: var(--achievement-confetti-origin-x);
  top: var(--achievement-confetti-origin-y);
  width: var(--achievement-confetti-w);
  height: var(--achievement-confetti-h);
  border-radius: var(--achievement-confetti-radius);
  background: var(--achievement-confetti-color);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.38) rotate(0deg);
  transform-origin: center;
  box-shadow: 0 2px 8px rgba(8, 10, 14, 0.16);
  animation: achievementConfettiPop 1580ms cubic-bezier(0.16, 0.82, 0.26, 1) var(--achievement-confetti-delay) both;
  will-change: opacity, transform;
}

@keyframes achievementConfettiPop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.38) rotate(0deg);
  }

  12% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.04) rotate(8deg);
  }

  58% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform:
      translate(
        calc(-50% + var(--achievement-confetti-x)),
        calc(-50% + var(--achievement-confetti-y))
      )
      scale(1)
      rotate(var(--achievement-confetti-r));
  }
}

.adminAchievementSearch {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: end;
}

.adminAchievementUserResults {
  display: grid;
  gap: 8px;
  margin-top: var(--space-3);
}

.adminAchievementUserResults button {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 10px 12px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: var(--surface-field);
  color: var(--text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.adminAchievementUserResults small {
  min-width: 0;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

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

.adminAchievementTitleField {
  grid-column: span 2;
}

.adminAchievementTypeField {
  grid-column: span 2;
}

.adminAchievementTypeControls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  width: min(100%, 360px);
  padding: 4px;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  background: var(--surface-field);
  box-shadow: var(--glass-inset-shadow);
}

.adminAchievementTypeButton {
  min-width: 0;
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--type-control-family);
  font-size: var(--type-control-size);
  line-height: var(--type-control-line-height);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}

.adminAchievementTypeButtonActive {
  background: var(--surface-segment-active);
  color: var(--text-primary);
  box-shadow:
    inset 0 0 0 1px rgba(110, 121, 135, 0.24),
    0 2px 7px rgba(8, 10, 14, 0.06);
}

.adminAchievementTypeButton:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.adminAchievementWideField {
  grid-column: 1 / -1;
}

.adminAchievementActions,
.adminAchievementRowActions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.adminAchievementActions {
  grid-column: 1 / -1;
}

.adminAchievementRows {
  display: grid;
  gap: var(--space-3);
}

.adminAchievementRow {
  min-width: 0;
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: var(--space-3);
  padding: 12px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: var(--surface-panel);
}

.adminAchievementPreview {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
  background: var(--surface-avatar);
}

.adminAchievementPreviewImage {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.adminAchievementPreviewIcon {
  display: grid;
  place-items: center;
  color: var(--text-muted);
}

.adminAchievementRowBody {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.adminAchievementRowHeader {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.adminAchievementRowHeader h3 {
  margin: 0;
  font-family: var(--type-card-title-family);
  font-size: var(--font-size-400);
  line-height: var(--line-height-ui);
  overflow-wrap: anywhere;
}

.adminAchievementClientPreview {
  display: grid;
  grid-template-columns: minmax(0, 164px) minmax(0, 1fr);
  gap: var(--space-3);
  align-items: stretch;
  padding: 12px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: var(--surface-field);
}

.adminAchievementPreviewTile {
  min-width: 0;
  aspect-ratio: 1 / 1;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--border-surface-strong);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(245, 247, 249, 0.88)),
    var(--surface-panel);
  box-shadow: var(--glass-inset-shadow);
}

.adminAchievementPreviewTileVisual {
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.74), rgba(231, 237, 240, 0.86)),
    var(--surface-avatar);
  color: var(--accent-strong);
}

.adminAchievementPreviewTile strong {
  min-width: 0;
  color: var(--text-primary);
  font-family: var(--type-card-title-family);
  font-size: var(--font-size-300);
  line-height: var(--line-height-ui);
  font-weight: var(--font-weight-semibold);
  text-align: center;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.adminAchievementPreviewDetail {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
}

.adminAchievementPreviewDetail strong {
  color: var(--text-primary);
  font-family: var(--type-card-title-family);
  font-size: var(--font-size-500);
  line-height: var(--line-height-ui);
  overflow-wrap: anywhere;
}

.adminAchievementPills {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.adminAchievementMetaLine {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  color: var(--text-secondary);
  font-family: var(--type-caption-family);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line-height);
}

.adminAchievementMetaLine span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.membershipCard {
  gap: var(--space-3);
}

.membershipSummaryBlock {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-light);
}

.membershipCardHeader {
  align-items: flex-start;
}

.membershipTitleWrap {
  min-width: 0;
  flex: 1;
}

.membershipPackageList {
  gap: 8px;
}

.membershipCardAction {
  display: flex;
  justify-content: center;
}

.membershipPackageRow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 10px 0;
  border-top: 1px solid var(--border-light);
}

.membershipPackageRow:first-child {
  border-top: 0;
  padding-top: 0;
}

.membershipPackageRow:last-child {
  padding-bottom: 0;
}

.membershipPackageMeta {
  min-width: 0;
  flex: 1;
}

.membershipPackageName {
  font-family: var(--type-card-title-family);
  font-size: var(--type-body-strong-size);
  line-height: var(--type-body-strong-line-height);
  font-weight: var(--type-body-strong-weight);
}

.membershipPackageLine {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.membershipPackageAside {
  align-items: flex-end;
  text-align: right;
}

.membershipStatusPill {
  background: var(--surface-status-expired);
  border-color: var(--silver-strong);
  color: var(--accent-strong);
}

.packageCategorySection {
  display: block;
}

.topTabNav,
.packageHubTopNav {
  background: var(--nav-surface);
  border-bottom: 1px solid var(--border-light);
  box-shadow: var(--glass-nav-inset-shadow);
  backdrop-filter: var(--glass-filter-nav);
  -webkit-backdrop-filter: var(--glass-filter-nav);
}

.topTabNavInner,
.packageHubTopNavInner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  min-height: 48px;
  padding-left: 0;
  padding-right: 0;
}

.topTabNavItem,
.packageHubTopNavItem {
  position: relative;
  min-width: 0;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--type-label-family);
  font-size: var(--font-size-200);
  line-height: var(--type-label-line-height);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0;
  text-align: center;
  cursor: pointer;
}

.topTabNavBadge {
  min-width: 8px;
  min-height: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 6px;
  border: 1px solid rgba(8, 10, 14, 0.86);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--text-primary);
  font-size: var(--font-size-100);
  line-height: 1;
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-status);
  text-transform: uppercase;
  box-shadow: none;
}

.topTabNavItem::after,
.packageHubTopNavItem::after {
  content: '';
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 2px;
  border-radius: 999px;
  background: transparent;
}

.topTabNavItem:hover,
.topTabNavItem:focus-visible,
.packageHubTopNavItem:hover,
.packageHubTopNavItem:focus-visible {
  color: var(--text-primary);
}

.topTabNavItem:focus-visible,
.packageHubTopNavItem:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px var(--focus-ring);
}

.topTabNavItemActive,
.packageHubTopNavItemActive {
  color: var(--text-primary);
}

.topTabNavItemActive::after,
.packageHubTopNavItemActive::after {
  background: currentColor;
}

.topTabPageContent,
.packagePageContent {
  padding-top: var(--space-5);
}

.packageIntroGroup {
  gap: var(--space-3);
}

.packageIntroNotice.card {
  margin-top: 0;
  background: var(--surface-field);
  box-shadow: var(--glass-inset-shadow);
}

.packageTypeControls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 380px;
  padding: 12px;
  border: 1px solid var(--border-surface);
  border-radius: var(--radius-lg);
  background: var(--surface-panel-muted);
  background-clip: padding-box;
  box-shadow: var(--shadow-soft), var(--glass-inset-shadow);
  backdrop-filter: var(--glass-filter);
  -webkit-backdrop-filter: var(--glass-filter);
}

.packageIntroGroup .packageTypeControls {
  padding: var(--space-3) 0 0;
  border: 0;
  border-top: 1px solid var(--border-light);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.packageCategoryHeader {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border-surface);
  border-radius: var(--radius-lg);
  background: var(--surface-panel-muted);
  background-clip: padding-box;
  box-shadow: var(--shadow-soft), var(--glass-inset-shadow);
  backdrop-filter: var(--glass-filter);
  -webkit-backdrop-filter: var(--glass-filter);
}

.packageCategorySection.pageGroup {
  gap: 0;
}

.packageCategorySection.pageGroup .packageCategoryHeader {
  margin-bottom: 0;
  padding: 0 0 10px;
  border: 0;
  border-bottom: 1px solid var(--border-light);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.packageCategoryHeaderAccordion {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.packageCategoryHeaderText {
  min-width: 0;
}

.packageCategoryTagline {
  max-width: 48ch;
  color: var(--text-secondary);
}

.packageSectionLabelStrong {
  font-family: var(--type-card-title-family);
  font-size: var(--type-card-title-size);
  line-height: var(--type-card-title-line-height);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0;
  color: var(--text-primary);
}

.packageCategoryToggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  background: var(--card-strong);
  color: var(--text-secondary);
  cursor: pointer;
}

.packageCategoryToggle:hover,
.packageCategoryToggle:focus-visible {
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.packageCategoryToggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.packageCategoryToggle svg {
  transition: transform 160ms ease;
}

.packageCategoryToggle[aria-expanded='true'] svg {
  transform: rotate(180deg);
}

.packageOptionsList {
  overflow: hidden;
  padding: 0;
  border-radius: 8px;
  background: var(--surface-panel-strong);
  border-color: var(--border-light);
  box-shadow: var(--shadow-soft), var(--glass-inset-shadow);
  backdrop-filter: var(--glass-filter);
  -webkit-backdrop-filter: var(--glass-filter);
}

.packageCategorySection.pageGroup .packageOptionsList.card {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.packageOptionRow {
  display: grid;
  grid-template-columns: minmax(88px, 1fr) auto minmax(136px, auto);
  grid-template-areas: "info badge purchase";
  align-items: center;
  min-height: 74px;
  padding: 11px 12px;
  gap: 4px 10px;
  border-top: 1px solid var(--border-light);
}

.packageOptionRow:first-child {
  border-top: 0;
}

.packageOptionRowHighlighted {
  background: var(--surface-field-strong);
  box-shadow: inset 3px 0 0 var(--accent-strong);
}

.packageOptionInfo {
  grid-area: info;
  min-width: 0;
}

.packageOptionClasses {
  font-family: var(--type-card-title-family);
  font-size: var(--font-size-500);
  line-height: var(--line-height-heading);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0;
  color: var(--text-primary);
}

.packageOptionDuration {
  margin-top: 2px;
  font-family: var(--type-caption-family);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line-height);
  font-weight: var(--type-caption-weight);
  letter-spacing: 0;
  color: var(--text-secondary);
}

.packageValueBadge {
  grid-area: badge;
  justify-self: start;
  align-self: center;
  display: inline-flex;
  align-items: center;
  min-width: 0;
  width: fit-content;
  padding: 2px 8px;
  border: 1px solid var(--silver);
  border-radius: 999px;
  background: var(--surface-panel-muted);
  color: var(--text-primary);
  font-family: var(--type-label-family);
  font-size: 11px;
  line-height: 1.35;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0;
  white-space: nowrap;
}

.packageValueBadgeSilver {
  background: var(--surface-metal);
  border-color: var(--silver-strong);
}

.packageValueBadgeFeatured {
  background: var(--button-primary-bg);
  border-color: var(--button-primary-border);
  color: var(--button-primary-text);
}

.packageOptionPurchase {
  grid-area: purchase;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}

.packagePriceBlock {
  min-width: 82px;
  text-align: right;
}

.packageOptionPrice {
  font-family: var(--type-card-title-family);
  font-size: var(--font-size-400);
  line-height: 1.2;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0;
  color: var(--text-primary);
  white-space: nowrap;
}

.packageOptionPerClass {
  margin-top: 2px;
  font-family: var(--type-caption-family);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line-height);
  font-weight: var(--type-caption-weight);
  letter-spacing: 0;
  color: var(--text-muted);
  white-space: nowrap;
}

.packageBuyButton {
  min-width: 54px;
  min-height: 34px;
  padding: 0 13px;
  font-size: var(--font-size-100);
  line-height: 1.25;
  letter-spacing: 0;
  white-space: nowrap;
}

.purchaseHistorySection {
  display: block;
}

.purchaseHistoryList {
  overflow: hidden;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: var(--card-strong);
  box-shadow: 0 12px 28px rgba(8, 10, 14, 0.07);
  backdrop-filter: var(--glass-filter-content);
  -webkit-backdrop-filter: var(--glass-filter-content);
}

.purchaseHistoryRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  min-height: 78px;
  padding: 12px;
  border-top: 1px solid var(--border-light);
}

.purchaseHistoryRow:first-child {
  border-top: 0;
}

.purchaseHistoryMain,
.purchaseHistoryStatus {
  min-width: 0;
}

.purchaseHistoryTitle {
  font-family: var(--type-card-title-family);
  font-size: var(--font-size-300);
  line-height: var(--line-height-heading);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}

.purchaseHistoryMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 3px;
  color: var(--text-secondary);
}

.purchaseHistoryStatus {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}

.purchaseHistoryAmount {
  font-family: var(--type-card-title-family);
  font-size: var(--font-size-300);
  line-height: 1.2;
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  white-space: nowrap;
}

.purchaseHistoryPills {
  justify-content: flex-end;
}

.purchaseHistoryAction {
  display: flex;
  justify-content: flex-end;
  text-decoration: none;
}

@media (min-width: 520px) {
  .packageOptionRow {
    grid-template-columns: minmax(116px, 1fr) auto minmax(166px, auto);
    min-height: 72px;
    column-gap: 14px;
  }
}

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

.profileLogoutCard {
  background: var(--surface-panel-muted);
}

.paymentStatusCard {
  background: var(--surface-panel-strong);
}

.bookingCard {
  background: var(--surface-panel);
  border-color: var(--border-surface-subtle);
}

.bookingPaymentNotice {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--border-status-review);
  border-radius: var(--radius-sm);
  background: var(--surface-status-review);
  color: var(--text-status-review);
}

.loginPageShell {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  padding-top: 32px;
  padding-bottom: 32px;
}

.loginBrandBlock {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: center;
}

.loginBrand {
  font-family: var(--type-label-family);
  font-size: var(--type-brand-kicker-size);
  line-height: var(--type-label-line-height);
  font-weight: var(--type-brand-kicker-weight);
  letter-spacing: var(--type-brand-kicker-tracking);
  color: var(--accent-soft);
}

.loginTitle {
  font-family: var(--type-page-title-family);
  font-size: var(--font-size-950);
  line-height: var(--line-height-tight);
  letter-spacing: var(--type-page-title-tracking);
  font-weight: var(--type-page-title-weight);
}

.loginCaption {
  max-width: 34ch;
  margin: 0 auto;
}

.loginCard {
  background: var(--surface-panel-strong);
}

.authConfirmStatus {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.authConfirmIcon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid var(--border-surface);
  border-radius: 999px;
}

.authConfirmStatus-neutral .authConfirmIcon {
  background: var(--surface-status-pending);
  border-color: var(--border-status-pending);
  color: var(--text-status-pending);
}

.authConfirmStatus-success .authConfirmIcon {
  background: var(--surface-status-paid);
  border-color: var(--border-status-paid);
  color: var(--text-status-paid);
}

.authConfirmStatus-error .authConfirmIcon {
  background: var(--surface-status-failed);
  border-color: var(--border-status-failed);
  color: var(--text-status-failed);
}

.authConfirmCopy {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.authConfirmActions {
  display: grid;
  margin-top: var(--space-4);
}

.authConfirmSpinner {
  animation: actionDialogSpin 1s linear infinite;
}

.authSubmitGroup,
.authModeActions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.authSubmitGroup {
  margin-top: var(--space-2);
}

.authModeActions {
  margin-top: var(--space-2);
}

.authVerificationHint {
  margin: 0;
  text-align: center;
}

.loginContinueGuestLink {
  align-self: center;
}

.signupLiabilityWaiverField {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  border: 1px solid var(--border-surface);
  border-radius: 10px;
  background: var(--surface-field);
}

.signupLiabilityWaiverCheckbox {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.signupLiabilityWaiverCheckbox:disabled {
  cursor: not-allowed;
}

.signupLiabilityWaiverText {
  margin: 0;
  min-width: 0;
  color: var(--text-primary);
  font-family: var(--type-caption-family);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line-height);
}

.signupLiabilityWaiverLink {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--text-action);
  font: inherit;
  font-weight: var(--font-weight-semibold);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.signupLiabilityWaiverLink:hover:not(:disabled),
.signupLiabilityWaiverLink:focus-visible:not(:disabled) {
  color: var(--text-action-hover);
}

.signupLiabilityWaiverLink:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

.signupLiabilityWaiverLink:disabled {
  color: var(--text-action-disabled);
  cursor: not-allowed;
}

.liabilityWaiverOverlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(16px + var(--safe-area-top, env(safe-area-inset-top, 0px))) 16px
    calc(16px + var(--safe-area-bottom, env(safe-area-inset-bottom, 0px)));
  background: rgba(24, 25, 27, 0.42);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.liabilityWaiverDialog {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--space-4);
  width: min(100%, 560px);
  max-height: calc(
    100svh - 32px - var(--safe-area-top, env(safe-area-inset-top, 0px)) -
      var(--safe-area-bottom, env(safe-area-inset-bottom, 0px))
  );
  overflow: hidden;
  background: var(--surface-panel-strong);
  background-clip: padding-box;
  box-shadow: var(--shadow-strong), var(--glass-inset-shadow);
  backdrop-filter: var(--glass-filter);
  -webkit-backdrop-filter: var(--glass-filter);
}

.liabilityWaiverDialogTop {
  display: grid;
  gap: var(--space-3);
}

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

.liabilityWaiverDialogTitle {
  font-size: var(--font-size-500);
}

.liabilityWaiverDialogClose {
  display: inline-flex;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}

.liabilityWaiverDialogClose:hover,
.liabilityWaiverDialogClose:focus-visible {
  border-color: var(--border-surface);
  background: var(--surface-field);
  color: var(--text-primary);
}

.liabilityWaiverDialogClose:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.liabilityWaiverLanguageTabs {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  padding: 3px;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  background: var(--surface-field);
}

.liabilityWaiverLanguageTab {
  min-width: 86px;
  min-height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--type-control-family);
  font-size: var(--font-size-200);
  line-height: var(--line-height-ui);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0;
  cursor: pointer;
}

.liabilityWaiverLanguageTabActive {
  background: var(--surface-segment-active);
  color: var(--text-segment-active);
  box-shadow: inset 0 0 0 1px rgba(110, 121, 135, 0.28);
}

.liabilityWaiverLanguageTab:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px var(--focus-ring),
    inset 0 0 0 1px var(--border-field-focus);
}

.liabilityWaiverDialogBody {
  min-height: 180px;
  overflow-y: auto;
  padding: 12px 14px;
  border: 1px solid var(--border-surface);
  border-radius: 10px;
  background: var(--surface-field);
  color: var(--text-primary);
}

.liabilityWaiverText {
  display: grid;
  gap: var(--space-3);
  font-family: var(--type-body-family);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line-height);
}

.liabilityWaiverText p {
  margin: 0;
}

.liabilityWaiverDialogActions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-3);
}

.installPageShell {
  min-height: 100svh;
  padding-top: 34px;
  padding-bottom: 34px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-4);
}

.installHero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  text-align: center;
  padding: 28px 18px;
  border: 1px solid var(--border-surface-strong);
  border-radius: var(--radius-xl);
  background: var(--surface-metal);
  box-shadow: var(--shadow-strong);
}

.installHeroCompact {
  gap: var(--space-4);
}

.installLogo {
  width: min(78vw, 280px);
  height: auto;
  object-fit: contain;
}

.installHeroCopy {
  align-items: center;
}

.installTitle {
  max-width: 13ch;
  font-family: var(--type-page-title-family);
  font-size: var(--font-size-950);
  line-height: var(--line-height-tight);
  font-weight: var(--type-page-title-weight);
  letter-spacing: var(--type-page-title-tracking);
  color: var(--text-primary);
}

.installBody {
  max-width: 36ch;
  font-family: var(--type-body-family);
  font-size: var(--font-size-350);
  line-height: var(--line-height-copy);
  color: var(--text-secondary);
}

.installPrimaryBlock {
  width: min(100%, 360px);
  align-items: center;
}

.installPrimaryButton {
  width: 100%;
  min-height: 54px;
  font-size: var(--font-size-400);
}

.installWideAction {
  width: min(100%, 320px);
}

.installSupportCard {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: flex-start;
  background: var(--surface-panel-strong);
}

.installSupportIcon,
.installStepIcon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 14px;
  border: 1px solid var(--border-highlight);
  background: var(--surface-highlight);
  color: var(--accent-strong);
}

.installSteps {
  display: grid;
  gap: var(--space-3);
}

.installStep {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  text-align: left;
}

.installStepTitle {
  font-family: var(--type-card-title-family);
  font-size: var(--font-size-400);
  line-height: var(--type-card-title-line-height);
  font-weight: var(--type-card-title-weight);
  letter-spacing: var(--type-card-title-tracking);
  color: var(--text-primary);
}

.installFooterLinks {
  display: flex;
  justify-content: center;
}

.reviewQueueItem {
  background: var(--surface-panel);
  border-color: var(--border-surface-subtle);
}

.reviewQueueHeader {
  align-items: center;
}

.adminReviewQueueSummaryRow {
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.reviewQueueCaseGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
}

.reviewQueueCaseBlock {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.reviewQueueCaseBlockPrimary {
  padding-right: var(--space-3);
  border-right: 1px solid var(--border-surface-subtle);
}

.reviewQueueItemTitle {
  margin: 0;
  font-family: var(--type-card-title-family);
  font-size: var(--font-size-400);
  line-height: var(--type-card-title-line-height);
  font-weight: var(--type-card-title-weight);
  letter-spacing: var(--type-card-title-tracking);
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.reviewQueueFieldList {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.reviewQueueField {
  color: var(--text-secondary);
  font-family: var(--type-caption-family);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line-height);
  font-weight: var(--type-caption-weight);
  letter-spacing: var(--type-caption-tracking);
  overflow-wrap: anywhere;
}

.reviewQueueIssueBlock {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-surface-subtle);
}

.reviewQueueIssueText {
  margin: 0;
  color: var(--text-primary);
}

.reviewQueueFactList {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.reviewQueueFact {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 4px 9px;
  border: 1px solid var(--border-surface-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-field);
  color: var(--text-secondary);
  font-family: var(--type-label-family);
  font-size: var(--type-label-size);
  line-height: var(--type-label-line-height);
  font-weight: var(--type-label-weight);
  letter-spacing: var(--type-label-tracking);
  overflow-wrap: anywhere;
}

.reviewDetailGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--space-3);
  align-items: start;
}

.reviewDetailSection {
  min-width: 0;
}

.reviewDetailFullWidth {
  grid-column: 1 / -1;
}

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

.reviewCaseSummaryList {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0;
}

.reviewCaseSummaryItem {
  display: flex;
  gap: 5px;
  align-items: baseline;
}

.reviewCaseSummaryItem dt {
  color: var(--text-muted);
  font-family: var(--type-label-family);
  font-size: var(--type-label-size);
  line-height: var(--type-label-line-height);
  font-weight: var(--type-label-weight);
  letter-spacing: var(--type-label-tracking);
}

.reviewCaseSummaryItem dd {
  margin: 0;
  color: var(--text-primary);
  font-family: var(--type-caption-family);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line-height);
  font-weight: var(--type-caption-weight);
  letter-spacing: var(--type-caption-tracking);
}

.reviewCaseLayout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
  gap: var(--space-3);
  align-items: start;
}

.reviewCasePrimary,
.reviewCaseAside {
  min-width: 0;
}

.reviewCaseIssueCard {
  background: var(--surface-metal);
  border-color: var(--border-surface-strong);
}

.reviewCaseSectionLead {
  margin: 0;
  font-family: var(--type-card-title-family);
  font-size: var(--font-size-500);
  line-height: var(--type-card-title-line-height);
  font-weight: var(--type-card-title-weight);
  letter-spacing: var(--type-card-title-tracking);
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.reviewDetailList {
  display: grid;
  margin: 0;
}

.reviewDetailRow {
  display: grid;
  grid-template-columns: minmax(124px, 0.36fr) minmax(0, 1fr);
  gap: var(--space-3);
  padding: 10px 0;
  border-top: 1px solid var(--border-surface-subtle);
}

.reviewDetailRow:first-child {
  border-top: 0;
}

.reviewDetailRow dt {
  color: var(--text-muted);
  font-family: var(--type-label-family);
  font-size: var(--type-label-size);
  line-height: var(--type-label-line-height);
  font-weight: var(--type-label-weight);
  letter-spacing: var(--type-label-tracking);
}

.reviewDetailRow dd {
  margin: 0;
  color: var(--text-primary);
  font-family: var(--type-body-family);
  font-size: var(--type-body-size);
  line-height: var(--line-height-body);
  font-weight: var(--type-body-weight);
  letter-spacing: var(--type-body-tracking);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

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

.reviewPayloadDisclosure summary {
  cursor: pointer;
  color: var(--text-primary);
  font-family: var(--type-card-title-family);
  font-size: var(--font-size-400);
  line-height: var(--type-card-title-line-height);
  font-weight: var(--type-card-title-weight);
  letter-spacing: var(--type-card-title-tracking);
}

.reviewPayloadBlock {
  max-height: 420px;
  margin: 0;
  padding: 12px;
  overflow: auto;
  border: 1px solid var(--border-surface-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-field);
  color: var(--text-primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.startupShell {
  min-height: 100svh;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: end center;
  padding: calc(24px + var(--safe-area-top, env(safe-area-inset-top, 0px))) 16px
    calc(clamp(138px, 18vh, 174px) + var(--safe-area-bottom, env(safe-area-inset-bottom, 0px)));
  background: var(--surface-startup-photo-fallback);
  color: var(--text-startup-primary);
}

.startupPhotoBackdrop,
.startupScrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.startupPhotoBackdrop {
  z-index: 0;
  display: block;
  overflow: hidden;
  background: var(--surface-startup-photo-fallback);
}

.startupPhotoImage {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: saturate(0.96) contrast(1.02);
}

.startupScrim {
  z-index: 1;
  background: var(--surface-startup-scrim);
}

.startupStatusDock {
  position: relative;
  z-index: 2;
  width: min(clamp(260px, 68vw, 300px), calc(100vw - 28px));
  max-width: 100%;
  max-height: calc(
    100svh - 48px - var(--safe-area-top, env(safe-area-inset-top, 0px)) -
      var(--safe-area-bottom, env(safe-area-inset-bottom, 0px))
  );
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 18px;
  text-align: center;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--border-startup-dock);
  border-radius: 8px;
  background: var(--surface-startup-dock);
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.startupShellError .startupStatusDock {
  width: min(clamp(260px, 68vw, 300px), calc(100vw - 28px));
}

.startupWordmark {
  font-family: var(--font-family-brand);
  font-size: var(--type-brand-wordmark-size);
  line-height: var(--type-brand-wordmark-line-height);
  font-weight: var(--type-brand-wordmark-weight);
  letter-spacing: var(--type-brand-wordmark-tracking);
  color: var(--accent-strong);
  text-shadow: var(--shadow-wordmark);
}

.startupLogoImage {
  display: block;
  width: min(84vw, 360px);
  height: auto;
  object-fit: contain;
}

.startupStatusBlock {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  min-width: 0;
}

.startupStatusText {
  max-width: 28ch;
  font-family: var(--type-body-family);
  font-size: var(--font-size-400);
  line-height: var(--line-height-body);
  letter-spacing: var(--type-body-tracking);
  font-weight: var(--font-weight-medium);
  color: var(--text-startup-primary);
  overflow-wrap: anywhere;
}

.startupDetail {
  max-width: 34ch;
  font-family: var(--type-body-family);
  font-size: var(--font-size-300);
  line-height: var(--line-height-body-relaxed);
  font-weight: var(--type-body-weight);
  letter-spacing: var(--type-body-tracking);
  color: var(--text-startup-secondary);
  overflow-wrap: anywhere;
}

.startupProgressBlock {
  width: 100%;
  max-width: 300px;
  display: flex;
  align-items: stretch;
}

.startupProgressTrack {
  width: 100%;
  height: 4px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-startup-progress-track);
}

.startupProgressBar {
  width: 44%;
  height: 100%;
  border-radius: inherit;
  background: var(--surface-startup-progress-bar);
  animation: startupSweep 1.1s ease-in-out infinite;
}

.startupProgressCaption {
  font-family: var(--type-label-family);
  font-size: 11px;
  line-height: var(--type-label-line-height);
  letter-spacing: var(--tracking-overline);
  font-weight: var(--type-label-weight);
  text-transform: uppercase;
  color: var(--text-startup-muted);
}

.startupErrorBlock {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

.startupErrorTitle {
  font-family: var(--type-label-family);
  font-size: var(--font-size-200);
  line-height: var(--type-label-line-height);
  text-transform: uppercase;
  letter-spacing: var(--tracking-overline);
  font-weight: var(--font-weight-semibold);
  color: var(--text-startup-error);
  overflow-wrap: anywhere;
}

.startupErrorCode {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  line-height: var(--type-label-line-height);
  letter-spacing: 0;
  font-weight: var(--font-weight-medium);
  color: var(--text-startup-muted);
  overflow-wrap: anywhere;
}

.startupErrorBlock .btn {
  width: 100%;
  min-height: var(--startup-support-min-height);
  padding: 0 18px;
  font-size: 15px;
}

.startupErrorBlock > .btnPrimary {
  border-color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.94);
  color: var(--surface-startup-photo-fallback);
}

.startupErrorBlock > .btnPrimary:hover:not(:disabled),
.startupErrorBlock > .btnPrimary:focus-visible,
.startupErrorBlock > .btnPrimary:active:not(:disabled) {
  border-color: #ffffff;
  background: #ffffff;
  color: var(--surface-startup-photo-fallback);
  box-shadow: 0 0 0 3px rgba(218, 181, 124, 0.28);
}

.startupContactAction {
  width: 100%;
  align-items: stretch;
  gap: var(--space-2);
}

.startupContactAction .contactAdminPrimaryLink {
  width: 100%;
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-startup-primary);
}

.startupContactAction .contactAdminPrimaryLink:hover {
  border-color: rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.16);
}

.startupContactAction .contactAdminMoreOptions {
  color: var(--text-startup-secondary);
}

.startupContactAction .contactAdminMoreOptions summary {
  color: var(--text-startup-secondary);
}

.startupContactAction .contactAdminSecondaryLink {
  color: var(--text-startup-primary);
}

.startupContactAction .caption,
.startupContactAction .smallLabel,
.startupContactAction .contactAdminEmailNote {
  color: var(--text-startup-muted);
}

.startupContactAction .contactAdminLocationOption {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-startup-primary);
}

.startupContactAction .contactAdminLocationOptionActive {
  border-color: rgba(255, 255, 255, 0.38);
  background: rgba(255, 255, 255, 0.2);
}

@media (min-aspect-ratio: 3 / 4) {
  .startupPhotoImage {
    object-fit: contain;
    object-position: center center;
  }
}

.adminHeroCard {
  background: var(--surface-metal);
  border-color: var(--border-surface-strong);
}

.adminShell .card,
.adminShell .row,
.adminShell .surfaceHeaderRow {
  min-width: 0;
  max-width: 100%;
}

.adminShell .card {
  background: var(--surface-admin-card);
  border-color: var(--border-admin-surface);
  box-shadow: var(--shadow-admin-soft);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.adminShell .surfaceFinishSilver {
  background: var(--surface-admin-card-strong);
  border-color: var(--border-admin-surface-strong);
}

.adminSurfaceCard {
  background: var(--surface-panel);
  border-color: var(--border-surface-emphasis);
}

.adminShell .adminHeroCard {
  background: var(--surface-admin-card-strong);
  border-color: var(--border-admin-surface-strong);
  box-shadow: var(--shadow-admin-soft);
}

.adminShell .adminSurfaceCard {
  background: var(--surface-admin-card);
  border-color: var(--border-admin-surface);
}

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

.adminStatCard {
  min-height: 132px;
  justify-content: space-between;
}

.adminShell .adminStatCard {
  background: var(--surface-admin-card-strong);
  border-color: var(--border-admin-surface);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}

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

.adminSignalCard {
  min-height: 118px;
  justify-content: space-between;
}

.adminShell .adminSignalCard {
  background: var(--surface-admin-card-strong);
  border-color: var(--border-status-review);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.07);
}

.adminShell .adminIntroOfferGrid .card {
  background: var(--surface-admin-card-strong);
}

.adminShell .reviewQueueItem,
.adminShell .reviewDetailSection,
.adminShell .adminContentItem,
.adminShell .adminAchievementRow {
  background: var(--surface-admin-card-strong);
  border-color: var(--border-admin-surface);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.adminShell .reviewCaseIssueCard {
  background: var(--surface-admin-card-muted);
  border-color: var(--border-status-review);
}

.adminShell .adminProfileSyncRows,
.adminShell .adminLockerRows {
  border-color: var(--border-admin-surface);
  background: var(--surface-admin-card-strong);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
}

.adminShell .adminProfileSyncRow,
.adminShell .adminLockerRow {
  background: var(--surface-admin-card-strong);
  border-color: var(--border-light);
  box-shadow: none;
}

.adminShell .adminProfileSyncHeader,
.adminShell .adminLockerHeader {
  background: var(--surface-admin-field-muted);
  color: var(--text-secondary);
}

.adminShell .adminContentMetaGrid p,
.adminShell .adminAchievementClientPreview,
.adminShell .adminLockerFilterPanel,
.adminShell .adminLockerActionGroup,
.adminShell .adminLockerUserChoice {
  background: var(--surface-admin-field-muted);
  border-color: var(--border-light);
}

.adminIntroOfferHeader {
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

.adminIntroOfferGrid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-3);
}

.adminActionRow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.skillsProgressionPassportHeader {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  padding-top: var(--space-1);
  padding-bottom: var(--space-2);
  text-align: center;
}

.skillsProgressionPassportTitle {
  margin: 0;
  color: var(--text-primary);
  font-family: var(--type-display-family);
  font-size: var(--font-size-800);
  line-height: var(--line-height-heading);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0;
}

.skillsProgressionViewSwitch {
  display: flex;
  width: 100%;
  justify-content: center;
}

.skillsProgressionViewSwitchTrack {
  display: inline-grid;
  min-width: min(100%, 356px);
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  background: var(--surface-field);
}

.skillsProgressionViewSwitchItem {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--text-secondary);
  font-family: var(--type-control-family);
  font-size: var(--font-size-200);
  line-height: var(--line-height-ui);
  font-weight: var(--font-weight-semibold);
  text-align: center;
  text-decoration: none;
  transition:
    background-color 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease;
}

.skillsProgressionViewSwitchItem:hover,
.skillsProgressionViewSwitchItem:focus-visible {
  color: var(--text-primary);
}

.skillsProgressionViewSwitchItemActive {
  background: var(--surface-panel);
  color: var(--text-primary);
  box-shadow: var(--shadow-soft), var(--glass-inset-shadow);
  backdrop-filter: var(--glass-filter-soft);
  -webkit-backdrop-filter: var(--glass-filter-soft);
}

.skillsProgressionViewSwitchItem:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.skillsProgressionViewSwitchItemActive:focus-visible {
  box-shadow:
    var(--shadow-soft),
    var(--glass-inset-shadow),
    0 0 0 3px var(--focus-ring);
}

.skillsProgressionContentIndex {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: 10px 0 12px;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}

.skillsProgressionContentIndex > span {
  color: var(--text-muted);
  font-family: var(--type-label-family);
  font-size: var(--font-size-100);
  line-height: var(--line-height-ui);
  font-weight: var(--font-weight-semibold);
}

.skillsProgressionDisciplineFilter {
  position: relative;
  flex: 1 1 260px;
  min-width: 0;
  max-width: 420px;
}

.skillsProgressionDisciplineFilterTrigger {
  width: 100%;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 0 12px 0 14px;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  background: var(--surface-field);
  color: var(--text-primary);
  font-family: var(--type-control-family);
  font-size: var(--font-size-200);
  line-height: var(--line-height-ui);
  font-weight: var(--font-weight-semibold);
  text-align: left;
  cursor: pointer;
}

.skillsProgressionDisciplineFilterTrigger:hover,
.skillsProgressionDisciplineFilterTrigger:focus-visible {
  border-color: var(--border-field-hover);
  background: var(--surface-panel);
}

.skillsProgressionDisciplineFilterTrigger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.skillsProgressionDisciplineFilterTrigger:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.skillsProgressionDisciplineFilterChevron {
  flex: 0 0 auto;
  color: var(--text-secondary);
  transform: rotate(0deg);
  transition: transform 140ms ease;
}

.skillsProgressionDisciplineFilterChevronOpen {
  transform: rotate(180deg);
}

.skillsProgressionDisciplineFilterPanel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 20;
  width: 100%;
  min-width: min(100%, 320px);
  overflow: hidden;
  border: 1px solid var(--border-surface);
  border-radius: 8px;
  background: var(--surface-panel);
  box-shadow: var(--shadow-soft-hover);
}

.skillsProgressionDisciplineFilterOption {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 12px;
  color: var(--text-primary);
  font-family: var(--type-control-family);
  font-size: var(--font-size-200);
  line-height: var(--line-height-ui);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}

.skillsProgressionDisciplineFilterOption:hover {
  background: var(--surface-field);
}

.skillsProgressionDisciplineFilterOption input {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent-strong);
}

.skillsProgressionDisciplineFilterOption span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.skillsProgressionDisciplineFilterAll {
  border-bottom: 1px solid var(--border-light);
}

.skillsProgressionDisciplineFilterOptions {
  max-height: 250px;
  overflow-y: auto;
  padding: 4px 0;
}

.skillsProgressionDisciplineFilterActions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: 10px 12px;
  border-top: 1px solid var(--border-light);
  background: var(--surface-field);
}

.skillsProgressionDisciplineFilterButton {
  min-height: 34px;
  padding: 0 14px;
  font-size: var(--font-size-200);
}

.skillsProgressionApparatus,
.skillsProgressionVersionList,
.skillsProgressionLevelList,
.skillsProgressionGrantList {
  display: grid;
  gap: var(--space-3);
}

.skillsProgressionApparatus {
  padding: var(--space-4);
  border: 1px solid var(--border-surface);
  border-radius: 8px;
  background: var(--surface-panel);
  background-clip: padding-box;
  box-shadow: var(--shadow-soft), var(--glass-inset-shadow);
  backdrop-filter: var(--glass-filter);
  -webkit-backdrop-filter: var(--glass-filter);
}

.skillsProgressionApparatus + .skillsProgressionApparatus {
  margin-top: var(--space-5);
}

.skillsProgressionSectionHeader {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-2);
}

.skillsProgressionGrid {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
}

.skillsProgressionDictionarySection,
.skillsProgressionCurriculumMain {
  min-width: 0;
}

.skillsProgressionDictionarySection {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-light);
}

.skillsProgressionDictionaryHeader {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: start;
}

.skillsProgressionDictionaryMain {
  display: grid;
  min-width: 0;
  gap: 5px;
}

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

.skillsProgressionDictionaryTitle {
  font-size: var(--font-size-700);
  line-height: 1.15;
}

.skillsProgressionDictionarySummary {
  display: grid;
  min-width: 0;
  gap: 2px;
  padding-top: 2px;
  text-align: right;
}

.skillsProgressionDictionarySummaryLabel {
  color: var(--text-primary);
  font-family: var(--type-control-family);
  font-size: var(--font-size-350);
  line-height: var(--line-height-ui);
  font-weight: var(--font-weight-semibold);
}

.skillsProgressionDictionarySummaryText {
  color: var(--text-muted);
  font-family: var(--type-caption-family);
  font-size: var(--font-size-200);
  line-height: var(--line-height-ui);
}

.skillsProgressionDictionarySkillList {
  display: grid;
  margin-left: var(--space-4);
  border-bottom: 1px solid var(--border-light);
}

.skillsProgressionDictionarySkill {
  display: grid;
  min-width: 0;
  border-top: 1px solid var(--border-light);
}

.skillsProgressionDictionarySkillToggle {
  width: 100%;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 10px 0;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.skillsProgressionDictionarySkillToggle:hover {
  color: var(--text-action-hover);
}

.skillsProgressionDictionarySkillToggle:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px var(--focus-ring);
}

.skillsProgressionDictionarySkillToggle:disabled {
  color: var(--text-primary);
  cursor: default;
}

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

.skillsProgressionDictionarySkillTitle {
  margin: 0;
  color: var(--text-primary);
  font-family: var(--type-card-title-family);
  font-size: var(--font-size-400);
  line-height: 1.25;
  font-weight: var(--font-weight-semibold);
}

.skillsProgressionDictionarySlug {
  width: fit-content;
  max-width: 100%;
  padding: 2px 8px;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  background: var(--surface-field);
  color: var(--text-muted);
  font-family: var(--type-control-family);
  font-size: var(--font-size-100);
  line-height: var(--line-height-ui);
  overflow-wrap: anywhere;
}

.skillsProgressionDictionarySkillMeta {
  display: inline-flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px var(--space-2);
}

.skillsProgressionDictionaryDiscipline {
  color: var(--text-secondary);
  font-family: var(--type-control-family);
  font-size: var(--font-size-100);
  line-height: var(--line-height-ui);
  font-weight: var(--font-weight-semibold);
}

.skillsProgressionDictionarySkillChevron {
  flex: 0 0 auto;
  color: var(--text-secondary);
  transform: rotate(-90deg);
  transition: transform 140ms ease;
}

.skillsProgressionDictionarySkillChevronOpen {
  transform: rotate(0deg);
}

.skillsProgressionDictionarySkillPanel {
  padding: 0 0 var(--space-3) 24px;
}

.skillsProgressionDictionarySkillDetailsList {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-2);
  margin: 0;
}

.skillsProgressionDictionarySkillDetailsList div {
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: var(--surface-field);
}

.skillsProgressionDictionarySkillDetailsList dt {
  margin-bottom: 3px;
  color: var(--text-secondary);
  font-family: var(--type-label-family);
  font-size: var(--font-size-100);
  line-height: var(--line-height-ui);
  font-weight: var(--font-weight-semibold);
}

.skillsProgressionDictionarySkillDetailsList dd {
  margin: 0;
  color: var(--text-primary);
  font-family: var(--type-caption-family);
  font-size: var(--font-size-200);
  line-height: 1.4;
}

.skillsProgressionGrantRow {
  display: grid;
  align-items: center;
  min-width: 0;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--border-light);
  grid-template-columns: minmax(210px, 1.2fr) repeat(3, minmax(86px, 0.5fr)) auto;
}

.skillsProgressionRequirementSkillCell,
.skillsProgressionGrantPermission {
  min-width: 0;
  overflow-wrap: anywhere;
}

.skillsProgressionLevel {
  display: grid;
  min-width: 0;
}

.skillsProgressionApparatus .statusPill,
.skillsProgressionDictionarySection .statusPill {
  min-height: 24px;
  padding: 0 9px;
  font-size: 11px;
  line-height: 1;
  text-transform: none;
  letter-spacing: 0;
}

.skillsProgressionCurriculumHeader {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: start;
}

.skillsProgressionCurriculumMain {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.skillsProgressionCurriculumTitle {
  font-size: var(--font-size-700);
  line-height: 1.15;
}

.skillsProgressionVersionSummary {
  display: grid;
  min-width: 0;
  width: min(100%, 280px);
  gap: var(--space-2);
  padding: 10px 12px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: var(--surface-field);
  text-align: left;
}

.skillsProgressionVersionSummaryHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}

.skillsProgressionVersionEyebrow {
  display: block;
  margin-bottom: 3px;
  color: var(--text-muted);
  font-family: var(--type-label-family);
  font-size: var(--font-size-100);
  line-height: var(--line-height-ui);
  font-weight: var(--font-weight-semibold);
}

.skillsProgressionVersionLabel {
  display: block;
  color: var(--text-primary);
  font-family: var(--type-control-family);
  font-size: var(--font-size-350);
  line-height: var(--line-height-ui);
  font-weight: var(--font-weight-semibold);
}

.skillsProgressionVersionSelect {
  width: 100%;
  min-height: 34px;
  padding: 0 30px 0 10px;
  border: 1px solid var(--border-surface-strong);
  border-radius: 6px;
  background: var(--surface-panel);
  color: var(--text-primary);
  font-family: var(--type-control-family);
  font-size: var(--font-size-300);
  line-height: var(--line-height-ui);
}

.skillsProgressionVersionSelect:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.skillsProgressionVersionMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--space-3);
  margin: 0;
  color: var(--text-secondary);
  font-family: var(--type-control-family);
  font-size: var(--font-size-100);
  line-height: var(--line-height-ui);
}

.skillsProgressionVersionMeta div {
  display: inline-flex;
  gap: 6px;
  min-width: 0;
}

.skillsProgressionVersionMeta dt {
  font-weight: var(--font-weight-semibold);
}

.skillsProgressionVersionMeta dd {
  margin: 0;
}

.skillsProgressionLevelList {
  gap: 0;
  border-top: 1px solid var(--border-light);
}

.skillsProgressionLevel {
  overflow: hidden;
  border-bottom: 1px solid var(--border-light);
  background: transparent;
}

.skillsProgressionLevelToggle {
  width: 100%;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 11px 0;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.skillsProgressionLevelToggle:hover {
  color: var(--text-action-hover);
}

.skillsProgressionLevelToggle:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px var(--focus-ring);
}

.skillsProgressionLevelToggleMain {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-2);
}

.skillsProgressionLevelChevron {
  flex: 0 0 auto;
  color: var(--text-secondary);
  transform: rotate(-90deg);
  transition: transform 140ms ease;
}

.skillsProgressionLevelChevronOpen {
  transform: rotate(0deg);
}

.skillsProgressionLevelTitle {
  min-width: 0;
  overflow-wrap: anywhere;
  font-family: var(--type-control-family);
  font-size: var(--font-size-400);
  line-height: var(--line-height-ui);
  font-weight: var(--font-weight-semibold);
}

.skillsProgressionLevelPanel {
  display: grid;
  gap: var(--space-3);
  padding: 0 0 var(--space-3) 28px;
  border-top: 1px solid var(--border-light);
  background: transparent;
}

.skillsProgressionLevelPanel[hidden] {
  display: none;
}

.skillsProgressionLevelOutline {
  margin: 0;
  max-width: 68ch;
  color: var(--text-secondary);
  font-family: var(--type-body-family);
  font-size: var(--font-size-300);
  line-height: 1.45;
}

.skillsProgressionRequirementTableWrap {
  min-width: 0;
}

.skillsProgressionRequirementTable {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: var(--font-size-200);
  line-height: var(--line-height-ui);
}

.skillsProgressionRequirementTable th,
.skillsProgressionRequirementTable td {
  padding: 9px 10px;
  border-top: 1px solid var(--border-light);
  text-align: left;
  vertical-align: middle;
}

.skillsProgressionRequirementTable thead th {
  border-top: 0;
  background: var(--surface-field);
  color: var(--text-secondary);
  font-family: var(--type-control-family);
  font-size: var(--font-size-100);
  line-height: var(--line-height-ui);
  font-weight: var(--font-weight-semibold);
}

.skillsProgressionRequirementTable th:first-child,
.skillsProgressionRequirementTable td:first-child {
  width: 46%;
}

.skillsProgressionRequirementTable th:not(:first-child),
.skillsProgressionRequirementTable td:not(:first-child) {
  width: 13.5%;
}

.skillsProgressionRequirementStatusCell {
  text-align: right;
}

.skillsProgressionRequirementStatusCell .statusPill {
  justify-content: center;
}

.adminProfileSyncLookup {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-3);
}

.adminProfileSyncRows {
  display: grid;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  overflow: hidden;
}

.adminProfileSyncRow {
  display: grid;
  grid-template-columns: minmax(110px, 0.85fr) minmax(0, 1fr) minmax(0, 1fr) minmax(150px, 0.95fr);
  gap: var(--space-3);
  align-items: center;
  min-height: 54px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-light);
  background: var(--surface-panel);
  overflow-wrap: anywhere;
}

.adminProfileSyncRow:last-child {
  border-bottom: 0;
}

.adminProfileSyncHeader {
  min-height: 42px;
  background: var(--surface-field);
  color: var(--text-secondary);
  font-family: var(--type-label-family);
  font-size: var(--type-label-size);
  line-height: var(--type-label-line-height);
  font-weight: var(--type-label-weight);
  text-transform: uppercase;
  letter-spacing: var(--type-label-tracking);
}

.adminProfileSyncCheckbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
  font-family: var(--type-caption-family);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line-height);
}

.adminProfileSyncCheckbox input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent-strong);
}

.adminProfileSyncReason {
  min-height: 86px;
  padding-top: 12px;
  resize: vertical;
}

.lockerNoticeCard {
  border-color: var(--border-status-pending);
  background: var(--surface-panel-muted);
  backdrop-filter: var(--glass-filter);
  -webkit-backdrop-filter: var(--glass-filter);
}

.lockerNoticeCardAttention {
  border-color: var(--border-status-review);
  background: var(--surface-status-review);
}

.lockerNoticeCardReturned {
  border-color: var(--border-status-paid);
  background: var(--surface-status-paid);
}

.lockerRequestCard {
  gap: var(--space-2);
}

.lockerRequestCardRejected {
  border-color: var(--border-status-review);
  background: var(--surface-status-review);
}

.lockerRequestActions {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
}

.lockerRequestActions .btn {
  min-height: 40px;
  padding-inline: 16px;
}

.lockerRequestRetryMeta {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-300);
  line-height: var(--line-height-body);
}

.lockerRequestRetryActions {
  justify-content: center;
}

.lockerQrExitActions {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  text-align: center;
}

.lockerQrExitHint {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-300);
  line-height: var(--line-height-body);
}

.lockerQrHomeButton {
  min-width: min(100%, 240px);
  min-height: 48px;
  justify-content: center;
  font-size: var(--font-size-400);
}

.lockerScanSurface {
  gap: var(--space-3);
}

.lockerScanner {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: var(--surface-field);
  aspect-ratio: 4 / 5;
}

.lockerScannerVideo {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: #101214;
}

.lockerScannerStatus {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-panel) 88%, transparent);
  color: var(--text-primary);
  font-size: var(--font-size-300);
  line-height: var(--line-height-body);
  text-align: center;
}

.lockerScanFallback {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
  text-align: center;
}

.lockerScanFallback p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-300);
  line-height: var(--line-height-body);
}

.lockerScanFallback .btn {
  min-height: 44px;
  padding-inline: 16px;
}

.lockerNoticeCard .surfaceHeaderRow > .statusPill {
  flex: 0 1 min-content;
  align-self: flex-start;
  inline-size: min-content;
  max-inline-size: 112px;
  min-height: 34px;
  margin-top: 1px;
  padding: 4px 12px;
  line-height: 1.1;
  text-align: center;
  white-space: normal;
}

.lockerNoticeTitleGroup {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.lockerNoticeTitleGroup .title {
  min-width: 0;
  text-align: center;
}

.lockerNoticeDescription {
  width: 100%;
  text-align: center;
}

.lockerNoticeIcon {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--accent-strong);
}

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

.adminLockerCollapsibleHeader,
.adminLockerCollapsibleTitle,
.adminLockerCollapsibleToggle {
  width: 100%;
}

.adminLockerCollapsibleTitle {
  margin: 0;
}

.adminLockerCollapsibleToggle {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.adminLockerCollapsibleToggle span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.adminLockerCollapsibleToggle svg {
  flex: 0 0 auto;
}

.adminLockerCollapsibleBody {
  display: grid;
  gap: var(--space-3);
}

.adminLockerLookup,
.adminLockerAssignGrid {
  display: grid;
  align-items: end;
  gap: var(--space-3);
}

.adminLockerLookup {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.adminLockerLookup > .btn {
  justify-self: center;
  width: min(100%, 220px);
  min-width: min(100%, 160px);
  padding-inline: 18px;
}

.adminLockerAssignGrid {
  max-width: 420px;
  grid-template-columns: minmax(0, 280px);
  align-items: start;
}

.adminLockerHeaderActions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.adminLockerFilterToggle {
  min-width: 118px;
}

.adminLockerLookupField,
.adminLockerInlineField {
  min-width: 0;
  display: grid;
  align-items: center;
  gap: 8px;
}

.adminLockerLookupField {
  grid-template-columns: auto minmax(0, 1fr);
}

.adminLockerInlineField {
  grid-template-columns: max-content minmax(0, 1fr);
}

.adminLockerFilterPanel {
  width: min(100%, 420px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--space-2);
  padding: 12px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: var(--surface-field);
}

.adminLockerFilterPanelStacked {
  width: min(100%, 420px);
  grid-template-columns: minmax(0, 1fr);
}

.adminLockerFilterPanelStacked .adminLockerInlineField {
  grid-column: auto;
}

.adminLockerFilterPanel .adminLockerInlineField .formLabel {
  white-space: nowrap;
}

.adminLockerFilterPanel .adminLockerInlineField .formLabel::after {
  content: ":";
}

.adminLockerFilterPanel > .btn {
  justify-self: center;
  width: min(100%, 220px);
  min-width: min(100%, 160px);
  padding-inline: 18px;
}

.adminLockerStrongInput {
  border: 2px solid var(--border-field-hover);
  background: var(--surface-panel);
}

.adminLockerStrongInput:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.adminLockerUserList {
  display: grid;
  gap: 8px;
}

.adminLockerUserListScrollable {
  max-height: 316px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
}

.adminLockerUserChoice {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: var(--surface-field);
}

.adminLockerUserChoice input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent-strong);
}

.adminLockerUserChoice span {
  min-width: 0;
  display: grid;
  gap: 2px;
  overflow-wrap: anywhere;
}

.adminLockerConflict {
  border-color: var(--border-status-review);
  background: var(--surface-status-review);
}

.adminLockerInlineError {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border-status-failed);
  border-radius: 8px;
  background: var(--surface-status-failed);
  color: var(--text-status-failed);
  font-size: var(--font-size-300);
  line-height: var(--line-height-body);
}

.adminLockerInlineError p {
  margin: 0;
}

.adminLockerInlineConflict {
  display: grid;
  gap: 6px;
  color: var(--text-primary);
}

.adminLockerInlineConflictHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.adminLockerAssignButton {
  justify-self: center;
  min-width: min(100%, 220px);
}

.adminLockerRows {
  display: grid;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  overflow: hidden;
}

.adminLockerRow {
  display: grid;
  grid-template-columns: minmax(170px, 1.35fr) minmax(76px, 0.45fr) minmax(150px, 1fr) minmax(110px, 0.6fr);
  gap: var(--space-3);
  align-items: center;
  min-height: 64px;
  padding: 12px;
  border-bottom: 1px solid var(--border-light);
  background: var(--surface-panel);
  overflow-wrap: anywhere;
}

.adminLockerRow:last-child {
  border-bottom: 0;
}

.adminLockerHeader {
  min-height: 42px;
  background: var(--surface-field);
  color: var(--text-secondary);
  font-family: var(--type-label-family);
  font-size: var(--type-label-size);
  line-height: var(--type-label-line-height);
  font-weight: var(--type-label-weight);
  text-transform: uppercase;
  letter-spacing: var(--type-label-tracking);
}

.adminLockerHeader span:last-child {
  display: none;
}

.adminLockerRequestHeader,
.adminLockerRequestRow {
  grid-template-columns: minmax(170px, 1.3fr) minmax(150px, 1fr) minmax(96px, 0.5fr) minmax(180px, 1.2fr);
}

.adminLockerMember,
.adminLockerAssignedMeta {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.adminLockerRowActions {
  min-width: 0;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  align-items: stretch;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-light);
}

.adminLockerActionGroup {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--space-2);
  padding: 10px 12px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: var(--surface-field);
}

.adminLockerRequestAssignGroup {
  display: grid;
  grid-template-columns: minmax(0, 130px);
  align-content: start;
  justify-content: start;
}

.adminLockerRequestAssignGroup .btn {
  width: 100%;
  justify-content: center;
}

.adminLockerReturnGroup {
  align-items: center;
}

.adminLockerRejectGroup {
  align-content: start;
}

.adminLockerPendingAssignButton {
  min-width: 0;
  padding-inline: 12px;
}

.adminLockerActionGroup > .formLabel {
  flex-basis: 100%;
}

.adminLockerInlineKey {
  width: 96px;
  flex: 0 0 96px;
  display: grid;
  gap: 4px;
}

.adminLockerInlineKey .input {
  width: 100%;
  min-width: 0;
}

.adminLockerConfirmText {
  flex-basis: 100%;
}

.homeTopMessage {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-3);
  padding: 14px;
  background-clip: padding-box;
}

.homeLeadGroup .homeWelcomeBlock {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.homeLeadGroup .homeWelcomeTitle {
  color: var(--text-primary);
}

.homeLeadNotice {
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-light);
}

.homeLeadGroup .homeTopMessage.card {
  margin-top: 0;
  background: var(--surface-field);
  box-shadow: var(--glass-inset-shadow);
  backdrop-filter: var(--glass-filter-content);
  -webkit-backdrop-filter: var(--glass-filter-content);
}

.homeLeadClassInfo {
  width: 100%;
}

.homeTopMessageIcon,
.featuredClassMiniIcon {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 12px;
  border: 1px solid var(--border-surface-strong);
  background: var(--surface-overlay);
  color: var(--accent-strong);
  box-shadow: var(--glass-inset-shadow);
  backdrop-filter: var(--glass-filter-soft);
  -webkit-backdrop-filter: var(--glass-filter-soft);
}

.homeTopMessageBody {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.homeTopMessageTitle,
.homeFeaturedClassTitle,
.homeContentDialogTitle {
  margin: 0;
  color: var(--text-primary);
  font-family: var(--type-card-title-family);
  font-size: var(--font-size-500);
  line-height: var(--line-height-heading);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.homeTopMessageText {
  overflow-wrap: anywhere;
}

.homeTopMessageAction,
.homeContentActionLink {
  width: fit-content;
  max-width: 100%;
  text-decoration: none;
}

.homeSpotlight {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: var(--space-3);
  padding: 14px;
  overflow: hidden;
}

.homeSpotlightHeader {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.homeSpotlightMediaButton {
  position: relative;
  width: 100%;
  min-width: 0;
  display: block;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  cursor: pointer;
  transition:
    box-shadow 140ms ease,
    transform 140ms ease;
}

.homeSpotlightMediaButton::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 38%;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.08) 34%,
    rgba(0, 0, 0, 0.32) 72%,
    rgba(0, 0, 0, 0.64) 100%
  );
  pointer-events: none;
}

.homeSpotlightMediaButton:hover,
.homeSpotlightMediaButton:focus-visible {
  box-shadow: var(--shadow-subtle);
  transform: translateY(-1px);
}

.homeSpotlightMediaButton:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.homeSpotlightImage {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
  object-fit: contain;
}

.homeSpotlightMediaCue {
  position: absolute;
  left: 50%;
  bottom: 8px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5));
  transform: translateX(-50%);
  pointer-events: none;
}

.homeSpotlightBody {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.homeSpotlightTitle {
  margin: 0;
  color: var(--text-primary);
  font-family: var(--type-card-title-family);
  font-size: var(--font-size-600);
  line-height: var(--line-height-heading);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.homeSpotlightText {
  margin: 0;
  color: var(--text-secondary);
  font-family: var(--type-caption-family);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line-height);
  font-weight: var(--type-caption-weight);
  overflow-wrap: anywhere;
}

.homeSpotlightReadMoreTeaser {
  position: relative;
  min-height: 64px;
  max-height: 72px;
  margin: 0;
  padding: 0 14px 22px;
  overflow: hidden;
}

.homeSpotlightReadMoreTeaserEdge {
  margin: 0 -14px -14px;
}

.homeSpotlightReadMoreTeaser::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  height: 66px;
  background: linear-gradient(180deg, rgba(248, 250, 252, 0), rgba(248, 250, 252, 0.84) 58%, #ffffff);
  pointer-events: none;
}

.homeSpotlightTeaserText {
  position: relative;
  z-index: 0;
  display: -webkit-box;
  margin: 0;
  color: var(--text-muted);
  font-family: var(--type-caption-family);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line-height);
  font-weight: var(--type-caption-weight);
  overflow: hidden;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.homeSpotlightOverlayReadMore {
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 2;
  min-height: 30px;
  padding: 0 14px;
  border: 1px solid rgba(5, 7, 10, 0.12);
  border-radius: 999px;
  background: #ffffff;
  color: var(--text-primary);
  font-family: var(--type-control-family);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line-height);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  cursor: pointer;
  box-shadow:
    0 10px 22px rgba(5, 7, 10, 0.16),
    0 1px 2px rgba(5, 7, 10, 0.12);
  transform: translateX(-50%);
  transition:
    border-color 140ms ease,
    box-shadow 140ms ease,
    transform 140ms ease;
}

.homeSpotlightOverlayReadMore:hover,
.homeSpotlightOverlayReadMore:focus-visible {
  border-color: rgba(5, 7, 10, 0.18);
  color: var(--accent-strong);
  box-shadow:
    0 12px 28px rgba(5, 7, 10, 0.2),
    0 1px 3px rgba(5, 7, 10, 0.14);
  transform: translateX(-50%) translateY(-1px);
}

.homeSpotlightOverlayReadMore:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

.homeSpotlightActions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding-top: 2px;
}

.homeSpotlightAction,
.homeSpotlightDetailButton {
  width: fit-content;
  max-width: 100%;
  text-decoration: none;
}

.homeTopMessageDismiss,
.homeContentDialogClose,
.detailOverlayClose {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  background: var(--surface-overlay);
  color: var(--text-secondary);
  cursor: pointer;
  box-shadow: var(--glass-inset-shadow);
  backdrop-filter: var(--glass-filter-soft);
  -webkit-backdrop-filter: var(--glass-filter-soft);
}

.homeTopMessageDismiss:hover,
.homeTopMessageDismiss:focus-visible,
.homeContentDialogClose:hover,
.homeContentDialogClose:focus-visible,
.detailOverlayClose:hover,
.detailOverlayClose:focus-visible {
  color: var(--text-primary);
  border-color: var(--border-field-hover);
}

.homeTopMessageDismiss:focus-visible,
.homeContentDialogClose:focus-visible,
.detailOverlayClose:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.homeContentSectionHeader {
  align-items: flex-start;
}

.homeFeaturedClasses,
.homeNewsEvents {
  overflow: hidden;
}

.homeFeaturedClassList {
  display: grid;
  gap: var(--space-3);
}

.homeFeaturedClassItem {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-light);
}

.homeFeaturedClassItem:first-child {
  padding-top: 0;
  border-top: 0;
}

.homeFeaturedClassCopy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.featuredClassMiniCard {
  min-height: 76px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: 10px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--surface-field);
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  backdrop-filter: var(--glass-filter-content);
  -webkit-backdrop-filter: var(--glass-filter-content);
  transition:
    transform 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease;
}

.featuredClassMiniCard:hover,
.featuredClassMiniCard:focus-visible {
  transform: translateY(-1px);
  border-color: var(--border-field-hover);
  box-shadow: var(--shadow-soft-hover);
}

.featuredClassMiniCard:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px var(--focus-ring),
    var(--shadow-soft-hover);
}

.featuredClassMiniCardStatic:hover {
  transform: none;
  box-shadow: none;
}

.featuredClassMiniText {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.featuredClassMiniTitle {
  color: var(--text-primary);
  font-family: var(--type-card-title-family);
  font-size: var(--font-size-400);
  line-height: var(--line-height-ui);
  font-weight: var(--font-weight-semibold);
  overflow-wrap: anywhere;
}

.featuredClassMiniMeta,
.homeNewsCardSummary {
  color: var(--text-secondary);
  font-family: var(--type-caption-family);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line-height);
  font-weight: var(--type-caption-weight);
  overflow-wrap: anywhere;
}

.featuredClassMiniArrow {
  color: var(--text-secondary);
}

.homeNewsCarousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(178px, 42%);
  gap: var(--space-3);
  margin: 0 calc(var(--space-4) * -1);
  padding: 0 var(--space-4) var(--space-1);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
}

.homeNewsCarouselSingle {
  grid-auto-flow: row;
  grid-auto-columns: initial;
  grid-template-columns: minmax(0, min(100%, 340px));
  justify-content: center;
  margin: 0;
  padding: 0;
  overflow-x: visible;
  scroll-snap-type: none;
}

.homeNewsCarouselItem {
  scroll-snap-align: start;
  min-width: 0;
}

.homeNewsCard {
  width: 100%;
  min-height: 246px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--surface-field);
  color: inherit;
  text-align: left;
  cursor: pointer;
  backdrop-filter: var(--glass-filter-content);
  -webkit-backdrop-filter: var(--glass-filter-content);
  transition:
    transform 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease;
}

.homeNewsCard:hover,
.homeNewsCard:focus-visible {
  transform: translateY(-1px);
  border-color: var(--border-field-hover);
  box-shadow: var(--shadow-soft-hover);
}

.homeNewsCard:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px var(--focus-ring),
    var(--shadow-soft-hover);
}

.homeNewsImageWrap {
  width: 100%;
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--surface-avatar);
  color: var(--text-muted);
}

.homeNewsImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.homeNewsCardBody {
  min-height: 108px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 11px;
}

.homeNewsCardLabel {
  color: var(--text-muted);
  font-family: var(--type-label-family);
  font-size: var(--type-label-size);
  line-height: var(--type-label-line-height);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0;
}

.homeNewsCardTitle {
  color: var(--text-primary);
  font-family: var(--type-card-title-family);
  font-size: var(--font-size-400);
  line-height: var(--line-height-ui);
  font-weight: var(--font-weight-semibold);
  overflow-wrap: anywhere;
}

.homeContentDialogOverlay,
.detailOverlayBackdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  justify-content: center;
  overflow: hidden;
  background: var(--surface-dialog-overlay);
  backdrop-filter: var(--glass-filter-content);
  -webkit-backdrop-filter: var(--glass-filter-content);
}

.detailOverlayBackdrop {
  align-items: center;
  padding: calc(12px + var(--safe-area-top, env(safe-area-inset-top, 0px))) 12px
    calc(12px + var(--safe-area-bottom, env(safe-area-inset-bottom, 0px)));
}

.homeContentDialogOverlay {
  align-items: stretch;
  padding: clamp(10px, 2svh, 22px);
}

.homeContentDialogPanel,
.detailOverlayCard {
  position: relative;
  width: min(100%, 1040px);
  max-height: calc(100svh - 24px);
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--border-surface-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-dialog-panel);
  background-clip: padding-box;
  box-shadow: var(--shadow-strong), var(--glass-inset-shadow);
  backdrop-filter: var(--glass-filter-content);
  -webkit-backdrop-filter: var(--glass-filter-content);
  outline: none;
}

.homeContentDialogClose,
.detailOverlayClose {
  position: sticky;
  top: 12px;
  align-self: flex-end;
  margin: 12px 12px -48px 0;
  z-index: 1;
  box-shadow: var(--shadow-soft), var(--glass-inset-shadow);
}

.homeContentDialogMedia {
  flex: 0 0 auto;
  width: 100%;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--surface-avatar);
}

.homeContentDialogImage {
  width: 100%;
  height: auto;
  max-height: none;
  display: block;
}

.homeContentDialogBody {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 16px;
  background: var(--surface-dialog-body);
}

.homeContentDialogActions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.homeContentDialogText {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.adminBuilderCanvas {
  display: grid;
  gap: var(--space-4);
}

.adminBuilderSection {
  display: grid;
  gap: var(--space-3);
}

.adminBuilderSectionHeader {
  align-items: flex-start;
}

.adminBuilderTopGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(176px, 240px);
  gap: var(--space-3);
  align-items: stretch;
}

.adminBuilderTopMessage {
  width: 100%;
  border-color: var(--border-light);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.adminBuilderTopMessage:hover,
.adminBuilderTopMessage:focus-visible {
  border-color: var(--border-field-hover);
  box-shadow: var(--shadow-soft-hover);
}

.adminBuilderTopMessage:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px var(--focus-ring),
    var(--shadow-soft-hover);
}

.adminBuilderAddCard {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 14px;
  border: 1px dashed var(--border-field-hover);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-field) 82%, transparent);
  color: var(--text-secondary);
  font-family: var(--type-control-family);
  font-size: var(--font-size-200);
  line-height: var(--line-height-ui);
  font-weight: var(--font-weight-semibold);
  text-align: center;
  text-decoration: none;
  transition:
    transform 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease,
    color 140ms ease;
}

.adminBuilderAddCard:hover,
.adminBuilderAddCard:focus-visible {
  transform: translateY(-1px);
  border-color: var(--accent-strong);
  color: var(--text-primary);
  box-shadow: var(--shadow-soft-hover);
}

.adminBuilderAddCard:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px var(--focus-ring),
    var(--shadow-soft-hover);
}

.adminBuilderAddCardTall {
  min-height: 246px;
  flex-direction: column;
}

.adminBuilderAddCardCompact {
  min-height: 76px;
}

.adminBuilderAddIcon {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid var(--border-surface-strong);
  border-radius: 999px;
  background: var(--surface-overlay);
  color: var(--accent-strong);
}

.adminBuilderCustomerCta {
  pointer-events: none;
}

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

.adminBuilderDetailPanel {
  width: min(100%, 920px);
}

.adminBuilderDetailImageEmpty {
  min-height: 260px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--surface-avatar);
  color: var(--text-muted);
}

.adminBuilderInternalNote {
  margin: 0;
  padding: 10px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: var(--surface-field);
  overflow-wrap: anywhere;
}

.adminBuilderPreviewHint {
  margin: 0;
  text-align: center;
}

.adminBuilderEmptySection {
  gap: var(--space-4);
}

.adminContentSummaryHeader {
  align-items: center;
}

.adminContentPrimaryLink,
.adminContentActions a {
  text-decoration: none;
}

.adminContentFilterRow {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: 2px;
}

.adminContentFilterButton {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  background: var(--surface-field);
  color: var(--text-secondary);
  font-family: var(--type-control-family);
  font-size: var(--font-size-200);
  line-height: var(--line-height-ui);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  white-space: nowrap;
}

.adminContentFilterButtonActive {
  border-color: var(--border-field-hover);
  background: var(--surface-metal);
  color: var(--text-primary);
}

.adminContentFilterButton span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  margin-left: 7px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--surface-overlay);
  color: var(--text-muted);
  font-size: var(--font-size-100);
}

.adminContentList,
.adminContentEditor {
  display: grid;
  gap: var(--space-3);
}

.adminContentItem {
  background: var(--surface-panel);
}

.adminContentItemHeader {
  align-items: flex-start;
}

.adminContentItemTitle {
  font-size: var(--font-size-500);
  overflow-wrap: anywhere;
}

.adminContentThumb {
  width: 78px;
  height: 78px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  object-fit: cover;
}

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

.adminContentMetaGrid p {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  margin: 0;
  padding: 9px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: var(--surface-field);
  color: var(--text-secondary);
  font-family: var(--type-caption-family);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line-height);
  overflow-wrap: anywhere;
}

.adminContentMetaGrid span {
  color: var(--text-muted);
  font-family: var(--type-label-family);
  font-size: var(--type-label-size);
  line-height: var(--type-label-line-height);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0;
}

.adminContentActions,
.adminContentEditorActions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.adminContentEditorSection {
  gap: var(--space-4);
}

.adminContentWarning {
  margin: 0;
  color: var(--text-error-soft);
}

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

.adminContentField {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 6px;
  color: var(--text-secondary);
  font-family: var(--type-label-family);
  font-size: var(--type-label-size);
  line-height: var(--type-label-line-height);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0;
}

.adminContentField .input {
  text-transform: none;
}

.adminContentTextarea {
  min-height: 92px;
  padding-top: 10px;
  resize: vertical;
}

.adminContentTextareaLarge {
  min-height: 142px;
}

.adminContentImageEditor {
  display: grid;
  grid-template-columns: minmax(150px, 0.5fr) minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
}

.adminContentImagePreview,
.adminContentImageEmpty {
  width: 100%;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--surface-avatar);
}

.adminContentImagePreview {
  display: block;
  object-fit: cover;
}

.adminContentImageEmpty {
  display: grid;
  place-items: center;
  color: var(--text-muted);
}

.adminContentImageControls {
  display: grid;
  gap: var(--space-3);
}

.adminContentCheck {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-primary);
  font-family: var(--type-caption-family);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line-height);
}

.adminContentCheck input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent-strong);
}

.adminContentSectionPill {
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 7px 10px;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  background: var(--surface-field);
  color: var(--text-primary);
  font-family: var(--type-caption-family);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line-height);
  font-weight: var(--font-weight-semibold);
  overflow-wrap: anywhere;
}

.adminContentAdvanced {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--surface-field);
}

.adminContentAdvanced summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  color: var(--text-primary);
  font-family: var(--type-control-family);
  font-size: var(--font-size-200);
  line-height: var(--line-height-ui);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}

.adminContentAdvanced summary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.adminContentAdvancedBody {
  display: grid;
  gap: var(--space-3);
  padding: 0 12px 12px;
}

@media (max-width: 640px) {
  .brandHeaderLockup {
    gap: 10px;
    max-width: min(76vw, 310px);
  }

  .brandHeaderIcon {
    width: 30px;
    height: 36px;
  }

  .brandHeaderWordmark {
    font-size: 31px;
  }

  .startupShell {
    padding-right: 14px;
    padding-left: 14px;
    padding-bottom: calc(clamp(118px, 17vh, 142px) + var(--safe-area-bottom, env(safe-area-inset-bottom, 0px)));
  }

  .startupStatusDock,
  .startupShellError .startupStatusDock {
    width: min(clamp(260px, 68vw, 300px), calc(100vw - 28px));
    padding: 16px;
  }

  .startupWordmark {
    font-size: 31px;
    letter-spacing: 0.24em;
  }

  .startupLogoImage {
    width: min(88vw, 300px);
  }

  .startupStatusText {
    font-size: var(--font-size-350);
  }

  .startupDetail {
    font-size: var(--font-size-200);
  }

  .startupContactAction .contactAdminLocationOptions {
    grid-template-columns: minmax(0, 1fr);
  }

  .reviewQueueCaseGrid,
  .reviewCaseLayout {
    grid-template-columns: minmax(0, 1fr);
  }

  .reviewQueueCaseBlockPrimary {
    padding-right: 0;
    padding-bottom: var(--space-3);
    border-right: 0;
    border-bottom: 1px solid var(--border-surface-subtle);
  }

  .reviewCaseSummary {
    align-items: flex-start;
  }

  .reviewCaseSummaryList,
  .reviewCaseSummaryItem {
    flex-direction: column;
    gap: 2px;
  }

  .reviewDetailRow {
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
  }

  .dashboardHeroTitle {
    font-size: 24px;
  }

  .dashboardHeroRow {
    flex-direction: column;
    align-items: stretch;
  }

  .dashboardQuickGrid,
  .profileActions {
    grid-template-columns: 1fr;
  }

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

  .weekCalendarRow {
    gap: 4px;
    padding: 8px;
  }

  .scheduleControls {
    align-items: stretch;
  }

  .scheduleLocationControl {
    align-self: flex-start;
    flex-wrap: nowrap;
  }

  .scheduleLocationControl .selectWrap {
    min-width: 0;
    flex: 0 0 auto;
  }

  .scheduleFilterToggle {
    align-self: flex-start;
  }

  .scheduleFilterToggleRow {
    justify-content: flex-start;
  }

  .scheduleFilters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 8px 10px;
  }

  .classRow {
    gap: 10px;
  }

  .classCoachImageSlot {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
  }

  .filterDropdownPanel {
    width: 100%;
    max-width: 100%;
  }

  .filterGroup {
    width: 100%;
  }

  .dateGrid {
    gap: 1px;
  }

  .dateCircle {
    width: clamp(28px, 8vw, 34px);
    height: clamp(28px, 8vw, 34px);
    font-size: 16px;
  }

  .weekNavButton {
    width: clamp(30px, 8vw, 34px);
    min-width: clamp(30px, 8vw, 34px);
    min-height: 38px;
  }

  .membershipPackageRow {
    flex-direction: column;
  }

  .membershipPackageAside {
    align-items: flex-start;
    text-align: left;
  }

  .homeClassPreviewHeader {
    flex-direction: column;
    gap: 4px;
  }

  .homeTopMessage {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .homeTopMessageDismiss {
    position: absolute;
    top: 10px;
    right: 10px;
  }

  .homeTopMessageBody {
    padding-right: 34px;
  }

  .homeSpotlight {
    grid-template-columns: minmax(0, 1fr);
  }

  .homeSpotlightMediaButton {
    aspect-ratio: 4 / 3;
  }

  .homeNewsCarousel {
    grid-auto-columns: minmax(168px, 66%);
  }

  .homeNewsCarouselSingle {
    grid-template-columns: minmax(0, 100%);
  }

  .homeContentDialogOverlay {
    align-items: stretch;
    padding: var(--safe-area-top, env(safe-area-inset-top, 0px)) 0
      var(--safe-area-bottom, env(safe-area-inset-bottom, 0px));
  }

  .homeContentDialogPanel {
    width: 100%;
    max-height: calc(
      100svh - var(--safe-area-top, env(safe-area-inset-top, 0px)) -
        var(--safe-area-bottom, env(safe-area-inset-bottom, 0px))
    );
    border-radius: 0;
  }

  .homeContentDialogMedia {
    border-radius: 0;
  }

  .homeContentDialogClose {
    top: 10px;
    margin: 10px 10px -46px 0;
  }

  .homeContentDialogBody {
    padding-bottom: calc(18px + var(--safe-area-bottom, env(safe-area-inset-bottom, 0px)));
  }

  .profileSummaryList .glanceValue {
    text-align: left;
  }

  .accountSettingValue {
    justify-content: flex-start;
  }

  .membershipPackageLine {
    flex-direction: column;
    align-items: flex-start;
  }

  .packageCategoryHeader {
    margin-bottom: 8px;
  }

  .packageOptionsList {
    border-radius: 8px;
  }

  .packageOptionRow {
    grid-template-columns: minmax(88px, 1fr) auto minmax(126px, auto);
    min-height: 72px;
    padding: 10px;
    column-gap: 8px;
  }

  .packageOptionPurchase {
    gap: 8px;
  }

  .packagePriceBlock {
    min-width: 76px;
  }

  .packageOptionPrice {
    font-size: var(--font-size-300);
  }

  .packageBuyButton {
    min-width: 50px;
    padding: 0 11px;
  }

  .purchaseHistoryRow {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "main action"
      "status action";
    align-items: start;
  }

  .purchaseHistoryMain {
    grid-area: main;
  }

  .purchaseHistoryStatus {
    grid-area: status;
    align-items: flex-start;
  }

  .purchaseHistoryPills {
    justify-content: flex-start;
  }

  .purchaseHistoryAction {
    grid-area: action;
    align-self: center;
  }

  .adminTopNavItem {
    min-height: 54px;
    flex-direction: column;
    gap: 2px;
    padding: 5px 4px;
    font-size: var(--font-size-100);
    line-height: 1.1;
  }

  .adminTopNavItem svg {
    width: 16px;
    height: 16px;
  }

  .adminTopNavItem::after {
    left: 10px;
    right: 10px;
  }

  .adminShell .surfaceHeaderRow,
  .adminShell .row {
    flex-wrap: wrap;
  }

  .adminStatsGrid {
    grid-template-columns: 1fr;
  }

  .adminSignalGrid {
    grid-template-columns: 1fr;
  }

  .adminIntroOfferHeader {
    align-items: flex-start;
  }

  .adminIntroOfferGrid {
    grid-template-columns: 1fr;
  }

  .skillsProgressionGrid,
  .skillsProgressionGrantRow {
    grid-template-columns: minmax(0, 1fr);
  }

  .skillsProgressionGrantRow {
    align-items: start;
  }

  .skillsProgressionDisciplineFilter {
    flex-basis: 100%;
    max-width: 100%;
  }

  .skillsProgressionDictionaryHeader,
  .skillsProgressionCurriculumHeader {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }

  .skillsProgressionDictionarySummary,
  .skillsProgressionVersionSummary {
    width: 100%;
  }

  .skillsProgressionDictionarySkillList {
    margin-left: var(--space-2);
  }

  .skillsProgressionDictionarySkillToggle,
  .skillsProgressionVersionSummaryHeader,
  .skillsProgressionLevelToggle {
    align-items: flex-start;
  }

  .skillsProgressionDictionarySkillToggle,
  .skillsProgressionVersionSummaryHeader,
  .skillsProgressionLevelToggle,
  .skillsProgressionVersionMeta {
    flex-direction: column;
  }

  .skillsProgressionDictionarySkillMeta {
    justify-content: flex-start;
  }

  .skillsProgressionLevelToggle {
    gap: var(--space-2);
  }

  .skillsProgressionLevelPanel {
    padding: var(--space-2);
  }

  .skillsProgressionRequirementTable thead {
    display: none;
  }

  .skillsProgressionRequirementTable,
  .skillsProgressionRequirementTable tbody,
  .skillsProgressionRequirementTable tr,
  .skillsProgressionRequirementTable td {
    display: block;
    width: 100%;
  }

  .skillsProgressionRequirementTable tr {
    padding: 10px 0;
    border-top: 1px solid var(--border-light);
  }

  .skillsProgressionRequirementTable tr:first-child {
    border-top: 0;
  }

  .skillsProgressionRequirementTable td {
    display: flex;
    gap: var(--space-2);
    align-items: baseline;
    justify-content: space-between;
    padding: 3px 0;
    border-top: 0;
    text-align: right;
  }

  .skillsProgressionRequirementTable td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    color: var(--text-secondary);
    font-family: var(--type-control-family);
    font-size: var(--font-size-100);
    font-weight: var(--font-weight-semibold);
  }

  .skillsProgressionRequirementTable td:first-child {
    display: block;
    width: 100%;
    padding-bottom: 6px;
    text-align: left;
    font-weight: var(--font-weight-semibold);
    overflow-wrap: anywhere;
  }

  .skillsProgressionRequirementTable td:first-child::before {
    content: none;
  }

  .skillsProgressionRequirementTable th:not(:first-child),
  .skillsProgressionRequirementTable td:not(:first-child) {
    width: 100%;
  }

  .skillsProgressionRequirementStatusCell {
    text-align: left;
  }

  .adminProfileSyncLookup {
    grid-template-columns: minmax(0, 1fr);
  }

  .adminProfileSyncHeader {
    display: none;
  }

  .adminProfileSyncRow {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    align-items: start;
  }

  .lockerNoticeCard .surfaceHeaderRow {
    align-items: flex-start;
  }

  .adminLockerSummaryGrid,
  .adminLockerAssignGrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .adminLockerLookupField {
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 6px;
  }

  .adminLockerLookupField .formLabel {
    font-size: var(--font-size-200);
    white-space: nowrap;
  }

  .adminLockerLookup > .btn {
    width: min(100%, 190px);
    min-width: min(100%, 150px);
    min-height: 40px;
    padding-inline: 14px;
  }

  .adminLockerLookup > .btn svg,
  .adminLockerFilterPanel > .btn svg,
  .adminLockerPendingAssignButton svg {
    display: none;
  }

  .adminLockerHeaderActions {
    width: 100%;
    justify-content: flex-start;
  }

  .adminLockerFilterToggle {
    min-width: 0;
  }

  .adminLockerFilterPanel {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
    padding: 10px;
  }

  .adminLockerFilterPanelStacked {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
  }

  .adminLockerFilterPanel .adminLockerInlineField {
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 6px;
  }

  .adminLockerFilterPanel .adminLockerInlineField .formLabel {
    font-size: var(--font-size-200);
  }

  .adminLockerFilterPanel > .btn {
    width: min(100%, 190px);
    min-width: min(100%, 150px);
    min-height: 40px;
    padding-inline: 14px;
  }

  .adminLockerHeader {
    display: none;
  }

  .adminLockerRow {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    align-items: start;
  }

  .adminLockerRowActions {
    grid-template-columns: minmax(0, 1fr);
  }

  .adminLockerRequestRow .adminLockerRowActions {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 6px;
  }

  .adminLockerRowActions .btn {
    min-height: 40px;
    padding: 0 10px;
  }

  .adminLockerRequestRow .adminLockerActionGroup {
    padding: 8px;
  }

  .adminLockerRequestAssignGroup {
    grid-template-columns: minmax(0, 1fr);
  }

  .adminLockerRequestAssignGroup .btn {
    width: 100%;
  }

  .adminLockerRejectGroup .btn {
    width: 100%;
  }

  .adminLockerInlineKey {
    width: 100%;
    flex-basis: 100%;
  }

  .adminLockerActionGroup > .formLabel,
  .adminLockerInlineKey .formLabel {
    font-size: var(--font-size-200);
  }

  .adminContentItemHeader {
    flex-direction: column;
  }

  .adminBuilderTopGrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .adminBuilderAddCardTall {
    min-height: 188px;
  }

  .adminContentThumb {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .adminContentMetaGrid,
  .adminContentFieldGrid,
  .adminContentFieldGroup,
  .adminContentImageEditor {
    grid-template-columns: minmax(0, 1fr);
  }

  .adminContentEditorActions .btn,
  .adminContentActions .btn {
    min-height: 40px;
    padding: 0 12px;
  }
}

@media (max-width: 430px) {
  .scheduleFilters {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 380px) {
  .topTabNavBadge {
    width: 8px;
    min-width: 8px;
    min-height: 8px;
    padding: 0;
    overflow: hidden;
    color: transparent;
  }

  .dateGrid {
    gap: 0;
  }

  .dateCircle {
    width: 26px;
    height: 26px;
    font-size: 15px;
  }

  .weekNavButton {
    width: 28px;
    min-width: 28px;
  }

  .scheduleLocationControl {
    flex-wrap: wrap;
  }

  .scheduleFilterToggle {
    align-self: stretch;
  }

  .scheduleFilterToggleRow {
    align-items: stretch;
  }

  .scheduleFilterToggleRow .scheduleFilterToggle {
    width: 100%;
  }

  .scheduleFilters {
    grid-template-columns: 1fr;
  }

  .packageOptionRow {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "info badge"
      "purchase purchase";
    align-items: center;
    padding: 10px 9px;
    gap: 8px 6px;
  }

  .packageValueBadge {
    justify-self: end;
  }

  .packageOptionPurchase {
    width: 100%;
    justify-content: space-between;
    gap: 8px;
  }

  .packagePriceBlock {
    min-width: 0;
    text-align: left;
  }

  .packageOptionPrice {
    font-size: 13px;
  }

  .packageOptionPerClass {
    font-size: 11px;
  }

  .packageBuyButton {
    min-width: 54px;
    padding: 0 12px;
  }

  .packageValueBadge {
    padding: 2px 7px;
    font-size: 10px;
  }

  .purchaseHistoryRow {
    grid-template-columns: 1fr;
    grid-template-areas:
      "main"
      "status"
      "action";
  }

  .purchaseHistoryAction {
    justify-content: stretch;
  }

  .purchaseHistoryAction .btn {
    width: 100%;
  }

  .profileAchievementDialogMedia {
    padding: 12px;
    min-height: 180px;
  }

  .profileAchievementDialogPdf {
    min-height: 0;
    height: 100%;
  }

  .adminAchievementSearch,
  .adminAchievementForm,
  .adminAchievementRow {
    grid-template-columns: 1fr;
  }

  .adminAchievementTitleField {
    grid-column: auto;
  }

  .adminAchievementTypeField {
    grid-column: auto;
  }

  .adminAchievementClientPreview {
    grid-template-columns: minmax(0, 1fr);
  }

  .adminAchievementPreviewTile {
    width: min(100%, 180px);
  }

  .adminAchievementUserResults button,
  .adminAchievementRowHeader {
    flex-direction: column;
    align-items: flex-start;
  }

  .adminAchievementPills {
    justify-content: flex-start;
  }

  .adminAchievementPreview {
    max-width: 180px;
  }

  .adminAchievementActions .btn,
  .adminAchievementRowActions .btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .startupProgressBar {
    width: 100%;
    animation: none;
    opacity: 0.86;
    transform: none;
  }
}

@keyframes startupSweep {
  0% {
    transform: translateX(-120%);
  }

  100% {
    transform: translateX(280%);
  }
}

@keyframes actionDialogSpin {
  100% {
    transform: rotate(360deg);
  }
}