.input-container {
  width: 100%;
  margin-bottom: 16px;
}

.input {
  width: 100%;
  height: 56px;
  background-color: #2a2a2a;
  border-radius: 12px;
  padding: 0 20px;
  font-size: 16px;
  font-weight: 400;
  color: #ffffff;
  border: 1px solid #333;
  outline: none;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  transition: all 0.2s ease;
}

.input:focus {
  border-color: rgba(191, 168, 77, 0.5);
}

.input-light {
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.input-light:focus {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.15);
}

.input-light:disabled {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.1);
  cursor: not-allowed;
  opacity: 0.7;
}

.input::placeholder {
  color: #999;
}

.input-error {
  border-color: #FF6B6B;
  background-color: #3a2a2a;
}

.input-error::placeholder {
  color: #FF6B6B;
}

.input-error-text {
  color: #FF6B6B;
  font-size: 14px;
  font-weight: 400;
  margin-top: 4px;
  margin-left: 4px;
  display: block;
}

/* Mobile Optimizations */
@media (max-width: 640px) {
  .input {
    height: 48px;
    min-height: 44px; /* Minimum touch target size */
    padding: 0 16px;
    font-size: 16px; /* Prevents zoom on iOS */
  }

  .input-container {
    margin-bottom: 12px;
  }
}

@media (max-width: 480px) {
  .input {
    height: 44px;
    padding: 0 12px;
    font-size: 16px;
  }
}

.button {
  width: 100%;
  max-width: 400px;
  min-width: 280px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 16px;
  border: none;
  cursor: pointer;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  transition: all 0.2s ease;
}

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

.button-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.button-icon {
  width: 20px;
  height: 20px;
}

.button-primary {
  background-color: rgba(191, 168, 77, 0.2);
}

.button-secondary {
  background-color: #007AFF;
}

.button-social {
  background-color: #333333;
}

.button-outline {
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.button-active {
  background-color: rgba(191, 168, 77, 0.2);
  border: none;
}

.button-disabled {
  background-color: #666666;
  opacity: 0.7;
}

.button-text {
  font-size: 18px;
  font-weight: 700;
}

.button-text-primary {
  color: rgba(191, 168, 77, 1);
}

.button-text-secondary {
  color: #ffffff;
}

.button-text-social {
  color: #ffffff;
}

.button-text-outline {
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
}

.button-text-active {
  color: rgba(191, 168, 77, 1);
  font-weight: 700;
}

.button-text-disabled {
  color: #ffffff;
}

.button-loading {
  display: flex;
  align-items: center;
  justify-content: center;
}

.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(191, 168, 77, 0.3);
  border-top-color: rgba(191, 168, 77, 1);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Mobile Optimizations */
@media (max-width: 640px) {
  .button {
    min-width: 100%;
    max-width: 100%;
    height: 48px;
    min-height: 44px; /* Minimum touch target size */
    margin-bottom: 12px;
  }

  .button-text {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .button {
    height: 44px;
    margin-bottom: 10px;
  }

  .button-text {
    font-size: 15px;
  }
}

.login-container {
  min-height: 100vh;
  background-color: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.login-content {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo-container {
  margin-bottom: 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.logo {
  width: 200px;
  height: 200px;
  object-fit: contain;
}

.welcome-text {
  font-size: 24px;
  font-weight: 600;
  color: #ffffff;
  margin-top: 0;
  margin-bottom: 20px;
  text-align: center;
}

.forgot-password-button {
  background: none;
  border: none;
  margin-bottom: 24px;
  padding: 0;
  cursor: pointer;
}

.forgot-password-text {
  font-size: 14px;
  font-weight: 400;
  color: rgba(191, 168, 77, 0.72);
  text-decoration: underline;
}

.separator {
  width: 100%;
  height: 1px;
  background-color: #333;
  margin-bottom: 24px;
}

.toggle-button {
  background: none;
  border: none;
  margin-top: 16px;
  margin-bottom: 24px;
  padding: 0;
  cursor: pointer;
}

.toggle-text {
  font-size: 14px;
  font-weight: 400;
  color: #cccccc;
  text-align: center;
}

.toggle-link {
  color: rgba(191, 168, 77, 0.72);
  font-weight: 500;
}

.terms-container {
  width: 100%;
  margin-bottom: 20px;
  margin-top: 10px;
}

.terms-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
}

.terms-switch {
  position: relative;
  display: inline-block;
  width: 51px;
  height: 31px;
  flex-shrink: 0;
  margin-top: 2px;
}

.terms-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.terms-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #333;
  transition: 0.3s;
  border-radius: 31px;
}

.terms-slider:before {
  position: absolute;
  content: "";
  height: 23px;
  width: 23px;
  left: 4px;
  bottom: 4px;
  background-color: #f4f3f4;
  transition: 0.3s;
  border-radius: 50%;
}

.terms-switch input:checked + .terms-slider {
  background-color: rgba(191, 168, 77, 0.3);
}

.terms-switch input:checked + .terms-slider:before {
  transform: translateX(20px);
  background-color: rgba(191, 168, 77, 1);
}

.terms-text-container {
  flex: 1;
  flex-shrink: 1;
}

.terms-text {
  font-size: 13px;
  font-weight: 400;
  color: #cccccc;
  line-height: 18px;
}

.terms-link {
  color: rgba(191, 168, 77, 0.72);
  font-weight: 500;
  text-decoration: underline;
  cursor: pointer;
}

.terms-link:hover {
  color: rgba(191, 168, 77, 1);
}

.sticky-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: #1a1a1a;
  padding: 16px 32px;
  backdrop-filter: blur(10px);
  background-color: rgba(26, 26, 26, 0.95);
  min-height: 120px;
  width: 100%;
  box-sizing: border-box;
}

.sticky-header-with-image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: sticky;
  top: 0;
  height: 320px;
  padding: 0;
  margin: 0;
  margin-left: -32px;
  margin-right: -32px;
  width: calc(100% + 64px);
  border-bottom: none;
  backdrop-filter: none;
  background-color: transparent;
  box-sizing: content-box;
  overflow: hidden;
  transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sticky-header-with-image.sticky-header-scrolled {
  height: 120px;
}

.main-content-sidebar-hidden .sticky-header-with-image {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}

.sticky-header-gradient {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 160px;
  background: linear-gradient(
    to bottom,
    rgba(26, 26, 26, 0) 0%,
    rgba(26, 26, 26, 0.2) 60%,
    rgba(26, 26, 26, 1) 100%
  );
  pointer-events: none;
  z-index: 1;
}

.sticky-header-with-image.sticky-header-scrolled .sticky-header-gradient {
  height: 60px;
  opacity: 0.8;
  transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sticky-header-content {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
  padding: 16px 32px;
  width: 100%;
  justify-content: space-between;
}

.sticky-header-with-image .sticky-header-content {
  position: absolute;
  bottom: 40px;
  left: 0;
  right: 0;
  padding: 0 32px;
  margin: 0 auto;
  max-width: 1200px;
  align-items: center;
  justify-content: flex-start;
  transform: translateY(0);
  transition: bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sticky-header-with-image.sticky-header-scrolled .sticky-header-content {
  bottom: 50%;
  transform: translateY(50%);
  padding: 0 32px;
}

.sticky-header-with-image .sticky-header-back-button,
.sticky-header-with-image .sticky-header-logo,
.sticky-header-with-image .sticky-header-title {
  position: relative;
  z-index: 3;
}

.sticky-header-back-button {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.sticky-header-back-button:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 1);
}

.sticky-header-back-button svg {
  width: 24px;
  height: 24px;
}

.sticky-header-logo {
  width: 80px;
  height: 80px;
  object-fit: contain;
  flex-shrink: 0;
}

.sticky-header-with-image .sticky-header-logo {
  width: 80px;
  height: 80px;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sticky-header-with-image.sticky-header-scrolled .sticky-header-logo {
  width: 50px;
  height: 50px;
}

.sticky-header-title-container {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.sticky-header-title {
  font-size: 2.5rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
  line-height: 1.2;
}

.sticky-header-with-image .sticky-header-title {
  font-size: 2.5rem;
  transition: font-size 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sticky-header-with-image.sticky-header-scrolled .sticky-header-title {
  font-size: 1.5rem;
}

.sticky-header-edit-button {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.6);
  transition: all 0.2s ease;
  border-radius: 4px;
}

.sticky-header-edit-button:hover {
  color: rgba(255, 255, 255, 0.9);
  background-color: rgba(255, 255, 255, 0.1);
}

.sticky-header-purchase-button-container {
  margin-left: auto;
  margin-right: 0;
  display: flex;
  align-items: center;
  padding-right: 0;
}

.sticky-header-purchase-button-container .course-detail-purchase-button {
  background-color: rgba(191, 168, 77, 0.2);
  border: none;
  border-radius: 12px;
  padding: 0;
  height: 44px;
  min-width: 200px;
  max-width: 300px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sticky-header-purchase-button-container .course-detail-purchase-button:hover {
  background-color: rgba(191, 168, 77, 0.3);
}

.sticky-header-purchase-button-container .course-detail-purchase-button:disabled {
  background-color: #666666;
  opacity: 0.7;
  cursor: not-allowed;
}

.sticky-header-purchase-button-container .course-detail-purchase-button-owned {
  background-color: rgba(76, 175, 80, 0.2);
  cursor: default;
}

.sticky-header-purchase-button-container .course-detail-purchase-button-owned:hover {
  background-color: rgba(76, 175, 80, 0.2);
}

.sticky-header-purchase-button-container .course-detail-button-text-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0 16px;
}

.sticky-header-purchase-button-container .course-detail-purchase-button-text {
  color: rgba(191, 168, 77, 1);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
}

.sticky-header-purchase-button-container .course-detail-button-price-text,
.sticky-header-purchase-button-container .course-detail-trial-price-text {
  color: rgba(191, 168, 77, 1);
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  margin-top: 2px;
  opacity: 0.9;
}

.sticky-header-purchase-button-container .course-detail-purchase-button-owned .course-detail-purchase-button-text {
  color: rgba(76, 175, 80, 1);
}

/* Responsive styles for sidebar-hidden */
.sticky-header-content-sidebar-hidden {
  max-width: none;
  width: 100%;
}

.sticky-header-with-image .sticky-header-content-sidebar-hidden {
  max-width: none;
  width: 100%;
}

/* Hamburger Menu Button */
.sticky-header-menu-button {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: all 0.2s ease;
  flex-shrink: 0;
  min-width: 44px;
  min-height: 44px;
  touch-action: manipulation;
}

.sticky-header-menu-button:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 1);
}

.sticky-header-menu-button:active {
  background-color: rgba(255, 255, 255, 0.15);
}

.sticky-header-menu-button svg {
  width: 24px;
  height: 24px;
}

/* Mobile Optimizations */
@media (max-width: 640px) {
  .sticky-header {
    padding: 12px 16px;
    min-height: 64px;
  }

  .sticky-header-content {
    padding: 12px 16px;
    gap: 12px;
  }

  .sticky-header-logo {
    width: 50px;
    height: 50px;
  }

  .sticky-header-title {
    font-size: 1.25rem;
    line-height: 1.3;
  }

  .sticky-header-with-image {
    height: 240px;
    margin-left: -16px;
    margin-right: -16px;
    width: calc(100% + 32px);
  }

  .sticky-header-with-image.sticky-header-scrolled {
    height: 64px;
  }

  .sticky-header-with-image .sticky-header-content {
    bottom: 20px;
    padding: 0 16px;
  }

  .sticky-header-with-image.sticky-header-scrolled .sticky-header-content {
    bottom: 50%;
    padding: 0 16px;
  }

  .sticky-header-with-image .sticky-header-logo {
    width: 50px;
    height: 50px;
  }

  .sticky-header-with-image.sticky-header-scrolled .sticky-header-logo {
    width: 40px;
    height: 40px;
  }

  .sticky-header-with-image .sticky-header-title {
    font-size: 1.25rem;
  }

  .sticky-header-with-image.sticky-header-scrolled .sticky-header-title {
    font-size: 1.125rem;
  }

  .sticky-header-purchase-button-container .course-detail-purchase-button {
    min-width: 160px;
    max-width: 200px;
    height: 40px;
  }

  .sticky-header-purchase-button-container .course-detail-purchase-button-text {
    font-size: 14px;
  }

  .sticky-header-purchase-button-container .course-detail-button-price-text,
  .sticky-header-purchase-button-container .course-detail-trial-price-text {
    font-size: 11px;
  }
}
.dashboard-layout {
  display: flex;
  min-height: 100vh;
  background-color: #1a1a1a;
  position: relative;
}

/* Sidebar Toggle Button */
.sidebar-toggle-button {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #ffffff;
  margin-bottom: 16px;
  padding: 0;
}

.sidebar-toggle-button:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.sidebar-toggle-button svg {
  width: 24px;
  height: 24px;
}

.sidebar-toggle-button:hover {
  background-color: rgba(42, 42, 42, 1);
  border-color: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

.sidebar-toggle-button svg {
  width: 24px;
  height: 24px;
}

/* Sidebar Styles */
.sidebar {
  background-color: #2a2a2a;
  display: flex;
  flex-direction: column;
  position: fixed;
  height: 100vh;
  left: 0;
  top: 0;
  overflow-y: auto;
  transition: width 0.3s ease;
  z-index: 999;
}

.sidebar-expanded {
  width: 280px;
}

.sidebar-collapsed {
  width: 80px;
}

.sidebar-header {
  padding: 32px 24px;
  border-bottom: 1px solid #333;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: padding 0.3s ease;
}

.sidebar-collapsed .sidebar-header {
  padding: 24px 12px;
}

.sidebar-logo-image {
  width: 120px;
  height: 120px;
  object-fit: contain;
  margin: 0 0 8px 0;
  display: block;
  transition: width 0.3s ease, height 0.3s ease;
}

.sidebar-collapsed .sidebar-logo-image {
  width: 56px;
  height: 56px;
  margin: 0;
}

.sidebar-subtitle {
  font-size: 14px;
  color: #cccccc;
  margin: 0;
  margin-top: -30px;
  font-weight: 400;
  transition: opacity 0.3s ease;
  white-space: nowrap;
  overflow: hidden;
}

.sidebar-nav {
  flex: 1;
  padding: 16px 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.sidebar-collapsed .sidebar-nav {
  padding: 16px 0;
}

.menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 24px;
  background: none;
  border: none;
  color: #cccccc;
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  position: relative;
  touch-action: manipulation;
  min-height: 44px;
}

.sidebar-expanded .menu-item {
  justify-content: flex-start;
}

.sidebar-collapsed .menu-item {
  padding: 16px;
  justify-content: center;
}

.menu-item:hover {
  background-color: #333;
  color: #ffffff;
}

.menu-item.active {
  background-color: rgba(191, 168, 77, 0.1);
  color: rgba(191, 168, 77, 1);
  border-left: 3px solid rgba(191, 168, 77, 1);
}

.sidebar-collapsed .menu-item.active {
  border-left: none;
  border-radius: 8px;
  background-color: rgba(191, 168, 77, 0.2);
}

.menu-icon {
  width: 24px;
  height: 24px;
  margin-right: 12px;
  flex-shrink: 0;
  color: currentColor;
}

.sidebar-collapsed .menu-icon {
  margin-right: 0;
}

.menu-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  transition: opacity 0.3s ease;
}

.sidebar-collapsed .menu-label {
  display: none;
}

.menu-item-container {
  width: 100%;
}

.menu-chevron {
  width: 16px;
  height: 16px;
  transition: all 0.2s ease;
  color: currentColor;
  flex-shrink: 0;
  margin-left: auto;
}

.sidebar-collapsed .menu-chevron {
  display: none;
}

.menu-subitems {
  background-color: rgba(0, 0, 0, 0.2);
  border-left: 2px solid rgba(191, 168, 77, 0.3);
  margin-left: 0;
  padding-left: 0;
}

.sidebar-collapsed .menu-subitems {
  display: none;
}

.menu-subitem {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 12px 24px 12px 48px;
  background: none;
  border: none;
  color: #999;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  position: relative;
}

.menu-subitem:hover {
  background-color: rgba(255, 255, 255, 0.05);
  color: #cccccc;
}

.menu-subitem:hover::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.05);
  z-index: -1;
}

.menu-subitem.active {
  background-color: rgba(191, 168, 77, 0.15);
  color: rgba(191, 168, 77, 1);
  border-left: 2px solid rgba(191, 168, 77, 0.5);
}

.menu-subitem.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  background-color: rgba(191, 168, 77, 0.15);
  z-index: -1;
}

.menu-subitem-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.menu-subitem-loading {
  padding: 12px 24px 12px 32px;
  color: #999;
  font-size: 14px;
  font-style: italic;
}

