/* ============================================
   MOBILE RESPONSIVE STYLES
   Optimized for small cell phone screens (320px - 480px)
   ============================================ */

/* Ensure consistent text rendering across devices (Pixel 7, Galaxy S23, etc.) */
/* Prevents Chrome and other browsers from auto-adjusting text size based on device */
html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Ensure consistent font rendering */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Consistent font rendering across devices */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Prevent layout shifts from different default font sizes */
  font-size: 14px;
}

/* Ensure consistent box-sizing for all elements */
*, *::before, *::after {
  box-sizing: border-box;
}


/* Scroll Indicator Arrow - Mobile Only */
.scroll-indicator {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  pointer-events: none;
  display: none;
}

.scroll-arrow {
  font-size: 2rem;
  color: #ffc107;
  animation: blinkArrow 1.5s infinite;
  text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

@keyframes blinkArrow {
  0%, 100% {
    opacity: 1;
    transform: translateY(0);
  }
  50% {
    opacity: 0.3;
    transform: translateY(10px);
  }
}

/* Desktop styles - ensure subcategory is always visible and clickable */
#subcategoryContainer {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: relative !important;
}

#subcategoryContainer[style*="display: none"] {
  display: block !important;
}

#skillSubcategory {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  -webkit-appearance: menulist !important;
  appearance: menulist !important;
}

#skillSubcategory:disabled,
#skillSubcategory[disabled] {
  opacity: 1 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  background: white !important;
}

@media (min-width: 481px) {
  .scroll-indicator {
    display: none !important;
  }
  
  /* Step 0 host tour tooltip - set specific dimensions on desktop screens only (324x358) */
  /* Use maximum specificity to override JavaScript inline styles */
  html body .step-tooltip[data-host-step="0"],
  html body .step-tooltip[data-host-step="0"][style],
  html body .step-tooltip[data-host-step="0"][style*="width"],
  html body .step-tooltip[data-host-step="0"][style*="height"],
  body .step-tooltip[data-host-step="0"],
  body .step-tooltip[data-host-step="0"][style],
  body .step-tooltip[data-host-step="0"][style*="width"],
  body .step-tooltip[data-host-step="0"][style*="height"],
  .step-tooltip[data-host-step="0"],
  .step-tooltip[data-host-step="0"][style] {
    width: 324px !important;
    max-width: 324px !important;
    min-width: 324px !important;
    height: 358px !important;
    min-height: 358px !important;
    max-height: 358px !important;
    box-sizing: border-box !important;
  }
  
  /* Step 6 helper tour tooltip - set specific dimensions on desktop screens only (324x324) */
  /* Use maximum specificity to override JavaScript inline styles */
  html body .step-tooltip[data-step="6"],
  html body .step-tooltip[data-step="6"][style],
  html body .step-tooltip[data-step="6"][style*="width"],
  html body .step-tooltip[data-step="6"][style*="height"],
  body .step-tooltip[data-step="6"],
  body .step-tooltip[data-step="6"][style],
  body .step-tooltip[data-step="6"][style*="width"],
  body .step-tooltip[data-step="6"][style*="height"],
  .step-tooltip[data-step="6"],
  .step-tooltip[data-step="6"][style] {
    width: 324px !important;
    max-width: 324px !important;
    min-width: 324px !important;
    height: 324px !important;
    min-height: 324px !important;
    max-height: 324px !important;
    box-sizing: border-box !important;
  }
}

/* Host Tour Step 2 - Show all content without scrolling on Mobile */
/* Cell screens only (≤600px) - Galaxy S8+, Z Fold 5, A51, A71 use cell layout */
/* Devices ≥601px (Nest Hub Max, Nest Hub, Asus Zenbook Fold, iPads, Surface devices) use desktop layout */
@media (max-width: 600px) {
  /* Step 2 host tour tooltip - set specific dimensions on cell screens (324x359) */
  /* Use maximum specificity to override JavaScript inline styles */
  body .step-tooltip[data-host-step="2"],
  body .step-tooltip[data-host-step="2"][style],
  html body .step-tooltip[data-host-step="2"],
  html body .step-tooltip[data-host-step="2"][style],
  .step-tooltip[data-host-step="2"],
  .step-tooltip[data-host-step="2"][style] {
    width: 324px !important;
    max-width: 324px !important;
    min-width: 324px !important;
    height: 359px !important;
    min-height: 359px !important;
    max-height: 359px !important;
    overflow-y: auto !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }
  
  .step-tooltip[data-host-step="2"] h3 {
    font-size: 0.95rem !important;
    margin-bottom: 8px !important;
    line-height: 1.2 !important;
    padding: 0 !important;
  }
  
  .step-tooltip[data-host-step="2"] p {
    font-size: 0.75rem !important;
    line-height: 1.3 !important;
    margin-bottom: 10px !important;
    padding: 0 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  
  .step-tooltip[data-host-step="2"] p span {
    font-size: 0.75rem !important;
    line-height: 1.3 !important;
  }
  
  .step-tooltip[data-host-step="2"] button {
    padding: 6px 12px !important;
    font-size: 0.75rem !important;
    margin-top: 8px !important;
  }
  
  .step-tooltip[data-host-step="2"] > div {
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .step-tooltip[data-host-step="2"] > div[style*="display: flex"] {
    margin-top: 8px !important;
    gap: 6px !important;
  }
}

@media (max-width: 360px) {
  /* Step 2 host tour tooltip - set specific dimensions on cell screens (324x359) */
  /* Use maximum specificity to override JavaScript inline styles */
  body .step-tooltip[data-host-step="2"],
  body .step-tooltip[data-host-step="2"][style],
  html body .step-tooltip[data-host-step="2"],
  html body .step-tooltip[data-host-step="2"][style],
  .step-tooltip[data-host-step="2"],
  .step-tooltip[data-host-step="2"][style] {
    width: 324px !important;
    max-width: 324px !important;
    min-width: 324px !important;
    height: 359px !important;
    min-height: 359px !important;
    max-height: 359px !important;
    overflow-y: auto !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }
  
  .step-tooltip[data-host-step="2"] {
    padding: 10px 8px !important;
  }
  
  .step-tooltip[data-host-step="2"] h3 {
    font-size: 0.9rem !important;
    margin-bottom: 6px !important;
  }
  
  .step-tooltip[data-host-step="2"] p {
    font-size: 0.7rem !important;
    line-height: 1.25 !important;
    margin-bottom: 8px !important;
  }
  
  .step-tooltip[data-host-step="2"] p span {
    font-size: 0.7rem !important;
  }
  
  .step-tooltip[data-host-step="2"] button {
    padding: 5px 10px !important;
    font-size: 0.7rem !important;
  }
}

/* Inspiration Banner - Mobile Optimization */
/* Cell screens only (≤600px) - Galaxy S8+, Z Fold 5, A51, A71 use cell layout */
/* Devices ≥601px (Nest Hub Max, Nest Hub, Asus Zenbook Fold, iPads, Surface devices) use desktop layout */
@media (max-width: 600px) {
  /* Inspiration Banner */
  #mhInspireBanner {
    width: 95% !important;
    max-width: 95% !important;
    padding: 20px 15px !important;
    margin: 0 !important;
    border-radius: 12px !important;
  }
  
  #mhInspireBanner h2 {
    font-size: 1.4rem !important;
    margin: 0 0 8px 0 !important;
  }
  
  #mhInspireBanner p {
    font-size: 0.9rem !important;
    margin: 6px 0 !important;
    line-height: 1.3 !important;
  }
  
  #mhInspireBanner p[style*="1.2rem"] {
    font-size: 0.95rem !important;
  }
  
  #mhInspireBanner p[style*="1.3rem"] {
    font-size: 1rem !important;
    margin: 10px 0 !important;
  }
  
  #mhInspireBanner button {
    padding: 10px 20px !important;
    font-size: 0.95rem !important;
    margin-top: 10px !important;
  }
}

/* Very Small Screens (320px - 360px) */
@media (max-width: 360px) {
  #mhInspireBanner {
    width: 98% !important;
    padding: 15px 12px !important;
  }
  
  #mhInspireBanner h2 {
    font-size: 1.2rem !important;
  }
  
  #mhInspireBanner p {
    font-size: 0.85rem !important;
    margin: 5px 0 !important;
  }
  
  #mhInspireBanner button {
    padding: 8px 16px !important;
    font-size: 0.9rem !important;
    width: 100% !important;
  }
}

/* Welcome Tour Modal - Mobile Optimization */
/* Cell screens only (≤600px) - Galaxy S8+, Z Fold 5, A51, A71 use cell layout */
/* Devices ≥601px (Nest Hub Max, Nest Hub, Asus Zenbook Fold, iPads, Surface devices) use desktop layout */
@media (max-width: 600px) {
  #welcomeTourModal > div {
    width: 95% !important;
    max-width: 95% !important;
    padding: 20px 15px !important;
    margin: 10px !important;
    border-radius: 12px !important;
  }
  
  #welcomeTourModal h2 {
    font-size: 1.5rem !important;
  }
  
  #welcomeTourModal h3 {
    font-size: 1.1rem !important;
    margin: 0 0 10px 0 !important;
  }
  
  #welcomeTourModal p {
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
  }
  
  #welcomeTourModal .logo {
    height: 30px !important;
  }
  
  /* About Section - Mobile */
  #welcomeTourModal div[style*="background: linear-gradient(135deg, #f8f9fa"] {
    padding: 15px 12px !important;
    margin-bottom: 15px !important;
  }
  
  #welcomeTourModal div[style*="background: linear-gradient(135deg, #f8f9fa"] h3 {
    font-size: 1.1rem !important;
    margin-bottom: 12px !important;
  }
  
  /* Demo Tour Section - Mobile */
  #welcomeTourModal div[style*="background: linear-gradient(135deg, #e3f2fd"] {
    padding: 15px 12px !important;
    margin-bottom: 15px !important;
  }
  
  #welcomeTourModal div[style*="background: linear-gradient(135deg, #e3f2fd"] h3 {
    font-size: 1.1rem !important;
    margin-bottom: 12px !important;
  }
  
  /* Grid buttons - stack on mobile */
  #welcomeTourModal div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  
  #welcomeTourModal button {
    padding: 12px 16px !important;
    font-size: 0.9rem !important;
    width: 100% !important;
  }
  
  /* About section buttons - full width on mobile */
  #welcomeTourModal div[style*="background: linear-gradient(135deg, #f8f9fa"] button {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Demo Tour section buttons - full width on mobile */
  #welcomeTourModal div[style*="background: linear-gradient(135deg, #e3f2fd"] button {
    width: 100% !important;
  }
  
  /* Close button */
  #welcomeTourModal button[aria-label="Close modal"] {
    width: 30px !important;
    height: 30px !important;
    font-size: 18px !important;
  }
}

@media (max-width: 360px) {
  #welcomeTourModal > div {
    width: 98% !important;
    padding: 15px 12px !important;
  }
  
  #welcomeTourModal h2 {
    font-size: 1.3rem !important;
  }
  
  #welcomeTourModal h3 {
    font-size: 1rem !important;
  }
  
  #welcomeTourModal button {
    padding: 10px 14px !important;
    font-size: 0.85rem !important;
  }
  
  /* About and Demo Tour sections - even more compact on very small screens */
  #welcomeTourModal div[style*="background: linear-gradient(135deg, #f8f9fa"],
  #welcomeTourModal div[style*="background: linear-gradient(135deg, #e3f2fd"] {
    padding: 12px 10px !important;
    margin-bottom: 12px !important;
  }
}

/* Tab Buttons - Mobile Optimization */
/* Cell screens only (≤600px) - Galaxy S8+, Z Fold 5, A51, A71 use cell layout */
/* Devices ≥601px (Nest Hub Max, Nest Hub, Asus Zenbook Fold, iPads, Surface devices) use desktop layout */
@media (max-width: 600px) {
  .tab-button {
    min-width: 100px !important;
    padding: 12px 16px !important;
    font-size: 0.9rem !important;
    margin: 0 4px !important;
  }
  
  /* Stack tabs on very small screens */
  .tab-button-container {
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: center !important;
  }
}

@media (max-width: 360px) {
  .tab-button {
    min-width: 90px !important;
    padding: 10px 12px !important;
    font-size: 0.85rem !important;
    margin: 0 2px !important;
  }
}

