/* Profile Page - Full width layout, darker share button, responsive grid */

/* Force main content container to full width, remove centering and max-width */
.layout > div[style*="flex:1"] {
  margin: 0 !important;
  max-width: 100% !important;
  padding: 0 !important;
  width: 100% !important;
}

/* Inner spacing for the profile card */
.profile-main {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 20px 32px !important;
  margin: 0 auto !important;
  width: 100%;
  max-width: 1600px;          /* Limits content on very large screens, but still wide */
}

/* Make prompts grid use more columns on large screens */
.profile-main section:last-child {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
  gap: 24px !important;
  width: 100% !important;
}

/* Share button: darker background and text */
.profile-header button:last-child {
  background: #cbd5e1 !important;   /* darker gray */
  color: #1e293b !important;
  box-shadow: none !important;
  border: none !important;
}

/* Buttons keep rounded corners */
.login-button {
  border-radius: 14px !important;
}

/* Prompt cards: rounded corners */
.profile-main section > div {
  border-radius: 18px !important;
  box-shadow: 0 2px 8px rgba(59,130,246,0.06);
}

/* Prompt images: rounded corners */
.profile-main section img {
  border-radius: 12px !important;
}

/* Avatar remains round */
.profile-avatar {
  border-radius: 50% !important;
}

/* All outer containers stay square */
.layout,
.profile-main,
.profile-header,
.profile-tabs,
nav {
  border-radius: 0 !important;
}

/* Responsive: tablets */
@media (max-width: 768px) {
  .profile-main {
    padding: 16px !important;
  }
  .profile-header {
    flex-direction: column;
    align-items: flex-start !important;
  }
  .profile-header > div:last-child {
    flex-direction: row;
    width: 100%;
  }
}

/* Responsive: mobile */
@media (max-width: 480px) {
  .profile-main {
    padding: 12px !important;
  }
  .profile-header > div:last-child {
    flex-direction: column;
  }
  .profile-main section:last-child {
    grid-template-columns: 1fr !important;
  }
}