.sidebar-footer {
  padding: 24px;
  border-top: 1px solid #333;
  background-color: #2a2a2a;
  transition: padding 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sidebar-collapsed .sidebar-footer {
  padding: 16px 12px;
}

.sidebar-expanded .sidebar-footer {
  align-items: stretch;
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  transition: all 0.3s ease;
}

.sidebar-collapsed .user-info {
  justify-content: center;
  margin-bottom: 16px;
}

.user-info-clickable {
  transition: all 0.2s ease;
  border-radius: 8px;
  padding: 8px;
  margin: -8px;
  width: 100%;
  display: flex;
  align-items: center;
}

.sidebar-collapsed .user-info-clickable {
  justify-content: center;
  padding: 8px;
}

.user-info-clickable:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(191, 168, 77, 0.2);
  color: rgba(191, 168, 77, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
  margin-right: 12px;
  flex-shrink: 0;
  transition: margin 0.3s ease;
}

.sidebar-collapsed .user-avatar {
  margin-right: 0;
}

.user-avatar-image {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 12px;
  flex-shrink: 0;
  border: none;
  transition: margin 0.3s ease;
}

.sidebar-collapsed .user-avatar-image {
  margin-right: 0;
}

.user-details {
  flex: 1;
  min-width: 0;
  transition: opacity 0.3s ease;
  overflow: hidden;
}

.sidebar-collapsed .user-details {
  display: none;
}

.user-name {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 4px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-email {
  font-size: 12px;
  color: #999;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sign-out-button {
  width: 100%;
  padding: 12px;
  background-color: rgba(191, 168, 77, 0.2);
  color: rgba(191, 168, 77, 1);
  border: 1px solid rgba(191, 168, 77, 0.3);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

.sign-out-button:hover {
  background-color: rgba(191, 168, 77, 0.3);
  border-color: rgba(191, 168, 77, 0.5);
}

/* Main Content Area */
.main-content {
  flex: 1;
  padding: 32px;
  min-height: 100vh;
  background-color: #1a1a1a;
  transition: margin-left 0.3s ease;
  --main-content-padding: 32px;
}

.main-content:has(.sticky-header-with-image) {
  padding-top: 0;
}

.main-content-sidebar-expanded {
  margin-left: 280px;
}

.main-content-sidebar-collapsed {
  margin-left: 80px;
}

/* Adjust content containers and header when sidebar is hidden */
.main-content-sidebar-hidden .library-exercises-content,
.main-content-sidebar-hidden .libraries-content,
.main-content-sidebar-hidden .programs-content,
.main-content-sidebar-hidden .sticky-header-content {
  max-width: none;
  width: 100%;
}

/* Responsive Design */
@media (max-width: 768px) {
  .sidebar {
    width: 240px;
  }

  .main-content-sidebar-visible {
    margin-left: 240px;
  }

  .main-content {
    padding: 24px;
  }
}

@media (max-width: 640px) {
  .main-content {
    padding: 0;
  }
}

/* Sidebar Overlay for Mobile */
.sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 998;
  display: none;
}

@media (max-width: 640px) {
  .sidebar-overlay {
    display: block;
  }

  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 999;
    width: 280px !important;
  }

  .sidebar.sidebar-open {
    transform: translateX(0);
  }

  .main-content {
    margin-left: 0 !important;
  }

  .main-content-mobile {
    margin-left: 0 !important;
  }

  /* Improve touch targets on mobile */
  .menu-item {
    min-height: 48px;
    padding: 14px 24px;
  }

  .user-info-clickable {
    min-height: 48px;
  }

  .sidebar-toggle-button {
    min-height: 44px;
    min-width: 44px;
  }
}

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
}

.modal-container {
  background-color: #2a2a2a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.4);
  width: 90%;
  max-width: 800px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
}

.modal-close-button {
  background: none;
  border: none;
  color: #ffffff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.modal-close-button:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.modal-content {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.modal-actions {
  display: flex;
  justify-content: center;
  margin-top: auto;
  padding-top: 16px;
}

.modal-actions .button {
  width: auto;
  min-width: 200px;
  max-width: 220px;
}

.libraries-content {
  width: 100%;
  max-width: 1200px;
  padding: 32px;
  margin: 0 auto;
  box-sizing: border-box;
}

.libraries-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
  margin-bottom: 32px;
}

.library-action-pill {
  padding: 6px 20px;
  height: 32px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.4);
}

.library-action-pill:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.15);
}

.library-action-icon {
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
}

.library-action-text {
  font-size: 14px;
  font-weight: 500;
}

.library-action-pill-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.library-action-pill-active {
  background-color: rgba(191, 168, 77, 0.2);
  border-color: rgba(191, 168, 77, 0.3);
}

/* Libraries List */
.libraries-loading,
.libraries-error,
.libraries-empty {
  padding: 40px 20px;
  text-align: center;
  color: #cccccc;
}

.libraries-error {
  color: #FF6B6B;
}

.libraries-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 24px;
}

.library-card {
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 24px;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  transition: all 0.2s ease;
  cursor: pointer;
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.4);
  position: relative;
  justify-content: center;
}

.library-card:hover {
  border-color: rgba(191, 168, 77, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 0 2px rgba(191, 168, 77, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
}

.library-card-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: 1;
  position: relative;
  z-index: 0;
}

.library-card-title {
  font-size: 2rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 8px 0;
}

.library-card-description {
  font-size: 0.9rem;
  color: #cccccc;
  margin: 0;
  line-height: 1.5;
}

.library-card-footer {
  position: absolute;
  bottom: 24px;
  right: 24px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  z-index: 0;
}

.library-card-count {
  font-size: 0.875rem;
  color: #ffffff;
  font-weight: 500;
}

.library-card-edit-mode {
  cursor: default;
  pointer-events: none;
  position: relative;
}

.library-card-edit-mode .library-delete-button {
  pointer-events: auto;
}

/* Use pseudo-element overlay for dimming instead of opacity */
.library-card-edit-mode::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 12px;
  z-index: 1;
  pointer-events: none;
}

.library-card-edit-mode:hover {
  transform: none;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.4);
}

.library-delete-button {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 6px 20px;
  border-radius: 999px;
  background-color: rgba(255, 68, 68, 0.2);
  border: 1px solid rgba(255, 68, 68, 0.3);
  color: rgba(255, 68, 68, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
  pointer-events: auto;
  box-shadow: 0 0 2px rgba(255, 68, 68, 0.4);
  font-size: 14px;
  font-weight: 500;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

.library-delete-button:hover {
  background-color: rgba(255, 68, 68, 0.3);
  border-color: rgba(255, 68, 68, 0.5);
  transform: scale(1.05);
}

.library-delete-icon {
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
}

/* Delete Modal Styles */
.delete-instruction-text {
  color: #cccccc;
  font-size: 0.875rem;
  margin-bottom: 16px;
  text-align: left;
}

.delete-input-button-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.delete-input-button-row .input-container {
  flex: 1;
}

.delete-warning-text {
  color: rgba(255, 68, 68, 0.9);
  font-size: 0.9rem;
  font-weight: 500;
  margin-top: 16px;
  margin-bottom: 0;
  text-align: left;
  line-height: 1.5;
}

.delete-library-button {
  background-color: rgba(255, 68, 68, 0.2);
  border: none;
  border-radius: 12px;
  padding: 0 40px;
  height: 56px;
  color: rgba(255, 68, 68, 0.8);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  box-shadow: 0 0 0 rgba(255, 68, 68, 0.72);
  min-width: 120px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.delete-library-button:hover:not(.delete-library-button-disabled) {
  background-color: rgba(255, 68, 68, 0.3);
  box-shadow: 0 4px 12px rgba(255, 68, 68, 0.3);
  transform: translateY(-2px);
}

.delete-library-button-disabled {
  background-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.5);
  cursor: not-allowed;
  box-shadow: none;
}

.delete-library-button-disabled:hover {
  transform: none;
}

.library-exercises-content {
  width: 100%;
  max-width: 1200px;
  padding: 32px;
  margin: 0 auto;
  box-sizing: border-box;
}

.library-exercises-legend {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
  margin-bottom: 12px;
}

.library-exercises-legend-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.exercise-incomplete-icon-small {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 152, 0, 0.5);
}

.exercise-incomplete-icon-small svg {
  width: 100%;
  height: 100%;
}

.exercise-incomplete-icon-small svg path {
  fill: rgba(255, 152, 0, 0.4);
  stroke: rgba(255, 152, 0, 0.6);
}

.library-exercises-legend-text {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 400;
}

.library-exercises-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
}

.library-action-pill {
  padding: 6px 20px;
  height: 32px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.4);
}

.library-action-pill:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.15);
}

.library-action-icon {
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
}

.library-action-text {
  font-size: 14px;
}

.library-action-pill-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.library-exercises-loading,
.library-exercises-error,
.library-exercises-empty {
  padding: 40px 20px;
  text-align: center;
  color: #cccccc;
}

.library-exercises-error {
  color: #FF6B6B;
}

.library-exercises-empty {
  color: #cccccc;
}

.back-button {
  margin-top: 20px;
  padding: 10px 20px;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.4);
}

.back-button:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.15);
}

.library-exercises-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 24px;
}

/* Library exercise cards - override any shared styles */
.library-exercises-list .exercise-card {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  padding: 16px !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  padding-top: 16px !important;
  padding-bottom: 16px !important;
  min-height: 100px !important;
  display: flex !important;
  flex-direction: column !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.4) !important;
  position: relative !important;
  justify-content: center !important;
  align-items: stretch !important;
  contain: none !important;
}

.exercise-card:hover {
  border-color: rgba(191, 168, 77, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 0 2px rgba(191, 168, 77, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
}

.library-exercises-list .exercise-card .exercise-card-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  flex: 1;
  position: relative;
  z-index: 0;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box;
  min-width: 0;
}

/* Fallback for exercise-card-header class used elsewhere */
.exercise-card-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: 1;
  position: relative;
  z-index: 0;
  width: 100%;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  min-width: 0;
}

.library-exercises-list .exercise-card .exercise-card-header h3.exercise-card-title {
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  margin: 0 auto !important;
  padding: 0 !important;
  text-align: center !important;
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  box-sizing: border-box !important;
  line-height: 1.4 !important;
  word-wrap: break-word;
  overflow-wrap: break-word;
  text-align-last: center !important;
  align-self: center !important;
  float: none !important;
  clear: both !important;
}

.exercise-card-edit-mode {
  cursor: default;
  pointer-events: none;
  position: relative;
}

.exercise-card-edit-mode::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 12px;
  z-index: 1;
  pointer-events: none;
}

.exercise-card-edit-mode:hover {
  transform: none;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.4);
}

.exercise-incomplete-icon {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  pointer-events: none;
  color: rgba(255, 152, 0, 0.5); /* Yellow-orange with low opacity */
}

.exercise-incomplete-icon svg {
  width: 100%;
  height: 100%;
}

.exercise-incomplete-icon svg path {
  fill: rgba(255, 152, 0, 0.4); /* Filled with yellow-orange, low opacity */
  stroke: rgba(255, 152, 0, 0.6); /* Yellow-orange stroke with slightly higher opacity */
}

.exercise-delete-button {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 6px 20px;
  border-radius: 999px;
  background-color: rgba(255, 68, 68, 0.2);
  border: 1px solid rgba(255, 68, 68, 0.3);
  color: rgba(255, 68, 68, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
  pointer-events: auto;
  box-shadow: 0 0 2px rgba(255, 68, 68, 0.4);
  font-size: 14px;
  font-weight: 500;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

.exercise-delete-button:hover {
  background-color: rgba(255, 68, 68, 0.3);
  border-color: rgba(255, 68, 68, 0.5);
  transform: scale(1.05);
}

.exercise-delete-icon {
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
}

/* Filter Modal Styles */
.filter-modal-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
}

.filter-modal-body {
  display: flex;
  flex-direction: row;
  gap: 24px;
  align-items: flex-start;
}

.filter-muscle-silhouette-container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  padding: 24px;
  min-height: 600px;
  overflow: hidden; /* Hide any overflow from scaled SVG */
  position: relative; /* For proper positioning */
}

/* Scale the SVG to make muscles larger while container stays same size */
.filter-muscle-silhouette-container svg {
  transform: scale(1.5); /* Makes SVG 1.5x larger (adjust as needed) */
  transform-origin: center center;
}

.filter-selected-muscles-list {
  width: 180px;
  flex-shrink: 0;
}

.filter-muscles-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.filter-muscle-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 16px;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.4);
  transition: all 0.2s ease;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

.filter-muscle-item:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.15);
}

.filter-muscle-name {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 500;
  flex: 1;
}

.filter-muscle-remove {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  margin-left: 8px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
}

.filter-muscle-remove:hover {
  color: rgba(255, 255, 255, 0.9);
}

.muscle-filter-button {
  padding: 12px 16px;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.4);
  text-align: center;
  text-transform: capitalize;
}

.muscle-filter-button:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.15);
}

.muscle-filter-button-selected {
  background-color: rgba(191, 168, 77, 0.2);
  border-color: rgba(191, 168, 77, 0.3);
  color: rgba(191, 168, 77, 1);
}

.muscle-filter-button-selected:hover {
  background-color: rgba(191, 168, 77, 0.3);
  border-color: rgba(191, 168, 77, 0.5);
}

.filter-no-muscles {
  color: #cccccc;
  text-align: center;
  padding: 20px;
  font-size: 14px;
}

.filter-modal-actions {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
}

.filter-clear-button {
  padding: 10px 20px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.4);
}

.filter-clear-button:hover:not(:disabled) {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.15);
}

.filter-clear-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.filter-apply-button {
  padding: 10px 20px;
  border-radius: 999px;
  background-color: rgba(191, 168, 77, 0.2);
  border: 1px solid rgba(191, 168, 77, 0.3);
  color: rgba(191, 168, 77, 1);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  box-shadow: 0 0 2px rgba(191, 168, 77, 0.4);
}

.filter-apply-button:hover {
  background-color: rgba(191, 168, 77, 0.3);
  border-color: rgba(191, 168, 77, 0.5);
}

/* Delete Modal Styles */
.modal-library-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
}

.delete-instruction-text {
  color: #cccccc;
  font-size: 0.875rem;
  margin-bottom: 16px;
  text-align: left;
}

.delete-input-button-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.delete-input-button-row .input-container {
  flex: 1;
}

.exercise-name-warning-text {
  color: rgba(255, 193, 7, 0.9);
  font-size: 13px;
  line-height: 1.5;
  margin-top: 12px;
  margin-bottom: 0;
  padding: 8px 12px;
  background-color: rgba(255, 193, 7, 0.1);
  border-radius: 6px;
  border-left: 3px solid rgba(255, 193, 7, 0.5);
}

.delete-warning-text {
  color: rgba(255, 68, 68, 0.9);
  font-size: 0.9rem;
  font-weight: 500;
  margin-top: 16px;
  margin-bottom: 0;
  text-align: left;
  line-height: 1.5;
}

.delete-library-button {
  background-color: rgba(255, 68, 68, 0.2);
  border: none;
  border-radius: 12px;
  padding: 0 40px;
  height: 56px;
  color: rgba(255, 68, 68, 0.8);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  box-shadow: 0 0 0 rgba(255, 68, 68, 0.72);
  min-width: 120px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.delete-library-button:hover:not(.delete-library-button-disabled) {
  background-color: rgba(255, 68, 68, 0.3);
  box-shadow: 0 4px 12px rgba(255, 68, 68, 0.3);
  transform: translateY(-2px);
}

.delete-library-button-disabled {
  background-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.5);
  cursor: not-allowed;
  box-shadow: none;
}

.delete-library-button-disabled:hover {
  transform: none;
}

/* Exercise Detail Modal Styles */
/* Override base modal-content overflow for exercise modal */
.modal-content:has(.exercise-modal-content) {
  overflow: hidden !important;
}

.exercise-modal-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  overflow: hidden; /* Prevent modal content from scrolling */
  max-height: calc(90vh - 120px); /* Account for header */
}

.exercise-modal-body {
  display: flex;
  flex-direction: row;
  gap: 24px;
  height: 600px;
  max-height: 600px;
  overflow: hidden; /* Prevent body from scrolling */
  min-width: 0; /* Allow flex item to shrink below content size */
  width: 100%; /* Ensure it respects parent width */
  max-width: 100%; /* Don't exceed parent */
  box-sizing: border-box;
}

.exercise-modal-left {
  width: 300px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 0;
  min-width: 0; /* Allow flex item to shrink */
}

.exercise-input-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.exercise-input-group:first-child {
  flex-shrink: 0;
}

.exercise-input-label {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 500;
}

.exercise-implements-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 16px;
  flex: 1;
  height: 300px;
  max-height: 300px;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
}

.exercise-implements-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.exercise-implements-actions-overlay {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  flex-direction: row;
  gap: 8px;
  z-index: 10;
}

.exercise-implements-edit-buttons {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.exercise-implements-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
}

.exercise-implements-content::-webkit-scrollbar {
  width: 6px;
}

.exercise-implements-content::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}

.exercise-implements-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.exercise-implements-content::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

.exercise-implements-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.exercise-implement-chip {
  padding: 8px 16px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background-color: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.exercise-implement-chip:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
}

.exercise-implement-chip-selected {
  background-color: rgba(150, 130, 60, 0.3);
  border-color: rgba(150, 130, 60, 0.8);
  color: rgba(255, 255, 255, 0.95);
}

.exercise-implement-chip-selected:hover {
  background-color: rgba(150, 130, 60, 0.4);
  border-color: rgba(150, 130, 60, 1);
}

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

.exercise-implements-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.exercise-implement-tag {
  display: flex;
  align-items: center;
  padding: 6px 16px;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.4);
  transition: all 0.2s ease;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 500;
}

.exercise-implements-empty {
  color: rgba(255, 255, 255, 0.4);
  font-size: 14px;
  font-style: italic;
  text-align: center;
  padding: 20px;
}

.exercise-effective-sets-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 16px;
  flex: 1;
  height: 400px;
  max-height: 400px;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
}

.exercise-section-title {
  color: rgba(255, 255, 255, 0.95);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

.exercise-presets-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 24px;
  margin-bottom: -20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.exercise-presets-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  flex-shrink: 0;
  min-height: 60px;
  max-height: 60px;
  overflow: hidden;
}