/* Landing Page - Mobile Optimization - Ultra Compact to fit without scrolling */
/* Cell screens only (≤600px) - Galaxy S8+, Z Fold 5, A51, A71 use cell layout */
/* Devices ≥601px (Nest Hub Max, Nest Hub, Asus Zenbook Fold, iPads, Surface devices) use desktop layout */
@media (max-width: 600px) {
  /* Landing container - fill more vertical space */
  #landing,
  .landing-optimized {
    padding-top: 8px !important;
    padding-right: 4px !important;
    padding-bottom: 4px !important;
    padding-left: 4px !important;
    min-height: 100vh !important;
    align-items: flex-start !important;
    justify-content: center !important;
    overflow-y: auto !important;
  }
  
  /* Landing content - more padding to fill space (increased by ~2%) */
  .landing-content {
    padding: 10px 6px !important;
    border-width: 1.5px !important;
    border-radius: 10px !important;
    max-width: 100% !important;
    margin-top: 0 !important;
  }
  
  /* Logo - reduce space from top of screen */
  #landing .logo-container,
  .landing-optimized .logo-container,
  .landing-content .logo-container {
    margin-bottom: 6px !important;
    margin-top: 4px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  .logo-background {
    padding: 7px 10px !important;
    border-radius: 6px !important;
  }
  
  .logo {
    height: 39px !important;
  }
  
  /* Tagline - more space (increased by ~2%) */
  .tagline {
    font-size: 0.7rem !important;
    margin: 0 0 8px 0 !important;
    line-height: 1.3 !important;
    color: #000000 !important;
  }
  
  /* Main buttons container - more spacing (increased by ~2%) */
  .main-buttons {
    flex-direction: column !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
    padding: 0 !important;
    position: relative !important;
  }
  
  /* Hide housekeeping section in its original location (under My Profile) on cell screens only */
  /* Target both with and without data-moved attribute to ensure it's hidden */
  .helper-section .housekeeping,
  .helper-section .housekeeping[data-moved],
  .helper-section .housekeeping[style*="display"] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Style the moved housekeeping section (near bottom of page) - make it visible on cell screens */
  /* The moved housekeeping is placed outside helper-section, so it won't be affected by the hide rule above */
  .housekeeping[data-moved="true"] {
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    margin: 10px 0 !important;
    padding: 8px !important;
    border-radius: 8px !important;
    order: 1 !important;
    height: auto !important;
    overflow: visible !important;
  }
  
  /* Ensure proper spacing for moved housekeeping section (increased by ~2%) */
  .main-buttons + .housekeeping[data-moved="true"] {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
  }
  
  /* Helper and Host sections - more padding (increased by ~2%) */
  .helper-section,
  .host-section {
    padding: 10px 6px !important;
    border-radius: 8px !important;
    margin: 0 !important;
    border-width: 1px !important;
  }
  
  /* Make Helper Tools (helper-section) background 5 shades darker and fill screen horizontally on cell screens */
  .helper-section,
  .helper-section[style*="background"] {
    background: linear-gradient(135deg, #ced4da, #868e96) !important;
    width: calc(100% + 16px) !important;
    max-width: calc(100% + 16px) !important;
    margin-left: -8px !important;
    margin-right: -8px !important;
    border-radius: 0 !important;
    padding-left: 21px !important;
    padding-right: 21px !important;
  }
  
  /* Make Admin Tools (host-section) background darker on cell screens only */
  .host-section,
  .host-section[style*="background"] {
    background: linear-gradient(135deg, #e9ecef, #dee2e6) !important;
  }
  
  /* Section titles - slightly larger (increased by ~2%) */
  .section-title {
    font-size: 0.95rem !important;
    margin-bottom: 11px !important;
    line-height: 1.2 !important;
  }
  
  /* Make Helper Tools title same color as Admin Tools on cell screens only */
  .helper-section .section-title,
  .helper-section .section-title[style*="color: #28a745"] {
    color: #495057 !important;
  }
  
  /* Action buttons container - more spacing */
  .helper-buttons,
  .host-buttons {
    gap: 10px !important;
  }
  
  /* Put Helpers and My Profile buttons on same line, equally spaced on cell screens */
  .helper-buttons[style*="flex-direction: column"],
  .helper-buttons {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100% !important;
    align-items: stretch !important;
  }
  
  /* Make action-group-small containers equal width */
  .helper-buttons .action-group-small {
    flex: 1 1 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  
  /* Make action buttons fit within their containers - 10% less width on cell screens (reduced from 90% to 81%) */
  .helper-buttons .action-button {
    width: 81% !important;
    max-width: 81% !important;
    box-sizing: border-box !important;
  }
  
  /* Action buttons - slightly larger */
  .action-button {
    width: 150px !important;
    height: 58px !important;
    font-size: 0.85rem !important;
    border-radius: 8px !important;
    padding: 8px !important;
  }
  
  /* Action group small - compact */
  .action-group-small {
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Override inline styles for sections */
  .helper-section[style*="padding: 25px"],
  .host-section[style*="padding: 25px"] {
    padding: 12px 8px !important;
  }
  
  .helper-section[style*="margin-right: 15px"],
  .host-section[style*="margin-left: 15px"] {
    margin: 0 !important;
  }
  
  .helper-buttons[style*="gap: 15px"],
  .host-buttons[style*="gap: 15px"] {
    gap: 10px !important;
  }
  
  .action-group-small[style*="gap: 15px"] {
    gap: 10px !important;
  }
  
  /* Override section title inline styles */
  .section-title[style*="margin-bottom: 20px"] {
    margin-bottom: 10px !important;
  }
  
  .section-title[style*="font-size: 1.3rem"] {
    font-size: 0.95rem !important;
  }
  
  /* Override housekeeping inline styles */
  .housekeeping[style*="margin-top: 12px"] {
    margin-top: 10px !important;
  }
  
  .housekeeping[style*="padding: 10px"] {
    padding: 8px !important;
  }
  
  .housekeeping h4[style*="font-size: 0.9rem"] {
    font-size: 0.75rem !important;
    margin-bottom: 4px !important;
  }
  
  .housekeeping p[style*="font-size: 0.72rem"] {
    font-size: 0.65rem !important;
    margin-bottom: 6px !important;
  }
  
  .housekeeping button[style*="padding: 6px 12px"] {
    padding: 5px 10px !important;
    font-size: 0.68rem !important;
  }
  
  /* Override host registration inline styles */
  .host-registration[style*="margin-top: 20px"] {
    margin-top: 12px !important;
  }
  
  .host-registration[style*="padding-top: 20px"] {
    padding-top: 12px !important;
  }
  
  .host-registration[style*="border-top: 2px"] {
    border-top-width: 1px !important;
  }
  
  .host-title[style*="font-size: 1.1rem"] {
    font-size: 0.8rem !important;
  }
  
  .host-title[style*="margin-bottom: 15px"] {
    margin-bottom: 8px !important;
  }
  
  .register-button[style*="padding: 12px 24px"] {
    padding: 8px 16px !important;
  }
  
  .register-button[style*="font-size: 1rem"] {
    font-size: 0.8rem !important;
  }
  
  .register-button[style*="margin-bottom: 15px"] {
    margin-bottom: 8px !important;
  }
  
  .host-info[style*="font-size: 0.9rem"] {
    font-size: 0.68rem !important;
  }
  
  /* Make "First-time hosts:" and "Already registered?" text the same color as "Register to help" on cell screens */
  .host-info strong,
  .host-info strong.already-registered {
    color: #000000 !important; /* Same color as action-description (black) */
  }
  
  /* Ensure "Already registered? Click 'Hosts' above" stays on a single line on cell screens */
  .host-info strong.already-registered,
  .host-info strong.already-registered + .text-small {
    white-space: nowrap !important;
    display: inline !important;
  }
  
  /* Make text-small match host-info font size on cell screens */
  .text-small {
    font-size: 0.68rem !important;
  }
  
  .button-icon {
    font-size: 1.1rem !important;
  }
  
  .button-text {
    font-size: 0.9rem !important;
  }
  
  /* Action description - more space */
  .action-description {
    font-size: 0.7rem !important;
    margin: 4px 0 0 0 !important;
    line-height: 1.3 !important;
    color: #000000 !important;
  }
  
  /* Housekeeping section - more padding */
  .housekeeping {
    margin-top: 10px !important;
    padding: 8px !important;
    border-radius: 6px !important;
  }
  
  .housekeeping h4 {
    font-size: 0.75rem !important;
    margin-bottom: 4px !important;
    line-height: 1.2 !important;
  }
  
  .housekeeping p {
    font-size: 0.65rem !important;
    margin-bottom: 6px !important;
    line-height: 1.3 !important;
  }
  
  .housekeeping button {
    padding: 5px 10px !important;
    font-size: 0.68rem !important;
    border-radius: 4px !important;
    min-height: 30px !important;
  }
  
  /* Make Tour On, Tour Off, and Inspiration Off buttons 25% smaller horizontally on cell screens */
  /* Use attribute selector with higher specificity to override inline styles */
  /* All three buttons should be the same size - each 37.5% of the parent column container (25% smaller than 50%) */
  .housekeeping button[onclick*="turnOnTour"][data-quick-tooltip],
  .housekeeping button[onclick*="turnOffTour"][data-quick-tooltip],
  .housekeeping button[onclick*="turnOffBanner"][data-quick-tooltip] {
    padding: 5px 3px !important; /* Keep vertical padding (5px) unchanged, horizontal padding (3px) unchanged */
    font-size: 0.68rem !important; /* Keep font size unchanged */
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    transform: none !important; /* Remove any transform to prevent text distortion */
    box-sizing: border-box !important;
  }
  
  /* Make Inspiration Off button 37.5% of parent column (25% smaller than 50%) */
  .housekeeping button[onclick*="turnOffBanner"] {
    width: 37.5% !important;
    max-width: 37.5% !important;
    flex: 0 0 37.5% !important;
  }
  
  /* Make Tour buttons container full width so buttons inside can be sized relative to parent */
  .housekeeping div[style*="display: flex"][style*="gap: 6px"] {
    gap: 5px !important;
    width: 100% !important; /* Full width so buttons can be 37.5% of parent */
    max-width: 100% !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
  
  /* Make Tour On and Tour Off buttons each 37.5% of parent column (same as Inspiration Off, 25% smaller than 50%) */
  /* Since container is 100% of parent, 37.5% of container = 37.5% of parent */
  .housekeeping div[style*="display: flex"][style*="gap: 6px"] button {
    width: calc(37.5% - 2.5px) !important; /* 37.5% of parent minus half the gap */
    max-width: calc(37.5% - 2.5px) !important;
    flex: 0 0 calc(37.5% - 2.5px) !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  
  .housekeeping div[style*="flex-direction: column"] {
    gap: 6px !important;
  }
  
  /* Host registration section - more spacing (increased by ~2%) */
  .host-registration {
    margin-top: 8px !important;
    padding-top: 8px !important;
  }
  
  .divider {
    width: 50px !important;
    height: 1px !important;
    margin: 0 auto 9px !important;
  }
  
  .host-title {
    font-size: 0.8rem !important;
    margin-bottom: 9px !important;
    line-height: 1.2 !important;
  }
  
  .register-button {
    padding: 8px 16px !important;
    font-size: 0.8rem !important;
    border-radius: 5px !important;
    margin-bottom: 9px !important;
    min-height: 36px !important;
  }
  
  .host-info {
    font-size: 0.68rem !important;
    line-height: 1.3 !important;
  }
  
  .host-info br {
    display: none !important;
  }
  
  /* Footer - more spacing (increased by ~2%) */
  .footer-links {
    margin-top: 6px !important;
    padding-top: 6px !important;
  }
  
  .links-row {
    gap: 8px !important;
    margin-bottom: 0px !important;
  }
  
  .footer-link {
    font-size: 0.65rem !important;
    padding: 2px 4px !important;
    color: #000000 !important; /* Same color as action-description (black) */
  }
  
  .copyright {
    font-size: 0.6rem !important;
    margin-top: 0px !important;
  }
}

/* Consistent rendering for Galaxy S23 and Pixel 7 */
/* This breakpoint comes AFTER the 600px rules to override them with higher specificity */
/* Expanded range to cover all variants: 360px-450px covers all standard phone sizes */
/* This ensures Galaxy S23 (any width) and Pixel 7 (any width) render identically */
@media (min-width: 360px) and (max-width: 450px) {
  /* Force consistent font rendering */
  body, html {
    font-size: 14px !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  /* Ensure landing page elements are consistent across both devices */
  /* Using maximum specificity to override style-optimized-v2.css and inline styles */
  html body #landing.landing-optimized,
  html body #landing,
  body #landing.landing-optimized,
  body #landing,
  #landing.landing-optimized,
  #landing,
  html body .landing-optimized,
  body .landing-optimized,
  .landing-optimized {
    padding-top: 8px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    padding-bottom: 4px !important;
    min-height: 100vh !important;
    align-items: flex-start !important;
    justify-content: center !important;
    overflow-y: auto !important;
  }
  
  html body .landing-content,
  body .landing-content,
  .landing-content {
    padding: 10px 6px !important;
    border-width: 1.5px !important;
    border-radius: 10px !important;
    max-width: 100% !important;
    margin-top: 0 !important;
  }
  
  html body #landing .logo-container,
  html body .landing-optimized .logo-container,
  html body .landing-content .logo-container,
  body #landing .logo-container,
  body .landing-optimized .logo-container,
  body .landing-content .logo-container,
  #landing .logo-container,
  .landing-optimized .logo-container,
  .landing-content .logo-container {
    margin-bottom: 6px !important;
    margin-top: 4px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  html body .logo-background,
  body .logo-background,
  .logo-background {
    padding: 7px 10px !important;
    border-radius: 6px !important;
  }
  
  html body #landing .logo,
  html body .landing-optimized .logo,
  html body .landing-content .logo,
  html body .logo-container .logo,
  body #landing .logo,
  body .landing-optimized .logo,
  body .landing-content .logo,
  body .logo-container .logo,
  #landing .logo,
  .landing-optimized .logo,
  .landing-content .logo,
  .logo-container .logo,
  .logo {
    height: 39px !important;
    max-height: 39px !important;
    min-height: 39px !important;
  }
  
  html body .tagline,
  body .tagline,
  .tagline {
    font-size: 0.7rem !important;
    margin: 0 0 13px 0 !important;
    line-height: 1.3 !important;
    color: #000000 !important;
  }
  
  html body .main-buttons,
  body .main-buttons,
  .main-buttons {
    flex-direction: column !important;
    gap: 13px !important;
    margin-bottom: 13px !important;
    padding: 0 !important;
    position: relative !important;
  }
  
  /* Ensure consistent button sizing */
  html body .action-button,
  body .action-button,
  .action-button {
    width: 140px !important;
    height: 50px !important;
    font-size: 0.85rem !important;
    min-width: 140px !important;
    min-height: 50px !important;
  }
  
  /* Consistent section spacing */
  html body .helper-section,
  html body .host-section,
  body .helper-section,
  body .host-section,
  .helper-section,
  .host-section {
    padding: 13px 8px !important;
    border-radius: 8px !important;
    margin: 0 !important;
  }
  
  html body .section-title,
  body .section-title,
  .section-title {
    font-size: 0.85rem !important;
    margin-bottom: 9px !important;
  }
  
  html body .action-description,
  body .action-description,
  .action-description {
    font-size: 0.7rem !important;
    margin-bottom: 9px !important;
  }
  
  /* Ensure footer is consistent */
  html body .footer-links,
  body .footer-links,
  .footer-links {
    margin-top: 6px !important;
    padding-top: 6px !important;
  }
  
  html body .footer-link,
  body .footer-link,
  .footer-link {
    font-size: 0.65rem !important;
    padding: 2px 4px !important;
  }
  
  html body .copyright,
  body .copyright,
  .copyright {
    font-size: 0.6rem !important;
    margin-top: 0px !important;
  }
  
  /* Host Tour Steps 2 & 7 - Move tooltips higher on Galaxy S23 cell screens */
  /* Override inline top: 50% with calc to move tooltips higher */
  /* Using maximum specificity to override JavaScript inline styles with !important */
  html body .step-tooltip[data-host-step="2"],
  body .step-tooltip[data-host-step="2"],
  html body .step-tooltip[data-host-step="2"][style],
  body .step-tooltip[data-host-step="2"][style],
  html body .step-tooltip[data-host-step="2"][style*="top: 50%"],
  body .step-tooltip[data-host-step="2"][style*="top: 50%"],
  .step-tooltip[data-host-step="2"],
  .step-tooltip[data-host-step="2"][style],
  html body .step-tooltip[data-host-step="7"],
  body .step-tooltip[data-host-step="7"],
  html body .step-tooltip[data-host-step="7"][style],
  body .step-tooltip[data-host-step="7"][style],
  html body .step-tooltip[data-host-step="7"][style*="top: 50%"],
  body .step-tooltip[data-host-step="7"][style*="top: 50%"],
  .step-tooltip[data-host-step="7"],
  .step-tooltip[data-host-step="7"][style] {
    top: calc(50% - 80px) !important;
  }
}

@media (max-width: 360px) {
  /* Ultra compact for very small screens */
  #landing,
  .landing-optimized {
    padding-top: 15px !important;
    padding-right: 1px !important;
    padding-bottom: 2px !important;
    padding-left: 1px !important;
  }
  
  .landing-content {
    padding: 6px 4px !important;
    border-width: 1px !important;
  }
  
  /* Logo - increase space from top of screen */
  #landing .logo-container,
  .landing-optimized .logo-container,
  .landing-content .logo-container {
    margin-top: 12px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  .logo {
    height: 28px !important;
  }
  
  .logo-background {
    padding: 3px 6px !important;
  }
  
  .tagline {
    font-size: 0.6rem !important;
    margin-bottom: 4px !important;
    color: #000000 !important;
  }
  
  .main-buttons {
    gap: 4px !important;
    margin-bottom: 4px !important;
  }
  
  .helper-section,
  .host-section {
    padding: 6px 4px !important;
  }
  
  /* Make Helper Tools (helper-section) background 5 shades darker and fill screen horizontally on very small cell screens */
  .helper-section,
  .helper-section[style*="background"] {
    background: linear-gradient(135deg, #ced4da, #868e96) !important;
    width: calc(100% + 12px) !important;
    max-width: calc(100% + 12px) !important;
    margin-left: -6px !important;
    margin-right: -6px !important;
    border-radius: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  
  /* Make Admin Tools (host-section) background darker on very small cell screens */
  .host-section,
  .host-section[style*="background"] {
    background: linear-gradient(135deg, #e9ecef, #dee2e6) !important;
  }
  
  .section-title {
    font-size: 0.8rem !important;
    margin-bottom: 4px !important;
  }
  
  /* Make Helper Tools title same color as Admin Tools on very small cell screens */
  .helper-section .section-title,
  .helper-section .section-title[style*="color: #28a745"] {
    color: #495057 !important;
  }
  
  .action-button {
    width: 120px !important;
    height: 45px !important;
    font-size: 0.75rem !important;
  }
  
  /* Action group small - even more compact */
  .action-group-small {
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Override inline styles for sections on very small screens */
  .helper-section[style*="padding: 25px"],
  .host-section[style*="padding: 25px"] {
    padding: 6px 4px !important;
  }
  
  .helper-buttons[style*="gap: 15px"],
  .host-buttons[style*="gap: 15px"] {
    gap: 4px !important;
  }
  
  .action-group-small[style*="gap: 15px"] {
    gap: 4px !important;
  }
  
  /* Put Helpers and My Profile buttons on same line, equally spaced on very small cell screens */
  .helper-buttons[style*="flex-direction: column"],
  .helper-buttons {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    gap: 6px !important;
    width: 100% !important;
    align-items: stretch !important;
  }
  
  /* Make action-group-small containers equal width */
  .helper-buttons .action-group-small {
    flex: 1 1 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  
  /* Make action buttons fit within their containers - 10% less width on very small cell screens (reduced from 90% to 81%) */
  .helper-buttons .action-button {
    width: 81% !important;
    max-width: 81% !important;
    box-sizing: border-box !important;
  }
  
  /* Override section title inline styles on very small screens */
  .section-title[style*="margin-bottom: 20px"] {
    margin-bottom: 8px !important;
  }
  
  .section-title[style*="font-size: 1.3rem"] {
    font-size: 0.9rem !important;
  }
  
  /* Hide housekeeping section in its original location (under My Profile) on very small cell screens */
  /* Target both with and without data-moved attribute to ensure it's hidden */
  .helper-section .housekeeping,
  .helper-section .housekeeping[data-moved],
  .helper-section .housekeeping[style*="display"] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Style the moved housekeeping section (near bottom of page) - make it visible on very small cell screens */
  /* The moved housekeeping is placed outside helper-section, so it won't be affected by the hide rule above */
  .housekeeping[data-moved="true"] {
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    margin: 8px 0 !important;
    padding: 6px !important;
    border-radius: 8px !important;
    height: auto !important;
    overflow: visible !important;
  }
  
  /* Override housekeeping inline styles on very small screens */
  .housekeeping[style*="margin-top: 12px"] {
    margin-top: 8px !important;
  }
  
  .housekeeping[style*="padding: 10px"] {
    padding: 6px !important;
  }
  
  .housekeeping h4[style*="font-size: 0.9rem"] {
    font-size: 0.7rem !important;
    margin-bottom: 3px !important;
  }
  
  .housekeeping p[style*="font-size: 0.72rem"] {
    font-size: 0.6rem !important;
    margin-bottom: 5px !important;
  }
  
  .housekeeping button[style*="padding: 6px 12px"] {
    padding: 4px 8px !important;
    font-size: 0.63rem !important;
  }
  
  /* Make Tour On, Tour Off, and Inspiration Off buttons 50% smaller horizontally on very small cell screens */
  .housekeeping button[onclick*="turnOnTour"],
  .housekeeping button[onclick*="turnOffTour"],
  .housekeeping button[onclick*="turnOffBanner"] {
    padding: 5px 3px !important; /* Reduced horizontal padding from 12px to 3px (75% reduction, close to 50% overall) */
    font-size: 0.68rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    transform: none !important; /* Remove any transform to prevent text distortion */
  }
  
  /* Override host registration inline styles on very small screens */
  .host-registration[style*="margin-top: 20px"] {
    margin-top: 10px !important;
  }
  
  .host-registration[style*="padding-top: 20px"] {
    padding-top: 10px !important;
  }
  
  .host-title[style*="font-size: 1.1rem"] {
    font-size: 0.75rem !important;
  }
  
  .host-title[style*="margin-bottom: 15px"] {
    margin-bottom: 6px !important;
  }
  
  .register-button[style*="padding: 12px 24px"] {
    padding: 7px 14px !important;
  }
  
  .register-button[style*="font-size: 1rem"] {
    font-size: 0.75rem !important;
  }
  
  .register-button[style*="margin-bottom: 15px"] {
    margin-bottom: 6px !important;
  }
  
  .host-info[style*="font-size: 0.9rem"] {
    font-size: 0.63rem !important;
  }
  
  /* Make "First-time hosts:" and "Already registered?" text the same color as "Register to help" on very small cell screens */
  .host-info strong,
  .host-info strong.already-registered {
    color: #000000 !important; /* Same color as action-description (black) */
  }
  
  /* Ensure "Already registered? Click 'Hosts' above" stays on a single line on very small cell screens */
  .host-info strong.already-registered,
  .host-info strong.already-registered + .text-small {
    white-space: nowrap !important;
    display: inline !important;
  }
  
  /* Make text-small match host-info font size on very small cell screens */
  .text-small {
    font-size: 0.63rem !important;
  }
  
  .button-icon {
    font-size: 0.9rem !important;
  }
  
  .button-text {
    font-size: 0.8rem !important;
  }
  
  .action-description {
    font-size: 0.6rem !important;
    margin: 1px 0 0 0 !important;
    color: #000000 !important;
  }
  
  .housekeeping {
    margin-top: 4px !important;
    padding: 4px !important;
  }
  
  .housekeeping h4 {
    font-size: 0.65rem !important;
    margin-bottom: 1px !important;
  }
  
  .housekeeping p {
    font-size: 0.55rem !important;
    margin-bottom: 3px !important;
  }
  
  .housekeeping button {
    padding: 3px 6px !important;
    font-size: 0.6rem !important;
    min-height: 26px !important;
  }
  
  /* Make Inspiration Off button the same size as Tour On button on very small cell screens */
  .housekeeping button[onclick*="turnOffBanner"] {
    width: calc((100% - 5px) / 2) !important;
    max-width: calc((100% - 5px) / 2) !important;
    box-sizing: border-box !important;
  }
  
  /* Make Tour buttons container match the width of Inspiration Off button */
  .housekeeping div[style*="display: flex"][style*="gap: 6px"] {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Make Tour On and Tour Off buttons equal width within their container */
  .housekeeping div[style*="display: flex"][style*="gap: 6px"] button {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  
  .host-registration {
    margin-top: 4px !important;
    padding-top: 4px !important;
  }
  
  .host-title {
    font-size: 0.7rem !important;
    margin-bottom: 4px !important;
  }
  
  .register-button {
    padding: 5px 10px !important;
    font-size: 0.7rem !important;
    min-height: 30px !important;
  }
  
  .host-info {
    font-size: 0.6rem !important;
  }
  
  .footer-links {
    margin-top: 4px !important;
    padding-top: 4px !important;
  }
  
  .links-row {
    margin-bottom: 1px !important;
  }
  
  .footer-link {
    font-size: 0.55rem !important;
    color: #000000 !important; /* Same color as action-description (black) */
  }
  
  .copyright {
    font-size: 0.5rem !important;
    margin-top: 1px !important;
  }
}

/* General Modal Improvements for Mobile */
/* Cell screens only (≤600px) - Galaxy S8+, Z Fold 5, A51, A71 use cell layout */
/* Devices ≥601px (Nest Hub Max, Nest Hub, Asus Zenbook Fold, iPads, Surface devices) use desktop layout */
@media (max-width: 600px) {
  /* General modal rule - exclude welcomeTourModal which has its own specific rules at line 317 */`r`n  .modal:not(#welcomeTourModal),
  [id$="Modal"]:not(#welcomeTourModal) > div,
  div[style*="max-width"]:not(#welcomeTourModal > div) {
    width: 95% !important;
    max-width: 95% !important;
    padding: 20px 15px !important;
    margin: 10px !important;
  }
  
  /* Info Modal */
  #infoModalContainer {
    width: 95% !important;
    max-width: 95% !important;
    max-height: 85vh !important;
  }
  
  /* How MagnifyHope Works Modal - Compact for Mobile */
  /* Target the how content using the class added by JavaScript */
  #infoContent.info-content-how {
    padding: 15px 10px !important;
  }
  
  /* How modal header section with orange gradient */
  #infoContent.info-content-how > div:first-child {
    margin-bottom: 12px !important;
    padding-bottom: 10px !important;
  }
  
  #infoContent.info-content-how > div:first-child > div:first-child {
    gap: 10px !important;
  }
  
  /* How modal header - make more compact */
  #infoContent.info-content-how h2 {
    font-size: 1.3rem !important;
    margin: 0 !important;
  }
  
  /* How modal logo container - smaller */
  #infoContent.info-content-how .logo-background {
    padding: 8px 10px !important;
  }
  
  #infoContent.info-content-how .logo {
    height: 32px !important;
  }
  
  /* How modal main content wrapper - reduce padding and margins */
  #infoContent.info-content-how > div:last-child {
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.5 !important;
  }
  
  /* How modal first paragraph - reduce size */
  #infoContent.info-content-how > div:last-child > p:first-child {
    font-size: 0.95rem !important;
    margin-bottom: 12px !important;
    line-height: 1.4 !important;
  }
  
  /* How modal content sections - reduce spacing */
  #infoContent.info-content-how div[style*="background: #f8f9fa"],
  #infoContent.info-content-how div[style*="background: #e3f2fd"],
  #infoContent.info-content-how div[style*="background: #fff3cd"],
  #infoContent.info-content-how div[style*="background: #e8f5e9"] {
    padding: 12px 10px !important;
    margin: 8px 0 !important;
    border-radius: 8px !important;
  }
  
  /* How modal headings - smaller */
  #infoContent.info-content-how h3 {
    font-size: 1rem !important;
    margin: 0 0 8px 0 !important;
    line-height: 1.2 !important;
  }
  
  /* How modal paragraphs - compact */
  #infoContent.info-content-how div[style*="background"] p {
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
    margin: 0 0 6px 0 !important;
  }
  
  /* How modal lists - compact */
  #infoContent.info-content-how ol,
  #infoContent.info-content-how ul {
    padding-left: 18px !important;
    margin: 6px 0 !important;
    line-height: 1.5 !important;
  }
  
  #infoContent.info-content-how li {
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
    margin-bottom: 5px !important;
  }
  
  /* How modal strong tags - slightly smaller */
  #infoContent.info-content-how strong {
    font-size: 0.85rem !important;
  }
  
  /* Reduce all margins in how content */
  #infoContent.info-content-how div[style*="margin: 20px"] {
    margin: 8px 0 !important;
  }
  
  /* Make info modal container taller to fit more content without scrolling */
  #infoModalContainer {
    max-height: 90vh !important;
  }
  
  /* Reduce padding on info modal for how content */
  #infoContent.info-content-how {
    padding: 12px 8px !important;
  }
  
  /* Form inputs */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  textarea,
  select {
    font-size: 16px !important; /* Prevents zoom on iOS */
    padding: 12px 14px !important;
  }
  
  /* Buttons */
  button {
    min-height: 44px !important; /* Touch target size */
    padding: 12px 18px !important;
  }
}

/* Login Modal - Mobile Optimization */
/* Cell screens only (≤600px) - Galaxy S8+, Z Fold 5, A51, A71 use cell layout */
/* Devices ≥601px (Nest Hub Max, Nest Hub, Asus Zenbook Fold, iPads, Surface devices) use desktop layout */
@media (max-width: 600px) {
  .login-card,
  div[style*="max-width: 450px"],
  div[style*="max-width: 400px"] {
    width: 95% !important;
    max-width: 95% !important;
    padding: 20px 15px !important;
  }
  
  div[style*="padding: 40px"] {
    padding: 20px 15px !important;
  }
  
  div[style*="padding: 32px 40px"] {
    padding: 20px 15px !important;
  }
  
  /* Tour Login Modal - Fit vertically on cell devices */
  #authModal[data-tour-modal="true"] {
    align-items: flex-start !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  
  #authModal[data-tour-modal="true"] > div {
    max-height: 100vh !important;
    height: auto !important;
    margin: 0 !important;
    width: calc(100% - 20px) !important;
    max-width: calc(100% - 20px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  
  /* Login Modal - Fit vertically on cell screens without scrolling */
  #authModal {
    align-items: center !important;
    padding: 5px !important;
    overflow: hidden !important;
  }
  
  #authModal > div {
    max-height: calc(100vh - 10px) !important;
    height: auto !important;
    margin: 0 !important;
    width: calc(100% - 10px) !important;
    max-width: calc(100% - 10px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border-radius: 12px !important;
  }
  
  /* Compact header - make "Host Login" fit in blue box */
  #authModal > div > div:first-child {
    padding: 12px 16px 10px 16px !important; /* Much more compact */
    flex-shrink: 0 !important;
  }
  
  /* Hide decorative circles on mobile to save space */
  #authModal > div > div:first-child > div[style*="position: absolute"] {
    display: none !important;
  }
  
  /* Compact logo icon */
  #authModal > div > div:first-child > div[style*="position: relative"] > div[style*="display: inline-flex"] {
    width: 40px !important;
    height: 40px !important;
    margin-bottom: 8px !important;
    border-radius: 10px !important;
  }
  
  #authModal > div > div:first-child > div[style*="position: relative"] > div[style*="display: inline-flex"] > span {
    font-size: 20px !important;
  }
  
  /* Make "Host Login" title fit in blue box */
  #authModal > div > div:first-child h2 {
    font-size: 1.1rem !important; /* Much smaller to fit */
    margin: 0 0 4px 0 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }
  
  /* Compact subtitle */
  #authModal > div > div:first-child p {
    font-size: 0.75rem !important;
    margin: 0 !important;
    line-height: 1.2 !important;
  }
  
  /* Compact form content - no scrolling needed */
  #authModal > div > div:last-child {
    padding: 16px 14px !important; /* Very compact */
    overflow: visible !important;
    flex: 1 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  
  #authModal form {
    gap: 12px !important; /* Reduced spacing */
    display: flex !important;
    flex-direction: column !important;
  }
  
  /* Compact labels */
  #authModal form label {
    font-size: 0.8rem !important;
    margin-bottom: 5px !important;
  }
  
  /* Compact input fields */
  #authModal input[type="email"],
  #authModal input[type="password"] {
    padding: 10px 14px !important;
    font-size: 0.9rem !important;
    border-radius: 8px !important;
  }
  
  /* Compact input icons */
  #authModal input[type="email"] + div,
  #authModal input[type="password"] + div {
    right: 12px !important;
    font-size: 1rem !important;
  }
  
  /* Compact forgot password link */
  #authModal #forgotPwdLink {
    font-size: 0.75rem !important;
    margin-top: 4px !important;
  }
  
  /* Compact submit button */
  #authModal button[type="submit"] {
    padding: 12px 18px !important;
    font-size: 0.9rem !important;
    margin-top: 2px !important;
    border-radius: 8px !important;
  }
  
  /* Compact error message */
  #authModal #authModalError {
    padding: 8px !important;
    font-size: 0.8rem !important;
    margin: 4px 0 !important;
  }
  
  /* Compact cancel button */
  #authModal button[onclick*="closeLogin"],
  #authModal button[onclick*="MHAuth.closeLogin"] {
    padding: 8px 16px !important;
    margin-top: 10px !important;
    font-size: 0.85rem !important;
    border-radius: 8px !important;
  }
  
  /* Compact registration footer */
  #authModal > div > div:last-child > div:last-child {
    margin-top: 12px !important;
    padding: 12px 14px !important;
    margin-left: -14px !important;
    margin-right: -14px !important;
    flex-shrink: 0 !important;
  }
  
  #authModal > div > div:last-child > div:last-child p {
    font-size: 0.75rem !important;
    margin-bottom: 4px !important;
    line-height: 1.3 !important;
  }
  
  #authModal > div > div:last-child > div:last-child p:last-child {
    font-size: 0.7rem !important;
    line-height: 1.2 !important;
  }
  
  #authModal > div > div:last-child > div:last-child a {
    font-size: 0.75rem !important;
  }
  
  #authModal[data-tour-modal="true"] > div > div:first-child {
    flex-shrink: 0 !important;
  }
  
  #authModal[data-tour-modal="true"] > div > div:last-child {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* Host Dashboard Tabs - Mobile */
