@media (max-width: 1350px) {
  .results-grid {
    grid-template-columns: repeat(4, 250px);
    gap: 20px 0px;
  }

  .search-container {
    position: relative;
    width: 444px;
    max-width: 900px;
    right: 80px;
  }

  .user-profiles-grid {
    grid-template-columns: 1fr !important;
    gap: 9px 0 !important;
    margin-left: 27px !important;
    width: 270px !important;
  }

  .result-box {
    break-inside: avoid;
    margin: 0;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    color: white;
    display: flex;
    flex-direction: column;
    grid-row-end: span 1;
    transform-origin: center top;
    transition: transform 0.3s ease, background-color 0.3s ease;
    height: fit-content;
    width: 230px;
  }
}

@media (max-width: 1024px) and (min-width: 901px) {
  .logo {
    margin-top: 6px !important;
  }

  .search-container {
    position: relative !important;
    margin: 2.4px auto 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: calc(100% + 199px) !important;
    max-width: calc(720px + 199px) !important;
    z-index: 100 !important;
  }
}

@media (max-width: 900px) and (min-width: 601px) {
  .logo {
    margin-top: 9px !important;
    margin-left: -3px !important;
  }
}

@media (max-width: 900px) {
  .header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 0 15px;
    padding-left: 3px;
    margin-bottom: 16px;
  }

  .header-spacer {
    display: none !important;
  }

  .header-avatar-spacer {
    display: block !important;
  }

  .logo {
    width: 45px;
    height: auto;
    margin: 0;
    flex-shrink: 0;
  }

  .search-container {
    position: relative;
    flex: 1;
    width: auto;
    max-width: calc(100% - 120px);
    margin: 0;
    right: auto;
    top: auto;
  }

  .search-container input {
    width: 100%;
    font-size: 14px;
    padding-right: 44px;
  }

  .loupe-container {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
  }

  #gMenuFrame {
    position: fixed;
    right: 40px !important;
    top: 24px !important;
  }

  .user-profiles-grid {
    grid-template-columns: 1fr !important;
    gap: 9px 0 !important;
    margin-left: 27px !important;
    width: 270px !important;
  }

  .results-grid {
    grid-template-columns: repeat(3, 220px);
    gap: 20px 30px;
    position: center;
  }

  .result-box {
    break-inside: avoid;
    margin: 0;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    color: white;
    display: flex;
    flex-direction: column;
    grid-row-end: span 1;
    transform-origin: center top;
    transition: transform 0.3s ease, background-color 0.3s ease;
    height: fit-content;
    width: 230px;
  }
}

@media (max-width: 600px) {
  #infoModal {
    display: none !important;
  }

  #infoIcon {
    display: none !important;
  }

  .glue-dropdown {
    left: 3vw !important;
    top: 7vh !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 73vw !important;
    max-width: 73vw !important;
    height: 66vh !important;
    min-height: 0 !important;
    max-height: 77vh !important;
    border-radius: 12px !important;
    margin: 0 !important;
    z-index: 10001 !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    position: fixed;
    background: #ffcf25;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    width: 350px !important;
    height: 480px !important;
    max-height: 480px !important;
    min-height: 480px !important;
    overflow-y: hidden;
    z-index: 9999;
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
  }

  .header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding: 0 10px;
    padding-left: 0;
    margin-bottom: 16px;
  }

  .logo {
    width: 42px;
    height: auto;
    margin: 0 !important;
    flex-shrink: 0;
  }

  .search-container {
    position: relative;
    flex: 1;
    width: auto;
    max-width: calc(100% - 100px);
    margin: 0;
    margin-left: 15px;
    right: auto;
    top: auto;
  }

  .search-container input {
    width: 100%;
    font-size: 13px;
    padding: 8px 40px 8px 10px;
  }

  .loupe-container {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 36px;
  }

  #gMenuFrame {
    position: fixed;
    right: 35px !important;
    top: 24px !important;
  }

  .search-dropdown,
  .search-dropdown .dropdown-section {
    width: 333px !important;
    min-width: 333px !important;
    max-width: 333px !important;
    left: 41% !important;
    transform: translateX(-50%) !important;
    box-sizing: border-box;
  }

  #websitePreview.preview-box {
    width: 222px !important;
    min-width: 222px !important;
    max-width: 222px !important;
    top: 3% !important;
    left: 59% !important;
    transform: translateX(-50%) !important;
    box-sizing: border-box;
  }

  .results-grid {
    grid-template-columns: repeat(2, 170px);
    gap: 15px;
  }

  .user-profiles-grid {
    grid-template-columns: 1fr !important;
    gap: 9px 0 !important;
    margin-left: 27px !important;
    width: 270px !important;
  }

  .dropdown-section:first-child .dropdown-title {
    display: none !important;
  }

  .result-box {
    break-inside: avoid;
    margin: 0;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    color: white;
    display: flex;
    flex-direction: column;
    grid-row-end: span 1;
    transform-origin: center top;
    transition: transform 0.3s ease, background-color 0.3s ease;
    height: fit-content;
    width: 170px;
  }
}

/* Desktop and Tablet - Increase CREATE NEW button height */
@media (min-width: 601px) {
  .create-new-button {
    height: 45px;
    font-size: 16px;
    padding: 9px 0;
  }

  .create-glubler-button {
    padding: 35px 15px;
  }
}

/* Mobile - Keep original small button size */
@media (max-width: 600px) {
  .create-new-button {
    height: 33px !important;
    font-size: 13px !important;
  }

  .create-glubler-button {
    padding: 12px 15px !important;
  }
}

/* Center info icon in circle - all screen sizes */
#infoIcon img {
  position: relative !important;
  left: 0 !important;
  right: 0 !important;
  top: 4px !important;
  bottom: 0 !important;
  margin: auto !important;
  transform: none !important;
  display: block !important;
}

/* Lock info icon position - prevent shifting on load */
#infoIcon {
  position: fixed !important;
  bottom: 25px !important;
  right: 26px !important;
  width: 23px !important;
  height: 23px !important;
  z-index: 10001 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Lock info modal position */
#infoModal {
  position: fixed !important;
  bottom: 21px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  top: auto !important;
}