.exercise-presets-container {
  width: 400px;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 8px 0;
  flex-shrink: 0;
  position: relative;
  align-self: flex-start;
  box-sizing: border-box;
  min-width: 0;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.exercise-presets-container::-webkit-scrollbar {
  display: none;
}

.exercise-presets-scroll {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 8px;
  padding: 0 4px;
  min-width: min-content;
  width: max-content;
  box-sizing: border-box;
  max-width: 100%;
}

.exercise-preset-item {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

.exercise-preset-item:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

.exercise-preset-name {
  color: rgba(255, 255, 255, 0.8);
}

.exercise-effective-sets-header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.exercise-effective-sets-info-button {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
}

.exercise-effective-sets-info-button:hover {
  opacity: 0.7;
}

.exercise-effective-sets-info-modal-content {
  padding: 20px 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  line-height: 1.6;
}

.exercise-effective-sets-info-modal-content p {
  margin: 0 0 16px 0;
}

.exercise-effective-sets-info-modal-content p:last-child {
  margin-bottom: 0;
}

.exercise-effective-sets-scroll {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  min-height: 0;
  max-height: 100%;
  padding-right: 4px;
  box-sizing: border-box;
}

/* Custom scrollbar for effective sets */
.exercise-effective-sets-scroll::-webkit-scrollbar {
  width: 6px;
}

.exercise-effective-sets-scroll::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}

.exercise-effective-sets-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.exercise-effective-sets-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

.exercise-effective-sets-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.exercise-effective-sets-item:last-child {
  border-bottom: none;
}

.exercise-effective-sets-muscle-name {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 500;
  flex: 1;
}

.exercise-effective-sets-input-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.exercise-effective-sets-arrows {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  justify-content: center;
}

.exercise-effective-sets-input {
  width: 50px;
  height: 28px;
  padding: 4px 4px;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 500;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  text-align: center;
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.1);
  transition: all 0.2s ease;
}

.exercise-effective-sets-input:focus {
  outline: none;
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.2);
}

.exercise-effective-sets-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

/* Hide default spinner buttons */
.exercise-effective-sets-input::-webkit-inner-spin-button,
.exercise-effective-sets-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}


.exercise-effective-sets-input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.exercise-effective-sets-spinner-button {
  width: 20px;
  height: 14px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: all 0.2s ease;
}

.exercise-effective-sets-spinner-button:hover:not(:disabled) {
  opacity: 0.7;
}

.exercise-effective-sets-spinner-button:active:not(:disabled) {
  transform: scale(0.95);
}

.exercise-effective-sets-spinner-button:disabled {
  cursor: not-allowed;
  opacity: 0.3;
}

.exercise-effective-sets-spinner-button:disabled svg {
  opacity: 0.5;
}

.exercise-effective-sets-spinner-button svg {
  width: 12px;
  height: 12px;
}

.exercise-textarea {
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 12px 16px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  resize: vertical;
  min-height: 200px;
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.4);
  transition: all 0.2s ease;
}

.exercise-textarea:focus {
  outline: none;
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.15);
}

.exercise-textarea::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.exercise-modal-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0; /* Allow flex item to shrink below content size */
  overflow: hidden; /* Prevent content from expanding */
}

.exercise-tab-header {
  display: flex;
  flex-direction: row;
  position: relative;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  padding: 2px;
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.4);
}

.exercise-tab-indicator-container {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 2px;
  right: 2px;
  pointer-events: none;
}

.exercise-tab-indicator {
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(50% - 2px);
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.4);
  transition: transform 0.3s ease;
}

.exercise-tab-indicator-active {
  transform: translateX(0);
}

.exercise-tab-button {
  flex: 1;
  padding: 8px 16px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s ease;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  z-index: 1;
  position: relative;
}

.exercise-tab-button-active {
  color: #ffffff;
  font-weight: 600;
}

.exercise-modal-right-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  padding: 24px;
  min-height: 500px;
  overflow: hidden;
  min-width: 0; /* Prevent flex item from expanding beyond container */
  max-width: 100%; /* Ensure it doesn't exceed parent width */
}

.exercise-modal-right-content-video {
  padding: 0;
}

.exercise-muscles-view {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
}

.exercise-muscle-silhouette-wrapper {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  min-height: 0;
}

.exercise-muscle-silhouette-wrapper svg {
  transform: scale(1.0);
  transform-origin: center center;
}

/* Make selected muscles less transparent in exercise detail modal */
.exercise-muscle-silhouette-wrapper svg path[stroke="#BFA84D"] {
  fill-opacity: 0.4 !important;
  stroke-opacity: 0.5 !important;
}

.exercise-muscles-labels-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  flex-shrink: 0; /* Don't shrink, maintain fixed space */
  min-height: 60px; /* Minimum height to prevent layout shift */
  max-height: 60px; /* Maximum height to prevent expansion */
  overflow: hidden; /* Hide overflow */
}

.exercise-muscles-labels-container {
  width: 400px; /* Fixed width - shows about 3-4 muscles at once */
  max-width: 100%; /* Don't exceed parent if parent is smaller */
  overflow-x: auto;
  overflow-y: hidden;
  padding: 8px 0;
  flex-shrink: 0; /* Don't shrink */
  position: relative;
  align-self: flex-start; /* Align to start, don't stretch */
  box-sizing: border-box; /* Include padding in width calculation */
  /* Force container to respect width constraint */
  min-width: 0;
  /* Hide default scrollbar */
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

.exercise-muscles-labels-container::-webkit-scrollbar {
  display: none;
}

.exercise-muscles-labels-scroll-indicator {
  width: 400px;
  max-width: 100%;
  height: 4px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
  align-self: flex-start;
  flex-shrink: 0;
  margin-top: 4px;
}

.exercise-muscles-labels-scroll-indicator-bar {
  position: absolute;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 2px;
  transition: left 0.1s ease, width 0.1s ease;
}


.exercise-muscles-labels-scroll {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 8px;
  padding: 0 4px;
  min-width: min-content;
  width: max-content;
  box-sizing: border-box;
  /* Prevent forcing parent to expand - content can be wider than container */
  /* Container will scroll, but won't expand */
}

.exercise-muscle-label-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 16px;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.4);
  transition: all 0.2s ease;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

.exercise-muscle-label-name {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 500;
}

.exercise-muscle-remove-button {
  margin-left: 8px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.exercise-muscle-remove-button:hover {
  color: rgba(255, 68, 68, 0.9);
  background-color: rgba(255, 68, 68, 0.1);
}

.exercise-muscles-actions-overlay {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  flex-direction: row;
  gap: 8px;
  z-index: 10;
}

.exercise-muscle-edit-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 16px;
  height: 32px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.4);
  text-align: center;
}

.exercise-muscle-edit-button:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
  transform: translateY(-1px);
}

.exercise-no-muscles {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  gap: 16px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
}

.exercise-no-muscles-selected {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  font-style: italic;
}

.exercise-no-video {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  gap: 16px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
}

.exercise-video-view {
  width: 100%;
  height: 100%;
  flex: 1;
  min-height: 0;
}

.exercise-video-container {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.exercise-video-player {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
  background-color: #000;
  display: block;
}

.exercise-video-actions-overlay {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  flex-direction: row;
  gap: 8px;
  z-index: 10;
}

.exercise-video-edit-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.3);
}

.exercise-video-edit-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.exercise-video-edit-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
}

.exercise-video-action-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.exercise-video-action-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 16px;
  height: 32px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.4);
  text-align: center;
}

.exercise-video-action-pill:hover:not(:disabled) {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
  transform: translateY(-1px);
}

.exercise-video-action-pill:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.exercise-video-action-text {
  white-space: nowrap;
}

.exercise-video-delete-pill {
  background-color: rgba(255, 68, 68, 0.2);
  border-color: rgba(255, 68, 68, 0.3);
  color: rgba(255, 68, 68, 0.9);
  box-shadow: 0 0 2px rgba(255, 68, 68, 0.4);
}

.exercise-video-delete-pill:hover:not(:disabled) {
  background-color: rgba(255, 68, 68, 0.3);
  border-color: rgba(255, 68, 68, 0.5);
  box-shadow: 0 0 4px rgba(255, 68, 68, 0.5);
}

.exercise-video-save-pill {
  background-color: rgba(76, 175, 80, 0.2);
  border-color: rgba(76, 175, 80, 0.3);
  color: rgba(76, 175, 80, 0.9);
  box-shadow: 0 0 2px rgba(76, 175, 80, 0.4);
}

.exercise-video-save-pill:hover:not(:disabled) {
  background-color: rgba(76, 175, 80, 0.3);
  border-color: rgba(76, 175, 80, 0.5);
  box-shadow: 0 0 4px rgba(76, 175, 80, 0.5);
}

.exercise-video-cancel-pill {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.4);
}

.exercise-video-cancel-pill:hover:not(:disabled) {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
}

.exercise-video-progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  width: 100%;
  margin-top: 4px;
}

.exercise-video-progress-bar {
  width: 100%;
  height: 8px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.exercise-video-progress-fill {
  height: 100%;
  background-color: rgba(255, 255, 255, 1);
  transition: width 0.3s ease;
  border-radius: 4px;
}

.exercise-video-progress-text {
  color: rgba(255, 255, 255, 1);
  font-size: 12px;
  font-weight: 500;
}

.exercise-video-upload-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.exercise-video-upload-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  height: 40px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.4);
  text-align: center;
}

.exercise-video-upload-button:hover:not(:disabled) {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
  transform: translateY(-1px);
}

.exercise-video-upload-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.programs-content {
  width: 100%;
  max-width: 1200px;
  padding: 32px;
  margin: 0 auto;
  box-sizing: border-box;
}

.programs-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
  margin-bottom: 32px;
}

.program-action-pill {
  padding: 6px 20px;
  height: 32px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.4);
}

.program-action-pill:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.15);
}

.program-action-icon {
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
}

.program-action-text {
  font-size: 14px;
  font-weight: 500;
}

.program-action-pill-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Programs List */
.programs-loading,
.programs-error,
.programs-empty {
  padding: 40px 20px;
  text-align: center;
  color: #cccccc;
}

.programs-error {
  color: #FF6B6B;
}

.programs-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 24px;
}

.program-card {
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 24px;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  transition: all 0.2s ease;
  cursor: pointer;
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.4);
  position: relative;
  overflow: hidden;
}

.program-card:has(.program-card-image-wrapper) {
  padding: 0;
  border-width: 0;
}

.program-card:hover {
  border-color: rgba(191, 168, 77, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 0 2px rgba(191, 168, 77, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
}

.program-card:has(.program-card-image-wrapper):hover {
  border-width: 0;
}

.program-card-image-wrapper {
  width: 100%;
  height: 0;
  padding-bottom: 150%; /* Aspect ratio ~2:3 (similar to mobile: 0.88 width / 0.6 height ≈ 1.47, but using 2:3 = 150% for simplicity) */
  position: relative;
  overflow: hidden;
  border-radius: 16px;
}

.program-card-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.program-card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 20px;
  padding-bottom: 40px;
  z-index: 1;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.4) 50%, transparent 100%);
}

.program-card-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: 1;
  position: relative;
  z-index: 0;
}

.program-card-title {
  font-size: 2rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.program-card-footer {
  position: absolute;
  bottom: 24px;
  right: 24px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  z-index: 2;
}

.program-card-count {
  font-size: 0.875rem;
  color: #ffffff;
  font-weight: 500;
}

.program-card-edit-mode {
  cursor: default;
  pointer-events: none;
  position: relative;
}

.program-card-edit-mode .program-delete-button {
  pointer-events: auto;
}

.program-card-edit-mode::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 16px;
  z-index: 1;
  pointer-events: none;
}

.program-card-edit-mode:hover {
  transform: none;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.4);
}

.program-delete-button {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 6px 20px;
  border-radius: 999px;
  background-color: rgba(255, 68, 68, 0.2);
  border: 1px solid rgba(255, 68, 68, 0.3);
  color: rgba(255, 68, 68, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
  pointer-events: auto;
  box-shadow: 0 0 2px rgba(255, 68, 68, 0.4);
  font-size: 14px;
  font-weight: 500;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

.program-delete-button:hover {
  background-color: rgba(255, 68, 68, 0.3);
  border-color: rgba(255, 68, 68, 0.5);
  transform: scale(1.05);
}

.program-delete-icon {
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
}

/* Modal Styles */
.modal-program-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
}

/* Delete Modal Styles */
.delete-instruction-text {
  color: #cccccc;
  font-size: 0.875rem;
  margin-bottom: 16px;
  text-align: left;
}

.delete-input-button-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.delete-input-button-row .input-container {
  flex: 1;
}

.delete-warning-text {
  color: rgba(255, 68, 68, 0.9);
  font-size: 0.9rem;
  font-weight: 500;
  margin-top: 16px;
  margin-bottom: 0;
  text-align: left;
  line-height: 1.5;
}

.delete-program-button {
  background-color: rgba(255, 68, 68, 0.2);
  border: none;
  border-radius: 12px;
  padding: 0 40px;
  height: 56px;
  color: rgba(255, 68, 68, 0.8);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  box-shadow: 0 0 0 rgba(255, 68, 68, 0.72);
  min-width: 120px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.delete-program-button:hover:not(.delete-program-button-disabled) {
  background-color: rgba(255, 68, 68, 0.3);
  box-shadow: 0 4px 12px rgba(255, 68, 68, 0.3);
  transform: translateY(-2px);
}

.delete-program-button-disabled {
  background-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.5);
  cursor: not-allowed;
  box-shadow: none;
}

.delete-program-button-disabled:hover {
  transform: none;
}

/* Dropdown styles */
.program-config-dropdown {
  width: 100%;
  padding: 12px 40px 12px 16px;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 9L12 16L5 9' stroke='rgba(255,255,255,0.6)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 12px;
}

.program-config-dropdown:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.15);
}

.program-config-dropdown:focus {
  outline: none;
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.1);
}

.program-config-dropdown option {
  background-color: #2a2a2a;
  color: rgba(255, 255, 255, 0.8);
}

/* Scrollbar styling for modal right content */
.edit-program-modal-right::-webkit-scrollbar {
  width: 8px;
}

.edit-program-modal-right::-webkit-scrollbar-track {
  background-color: #2a2a2a;
}

.edit-program-modal-right::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

.edit-program-modal-right::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

/* Elegant Toggle Switch */
.elegant-toggle {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 28px;
}

.elegant-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.elegant-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.15);
  transition: 0.3s;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.elegant-toggle-slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background-color: rgba(255, 255, 255, 0.9);
  transition: 0.3s;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.elegant-toggle input:checked + .elegant-toggle-slider {
  background-color: rgba(191, 168, 77, 0.3);
  border-color: rgba(191, 168, 77, 0.5);
}

.elegant-toggle input:checked + .elegant-toggle-slider:before {
  transform: translateX(20px);
  background-color: rgba(191, 168, 77, 1);
  box-shadow: 0 0 4px rgba(191, 168, 77, 0.5);
}

.elegant-toggle input:focus + .elegant-toggle-slider {
  box-shadow: 0 0 4px rgba(191, 168, 77, 0.4);
}

/* Program Config Card Image/Video Styles */
.program-config-card-image-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.3);
  margin-top: 12px;
}

.program-config-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.program-config-card-image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.program-config-card-image-container:hover .program-config-card-image-overlay {
  opacity: 1;
}

.program-config-card-image-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.program-config-card-video-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.3);
  margin-top: 12px;
}

.program-config-card-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.program-config-card-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.05);
  border: 2px dashed rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 12px;
}

.program-config-card-placeholder:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.3);
}

.program-config-card-placeholder span {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  font-weight: 500;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

.program-detail-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 320px);
}

body.header-scrolled .program-detail-container {
  min-height: calc(100vh - 120px);
}

/* Tab Bar */
.program-tab-bar {
  background-color: #1a1a1a;
  padding: 16px 32px;
  position: sticky;
  top: 320px;
  z-index: 99;
  transition: top 0.3s ease-out;
}

body.header-scrolled .program-tab-bar {
  top: 120px;
}

.program-tab-header-container {
  max-width: 1200px;
  margin: 0 auto;
}

.program-tab-indicator-wrapper {
  display: flex;
  flex-direction: row;
  position: relative;
  align-items: center;
  gap: 0;
}

.program-tab-indicator {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 0;
  width: 33.333%;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.4);
  pointer-events: none;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
  will-change: transform;
}

.program-tab-button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 20px;
  height: 32px;
  min-width: 0;
  border-radius: 999px;
  background: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  position: relative;
  z-index: 1;
}

.program-tab-button:hover:not(.program-tab-button-active) {
  background-color: rgba(255, 255, 255, 0.05);
}

.program-tab-button-active {
  background-color: transparent;
}

.program-tab-title-text {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  transition: all 0.2s ease;
}

.program-tab-button-active .program-tab-title-text {
  color: rgba(255, 255, 255, 1);
  font-weight: 600;
}

.program-tab-button-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Breadcrumb Navigation */
.program-breadcrumb {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 16px 32px;
  min-height: 48px;
  background-color: #1a1a1a;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.program-breadcrumb-hidden {
  visibility: hidden;
}

.program-breadcrumb-visible {
  visibility: visible;
}

.program-breadcrumb-item {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 400;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  padding: 6px 12px;
  border-radius: 6px;
  transition: all 0.2s ease;
  background: none;
  border: none;
  cursor: default;
  white-space: nowrap;
}

.program-breadcrumb-item-clickable {
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
}

.program-breadcrumb-item-clickable:hover {
  background-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 1);
}

.program-breadcrumb-separator {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.3);
  font-weight: 300;
  margin: 0 4px;
  line-height: 1;
}