/* Cell screens only (≤600px) - Galaxy S8+, Z Fold 5, A51, A71 use cell layout */
/* Devices ≥601px (Nest Hub Max, Nest Hub, Asus Zenbook Fold, iPads, Surface devices) use desktop layout */
@media (max-width: 600px) {
  .app-container {
    padding: 10px 5px !important;
    max-width: 100vw !important;
    width: 100% !important;
    margin: 10px 0 !important;
    overflow-x: visible !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
  }
  
  /* Override inline max-width on app-container */
  .app-container[style*="max-width"] {
    max-width: 100vw !important;
  }
  
  /* Tab buttons in host dashboard */
  button[style*="min-width: 120px"] {
    min-width: 90px !important;
    padding: 10px 12px !important;
    font-size: 0.85rem !important;
  }
  
  /* Host Dashboard Header - Stack vertically on mobile to ensure buttons are visible */
  .app-container > div:first-child {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    padding-bottom: 6px !important;
    margin-bottom: 4px !important;
    overflow: visible !important;
  }
  
  /* Reduce gap in logo/title section */
  .app-container > div:first-child > div:first-child {
    gap: 6px !important;
  }
  
  /* Logo and title section - full width */
  .app-container > div:first-child > div:first-child {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    overflow: visible !important;
  }
  
  .app-container > div:first-child h2 {
    font-size: 1rem !important;
    line-height: 1.1 !important;
    margin: 0 !important;
  }
  
  .app-container > div:first-child #hostOrgName {
    font-size: 0.7rem !important;
    margin-top: 2px !important;
  }
  
  /* Hide logo on mobile to make room for title and buttons - ONLY for host dashboard (.app-container) */
  .app-container > div:first-child .logo,
  .app-container > div:first-child img[alt*="Logo"],
  .app-container > div:first-child img[src*="logo"],
  .app-container .logo,
  .app-container img.logo[style*="height"],
  .app-container > div:first-child > div:first-child img {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
  }
  
  .app-container > div:first-child .logo-background,
  .app-container .logo-background,
  .app-container div.logo-background[style*="padding"],
  .app-container > div:first-child > div:first-child > div.logo-background {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
  }
  
  /* Ensure main page logo is visible on mobile - make it smaller */
  #landing .logo-container,
  .landing-optimized .logo-container,
  .landing-content .logo-container {
    display: block !important;
    visibility: visible !important;
    text-align: center !important;
    margin-top: 15px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 10px !important;
    padding: 0 !important;
  }
  
  /* Override any conflicting margin rules for logo container - increase top spacing */
  #landing .landing-content .logo-container,
  .landing-optimized .landing-content .logo-container {
    margin-top: 20px !important;
  }
  
  #landing .logo-background,
  .logo-container .logo-background {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding: 4px 8px !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  
  #landing .logo,
  .logo-container .logo,
  .logo-container img.logo {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    height: 48px !important;
    max-width: 100% !important;
    max-height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
  }
  
  /* Home and Logout buttons container - full width, always visible */
  .app-container > div:first-child > div:last-child {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    margin-top: 0 !important;
    overflow: visible !important;
    flex-shrink: 0 !important;
    order: 2 !important;
  }
  
  /* Home and Logout buttons - smaller size to fit on screen */
  .app-container .back-btn,
  button.back-btn[onclick*="goHome"],
  button.back-btn[onclick*="logout"],
  .app-container button[onclick*="goHome()"],
  .app-container button[onclick*="logout(event)"] {
    padding: 6px 10px !important;
    font-size: 0.7rem !important;
    min-height: 32px !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    max-width: none !important;
    min-width: 65px !important;
    width: auto !important;
  }
  
  /* Ensure body and html don't clip content */
  body, html {
    overflow-x: visible !important;
    max-width: 100vw !important;
  }
  
  /* Ensure app-container doesn't clip */
  .app-container,
  .app-container * {
    overflow-x: visible !important;
  }
  
  /* Stat Cards - Make smaller and fit on one line on mobile */
  .app-container > div[style*="grid-template-columns"] {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4px !important;
    margin-bottom: 10px !important;
  }
  
  .stat-card {
    padding: 6px 4px !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  
  .stat-value {
    font-size: 1.2rem !important;
    margin-bottom: 2px !important;
    line-height: 1.2 !important;
  }
  
  .stat-label {
    font-size: 0.65rem !important;
    line-height: 1.1 !important;
    margin: 0 !important;
  }
}

/* Volunteer Form - Mobile */
/* Cell screens only (≤600px) - Galaxy S8+, Z Fold 5, A51, A71 use cell layout */
/* Devices ≥601px (Nest Hub Max, Nest Hub, Asus Zenbook Fold, iPads, Surface devices) use desktop layout */
@media (max-width: 600px) {
  #volunteerForm {
    padding: 15px 12px !important;
  }
  
  #volunteerForm label {
    font-size: 0.9rem !important;
  }
  
  #volunteerForm input,
  #volunteerForm select,
  #volunteerForm textarea {
    font-size: 16px !important;
    padding: 12px !important;
  }
  
  /* Ensure placeholder text is readable on mobile */
  #volunteerForm input::placeholder,
  #volunteerForm textarea::placeholder {
    font-size: 14px !important;
    color: #999 !important;
  }
  
  /* Make email and address fields full width on cell screens so placeholder text is fully visible */
  #volunteerForm fieldset:first-of-type > div {
    grid-template-columns: 1fr !important;
  }
  
  /* Make email and address fields span full width */
  #volunteerForm #vEmail,
  #volunteerForm #vAddress {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Match email and address placeholder font size to name placeholder on cell screens */
  #volunteerForm #vEmail::placeholder,
  #volunteerForm #vAddress::placeholder {
    font-size: 14px !important;
    color: #999 !important;
  }
}

/* Skills Container Modal - Mobile */
/* Cell screens only (≤600px) - Galaxy S8+, Z Fold 5, A51, A71 use cell layout */
/* Devices ≥601px (Nest Hub Max, Nest Hub, Asus Zenbook Fold, iPads, Surface devices) use desktop layout */
@media (max-width: 600px) {
  #skillsContainer {
    width: 95% !important;
    max-width: 95% !important;
    padding: 15px 12px !important;
    max-height: 85vh !important;
  }
}

/* Profile Lookup - Mobile */
/* Cell screens only (≤600px) - Galaxy S8+, Z Fold 5, A51, A71 use cell layout */
/* Devices ≥601px (Nest Hub Max, Nest Hub, Asus Zenbook Fold, iPads, Surface devices) use desktop layout */
@media (max-width: 600px) {
  #profileLookup {
    padding: 20px 15px !important;
    width: 95% !important;
    max-width: 95% !important;
  }
}

/* Organization Help Flyout - Mobile */
/* Cell screens only (≤600px) - Galaxy S8+, Z Fold 5, A51, A71 use cell layout */
/* Devices ≥601px (Nest Hub Max, Nest Hub, Asus Zenbook Fold, iPads, Surface devices) use desktop layout */
@media (max-width: 600px) {
  #orgHelpFlyout {
    width: 92vw !important;
    max-width: 92vw !important;
    padding: 15px 12px !important;
  }
}

/* Tab Button Tooltips/Flyouts - Mobile */
/* Cell screens only (≤600px) - Galaxy S8+, Z Fold 5, A51, A71 use cell layout */
/* Devices ≥601px (Nest Hub Max, Nest Hub, Asus Zenbook Fold, iPads, Surface devices) use desktop layout */
@media (max-width: 600px) {
  /* Host Dashboard hover tooltip - reduce size on cell screens */
  #hover-tooltip {
    max-width: min(180px, 80vw) !important;
    width: auto !important;
    font-size: 0.65rem !important;
    padding: 6px 10px !important;
    border-radius: 8px !important;
    line-height: 1.25 !important;
    letter-spacing: 0.2px !important;
  }
  
  /* Reduce tooltip arrow size on mobile */
  #hover-tooltip::before {
    border-left-width: 5px !important;
    border-right-width: 5px !important;
    border-bottom-width: 5px !important;
    top: -5px !important;
  }
  
  /* Reduce quick tooltip size on cell screens for tab buttons */
  .tab-button .quick-tooltip {
    max-width: min(180px, 80vw) !important;
    width: auto !important;
    font-size: 0.6rem !important;
    padding: 4px 6px !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    line-height: 1.25 !important;
    margin-bottom: 4px !important;
    border-radius: 4px !important;
  }
  
  /* Ensure tooltips stay within viewport on cell screens */
  .tab-button {
    position: relative !important;
  }
  
  .tab-button .quick-tooltip {
    position: absolute !important;
    bottom: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    max-width: min(180px, 80vw) !important;
    z-index: 10000 !important;
    /* Ensure tooltip doesn't go off screen */
    left: 50% !important;
    right: auto !important;
    margin-left: 0 !important;
  }
  
  /* Adjust tooltip arrow size on mobile */
  .tab-button .quick-tooltip::after {
    border-width: 4px !important;
  }
  
  /* All quick tooltips on cell screens - general reduction */
  .quick-tooltip {
    max-width: min(200px, 85vw) !important;
    font-size: 0.65rem !important;
    padding: 4px 8px !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    line-height: 1.3 !important;
  }
}

/* Tab Button Tooltips/Flyouts - Larger Mobile/Tablet Screens */
/* For iPhone XR, iPhone 14 Pro Max, Galaxy ZFold, Asus Zenbook Fold */
/* These devices have wider screens but should still show tooltips horizontally */
@media (min-width: 414px) and (max-width: 900px) {
  /* Host Dashboard hover tooltip - ensure short text stays on one line */
  #hover-tooltip {
    white-space: nowrap !important;
    max-width: none !important;
    width: auto !important;
    padding: 8px 12px !important;
    font-size: 0.75rem !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }
}