/* Tab Pager */
.program-tab-pager {
  /* CSS containment for better scroll performance */
  contain: layout style paint;
  will-change: scroll-position;
  flex: 1;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.program-tab-pager-disabled {
  overflow-x: hidden;
  scroll-behavior: auto;
  touch-action: none;
  -webkit-overflow-scrolling: none;
}

.program-tab-pager::-webkit-scrollbar {
  display: none;
}

.program-tab-page {
  /* CSS containment for better scroll performance */
  contain: layout style paint;
  min-width: 100%;
  flex-shrink: 0;
  scroll-snap-align: start;
  padding: 32px;
  box-sizing: border-box;
}

.program-tab-content {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.program-tab-title {
  font-size: 2rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 24px 0;
}

.program-tab-placeholder {
  color: rgba(255, 255, 255, 0.6);
  font-size: 16px;
  line-height: 1.5;
}

/* Loading and Error States */
.program-detail-loading,
.program-detail-error {
  padding: 40px 20px;
  text-align: center;
  color: #cccccc;
}

.program-detail-error {
  color: #FF6B6B;
}

/* Configuration Section */
.program-config-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.program-config-section:not(:first-child) {
  margin-top: 48px;
}

.program-config-section-title {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

.program-config-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}

.program-config-card {
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.4);
  transition: all 0.2s ease;
}

.program-config-card:hover {
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
}

.program-config-card-full {
  grid-column: 1 / -1;
}

.program-config-card-small {
  min-width: 200px;
}

.program-config-card-status {
  grid-column: 1 / -1;
}

.program-config-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.program-config-card-edit-button {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.6);
  transition: all 0.2s ease;
  border-radius: 4px;
}

.program-config-card-edit-button:hover:not(:disabled) {
  color: rgba(255, 255, 255, 0.9);
  background-color: rgba(255, 255, 255, 0.1);
}

.program-config-card-edit-button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.program-config-card-label {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

.program-config-card-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.program-config-status-badge {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 999px;
  background-color: rgba(191, 168, 77, 0.2);
  border: 1px solid rgba(191, 168, 77, 0.3);
  color: rgba(191, 168, 77, 1);
  font-size: 14px;
  font-weight: 500;
  text-transform: capitalize;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  box-shadow: 0 0 2px rgba(191, 168, 77, 0.4);
  width: fit-content;
}

.program-config-description {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.program-config-description-edit {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.program-config-description-textarea {
  width: 100%;
  min-height: 120px;
  padding: 12px 16px;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  line-height: 1.6;
  resize: vertical;
  transition: all 0.2s ease;
}

.program-config-description-textarea:focus {
  outline: none;
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.1);
}

.program-config-description-textarea::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.program-config-description-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.program-config-description-actions .button {
  min-width: 100px;
  max-width: 150px;
  padding: 8px 16px;
}

.program-config-description-actions .button-text {
  font-size: 16px;
  font-weight: 500;
}

.program-config-card-clickable {
  cursor: pointer;
  transition: all 0.2s ease;
}

.program-config-card-clickable:hover {
  background-color: rgba(255, 255, 255, 0.03);
}

.program-config-image-preview {
  width: 100%;
  max-width: 400px;
  border-radius: 8px;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.3);
}

.program-config-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.program-config-empty {
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  font-style: italic;
  margin: 0;
}

.program-config-value {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 500;
  text-transform: capitalize;
}

/* Pills Section */
.program-config-pills {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  order: -1;
}

.program-config-pill {
  padding: 12px 20px;
  min-height: 32px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.4);
  transition: all 0.2s ease;
}

.program-config-pill-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.program-config-pill-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  flex-shrink: 0;
}

.program-config-pill:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.15);
}

.program-config-pill-value {
  color: rgba(255, 255, 255, 0.9);
  font-size: 16px;
  font-weight: 600;
  text-transform: capitalize;
  line-height: 1.2;
}

.program-config-pill-label {
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.2;
}

.program-config-pill-right {
  margin-left: auto;
  flex-direction: row;
  gap: 8px;
}

.program-config-pill-right .program-config-pill-content {
  gap: 4px;
}

.program-config-pill-right .program-config-pill-icon {
  margin-top: 0;
}

.program-config-pill-draft {
  background-color: rgba(255, 107, 107, 0.2);
  border-color: rgba(255, 107, 107, 0.4);
  box-shadow: 0 0 2px rgba(255, 107, 107, 0.5);
}

.program-config-pill-draft .program-config-pill-value {
  color: rgba(255, 107, 107, 1);
}

.program-config-pill-draft .program-config-pill-label {
  color: rgba(255, 107, 107, 0.7);
}

.program-config-pill-draft .program-config-pill-icon {
  color: rgba(255, 107, 107, 0.8);
}

.program-config-pill-published {
  background-color: rgba(191, 168, 77, 0.2);
  border-color: rgba(191, 168, 77, 0.4);
  box-shadow: 0 0 2px rgba(191, 168, 77, 0.5);
}

.program-config-pill-published .program-config-pill-value {
  color: rgba(191, 168, 77, 1);
}

.program-config-pill-published .program-config-pill-label {
  color: rgba(191, 168, 77, 0.7);
}

.program-config-pill-published .program-config-pill-icon {
  color: rgba(191, 168, 77, 0.8);
}

/* Responsive adjustments for sidebar-hidden */
.main-content-sidebar-hidden .program-tab-header-container {
  max-width: none;
  width: 100%;
}

.main-content-sidebar-hidden .program-tab-content {
  max-width: none;
  width: 100%;
}

/* Status Modal */
.status-modal-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.status-modal-description {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  margin: 0;
  line-height: 1.5;
}

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

.status-option {
  padding: 16px 20px;
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

.status-option:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.15);
}

.status-option-selected {
  border-width: 2px;
}

.status-option-draft.status-option-selected {
  background-color: rgba(255, 107, 107, 0.2);
  border-color: rgba(255, 107, 107, 0.6);
  color: rgba(255, 107, 107, 1);
}

.status-option-published.status-option-selected {
  background-color: rgba(191, 168, 77, 0.2);
  border-color: rgba(191, 168, 77, 0.6);
  color: rgba(191, 168, 77, 1);
}

.status-option-label {
  display: block;
}

.status-modal-actions {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}

.status-modal-actions .button {
  min-width: 120px;
  max-width: 200px;
}

/* Clickable Pill */
.program-config-pill-clickable {
  cursor: pointer;
}

.program-config-pill-clickable:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
}

/* Price Modal */
.price-modal-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.price-input-container {
  width: 100%;
}

.price-input-container input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.price-input-container input[type="number"]::-webkit-outer-spin-button,
.price-input-container input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.price-modal-info-text {
  color: rgba(255, 107, 107, 1);
  font-size: 13px;
  margin: 8px 0 0 0;
  line-height: 1.5;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

.price-modal-actions {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}

.price-modal-actions .button {
  min-width: 120px;
  max-width: 200px;
}

/* Duration Modal */
.duration-modal-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.duration-input-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.duration-input-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.duration-input {
  flex: 1;
  height: 48px;
  padding: 8px 16px;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 16px;
  font-weight: 500;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  text-align: center;
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.1);
  transition: all 0.2s ease;
}

.duration-input:focus {
  outline: none;
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.2);
}

.duration-input::-webkit-inner-spin-button,
.duration-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

.duration-input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.duration-arrows {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  justify-content: center;
}

.duration-spinner-button {
  width: 20px;
  height: 14px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: all 0.2s ease;
}

.duration-spinner-button:hover:not(:disabled) {
  opacity: 0.7;
}

.duration-spinner-button:active:not(:disabled) {
  transform: scale(0.95);
}

.duration-spinner-button:disabled {
  cursor: not-allowed;
  opacity: 0.3;
}

.duration-spinner-button:disabled svg {
  opacity: 0.5;
}

.duration-spinner-button svg {
  width: 12px;
  height: 12px;
}

.duration-modal-info-text {
  color: rgba(255, 255, 255, 0.6);
  font-size: 16px;
  margin: 0;
  line-height: 1.5;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  font-weight: 500;
}

.duration-modal-actions {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}

.duration-modal-actions .button {
  min-width: 120px;
  max-width: 200px;
}

/* Edit Program Modal */
.modal-content:has(.edit-program-modal-content) {
  overflow: hidden !important;
}

.edit-program-modal-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  overflow: hidden;
  max-height: calc(90vh - 120px);
}

.edit-program-modal-body {
  display: flex;
  flex-direction: row;
  gap: 24px;
  height: 600px;
  max-height: 600px;
  overflow: hidden;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.edit-program-modal-left {
  width: 300px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 0;
  min-width: 0;
}

.edit-program-input-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.edit-program-input-label {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 500;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

.edit-program-modal-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  overflow: hidden;
}

.edit-program-image-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  padding: 0;
  min-height: 500px;
  overflow: hidden;
  min-width: 0;
  max-width: 100%;
}

.edit-program-image-container {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
  background-color: #000;
  margin: 0;
}

.edit-program-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.edit-program-image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.edit-program-image-container:hover .edit-program-image-overlay {
  opacity: 1;
}

.edit-program-image-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.edit-program-image-action-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 16px;
  height: 32px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.4);
  text-align: center;
}

.edit-program-image-action-pill:hover:not(:disabled) {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
  transform: translateY(-1px);
}

.edit-program-image-action-pill:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.edit-program-image-action-text {
  white-space: nowrap;
}

.edit-program-image-delete-pill {
  background-color: rgba(255, 68, 68, 0.2);
  border-color: rgba(255, 68, 68, 0.3);
  color: rgba(255, 68, 68, 0.9);
  box-shadow: 0 0 2px rgba(255, 68, 68, 0.4);
}

.edit-program-image-delete-pill:hover:not(:disabled) {
  background-color: rgba(255, 68, 68, 0.3);
  border-color: rgba(255, 68, 68, 0.5);
  box-shadow: 0 0 4px rgba(255, 68, 68, 0.5);
}

.edit-program-image-progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.edit-program-image-progress-bar {
  width: 100%;
  height: 4px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
}

.edit-program-image-progress-fill {
  height: 100%;
  background-color: rgba(191, 168, 77, 1);
  transition: width 0.3s ease;
}

.edit-program-image-progress-text {
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  font-weight: 500;
}

.edit-program-no-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  height: 100%;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
}

.edit-program-image-upload-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 20px;
  height: 40px;
  border-radius: 999px;
  background-color: rgba(191, 168, 77, 0.2);
  border: 1px solid rgba(191, 168, 77, 0.3);
  color: rgba(191, 168, 77, 1);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  box-shadow: 0 0 2px rgba(191, 168, 77, 0.4);
}

.edit-program-image-upload-button:hover:not(:disabled) {
  background-color: rgba(191, 168, 77, 0.3);
  border-color: rgba(191, 168, 77, 0.5);
  box-shadow: 0 0 4px rgba(191, 168, 77, 0.5);
  transform: translateY(-1px);
}

.edit-program-image-upload-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.edit-program-modal-actions {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}

.edit-program-modal-actions .button {
  min-width: 120px;
  max-width: 200px;
}

.cancel-button-onboarding {
  background-color: transparent;
  height: 50px;
  min-width: 200px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

.cancel-button-onboarding:hover:not(:disabled) {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.4);
}

.cancel-button-onboarding:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.cancel-button-onboarding-text {
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
  font-weight: 500;
}

/* Streak Modal */
.streak-modal-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
}

.streak-modal-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.streak-row {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.streak-toggle-section {
  flex-shrink: 0;
}

.streak-toggle-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 500;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  cursor: pointer;
}

/* Elegant Toggle Switch */
.elegant-toggle {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 28px;
}

.elegant-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.elegant-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.15);
  transition: 0.3s;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.elegant-toggle-slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background-color: rgba(255, 255, 255, 0.9);
  transition: 0.3s;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.elegant-toggle input:checked + .elegant-toggle-slider {
  background-color: rgba(191, 168, 77, 0.3);
  border-color: rgba(191, 168, 77, 0.5);
}

.elegant-toggle input:checked + .elegant-toggle-slider:before {
  transform: translateX(20px);
  background-color: rgba(191, 168, 77, 1);
  box-shadow: 0 0 4px rgba(191, 168, 77, 0.5);
}

.elegant-toggle input:focus + .elegant-toggle-slider {
  box-shadow: 0 0 4px rgba(191, 168, 77, 0.4);
}

.streak-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: rgba(191, 168, 77, 1);
}

.streak-input-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.streak-input-label {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 500;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

.streak-input-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.streak-input {
  flex: 1;
  padding: 12px 16px;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  transition: all 0.2s ease;
  -moz-appearance: textfield;
  appearance: textfield;
}

.streak-input::-webkit-outer-spin-button,
.streak-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

.streak-input:focus {
  outline: none;
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.1);
}

.streak-arrows {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.streak-spinner-button {
  width: 20px;
  height: 14px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: all 0.2s ease;
}

.streak-spinner-button:hover:not(:disabled) {
  opacity: 0.7;
}

.streak-spinner-button:active:not(:disabled) {
  transform: scale(0.95);
}

.streak-spinner-button:disabled {
  cursor: not-allowed;
  opacity: 0.3;
}

.streak-spinner-button:disabled svg {
  opacity: 0.5;
}

.streak-spinner-button svg {
  width: 12px;
  height: 12px;
}

.streak-modal-actions {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}

.streak-modal-actions .button {
  min-width: 120px;
  max-width: 200px;
}

/* Weight Suggestions Modal */
.weight-suggestions-modal-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
}

.weight-suggestions-modal-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.weight-suggestions-toggle-section {
  display: flex;
  align-items: center;
}

.weight-suggestions-toggle-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 500;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  cursor: pointer;
}

.weight-suggestions-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: rgba(191, 168, 77, 1);
}

.weight-suggestions-modal-actions {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}

.weight-suggestions-modal-actions .button {
  min-width: 120px;
  max-width: 200px;
}

/* Free Trial Modal */
.free-trial-modal-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
}

.free-trial-modal-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.free-trial-toggle-section {
  display: flex;
  align-items: center;
}

.free-trial-toggle-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 500;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  cursor: pointer;
}

.free-trial-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: rgba(191, 168, 77, 1);
}

.free-trial-duration-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.free-trial-duration-label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

.free-trial-duration-input {
  width: 120px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background-color: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  outline: none;
}

.free-trial-duration-input:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.free-trial-duration-input::-webkit-inner-spin-button,
.free-trial-duration-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

.free-trial-duration-input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.free-trial-duration-input-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
}

.free-trial-duration-arrows {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  justify-content: center;
}

.free-trial-duration-spinner-button {
  width: 20px;
  height: 14px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: all 0.2s ease;
}

.free-trial-duration-spinner-button:hover:not(:disabled) {
  opacity: 0.7;
}

.free-trial-duration-spinner-button:active:not(:disabled) {
  transform: scale(0.95);
}

.free-trial-duration-spinner-button:disabled {
  cursor: not-allowed;
  opacity: 0.3;
}

.free-trial-duration-spinner-button:disabled svg {
  opacity: 0.5;
}

.free-trial-duration-spinner-button svg {
  width: 12px;
  height: 12px;
}

.free-trial-duration-helper {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
}

.free-trial-modal-actions {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}

.free-trial-modal-actions .button {
  min-width: 120px;
  max-width: 200px;
}

/* Auxiliary Libraries Modal */
.auxiliary-libraries-modal-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
}

.auxiliary-libraries-body {
  min-height: 200px;
  max-height: 500px;
  overflow-y: auto;
}

.auxiliary-libraries-loading,
.auxiliary-libraries-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
}

.auxiliary-libraries-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

.auxiliary-library-card {
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.4);
}

.auxiliary-library-card:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
}

.auxiliary-library-card-selected {
  background-color: rgba(191, 168, 77, 0.15);
  border-color: rgba(191, 168, 77, 0.4);
  box-shadow: 0 0 4px rgba(191, 168, 77, 0.4);
}

.auxiliary-library-card-selected:hover {
  background-color: rgba(191, 168, 77, 0.2);
  border-color: rgba(191, 168, 77, 0.5);
}

.auxiliary-library-card-content {
  flex: 1;
  min-width: 0;
}

.auxiliary-library-card-title {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 8px 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

.auxiliary-library-card-description {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

.auxiliary-library-card-checkbox {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auxiliary-libraries-modal-actions {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}

.auxiliary-libraries-modal-actions .button {
  min-width: 120px;
  max-width: 200px;
}

/* Anuncios Modal */
.modal-content:has(.anuncios-modal-content) {
  overflow: hidden !important;
}

.anuncios-modal-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  overflow: hidden;
  max-height: calc(90vh - 120px);
}

.anuncios-modal-body {
  display: flex;
  flex-direction: row;
  gap: 24px;
  height: 600px;
  max-height: 600px;
  overflow: hidden;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.anuncios-modal-left {
  width: 300px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 0;
  min-width: 0;
}

.anuncios-screens-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.anuncios-screens-label {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 500;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

.anuncios-screens-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  flex: 1;
}

.anuncios-screens-container::-webkit-scrollbar {
  width: 8px;
}

.anuncios-screens-container::-webkit-scrollbar-track {
  background-color: #2a2a2a;
}

.anuncios-screens-container::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

.anuncios-screens-container::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

.anuncios-screen-item {
  padding: 12px 16px;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}

.anuncios-screen-item:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.15);
}

.anuncios-screen-item-active {
  background-color: rgba(191, 168, 77, 0.15);
  border-color: rgba(191, 168, 77, 0.4);
}

.anuncios-screen-name {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

.anuncios-screen-count {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

.anuncios-no-screens {
  padding: 20px;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
}

.anuncios-modal-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  overflow: hidden;
}

.anuncios-video-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  padding: 24px;
  min-height: 500px;
  overflow: hidden;
  min-width: 0;
  max-width: 100%;
  position: relative;
}

.anuncios-video-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.anuncios-video-title {
  font-size: 16px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

.anuncios-video-selector {
  display: flex;
  align-items: center;
  gap: 8px;
}

.anuncios-video-selector-label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

.anuncios-video-select {
  padding: 6px 12px;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  cursor: pointer;
}

.anuncios-video-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 0;
}

.anuncios-video-content-edit {
  pointer-events: none;
}

.anuncios-video-content-edit .anuncios-video-edit-overlay {
  pointer-events: auto;
}

.anuncios-video-container {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
  background-color: #000;
}

.anuncios-video-player {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
  background-color: #000;
  display: block;
}

.anuncios-video-actions-overlay {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  flex-direction: row;
  gap: 8px;
  z-index: 10;
}

.anuncios-video-edit-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.3);
  pointer-events: auto;
}