/* Text Scaling for Readability */
/* Cell screens only (≤600px) - Galaxy S8+, Z Fold 5, A51, A71 use cell layout */
/* Devices ≥601px (Nest Hub Max, Nest Hub, Asus Zenbook Fold, iPads, Surface devices) use desktop layout */
@media (max-width: 600px) {
  body {
    font-size: 14px !important;
  }
  
  h1 { font-size: 1.5rem !important; }
  h2 { font-size: 1.3rem !important; }
  h3 { font-size: 1.1rem !important; }
  h4 { font-size: 1rem !important; }
}

/* Tour Tooltips - Mobile Optimization */
/* Cell screens only (≤600px) - Galaxy S8+, Z Fold 5, A51, A71 use cell layout */
/* Devices ≥601px (Nest Hub Max, Nest Hub, Asus Zenbook Fold, iPads, Surface devices) use desktop layout */
@media (max-width: 600px) {
  /* Base styles for all tooltips on mobile */
  .step-tooltip {
    width: 92vw !important;
    max-width: 92vw !important;
    padding: 15px 12px !important;
    max-height: 75vh !important;
    overflow-y: auto !important;
    position: fixed !important;
    box-sizing: border-box !important;
    /* Ensure tooltips are always visible */
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    z-index: 10002 !important;
    pointer-events: auto !important;
  }
  
  /* Don't override positioning - let JavaScript handle it for both host and helper tours */
  /* JavaScript will center tooltips appropriately based on tour type and step */
  
  /* Step 0 helper tour tooltip - set specific dimensions on cell screens (324x284) */
  /* Use body prefix for higher specificity to override JavaScript inline styles */
  body .step-tooltip[data-step="0"],
  body .step-tooltip[data-helper-step="0"],
  .step-tooltip[data-step="0"],
  .step-tooltip[data-helper-step="0"] {
    width: 324px !important;
    max-width: 324px !important;
    height: 284px !important;
    min-height: 284px !important;
    max-height: 284px !important;
    overflow-y: auto !important;
  }
  
  /* Step 0 host tour tooltip - set specific dimensions on cell screens (324x261) */
  /* Use maximum specificity to override JavaScript inline styles */
  body .step-tooltip[data-host-step="0"],
  body .step-tooltip[data-host-step="0"][style],
  html body .step-tooltip[data-host-step="0"],
  html body .step-tooltip[data-host-step="0"][style],
  .step-tooltip[data-host-step="0"],
  .step-tooltip[data-host-step="0"][style] {
    width: 324px !important;
    max-width: 324px !important;
    min-width: 324px !important;
    height: 261px !important;
    min-height: 261px !important;
    max-height: 261px !important;
    overflow-y: auto !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }
  
  /* Step 1 host tour tooltip - set specific dimensions on cell screens (324x190) */
  /* Use maximum specificity to override JavaScript inline styles */
  body .step-tooltip[data-host-step="1"],
  body .step-tooltip[data-host-step="1"][style],
  html body .step-tooltip[data-host-step="1"],
  html body .step-tooltip[data-host-step="1"][style],
  .step-tooltip[data-host-step="1"],
  .step-tooltip[data-host-step="1"][style] {
    width: 324px !important;
    max-width: 324px !important;
    min-width: 324px !important;
    height: 190px !important;
    min-height: 190px !important;
    max-height: 190px !important;
    overflow-y: auto !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }
  
  /* Step 1 host tour tooltip - set specific dimensions on cell screens (324x190) */
  /* Use maximum specificity to override JavaScript inline styles */
  body .step-tooltip[data-host-step="1"],
  body .step-tooltip[data-host-step="1"][style],
  html body .step-tooltip[data-host-step="1"],
  html body .step-tooltip[data-host-step="1"][style],
  .step-tooltip[data-host-step="1"],
  .step-tooltip[data-host-step="1"][style] {
    width: 324px !important;
    max-width: 324px !important;
    min-width: 324px !important;
    height: 190px !important;
    min-height: 190px !important;
    max-height: 190px !important;
    overflow-y: auto !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }
  
  /* Step 3 host tour tooltip - set specific dimensions on cell screens (324x190) */
  /* Use maximum specificity to override JavaScript inline styles */
  body .step-tooltip[data-host-step="3"],
  body .step-tooltip[data-host-step="3"][style],
  html body .step-tooltip[data-host-step="3"],
  html body .step-tooltip[data-host-step="3"][style],
  .step-tooltip[data-host-step="3"],
  .step-tooltip[data-host-step="3"][style] {
    width: 324px !important;
    max-width: 324px !important;
    min-width: 324px !important;
    height: 190px !important;
    min-height: 190px !important;
    max-height: 190px !important;
    overflow-y: auto !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, calc(-50% + 60px)) !important;
  }
  
  /* Step 3 host tour tooltip - make specific words (Projects, Build Teams, Helpers, Manage Data) muted red on cell screens */
  .step-tooltip[data-host-step="3"] .tour-muted-red-word,
  .step-tooltip[data-host-step="3"] p span.tour-muted-red-word {
    color: #c85a5a !important;
  }
  
  /* Step 4 host tour tooltip - set specific dimensions on cell screens (324x225) */
  /* Use maximum specificity to override JavaScript inline styles */
  body .step-tooltip[data-host-step="4"],
  body .step-tooltip[data-host-step="4"][style],
  html body .step-tooltip[data-host-step="4"],
  html body .step-tooltip[data-host-step="4"][style],
  .step-tooltip[data-host-step="4"],
  .step-tooltip[data-host-step="4"][style] {
    width: 324px !important;
    max-width: 324px !important;
    min-width: 324px !important;
    height: 225px !important;
    min-height: 225px !important;
    max-height: 225px !important;
    overflow-y: auto !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, calc(-50% + 24px)) !important;
  }
  
  /* Step 6 host tour tooltip - set specific dimensions on cell screens (324x166) */
  /* Use maximum specificity to override JavaScript inline styles */
  body .step-tooltip[data-host-step="6"],
  body .step-tooltip[data-host-step="6"][style],
  html body .step-tooltip[data-host-step="6"],
  html body .step-tooltip[data-host-step="6"][style],
  .step-tooltip[data-host-step="6"],
  .step-tooltip[data-host-step="6"][style] {
    width: 324px !important;
    max-width: 324px !important;
    min-width: 324px !important;
    height: 166px !important;
    min-height: 166px !important;
    max-height: 166px !important;
    overflow-y: auto !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, calc(-50% + 190px)) !important;
  }
  
  /* Step 7 host tour tooltip - set specific dimensions on cell screens (324x142) */
  /* Use maximum specificity to override JavaScript inline styles */
  body .step-tooltip[data-host-step="7"],
  body .step-tooltip[data-host-step="7"][style],
  html body .step-tooltip[data-host-step="7"],
  html body .step-tooltip[data-host-step="7"][style],
  .step-tooltip[data-host-step="7"],
  .step-tooltip[data-host-step="7"][style] {
    width: 324px !important;
    max-width: 324px !important;
    min-width: 324px !important;
    height: 142px !important;
    min-height: 142px !important;
    max-height: 142px !important;
    overflow-y: auto !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, calc(-50% + 284px)) !important;
  }
  
  /* Step 8 host tour tooltip - set specific dimensions on cell screens (324x142) */
  /* Use maximum specificity to override JavaScript inline styles */
  body .step-tooltip[data-host-step="8"],
  body .step-tooltip[data-host-step="8"][style],
  html body .step-tooltip[data-host-step="8"],
  html body .step-tooltip[data-host-step="8"][style],
  .step-tooltip[data-host-step="8"],
  .step-tooltip[data-host-step="8"][style] {
    width: 324px !important;
    max-width: 324px !important;
    min-width: 324px !important;
    height: 142px !important;
    min-height: 142px !important;
    max-height: 142px !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, calc(-50% + 192px)) !important; /* Lowered by 50px total (142px + 25px + 25px = 192px) */
  }
  
  /* Ensure buttons are visible and clickable for step 8 */
  body .step-tooltip[data-host-step="8"] button,
  body .step-tooltip[data-host-step="8"][style] button,
  html body .step-tooltip[data-host-step="8"] button,
  html body .step-tooltip[data-host-step="8"][style] button,
  .step-tooltip[data-host-step="8"] button,
  .step-tooltip[data-host-step="8"][style] button {
    position: relative !important;
    z-index: 10010 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    padding: 5px 8px !important;
    font-size: 0.75rem !important;
    min-height: 28px !important;
    min-width: 60px !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Ensure button container is visible for step 8 */
  body .step-tooltip[data-host-step="8"] > div,
  body .step-tooltip[data-host-step="8"][style] > div {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 10010 !important;
  }
  
  /* Step 9 host tour tooltip - set specific dimensions on cell screens (324x142) */
  /* Use maximum specificity to override JavaScript inline styles */
  body .step-tooltip[data-host-step="9"],
  body .step-tooltip[data-host-step="9"][style],
  html body .step-tooltip[data-host-step="9"],
  html body .step-tooltip[data-host-step="9"][style],
  .step-tooltip[data-host-step="9"],
  .step-tooltip[data-host-step="9"][style] {
    width: 324px !important;
    max-width: 324px !important;
    min-width: 324px !important;
    height: 142px !important;
    min-height: 142px !important;
    max-height: 142px !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, calc(-50% - 142px)) !important;
  }
  
  /* Ensure buttons are visible and clickable for step 9 */
  body .step-tooltip[data-host-step="9"] button,
  body .step-tooltip[data-host-step="9"][style] button,
  html body .step-tooltip[data-host-step="9"] button,
  html body .step-tooltip[data-host-step="9"][style] button,
  .step-tooltip[data-host-step="9"] button,
  .step-tooltip[data-host-step="9"][style] button {
    position: relative !important;
    z-index: 10010 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    padding: 5px 8px !important;
    font-size: 0.75rem !important;
    min-height: 28px !important;
    min-width: 60px !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Ensure button container is visible for step 9 */
  body .step-tooltip[data-host-step="9"] > div,
  body .step-tooltip[data-host-step="9"][style] > div {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 10010 !important;
  }
  
  /* Step 10 host tour tooltip - set specific dimensions on cell screens (324x142) */
  /* Use maximum specificity to override JavaScript inline styles */
  body .step-tooltip[data-host-step="10"],
  body .step-tooltip[data-host-step="10"][style],
  html body .step-tooltip[data-host-step="10"],
  html body .step-tooltip[data-host-step="10"][style],
  .step-tooltip[data-host-step="10"],
  .step-tooltip[data-host-step="10"][style] {
    width: 324px !important;
    max-width: 324px !important;
    min-width: 324px !important;
    height: 142px !important;
    min-height: 142px !important;
    max-height: 142px !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }
  
  /* Ensure buttons are visible and clickable for step 10 */
  body .step-tooltip[data-host-step="10"] button,
  body .step-tooltip[data-host-step="10"][style] button,
  html body .step-tooltip[data-host-step="10"] button,
  html body .step-tooltip[data-host-step="10"][style] button,
  .step-tooltip[data-host-step="10"] button,
  .step-tooltip[data-host-step="10"][style] button {
    position: relative !important;
    z-index: 10010 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    padding: 5px 8px !important;
    font-size: 0.75rem !important;
    min-height: 28px !important;
    min-width: 60px !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Ensure button container is visible for step 10 */
  body .step-tooltip[data-host-step="10"] > div,
  body .step-tooltip[data-host-step="10"][style] > div {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 10010 !important;
  }
  
  /* Step 11 host tour tooltip - set specific dimensions on cell screens (324x142) */
  /* Use maximum specificity to override JavaScript inline styles */
  body .step-tooltip[data-host-step="11"],
  body .step-tooltip[data-host-step="11"][style],
  html body .step-tooltip[data-host-step="11"],
  html body .step-tooltip[data-host-step="11"][style],
  .step-tooltip[data-host-step="11"],
  .step-tooltip[data-host-step="11"][style] {
    width: 324px !important;
    max-width: 324px !important;
    min-width: 324px !important;
    height: 142px !important;
    min-height: 142px !important;
    max-height: 142px !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, calc(-50% - 142px)) !important;
  }
  
  /* Ensure buttons are visible and clickable for step 11 */
  body .step-tooltip[data-host-step="11"] button,
  body .step-tooltip[data-host-step="11"][style] button,
  html body .step-tooltip[data-host-step="11"] button,
  html body .step-tooltip[data-host-step="11"][style] button,
  .step-tooltip[data-host-step="11"] button,
  .step-tooltip[data-host-step="11"][style] button {
    position: relative !important;
    z-index: 10010 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    padding: 5px 8px !important;
    font-size: 0.75rem !important;
    min-height: 28px !important;
    min-width: 60px !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Ensure button container is visible for step 11 */
  body .step-tooltip[data-host-step="11"] > div,
  body .step-tooltip[data-host-step="11"][style] > div {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 10010 !important;
  }
  
  /* Step 12 host tour tooltip - set specific dimensions on cell screens (324x142) */
  /* Use maximum specificity to override JavaScript inline styles */
  body .step-tooltip[data-host-step="12"],
  body .step-tooltip[data-host-step="12"][style],
  html body .step-tooltip[data-host-step="12"],
  html body .step-tooltip[data-host-step="12"][style],
  .step-tooltip[data-host-step="12"],
  .step-tooltip[data-host-step="12"][style] {
    width: 324px !important;
    max-width: 324px !important;
    min-width: 324px !important;
    height: 142px !important;
    min-height: 142px !important;
    max-height: 142px !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, calc(-50% - 166px)) !important;
  }
  
  /* Ensure buttons are visible and clickable for step 12 */
  body .step-tooltip[data-host-step="12"] button,
  body .step-tooltip[data-host-step="12"][style] button,
  html body .step-tooltip[data-host-step="12"] button,
  html body .step-tooltip[data-host-step="12"][style] button,
  .step-tooltip[data-host-step="12"] button,
  .step-tooltip[data-host-step="12"][style] button {
    position: relative !important;
    z-index: 10010 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    padding: 5px 8px !important;
    font-size: 0.75rem !important;
    min-height: 28px !important;
    min-width: 60px !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Ensure button container is visible for step 12 */
  body .step-tooltip[data-host-step="12"] > div,
  body .step-tooltip[data-host-step="12"][style] > div {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 10010 !important;
  }
  
  /* Step 13 host tour tooltip - set specific dimensions on cell screens (324x166) */
  /* Use maximum specificity to override JavaScript inline styles */
  body .step-tooltip[data-host-step="13"],
  body .step-tooltip[data-host-step="13"][style],
  html body .step-tooltip[data-host-step="13"],
  html body .step-tooltip[data-host-step="13"][style],
  .step-tooltip[data-host-step="13"],
  .step-tooltip[data-host-step="13"][style] {
    width: 324px !important;
    max-width: 324px !important;
    min-width: 324px !important;
    height: 166px !important;
    min-height: 166px !important;
    max-height: 166px !important;
    overflow-y: auto !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }
  
  /* Step 14 host tour tooltip - set specific dimensions on cell screens (324x142) */
  /* Use maximum specificity to override JavaScript inline styles */
  body .step-tooltip[data-host-step="14"],
  body .step-tooltip[data-host-step="14"][style],
  html body .step-tooltip[data-host-step="14"],
  html body .step-tooltip[data-host-step="14"][style],
  .step-tooltip[data-host-step="14"],
  .step-tooltip[data-host-step="14"][style] {
    width: 324px !important;
    max-width: 324px !important;
    min-width: 324px !important;
    height: 142px !important;
    min-height: 142px !important;
    max-height: 142px !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }
  
  /* Ensure buttons are visible and clickable for step 14 */
  body .step-tooltip[data-host-step="14"] button,
  body .step-tooltip[data-host-step="14"][style] button,
  html body .step-tooltip[data-host-step="14"] button,
  html body .step-tooltip[data-host-step="14"][style] button,
  .step-tooltip[data-host-step="14"] button,
  .step-tooltip[data-host-step="14"][style] button {
    position: relative !important;
    z-index: 10010 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    padding: 5px 8px !important;
    font-size: 0.75rem !important;
    min-height: 28px !important;
    min-width: 60px !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Ensure button container is visible for step 14 */
  body .step-tooltip[data-host-step="14"] > div,
  body .step-tooltip[data-host-step="14"][style] > div {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 10010 !important;
  }
  
  /* Step 1 helper tour tooltip - set specific dimensions on cell screens (324x184) */
  body .step-tooltip[data-step="1"],
  body .step-tooltip[data-helper-step="1"],
  .step-tooltip[data-step="1"],
  .step-tooltip[data-helper-step="1"] {
    width: 324px !important;
    max-width: 324px !important;
    height: 184px !important;
    min-height: 184px !important;
    max-height: 184px !important;
    overflow-y: auto !important;
  }
  
  /* Step 2 helper tour tooltip - set specific dimensions on cell screens (324x211) */
  body .step-tooltip[data-step="2"],
  body .step-tooltip[data-helper-step="2"],
  .step-tooltip[data-step="2"],
  .step-tooltip[data-helper-step="2"] {
    width: 324px !important;
    max-width: 324px !important;
    height: 211px !important;
    min-height: 211px !important;
    max-height: 211px !important;
    overflow-y: auto !important;
  }
  
  /* Step 5 helper tour tooltip - set specific dimensions on cell screens (324x160) */
  body .step-tooltip[data-step="5"],
  body .step-tooltip[data-helper-step="5"],
  .step-tooltip[data-step="5"],
  .step-tooltip[data-helper-step="5"] {
    width: 324px !important;
    max-width: 324px !important;
    height: 160px !important;
    min-height: 160px !important;
    max-height: 160px !important;
    overflow-y: auto !important;
  }
  
  /* Make tooltip content scrollable while keeping buttons visible */
  .step-tooltip .tour-content {
    max-height: calc(75vh - 100px) !important;
    overflow-y: auto !important;
    padding-bottom: 10px !important;
  }
  
  .step-tooltip h3 {
    font-size: 1rem !important;
    margin: 0 0 8px 0 !important;
  }
  
  .step-tooltip p {
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
    margin: 0 0 12px 0 !important;
  }
  
  /* Ensure buttons are always visible and accessible at bottom */
  .tour-buttons {
    position: sticky !important;
    bottom: 0 !important;
    background: white !important;
    padding: 12px 0 0 0 !important;
    margin-top: 12px !important;
    border-top: 1px solid #e2e8f0 !important;
    display: flex !important;
    gap: 8px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    z-index: 10 !important;
    flex-shrink: 0 !important;
  }
  
  .tour-btn {
    min-height: 44px !important;
    padding: 10px 16px !important;
    font-size: 0.9rem !important;
    flex: 1 1 auto !important;
    min-width: 100px !important;
  }
  
  /* Step 16 host tour tooltip - set specific dimensions on cell screens (324x213) and position at top */
  /* Use maximum specificity to override JavaScript inline styles */
  body .step-tooltip[data-host-step="16"],
  body .step-tooltip[data-host-step="16"][style],
  html body .step-tooltip[data-host-step="16"],
  html body .step-tooltip[data-host-step="16"][style],
  .step-tooltip[data-host-step="16"],
  .step-tooltip[data-host-step="16"][style] {
    width: 324px !important;
    max-width: 324px !important;
    min-width: 324px !important;
  height: 223px !important;
  min-height: 223px !important;
  max-height: 223px !important;
    overflow-y: hidden !important;
    overflow-x: hidden !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    top: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    position: fixed !important;
    padding: 6px 8px !important;
  }
  
  /* Step 16: Compact text styling for cell screens - reduce font sizes, margins, and line heights */
  body .step-tooltip[data-host-step="16"] h3,
  body .step-tooltip[data-host-step="16"][style] h3,
  html body .step-tooltip[data-host-step="16"] h3,
  html body .step-tooltip[data-host-step="16"][style] h3,
  .step-tooltip[data-host-step="16"] h3,
  .step-tooltip[data-host-step="16"][style] h3 {
    font-size: 0.8rem !important;
    margin: 0 0 3px 0 !important;
    line-height: 1.05 !important;
    padding: 0 !important;
  }
  
  body .step-tooltip[data-host-step="16"] p,
  body .step-tooltip[data-host-step="16"][style] p,
  html body .step-tooltip[data-host-step="16"] p,
  html body .step-tooltip[data-host-step="16"][style] p,
  .step-tooltip[data-host-step="16"] p,
  .step-tooltip[data-host-step="16"][style] p {
    font-size: 0.65rem !important;
    line-height: 1.15 !important;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
  }
  
  body .step-tooltip[data-host-step="16"] p strong,
  body .step-tooltip[data-host-step="16"][style] p strong,
  html body .step-tooltip[data-host-step="16"] p strong,
  html body .step-tooltip[data-host-step="16"][style] p strong,
  .step-tooltip[data-host-step="16"] p strong,
  .step-tooltip[data-host-step="16"][style] p strong {
    font-size: 0.67rem !important;
    font-weight: 600 !important;
  }
  
  /* Step 16: Compact button container */
  body .step-tooltip[data-host-step="16"] > div,
  body .step-tooltip[data-host-step="16"][style] > div,
  html body .step-tooltip[data-host-step="16"] > div,
  html body .step-tooltip[data-host-step="16"][style] > div,
  .step-tooltip[data-host-step="16"] > div,
  .step-tooltip[data-host-step="16"][style] > div {
    margin-top: 3px !important;
    margin-bottom: 0 !important;
    padding-top: 3px !important;
    padding-bottom: 0 !important;
    gap: 3px !important;
  }
  
  /* Step 16: Compact buttons */
  body .step-tooltip[data-host-step="16"] button,
  body .step-tooltip[data-host-step="16"][style] button,
  html body .step-tooltip[data-host-step="16"] button,
  html body .step-tooltip[data-host-step="16"][style] button,
  .step-tooltip[data-host-step="16"] button,
  .step-tooltip[data-host-step="16"][style] button {
    padding: 3px 5px !important;
    font-size: 0.65rem !important;
    min-height: 22px !important;
    min-width: 50px !important;
    margin: 0 !important;
    line-height: 1.1 !important;
  }
  
  /* Step 17 host tour tooltip - set specific dimensions on cell screens (324x237) and position at top */
  /* Use maximum specificity to override JavaScript inline styles */
  body .step-tooltip[data-host-step="17"],
  body .step-tooltip[data-host-step="17"][style],
  html body .step-tooltip[data-host-step="17"],
  html body .step-tooltip[data-host-step="17"][style],
  .step-tooltip[data-host-step="17"],
  .step-tooltip[data-host-step="17"][style] {
    width: 324px !important;
    max-width: 324px !important;
    min-width: 324px !important;
  height: 223px !important;
  min-height: 223px !important;
  max-height: 223px !important;
    overflow-y: hidden !important;
    overflow-x: hidden !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    top: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    position: fixed !important;
    padding: 6px 8px !important;
  }
  
  /* Step 17: Compact text styling for cell screens - reduce font sizes, margins, and line heights */
  body .step-tooltip[data-host-step="17"] h3,
  body .step-tooltip[data-host-step="17"][style] h3,
  html body .step-tooltip[data-host-step="17"] h3,
  html body .step-tooltip[data-host-step="17"][style] h3,
  .step-tooltip[data-host-step="17"] h3,
  .step-tooltip[data-host-step="17"][style] h3 {
    font-size: 0.8rem !important;
    margin: 0 0 3px 0 !important;
    line-height: 1.05 !important;
    padding: 0 !important;
  }
  
  body .step-tooltip[data-host-step="17"] p,
  body .step-tooltip[data-host-step="17"][style] p,
  html body .step-tooltip[data-host-step="17"] p,
  html body .step-tooltip[data-host-step="17"][style] p,
  .step-tooltip[data-host-step="17"] p,
  .step-tooltip[data-host-step="17"][style] p {
    font-size: 0.65rem !important;
    line-height: 1.15 !important;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
  }
  
  body .step-tooltip[data-host-step="17"] p strong,
  body .step-tooltip[data-host-step="17"][style] p strong,
  html body .step-tooltip[data-host-step="17"] p strong,
  html body .step-tooltip[data-host-step="17"][style] p strong,
  .step-tooltip[data-host-step="17"] p strong,
  .step-tooltip[data-host-step="17"][style] p strong {
    font-size: 0.67rem !important;
    font-weight: 600 !important;
  }
  
  /* Step 17: Compact button container */
  body .step-tooltip[data-host-step="17"] > div,
  body .step-tooltip[data-host-step="17"][style] > div,
  html body .step-tooltip[data-host-step="17"] > div,
  html body .step-tooltip[data-host-step="17"][style] > div,
  .step-tooltip[data-host-step="17"] > div,
  .step-tooltip[data-host-step="17"][style] > div {
    margin-top: 3px !important;
    margin-bottom: 0 !important;
    padding-top: 3px !important;
    padding-bottom: 0 !important;
    gap: 3px !important;
  }
  
  /* Step 17: Compact buttons */
  body .step-tooltip[data-host-step="17"] button,
  body .step-tooltip[data-host-step="17"][style] button,
  html body .step-tooltip[data-host-step="17"] button,
  html body .step-tooltip[data-host-step="17"][style] button,
  .step-tooltip[data-host-step="17"] button,
  .step-tooltip[data-host-step="17"][style] button {
    padding: 3px 5px !important;
    font-size: 0.65rem !important;
    min-height: 22px !important;
    min-width: 50px !important;
    margin: 0 !important;
  }
  
  /* Step 22 host tour tooltip - ensure border-radius on all 4 corners on cell screens only */
  /* Use maximum specificity to override JavaScript inline styles */
  body .step-tooltip[data-host-step="22"],
  body .step-tooltip[data-host-step="22"][style],
  html body .step-tooltip[data-host-step="22"],
  html body .step-tooltip[data-host-step="22"][style],
  html body .step-tooltip[data-host-step="22"][style*="border"],
  .step-tooltip[data-host-step="22"],
  .step-tooltip[data-host-step="22"][style],
  .step-tooltip[data-host-step="22"][style*="border"] {
    border-radius: 12px !important;
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
    border-bottom-left-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
    box-sizing: border-box !important;
  }
  
  /* Force override any potential 0 values for bottom corners */
  body .step-tooltip[data-host-step="22"][style*="border-bottom-left-radius: 0"],
  body .step-tooltip[data-host-step="22"][style*="border-bottom-right-radius: 0"],
  html body .step-tooltip[data-host-step="22"][style*="border-bottom-left-radius: 0"],
  html body .step-tooltip[data-host-step="22"][style*="border-bottom-right-radius: 0"],
  .step-tooltip[data-host-step="22"][style*="border-bottom-left-radius: 0"],
  .step-tooltip[data-host-step="22"][style*="border-bottom-right-radius: 0"] {
    border-bottom-left-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
  }
  
  /* Step 24 host tour tooltip - compact styling and border-radius on all 4 corners on cell screens only */
  /* Use maximum specificity to override JavaScript inline styles */
  body .step-tooltip[data-host-step="24"],
  body .step-tooltip[data-host-step="24"][style],
  html body .step-tooltip[data-host-step="24"],
  html body .step-tooltip[data-host-step="24"][style],
  html body .step-tooltip[data-host-step="24"][style*="border"],
  .step-tooltip[data-host-step="24"],
  .step-tooltip[data-host-step="24"][style],
  .step-tooltip[data-host-step="24"][style*="border"] {
    width: 324px !important;
    max-width: 324px !important;
    min-width: 324px !important;
    height: 166px !important;
    min-height: 166px !important;
    max-height: 166px !important;
    overflow-y: hidden !important;
    overflow-x: hidden !important;
    border-radius: 12px !important;
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
    border-bottom-left-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
    box-sizing: border-box !important;
    padding: 6px 8px !important;
  }
  
  /* Step 24: Compact text styling for cell screens - increased font sizes by 10% */
  body .step-tooltip[data-host-step="24"] h3,
  body .step-tooltip[data-host-step="24"][style] h3,
  html body .step-tooltip[data-host-step="24"] h3,
  html body .step-tooltip[data-host-step="24"][style] h3,
  .step-tooltip[data-host-step="24"] h3,
  .step-tooltip[data-host-step="24"][style] h3 {
    font-size: 0.88rem !important;
    margin: 0 0 3px 0 !important;
    line-height: 1.05 !important;
    padding: 0 !important;
  }
  
  body .step-tooltip[data-host-step="24"] p,
  body .step-tooltip[data-host-step="24"][style] p,
  html body .step-tooltip[data-host-step="24"] p,
  html body .step-tooltip[data-host-step="24"][style] p,
  .step-tooltip[data-host-step="24"] p,
  .step-tooltip[data-host-step="24"][style] p {
    font-size: 0.715rem !important;
    line-height: 1.15 !important;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
  }
  
  body .step-tooltip[data-host-step="24"] p strong,
  body .step-tooltip[data-host-step="24"][style] p strong,
  html body .step-tooltip[data-host-step="24"] p strong,
  html body .step-tooltip[data-host-step="24"][style] p strong,
  .step-tooltip[data-host-step="24"] p strong,
  .step-tooltip[data-host-step="24"][style] p strong {
    font-size: 0.737rem !important;
    font-weight: 600 !important;
  }
  
  /* Step 24: Compact button container */
  body .step-tooltip[data-host-step="24"] > div,
  body .step-tooltip[data-host-step="24"][style] > div,
  html body .step-tooltip[data-host-step="24"] > div,
  html body .step-tooltip[data-host-step="24"][style] > div,
  .step-tooltip[data-host-step="24"] > div,
  .step-tooltip[data-host-step="24"][style] > div {
    margin-top: 3px !important;
    margin-bottom: 0 !important;
    padding-top: 3px !important;
    padding-bottom: 0 !important;
    gap: 3px !important;
  }
  
  /* Step 24: Compact buttons */
  body .step-tooltip[data-host-step="24"] button,
  body .step-tooltip[data-host-step="24"][style] button,
  html body .step-tooltip[data-host-step="24"] button,
  html body .step-tooltip[data-host-step="24"][style] button,
  .step-tooltip[data-host-step="24"] button,
  .step-tooltip[data-host-step="24"][style] button {
    padding: 3px 5px !important;
    font-size: 0.65rem !important;
    min-height: 22px !important;
    min-width: 50px !important;
    margin: 0 !important;
    line-height: 1.1 !important;
  }
  
  /* Force override any potential 0 values for bottom corners */
  body .step-tooltip[data-host-step="24"][style*="border-bottom-left-radius: 0"],
  body .step-tooltip[data-host-step="24"][style*="border-bottom-right-radius: 0"],
  html body .step-tooltip[data-host-step="24"][style*="border-bottom-left-radius: 0"],
  html body .step-tooltip[data-host-step="24"][style*="border-bottom-right-radius: 0"],
  .step-tooltip[data-host-step="24"][style*="border-bottom-left-radius: 0"],
  .step-tooltip[data-host-step="24"][style*="border-bottom-right-radius: 0"] {
    border-bottom-left-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
  }
  
  /* Host Tour Step 3: Projects Tab - Make tooltip smaller to avoid covering Projects button */
  .step-tooltip[data-host-step="3"],
  .step-tooltip[data-host-step="3"][style] {
    max-height: 45vh !important;
    height: auto !important;
    min-height: 0 !important;
    width: 75vw !important;
    max-width: 75vw !important;
    padding: 6px 6px 0 6px !important;
    padding-bottom: 0 !important;
    top: 30% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 8px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    pointer-events: auto !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 99999 !important;
    background: white !important;
    position: fixed !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5) !important;
  }
  
  /* Ensure step 3 tooltip is always visible - override any conflicting styles */
  body .step-tooltip[data-host-step="3"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  .step-tooltip[data-host-step="3"] > div {
    pointer-events: auto !important;
  }
  
  .step-tooltip[data-host-step="3"] > div:last-child {
    position: sticky !important;
    bottom: 0 !important;
    background: white !important;
    z-index: 10004 !important;
    padding-top: 4px !important;
    margin-top: 4px !important;
    pointer-events: auto !important;
  }
  
  .step-tooltip[data-host-step="3"] > div[style*="flex-direction: column"] {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
  }
  
  .step-tooltip[data-host-step="3"] > div > div:first-child {
    overflow-y: auto !important;
    max-height: calc(45vh - 50px) !important;
    flex: 1 !important;
    padding-bottom: 4px !important;
  }
  
  .step-tooltip[data-host-step="3"] > div > div:last-child {
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 10005 !important;
    pointer-events: auto !important;
    background: white !important;
    display: flex !important;
    gap: 4px !important;
    justify-content: flex-end !important;
    overflow: visible !important;
  }
  
  .step-tooltip[data-host-step="3"] #step3-next-btn {
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 10007 !important;
    position: relative !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(94, 114, 228, 0.3) !important;
    user-select: none !important;
    -webkit-user-select: none !important;
  }
  
  .step-tooltip[data-host-step="3"] #step3-next-btn:active {
    opacity: 0.8 !important;
    transform: scale(0.98) !important;
  }
  
  /* Ensure nothing is covering the button */
  .step-tooltip[data-host-step="3"] > div {
    pointer-events: auto !important;
    overflow: visible !important;
  }
  
  .step-tooltip[data-host-step="3"] > div > div:first-child {
    pointer-events: auto !important;
  }
  
  .step-tooltip[data-host-step="3"][style*="padding"] {
    padding-bottom: 0 !important;
  }
  
  .step-tooltip[data-host-step="3"] * {
    box-sizing: border-box !important;
  }
  
  .step-tooltip[data-host-step="3"] > div:last-child,
  .step-tooltip[data-host-step="3"] > div[style*="display: flex"],
  .step-tooltip[data-host-step="3"] > div[style*="justify-content"],
  .step-tooltip[data-host-step="3"] > div[style*="margin-bottom"],
  .step-tooltip[data-host-step="3"] > div[style*="padding-bottom"],
  .step-tooltip[data-host-step="3"] > div[style*="gap"] {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    padding-top: 2px !important;
    margin-top: 2px !important;
    gap: 4px !important;
  }
  
  .step-tooltip[data-host-step="3"] *:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  
  .step-tooltip[data-host-step="3"] button {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    padding: 5px 8px !important;
    font-size: 0.75rem !important;
    min-height: 28px !important;
    min-width: 60px !important;
    line-height: 1.2 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 10003 !important;
    position: relative !important;
  }
  
  .step-tooltip[data-host-step="3"] button[style*="padding"] {
    padding: 5px 8px !important;
  }
  
  .step-tooltip[data-host-step="3"]::after {
    content: '';
    display: none !important;
  }
  
  .step-tooltip[data-host-step="3"] h3 {
    font-size: 0.9rem !important;
    margin: 0 0 3px 0 !important;
    margin-bottom: 3px !important;
    line-height: 1.1 !important;
    padding: 0 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  .step-tooltip[data-host-step="3"] h3[style*="margin"] {
    margin-bottom: 3px !important;
  }
  
  .step-tooltip[data-host-step="3"] p {
    font-size: 0.8rem !important;
    line-height: 1.2 !important;
    margin: 0 0 2px 0 !important;
    margin-bottom: 2px !important;
    padding: 0 !important;
    padding-bottom: 0 !important;
  }
  
  .step-tooltip[data-host-step="3"] p[style*="margin"] {
    margin-bottom: 2px !important;
    margin: 0 0 2px 0 !important;
  }
  
  .step-tooltip[data-host-step="3"] p br {
    line-height: 1.2 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    content: '' !important;
    height: 2px !important;
  }
  
  .step-tooltip[data-host-step="3"] > div[style*="display: flex"] {
    padding: 2px 0 0 0 !important;
    margin-top: 2px !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-top: 1px solid #e2e8f0 !important;
    display: flex !important;
    gap: 4px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
  }
  
  .step-tooltip[data-host-step="3"] button {
    padding: 5px 8px !important;
    font-size: 0.7rem !important;
    min-height: 28px !important;
    min-width: 60px !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
  }
  
  .step-tooltip[data-host-step="3"] p[style*="margin"] {
    margin-bottom: 4px !important;
  }
  
  .step-tooltip[data-host-step="3"] * {
    box-sizing: border-box !important;
  }
  
  /* Step 3: Set Your Availability - Make tooltip larger with all content visible */
  /* Only target tooltips with data-step="3" to ensure we're affecting the right step */
  .step-tooltip[data-step="3"] {
    max-height: 35vh !important;
    width: 80vw !important;
    max-width: 80vw !important;
    padding: 8px 8px !important;
    top: 15px !important;
    bottom: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    border-radius: 6px !important;
    overflow-y: auto !important;
  }
  
  .step-tooltip[data-step="3"] h3 {
    font-size: 0.85rem !important;
    margin: 0 0 5px 0 !important;
    line-height: 1.2 !important;
    padding: 0 !important;
  }
  
  .step-tooltip[data-step="3"] p {
    font-size: 0.75rem !important;
    line-height: 1.3 !important;
    margin: 0 0 5px 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    display: block !important;
  }
  
  .step-tooltip[data-step="3"] > div {
    padding: 5px 0 0 0 !important;
    margin-top: 5px !important;
    border-top: 1px solid #e2e8f0 !important;
    display: flex !important;
    gap: 8px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
  }
  
  .step-tooltip[data-step="3"] button {
    padding: 6px 10px !important;
    font-size: 0.75rem !important;
    min-height: 32px !important;
    min-width: 65px !important;
    border-radius: 4px !important;
  }
  
  /* Step 4: Select Your Skills - Make tooltip larger with all content visible */
  /* Only target tooltips with data-step="4" to ensure we're affecting the right step */
  .step-tooltip[data-step="4"] {
    max-height: 35vh !important;
    width: 80vw !important;
    max-width: 80vw !important;
    padding: 8px 8px !important;
    top: 5px !important;
    bottom: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    border-radius: 6px !important;
    overflow-y: auto !important;
  }
  
  .step-tooltip[data-step="4"] h3 {
    font-size: 0.85rem !important;
    margin: 0 0 5px 0 !important;
    line-height: 1.2 !important;
    padding: 0 !important;
  }
  
  .step-tooltip[data-step="4"] p {
    font-size: 0.75rem !important;
    line-height: 1.3 !important;
    margin: 0 0 5px 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    display: block !important;
  }
  
  .step-tooltip[data-step="4"] > div {
    padding: 5px 0 0 0 !important;
    margin-top: 5px !important;
    border-top: 1px solid #e2e8f0 !important;
    display: flex !important;
    gap: 8px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
  }
  
  .step-tooltip[data-step="4"] button {
    padding: 6px 10px !important;
    font-size: 0.75rem !important;
    min-height: 32px !important;
    min-width: 65px !important;
    border-radius: 4px !important;
  }
  
  /* Step 5: Leadership Information - Make tooltip larger with all content visible */
  .step-tooltip[data-step="5"],
  .step-tooltip[data-step="5"][style] {
    height: auto !important;
    max-height: 30vh !important;
    min-height: auto !important;
    width: 75vw !important;
    max-width: 75vw !important;
    padding: 8px 8px !important;
    top: 40% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
  }
  
  .step-tooltip[data-step="5"] h3 {
    font-size: 0.85rem !important;
    margin: 0 0 5px 0 !important;
    line-height: 1.2 !important;
    padding: 0 !important;
  }
  
  .step-tooltip[data-step="5"] p {
    font-size: 0.75rem !important;
    line-height: 1.3 !important;
    margin: 0 0 5px 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    display: block !important;
  }
  
  .step-tooltip[data-step="5"] > div {
    padding: 5px 0 0 0 !important;
    margin-top: 5px !important;
    border-top: 1px solid #e2e8f0 !important;
    display: flex !important;
    gap: 8px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
  }
  
  .step-tooltip[data-step="5"] button {
    padding: 6px 10px !important;
    font-size: 0.75rem !important;
    min-height: 32px !important;
    min-width: 65px !important;
    border-radius: 4px !important;
  }
  
  /* Step 6: Submit Your Profile - Make tooltip larger with all content visible */
  .step-tooltip[data-step="6"],
  .step-tooltip[data-step="6"][style] {
    height: auto !important;
    max-height: 30vh !important;
    min-height: auto !important;
    width: 75vw !important;
    max-width: 75vw !important;
    padding: 8px 8px !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
  }
  
  .step-tooltip[data-step="6"] h3 {
    font-size: 0.85rem !important;
    margin: 0 0 5px 0 !important;
    line-height: 1.2 !important;
    padding: 0 !important;
  }
  
  .step-tooltip[data-step="6"] p {
    font-size: 0.75rem !important;
    line-height: 1.3 !important;
    margin: 0 0 5px 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    display: block !important;
  }
  
  .step-tooltip[data-step="6"] > div {
    padding: 5px 0 0 0 !important;
    margin-top: 5px !important;
    border-top: 1px solid #e2e8f0 !important;
    display: flex !important;
    gap: 8px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
  }
  
  .step-tooltip[data-step="6"] button {
    padding: 6px 10px !important;
    font-size: 0.75rem !important;
    min-height: 32px !important;
    min-width: 65px !important;
    border-radius: 4px !important;
  }
}

@media (max-width: 360px) {
  .step-tooltip {
    width: 95vw !important;
    max-width: 95vw !important;
    padding: 12px 10px !important;
    max-height: 75vh !important;
    bottom: 15px !important;
  }
  
  .step-tooltip h3 {
    font-size: 0.95rem !important;
  }
  
  .step-tooltip p {
    font-size: 0.8rem !important;
  }
  
  .tour-btn {
    font-size: 0.85rem !important;
    padding: 8px 12px !important;
    min-width: 90px !important;
  }
  
  /* Host Tour Step 3: Even more compact on very small screens */
  .step-tooltip[data-host-step="3"] {
    max-height: 40vh !important;
    height: auto !important;
    min-height: auto !important;
    width: 72vw !important;
    max-width: 72vw !important;
    padding: 5px 5px 0px 5px !important;
    padding-bottom: 0 !important;
    top: 28% !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }
  
  .step-tooltip[data-host-step="3"][style*="padding"] {
    padding-bottom: 0 !important;
  }
  
  /* Step 0 helper tour tooltip - set specific dimensions on cell screens (324x284) */
  body .step-tooltip[data-step="0"],
  body .step-tooltip[data-helper-step="0"],
  .step-tooltip[data-step="0"],
  .step-tooltip[data-helper-step="0"] {
    width: 324px !important;
    max-width: 324px !important;
    height: 284px !important;
    min-height: 284px !important;
    max-height: 284px !important;
    overflow-y: auto !important;
  }
  
  /* Step 0 host tour tooltip - set specific dimensions on cell screens (324x261) */
  /* Use maximum specificity to override JavaScript inline styles */
  body .step-tooltip[data-host-step="0"],
  body .step-tooltip[data-host-step="0"][style],
  html body .step-tooltip[data-host-step="0"],
  html body .step-tooltip[data-host-step="0"][style],
  .step-tooltip[data-host-step="0"],
  .step-tooltip[data-host-step="0"][style] {
    width: 324px !important;
    max-width: 324px !important;
    min-width: 324px !important;
    height: 261px !important;
    min-height: 261px !important;
    max-height: 261px !important;
    overflow-y: auto !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }
  
  /* Step 3 host tour tooltip - set specific dimensions on cell screens (324x190) */
  /* Use maximum specificity to override JavaScript inline styles */
  body .step-tooltip[data-host-step="3"],
  body .step-tooltip[data-host-step="3"][style],
  html body .step-tooltip[data-host-step="3"],
  html body .step-tooltip[data-host-step="3"][style],
  .step-tooltip[data-host-step="3"],
  .step-tooltip[data-host-step="3"][style] {
    width: 324px !important;
    max-width: 324px !important;
    min-width: 324px !important;
    height: 190px !important;
    min-height: 190px !important;
    max-height: 190px !important;
    overflow-y: auto !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, calc(-50% + 60px)) !important;
  }
  
  /* Step 3 host tour tooltip - make specific words (Projects, Build Teams, Helpers, Manage Data) muted red on cell screens */
  .step-tooltip[data-host-step="3"] .tour-muted-red-word,
  .step-tooltip[data-host-step="3"] p span.tour-muted-red-word {
    color: #c85a5a !important;
  }
  
  /* Step 4 host tour tooltip - set specific dimensions on cell screens (324x225) */
  /* Use maximum specificity to override JavaScript inline styles */
  body .step-tooltip[data-host-step="4"],
  body .step-tooltip[data-host-step="4"][style],
  html body .step-tooltip[data-host-step="4"],
  html body .step-tooltip[data-host-step="4"][style],
  .step-tooltip[data-host-step="4"],
  .step-tooltip[data-host-step="4"][style] {
    width: 324px !important;
    max-width: 324px !important;
    min-width: 324px !important;
    height: 225px !important;
    min-height: 225px !important;
    max-height: 225px !important;
    overflow-y: auto !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, calc(-50% + 24px)) !important;
  }
  
  /* Step 6 host tour tooltip - set specific dimensions on cell screens (324x166) */
  /* Use maximum specificity to override JavaScript inline styles */
  body .step-tooltip[data-host-step="6"],
  body .step-tooltip[data-host-step="6"][style],
  html body .step-tooltip[data-host-step="6"],
  html body .step-tooltip[data-host-step="6"][style],
  .step-tooltip[data-host-step="6"],
  .step-tooltip[data-host-step="6"][style] {
    width: 324px !important;
    max-width: 324px !important;
    min-width: 324px !important;
    height: 166px !important;
    min-height: 166px !important;
    max-height: 166px !important;
    overflow-y: auto !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, calc(-50% + 190px)) !important;
  }
  
  /* Step 7 host tour tooltip - set specific dimensions on cell screens (324x142) */
  /* Use maximum specificity to override JavaScript inline styles */
  body .step-tooltip[data-host-step="7"],
  body .step-tooltip[data-host-step="7"][style],
  html body .step-tooltip[data-host-step="7"],
  html body .step-tooltip[data-host-step="7"][style],
  .step-tooltip[data-host-step="7"],
  .step-tooltip[data-host-step="7"][style] {
    width: 324px !important;
    max-width: 324px !important;
    min-width: 324px !important;
    height: 142px !important;
    min-height: 142px !important;
    max-height: 142px !important;
    overflow-y: auto !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, calc(-50% + 284px)) !important;
  }
  
  /* Step 8 host tour tooltip - set specific dimensions on cell screens (324x142) */
  /* Use maximum specificity to override JavaScript inline styles */
  body .step-tooltip[data-host-step="8"],
  body .step-tooltip[data-host-step="8"][style],
  html body .step-tooltip[data-host-step="8"],
  html body .step-tooltip[data-host-step="8"][style],
  .step-tooltip[data-host-step="8"],
  .step-tooltip[data-host-step="8"][style] {
    width: 324px !important;
    max-width: 324px !important;
    min-width: 324px !important;
    height: 142px !important;
    min-height: 142px !important;
    max-height: 142px !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, calc(-50% + 192px)) !important; /* Lowered by 50px total (142px + 25px + 25px = 192px) */
  }
  
  /* Ensure buttons are visible and clickable for step 8 */
  body .step-tooltip[data-host-step="8"] button,
  body .step-tooltip[data-host-step="8"][style] button,
  html body .step-tooltip[data-host-step="8"] button,
  html body .step-tooltip[data-host-step="8"][style] button,
  .step-tooltip[data-host-step="8"] button,
  .step-tooltip[data-host-step="8"][style] button {
    position: relative !important;
    z-index: 10010 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    padding: 5px 8px !important;
    font-size: 0.75rem !important;
    min-height: 28px !important;
    min-width: 60px !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Ensure button container is visible for step 8 */
  body .step-tooltip[data-host-step="8"] > div,
  body .step-tooltip[data-host-step="8"][style] > div {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 10010 !important;
  }
  
  /* Step 9 host tour tooltip - set specific dimensions on cell screens (324x142) */
  /* Use maximum specificity to override JavaScript inline styles */
  body .step-tooltip[data-host-step="9"],
  body .step-tooltip[data-host-step="9"][style],
  html body .step-tooltip[data-host-step="9"],
  html body .step-tooltip[data-host-step="9"][style],
  .step-tooltip[data-host-step="9"],
  .step-tooltip[data-host-step="9"][style] {
    width: 324px !important;
    max-width: 324px !important;
    min-width: 324px !important;
    height: 142px !important;
    min-height: 142px !important;
    max-height: 142px !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, calc(-50% - 142px)) !important;
  }
  
  /* Ensure buttons are visible and clickable for step 9 */
  body .step-tooltip[data-host-step="9"] button,
  body .step-tooltip[data-host-step="9"][style] button,
  html body .step-tooltip[data-host-step="9"] button,
  html body .step-tooltip[data-host-step="9"][style] button,
  .step-tooltip[data-host-step="9"] button,
  .step-tooltip[data-host-step="9"][style] button {
    position: relative !important;
    z-index: 10010 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    padding: 5px 8px !important;
    font-size: 0.75rem !important;
    min-height: 28px !important;
    min-width: 60px !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Ensure button container is visible for step 9 */
  body .step-tooltip[data-host-step="9"] > div,
  body .step-tooltip[data-host-step="9"][style] > div {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 10010 !important;
  }
  
  /* Step 10 host tour tooltip - set specific dimensions on cell screens (324x142) */
  /* Use maximum specificity to override JavaScript inline styles */
  body .step-tooltip[data-host-step="10"],
  body .step-tooltip[data-host-step="10"][style],
  html body .step-tooltip[data-host-step="10"],
  html body .step-tooltip[data-host-step="10"][style],
  .step-tooltip[data-host-step="10"],
  .step-tooltip[data-host-step="10"][style] {
    width: 324px !important;
    max-width: 324px !important;
    min-width: 324px !important;
    height: 142px !important;
    min-height: 142px !important;
    max-height: 142px !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }
  
  /* Ensure buttons are visible and clickable for step 10 */
  body .step-tooltip[data-host-step="10"] button,
  body .step-tooltip[data-host-step="10"][style] button,
  html body .step-tooltip[data-host-step="10"] button,
  html body .step-tooltip[data-host-step="10"][style] button,
  .step-tooltip[data-host-step="10"] button,
  .step-tooltip[data-host-step="10"][style] button {
    position: relative !important;
    z-index: 10010 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    padding: 5px 8px !important;
    font-size: 0.75rem !important;
    min-height: 28px !important;
    min-width: 60px !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Ensure button container is visible for step 10 */
  body .step-tooltip[data-host-step="10"] > div,
  body .step-tooltip[data-host-step="10"][style] > div {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 10010 !important;
  }
  
  /* Step 11 host tour tooltip - set specific dimensions on cell screens (324x142) */
  /* Use maximum specificity to override JavaScript inline styles */
  body .step-tooltip[data-host-step="11"],
  body .step-tooltip[data-host-step="11"][style],
  html body .step-tooltip[data-host-step="11"],
  html body .step-tooltip[data-host-step="11"][style],
  .step-tooltip[data-host-step="11"],
  .step-tooltip[data-host-step="11"][style] {
    width: 324px !important;
    max-width: 324px !important;
    min-width: 324px !important;
    height: 142px !important;
    min-height: 142px !important;
    max-height: 142px !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, calc(-50% - 142px)) !important;
  }
  
  /* Ensure buttons are visible and clickable for step 11 */
  body .step-tooltip[data-host-step="11"] button,
  body .step-tooltip[data-host-step="11"][style] button,
  html body .step-tooltip[data-host-step="11"] button,
  html body .step-tooltip[data-host-step="11"][style] button,
  .step-tooltip[data-host-step="11"] button,
  .step-tooltip[data-host-step="11"][style] button {
    position: relative !important;
    z-index: 10010 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    padding: 5px 8px !important;
    font-size: 0.75rem !important;
    min-height: 28px !important;
    min-width: 60px !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Ensure button container is visible for step 11 */
  body .step-tooltip[data-host-step="11"] > div,
  body .step-tooltip[data-host-step="11"][style] > div {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 10010 !important;
  }
  
  /* Step 12 host tour tooltip - set specific dimensions on cell screens (324x142) */
  /* Use maximum specificity to override JavaScript inline styles */
  body .step-tooltip[data-host-step="12"],
  body .step-tooltip[data-host-step="12"][style],
  html body .step-tooltip[data-host-step="12"],
  html body .step-tooltip[data-host-step="12"][style],
  .step-tooltip[data-host-step="12"],
  .step-tooltip[data-host-step="12"][style] {
    width: 324px !important;
    max-width: 324px !important;
    min-width: 324px !important;
    height: 142px !important;
    min-height: 142px !important;
    max-height: 142px !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, calc(-50% - 166px)) !important;
  }
  
  /* Ensure buttons are visible and clickable for step 12 */
  body .step-tooltip[data-host-step="12"] button,
  body .step-tooltip[data-host-step="12"][style] button,
  html body .step-tooltip[data-host-step="12"] button,
  html body .step-tooltip[data-host-step="12"][style] button,
  .step-tooltip[data-host-step="12"] button,
  .step-tooltip[data-host-step="12"][style] button {
    position: relative !important;
    z-index: 10010 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    padding: 5px 8px !important;
    font-size: 0.75rem !important;
    min-height: 28px !important;
    min-width: 60px !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Ensure button container is visible for step 12 */
  body .step-tooltip[data-host-step="12"] > div,
  body .step-tooltip[data-host-step="12"][style] > div {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 10010 !important;
  }
  
  /* Step 13 host tour tooltip - set specific dimensions on cell screens (324x166) */
  /* Use maximum specificity to override JavaScript inline styles */
  body .step-tooltip[data-host-step="13"],
  body .step-tooltip[data-host-step="13"][style],
  html body .step-tooltip[data-host-step="13"],
  html body .step-tooltip[data-host-step="13"][style],
  .step-tooltip[data-host-step="13"],
  .step-tooltip[data-host-step="13"][style] {
    width: 324px !important;
    max-width: 324px !important;
    min-width: 324px !important;
    height: 166px !important;
    min-height: 166px !important;
    max-height: 166px !important;
    overflow-y: auto !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }
  
  /* Step 14 host tour tooltip - set specific dimensions on cell screens (324x142) */
  /* Use maximum specificity to override JavaScript inline styles */
  body .step-tooltip[data-host-step="14"],
  body .step-tooltip[data-host-step="14"][style],
  html body .step-tooltip[data-host-step="14"],
  html body .step-tooltip[data-host-step="14"][style],
  .step-tooltip[data-host-step="14"],
  .step-tooltip[data-host-step="14"][style] {
    width: 324px !important;
    max-width: 324px !important;
    min-width: 324px !important;
    height: 142px !important;
    min-height: 142px !important;
    max-height: 142px !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }
  
  /* Ensure buttons are visible and clickable for step 14 */
  body .step-tooltip[data-host-step="14"] button,
  body .step-tooltip[data-host-step="14"][style] button,
  html body .step-tooltip[data-host-step="14"] button,
  html body .step-tooltip[data-host-step="14"][style] button,
  .step-tooltip[data-host-step="14"] button,
  .step-tooltip[data-host-step="14"][style] button {
    position: relative !important;
    z-index: 10010 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    padding: 5px 8px !important;
    font-size: 0.75rem !important;
    min-height: 28px !important;
    min-width: 60px !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Ensure button container is visible for step 14 */
  body .step-tooltip[data-host-step="14"] > div,
  body .step-tooltip[data-host-step="14"][style] > div {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 10010 !important;
  }
  
  /* Step 1 helper tour tooltip - set specific dimensions on cell screens (324x184) */
  body .step-tooltip[data-step="1"],
  body .step-tooltip[data-helper-step="1"],
  .step-tooltip[data-step="1"],
  .step-tooltip[data-helper-step="1"] {
    width: 324px !important;
    max-width: 324px !important;
    height: 184px !important;
    min-height: 184px !important;
    max-height: 184px !important;
    overflow-y: auto !important;
  }
  
  /* Step 2 helper tour tooltip - set specific dimensions on cell screens (324x211) */
  body .step-tooltip[data-step="2"],
  body .step-tooltip[data-helper-step="2"],
  .step-tooltip[data-step="2"],
  .step-tooltip[data-helper-step="2"] {
    width: 324px !important;
    max-width: 324px !important;
    height: 211px !important;
    min-height: 211px !important;
    max-height: 211px !important;
    overflow-y: auto !important;
  }
  
  /* Step 5 helper tour tooltip - set specific dimensions on cell screens (324x160) */
  body .step-tooltip[data-step="5"],
  body .step-tooltip[data-helper-step="5"],
  .step-tooltip[data-step="5"],
  .step-tooltip[data-helper-step="5"] {
    width: 324px !important;
    max-width: 324px !important;
    height: 160px !important;
    min-height: 160px !important;
    max-height: 160px !important;
    overflow-y: auto !important;
  }
  
  .step-tooltip[data-host-step="3"] > div:last-child,
  .step-tooltip[data-host-step="3"] > div[style*="display: flex"],
  .step-tooltip[data-host-step="3"] > div[style*="justify-content"] {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    padding-top: 1px !important;
    margin-top: 1px !important;
  }
  
  .step-tooltip[data-host-step="3"] *:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  
  .step-tooltip[data-host-step="3"] h3 {
    font-size: 0.75rem !important;
    margin: 0 0 2px 0 !important;
    line-height: 1.1 !important;
  }
  
  .step-tooltip[data-host-step="3"] p {
    font-size: 0.65rem !important;
    margin: 0 0 3px 0 !important;
    line-height: 1.15 !important;
  }
  
  .step-tooltip[data-host-step="3"] > div {
    padding: 1px 0 0 0 !important;
    margin-top: 1px !important;
  }
  
  .step-tooltip[data-host-step="3"] button {
    padding: 4px 6px !important;
    font-size: 0.65rem !important;
    min-height: 26px !important;
    min-width: 55px !important;
  }
  
  /* Step 3: Larger on very small screens with all content visible */
  .step-tooltip[data-step="3"] {
    max-height: 32vh !important;
    width: 85vw !important;
    max-width: 85vw !important;
    padding: 6px 6px !important;
    top: 12px !important;
    overflow-y: auto !important;
  }
  
  .step-tooltip[data-step="3"] h3 {
    font-size: 0.8rem !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.15 !important;
  }
  
  .step-tooltip[data-step="3"] p {
    font-size: 0.7rem !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.25 !important;
    overflow: visible !important;
    display: block !important;
  }
  
  .step-tooltip[data-step="3"] button {
    padding: 5px 8px !important;
    font-size: 0.7rem !important;
    min-height: 30px !important;
    min-width: 60px !important;
  }
  
  /* Step 4: Larger on very small screens with all content visible */
  .step-tooltip[data-step="4"] {
    max-height: 32vh !important;
    width: 85vw !important;
    max-width: 85vw !important;
    padding: 6px 6px !important;
    top: 4px !important;
    overflow-y: auto !important;
  }
  
  .step-tooltip[data-step="4"] h3 {
    font-size: 0.8rem !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.15 !important;
  }
  
  .step-tooltip[data-step="4"] p {
    font-size: 0.7rem !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.25 !important;
    overflow: visible !important;
    display: block !important;
  }
  
  .step-tooltip[data-step="4"] button {
    padding: 5px 8px !important;
    font-size: 0.7rem !important;
    min-height: 30px !important;
    min-width: 60px !important;
  }
  
  /* Step 5: Larger on very small screens with all content visible */
  .step-tooltip[data-step="5"] {
    height: auto !important;
    max-height: 28vh !important;
    min-height: auto !important;
    width: 80vw !important;
    max-width: 80vw !important;
    padding: 6px 6px !important;
    top: 40% !important;
    transform: translate(-50%, -50%) !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
  }
  
  .step-tooltip[data-step="5"] h3 {
    font-size: 0.8rem !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.15 !important;
  }
  
  .step-tooltip[data-step="5"] p {
    font-size: 0.7rem !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.25 !important;
    overflow: visible !important;
    display: block !important;
  }
  
  .step-tooltip[data-step="5"] button {
    padding: 5px 8px !important;
    font-size: 0.7rem !important;
    min-height: 30px !important;
    min-width: 60px !important;
  }
  
  /* Step 6: Larger on very small screens with all content visible */
  .step-tooltip[data-step="6"] {
    height: auto !important;
    max-height: 28vh !important;
    min-height: auto !important;
    width: 80vw !important;
    max-width: 80vw !important;
    padding: 6px 6px !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
  }
  
  .step-tooltip[data-step="6"] h3 {
    font-size: 0.8rem !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.15 !important;
  }
  
  .step-tooltip[data-step="6"] p {
    font-size: 0.7rem !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.25 !important;
    overflow: visible !important;
    display: block !important;
  }
  
  .step-tooltip[data-step="6"] button {
    padding: 5px 8px !important;
    font-size: 0.7rem !important;
    min-height: 30px !important;
    min-width: 60px !important;
  }
}

/* Prevent horizontal scrolling */
/* Cell screens only (≤600px) - Galaxy S8+, Z Fold 5, A51, A71 use cell layout */
/* Devices ≥601px (Nest Hub Max, Nest Hub, Asus Zenbook Fold, iPads, Surface devices) use desktop layout */
@media (max-width: 600px) {
  body,
  html {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  
  * {
    max-width: 100% !important;
  }
}

/* Availability Checkboxes - Mobile Optimization */
/* Override time-range-container column layout from style-optimized-v2.css */
/* Keep "to" separator horizontal on all mobile screens */
@media (max-width: 768px) {
  .time-range-container {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    align-items: center !important;
  }
  
  .time-range-separator {
    transform: none !important;
    rotate: 0deg !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    margin: 0 8px !important;
    display: inline-block !important;
    white-space: nowrap !important;
    font-size: 1rem !important;
  }
}

/* Cell screens only (≤600px) - Galaxy S8+, Z Fold 5, A51, A71 use cell layout */
/* Devices ≥601px (Nest Hub Max, Nest Hub, Asus Zenbook Fold, iPads, Surface devices) use desktop layout */
@media (max-width: 600px) {
  /* Availability fieldset */
  #availabilityFieldset {
    padding: 12px 10px !important;
  }
  
  /* Availability checkboxes container */
  #availabilityCheckboxes {
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 4px !important;
    font-size: 0.75rem !important;
  }
  
  /* Availability checkbox labels */
  #availabilityCheckboxes label {
    font-size: 0.75rem !important;
    gap: 4px !important;
    font-weight: 600 !important;
    padding: 2px 0 !important;
  }
  
  /* Availability checkboxes - remove scale, make smaller */
  #availabilityCheckboxes input[type="checkbox"] {
    width: 1em !important;
    height: 1em !important;
    transform: none !important;
    min-width: 16px !important;
    min-height: 16px !important;
    cursor: pointer !important;
  }
  
  /* Edit availability checkboxes (profile edit mode) */
  #editAvailabilityCheckboxes {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    font-size: 0.7rem !important;
    justify-content: space-between !important;
  }
  
  #editAvailabilityCheckboxes label {
    font-size: 0.7rem !important;
    gap: 3px !important;
    font-weight: 600 !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    min-width: 0 !important;
  }
  
  #editAvailabilityCheckboxes input[type="checkbox"] {
    width: 1em !important;
    height: 1em !important;
    transform: none !important;
    min-width: 16px !important;
    min-height: 16px !important;
    margin-right: 3px !important;
  }
}