.anuncios-video-edit-buttons {
  pointer-events: auto;
}

.anuncios-video-action-pill,
.anuncios-video-action-pill label {
  pointer-events: auto;
  position: relative;
  z-index: 11;
}

.anuncios-video-edit-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.anuncios-video-edit-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
}

.anuncios-video-action-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.anuncios-video-action-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 16px;
  height: 32px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.4);
  text-align: center;
}

.anuncios-video-action-pill:hover:not(:disabled) {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
  transform: translateY(-1px);
}

.anuncios-video-action-pill:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.anuncios-video-action-text {
  white-space: nowrap;
}

.anuncios-video-delete-pill {
  background-color: rgba(255, 68, 68, 0.2);
  border-color: rgba(255, 68, 68, 0.3);
  color: rgba(255, 68, 68, 0.9);
  box-shadow: 0 0 2px rgba(255, 68, 68, 0.4);
}

.anuncios-video-delete-pill:hover:not(:disabled) {
  background-color: rgba(255, 68, 68, 0.3);
  border-color: rgba(255, 68, 68, 0.5);
  box-shadow: 0 0 4px rgba(255, 68, 68, 0.5);
}

.anuncios-video-save-pill {
  background-color: rgba(191, 168, 77, 0.2);
  border-color: rgba(191, 168, 77, 0.3);
  color: rgba(191, 168, 77, 1);
  box-shadow: 0 0 2px rgba(191, 168, 77, 0.4);
}

.anuncios-video-save-pill:hover:not(:disabled) {
  background-color: rgba(191, 168, 77, 0.3);
  border-color: rgba(191, 168, 77, 0.5);
  box-shadow: 0 0 4px rgba(191, 168, 77, 0.5);
}

.anuncios-video-progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.anuncios-video-progress-bar {
  width: 100%;
  height: 4px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
}

.anuncios-video-progress-fill {
  height: 100%;
  background-color: rgba(191, 168, 77, 1);
  transition: width 0.3s ease;
}

.anuncios-video-progress-text {
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  font-weight: 500;
}

.anuncios-no-video,
.anuncios-no-screen-selected {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  flex: 1;
}

.anuncios-video-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
}

.anuncios-video-selector-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.anuncios-video-add-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(191, 168, 77, 0.2);
  border: 1px solid rgba(191, 168, 77, 0.3);
  color: rgba(191, 168, 77, 1);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 0 2px rgba(191, 168, 77, 0.4);
  position: absolute;
  bottom: 0;
  right: 0;
  pointer-events: auto;
  z-index: 20;
}

.anuncios-video-add-button:hover:not(:disabled) {
  background-color: rgba(191, 168, 77, 0.3);
  border-color: rgba(191, 168, 77, 0.5);
  box-shadow: 0 0 4px rgba(191, 168, 77, 0.5);
  transform: translateY(-1px);
}

.anuncios-video-add-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.anuncios-video-add-icon {
  font-size: 24px;
  font-weight: 300;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* Intro Video Modal */
.modal-content:has(.intro-video-modal-content) {
  overflow: hidden !important;
}

.intro-video-modal-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  overflow: hidden;
  max-height: calc(90vh - 120px);
}

.intro-video-modal-body {
  display: flex;
  flex-direction: row;
  gap: 24px;
  height: 600px;
  max-height: 600px;
  overflow: hidden;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.intro-video-modal-left {
  width: 0;
  flex-shrink: 0;
  display: none;
  flex-direction: column;
  gap: 20px;
  min-height: 0;
  min-width: 0;
}

.intro-video-modal-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  overflow: hidden;
}

.intro-video-right-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  padding: 0;
  min-height: 500px;
  overflow: hidden;
  min-width: 0;
  max-width: 100%;
}

.intro-video-right-content-edit {
  padding: 0;
}

.intro-video-view {
  width: 100%;
  height: 100%;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}

.intro-video-container {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 8px;
  overflow: hidden;
  background-color: #000;
}

.intro-video-player {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
  background-color: #000;
  display: block;
}

.intro-video-actions-overlay {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  flex-direction: row;
  gap: 8px;
  z-index: 10;
  pointer-events: auto;
}

.intro-video-edit-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.3);
  pointer-events: auto;
}

.intro-video-edit-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  pointer-events: auto;
}

.intro-video-edit-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
}

.intro-video-action-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.intro-video-action-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 16px;
  height: 32px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.4);
  text-align: center;
  pointer-events: auto;
  position: relative;
  z-index: 11;
}

.intro-video-action-pill:hover:not(:disabled) {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
  transform: translateY(-1px);
}

.intro-video-action-pill:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.intro-video-action-text {
  white-space: nowrap;
}

.intro-video-delete-pill {
  background-color: rgba(255, 68, 68, 0.2);
  border-color: rgba(255, 68, 68, 0.3);
  color: rgba(255, 68, 68, 0.9);
  box-shadow: 0 0 2px rgba(255, 68, 68, 0.4);
}

.intro-video-delete-pill:hover:not(:disabled) {
  background-color: rgba(255, 68, 68, 0.3);
  border-color: rgba(255, 68, 68, 0.5);
  box-shadow: 0 0 4px rgba(255, 68, 68, 0.5);
}

.intro-video-save-pill {
  background-color: rgba(191, 168, 77, 0.2);
  border-color: rgba(191, 168, 77, 0.3);
  color: rgba(191, 168, 77, 1);
  box-shadow: 0 0 2px rgba(191, 168, 77, 0.4);
}

.intro-video-save-pill:hover:not(:disabled) {
  background-color: rgba(191, 168, 77, 0.3);
  border-color: rgba(191, 168, 77, 0.5);
  box-shadow: 0 0 4px rgba(191, 168, 77, 0.5);
}

.intro-video-progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.intro-video-progress-bar {
  width: 100%;
  height: 4px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
}

.intro-video-progress-fill {
  height: 100%;
  background-color: rgba(191, 168, 77, 1);
  transition: width 0.3s ease;
}

.intro-video-progress-text {
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  font-weight: 500;
}

.intro-video-no-video {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 40px 20px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  width: 100%;
  max-width: 800px;
  height: 100%;
  max-height: 600px;
}

.intro-video-upload-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.intro-video-upload-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 20px;
  height: 40px;
  border-radius: 999px;
  background-color: rgba(191, 168, 77, 0.2);
  border: 1px solid rgba(191, 168, 77, 0.3);
  color: rgba(191, 168, 77, 1);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  box-shadow: 0 0 2px rgba(191, 168, 77, 0.4);
}

.intro-video-upload-button:hover:not(:disabled) {
  background-color: rgba(191, 168, 77, 0.3);
  border-color: rgba(191, 168, 77, 0.5);
  box-shadow: 0 0 4px rgba(191, 168, 77, 0.5);
  transform: translateY(-1px);
}

.intro-video-upload-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Modules Content */
.modules-content {
  width: 100%;
}

.page-section-title {
  font-size: 2rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 24px 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

.modules-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  margin-bottom: 32px;
}

.module-action-pill {
  padding: 6px 20px;
  height: 32px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.4);
}

.module-action-pill:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.15);
}

.module-action-icon {
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
}

.module-action-text {
  font-size: 14px;
  font-weight: 500;
}

.module-action-pill-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Modules List */
.modules-loading,
.modules-empty {
  padding: 40px 20px;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
}

.modules-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 24px;
}

.module-card {
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 24px;
  min-height: 150px;
  /* CSS containment for better scroll performance */
  contain: layout style paint;
  display: flex;
  flex-direction: column;
  transition: all 0.2s ease;
  cursor: pointer;
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.4);
  position: relative;
  justify-content: center;
}

.module-card:hover {
  border-color: rgba(191, 168, 77, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 0 2px rgba(191, 168, 77, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
}

.module-card-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: 1;
  position: relative;
  z-index: 0;
}

.module-card-title {
  font-size: 2rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 8px 0;
}

.module-card-description {
  font-size: 0.9rem;
  color: #cccccc;
  margin: 0;
  line-height: 1.5;
}

.module-card-footer {
  position: absolute;
  bottom: 24px;
  right: 24px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  z-index: 0;
}

.module-card-edit-mode {
  cursor: default;
  pointer-events: none;
  position: relative;
}

.module-card-edit-mode .module-delete-button {
  pointer-events: auto;
}

.module-card-edit-mode .module-drag-handle {
  pointer-events: auto;
}

/* Use pseudo-element overlay for dimming instead of opacity */
.module-card-edit-mode::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 12px;
  z-index: 1;
  pointer-events: none;
}

.module-card-edit-mode:hover {
  transform: none;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.4);
}

.module-delete-button {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 6px 20px;
  border-radius: 999px;
  background-color: rgba(255, 68, 68, 0.2);
  border: 1px solid rgba(255, 68, 68, 0.3);
  color: rgba(255, 68, 68, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
  pointer-events: auto;
  box-shadow: 0 0 2px rgba(255, 68, 68, 0.4);
  font-size: 14px;
  font-weight: 500;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

.module-delete-button:hover {
  background-color: rgba(255, 68, 68, 0.3);
  border-color: rgba(255, 68, 68, 0.5);
  transform: scale(1.05);
}

.module-delete-icon {
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
}

.module-drag-handle {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 8px;
  border-radius: 6px;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  transition: all 0.2s ease;
  z-index: 10;
  pointer-events: auto;
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.2);
}

.module-drag-handle:active {
  cursor: grabbing;
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.8);
}

.module-drag-handle:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.8);
}

.module-card-dragging {
  opacity: 0.5;
  transform: scale(0.98);
}

.module-card-edit-mode .module-drag-handle {
  pointer-events: auto;
}

.module-card-number {
  position: absolute;
  top: 50%;
  left: 32px;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.module-card-edit-mode .module-card-number {
  left: 56px;
}

.module-incomplete-icon {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  pointer-events: none;
}

.module-incomplete-icon svg {
  width: 100%;
  height: 100%;
}

.module-incomplete-icon svg path {
  fill: rgba(255, 152, 0, 0.4);
  stroke: rgba(255, 152, 0, 0.6);
}

/* Sessions Content */
.sessions-content {
  width: 100%;
}


.sessions-loading,
.sessions-empty {
  padding: 40px 20px;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
}

.sessions-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

.session-card {
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 24px;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  transition: all 0.2s ease;
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.4);
  position: relative;
  /* CSS containment for better scroll performance */
  contain: layout style paint;
  justify-content: center;
  overflow: hidden;
}

.session-card-with-image {
  background-color: transparent;
  position: relative;
}

.session-card-with-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6));
  z-index: 1;
  pointer-events: none;
}

.session-card:hover {
  border-color: rgba(191, 168, 77, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 0 2px rgba(191, 168, 77, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
}

.session-card-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: 1;
  position: relative;
  z-index: 2;
}

.session-card-title {
  font-size: 2rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 8px 0;
}

.session-card-description {
  font-size: 0.9rem;
  color: #cccccc;
  margin: 0;
  line-height: 1.5;
}

.sessions-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  margin-bottom: 32px;
}

.session-action-pill {
  padding: 6px 20px;
  height: 32px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.4);
}

.session-action-pill:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.15);
}

.session-action-icon {
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
}

.session-action-text {
  font-size: 14px;
  font-weight: 500;
}

.session-action-pill-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.session-card-edit-mode {
  cursor: default;
  pointer-events: none;
  position: relative;
}

.session-card-edit-mode .session-delete-button {
  pointer-events: auto;
}

/* Use pseudo-element overlay for dimming instead of opacity */
.session-card-edit-mode::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 12px;
  z-index: 1;
  pointer-events: none;
}

.session-card-edit-mode:hover {
  transform: none;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.4);
}

.session-delete-button {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 6px 20px;
  border-radius: 999px;
  background-color: rgba(255, 68, 68, 0.2);
  border: 1px solid rgba(255, 68, 68, 0.3);
  color: rgba(255, 68, 68, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
  pointer-events: auto;
  box-shadow: 0 0 2px rgba(255, 68, 68, 0.4);
  font-size: 14px;
  font-weight: 500;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

.session-delete-button:hover {
  background-color: rgba(255, 68, 68, 0.3);
  border-color: rgba(255, 68, 68, 0.5);
  transform: scale(1.05);
}

.session-delete-icon {
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
}

.session-drag-handle {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 8px;
  border-radius: 6px;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  transition: all 0.2s ease;
  z-index: 10;
  pointer-events: auto;
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.2);
}

.session-drag-handle:active {
  cursor: grabbing;
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.8);
}

.session-drag-handle:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.8);
}

.session-card-dragging {
  opacity: 0.5;
  transform: scale(0.98);
}

.session-card-edit-mode .session-drag-handle {
  pointer-events: auto;
}

.session-card-number {
  position: absolute;
  top: 50%;
  left: 32px;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

.session-card-edit-mode .session-card-number {
  left: 56px;
}

.session-incomplete-icon {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  pointer-events: none;
}

.session-incomplete-icon svg {
  width: 100%;
  height: 100%;
}

.session-incomplete-icon svg path {
  fill: rgba(255, 152, 0, 0.4);
  stroke: rgba(255, 152, 0, 0.6);
}

/* Exercises Content */
.exercises-content {
  width: 100%;
  padding: 24px;
}

.exercises-loading,
.exercises-empty {
  padding: 40px 20px;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
}

.exercises-empty {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
}

.exercises-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 24px;
}

/* When exercises-list contains series cards, use vertical layout */
.exercises-list:has(.exercise-series-card) {
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
  gap: 12px;
  margin-top: 0;
}

.exercise-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 30px 30px 30px 96px;
  transition: all 0.2s ease;
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.4);
  /* CSS containment for better scroll performance */
  contain: layout style paint;
}

.exercise-card:hover {
  border-color: rgba(191, 168, 77, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 0 2px rgba(191, 168, 77, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
}

.exercise-incomplete-icon {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  pointer-events: none;
}

.exercise-incomplete-icon svg {
  width: 100%;
  height: 100%;
}

.exercise-incomplete-icon svg path {
  fill: rgba(255, 152, 0, 0.4);
  stroke: rgba(255, 152, 0, 0.6);
}

.exercise-card-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.exercise-card-number {
  position: absolute;
  top: 50%;
  left: 32px;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
}

.exercise-card-edit-mode {
  padding-left: 120px;
}

.exercise-card-edit-mode .exercise-card-number {
  left: 56px;
}

.exercise-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 0;
}

.exercise-card-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
  display: flex;
  align-items: center;
}

.exercise-card-description {
  font-size: 0.9rem;
  color: #cccccc;
  margin: 0 0 16px 0;
  line-height: 1.5;
}

.exercise-card-video {
  margin-top: 16px;
  border-radius: 8px;
  overflow: hidden;
}

.exercise-card-video-player {
  width: 100%;
  height: auto;
  display: block;
  background-color: #000;
}

/* Exercise Legend */
.exercises-legend {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}

.exercises-legend-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.exercise-incomplete-icon-small {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 152, 0, 0.5);
}

.exercise-incomplete-icon-small svg {
  width: 100%;
  height: 100%;
}

.exercise-incomplete-icon-small svg path {
  fill: rgba(255, 152, 0, 0.4);
  stroke: rgba(255, 152, 0, 0.6);
}

.exercise-incomplete-icon-inline {
  display: inline-flex;
  margin-left: 6px;
  vertical-align: middle;
}

.exercise-incomplete-icon-inline svg {
  width: 14px;
  height: 14px;
}

.exercise-incomplete-icon-inline svg path {
  fill: rgba(255, 152, 0, 0.5);
  stroke: rgba(255, 152, 0, 0.7);
}

.exercises-legend-text {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 400;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

/* Sessions Legend */
.sessions-legend {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}

.sessions-legend-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.session-incomplete-icon-small {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 152, 0, 0.5);
}

.session-incomplete-icon-small svg {
  width: 100%;
  height: 100%;
}

.session-incomplete-icon-small svg path {
  fill: rgba(255, 152, 0, 0.4);
  stroke: rgba(255, 152, 0, 0.6);
}

.sessions-legend-text {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 400;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

/* Modules Legend */
.modules-legend {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}

.modules-legend-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.module-incomplete-icon-small {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 152, 0, 0.5);
}

.module-incomplete-icon-small svg {
  width: 100%;
  height: 100%;
}

.module-incomplete-icon-small svg path {
  fill: rgba(255, 152, 0, 0.4);
  stroke: rgba(255, 152, 0, 0.6);
}

.modules-legend-text {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 400;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

/* Exercise Actions */
.exercises-actions {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}

.exercise-action-pill {
  padding: 6px 20px;
  height: 32px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.exercise-action-pill:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.15);
}

.exercise-action-icon {
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
}

.exercise-action-text {
  font-size: 14px;
  font-weight: 500;
}

.exercise-action-pill-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.exercise-card-edit-mode {
  cursor: default;
  pointer-events: none;
  position: relative;
}

.exercise-card-edit-mode .exercise-delete-button {
  pointer-events: auto;
}

/* Use pseudo-element overlay for dimming instead of opacity */
.exercise-card-edit-mode::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  z-index: 1;
  pointer-events: none;
}