@media (max-width: 360px) {
  /* Very small screens - make checkboxes even smaller */
  #availabilityCheckboxes {
    gap: 2px !important;
    font-size: 0.7rem !important;
  }
  
  #availabilityCheckboxes label {
    font-size: 0.7rem !important;
    gap: 3px !important;
  }
  
  #availabilityCheckboxes input[type="checkbox"] {
    width: 0.9em !important;
    height: 0.9em !important;
    min-width: 14px !important;
    min-height: 14px !important;
  }
  
  #editAvailabilityCheckboxes {
    gap: 2px !important;
    font-size: 0.7rem !important;
  }
  
  #editAvailabilityCheckboxes label {
    font-size: 0.7rem !important;
    gap: 3px !important;
  }
  
  #editAvailabilityCheckboxes input[type="checkbox"] {
    width: 0.9em !important;
    height: 0.9em !important;
    min-width: 14px !important;
    min-height: 14px !important;
  }
  
  /* Availability time picker containers (shown when days are selected) - COMPACT */
  .day-availability-container {
    padding: 8px 6px !important;
    margin-bottom: 8px !important;
  }
  
  .day-header {
    margin-bottom: 6px !important;
  }
  
  .day-name {
    font-size: 0.8rem !important;
  }
  
  .day-icon {
    width: 18px !important;
    height: 18px !important;
    font-size: 0.65rem !important;
  }
  
  .remove-day-btn {
    width: 24px !important;
    height: 24px !important;
    font-size: 1rem !important;
    min-width: 24px !important;
    min-height: 24px !important;
  }
  
  /* Time picker containers - vertical layout for compact mobile */
  .time-range-container {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 0 !important;
  }
  
  .time-picker-group {
    font-size: 0.7rem !important;
    gap: 3px !important;
    margin-bottom: 6px !important;
  }
  
  .time-label {
    font-size: 0.7rem !important;
    margin-bottom: 2px !important;
  }
  
  .circular-time-picker {
    width: 90px !important;
    height: 90px !important;
  }
  
  .time-display {
    font-size: 0.8rem !important;
  }
  
  /* Force separator to stay horizontal - override rotation from style-optimized-v2.css */
  .time-range-separator {
    font-size: 0.85rem !important;
    transform: none !important;
    rotate: 0deg !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    margin: 0 8px !important;
    display: inline-block !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
  }
}