.exercise-card-edit-mode:hover {
  transform: none;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.4);
}

.exercise-delete-button {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 6px 20px;
  border-radius: 999px;
  background-color: rgba(255, 68, 68, 0.2);
  border: 1px solid rgba(255, 68, 68, 0.4);
  color: #ff4444;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.exercise-delete-button:hover {
  background-color: rgba(255, 68, 68, 0.3);
  border-color: rgba(255, 68, 68, 0.5);
  transform: scale(1.05);
}

.exercise-delete-icon {
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
}

.exercise-drag-handle {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 8px;
  border-radius: 6px;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
  cursor: grab;
  transition: all 0.2s ease;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.exercise-drag-handle:active {
  cursor: grabbing;
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.8);
}

.exercise-drag-handle svg {
  width: 16px;
  height: 16px;
}

.exercise-drag-handle:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.8);
}

.exercise-card-dragging {
  opacity: 0.5;
}

.exercise-card-edit-mode .exercise-drag-handle {
  pointer-events: auto;
}

/* Exercise Tab Content */
.exercise-tab-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0;
  overflow-y: auto;
}

.exercise-tab-content::-webkit-scrollbar {
  width: 8px;
}

.exercise-tab-content::-webkit-scrollbar-track {
  background-color: #2a2a2a;
}

.exercise-tab-content::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

.exercise-tab-content::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

.exercise-tab-empty {
  padding: 40px 20px;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
}

/* Exercise General Content */
.exercise-general-content {
  width: 100%;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.exercise-general-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.exercise-general-subtitle {
  font-size: 16px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

.exercise-general-subtitle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.exercise-general-add-button {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  padding: 0;
  flex-shrink: 0;
}

.exercise-general-add-button:hover {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

.exercise-general-add-icon {
  font-size: 18px;
  font-weight: 300;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.exercise-general-actions-container {
  position: relative;
  display: flex;
  align-items: center;
}

.exercise-general-edit-button {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  padding: 0;
  flex-shrink: 0;
}

.exercise-general-edit-button:hover {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

.exercise-general-edit-button svg {
  width: 14px;
  height: 14px;
}

.exercise-general-actions-dropdown {
  display: flex;
  align-items: center;
  gap: 8px;
}

.exercise-general-action-button {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  padding: 0;
  flex-shrink: 0;
}

.exercise-general-action-button:hover {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

.exercise-general-action-icon {
  font-size: 18px;
  font-weight: 300;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.exercise-general-action-text {
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

.exercise-general-action-button-save {
  width: auto;
  min-width: 50px;
  padding: 0 8px;
  border-radius: 12px;
}

.exercise-general-action-button svg {
  width: 14px;
  height: 14px;
}

.exercise-general-empty {
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  font-style: italic;
  margin: 0;
}

/* Exercise Horizontal Cards */
.exercise-horizontal-cards-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.exercise-horizontal-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  transition: all 0.2s ease;
  gap: 12px;
}

.exercise-horizontal-card:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

.exercise-horizontal-card-name {
  flex: 1;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.exercise-horizontal-card-edit {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background-color: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  padding: 0;
  flex-shrink: 0;
}

.exercise-horizontal-card-edit:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
}

.exercise-horizontal-card-edit svg {
  width: 16px;
  height: 16px;
}

.exercise-horizontal-card-delete {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background-color: transparent;
  border: none;
  color: rgba(255, 68, 68, 0.7);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  padding: 0;
  flex-shrink: 0;
}

.exercise-horizontal-card-delete:hover {
  background-color: rgba(255, 68, 68, 0.1);
  color: rgba(255, 68, 68, 0.9);
}

.exercise-horizontal-card-delete-icon {
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Measure Selection Modal */
.measure-selection-modal-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
}

.measure-selection-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.measure-selection-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

.measure-selection-item:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.15);
}

.measure-selection-item-name {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

.measure-selection-item:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Exercise Alternatives Groups */
.exercise-alternatives-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.exercise-alternatives-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.exercise-alternatives-library-title {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

/* Library/Exercise Selection Modal */
.library-exercise-selection-modal-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  min-height: 400px;
  max-height: 600px;
  overflow-y: auto;
}

.library-exercise-selection-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.library-exercise-selection-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.library-exercise-selection-back-button {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  cursor: pointer;
  padding: 8px 0;
  transition: color 0.2s ease;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

.library-exercise-selection-back-button:hover {
  color: rgba(255, 255, 255, 0.9);
}

.library-exercise-selection-step-title {
  font-size: 16px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

.library-exercise-selection-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 400px;
  overflow-y: auto;
}

.library-exercise-selection-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

.library-exercise-selection-item:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.15);
}

.library-exercise-selection-item-name {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

.library-exercise-selection-item-count {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

.library-exercise-selection-loading,
.library-exercise-selection-empty {
  padding: 40px 20px;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
}

.library-exercise-selection-modal-content::-webkit-scrollbar {
  width: 8px;
}

.library-exercise-selection-modal-content::-webkit-scrollbar-track {
  background-color: #2a2a2a;
}

.library-exercise-selection-modal-content::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

.library-exercise-selection-modal-content::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

.library-exercise-selection-list::-webkit-scrollbar {
  width: 8px;
}

.library-exercise-selection-list::-webkit-scrollbar-track {
  background-color: #2a2a2a;
}

.library-exercise-selection-list::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

.library-exercise-selection-list::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

/* Exercise Series/Sets Styles */
.exercise-series-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.exercise-series-card {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.2s ease;
}

.exercise-series-card:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

.exercise-series-card-header {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  background: none;
  border: none;
  width: 100%;
  cursor: pointer;
  gap: 16px;
  transition: background-color 0.2s ease;
  position: relative;
  justify-content: space-between;
}

.exercise-series-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.exercise-series-card-edit-mode .exercise-series-card-header {
  padding-left: 48px;
  padding-right: 48px;
}

.exercise-series-duplicate-button {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.exercise-series-duplicate-button:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
}

.exercise-series-duplicate-button:active {
  transform: scale(0.97);
}

.exercise-series-duplicate-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.exercise-series-duplicate-icon {
  font-size: 13px;
  line-height: 1;
}

.exercise-series-card-header:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.exercise-series-number {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  min-width: 32px;
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

.exercise-series-info {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  text-align: left;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

.exercise-series-expand-icon {
  color: rgba(255, 255, 255, 0.6);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.exercise-series-expand-icon.expanded {
  transform: rotate(180deg);
}

.exercise-series-content {
  padding: 0 20px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.exercise-series-inputs-row {
  display: flex;
  align-items: center;
  gap: 0;
}

.exercise-series-headers-row {
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.exercise-series-set-number-space {
  width: 32px;
  margin-right: 16px;
}

.exercise-series-set-number-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  margin-right: 16px;
}

.exercise-series-set-number {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

.exercise-series-inputs-container {
  display: flex;
  flex: 1;
  gap: 12px;
  align-items: center;
}

.exercise-series-input-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.exercise-series-input-label {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

.exercise-series-input {
  width: 100%;
  padding: 8px 12px;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  transition: all 0.2s ease;
}

.exercise-series-input:focus {
  outline: none;
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
}

.exercise-series-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

/* Intensity Input Wrapper */
.exercise-series-intensity-input-wrapper {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
}

.exercise-series-intensity-input {
  flex: 1;
  padding-right: 8px;
}

.exercise-series-intensity-suffix {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Exercise Series Actions */
.exercise-series-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.exercise-series-action-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 20px;
  height: 32px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.exercise-series-action-pill:hover:not(.exercise-series-action-pill-disabled) {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.15);
}

.exercise-series-action-pill-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.exercise-series-action-icon {
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
}

.exercise-series-action-text {
  font-size: 14px;
  font-weight: 500;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

/* Exercise Series Edit Mode */
.exercise-series-card-edit-mode {
  position: relative;
}

.exercise-series-card-dragging {
  opacity: 0.5;
}

.exercise-series-delete-button {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: rgba(255, 0, 0, 0.2);
  border: 1px solid rgba(255, 0, 0, 0.4);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: all 0.2s ease;
  padding: 0;
}

.exercise-series-delete-button:hover {
  background-color: rgba(255, 0, 0, 0.3);
  border-color: rgba(255, 0, 0, 0.6);
}

.exercise-series-delete-icon {
  font-size: 16px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1;
}

.exercise-series-drag-handle {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  z-index: 10;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.2s ease;
}

.exercise-series-drag-handle:active {
  cursor: grabbing;
}

.exercise-series-drag-handle:hover {
  color: rgba(255, 255, 255, 0.9);
}

/* Exercise Series Save Button */
.exercise-series-save-button {
  padding: 6px 16px;
  border-radius: 8px;
  background-color: rgba(191, 168, 77, 0.2);
  border: 1px solid rgba(191, 168, 77, 0.4);
  color: rgba(191, 168, 77, 1);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

.exercise-series-save-button:hover:not(:disabled) {
  background-color: rgba(191, 168, 77, 0.3);
  border-color: rgba(191, 168, 77, 0.5);
  transform: translateY(-1px);
}

.exercise-series-save-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.exercise-series-save-text {
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}

/* Create Exercise Modal Requirement Messages */
.create-exercise-requirement-message {
  font-size: 13px;
  color: rgba(255, 152, 0, 0.8);
  font-weight: 400;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  margin-top: 8px;
  margin-bottom: 0;
}

.create-exercise-requirements-summary {
  margin-bottom: 16px;
  padding: 12px;
  background-color: rgba(255, 152, 0, 0.1);
  border: 1px solid rgba(255, 152, 0, 0.3);
  border-radius: 8px;
}

.create-exercise-requirements-text {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 400;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  margin: 0;
  line-height: 1.6;
}

.create-exercise-requirement-item {
  display: inline-block;
  color: rgba(255, 152, 0, 0.9);
  font-weight: 500;
  margin-left: 4px;
}

/* Lab Page Styles */
.lab-content {
  padding: 32px;
}

.lab-loading,
.lab-error,
.lab-empty {
  padding: 40px 20px;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 16px;
}

.lab-error {
  color: #FF6B6B;
}

.lab-section {
  margin-bottom: 48px;
}

.lab-section-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 24px 0;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.lab-subsection-title {
  font-size: 1.125rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  margin: 24px 0 16px 0;
}

.lab-enrollment-container {
  display: flex;
  flex-direction: row;
  gap: 24px;
  align-items: flex-start;
}

.lab-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}

.lab-enrollment-container .lab-chart-container {
  flex: 0 0 400px;
  min-width: 0;
  margin-bottom: 0;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 24px;
  padding-left: 24px;
  padding-right: 24px;
}

.lab-enrollment-container .lab-chart-container .lab-subsection-title {
  margin-top: 24px;
  margin-bottom: 16px;
}

@media (max-width: 1024px) {
  .lab-enrollment-container {
    flex-direction: column;
  }
  
  .lab-enrollment-container .lab-chart-container {
    flex: 1;
    width: 100%;
  }
}

.lab-program-stats-container {
  display: flex;
  flex-direction: row;
  gap: 24px;
  align-items: flex-start;
  margin-top: 24px;
}

.lab-program-stats-container .lab-chart-container {
  flex: 1;
  min-width: 0;
}

.lab-chart-full-width {
  width: 100%;
  margin-bottom: 24px;
}

.lab-demographics-container {
  display: flex;
  flex-direction: row;
  gap: 24px;
  align-items: flex-start;
  margin-bottom: 48px;
}

@media (max-width: 1024px) {
  .lab-program-stats-container {
    flex-direction: column;
  }
  
  .lab-program-stats-container .lab-chart-container {
    width: 100%;
  }
}

.lab-demographics-container .lab-chart-container {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
  margin-top: 0;
}

@media (max-width: 1024px) {
  .lab-demographics-container {
    flex-direction: column;
  }
  
  .lab-demographics-container .lab-chart-container {
    width: 100%;
  }
}

.lab-engagement-container {
  display: flex;
  flex-direction: row;
  gap: 24px;
  align-items: flex-start;
  margin-bottom: 24px;
}

.lab-engagement-container .lab-metrics-grid {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}

.lab-engagement-container .lab-chart-container {
  flex: 0 0 400px;
  min-width: 0;
  margin-bottom: 0;
  margin-top: 0;
  padding-top: 24px;
}

.lab-engagement-container .lab-chart-container .lab-subsection-title {
  margin-top: 0;
  margin-bottom: 16px;
}

@media (max-width: 1024px) {
  .lab-engagement-container {
    flex-direction: column;
  }
  
  .lab-engagement-container .lab-chart-container {
    flex: 1;
    width: 100%;
  }
}

.lab-top-users-container {
  display: flex;
  flex-direction: row;
  gap: 24px;
  align-items: flex-start;
  margin-top: 24px;
}

.lab-top-users-container .lab-chart-container {
  flex: 1;
  min-width: 0;
  margin-top: 0;
  height: 384px;
  display: flex;
  flex-direction: column;
}

.lab-top-users-container .lab-chart-container .lab-subsection-title {
  flex-shrink: 0;
}

.lab-top-users-container .lab-chart-container > div {
  flex: 1;
  min-height: 0;
}

.lab-top-users-list-container {
  flex: 0 0 350px;
  min-width: 0;
  padding: 24px;
  background-color: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  height: 384px;
}

.lab-top-users-list-container .lab-subsection-title {
  margin-top: 0;
  margin-bottom: 16px;
  flex-shrink: 0;
}

.lab-top-users-list-container .lab-top-users-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.lab-top-users-list-container .lab-top-users-list::-webkit-scrollbar {
  width: 6px;
}

.lab-top-users-list-container .lab-top-users-list::-webkit-scrollbar-track {
  background: transparent;
}

.lab-top-users-list-container .lab-top-users-list::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.lab-top-users-list-container .lab-top-users-list::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

@media (max-width: 1024px) {
  .lab-top-users-container {
    flex-direction: column;
  }
  
  .lab-top-users-list-container {
    flex: 1;
    width: 100%;
    height: auto;
  }
}

.lab-session-performance-container {
  display: flex;
  flex-direction: row;
  gap: 24px;
  align-items: flex-start;
  margin-bottom: 24px;
}

.lab-session-performance-container .lab-metrics-grid {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}

.lab-session-performance-container .lab-chart-container {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
  margin-top: 0;
}

@media (max-width: 1024px) {
  .lab-session-performance-container {
    flex-direction: column;
  }
  
  .lab-session-performance-container .lab-chart-container {
    width: 100%;
  }
}

.lab-progression-container {
  display: flex;
  flex-direction: row;
  gap: 24px;
  align-items: flex-start;
  margin-bottom: 24px;
}

.lab-progression-container .lab-metrics-grid {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}

.lab-progression-container .lab-chart-container {
  flex: 0 0 400px;
  min-width: 0;
  margin-bottom: 0;
  margin-top: 0;
  padding-top: 24px;
}

.lab-progression-container .lab-chart-container .lab-subsection-title {
  margin-top: 0;
  margin-bottom: 16px;
}

@media (max-width: 1024px) {
  .lab-progression-container {
    flex-direction: column;
  }
  
  .lab-progression-container .lab-chart-container {
    flex: 1;
    width: 100%;
  }
}

.lab-metric-card {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: all 0.2s ease;
  position: relative;
  cursor: pointer;
}

.lab-metric-card:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.lab-metric-info-icon {
  position: absolute;
  top: 8px;
  right: 8px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
  z-index: 1;
}

.lab-metric-info-icon:hover {
  color: rgba(255, 255, 255, 0.9);
}

.lab-metric-info-icon svg {
  width: 16px;
  height: 16px;
}

.lab-metric-value {
  font-size: 2rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 8px;
  line-height: 1.2;
}

.lab-metric-label {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.4;
}

.lab-metric-change {
  font-size: 0.75rem;
  font-weight: 600;
  margin-top: 4px;
  margin-bottom: 4px;
  line-height: 1.2;
}

.lab-metric-change-positive {
  color: #4CAF50;
}

.lab-metric-change-negative {
  color: #F44336;
}

.lab-top-users,
.lab-top-exercises {
  margin-top: 24px;
}

.lab-top-users-list,
.lab-top-exercises-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lab-top-user-item,
.lab-top-exercise-item {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all 0.2s ease;
}

.lab-top-user-item:hover,
.lab-top-exercise-item:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}

.lab-top-user-rank,
.lab-top-exercise-rank {
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  min-width: 32px;
  text-align: center;
}

.lab-top-user-id,
.lab-top-user-name,
.lab-top-exercise-name {
  flex: 1;
  font-size: 0.9375rem;
  color: #ffffff;
  font-weight: 500;
}

.lab-top-user-name-clickable {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.3);
  transition: all 0.2s ease;
}

.lab-top-user-name-clickable:hover {
  color: rgba(255, 255, 255, 0.8);
  text-decoration-color: rgba(255, 255, 255, 0.6);
}

.lab-top-user-sessions,
.lab-top-exercise-sessions,
.lab-top-exercise-users {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
  padding: 4px 12px;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

@media (max-width: 768px) {
  .lab-content {
    padding: 24px 16px;
  }

  .lab-metrics-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
  }

  .lab-metric-card {
    padding: 16px;
  }

  .lab-metric-value {
    font-size: 1.5rem;
  }

  .lab-top-user-item,
  .lab-top-exercise-item {
    flex-wrap: wrap;
    gap: 8px;
  }

  .lab-top-user-sessions,
  .lab-top-exercise-sessions,
  .lab-top-exercise-users {
    font-size: 0.75rem;
    padding: 2px 8px;
  }
}

/* Chart Containers */
.lab-chart-container {
  margin-top: 32px;
  padding: 24px;
  background-color: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
}

.lab-chart-title {
  font-size: 1rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 16px 0;
}

.lab-chart-note {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 12px;
  text-align: center;
}

/* Demographics Section */
.lab-demographics-section {
  margin-top: 32px;
  padding: 24px;
  background-color: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
}

/* Customer Profile */
.lab-profile-age-container {
  display: flex;
  flex-direction: row;
  gap: 24px;
  align-items: flex-start;
  margin-bottom: 32px;
}

.lab-customer-profile {
  flex: 1;
  min-width: 0;
  padding: 24px;
  background-color: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
}

.lab-profile-age-container .lab-chart-container {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
  margin-top: 0;
}

@media (max-width: 1024px) {
  .lab-profile-age-container {
    flex-direction: column;
  }
  
  .lab-profile-age-container .lab-chart-container {
    width: 100%;
  }
}

.lab-profile-title {
  font-size: 1rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 16px 0;
}

.lab-profile-cards-scrollable {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 8px;
  margin-bottom: 16px;
  height: 300px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.lab-profile-cards-scrollable::-webkit-scrollbar {
  width: 6px;
}

.lab-profile-cards-scrollable::-webkit-scrollbar-track {
  background: transparent;
}

.lab-profile-cards-scrollable::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.lab-profile-cards-scrollable::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

.lab-profile-card {
  flex: 0 0 auto;
  padding: 12px 20px;
  min-height: 60px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.4);
  transition: all 0.2s ease;
  width: 100%;
}

.lab-profile-card-label {
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.2;
}

.lab-profile-card-value {
  color: rgba(255, 255, 255, 0.9);
  font-size: 16px;
  font-weight: 600;
  text-transform: capitalize;
  line-height: 1.2;
  text-align: center;
}

.lab-profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.lab-profile-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lab-profile-label {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
}

.lab-profile-value {
  font-size: 1rem;
  color: #ffffff;
  font-weight: 600;
}

.lab-profile-onboarding {
  grid-column: 1 / -1;
  margin-top: 8px;
}

.lab-profile-onboarding-answers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.lab-profile-answer-item {
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
}

.lab-profile-answer-key {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
}

.lab-profile-answer-value {
  font-size: 0.875rem;
  color: #ffffff;
}

.lab-profile-sample-size {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 12px;
  font-style: italic;
}

/* Gauge Chart */
.lab-gauge-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px;
}

.lab-gauge-circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.lab-gauge-inner {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background-color: #1a1a1a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.lab-gauge-value {
  font-size: 2.5rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1;
}

.lab-gauge-label {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 768px) {
  .lab-chart-container {
    padding: 16px;
  }

  .lab-profile-grid {
    grid-template-columns: 1fr;
  }

  .lab-profile-onboarding-answers {
    grid-template-columns: 1fr;
  }

  .lab-gauge-circle {
    width: 150px;
    height: 150px;
  }

  .lab-gauge-inner {
    width: 120px;
    height: 120px;
  }

  .lab-gauge-value {
    font-size: 2rem;
  }
}

/* Stat Explanation Modal */
.stat-explanation-modal-content {
  padding: 20px;
}

.stat-explanation-text {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
}

/* User Info Modal */
.user-info-modal-content {
  padding: 20px;
}

.user-info-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.user-info-field:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.user-info-label {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.user-info-value {
  font-size: 1rem;
  color: #ffffff;
  font-weight: 400;
}

/* Copy Session Modal */
.copy-session-selection-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
}

.copy-session-loading,
.copy-session-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  flex: 1;
}

.copy-session-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  flex: 1;
  padding-right: 8px;
}

.copy-session-list::-webkit-scrollbar {
  width: 8px;
}

.copy-session-list::-webkit-scrollbar-track {
  background-color: #2a2a2a;
}

.copy-session-list::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

.copy-session-list::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

.copy-session-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  transition: all 0.2s ease;
  gap: 16px;
}

.copy-session-item:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.15);
}

.copy-session-item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.copy-session-item-name {
  font-size: 16px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

.copy-session-item-module {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

.copy-session-item-button {
  padding: 8px 20px;
  height: 36px;
  border-radius: 999px;
  background-color: rgba(191, 168, 77, 0.2);
  border: 1px solid rgba(191, 168, 77, 0.3);
  color: rgba(191, 168, 77, 1);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  box-shadow: 0 0 2px rgba(191, 168, 77, 0.4);
  flex-shrink: 0;
  white-space: nowrap;
}

.copy-session-item-button:hover:not(:disabled) {
  background-color: rgba(191, 168, 77, 0.3);
  border-color: rgba(191, 168, 77, 0.5);
  box-shadow: 0 0 4px rgba(191, 168, 77, 0.5);
  transform: translateY(-1px);
}

.copy-session-item-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.creator-onboarding-container {
  min-height: 100vh;
  background-color: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.creator-onboarding-content {
  width: 100%;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.onboarding-progress {
  display: flex;
  gap: 12px;
  margin-bottom: 48px;
  justify-content: center;
}

.progress-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
  transition: background-color 0.3s ease;
}

.progress-dot-active {
  background-color: rgba(191, 168, 77, 1);
}

.onboarding-step-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 48px;
  width: 100%;
}

.step-logo {
  margin-bottom: 32px;
}

.wake-logo-image {
  width: 120px;
  height: 120px;
  object-fit: contain;
}

.step-title {
  font-size: 32px;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 16px 0;
}

.step-description {
  font-size: 16px;
  font-weight: 400;
  color: #cccccc;
  line-height: 24px;
  margin: 0;
  max-width: 500px;
}

/* Profile Picture Upload */
.profile-picture-upload {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 32px;
}

.profile-picture-preview {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 2px dashed rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.05);
}

.profile-picture-preview:hover {
  border-color: rgba(191, 168, 77, 0.7);
  background-color: rgba(191, 168, 77, 0.1);
}

.profile-picture-preview.has-image {
  border: 2px solid rgba(191, 168, 77, 0.7);
  border-style: solid;
}

.profile-picture-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.upload-placeholder svg {
  color: rgba(255, 255, 255, 0.4);
}

.upload-placeholder p {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
}

.upload-progress {
  width: 100%;
  max-width: 300px;
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.progress-bar {
  width: 100%;
  height: 8px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background-color: rgba(191, 168, 77, 1);
  transition: width 0.3s ease;
}

.upload-progress p {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}

/* Options Grid */
.options-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  width: 100%;
  margin-top: 32px;
}

.option-card {
  background-color: #2a2a2a;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-height: 140px;
  justify-content: center;
  text-align: center;
}

.option-card:hover {
  border-color: rgba(191, 168, 77, 0.5);
  background-color: rgba(191, 168, 77, 0.05);
}

.option-card-selected {
  border-color: rgba(191, 168, 77, 0.7);
  background-color: rgba(191, 168, 77, 0.1);
  box-shadow: 0 0 0 2px rgba(191, 168, 77, 0.3);
}

.option-icon {
  font-size: 32px;
  line-height: 1;
}

.option-text {
  font-size: 14px;
  color: #ffffff;
  line-height: 20px;
  font-weight: 500;
}

.option-card-selected .option-text {
  color: rgba(191, 168, 77, 1);
  font-weight: 600;
}

/* Full-width options for single column questions */
.options-grid.single-column {
  grid-template-columns: 1fr;
}

.option-card.full-width {
  width: 100%;
}

.selection-info {
  margin-top: 24px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
}

.onboarding-actions {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* Card Creation Form */
.card-creation-form {
  width: 100%;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 32px;
}

.card-content-options {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.card-text-option {
  width: 100%;
}

.card-text-input {
  width: 100%;
  padding: 16px;
  background-color: #2a2a2a;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  color: #ffffff;
  font-size: 16px;
  font-family: inherit;
  resize: vertical;
  min-height: 120px;
}

.card-text-input:focus {
  outline: none;
  border-color: rgba(191, 168, 77, 0.7);
}

.card-text-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.card-divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
}

.card-divider::before,
.card-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.card-divider span {
  padding: 0 16px;
}

.card-media-option {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.card-media-preview {
  width: 100%;
  max-width: 400px;
  aspect-ratio: 9 / 16;
  border: 2px dashed rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.05);
}

.card-media-preview:hover {
  border-color: rgba(191, 168, 77, 0.7);
  background-color: rgba(191, 168, 77, 0.1);
}

.card-media-preview.has-media {
  border: 2px solid rgba(191, 168, 77, 0.7);
  border-style: solid;
}

.card-media-preview img,
.card-media-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Completion Screen */
.completion-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: rgba(191, 168, 77, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  color: rgba(191, 168, 77, 1);
  margin-bottom: 32px;
  font-weight: bold;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .step-title {
    font-size: 24px;
  }

  .step-description {
    font-size: 14px;
  }

  .options-grid {
    grid-template-columns: 1fr;
  }

  .profile-picture-preview {
    width: 150px;
    height: 150px;
  }
}
.profile-screen {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px;
}

.profile-screen-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  color: rgba(255, 255, 255, 0.6);
}

.profile-content {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.profile-section {
  background-color: #2a2a2a;
  border-radius: 12px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
}

.profile-section-scrollable {
  max-height: 700px;
  overflow: visible;
  position: relative;
}

.profile-form-scrollable {
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow-y: auto;
  padding-right: 8px;
  flex: 1;
  padding-bottom: 80px;
}

.profile-form-scrollable::-webkit-scrollbar {
  width: 6px;
}

.profile-form-scrollable::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}

.profile-form-scrollable::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.4);
  border-radius: 3px;
}

.profile-form-scrollable::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.6);
}

.profile-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.profile-section-title {
  font-size: 20px;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
}

.profile-section-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.profile-section-actions .button {
  margin: 0;
  padding: 10px 20px;
  height: auto;
  min-width: auto;
}

.profile-cancel-button {
  padding: 10px 20px;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
}

.profile-cancel-button:hover:not(:disabled) {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

.profile-cancel-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Profile Picture and Name Row */
.profile-name-row {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.profile-picture-inline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.profile-picture-inline-container {
  width: 240px;
  height: 240px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  border: none;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.profile-picture-inline-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-picture-inline-placeholder {
  width: 100%;
  height: 100%;
  background-color: rgba(191, 168, 77, 0.2);
  color: rgba(191, 168, 77, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 56px;
  font-weight: 600;
}

.profile-picture-upload-button {
  padding: 6px 12px;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.profile-picture-upload-button:hover:not(:disabled) {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

.profile-picture-upload-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.profile-name-fields {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
}

.profile-field-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.profile-field-card-label {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
}

/* Username validation */
.username-input-wrapper {
  position: relative;
}

.username-checking,
.username-available,
.username-taken {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  font-weight: 500;
}

.username-checking {
  color: rgba(255, 255, 255, 0.6);
}

.username-available {
  color: #4CAF50;
}

.username-taken {
  color: #FF6B6B;
}

/* Input styles matching edit button */
.input-container input.input {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 12px 16px;
  color: #ffffff;
  font-size: 16px;
  font-family: inherit;
  transition: all 0.2s ease;
}

.input-container input.input:focus {
  outline: none;
  border-color: rgba(191, 168, 77, 0.5);
  background-color: rgba(255, 255, 255, 0.08);
}

.input-container input.input:disabled {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  cursor: not-allowed;
  opacity: 0.7;
}

.input-container input.input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

/* Date input style matching mobile app */
.profile-date-input {
  width: 100%;
  padding: 12px 16px;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #ffffff;
  font-size: 16px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
}

.profile-date-input:focus {
  outline: none;
  border-color: rgba(191, 168, 77, 0.5);
  background-color: rgba(255, 255, 255, 0.08);
}

.profile-date-input::-webkit-calendar-picker-indicator {
  filter: invert(1);
  cursor: pointer;
}

/* Profile Form */
.profile-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.profile-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.profile-form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.profile-form-label {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
}

.profile-form-select {
  width: 100%;
  padding: 12px 16px;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #ffffff;
  font-size: 16px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
}

.profile-form-select:focus {
  outline: none;
  border-color: rgba(191, 168, 77, 0.5);
  background-color: rgba(255, 255, 255, 0.08);
}

.profile-form-select:hover {
  border-color: rgba(255, 255, 255, 0.15);
}

.profile-form-select option {
  background-color: #2a2a2a;
  color: #ffffff;
}

/* Dropdown styles */
.profile-dropdown-container {
  position: relative;
  width: 100%;
  z-index: 1;
}

.profile-dropdown-button {
  width: 100%;
  padding: 12px 16px 12px 16px;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #ffffff;
  font-size: 16px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  gap: 12px;
}

.profile-dropdown-button:hover:not(.profile-dropdown-disabled) {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

.profile-dropdown-button.profile-dropdown-active {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(191, 168, 77, 0.5);
}

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

.profile-dropdown-text {
  color: #ffffff;
}

.profile-dropdown-placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.profile-dropdown-chevron {
  color: rgba(255, 255, 255, 0.6);
  font-size: 20px;
  font-weight: 300;
  transition: transform 0.2s ease;
  margin-left: 12px;
  flex-shrink: 0;
}

.profile-dropdown-chevron-right {
  transform: rotate(0deg);
}

.profile-dropdown-chevron-down {
  transform: rotate(90deg);
}

.profile-dropdown-search {
  flex: 1;
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 16px;
  font-family: inherit;
  outline: none;
  padding: 0;
}

.profile-dropdown-search::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.profile-dropdown-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background-color: #2a2a2a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 10000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.profile-dropdown-list::-webkit-scrollbar {
  width: 6px;
}

.profile-dropdown-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}

.profile-dropdown-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.4);
  border-radius: 3px;
}

.profile-dropdown-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.6);
}

.profile-dropdown-option {
  padding: 12px 16px;
  color: #ffffff;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.profile-dropdown-option:last-child {
  border-bottom: none;
}

.profile-dropdown-option:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.profile-dropdown-option-selected {
  background-color: rgba(191, 168, 77, 0.2);
  color: rgba(191, 168, 77, 1);
}

/* Number input with spinner */
.profile-number-input-wrapper {
  position: relative;
  width: 100%;
}

.profile-number-input-wrapper .input-container {
  margin-bottom: 0;
}

.profile-number-input-wrapper .input-container input {
  padding-right: 50px;
}

/* Hide native number input spinners */
.profile-number-input-wrapper input[type="number"]::-webkit-inner-spin-button,
.profile-number-input-wrapper input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

.profile-number-input-wrapper input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.profile-number-spinner {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 1;
}

.profile-spinner-button {
  width: 20px;
  height: 14px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: all 0.2s ease;
}

.profile-spinner-button:hover:not(:disabled) {
  opacity: 0.7;
}

.profile-spinner-button:active:not(:disabled) {
  transform: scale(0.95);
}

.profile-spinner-button:disabled {
  cursor: not-allowed;
  opacity: 0.3;
}

.profile-spinner-button:disabled svg {
  opacity: 0.5;
}

.profile-spinner-button svg {
  width: 12px;
  height: 12px;
}

.profile-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 16px;
}

/* Story Cards Section */
/* Matching mobile app proportions: STORY_CARD_WIDTH = screenWidth * 0.8, STORY_CARD_HEIGHT = screenHeight * 0.6 */
.profile-story-cards-section {
  margin-top: 0;
  width: 100%;
}

.profile-story-cards-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.profile-add-card-button {
  padding: 6px 20px;
  height: 32px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.4);
}

.profile-add-card-button:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.15);
}

.profile-add-card-icon {
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
}

.profile-story-cards-container {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0;
  margin-top: 24px;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  position: relative;
}

.profile-story-cards-container::-webkit-scrollbar {
  height: 6px;
}

.profile-story-cards-container::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}

.profile-story-cards-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.4);
  border-radius: 3px;
}

.profile-story-cards-container::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.6);
}

.profile-story-cards-list {
  display: flex;
  gap: 4px;
  /* Padding to center cards: (100% - cardWidth) / 2, matching mobile app's paddingHorizontal */
  padding: 0 calc((100% - 360px) / 2);
  width: max-content;
  min-width: 100%;
  justify-content: flex-start;
}

.profile-story-card-wrapper {
  /* Mobile: STORY_CARD_WIDTH = screenWidth * 0.8, STORY_CARD_HEIGHT = screenHeight * 0.6 */
  /* On mobile (e.g., 375x812): width=300px, height=487px, aspect ratio ≈ 0.616:1 (taller than wide) */
  /* For web, use larger fixed width and maintain exact aspect ratio */
  width: 360px;
  /* Height = width / aspect_ratio = 360 / 0.616 ≈ 584px, plus 56px for title = 640px */
  height: 640px;
  flex-shrink: 0;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  /* STORY_CARD_SPACING = 4px */
  margin-right: 4px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.profile-story-card-title-wrapper {
  /* Width matches STORY_CARD_WIDTH */
  width: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  padding: 0 16px;
  height: 44px;
}

.profile-story-card-title {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  text-align: center;
  margin: 0;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.profile-story-card {
  /* STORY_CARD_WIDTH = 360px (larger, maintains mobile proportions) */
  width: 100%;
  /* STORY_CARD_HEIGHT = 584px (maintains exact mobile aspect ratio: 360/584 = 0.616) */
  height: 584px;
  background-color: #2a2a2a;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), 0 0 2px rgba(255, 255, 255, 0.4);
  overflow: hidden;
  display: flex;
  position: relative;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.profile-story-card-image,
.profile-story-card-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}

.profile-story-card-text-content {
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

.profile-story-card-text-content::-webkit-scrollbar {
  width: 6px;
}

.profile-story-card-text-content::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}

.profile-story-card-text-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.4);
  border-radius: 3px;
}

.profile-story-card-text {
  font-size: 13px;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
  flex: 1;
  overflow-y: auto;
  word-wrap: break-word;
}