@media (max-width: 360px) {
  /* Very small screens - keep separator horizontal even with smaller gap */
  .time-range-container {
    gap: 6px !important;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    align-items: center !important;
  }
  
  .time-range-separator {
    font-size: 0.8rem !important;
    margin: 0 4px !important;
    transform: none !important;
    rotate: 0deg !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    white-space: nowrap !important;
    display: inline-block !important;
    line-height: 1.2 !important;
  }
  
  /* Host Dashboard Header - Very small screens */
  .app-container > div:first-child {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 5px !important;
    padding-bottom: 5px !important;
    margin-bottom: 3px !important;
    overflow: visible !important;
  }
  
  /* Reduce gap in logo/title section */
  .app-container > div:first-child > div:first-child {
    gap: 4px !important;
  }
  
  .app-container > div:first-child > div:first-child {
    max-width: 100% !important;
    width: 100% !important;
  }
  
  .app-container > div:first-child h2 {
    font-size: 0.95rem !important;
    line-height: 1.1 !important;
  }
  
  .app-container > div:first-child #hostOrgName {
    font-size: 0.65rem !important;
    margin-top: 2px !important;
  }
  
  /* Hide logo on very small screens - ONLY for host dashboard (.app-container) */
  .app-container > div:first-child .logo,
  .app-container > div:first-child img[alt*="Logo"],
  .app-container > div:first-child img[src*="logo"],
  .app-container .logo,
  .app-container img.logo[style*="height"],
  .app-container > div:first-child > div:first-child img {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
  }
  
  .app-container > div:first-child .logo-background,
  .app-container .logo-background,
  .app-container div.logo-background[style*="padding"],
  .app-container > div:first-child > div:first-child > div.logo-background {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
  }
  
  /* Ensure main page logo is visible on very small screens - make it smaller */
  #landing .logo-container,
  .logo-container {
    display: block !important;
    visibility: visible !important;
    text-align: center !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }
  
  #landing .logo-background,
  .logo-container .logo-background {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding: 3px 6px !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  
  #landing .logo,
  .logo-container .logo,
  .logo-container img.logo {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    height: 42px !important;
    max-width: 100% !important;
    max-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
  }
  
  .app-container > div:first-child > div:last-child {
    width: 100% !important;
    justify-content: space-between !important;
    margin-top: 0 !important;
    overflow: visible !important;
    order: 2 !important;
    gap: 4px !important;
  }
  
  .app-container .back-btn,
  button.back-btn[onclick*="goHome"],
  button.back-btn[onclick*="logout"],
  .app-container button[onclick*="goHome()"],
  .app-container button[onclick*="logout(event)"] {
    padding: 5px 8px !important;
    font-size: 0.65rem !important;
    min-height: 30px !important;
    flex: 1 1 48% !important;
    max-width: 48% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    min-width: 60px !important;
    width: auto !important;
  }
  
  /* Stat Cards - Even more compact on very small screens */
  .app-container > div[style*="grid-template-columns"] {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 3px !important;
    margin-bottom: 8px !important;
  }
  
  .stat-card {
    padding: 5px 3px !important;
  }
  
  .stat-value {
    font-size: 1rem !important;
    margin-bottom: 1px !important;
  }
  
  .stat-label {
    font-size: 0.6rem !important;
  }
}