.profile-story-card-link {
  color: rgba(191, 168, 77, 1);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  margin-top: 12px;
  display: inline-block;
  transition: opacity 0.2s ease;
}

.profile-story-card-link:hover {
  opacity: 0.8;
  text-decoration: underline;
}

/* Add Card Modal Styles */
.add-card-modal-content {
  padding: 0;
}

.add-card-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.add-card-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}


.add-card-media-preview {
  width: 100%;
  height: 300px;
  background-color: rgba(255, 255, 255, 0.05);
  border: 2px dashed rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  overflow: hidden;
  position: relative;
}

.add-card-media-preview:hover {
  border-color: rgba(191, 168, 77, 0.5);
  background-color: rgba(255, 255, 255, 0.08);
}

.add-card-media-preview.has-media {
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.add-card-media-preview img,
.add-card-media-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

.add-card-upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.add-card-upload-placeholder svg {
  color: rgba(255, 255, 255, 0.4);
}

.add-card-upload-placeholder p {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
}

.add-card-upload-progress {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.add-card-progress-bar {
  width: 100%;
  height: 8px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.add-card-progress-fill {
  height: 100%;
  background-color: rgba(191, 168, 77, 1);
  transition: width 0.3s ease;
}

.add-card-upload-progress p {
  margin: 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
}

.add-card-actions {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}

.add-card-actions .button {
  min-width: 120px;
  max-width: 150px;
}

/* Logout Section */
.profile-logout-section {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px;
  padding-top: 0;
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

.profile-logout-button {
  padding: 12px 24px;
  background-color: rgba(191, 168, 77, 0.2);
  color: rgba(191, 168, 77, 1);
  border: 1px solid rgba(191, 168, 77, 0.3);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

.profile-logout-button:hover {
  background-color: rgba(191, 168, 77, 0.3);
  border-color: rgba(191, 168, 77, 0.5);
}

/* Scroll indicator */
.profile-section-scrollable::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 35px;
  background: linear-gradient(to bottom, transparent, rgba(42, 42, 42, 0.9));
  pointer-events: none;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

/* Responsive */
@media (max-width: 768px) {
  .profile-screen {
    padding: 24px 16px;
    max-width: 100%;
  }

  .profile-form-row {
    grid-template-columns: 1fr;
  }

  .profile-name-row {
    flex-direction: column;
    align-items: center;
  }

  .profile-picture-inline {
    margin-bottom: 20px;
  }

  .profile-section-scrollable {
    max-height: none;
  }
}
.course-purchase-container {
  padding: 32px;
  min-height: 100vh;
  background-color: #1a1a1a;
  color: #ffffff;
}

.course-purchase-content {
  max-width: 1200px;
  margin: 0 auto;
}

/* Header Section */
.course-purchase-header {
  margin-bottom: 32px;
}

.course-purchase-image {
  width: 100%;
  height: 400px;
  background-size: cover;
  background-position: center;
  border-radius: 12px;
  margin-bottom: 0;
}

.course-purchase-video-container {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background-color: #000;
  margin-bottom: 0;
}

.course-purchase-video {
  width: 100%;
  height: auto;
  max-height: 500px;
  display: block;
}

/* Main Grid Layout */
.course-purchase-main-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 32px;
  align-items: start;
}

/* Left Column - Main Info */
.course-purchase-main-info {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.course-purchase-title {
  font-size: 32px;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
  margin-top: 32px;
  line-height: 1.3;
}

.course-purchase-creator {
  font-size: 18px;
  color: #cccccc;
  margin: 0;
}

.course-purchase-description {
  font-size: 16px;
  line-height: 1.6;
  color: #cccccc;
  margin: 0;
}

.course-purchase-description p {
  margin: 0;
}

/* Statistics Section */
.course-purchase-stats {
  background-color: #2a2a2a;
  border-radius: 12px;
  padding: 24px;
}

.course-purchase-stats-title {
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 16px 0;
}

.course-purchase-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 16px;
}

.course-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.course-stat-value {
  font-size: 32px;
  font-weight: 700;
  color: rgba(191, 168, 77, 1);
  line-height: 1;
}

.course-stat-label {
  font-size: 14px;
  color: #cccccc;
  text-align: center;
}

/* Modules Section */
.course-purchase-modules {
  background-color: #2a2a2a;
  border-radius: 12px;
  padding: 24px;
}

.course-purchase-modules-title {
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 20px 0;
}

.course-modules-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.course-module-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background-color: #333;
  border-radius: 8px;
  transition: background-color 0.2s ease;
}

.course-module-item:hover {
  background-color: #3a3a3a;
}

.course-module-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(191, 168, 77, 0.2);
  color: rgba(191, 168, 77, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  flex-shrink: 0;
}

.course-module-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.course-module-title {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
}

.course-module-sessions {
  font-size: 14px;
  color: #999;
}

/* Right Column - Sidebar */
.course-purchase-sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: sticky;
  top: 100px;
}

/* Details Card */
.course-purchase-details-card {
  background-color: #2a2a2a;
  border-radius: 12px;
  padding: 24px;
}

/* Mobile Details Card - Hidden on desktop */
.course-purchase-details-mobile {
  display: none;
}

.course-details-card-title {
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 16px 0;
}

.course-details-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.course-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.course-detail-label {
  font-size: 14px;
  color: #999999;
  font-weight: 500;
  flex-shrink: 0;
}

.course-detail-value {
  font-size: 14px;
  color: #ffffff;
  font-weight: 600;
  text-align: right;
}

/* Error Message */
.course-purchase-error-message {
  padding: 16px;
  background-color: rgba(255, 107, 107, 0.1);
  border: 1px solid rgba(255, 107, 107, 0.3);
  border-radius: 8px;
  color: #ff6b6b;
}

.course-purchase-error-message p {
  margin: 0;
}

/* Actions Section */
.course-purchase-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.course-purchase-owned {
  padding: 24px;
  background-color: rgba(191, 168, 77, 0.1);
  border: 1px solid rgba(191, 168, 77, 0.3);
  border-radius: 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.course-purchase-owned-message {
  font-size: 18px;
  color: rgba(191, 168, 77, 1);
  font-weight: 600;
  margin: 0;
}

.course-purchase-expiration {
  font-size: 14px;
  color: #cccccc;
  margin: 0;
}

.course-purchase-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  font-size: 28px;
  font-weight: 600;
  color: #ffffff;
  padding: 20px;
  background-color: #2a2a2a;
  border-radius: 12px;
}

.course-price-value {
  color: rgba(191, 168, 77, 1);
}

.course-price-duration {
  font-size: 16px;
  color: #cccccc;
  font-weight: 400;
}

/* Purchase Button - Mobile App Style */
.course-purchase-button {
  width: 100%;
  min-height: 50px;
  background-color: rgba(191, 168, 77, 0.2);
  border: none;
  border-radius: 12px;
  padding: 16px 24px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

.course-purchase-button:hover:not(:disabled) {
  background-color: rgba(191, 168, 77, 0.3);
}

.course-purchase-button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.course-purchase-button-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.course-purchase-button-main-text {
  color: rgba(191, 168, 77, 1);
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
}

.course-purchase-button-price-text {
  color: rgba(191, 168, 77, 1);
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  margin-top: 2px;
}

.course-purchase-button-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(191, 168, 77, 1);
  font-size: 18px;
  font-weight: 700;
}

.course-purchase-button-loading .spinner-small {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(191, 168, 77, 0.3);
  border-top-color: rgba(191, 168, 77, 1);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.course-purchase-button-trial .course-purchase-button-price-text {
  margin-top: 4px;
  opacity: 0.9;
}

/* Loading and Error States */
.course-purchase-loading,
.course-purchase-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 32px;
  text-align: center;
  min-height: 60vh;
}

.course-purchase-loading .spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(255, 255, 255, 0.1);
  border-top-color: rgba(191, 168, 77, 1);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.course-purchase-error h2 {
  color: #ff6b6b;
  margin-bottom: 16px;
}

.course-purchase-error p {
  color: #cccccc;
  margin-bottom: 24px;
}

/* Mobile CTA Section (hidden on desktop) */
.course-purchase-mobile-cta {
  display: none;
}

/* Mobile Optimizations */
@media (max-width: 768px) {
  .course-purchase-main-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .course-purchase-sidebar {
    display: none; /* Hide sidebar on mobile */
  }
}

@media (max-width: 640px) {
  .course-purchase-container {
    padding: 0;
    padding-bottom: 16px;
  }

  .course-purchase-content {
    display: flex;
    flex-direction: column;
  }

  /* Header Section - Taller video on mobile */
  .course-purchase-header {
    margin-bottom: 0;
    width: 100%;
    order: 1;
  }

  .course-purchase-image {
    width: 100%;
    height: 60vh;
    min-height: 400px;
    max-height: 600px;
    border-radius: 0;
    background-size: cover;
    background-position: center;
  }

  .course-purchase-video-container {
    width: 100%;
    border-radius: 0;
    overflow: hidden;
    background-color: #000;
    position: relative;
    height: 60vh;
    min-height: 400px;
    max-height: 600px;
  }

  .course-purchase-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Mobile CTA Section - Sticky purchase button */
  .course-purchase-mobile-cta {
    display: block;
    order: 2;
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: #1a1a1a;
    padding: 16px;
    border-bottom: 1px solid #333;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  .course-purchase-mobile-cta .course-purchase-actions {
    gap: 12px;
  }

  .course-purchase-mobile-cta .course-purchase-actions .button {
    max-width: 100%;
    min-width: auto;
    width: 100%;
    margin-bottom: 0;
  }

  .course-purchase-mobile-cta .course-purchase-price {
    font-size: 24px;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 0;
    text-align: center;
  }

  .course-purchase-mobile-cta .course-price-value {
    color: rgba(191, 168, 77, 1);
  }

  .course-purchase-mobile-cta .course-price-duration {
    font-size: 14px;
  }

  .course-purchase-mobile-cta .course-purchase-button {
    min-height: 48px;
    padding: 14px 20px;
  }

  .course-purchase-mobile-cta .course-purchase-button-main-text {
    font-size: 16px;
  }

  .course-purchase-mobile-cta .course-purchase-button-price-text {
    font-size: 13px;
  }

  .course-purchase-mobile-cta .course-purchase-owned {
    padding: 16px;
    border-radius: 8px;
    gap: 12px;
  }

  .course-purchase-mobile-cta .course-purchase-owned-message {
    font-size: 16px;
    margin-bottom: 0;
  }

  .course-purchase-mobile-cta .course-purchase-expiration {
    font-size: 13px;
    margin-bottom: 0;
  }

  .course-purchase-mobile-cta .course-purchase-owned .button {
    margin-bottom: 0;
  }

  /* Main Content */
  .course-purchase-main-grid {
    order: 3;
    gap: 20px;
    padding: 0 16px;
  }

  .course-purchase-main-info {
    gap: 20px;
  }

  .course-purchase-title {
    font-size: 28px;
    line-height: 1.3;
    margin-top: 24px;
  }

  .course-purchase-creator {
    font-size: 16px;
  }

  .course-purchase-description {
    font-size: 15px;
    line-height: 1.6;
  }

  /* Statistics */
  .course-purchase-stats {
    padding: 20px;
    border-radius: 12px;
  }

  .course-purchase-stats-title {
    font-size: 18px;
    margin-bottom: 16px;
  }

  .course-purchase-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .course-stat-value {
    font-size: 32px;
  }

  .course-stat-label {
    font-size: 13px;
  }

  /* Modules */
  .course-purchase-modules {
    padding: 20px;
    border-radius: 12px;
  }

  .course-purchase-modules-title {
    font-size: 18px;
    margin-bottom: 16px;
  }

  .course-module-item {
    padding: 16px;
    gap: 16px;
  }

  .course-module-number {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }

  .course-module-title {
    font-size: 16px;
  }

  .course-module-sessions {
    font-size: 14px;
  }

  /* Details Card - Show in main content on mobile */
  .course-purchase-details-mobile {
    display: block;
    padding: 20px;
    border-radius: 12px;
  }

  .course-details-card-title {
    font-size: 18px;
    margin-bottom: 16px;
  }

  .course-details-list {
    gap: 16px;
  }

  .course-detail-label,
  .course-detail-value {
    font-size: 14px;
  }

  /* Hide desktop sidebar on mobile */
  .course-purchase-sidebar {
    display: none;
  }

  /* Show mobile details card */
  .course-purchase-details-mobile {
    display: block;
  }

  /* Error message in mobile CTA */
  .course-purchase-mobile-cta .course-purchase-error-message {
    margin-bottom: 12px;
  }

  /* Loading and Error States */
  .course-purchase-loading,
  .course-purchase-error {
    padding: 48px 16px;
    min-height: 50vh;
  }

  .course-purchase-error h2 {
    font-size: 20px;
    margin-bottom: 12px;
  }

  .course-purchase-error p {
    font-size: 14px;
    margin-bottom: 20px;
  }
}

@media (max-width: 480px) {
  .course-purchase-image {
    height: 50vh;
    min-height: 350px;
    max-height: 500px;
  }

  .course-purchase-video-container {
    height: 50vh;
    min-height: 350px;
    max-height: 500px;
  }

  .course-purchase-mobile-cta {
    padding: 12px;
  }

  .course-purchase-mobile-cta .course-purchase-price {
    font-size: 22px;
    padding: 10px;
  }

  .course-purchase-main-grid {
    padding: 0 12px;
  }

  .course-purchase-title {
    font-size: 24px;
    margin-top: 20px;
  }

  .course-purchase-creator {
    font-size: 15px;
  }

  .course-purchase-description {
    font-size: 14px;
  }

  .course-purchase-stats {
    padding: 16px;
  }

  .course-purchase-stats-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .course-stat-value {
    font-size: 28px;
  }

  .course-purchase-modules {
    padding: 16px;
  }

  .course-module-item {
    padding: 12px;
    gap: 12px;
  }

  .course-module-number {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }

  .course-module-title {
    font-size: 15px;
  }

  .course-purchase-details-mobile {
    padding: 16px;
  }

  .course-details-card-title {
    font-size: 16px;
    margin-bottom: 12px;
  }

  .course-details-list {
    gap: 12px;
  }

  .course-detail-label,
  .course-detail-value {
    font-size: 13px;
  }

  .course-purchase-button {
    min-height: 44px;
    padding: 12px 16px;
  }

  .course-purchase-button-main-text {
    font-size: 15px;
  }

  .course-purchase-button-price-text {
    font-size: 12px;
  }
}

/* Email Modal Styles */
.email-modal-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 8px 0;
}

.email-modal-message {
  font-size: 16px;
  color: #cccccc;
  line-height: 1.5;
  margin: 0;
}

.email-modal-error {
  font-size: 14px;
  color: #ff6b6b;
  margin: -12px 0 0 0;
  padding: 0;
}

.email-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

.email-modal-actions .button {
  margin-bottom: 0;
}
.biblioteca-content {
  padding: 32px;
  color: #ffffff;
}

.biblioteca-search-container {
  margin-bottom: 32px;
  width: 100%;
}

.biblioteca-loading,
.biblioteca-error,
.biblioteca-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 32px;
  text-align: center;
  color: #cccccc;
}

.biblioteca-loading .spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(255, 255, 255, 0.1);
  border-top-color: rgba(191, 168, 77, 1);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.biblioteca-error {
  color: #ff6b6b;
}


.biblioteca-courses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  margin-bottom: 32px;
}

.biblioteca-course-card {
  background-color: #2a2a2a;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.biblioteca-course-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  border-color: rgba(191, 168, 77, 0.3);
}

.biblioteca-course-image {
  width: 100%;
  height: 200px;
  background-size: cover;
  background-position: center;
  background-color: #333;
  position: relative;
}

.biblioteca-course-image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  font-size: 14px;
}

.biblioteca-course-info {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.biblioteca-course-title {
  font-size: 20px;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 12px 0;
  line-height: 1.4;
}

.biblioteca-course-creator {
  font-size: 14px;
  color: #999;
  margin-top: 8px;
}

/* Responsive Design */
@media (max-width: 768px) {
  .biblioteca-content {
    padding: 24px 16px;
  }

  .biblioteca-courses-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

@media (max-width: 640px) {
  .biblioteca-content {
    padding: 16px 12px;
    padding-top: 0;
  }

  .biblioteca-search-container {
    margin-bottom: 20px;
  }

  .biblioteca-courses-grid {
    gap: 12px;
  }

  .biblioteca-course-card {
    border-radius: 8px;
  }

  .biblioteca-course-image {
    height: 160px;
  }

  .biblioteca-course-info {
    padding: 16px;
  }

  .biblioteca-course-title {
    font-size: 18px;
    margin-bottom: 8px;
  }

  .biblioteca-course-creator {
    font-size: 13px;
    margin-top: 4px;
  }

  .biblioteca-loading,
  .biblioteca-error,
  .biblioteca-empty {
    padding: 48px 16px;
    font-size: 14px;
  }

  .biblioteca-loading .spinner {
    width: 32px;
    height: 32px;
    margin-bottom: 12px;
  }
}

@media (max-width: 480px) {
  .biblioteca-content {
    padding: 12px;
  }

  .biblioteca-search-container {
    margin-bottom: 16px;
  }

  .biblioteca-courses-grid {
    gap: 10px;
  }

  .biblioteca-course-image {
    height: 140px;
  }

  .biblioteca-course-info {
    padding: 12px;
  }

  .biblioteca-course-title {
    font-size: 16px;
  }
}

.App {
  min-height: 100vh;
  width: 100%;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #1a1a1a;
  color: #ffffff;
  min-height: 100vh;
}

#root {
  min-height: 100vh;
}