@media (max-width: 360px) {
  /* Very small screens - even more compact availability */
  .day-availability-container {
    padding: 8px 6px !important;
    margin-bottom: 8px !important;
  }
  
  .day-name {
    font-size: 0.8rem !important;
  }
  
  .day-icon {
    width: 18px !important;
    height: 18px !important;
    font-size: 0.65rem !important;
  }
  
  .time-range-container {
    gap: 8px !important;
  }
  
  .circular-time-picker {
    width: 80px !important;
    height: 80px !important;
  }
  
  .time-label {
    font-size: 0.7rem !important;
  }
  
  .time-display {
    font-size: 0.75rem !important;
  }
  
  /* Volunteer Form - Very Small Screens (360px) */
  /* Adjust font sizes to fit placeholder text */
  #volunteerForm input,
  #volunteerForm select,
  #volunteerForm textarea {
    font-size: 14px !important;
    padding: 10px !important;
  }
  
  #volunteerForm input::placeholder,
  #volunteerForm textarea::placeholder {
    font-size: 12px !important;
    color: #999 !important;
  }
  
  /* Make email and address fields full width on very small cell screens so placeholder text is fully visible */
  #volunteerForm fieldset:first-of-type > div {
    grid-template-columns: 1fr !important;
  }
  
  /* Make email and address fields span full width */
  #volunteerForm #vEmail,
  #volunteerForm #vAddress {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Match email and address placeholder font size to name placeholder on very small cell screens */
  #volunteerForm #vEmail::placeholder,
  #volunteerForm #vAddress::placeholder {
    font-size: 12px !important;
    color: #999 !important;
  }
  
  #volunteerForm label {
    font-size: 0.8rem !important;
  }
}

/* Step 20 Host Tour - Reduce project card button sizes on cell screens */
/* Cell screens only (≤600px) - Galaxy S8+, Z Fold 5, A51, A71 use cell layout */
/* Devices ≥601px (Nest Hub Max, Nest Hub, Asus Zenbook Fold, iPads, Surface devices) use desktop layout */
@media (max-width: 600px) {
  /* When step 20 tooltip is present, reduce button sizes in project cards */
  .step-tooltip[data-host-step="20"] ~ * .project-card button,
  body:has(.step-tooltip[data-host-step="20"]) .project-card button,
  .project-card button {
    padding: 4px 8px !important;
    font-size: 10px !important;
    border-radius: 4px !important;
    min-height: 24px !important;
    line-height: 1.2 !important;
  }
  
  /* Specifically target Build Team, Edit, and Delete buttons */
  .project-card button[onclick*="buildTeamForProject"],
  .project-card button[onclick*="editProject"],
  .project-card button[onclick*="deleteProject"] {
    padding: 4px 8px !important;
    font-size: 10px !important;
    border-radius: 4px !important;
    min-height: 24px !important;
    line-height: 1.2 !important;
  }
}

/* Touch-friendly spacing */
/* Cell screens only (≤600px) - Galaxy S8+, Z Fold 5, A51, A71 use cell layout */
/* Devices ≥601px (Nest Hub Max, Nest Hub, Asus Zenbook Fold, iPads, Surface devices) use desktop layout */
@media (max-width: 600px) {
  button,
  a,
  input,
  select,
  textarea {
    min-height: 44px !important;
    min-width: 44px !important;
  }
  
  /* But allow checkboxes to be smaller for availability */
  input[type="checkbox"][name="availability"],
  input[type="checkbox"][name="editAvailability"] {
    min-height: 16px !important;
    min-width: 16px !important;
  }
  
  /* Reduce margins for more content space */
  .mb-1, .mb-2, .mb-3 {
    margin-bottom: 0.5rem !important;
  }
  
  .mt-1, .mt-2, .mt-3 {
    margin-top: 0.5rem !important;
  }
}

/* ============================================
   HOST DASHBOARD TAB FLYOUTS - COMPACT ON CELL SCREENS
   Make flyouts for Projects, Build Teams, Helpers, and Manage Data tabs more compact
   ============================================ */

/* Cell screens only (≤600px) - Galaxy S8+, Z Fold 5, A51, A71 use cell layout */
/* Devices ≥601px (Nest Hub Max, Nest Hub, Asus Zenbook Fold, iPads, Surface devices) use desktop layout */
@media (max-width: 600px) {
  /* Skills Selection Flyout - Make more compact */
  #hostSkillsContainer {
    width: 95vw !important;
    max-width: 95vw !important;
    padding: 12px !important;
    max-height: 85vh !important;
    border-radius: 8px !important;
  }
  
  #hostSkillsContainer label {
    font-size: 0.75rem !important;
    margin-bottom: 4px !important;
  }
  
  #hostSkillsContainer select {
    padding: 6px 8px !important;
    font-size: 0.8rem !important;
    min-height: 32px !important;
  }
  
  #hostSkillsContainer input[type="text"] {
    padding: 6px 8px !important;
    font-size: 0.8rem !important;
  }
  
  #hostSkillsContainer button {
    padding: 6px 10px !important;
    font-size: 0.75rem !important;
  }
  
  #hostSkillOptions {
    max-height: 40vh !important;
    padding: 8px !important;
    gap: 6px !important;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
  }
  
  #hostSkillsContainer #hostAddSelectedSkills {
    padding: 8px 16px !important;
    font-size: 0.85rem !important;
    margin-top: 10px !important;
  }
  
  /* Ministry Selection Modal - Make more compact */
  #ministrySelectionModal {
    padding: 0 !important;
  }
  
  #ministrySelectionModal > div {
    width: 95vw !important;
    max-width: 95vw !important;
    padding: 15px !important;
    max-height: 85vh !important;
    border-radius: 8px !important;
  }
  
  #ministrySelectionModal h3 {
    font-size: 1rem !important;
    margin-bottom: 12px !important;
  }
  
  #ministrySelectionModal label {
    font-size: 0.8rem !important;
    margin-bottom: 6px !important;
  }
  
  #ministrySelect {
    padding: 8px !important;
    font-size: 0.85rem !important;
  }
  
  #ministrySelectionModal button {
    padding: 8px 16px !important;
    font-size: 0.85rem !important;
  }
  
  /* Tab Content Areas - Make more compact */
  .tab-pane {
    padding: 8px 0 !important;
  }
  
  .tab-pane h3 {
    font-size: 1rem !important;
    margin-bottom: 8px !important;
  }
  
  .tab-pane fieldset {
    padding: 10px !important;
    margin-bottom: 10px !important;
  }
  
  .tab-pane fieldset legend {
    font-size: 0.95rem !important;
    padding: 0 8px !important;
  }
  
  .tab-pane .form-group {
    margin-bottom: 8px !important;
  }
  
  .tab-pane .form-group label {
    font-size: 0.8rem !important;
    margin-bottom: 3px !important;
  }
  
  .tab-pane input[type="text"],
  .tab-pane input[type="email"],
  .tab-pane input[type="tel"],
  .tab-pane input[type="date"],
  .tab-pane select,
  .tab-pane textarea {
    padding: 6px 8px !important;
    font-size: 0.85rem !important;
  }
  
  .tab-pane textarea {
    min-height: 60px !important;
  }
  
  .tab-pane .form-row {
    gap: 8px !important;
    margin-bottom: 8px !important;
  }
  
  .tab-pane button[type="submit"],
  .tab-pane .btn-primary {
    padding: 10px 20px !important;
    font-size: 0.9rem !important;
  }
  
  /* Projects Tab - Compact */
  #projectsTab .time-range-container {
    flex-direction: column !important;
    gap: 8px !important;
    padding: 0 !important;
  }
  
  #projectsTab .time-picker-group {
    width: 100% !important;
    margin-bottom: 8px !important;
  }
  
  #projectsTab .circular-time-picker {
    display: none !important;
  }
  
  #projectsTab .time-display {
    font-size: 0.75rem !important;
  }
  
  /* Project time inputs - more compact */
  #projectsTab input[type="time"].native-time-input,
  #projectsTab input[type="time"] {
    max-width: 140px !important;
    padding: 6px 8px !important;
    font-size: 0.85rem !important;
    min-height: 36px !important;
    max-height: 36px !important;
    margin: 4px auto 0 auto !important;
  }
  
  #projectsTab .time-label {
    font-size: 0.75rem !important;
    margin-bottom: 3px !important;
  }
  
  #projectsTab .time-range-separator {
    font-size: 0.8rem !important;
    margin: 2px 0 !important;
  }
  
  /* Build Teams Tab - Compact */
  #teamsTab .form-group {
    margin-bottom: 10px !important;
  }
  
  #teamsTab select {
    padding: 10px 12px !important;
    font-size: 0.9rem !important;
    min-height: 40px !important;
  }
  
  #teamsTab button {
    padding: 12px 20px !important;
    font-size: 0.95rem !important;
  }
  
  /* Helpers Tab - Compact */
  #volunteersTab {
    padding: 8px 0 !important;
  }
  
  #volunteersList {
    font-size: 0.85rem !important;
  }
  
  /* Manage Data Tab - Compact */
  #dataTab > div {
    padding: 15px !important;
    margin-top: 10px !important;
  }
  
  #dataTab h4 {
    font-size: 1.1rem !important;
    margin-bottom: 12px !important;
  }
  
  #dataTab button {
    padding: 10px 18px !important;
    font-size: 0.85rem !important;
  }
  
  #dataTab p {
    font-size: 0.75rem !important;
    margin-top: 10px !important;
  }
  
  /* Existing Projects Section - Compact */
  #projectsList {
    font-size: 0.85rem !important;
  }
  
  #projectsList > div {
    padding: 10px !important;
    margin-bottom: 8px !important;
  }
  
  /* Match Results - Compact */
  #matchResults {
    font-size: 0.85rem !important;
  }
  
  #matchResults > div {
    padding: 10px !important;
    margin-bottom: 8px !important;
  }
  
  /* Required Skills List - Compact */
  #requiredSkillsList {
    font-size: 0.8rem !important;
  }
  
  #requiredSkillsList > div {
    padding: 6px 10px !important;
    margin-bottom: 6px !important;
  }
  
  /* Checkbox Groups - Compact */
  .checkbox-group {
    gap: 6px !important;
    font-size: 0.8rem !important;
  }
  
  .checkbox-group label {
    padding: 4px 6px !important;
  }
  
  /* Time Selection Section - Compact */
  #projectTimeSelectionSection {
    margin-top: 8px !important;
    padding: 8px !important;
  }
  
  #projectSelectedDaysTimes {
    gap: 6px !important;
  }
  
  /* Project day containers - more compact */
  #projectSelectedDaysTimes .day-availability-container {
    padding: 8px !important;
    margin-bottom: 6px !important;
  }
  
  #projectSelectedDaysTimes .day-header {
    margin-bottom: 4px !important;
  }
  
  #projectSelectedDaysTimes .day-name {
    font-size: 0.8rem !important;
  }
  
  #projectSelectedDaysTimes .time-picker-group {
    margin-bottom: 6px !important;
  }
  
  #projectSelectedDaysTimes .time-label {
    font-size: 0.7rem !important;
    margin-bottom: 2px !important;
  }
  
  #projectSelectedDaysTimes input[type="time"].native-time-input,
  #projectSelectedDaysTimes input[type="time"] {
    max-width: 120px !important;
    padding: 5px 6px !important;
    font-size: 0.8rem !important;
    min-height: 32px !important;
    max-height: 32px !important;
    margin: 2px auto 0 auto !important;
  }
  
  #projectSelectedDaysTimes .time-range-separator {
    font-size: 0.75rem !important;
    margin: 1px 0 !important;
  }
  
  /* Import Modal (if exists) - Compact */
  #hostImportModal,
  [id*="importModal"],
  [id*="ImportModal"] {
    padding: 0 !important;
  }
  
  #hostImportModal > div,
  [id*="importModal"] > div,
  [id*="ImportModal"] > div {
    width: 95vw !important;
    max-width: 95vw !important;
    padding: 15px !important;
    max-height: 85vh !important;
    border-radius: 8px !important;
  }
  
  #hostImportModal h3,
  [id*="importModal"] h3,
  [id*="ImportModal"] h3 {
    font-size: 1rem !important;
    margin-bottom: 12px !important;
  }
  
  #hostImportModal label,
  [id*="importModal"] label,
  [id*="ImportModal"] label {
    font-size: 0.8rem !important;
  }
  
  #hostImportModal input,
  #hostImportModal button,
  [id*="importModal"] input,
  [id*="importModal"] button,
  [id*="ImportModal"] input,
  [id*="ImportModal"] button {
    padding: 8px 12px !important;
    font-size: 0.85rem !important;
  }
  
  /* Replace circular time pickers with native HTML5 time inputs on cell screens */
  .circular-time-picker {
    display: none !important;
  }
  
  /* Show native time inputs instead - COMPACT VERSION */
  .time-picker-group input[type="time"].native-time-input,
  .time-picker-group input[type="time"] {
    display: block !important;
    width: 100% !important;
    max-width: 140px !important;
    margin: 4px auto 0 auto !important;
    padding: 6px 8px !important;
    font-size: 0.85rem !important;
    border: 1.5px solid #007bff !important;
    border-radius: 6px !important;
    background: white !important;
    min-height: 36px !important;
    max-height: 36px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    line-height: 1.2 !important;
  }
  
  .time-picker-group {
    width: 100% !important;
    margin-bottom: 8px !important;
    flex: 0 0 auto !important;
  }
  
  .time-label {
    font-size: 0.75rem !important;
    margin-bottom: 3px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
  }
  
  .time-range-container {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: stretch !important;
    padding: 0 !important;
  }
  
  .time-range-separator {
    text-align: center !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    margin: 2px 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
  }
  
  /* Make day availability containers more compact */
  .day-availability-container {
    padding: 10px !important;
    margin-bottom: 8px !important;
  }
  
  .day-header {
    margin-bottom: 6px !important;
  }
  
  .day-name {
    font-size: 0.85rem !important;
  }
  
  /* Compact time picker groups in day containers */
  .day-availability-container .time-picker-group {
    margin-bottom: 6px !important;
  }
  
  .day-availability-container .time-label {
    font-size: 0.7rem !important;
    margin-bottom: 2px !important;
  }
  
  .day-availability-container input[type="time"].native-time-input,
  .day-availability-container input[type="time"] {
    max-width: 120px !important;
    padding: 5px 6px !important;
    font-size: 0.8rem !important;
    min-height: 32px !important;
    max-height: 32px !important;
    margin: 2px auto 0 auto !important;
  }
  
  .day-availability-container .time-range-separator {
    font-size: 0.75rem !important;
    margin: 1px 0 !important;
  }
  
  /* Ensure subcategory container and select are visible and clickable on mobile */
  #subcategoryContainer {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 1 !important;
    position: relative !important;
  }
  
  #subcategoryContainer[style*="display: none"] {
    display: block !important;
  }
  
  #skillSubcategory {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    -webkit-appearance: menulist !important;
    appearance: menulist !important;
    touch-action: manipulation !important;
    min-height: 44px !important;
    font-size: 1rem !important;
    padding: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: white !important;
    border: 2px solid #007bff !important;
    border-radius: 8px !important;
  }
  
  #skillSubcategory:disabled,
  #skillSubcategory[disabled] {
    opacity: 1 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    background: white !important;
  }
  
  #skillSubcategory option {
    padding: 10px !important;
    font-size: 1rem !important;
    min-height: 44px !important;
  }
  
  /* Ensure category and subcategory selects display fully on mobile */
  #skillCategory,
  #skillSubcategory {
    position: relative !important;
    z-index: 1000 !important;
    -webkit-appearance: menulist !important;
    appearance: menulist !important;
    background-color: #f8f9ff !important;
    border: 1px solid #cbd5f5 !important;
    border-radius: 8px !important;
    padding: 12px !important;
    font-size: 1rem !important;
    min-height: 44px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    /* Ensure native mobile picker works */
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(0, 123, 255, 0.2) !important;
    /* Prevent any interference with native dropdown */
    pointer-events: auto !important;
    user-select: none !important;
    -webkit-user-select: none !important;
  }
  
  /* Ensure dropdown options are fully visible and scrollable */
  #skillCategory option,
  #skillSubcategory option {
    padding: 12px 10px !important;
    font-size: 1rem !important;
    min-height: 44px !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    display: block !important;
    background: white !important;
    color: #333 !important;
    /* Ensure options are accessible in native picker */
    font-weight: normal !important;
  }
  
  /* Ensure the select element itself doesn't get blocked */
  #skillCategory:active,
  #skillSubcategory:active {
    z-index: 1002 !important;
    position: relative !important;
  }
  
  /* Prevent any overlay from blocking the select */
  #skillCategory:focus,
  #skillSubcategory:focus {
    z-index: 1001 !important;
    position: relative !important;
    outline: 2px solid #007bff !important;
    outline-offset: 2px !important;
    /* Ensure focus state doesn't interfere with native picker */
    -webkit-tap-highlight-color: transparent !important;
  }
  
  /* Container adjustments for mobile */
  #subcategoryContainer {
    position: relative !important;
    z-index: 999 !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }
  
  /* Parent container adjustments */
  #subcategoryContainer,
  #skillCategoryLabel,
  label[for="skillSubcategory"] {
    position: relative !important;
    z-index: 998 !important;
  }
  
  /* Ensure selects can expand their dropdowns fully */
  select#skillCategory:focus,
  select#skillSubcategory:focus {
    z-index: 1001 !important;
    position: relative !important;
    outline: 2px solid #007bff !important;
    outline-offset: 2px !important;
  }
  
  /* Prevent parent containers from clipping dropdowns */
  form,
  fieldset,
  .volunteer-form,
  #volunteerForm {
    overflow: visible !important;
  }
  
  /* Ensure dropdowns appear above other content */
  select#skillCategory,
  select#skillSubcategory {
    transform: translateZ(0) !important; /* Force hardware acceleration */
    -webkit-transform: translateZ(0) !important;
  }
  
  /* Profile Edit Skills - Ensure subcategory is visible and selectable */
  #editSubcategoryContainer {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: relative !important;
  }
  
  #editSubcategoryContainer[style*="display: none"] {
    display: block !important;
  }
  
  #editSkillSubcategory {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 10 !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
  }
  
  #editSkillSubcategory:disabled,
  #editSkillSubcategory[disabled] {
    pointer-events: auto !important;
    opacity: 1 !important;
  }
  
  /* Profile Edit Skills Interface - Same responsive styles as helper registration */
  #editSkillCategory,
  #editSkillSubcategory {
    font-size: 0.9rem !important;
    padding: 8px !important;
  }
  
  #editSubcategoryContainer {
    margin-top: 8px !important;
  }
  
  #editSkillOptions {
    grid-template-columns: 1fr !important;
    max-height: 250px !important;
    gap: 6px !important;
    padding: 8px !important;
  }
  
  #editSkillOptions .skill-option {
    padding: 6px !important;
    font-size: 0.8rem !important;
  }
  
  #editExperienceContainer {
    margin-top: 10px !important;
  }
  
  #editExperienceContainer label {
    font-size: 0.7rem !important;
    padding: 4px 0 !important;
  }
  
  #editAddSkillButtonContainer {
    margin-top: 12px !important;
  }
  
  #editAddSelectedSkill {
    width: 100% !important;
    padding: 10px !important;
    font-size: 0.85rem !important;
  }
  
  #editSelectedSkillsList {
    gap: 8px !important;
    padding: 10px !important;
  }
  
  #editSelectedSkillsList > div {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 8px !important;
  }
  
  #editSelectedSkillsList button {
    margin-top: 8px !important;
    margin-left: 0 !important;
    align-self: flex-end !important;
  }
}

@media (max-width: 360px) {
  /* Very small screens - Profile Edit Skills */
  #editSkillCategory,
  #editSkillSubcategory {
    font-size: 0.85rem !important;
    padding: 6px !important;
  }
  
  #editSkillOptions {
    max-height: 200px !important;
    gap: 4px !important;
    padding: 6px !important;
  }
  
  #editSkillOptions .skill-option {
    padding: 4px !important;
    font-size: 0.75rem !important;
  }
  
  #editExperienceContainer label {
    font-size: 0.65rem !important;
  }
  
  #editAddSelectedSkill {
    padding: 8px !important;
    font-size: 0.8rem !important;
  }
  
  /* Profile page header - ensure back button is visible on very small screens */
  #completionMode .app-container > div:first-child {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  
  #completionMode .app-container > div:first-child > div:first-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  
  #completionMode .app-container .back-btn[onclick*="backToLanding"] {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    min-width: 65px !important;
    padding: 6px 10px !important;
    font-size: 0.7rem !important;
    min-height: 32px !important;
  }
}

/* Register Organization Page - Mobile Layout */
/* Cell screens only (≤600px) */
@media (max-width: 600px) {
  /* Main container - reduce margin on cell screens */
  body > div[style*="max-width: 800px"] {
    margin: 5px auto !important;
  }
  
  /* Register page header - stack logo and back button vertically on cell screens */
  #registerHeader {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    padding: 6px 10px !important;
  }
  
  /* Logo and title container - keep together, reduce gap */
  #registerHeader > div[style*="display: flex"][style*="align-items: center"] {
    order: 1 !important;
    width: 100% !important;
    gap: 6px !important;
  }
  
  /* Logo background - reduce padding */
  #registerHeader .logo-background {
    padding: 3px 6px !important;
  }
  
  /* Logo - reduce size on cell screens */
  #registerHeader .logo {
    height: 28px !important;
  }
  
  /* Header title and subtitle - reduce font sizes */
  #registerHeader h1 {
    font-size: 1rem !important;
    margin: 0 !important;
    line-height: 1.2 !important;
  }
  
  #registerHeader p {
    font-size: 0.65rem !important;
    margin: 0 !important;
    line-height: 1.2 !important;
  }
  
  /* Back button - make smaller and move under logo on cell screens */
  #registerHeader > .back-btn {
    align-self: flex-start !important;
    margin-top: 0 !important;
    order: 2 !important;
    padding: 2px 5px !important;
    font-size: 0.6rem !important;
    min-height: 20px !important;
    line-height: 1.2 !important;
  }
  
  /* Returning host section - reduce padding and font size */
  body > div[style*="max-width: 800px"] > div[style*="background: #e3f2fd"] {
    padding: 4px 10px !important;
    font-size: 0.7rem !important;
    line-height: 1.3 !important;
  }
  
  /* Register form container - reduce padding on cell screens */
  #registrationForm {
    padding: 0 !important;
  }
  
  body > div[style*="max-width: 800px"] > div[style*="padding: 25px"] {
    padding: 8px 10px !important;
  }
  
  /* Important notice - reduce padding and margin on cell screens */
  body > div[style*="max-width: 800px"] > div[style*="padding: 25px"] > div[style*="background: #fff3cd"] {
    padding: 4px 6px !important;
    margin-bottom: 6px !important;
    font-size: 0.65rem !important;
    line-height: 1.25 !important;
  }
  
  /* Form grid - stack fieldsets vertically on cell screens */
  #registrationForm > div[style*="display: grid"][style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    margin-bottom: 8px !important;
  }
  
  /* Fieldsets - reduce padding on cell screens */
  #registrationForm fieldset {
    padding: 5px 6px !important;
    margin: 0 !important;
  }
  
  /* Legend - reduce font size on cell screens */
  #registrationForm fieldset legend {
    font-size: 0.7rem !important;
    padding: 0 3px !important;
    line-height: 1.2 !important;
  }
  
  /* Form groups - reduce margin on cell screens */
  #registrationForm .form-group {
    margin-bottom: 4px !important;
  }
  
  /* Labels - reduce font size on cell screens */
  #registrationForm .form-group label {
    font-size: 0.65rem !important;
    margin-bottom: 1px !important;
    line-height: 1.2 !important;
  }
  
  /* Input fields - reduce padding and font size on cell screens */
  #registrationForm .form-group input[type="text"],
  #registrationForm .form-group input[type="email"],
  #registrationForm .form-group input[type="tel"],
  #registrationForm .form-group input[type="password"] {
    padding: 3px 5px !important;
    font-size: 0.75rem !important;
    min-height: 28px !important;
    line-height: 1.3 !important;
  }
  
  /* Submit button - reduce size on cell screens */
  #registrationForm ~ div[style*="text-align: center"] button,
  #registrationForm + div[style*="text-align: center"] button {
    padding: 6px 12px !important;
    font-size: 0.8rem !important;
    margin-top: 6px !important;
    line-height: 1.3 !important;
  }
  
  /* Error message - reduce size */
  #errorMessage {
    font-size: 0.65rem !important;
    margin: 4px 0 !important;
    min-height: 14px !important;
    line-height: 1.2 !important;
  }
}

/* Team Matching Example Modal - Mobile Compact Title */
@media (max-width: 600px) {
  #teamExampleTitle {
    font-size: 1.1rem !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: calc(100vw - 120px) !important;
  }
}

/* Galaxy S23 and similar devices - Extra compact */
@media (max-width: 400px) {
  #teamExampleTitle {
    font-size: 0.95rem !important;
    line-height: 1.1 !important;
    letter-spacing: -0.03em !important;
    padding-right: 4px !important;
  }
  
  /* Reduce header padding on very small screens */
  #teamExampleModal > div:first-child {
    padding: 12px 15px !important;
  }
}