:root {
  --primary-color: #ff9800;
  --primary-color-rgb: 255, 152, 0;
  --secondary-color: #e65100;
  --background-color: #1a202c;
  --text-color: #f1f5f9;
  --text-color-faded: #a9b8cd;
  --border-color: #475569;
  --card-background: #2d3748;
  --card-background-dark: #1e2533;
  --font-family: "Roboto", sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  text-decoration: none;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-family);
  /* background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--background-color) 97%, var(--primary-color) 10%),
    color-mix(in srgb, var(--card-background) 98%, var(--secondary-color) 5%)
  ); */
  background-color: var(--background-color);
  background-attachment: fixed;
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.websitebuilder-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
}

h1 {
  text-align: center;
  margin-bottom: 2rem;
}

.text-gradient-highlight {
  background: linear-gradient(
    45deg,
    var(--primary-color),
    var(--secondary-color)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}

h3 {
  margin-bottom: 1rem;
}

.form-container {
  background: var(--card-background);
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.input-group {
  margin-bottom: 1.5rem;
}

label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

textarea,
input {
  background-color: var(--background-color);
  color: var(--text-color);
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 1rem;
}

.website-input {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.website-input input {
  flex: 1;
}

#prompt {
  font-family: var(--font-family);
}

#design-preferences {
  font-family: var(--font-family);
}

.page-content {
  font-family: var(--font-family);
}

.primary-button,
.secondary-button {
  width: 100%;
  padding: 0.75rem;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

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

.primary-button:hover {
  background-color: var(--secondary-color);
}

.primary-button:disabled,
.secondary-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.secondary-button {
  background-color: var(--background-color);
  color: var(--text-color);
  border: 1px solid var(--border-color);
}

.secondary-button:hover {
  background-color: var(--card-background);
}

.description {
  padding: 0 1rem 1rem 1rem;
  margin-bottom: 1rem;
}

.status-container {
  text-align: center;
  margin: 2rem 0;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.result-container {
  margin-top: 2rem;
}

.ref-image-preview {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.ref-image-preview img {
  max-width: 150px;
  max-height: 150px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #ddd;
}

input[type="file"] {
  width: 100%;
  padding: 0.5rem;
}

/* Design Options */
.design-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.design-option {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.design-option select {
  padding: 0.5rem;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 1rem;
}

#add-page {
  width: auto;
  margin-bottom: 1rem;
}

.page-images {
  margin: 0.5rem 0;
}

.preview-image-container {
  display: inline-block;
  margin: 5px;
  text-align: center;
  background: white;
  padding: 8px;
  border-radius: 4px;
  border: 1px solid var(--border-color);
}

.preview-image-container img {
  max-width: 150px;
  max-height: 150px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
  margin-bottom: 8px;
}

.image-placeholder-text {
  font-size: 12px;
  color: var(--text-color);
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-ref-image-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.temperature-control {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0;
}

.temperature-control input[type="range"] {
  flex: 1;
}

.temperature-value {
  min-width: 3em;
  text-align: right;
}

.status-modal-content {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.status-modal-content h2 {
  margin-bottom: 1.5rem;
  color: var(--text-color);
}

.status-modal-content h3 {
  margin-bottom: 0;
}

.status-modal-content a {
  color: var(--primary-color);
  text-decoration: underline;
  cursor: pointer;
}

.auth-confirmation-modal-content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.link-container {
  margin-top: 1rem;
}

.link-container a {
  font-size: 1rem;
  color: #0066cc;
  text-decoration: none;
  font-weight: bold;
}

.confetti {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.status-modal-content.error {
  border-top: 4px solid #dc2626;
}

.status-modal-content.error h2 {
  color: #dc2626;
  margin-bottom: 1rem;
}

.status-modal-content.error p {
  margin-bottom: 1.5rem;
  color: var(--text-color);
  font-size: 1.1rem;
}

.status-modal-content.error .primary-button {
  background-color: #dc2626;
  max-width: 200px;
  margin: 0 auto;
}

.status-modal-content.error .primary-button:hover {
  background-color: #b91c1c;
}

#extra-options {
  overflow: hidden;
  transition: all 0.3s ease-out;
  max-height: 0;
  opacity: 0;
  margin: 0;
  padding: 0;
}

#extra-options.show {
  max-height: 2000px; /* Adjust based on your content */
  opacity: 1;
  margin: 1rem 0;
}

#extra-options-toggle {
  width: 100%;
  text-align: left;
  margin: 1rem 0;
  padding: 0.5rem;
  background-color: var(--background-color);
  color: var(--text-color);
  height: 40px;
}

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.site-header h1 {
  margin-bottom: 0; /* Override existing h1 margin */
}

.auth-container {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.auth-button {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  background: var(--primary-color);
  color: var(--text-color);
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.2s;
  text-decoration: none;
  text-align: center;
  display: inline-block;
}

.hidden {
  display: none !important;
}

#login-view,
#register-view {
  transition: opacity 0.3s ease;
}

#login-view button,
#register-view button,
#register-view .description {
  margin-top: 1rem;
}

.google-login-container {
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

.form-error {
  color: #dc2626;
  font-size: 0.875rem;
  margin-top: 0.5rem;
}

.password-requirements {
  color: var(--text-color);
  margin-top: 0.25rem;
}

/* Site header styles */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--card-background);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 0.5rem 1rem;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.header-left {
  display: flex;
  align-items: center;
  flex: 1;
}

.header-middle {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
}

.header-middle .website-link {
  white-space: nowrap;
}

.header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
}

.site-title {
  text-decoration: none;
  color: inherit;
  font-size: 1.5rem;
  font-weight: bold;
}

.main-nav {
  display: flex;
  align-items: center;
}

.nav-link {
  text-decoration: none;
  color: var(--text-color);
  padding: 0.5rem 1rem;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.nav-link:hover {
  background-color: var(--hover-color);
}

/* Mobile styles */
@media (max-width: 768px) {
  .site-header {
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
  }

  /* Keep main-nav visible but adjust it */
  .main-nav {
    position: static;
    visibility: visible;
    opacity: 1;
    background: none;
    box-shadow: none;
    border: none;
    padding: 0;
    display: flex;
    justify-content: flex-end;
  }

  /* Make account button more compact */
  #account-button {
    font-size: 0;
    padding: 0.5rem;
    min-width: 40px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Add user icon to account button */
  #account-button::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23f1f5f9%27 stroke-width=%273%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2%27%3E%3C/path%3E%3Ccircle cx=%2712%27 cy=%277%27 r=%274%27%3E%3C/circle%3E%3C/svg%3E");
    background-size: contain;
    color: var(--text-color);
    background-repeat: no-repeat;
  }

  /* Hide the account button's arrow icon */
  #account-button svg {
    display: none;
  }

  .auth-container {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
  }

  .user-profile {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
  }

  /* Adjust header content layout */
  .header-content {
    flex-wrap: wrap;
    position: relative;
    padding: 0 1rem;
  }

  /* Make middle section of header take less space */
  .header-middle {
    order: 3;
    width: 100%;
    margin-top: 0.5rem;
    margin-left: 0;
    margin-right: 0;
    justify-content: center;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-color);
  }

  /* Make the navigation buttons smaller */
  .header-middle .website-link {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
  }

  /* Make the logo/title area smaller */
  .header-left {
    flex-shrink: 1;
    min-width: 0;
    order: 1;
  }

  /* Ensure the dropdown still appears correctly */
  .account-dropdown-content {
    right: 0;
    left: auto;
    top: 100%;
  }

  .websitebuilder-container {
    padding: 0;
    margin: 0 auto;
  }

  /* Remove account section heading reference since we removed it */
  .account-section-heading {
    display: none;
  }

  /* Ensure header-right stays on the first row */
  .header-right {
    order: 2;
  }
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
  .site-header {
    background: var(--surface-color-dark);
  }
}

.auth-container {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.user-profile {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.user-profile * {
  white-space: nowrap;
}

.credits-value-container {
  background-color: var(--card-background-dark);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  border: 1px solid var(--border-color);
}

.credits-value {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.credits-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  gap: 20px;
}

.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid var(--border-color);
  border-top: 5px solid var(--primary-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loading-container p {
  color: var(--text-color);
  font-size: 16px;
  margin: 0;
}

.page-image-section {
  margin: 10px 0;
}

.page-ref-image-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.preview-image-wrapper {
  display: inline-block;
  text-align: center;
  background: white;
  padding: 8px;
  border-radius: 4px;
  border: 1px solid var(--border-color);
}

.preview-image-wrapper img {
  max-width: 150px;
  max-height: 150px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
  margin-bottom: 8px;
}

.image-use-text {
  font-size: 12px;
  color: var(--text-color);
  font-family: monospace;
  margin-top: 4px;
}

.page-item {
  background: var(--card-background);
  padding: 1rem;
  border-radius: 4px;
  margin-bottom: 1rem;
  border: 1px solid var(--border-color);
}

.page-item .remove-page {
  background-color: #fee2e2;
  color: #dc2626;
  border: 1px solid #dc2626;
  margin-top: 0.5rem;
}

.page-item input,
.page-item textarea {
  width: 100%;
  margin-bottom: 10px;
}

.site-header {
  background-color: var(--card-background);
  border-bottom: 1px solid var(--border-color);
  transition: all 0.2s ease;
}

.discord-link {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  padding: 8px 12px;
  border-radius: 6px;
  transition: background-color 0.2s;
  margin-right: 12px;
}

.discord-link:hover {
  background-color: var(--card-background-dark);
}

.discord-link svg {
  width: 20px;
  height: 20px;
}

.discord-link-text {
  display: flex;
  flex-direction: column;
}

.discord-link-text p {
  margin: 0;
}

.discord-link-description {
  font-size: 0.875rem;
  color: var(--text-color-faded);
}

.auth-button .spinner {
  border: 2px solid var(--border-color);
  border-top: 2px solid var(--primary-color);
  width: 20px;
  height: 20px;
  margin: 0 auto;
}

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

.text-button {
  background: none;
  border: none;
  color: var(--primary-color);
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  margin: 0.5rem 0;
  width: 100%;
  text-align: center;
}

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

.checkbox-group {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.checkbox-group input[type="checkbox"] {
  margin-top: 0.25rem;
  width: auto;
}

.checkbox-group label {
  font-size: 0.875rem;
  color: var(--text-color);
  margin-bottom: 0;
}

.checkbox-group label a {
  color: var(--primary-color);
  text-decoration: none;
}

.checkbox-group label a:hover {
  text-decoration: underline;
}

.api-access-prompt {
  text-align: center;
  padding: 2rem;
}

.api-access-prompt p {
  color: var(--text-color-light);
  margin-bottom: 1rem;
}

.api-access-prompt .website-link {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  text-decoration: none;
  color: var(--text-color);
  border: 1px solid var(--border-color);
  transition: background-color 0.2s;
}

.api-access-prompt .website-link:hover {
  background-color: var(--background-color);
}

.template-selection {
  padding: 20px;
}

.template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.template-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.template-option img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  border: 2px solid var(--border-color);
}

.select-template {
  padding: 8px 16px;
  background-color: var(--primary-color);
  color: var(--text-color);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.select-template:hover {
  background-color: var(--secondary-color);
}

/* Credit purchase styles */
.credit-options-container {
  background: none;
  padding: 0;
}

.credit-options-container p {
  text-align: center;
  margin-bottom: 20px;
}

.credit-options {
  margin-bottom: 30px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.credit-option {
  text-align: center;
  padding: 15px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  aspect-ratio: 1/1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

.credit-option.popular {
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.6);
  border: 2px solid #d4af37;
}

.popular-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: #d4af37;
  color: white;
  padding: 5px 15px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: bold;
}

.credit-option .buy-button {
  margin-bottom: 20px;
  width: 80%;
}

.credit-option .buy-button button {
  width: 100%;
  padding: 12px 15px;
  font-weight: bold;
  font-size: 16px;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--background-color);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 10px;
  transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--primary-color);
}

/* Firefox scrollbar compatibility */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) var(--background-color);
}

/* Account dropdown styles */
.account-dropdown {
  position: relative;
  display: inline-block;
}

.account-dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  min-width: 220px;
  background-color: var(--card-background);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  z-index: 100;
  margin-top: 4px;
  border: 1px solid var(--border-color);
}

.account-dropdown-content.show {
  display: block;
}

.dropdown-item {
  display: flex;
  padding: 12px 16px;
  text-decoration: none;
  color: var(--text-color);
  transition: background-color 0.2s;
}

.dropdown-item:hover {
  background-color: var(--card-background-dark);
}

button.dropdown-item {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
}

.dropdown-divider {
  height: 1px;
  background-color: var(--border-color);
  margin: 4px 0;
}

#account-button svg {
  margin-left: 6px;
  vertical-align: middle;
}

/* Adjust credits container in dropdown */
.account-dropdown .credits-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
}

.account-dropdown .credits-button {
  padding: 6px 12px;
  font-size: 12px;
}

/* Ensure body takes full height and main content can grow */
body {
  /* ... existing styles ... */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  /* Select the main content container */
  flex: 1; /* Allows the main content to grow and push the footer down */
}

/* Footer Styles */
.site-footer-main {
  background-color: var(--card-background);
  color: var(--text-color-faded);
  padding: 1rem 2rem;
  margin-top: 2rem; /* Add some space above the footer */
  border-top: 1px solid var(--border-color);
  text-align: center;
  flex-shrink: 0; /* Prevent footer from shrinking */
}

.footer-content {
  max-width: 1200px; /* Optional: constrain width */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.footer-links {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap; /* Allow links to wrap on smaller screens */
}

.footer-link {
  color: var(--text-color-faded);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-link:hover {
  color: var(--primary-color);
  text-decoration: underline;
}

.footer-links span {
  color: var(--border-color);
}

.footer-copyright {
  font-size: 0.875rem;
  margin-top: 0.5rem;
}

/* Responsive adjustments for footer */
@media (min-width: 768px) {
  .site-footer-main {
    text-align: left;
  }

  .footer-content {
    flex-direction: row;
    justify-content: space-between;
  }

  .footer-copyright {
    margin-top: 0;
  }
}

.dashboard-container {
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.websites-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
  transition: grid-template-rows 0.3s ease-out;
}

.website-card {
  background: var(--card-background, #ffffff);
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.website-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.website-title {
  font-size: 1.25rem;
  color: var(--text-color);
  margin-bottom: 0.5rem;
}

.website-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.stat-item {
  font-size: 0.875rem;
  color: var(--text-color);
}

.website-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.website-link {
  padding: 0.5rem 1rem;
  border-radius: 4px;
  text-decoration: none;
  font-size: 0.875rem;
  transition: background-color 0.2s;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.website-link.disabled {
  background-color: var(--background-color);
  filter: grayscale(100%);
  pointer-events: none;
}

.edit-link {
  background-color: var(--background-color);
  color: var(--text-color);
  border: 1px solid var(--border-color);
}

.edit-link:hover {
  background-color: var(--card-background);
}

.delete-link {
  background-color: #dc3545;
  color: white;
  border: none;
  cursor: pointer;
}

.delete-link:hover {
  background-color: #c82333;
}

/* No websites state */
.no-websites {
  text-align: center;
  padding: 3rem;
  background: var(--card-background);
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  grid-column: 1 / -1;
}

.no-websites p {
  margin-bottom: 1.5rem;
  color: var(--text-color);
  font-size: 1.1rem;
}

.no-websites .primary-button {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  text-decoration: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .dashboard-content {
    padding: 1rem;
  }

  .websites-grid {
    gap: 1rem;
  }

  .website-stats {
    grid-template-columns: 1fr;
  }

  .website-actions {
    grid-template-columns: 1fr;
  }
}

.confirm-delete {
  background-color: var(--error-color, #dc3545);
}

.confirm-delete:hover {
  background-color: var(--error-color-dark, #c82333);
}

.website-card.deleting {
  filter: grayscale(100%);
  pointer-events: none;
}

@keyframes fadeOutScale {
  from {
    opacity: 1;
    filter: grayscale(100%);
    transform: scale(0.9);
  }
  to {
    opacity: 0;
    filter: grayscale(100%);
    transform: scale(0.8);
  }
}

.website-card.deleted {
  animation: fadeOutScale 0.3s ease-out forwards;
  pointer-events: none;
}

/* Add new website preview styles */
.website-preview {
  margin: -1.5rem -1.5rem 0;
  height: 200px;
  overflow: hidden;
  border-radius: 8px 8px 0 0;
  background: var(--background-color);
  position: relative;
  display: block;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid var(--card-background);
}

.website-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
  display: block;
}

/* Keep existing hover transform */
.website-card:hover .website-preview img {
  transform: scale(1.05);
}

/* Loading state for images */
.website-preview::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--background-color);
  opacity: 0;
  transition: opacity 0.3s;
}

.website-preview img:not([src]),
.website-preview img[src=""],
.website-preview img[src="/images/default-preview.png"] {
  opacity: 0.7;
}

.website-preview.no-screenshot {
  background: var(--background-color);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.website-preview.no-screenshot img {
  display: none;
}

.no-screenshot-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--background-color);
  color: var(--text-color);
  font-size: 0.9rem;
  padding: 1rem;
}

.no-screenshot-overlay span {
  background: var(--card-background);
  padding: 0.5rem 1rem;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.confirmation-input {
  margin: 1.5rem 0;
}

.delete-confirmation-input {
  width: 100%;
  padding: 0.75rem;
  border: 2px solid var(--border-color);
  border-radius: 4px;
  font-size: 1rem;
  transition: border-color 0.2s;
}

.delete-confirmation-input:focus {
  outline: none;
  border-color: var(--primary-color);
}

/* Style for disabled delete button */
.confirm-delete:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Loading animation styles */
.loading-card {
  background: var(--card-background);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 1rem;
  pointer-events: none;
}

.loading-title {
  height: 24px;
  width: 60%;
  margin-bottom: 1rem;
  border-radius: 4px;
}

.loading-stats {
  margin-bottom: 1.5rem;
}

.loading-stat {
  height: 48px;
  border-radius: 4px;
}

.loading-buttons {
  height: 36px;
  border-radius: 4px;
}

.account-settings {
  background: var(--card-background);
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-top: 2rem;
}

.account-settings h3 {
  margin-bottom: 1rem;
  color: var(--text-color);
}

.account-settings .website-link {
  width: 100%;
  max-width: 200px;
}

/* Shimmer animation */
.shimmer {
  background: linear-gradient(
    90deg,
    var(--card-background) 0%,
    var(--border-color) 50%,
    var(--card-background) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.invitations-section {
  background: var(--card-background);
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 2rem;
}

.invitations-section h2 {
  margin-top: 0;
  margin-bottom: 1rem;
}

.invitation-card {
  text-align: center;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
}

.invitation-card p {
  margin: 0;
  line-height: 1.5;
  font-size: 1.1em;
}

.invitation-card .accept-invitation {
  width: 100%;
  max-width: 200px; /* or a width you prefer */
}

.accept-invitation {
  min-width: 90px;
  text-align: center;
}

.ai-chat-container {
  position: fixed;
  color: black;
  background: var(--background-color);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  font-size: 14px;
  max-height: 90%;
}

.ai-chat-header {
  padding: 8px 12px;
  background: var(--card-background);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ai-chat-title {
  font-weight: 500;
  color: var(--text-color);
}

.ai-chat-button,
#error-container button,
.check-domain-button,
.buy-domain-button {
  padding: 8px 12px;
  background: var(--secondary-color);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.ai-chat-button:hover,
#error-container button:hover,
.check-domain-button:hover,
.buy-domain-button:not(:disabled):hover {
  background: #0056b3;
}

.ai-chat-button-secondary,
.version-restore-btn,
.version-unpublish-btn {
  background: #fff;
  border: 1px solid var(--primary-color);
  color: var(--primary-color);
}

.ai-chat-button-secondary:hover,
.version-restore-btn:hover,
.version-unpublish-btn:hover {
  background: var(--primary-color);
  color: var(--text-color);
}

.ai-chat-message {
  margin-bottom: 8px;
  padding: 8px;
  border-radius: 4px;
  background: var(--card-background-light);
  color: var(--text-color);
}

.ai-chat-message.user {
  margin-left: 20px;
  background: var(--card-background-dark);
}

.ai-chat-message.current,
.ai-chat-message.restore,
.ai-chat-message.update {
  margin-right: 20px;
  background: var(--card-background);
}

.ai-chat-container {
  bottom: 20px;
  right: 20px;
  width: 320px;
  height: 400px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: height 0.3s ease;
}

.ai-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
}

.ai-chat-input-container {
  padding: 10px;
  border-top: 1px solid var(--border-color);
  background: var(--card-background);
  color: var(--text-color);
}

#ai-chat-input {
  width: 100%;
  height: 60px;
  padding: 8px;
  font-size: var(--font-size);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  margin-bottom: 8px;
  resize: none;
}

#ai-chat-send:disabled {
  background: #cccccc;
  cursor: not-allowed;
  opacity: 0.7;
}

#ai-chat-send:hover:not(:disabled) {
  background: #0056b3;
}

#ai-chat-minimize {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.2em;
  padding: 0 4px;
}
#ai-chat-minimize:hover {
  color: #1976d2;
}

.ai-chat-container.minimized {
  height: 43px;
  resize: none;
}

.ai-chat-container.minimized .ai-chat-messages,
.ai-chat-container.minimized .ai-chat-input-container {
  display: none;
}

.loading-dots {
  display: inline-block;
  width: 50px;
  text-align: center;
}

.loading-dots::after {
  content: ".";
  animation: dots 1.5s steps(5, end) infinite;
}

@keyframes dots {
  0%,
  20% {
    content: ".";
  }
  40% {
    content: "..";
  }
  60% {
    content: "...";
  }
  80%,
  100% {
    content: "";
  }
}

#error-container {
  position: fixed;
  top: 40px;
  left: 20px;
  background: rgba(255, 0, 0, 0.9);
  color: white;
  padding: 1rem;
  border-radius: 8px;
  z-index: 9999;
  display: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  max-width: 300px;
}

#error-container * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#error-container p {
  margin: 10px 0;
  word-break: break-word;
}

#error-container hr {
  margin: 10px 0;
}

#error-close-button {
  position: relative;
  background: rgba(255, 0, 0, 0.9);
  border: none;
  color: white;
  font-size: 18px;
  cursor: pointer;
  border-radius: 50%;
  width: 30px;

  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: flex-end;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

#error-container .stack-trace {
  font-family: monospace;
  font-size: 12px;
  white-space: pre-wrap;
  background: rgba(255, 255, 255, 0.1);
  padding: 8px;
  margin: 8px 0;
  border-radius: 4px;
  color: #fff;
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.error-count {
  display: inline-block;
  margin-left: 5px;
  color: #666;
}

.versions-loading {
  text-align: center;
  padding: 20px;
  color: #666;
}

.version-number {
  font-weight: 500;
  color: var(--primary-color);
}

.version-current-badge {
  font-size: 0.8em;
  background-color: var(--primary-color);
  color: white;
  padding: 4px 6px;
  border-radius: 12px;
  text-align: center;
}

.version-restore-btn {
  padding: 2px 8px;
  background: #fff;
  border: 1px solid var(--primary-color);
  color: var(--primary-color);
  background: var(--card-background-dark);
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s;
}

.version-restore-btn:hover {
  background: var(--primary-color);
  color: #fff;
}

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

.restore-success {
  background: #e8f5e9 !important;
  color: #2e7d32 !important;
  opacity: 1 !important;
  border: 1px solid #2e7d32 !important;
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.ai-chat-input-wrapper {
  position: relative;
  margin-bottom: 8px;
}

.ai-chat-input-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ai-chat-add-file {
  cursor: pointer;
  color: var(--text-color);
  margin: 0;
}

.ai-chat-add-file input {
  display: none;
}

.ai-chat-image-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  max-height: 100px;
  overflow-y: auto;
}

.ai-chat-image-preview img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 4px;
}

.ai-chat-character-counter {
  display: flex;
  justify-content: space-between;
  width: 90%;
  font-size: 12px;
  color: var(--text-color);
  margin: 0;
}

.preview-image-container {
  position: relative;
  display: inline-block;
}

.image-placeholder-text {
  position: absolute;
  bottom: -20px;
  left: 0;
  font-size: 0.7em;
  color: var(--text-color);
  background: rgba(255, 255, 255, 0.9);
  padding: 2px 4px;
  border-radius: 2px;
}

.message-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 0.8em;
  color: var(--text-color);
}

.message-timestamp {
  color: var(--text-color-faded);
  font-size: 0.7rem;
}

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

.message-container-restored {
  background: var(--card-background-dark);
  border-radius: 12px;
  padding: 4px 8px;
}

.message-restored-from {
  color: var(--primary-color);
  width: fit-content;
  font-size: 0.7rem;
  border-radius: 12px;
}

.message-text {
  white-space: pre-wrap;
  word-break: break-word;
  hyphens: auto;
}

.existing-images {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
  max-height: 400px;
  overflow-y: auto;
  padding: 4px;
}

.existing-image-item {
  position: relative;
  aspect-ratio: 1;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease;
}

.existing-image-item:hover {
  border-color: var(--primary-color);
}

.existing-image-item.selected {
  border-color: var(--primary-color);
  background: rgba(var(--primary-color-rgb), 0.1);
}

.existing-image-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.upload-new-tile {
  aspect-ratio: 1;
  border: 2px dashed #ccc;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.upload-new-tile:hover {
  border-color: var(--primary-color);
  background: rgba(var(--primary-color-rgb), 0.1);
}

.plus-icon {
  font-size: 24px;
  color: #666;
}

.version-download-btn {
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  color: var(--primary-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s;
}

.version-download-btn:hover {
  background: #e3f2fd;
}

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

.version-download-btn svg {
  transition: transform 0.2s;
}

.version-download-btn:hover svg {
  transform: translateY(1px);
}

#ai-chat-help {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--background-color);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  color: var(--text-color);
  cursor: pointer;
  transition: all 0.2s ease;
}

#ai-chat-help:hover {
  background: var(--card-background);
}

.ai-chat-buttons {
  display: flex;
  gap: 8px;
  align-items: center;
}

#ai-chat-send {
  flex: 1;
}

.help-content-container {
  background: white;
  padding: 20px;
  border-radius: 8px;
  max-width: 800px;
  width: max-content;
  overflow-y: auto;
  overflow-x: hidden;
}

.help-content {
  color: var(--text-color);
}

.help-content h4 {
  color: var(--text-color);
  margin: 20px 0 12px 0;
  font-size: 15px;
  font-weight: 500;
}

.help-content h4:first-child {
  margin-top: 0;
}

.help-content ul {
  margin: 0;
  padding-left: 20px;
}

.help-content li {
  margin: 8px 0;
  color: var(--text-color-faded);
  font-size: 14px;
  line-height: 1.5;
}

.ai-chat-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.version-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.8em;
  margin-left: 8px;
  cursor: pointer;
  transition: background-color 0.2s;
  background: #e3f2fd;
  color: var(--primary-color);
  cursor: default;
}

.version-badge-blue {
  background-color: #e6f0ff;
  color: #0052cc;
}

.version-badge-green {
  background-color: #e3fcef;
  color: #006644;
}

#publish-button {
  font-size: 12px;
  padding: 4px 12px;
  cursor: pointer;
}

#publish-button.unpublish {
  color: #de350b;
  border-color: #de350b;
}

#publish-button.unpublish:hover {
  background-color: #ffebe6;
}

.version-actions {
  display: flex;
  gap: 4px;
  margin-top: 6px;
  align-items: center;
  justify-content: flex-start;
}

.version-publish-btn {
  min-width: 80px;
  text-align: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  border: 1px solid var(--border-color);
  background: var(--background-color);
  color: var(--text-color);
  transition: all 0.2s ease;
}

.version-publish-btn:hover {
  background: var(--card-background);
}

.version-publish-btn.publish-success {
  background: #c8e6c9;
  border-color: #81c784;
  color: #2e7d32;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.version-publish-btn.publish-success:hover {
  background: #a5d6a7;
}

.version-publish-btn.publish-success svg {
  margin-top: -1px;
}

.version-unpublish-btn {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  border: 1px solid #de350b;
  color: var(--text-color);
  background: darkred;
  transition: all 0.2s;
}

.version-unpublish-btn:hover {
  background: #ffebe6;
  color: #de350b;
}

.version-unpublish-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.ai-suggestions-container {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
  align-items: flex-start;
  justify-content: flex-start;
}

.ai-suggestions-title {
  font-size: 12px;
  color: var(--text-color);
}

.ai-suggestions {
  display: flex;
  gap: 4px;
  margin-top: 2px;
  align-items: center;
  justify-content: flex-start;
}

.ai-suggestion-btn {
  padding: 2px 4px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  background: var(--background-color);
  border: 1px solid var(--border-color);
  color: var(--text-color);
  transition: all 0.2s ease;
}

.ai-suggestion-btn:hover {
  background: var(--card-background);
}

.editor-layout {
  display: flex;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

.preview-container {
  position: relative;
  width: 100%;
  height: 100%;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}

.preview-container.mobile-view {
  width: 320px; /* Reduced from 390px to 320px */
  margin: 0 auto;
  height: 100%;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  background: #f5f5f5;
  padding: 10px 0; /* Reduced padding */
}

#preview-frame {
  width: 100%;
  height: 100%;
  border: none;
  background: white;
  transition: all 0.3s ease;
}

.preview-container.mobile-view #preview-frame {
  height: calc(100% - 20px); /* Adjusted for new padding */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.preview-url-bar {
  padding: 8px;

  background: var(--card-background);
  font-family: monospace;
  font-size: 14px;
  color: var(--text-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border: 1px solid var(--border-color);
  gap: 8px;
  border-radius: 4px;
}

.preview-url-components {
  display: flex;
  align-items: center;
  flex: 1;
  font-family: monospace;
  font-size: 14px;
  color: var(--text-color);
  background: var(--background-color);
  padding: 6px 8px;
  border-radius: 4px;
  border: 1px solid var(--border-color);
}

.preview-url-domain {
  color: var(--text-color-faded);

  white-space: nowrap;
}

.preview-url-hash-container {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.preview-url-path-input {
  border: none;
  background: transparent;
  font-family: monospace;
  font-size: 14px;
  color: var(--text-color);
  width: 100%;
  padding: 0 4px;
}

.preview-url-path-input:focus {
  outline: none;
}

.preview-url-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.preview-url-home-button,
.preview-url-refresh-button,
.preview-url-get-domain-button,
.preview-url-invite-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: var(--background-color);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  cursor: pointer;
  color: var(--text-color);
  transition: all 0.2s ease;
}

.preview-url-get-domain-button {
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  height: 32px;
  width: 150px;
}

.preview-url-invite-button {
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  height: 32px;
  width: 150px;
}

.preview-url-home-button:hover,
.preview-url-refresh-button:hover,
.preview-url-get-domain-button:hover,
.preview-url-invite-button:hover {
  background: var(--card-background);
}

.preview-url-home-button svg,
.preview-url-refresh-button svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}

.preview-url-home-button:hover svg,
.preview-url-refresh-button:hover svg {
  transform: scale(1.1);
}

.add-selected-btn,
.add-reference-btn,
.send-screenshot-btn {
  padding: 8px 16px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}

.add-selected-btn:disabled,
.add-reference-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.image-previews {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
  border-top: 1px solid #eee;
}

.image-preview {
  position: relative;
  width: 80px;
  height: 80px;
}

.image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.image-preview .image-type {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: 10px;
  padding: 2px 4px;
  text-align: center;
}

.image-preview .image-type.ref {
  background: rgba(25, 118, 210, 0.7);
}

.image-preview .remove-image {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ff4444;
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
}

.image-preview .remove-image:hover {
  background: #ff0000;
}

.close-selector-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  padding: 0 8px;
  color: #666;
}

.close-selector-btn:hover {
  color: #333;
}

.check-domain-button {
  padding: 8px 16px;
  height: 36px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.check-domain-button {
  background: var(--primary-color);
  color: white;
  min-width: 140px;
}

.check-domain-button:hover {
  background: var(--primary-color-dark);
}

.check-domain-button:disabled {
  background: var(--disabled-color);
  cursor: not-allowed;
}

.buy-domain-button {
  padding: 8px 16px;
  height: 36px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.buy-domain-button {
  background: #4caf50;
  color: white;
  min-width: 100px;
}

.buy-domain-button:hover {
  background: #43a047;
}

.buy-domain-button:disabled {
  background: var(--disabled-color);
  opacity: 0.7;
  cursor: not-allowed;
}

.buy-domain-button.success {
  background: #43a047;
  pointer-events: none;
}

.buy-domain-button.error {
  background: #d32f2f;
}

.buy-domain-button.error:hover {
  background: #c62828;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes slideIn {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

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

/* Add responsive styles */
@media (max-width: 768px) {
  .preview-url-hash {
    color: var(--text-color-faded);
  }

  .preview-url-path-input {
    flex: 1;
    min-width: 0;
    font-size: 12px;
  }

  /* Mobile container adjustments */
  .preview-container.mobile-view {
    width: 100%;
    padding: 0;
    box-shadow: none;
    background: none;
  }

  .preview-container.mobile-view #preview-frame {
    border-radius: 0;
    height: 100%;
    box-shadow: none;
  }

  .preview-url-viewport-toggle {
    display: none; /* Hide toggle on mobile devices */
  }
}

.versions-loading {
  text-align: center;
  padding: 20px;
  color: #666;
}

.error-message {
  color: #d32f2f;
  text-align: center;
  padding: 10px;
}

.delete-image-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  border-radius: 12px;
  background: rgba(255, 0, 0, 0.8);
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  opacity: 0;
  transition:
    opacity 0.2s,
    background-color 0.2s;
  z-index: 2;
}

.existing-image-item:hover .delete-image-btn {
  opacity: 1;
}

.delete-image-btn:hover {
  background: rgb(255, 0, 0);
}

.delete-confirm-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 1;
}

.delete-confirm-overlay.show {
  opacity: 1;
}

.delete-confirm-buttons {
  display: flex;
  gap: 8px;
}

.delete-confirm-btn,
.delete-cancel-btn {
  padding: 4px 8px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-size: 12px;
  transition: background-color 0.2s;
}

.delete-confirm-btn {
  background: #ff4444;
  color: white;
}

.delete-confirm-btn:hover {
  background: #ff0000;
}

.delete-cancel-btn {
  background: #ffffff;
  color: #333;
}

.delete-cancel-btn:hover {
  background: #f0f0f0;
}

/* Add loading animation for delete button */
.delete-image-btn.loading {
  opacity: 1;
  background: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.delete-image-btn.loading::after {
  content: "";
  width: 12px;
  height: 12px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  border-top-color: transparent;
  animation: spin 1s linear infinite;
  display: block;
}

/* Hide the × when loading */
.delete-image-btn.loading::before {
  display: none;
}

.reference-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: bold;
  background: #4caf50;
  color: white;
  z-index: 1;
}

.reference-badge.invalid {
  background: #9e9e9e;
}

.image-selector-actions {
  display: flex;
  gap: 8px;
  margin: 16px 0;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.image-selector-actions button {
  padding: 8px 16px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}

.image-selector-reference-info {
  font-size: 13px;
  color: var(--text-color-faded);
  line-height: 1.4;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
}

/* Domain Modal Styles */
.domain-search-container {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.domain-input-group {
  position: relative;
  flex: 1;
}

.domain-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 14px;
  background: var(--card-background);
  color: var(--text-color);
  height: 36px;
}

.domain-input:focus {
  outline: none;
  border-color: var(--primary-color);
}

.domain-results {
  animation: fadeIn 0.3s ease;
}

.primary-result {
  margin-bottom: 20px;
}

.domain-result-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px;
  border-radius: 6px;
  background: var(--card-background);
  border: 1px solid var(--border-color);
  margin-bottom: 8px;
}

.domain-name {
  flex: 1;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-color);
}

.domain-name.available {
  color: #4caf50;
}

.domain-name.unavailable {
  color: #ffd700;
}

.domain-message {
  font-size: 13px;
  color: var(--text-color-faded);
}

.domain-price {
  font-size: 13px;
  color: var(--text-color-faded);
  white-space: nowrap;
}

.similar-domains h3 {
  margin: 0 0 16px 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-color);
}

.similar-domains p {
  font-size: 13px;
  color: var(--text-color-faded);
  width: 100%;
  text-align: center;
  line-height: 1.5;
}

/* Contact form styles */
.contact-info-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: fadeIn 0.3s ease;
  max-width: 600px;
  margin: 0 auto;
}

.contact-info-form h3 {
  margin-bottom: 5px;
  color: var(--text-color);
}

.form-note {
  color: var(--text-color-faded);
  font-size: 0.9em;
  margin-bottom: 8px;
}

.form-group {
  margin-bottom: 12px;
}

.form-row {
  display: flex;
  gap: 15px;
}

.form-row .form-group {
  flex: 1;
}

.contact-info-form label {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
  font-size: 0.9em;
  color: var(--text-color-faded);
}

.contact-info-form input,
.contact-info-form select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: var(--card-background-dark);
  color: var(--text-color);
  font-size: 14px;
}

.contact-info-form input:focus,
.contact-info-form select:focus {
  outline: none;
  border-color: var(--primary-color);
}

.contact-info-form .error {
  border: 1px solid #e53935;
  background-color: rgba(229, 57, 53, 0.1);
}

.error-text {
  color: #e53935;
  font-size: 12px;
  margin-top: 4px;
}

.form-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 25px;
}

.form-actions button {
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.form-actions .back-button {
  background: var(--card-background-dark);
  border: 1px solid var(--border-color);
  color: var(--text-color);
}

.form-actions .back-button:hover {
  background: var(--card-background);
}

.form-actions .domain-purchase-submit-button {
  background: var(--secondary-color);
  border: none;
  color: white;
  width: 230px;
  max-width: 85%;
}

.form-actions .domain-purchase-submit-button:hover {
  background: var(--primary-color);
}

.form-actions .domain-purchase-submit-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.domain-purchase-success {
  text-align: center;
  padding: 20px;
  animation: fadeIn 0.3s ease;
}

.domain-purchase-success h3 {
  color: #4caf50;
  margin-bottom: 15px;
}

.domain-purchase-success p {
  margin-bottom: 10px;
  color: var(--text-color);
  line-height: 1.5;
}

.domain-purchase-success strong {
  color: var(--primary-color);
}

.close-modal-button {
  margin-top: 20px;
  padding: 8px 16px;
  background: var(--secondary-color);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.close-modal-button:hover {
  background: var(--primary-color);
}

.selected-domain {
  margin-bottom: 16px;
}

.selected-domain-info {
  padding: 10px;
  background: rgba(var(--primary-color-rgb), 0.05);
  border-radius: 6px;
  border: 1px solid rgba(var(--primary-color-rgb), 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.selected-domain .domain-name {
  font-size: 16px;
  font-weight: 500;
}

.selected-domain .domain-price {
  font-size: 14px;
}

/* Phone input group styling */
.phone-input-group {
  display: flex;
  gap: 8px;
  align-items: center;
}

.phone-country-selector {
  width: 60px; /* Reduced from 120px to 60px */
  flex-shrink: 0;
}

.phone-input-group input[type="tel"] {
  flex: 1;
}

/* Make the phone country selector more compact */
.phone-country-selector .country-selector input {
  text-align: center;
  padding-left: 8px;
  padding-right: 8px;
}

/* Ensure phone input group errors appear below the entire group */
.phone-input-group + .error-text {
  display: block;
  margin-top: 4px;
}

/* Domain purchase timeline styles */
.timeline-unverified-contact-notice {
  background: rgba(255, 215, 0, 0.05);
  border: 1px solid rgba(255, 215, 0, 0.2);
  border-left: 4px solid #ffd700;
  padding: 16px;
  margin: 16px 0;
  border-radius: 4px;
  text-align: left;
  font-size: 14px;
}

.verification-email-address {
  margin-top: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

.verification-sender-info {
  margin-top: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

.verification-sender-info ul {
  margin: 8px 0 0 24px;
}

.verification-tip {
  margin-top: 12px;
  font-style: italic;
  opacity: 0.8;
}

.domain-timeline-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 0;
  max-width: 600px;
  margin: 0 auto;
  animation: fadeIn 0.3s ease;
}

.domain-timeline-header {
  text-align: center;
  margin-bottom: 20px;
}

.domain-timeline-header h3 {
  margin-bottom: 5px;
  color: var(--text-color);
}

.domain-timeline-header .domain-name {
  font-size: 18px;
  font-weight: 600;
  color: var(--primary-color);
  filter: brightness(1.2);
  background: rgba(var(--primary-color-rgb), 0.08);
  padding: 8px 16px;
  border-radius: 6px;
  margin: 10px auto;
  max-width: fit-content;
  border: 1px solid rgba(var(--primary-color-rgb), 0.2);
}

.domain-timeline {
  display: flex;
  flex-direction: column;
  position: relative;
  margin-left: 20px;
}

.domain-timeline::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border-color);
  transform: translateX(-50%);
}

.timeline-step {
  position: relative;
  padding: 0 0 30px 40px;
}

.timeline-step:last-child {
  padding-bottom: 0;
}

.timeline-step-marker {
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--card-background);
  border: 2px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.timeline-step.completed .timeline-step-marker {
  background: #4caf50;
  border-color: #43a047;
  color: white;
}

.timeline-step.active .timeline-step-marker {
  background: var(--primary-color);
  border-color: var(--primary-color-dark);
  color: white;
  box-shadow: 0 0 0 4px rgba(var(--primary-color-rgb), 0.3);
}

.timeline-step.error .timeline-step-marker {
  background: #ffd700;
  border-color: #e6c300;
  color: var(--text-color);
}

.timeline-step-content {
  padding: 15px;
  border-radius: 6px;
  background: var(--card-background);
  border: 1px solid var(--border-color);
}

.timeline-step.active .timeline-step-content {
  border-color: var(--primary-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.timeline-step.error .timeline-step-content {
  border-color: #ffd700;
  background: rgba(255, 215, 0, 0.05);
}

.timeline-step-title {
  font-weight: 500;
  margin-bottom: 5px;
  color: var(--text-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.timeline-step.active .timeline-step-title {
  color: var(--primary-color);
}

.timeline-step-title .button-spinner {
  margin: 0;
}

.timeline-step.error .timeline-step-title {
  color: #ffd700;
}

.timeline-step-description {
  font-size: 13px;
  color: var(--text-color-faded);
  line-height: 1.4;
}

.timeline-step-time {
  font-size: 12px;
  color: var(--text-color-faded);
  font-style: italic;
  margin-top: 5px;
}

.timeline-step.active .timeline-step-time {
  font-weight: 500;
}

.timeline-step.error .timeline-step-description {
  color: var(--text-color);
}

.timeline-step.error .error-text {
  color: var(--text-color);
  background: rgba(255, 215, 0, 0.1);
  padding: 8px;
  border-radius: 4px;
  margin-top: 8px;
  border-left: 3px solid #ffd700;
}

.timeline-step-time {
  font-size: 12px;
  color: var(--text-color-faded);
  font-style: italic;
  margin-top: 5px;
}

.timeline-step.active .timeline-step-time {
  font-weight: 500;
}

.domain-timeline-actions {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 25px;
}

.domain-timeline-actions button {
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.domain-refresh-button {
  background: var(--secondary-color);
  border: none;
  color: white;
  width: 125px;
}

.domain-refresh-button:hover {
  background: var(--primary-color);
}

.domain-back-button {
  background: var(--card-background-dark);
  border: 1px solid var(--border-color);
  color: var(--text-color);
  margin-right: 10px;
}

.domain-back-button:hover {
  background: var(--card-background);
}

/* Ongoing domain registration notice - adjusted for new position */
.ongoing-registration-notice {
  background: rgba(var(--primary-color-rgb), 0.05);
  border-radius: 6px;
  border: 1px solid rgba(var(--primary-color-rgb), 0.2);
  padding: 16px;
  margin: 0 0 20px 0; /* Changed top margin to 0 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  animation: fadeIn 0.3s ease;
}

.registration-status {
  display: flex;
  align-items: center;
  gap: 15px;
}

.registration-status-unverified-contact-notice {
  border: 1px solid #ffd700;
  background: rgba(255, 215, 0, 0.05);
  padding: 5px;
  border-radius: 4px;
  margin-top: 10px;
  text-align: center;
}

.status-icon {
  width: 40px;
  height: 40px;
  min-width: 40px; /* Prevent shrinking */
  min-height: 40px; /* Prevent shrinking */
  flex-shrink: 0; /* Prevent flex shrinking */
  border-radius: 50%;
  background: rgba(var(--primary-color-rgb), 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.status-text h3 {
  margin: 0 0 5px 0;
  font-size: 15px;
  color: var(--primary-color);
}

.status-text p {
  margin: 0;
  color: var(--text-color);
  font-size: 14px;
}

.view-progress-button {
  background: var(--primary-color);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.view-progress-button:hover {
  background: var(--primary-color-dark);
}

/* Active domain notice styling */
.ongoing-registration-notice.active-domain-notice {
  background: rgba(75, 181, 67, 0.05);
  border: 1px solid rgba(75, 181, 67, 0.2);
  gap: 20px; /* Add gap between content and button */
}

.ongoing-registration-notice.active-domain-notice .status-icon {
  background: rgba(75, 181, 67, 0.1);
}

.ongoing-registration-notice.active-domain-notice .status-text h3 {
  color: #4bb543;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ongoing-registration-notice.active-domain-notice .checkmark {
  color: #4bb543;
  font-size: 20px;
}

.domain-link {
  color: var(--primary-color);
  filter: brightness(1.3);
  text-decoration: none;
  font-weight: 600;
}

.domain-link:hover {
  text-decoration: underline;
  filter: brightness(1.5);
}

.view-details-button {
  background: #4bb543;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s ease;
  flex-shrink: 0; /* Prevent button from shrinking */
}

.view-details-button:hover {
  background: #429a3c;
}

/* Improve mobile layout for domain notifications */
@media (max-width: 768px) {
  .ongoing-registration-notice {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    padding: 16px;
  }

  .ongoing-registration-notice.active-domain-notice .status-text h3 {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .ongoing-registration-notice.active-domain-notice .domain-link {
    margin-top: 8px;
    display: block;
    text-align: center;
  }

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

  .registration-status {
    width: 100%;
  }

  .status-text h3 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
  }

  .view-details-button,
  .view-progress-button {
    align-self: stretch; /* Make button full width on mobile */
    text-align: center;
  }
}

/* Error domain notice styling */
.ongoing-registration-notice.error-domain-notice {
  background: rgba(255, 215, 0, 0.05);
  border: 1px solid rgba(255, 215, 0, 0.2);
  gap: 20px;
}

.ongoing-registration-notice.error-domain-notice .status-icon {
  background: rgba(255, 215, 0, 0.1);
}

.ongoing-registration-notice.error-domain-notice .status-text h3 {
  color: #ffd700;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ongoing-registration-notice.error-domain-notice .error-mark {
  color: #ffd700;
  font-size: 24px;
  font-weight: bold;
}

.view-error-details-button {
  background: #e6c300;
  color: var(--text-color);
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s ease;
  flex-shrink: 0;
}

.view-error-details-button:hover {
  background: #ffdf33;
}

.preview-url-viewport-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: var(--background-color);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  cursor: pointer;
  color: var(--text-color);
  transition: all 0.2s ease;
}

.preview-url-viewport-toggle:hover {
  background: var(--card-background);
}

.preview-url-viewport-toggle svg {
  width: 16px;
  height: 16px;
}

.orientation-toggle-container {
  display: none;
  padding: 8px 12px;
  background-color: var(--background-color);
  align-self: center;
  margin-top: 1rem;
  gap: 10px; /* Add space between buttons */
  flex-wrap: wrap; /* Allow wrapping on small screens */
  justify-content: center; /* Center buttons */
}

.preview-url-orientation-toggle,
.preview-url-device-toggle {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background-color: var(--background-color);
  cursor: pointer;
  font-size: 13px;
  color: var(--text-color);
  transition: background-color 0.2s;
}

.preview-url-orientation-toggle:hover,
.preview-url-device-toggle:hover {
  background-color: var(--card-background) !important;
}

.mobile-rotation-instruction {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  padding: 10px;
  background-color: var(--card-background);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-color);
  font-size: 14px;
  text-align: center;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    opacity: 0.8;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.8;
  }
}

.mobile-rotation-instruction svg {
  transform: rotate(90deg);
}

.rotation-suggestion {
  text-align: center;
  padding: 12px;
  margin: auto;
  position: absolute;
  bottom: 20%;
  left: 0;
  right: 0;
  color: var(--text-color);
  background-color: var(--bg-secondary);
  border-radius: 4px;
  font-size: 14px;
  max-width: 90%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.rotation-suggestion svg {
  vertical-align: middle;
  margin-right: 5px;
}

/* Contact type selection styling with fixed widths */
.contact-type-container {
  margin-bottom: 12px;
}

.contact-type-selection {
  border-radius: 4px;
  padding: 6px 12px;
}

.contact-type-selection label {
  display: block;
  margin-bottom: 0;
  font-weight: 500;
  font-size: 0.9em;
  color: var(--text-color-faded);
}

.contact-type-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.contact-type-option {
  position: relative;
  padding: 6px 12px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: var(--card-background);
  font-size: 12px;
  display: flex;
  align-items: center;
}

.contact-type-option:hover {
  border-color: var(--primary-color);
  background: rgba(var(--primary-color-rgb), 0.05);
}

.contact-type-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.contact-type-option span {
  position: relative;
  padding-left: 0;
  transition: padding-left 0.2s;
}

.contact-type-option input[type="radio"]:checked + span {
  color: var(--primary-color);
  font-weight: 500;
  padding-left: 16px; /* Make space for checkmark */
}

.contact-type-option input[type="radio"]:checked + span::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.error-text {
  color: #e53935;
  font-size: 12px;
  margin-top: 4px;
  display: block;
}

/* Organization field styling */
.organization-fields {
  margin-bottom: 12px;
}

/* Invite Modal Styles */
.invite-form {
  padding: 20px 0;
}

.invite-form p {
  margin-bottom: 20px;
  color: var(--text-color-faded);
  font-size: 14px;
  font-family: var(--font-family);
}

.invite-form .form-group {
  margin-bottom: 20px;
}

.invite-form label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  font-size: 0.9em;
  color: var(--text-color-faded);
  font-family: var(--font-family);
}

.invite-form input[type="email"] {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: var(--card-background-dark);
  color: var(--text-color);
  font-size: 14px;
  font-family: var(--font-family);
  transition: border-color 0.2s ease;
}

.invite-form input[type="email"]:focus {
  outline: none;
  border-color: var(--primary-color);
}

.invite-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.invite-submit-btn {
  background: var(--secondary-color);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--font-family);
}

.invite-submit-btn:hover:not(:disabled) {
  background: var(--primary-color);
}

.invite-submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.invite-error {
  background: rgba(229, 57, 53, 0.1);
  color: #e53935;
  padding: 12px;
  border-radius: 4px;
  margin-top: 16px;
  font-size: 12px;
  border: 1px solid #e53935;
  display: none;
  font-family: var(--font-family);
}

.invite-success {
  background: rgba(76, 175, 80, 0.1);
  color: #4caf50;
  padding: 12px;
  border-radius: 4px;
  margin-top: 16px;
  font-size: 14px;
  border: 1px solid #4caf50;
  display: none;
  font-family: var(--font-family);
}

.admin-dashboard {
  padding: 1rem;
  width: 100%;
  margin: 0 auto;
  max-width: 1200px;
}

.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.stat-card {
  background: var(--card-background);
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.stat-card h3 {
  margin: 0 0 0.5rem 0;
  color: var(--text-color);
}

.stat-card span {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--text-color);
  display: block;
  margin-bottom: 0.5rem;
}

.stat-24h {
  font-size: 0.875rem;
  color: var(--text-color);
  opacity: 0.8;
}

.stat-24h span {
  font-size: 0.875rem;
  display: inline;
  margin: 0;
}

/* Common table styles */
.users-table-container,
.websites-table-container {
  margin-top: 2rem;
  background: var(--card-background);
  border-radius: 8px;
  padding: 1rem;
  width: 100%;
}

.users-table-container h2,
.websites-table-container h2 {
  margin: 0 0 1rem 0;
  color: var(--text-color);
}

.users-table,
.websites-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card-background);
  border-radius: 8px;
  overflow: auto;
}

.users-table th,
.users-table td,
.websites-table th,
.websites-table td {
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-color);
}

.users-table th,
.websites-table th {
  background: var(--background-color);
  font-weight: 600;
}

/* Common button styles for all admin actions */
.edit-credits-btn,
.view-website-btn,
.edit-website-btn,
.delete-user-btn,
.delete-website-btn {
  padding: 0.5rem 1rem;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-weight: 500;
  font-size: 0.875rem;
  transition: background-color 0.2s;
  text-decoration: none;
  display: inline-block;
  margin-right: 0.5rem;
  min-width: 80px;
  text-align: center;
  height: 32px;
  line-height: 1;
}

/* Primary action buttons (edit credits, view, edit) */
.edit-credits-btn,
.view-website-btn,
.edit-website-btn {
  background: var(--primary-color);
  color: white;
}

.edit-credits-btn:hover,
.view-website-btn:hover,
.edit-website-btn:hover {
  background: var(--secondary-color);
}

/* Danger button (delete) */
.delete-website-btn,
.delete-user-btn {
  background: #dc2626;
  color: white;
}

.delete-website-btn:hover,
.delete-user-btn:hover {
  background: #b91c1c;
}

/* Cost breakdown button */
.toggle-cost-btn {
  padding: 0.5rem 1rem;
  border-radius: 4px;
  border: 1px solid var(--border-color); /* Subtle border */
  background: var(--background-color); /* Use background color */
  color: var(--text-color);
  cursor: pointer;
  font-weight: 500;
  font-size: 0.875rem;
  transition:
    background-color 0.2s,
    border-color 0.2s;
  text-decoration: none;
  display: inline-block;
  min-width: 80px; /* Match other buttons */
  text-align: center;
  height: 32px; /* Match other buttons */
  line-height: 1; /* Adjust line height */
}

.toggle-cost-btn:hover {
  background: var(--background-hover); /* Use hover background */
  border-color: var(--primary-color); /* Highlight border on hover */
}

/* Search bar styles */
.admin-controls {
  margin: 2rem 0;
}

.search-bar input {
  padding: 0.75rem 1rem;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  width: 100%;
  max-width: 600px;
  font-size: 1rem;
  background: var(--card-background);
  color: var(--text-color);
}

/* Modal styles */
.admin-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.admin-modal-content {
  background: var(--card-background);
  padding: 2rem;
  border-radius: 8px;
  width: 100%;
  max-width: 500px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.admin-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.admin-modal-header h2 {
  margin: 0;
  color: var(--text-color);
}

.admin-modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--text-color);
  padding: 0.5rem;
}

.admin-modal-actions {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
}

.admin-modal-actions button {
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-weight: 500;
}

.update-credits-btn {
  background: var(--primary-color);
  color: white;
}

.admin-modal-cancel {
  background: var(--card-background);
  border: 1px solid var(--border-color) !important;
  color: var(--text-color);
}

/* Loading state */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

.spinner {
  border: 4px solid var(--border-color);
  border-top: 4px solid var(--primary-color);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.users-section,
.websites-section {
  margin-top: 2rem;
}

.users-section h2,
.websites-section h2 {
  margin-bottom: 1rem;
  color: var(--text-primary-color);
}

.admin-controls {
  margin: 1rem 0;
}

/* Update the actions column width */
.users-table td.actions,
.websites-table td.actions {
  white-space: nowrap;
  min-width: 280px;
}

/* Website action buttons */
.view-website-btn,
.edit-website-btn,
.delete-website-btn {
  padding: 0.5rem 1rem;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.2s;
  text-decoration: none;
  display: inline-block;
  margin-right: 0.5rem;
}

.view-website-btn {
  background: var(--primary-color);
  color: white;
}

.view-website-btn:hover {
  background: var(--secondary-color);
}

.edit-website-btn {
  background: var(--primary-color);
  color: white;
}

.edit-website-btn:hover {
  background: var(--secondary-color);
}

/* Pagination styles */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color);
}

.pagination button {
  padding: 0.5rem 1rem;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  background: var(--card-background);
  color: var(--text-color);
  cursor: pointer;
  font-size: 0.875rem;
  transition: all 0.2s;
}

.pagination button:hover:not(:disabled) {
  background: var(--background-color);
}

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

.pagination-info {
  color: var(--text-color);
  font-size: 0.875rem;
}

/* Mobile responsiveness */
@media screen and (max-width: 768px) {
  .admin-dashboard {
    padding: 1rem;
  }

  .admin-stats {
    grid-template-columns: 1fr;
  }

  .search-bar input {
    width: 100%;
    max-width: none;
  }

  /* Table responsiveness */
  .users-table,
  .websites-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  .users-table th,
  .users-table td,
  .websites-table th,
  .websites-table td {
    padding: 0.75rem;
  }

  /* Make action buttons stack on very small screens */
  @media screen and (max-width: 480px) {
    .users-table td.actions,
    .websites-table td.actions {
      display: flex;
      flex-direction: row;
      gap: 0.5rem;
      min-width: 280px;
    }

    .edit-credits-btn,
    .view-website-btn,
    .edit-website-btn,
    .delete-website-btn {
      margin-right: 0;
    }

    /* Make tables horizontally scrollable */
    .users-table-container,
    .websites-table-container {
      overflow-x: auto;
      padding: 1rem 0;
    }

    .users-table,
    .websites-table {
      min-width: 100%;
    }
  }

  /* Pagination responsiveness */
  .pagination {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .pagination button {
    flex: 1;
    min-width: 100px;
  }

  .pagination-info {
    width: 100%;
    text-align: center;
    order: -1;
  }

  /* Modal responsiveness */
  .admin-modal-content {
    margin: 1rem;
    width: auto;
  }

  .admin-modal-actions {
    flex-direction: column;
    gap: 0.5rem;
  }

  .admin-modal-actions button {
    width: 100%;
  }

  /* Stats cards */
  .stat-card {
    padding: 0.75rem;
  }

  .stat-card h3 {
    font-size: 0.875rem;
  }

  .stat-card span {
    font-size: 1.25rem;
  }

  /* Section titles */
  .users-section h2,
  .websites-section h2 {
    font-size: 1.25rem;
  }
}

/* Table scroll shadows */
.users-table-container,
.websites-table-container {
  position: relative;
  overflow: auto;
}

/* .users-table-container::after,
.websites-table-container::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 15px;
  background: linear-gradient(to right, transparent, var(--card-background));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}

.users-table-container.has-scroll::after,
.websites-table-container.has-scroll::after {
  opacity: 1;
} */

.admin-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

.admin-table th,
.admin-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.admin-table th {
  background-color: var(--background-color);
  font-weight: bold;
}

.admin-table tr:hover {
  background-color: var(--background-color);
}

/* Error inspection styles */
.errors-modal .admin-modal-content {
  width: 90%;
  max-width: 90vw;
  height: 90vh;
  margin: 5vh auto;
  overflow-y: auto;
}

.errors-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.error-item {
  background: var(--card-background);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 1.5rem;
}

.error-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-color);
}

.error-date {
  color: var(--text-secondary-color);
  font-size: 0.875rem;
}

.error-version {
  font-weight: 600;
  color: var(--primary-color);
}

.error-message,
.error-changes,
.ai-response {
  margin-bottom: 1rem;
}

.error-message strong,
.error-changes strong,
.ai-response strong {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--text-color);
}

.error-message pre,
.error-changes pre,
.ai-response pre {
  background: var(--background-color);
  padding: 1rem;
  border-radius: 4px;
  overflow-x: auto;
  white-space: pre-wrap;
  font-family: monospace;
  font-size: 0.875rem;
  color: var(--text-color);
}

.toggle-ai-response {
  background: var(--primary-color);
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.875rem;
  transition: background-color 0.2s;
}

.toggle-ai-response:hover {
  background: var(--secondary-color);
}

.inspect-errors-btn {
  background: var(--primary-color);
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  margin: 0 0.5rem;
  font-size: 0.875rem;
  transition: background-color 0.2s;
}

.inspect-errors-btn:hover {
  background: var(--secondary-color);
}

/* Mobile responsiveness for errors modal */
@media screen and (max-width: 768px) {
  .errors-modal .admin-modal-content {
    width: 95%;
    max-width: 95vw;
    height: 95vh;
    margin: 2.5vh auto;
  }

  .error-header {
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
  }

  .error-item {
    padding: 1rem;
  }

  .error-message pre,
  .error-changes pre,
  .ai-response pre {
    padding: 0.75rem;
    font-size: 0.8125rem;
  }
}

/* Add these new styles */
.error-overview {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

.error-message pre,
.ai-response-summary pre {
  max-height: 150px;
  overflow-y: auto;
  background: var(--background-color);
  padding: 1rem;
  border-radius: 4px;
  margin: 0;
}

.code-split {
  display: grid;
  grid-template-columns: 50% 50%;
  gap: 1rem;
  width: 100%;
}

.code-before,
.code-after {
  width: 100%;
}

.code-before pre,
.code-after pre {
  height: 600px;
  overflow-y: auto;
  padding: 1rem;
  margin: 0;
  background: var(--background-color);
  border-radius: 4px;
  white-space: pre;
  width: 100%;
  box-sizing: border-box;
}

.code-tabs {
  margin-bottom: 1rem;
}

.code-tab {
  padding: 0.5rem 1rem;
  margin-right: 0.5rem;
  border: none;
  border-radius: 4px;
  background: var(--background-color);
  cursor: pointer;
}

.code-tab.active {
  background: var(--primary-color);
  color: white;
}

/* Mobile responsiveness */
@media screen and (max-width: 768px) {
  .error-overview {
    grid-template-columns: 1fr;
  }

  .code-split {
    grid-template-columns: 1fr;
  }

  .code-before pre,
  .code-after pre {
    height: 300px;
  }
}

.error-message {
  margin-bottom: 1rem;
}

.error-message .truncated-text {
  max-height: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  background: var(--background-color);
  padding: 1rem;
  border-radius: 4px;
  white-space: nowrap;
}

.ai-response-full {
  margin-bottom: 1rem;
}

.ai-response-full pre {
  height: 700px;
  overflow-y: auto;
  padding: 1rem;
  margin: 0;
  background: var(--background-color);
  border-radius: 4px;
  white-space: pre;
  width: 100%;
  box-sizing: border-box;
}

.code-section {
  border-top: 1px solid var(--border-color);
  padding-top: 1rem;
}

.toggle-code-btn {
  width: 100%;
  padding: 1rem;
  background: var(--background-color);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: 1rem;
  text-align: left;
  font-weight: bold;
}

.toggle-code-btn:hover {
  background: var(--background-hover);
}

.current-code {
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 1rem;
}

.toggle-current-code-btn {
  width: 100%;
  padding: 1rem;
  background: var(--background-color);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: 1rem;
  text-align: left;
  font-weight: bold;
}

.toggle-current-code-btn:hover {
  background: var(--background-hover);
}

.current-code pre {
  height: 700px;
  overflow-y: auto;
  padding: 1rem;
  margin: 0;
  background: var(--background-color);
  border-radius: 4px;
  white-space: pre;
  width: 100%;
  box-sizing: border-box;
}

/* Add these styles */
.inspect-errors-btn.loading {
  position: relative;
  color: transparent;
}

.inspect-errors-btn.loading::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: var(--primary-color);
  animation: button-loading-spinner 0.6s linear infinite;
}

@keyframes button-loading-spinner {
  from {
    transform: translate(-50%, -50%) rotate(0turn);
  }
  to {
    transform: translate(-50%, -50%) rotate(1turn);
  }
}

/* Add styles for Cost Breakdown Modal */
.cost-breakdown-modal .admin-modal-content {
  max-width: 800px; /* Adjust width as needed */
  width: 90%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.cost-modal-body {
  flex-grow: 1;
  overflow-y: auto; /* Allow body content to scroll */
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.cost-chart-container {
  position: relative;
  height: 300px; /* Adjust height as needed */
  width: 100%;
  background: var(--background-color);
  padding: 1rem;
  border-radius: 4px;
  box-sizing: border-box;
}

.version-costs-table-container {
  width: 100%;
  overflow-x: auto; /* Allow table to scroll horizontally if needed */
}

.version-costs-table-container h3 {
  margin-bottom: 0.5rem;
  color: var(--text-color);
}

.version-costs-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card-background);
}

.version-costs-table th,
.version-costs-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-color);
  white-space: nowrap; /* Prevent wrapping in table cells */
}

.version-costs-table th {
  background: var(--background-color);
  font-weight: 600;
  position: sticky; /* Keep header visible when scrolling vertically */
  top: 0;
}

.version-costs-table tfoot td {
  font-weight: bold;
  border-top: 2px solid var(--border-color);
}

/* Mobile responsiveness for cost modal */
@media screen and (max-width: 768px) {
  .cost-chart-container {
    height: 250px;
  }

  .version-costs-table th,
  .version-costs-table td {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
  }
}

.terms-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
  color: var(--text-color);
}

.terms-container h1 {
  margin-bottom: 2rem;
  font-size: 2rem;
}

.terms-container section {
  margin-bottom: 2rem;
}

.terms-container h2 {
  margin-bottom: 1rem;
  font-size: 1.5rem;
  color: var(--primary-color);
}

.terms-container p {
  margin-bottom: 1rem;
  line-height: 1.6;
}

.terms-container ul {
  list-style-type: disc;
  margin-left: 1.5rem;
  margin-bottom: 1rem;
}

.terms-container li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

.privacy-policy-section {
  background-color: var(--card-background);
  padding: 2rem;
  border-radius: 1rem;
  border: 1px solid var(--border-color);
  margin-top: 4rem;
}

@media (max-width: 768px) {
  .terms-container {
    padding: 1rem;
  }
}

.webprompter-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.webprompter-form {
  width: 100%;
  max-width: 600px;
  margin: 1rem auto 3rem;
  padding: 2rem;
  background: var(--card-background);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--border-color);
}

.webprompter-input-group {
  margin-bottom: 1.5rem;
}

#webprompter-prompt {
  width: 100%;
  min-height: 150px;
  padding: 1rem;
  background: var(--background-color);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 1.1rem;
  font-family: var(--font-family);
  resize: vertical;
  transition: border-color 0.2s;
}

#webprompter-prompt:focus {
  outline: none;
  border-color: var(--primary-color);
}

.webprompter-button-primary {
  width: 100%;
  padding: 1rem;
  background: var(--primary-color);
  color: var(--text-color);
  border: none;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.webprompter-button-primary:hover {
  background: var(--secondary-color);
}

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

.webprompter-name-input {
  padding: 20px;
}

.webprompter-url-input {
  display: flex;
  align-items: center;
  background: var(--background-color);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 20px;
  transition: border-color 0.2s;
}

.webprompter-url-input:has(#webprompter-website-name:focus) {
  border-color: var(--primary-color);
}

.webprompter-url-prefix {
  color: var(--text-color-muted);
  margin-right: 5px;
}

#webprompter-website-name {
  flex: 1;
  border: none;
  background: none;
  color: var(--text-color);
  font-size: 16px;
  padding: 5px;
}

#webprompter-website-name:focus {
  outline: none;
}

#webprompter-website-name:focus-within,
#webprompter-website-name:focus {
  outline: none;
}

/* Template selection styling */
.webprompter-template-selection {
  padding: 1.5rem;
}

.webprompter-template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.webprompter-template-option {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.webprompter-template-preview {
  width: 100%;
  border-radius: 8px;
  border: 2px solid var(--border-color);
  transition: border-color 0.2s;
  cursor: zoom-in;
}

.webprompter-template-preview:hover {
  border-color: var(--primary-color);
}

.webprompter-button-select {
  padding: 0.75rem;
  background: var(--primary-color);
  color: var(--text-color);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.webprompter-button-select:hover {
  background: var(--secondary-color);
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .webprompter-container {
    padding: 1rem;
  }

  .webprompter-form {
    padding: 1.5rem;
  }

  .webprompter-template-grid {
    grid-template-columns: 1fr;
  }
}

/* Lightbox styling */
.webprompter-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.webprompter-lightbox img {
  max-width: 90%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 8px;
}

.webprompter-lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  color: var(--text-color);
  font-size: 30px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
}

.webprompter-template-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.webprompter-refresh-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: var(--background-color);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.webprompter-refresh-button:hover {
  background: var(--card-background);
  border-color: var(--primary-color);
}

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

.webprompter-refresh-button svg {
  width: 16px;
  height: 16px;
}

.webprompter-refresh-button.spinning svg {
  animation: spin 1s linear infinite;
}

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

/* Hero section styling */
.webprompter-hero {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 2rem;
}

.webprompter-hero h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: var(--text-color);
}

.webprompter-subtitle {
  font-size: 1.2rem;
  color: var(--text-color-faded);
  max-width: 600px;
  margin: 0 auto 1.5rem;
}

/* Features section styling */
.webprompter-features {
  margin-top: 4rem;
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.webprompter-features-header {
  text-align: center;
  margin-bottom: 2rem;
}

.webprompter-features-header h2 {
  font-size: 1.8rem;
  color: var(--text-color);
}

.webprompter-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

/* For smaller screens, adapt to 2 or 1 column layout */
@media (max-width: 992px) {
  .webprompter-features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .webprompter-features-grid {
    grid-template-columns: 1fr;
  }
}

.webprompter-feature {
  background: var(--card-background);
  padding: 1.5rem;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  text-align: center;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.webprompter-feature:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.feature-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 0 auto 1rem auto;
  background: var(--card-background-dark);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.webprompter-feature:hover .feature-icon {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(var(--primary-color-rgb), 0.2);
}

.feature-icon svg {
  width: 48px;
  height: 48px;
}

.webprompter-feature h3 {
  margin-bottom: 0.75rem;
  color: var(--text-color);
}

.webprompter-feature p {
  color: var(--text-color-faded);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Mobile responsiveness adjustments */
@media (max-width: 768px) {
  .webprompter-hero h1 {
    font-size: 2rem;
  }

  .webprompter-subtitle {
    font-size: 1rem;
  }
}

.api-page-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
}

.api-documentation {
  background: var(--card-background);
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.api-description {
  color: var(--text-color-light);
  margin: 1rem 0;
  line-height: 1.5;
}

.api-endpoint-docs {
  margin-top: 2rem;
}

.endpoint-details {
  background: var(--background-color);
  padding: 1rem;
  border-radius: 4px;
  overflow-x: auto;
  font-family: monospace;
  margin-top: 1rem;
  line-height: 1.5;
}

.api-keys-section {
  background: var(--card-background);
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.section-header .primary-button {
  width: auto;
  padding: 0.5rem 1rem;
}

.api-key-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: var(--background-color);
  border-radius: 4px;
  margin-bottom: 0.75rem;
  border: 1px solid var(--border-color);
}

.key-info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.key-details {
  font-size: 0.875rem;
  color: var(--text-color-light);
}

/* Modal content */

.api-key-modal-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: center;
}

.api-key-modal-content h2 {
  margin-bottom: 0;
}

.copy-button {
  padding: 0.5rem 1rem;
  white-space: nowrap;
  min-width: 80px;
}

.no-keys {
  text-align: center;
  color: var(--text-color-light);
  padding: 2rem;
  background: var(--background-color);
  border-radius: 4px;
  border: 1px dashed var(--border-color);
}

/* Loading state */
.loading-keys {
  height: 60px;
  border-radius: 4px;
  margin-bottom: 0.75rem;
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .api-key-item {
    flex-direction: column;
    gap: 1rem;
  }

  .key-actions {
    width: 100%;
  }

  .key-actions button {
    width: 100%;
  }

  .section-header {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }

  .section-header .primary-button {
    width: 100%;
  }
}

/* Update account settings styles */
.account-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.account-actions .website-link {
  flex: 1;
  min-width: 150px;
  text-align: center;
}

.api-key-input {
  font-family: monospace;
  background: var(--background-color);
  border: none;
  padding: 0.5rem;
  flex: 1;
  color: var(--text-color);
  font-size: 1rem;
  width: 100%;
  cursor: text;
}

.api-key-input:focus {
  outline: none;
}

.api-key-textarea {
  width: 100%;
  font-family: monospace;
  padding: 1rem;
  margin: 1rem 0;
  background: var(--background-color);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  color: var(--text-color);
  font-size: 1rem;
  resize: none;
  height: 4rem;
}

.api-key-textarea:focus {
  outline: none;
  border-color: var(--primary-color);
}

.key-stats-container {
  background: var(--background-color);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  margin-top: -0.75rem;
  margin-bottom: 0.75rem;
  overflow: hidden;
}

.key-stats-container.hidden {
  display: none;
}

.stats-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  padding: 1rem;
  background: var(--card-background);
  border-bottom: 1px solid var(--border-color);
}

.stat-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1rem;
  background: var(--background-color);
  border-radius: 4px;
  border: 1px solid var(--border-color);
}

.stat-label {
  font-size: 0.875rem;
  color: var(--text-color-light);
  margin-bottom: 0.5rem;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-color);
}

.recent-requests {
  padding: 1rem;
}

.requests-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.requests-header h4 {
  margin: 0;
  color: var(--text-color);
}

.requests-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.requests-table th,
.requests-table td {
  padding: 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

.requests-table th {
  font-weight: 600;
  color: var(--text-color-light);
  background: var(--background-color);
}

.requests-table tr:last-child td {
  border-bottom: none;
}

.loading-stats {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem;
  gap: 1rem;
  color: var(--text-color-light);
}

.view-stats-button {
  margin-top: 0.5rem;
  text-align: left;
  width: auto;
}

@media (max-width: 640px) {
  .stats-summary {
    grid-template-columns: 1fr;
  }

  .requests-header {
    flex-direction: column;
    gap: 1rem;
  }

  .requests-table {
    display: block;
    overflow-x: auto;
  }
}

.button-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-color);
  border-radius: 50%;
  border-top-color: var(--primary-color);
  animation: spin 1s linear infinite;
  margin: 0 auto;
}

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

/* Base spinner for all buttons with colored backgrounds */
.primary-button .button-spinner,
.delete-link .button-spinner,
.button-spinner {
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #ffffff;
  width: 16px;
  height: 16px;
}

/* Only use colored spinners for buttons without backgrounds */
.website-link:not(.delete-link) .button-spinner {
  border: 2px solid rgba(37, 99, 235, 0.3);
  border-top-color: #2563eb;
}

.app-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.3s ease;
}

.app-modal.closing {
  animation: fadeOut 0.3s ease forwards;
  pointer-events: none;
}

.app-modal-content {
  background: var(--card-background-dark);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  animation: slideIn 0.3s ease;
}

.app-modal-header {
  padding: 8px 12px;

  background: var(--card-background);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.app-modal-header h2,
.app-modal-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-color);
}

.app-modal-close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--text-color);
  padding: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.app-modal-close:hover {
  opacity: 1;
}

.app-modal-body {
  padding: 16px;
  color: var(--text-color);
}

.app-modal-actions {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.app-modal-actions button {
  flex: 1;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes slideIn {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.country-selector {
  position: relative;
  width: 100%;
}

.country-input-container {
  position: relative;
}

.country-dropdown {
  position: fixed;
  z-index: 10000;
  max-height: 200px;
  overflow-y: auto;
  margin-top: 4px;
  background: var(--card-background-dark);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  width: auto;
  min-width: 200px;
  box-sizing: border-box;
}

.country-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.country-item {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 0.9em;
  color: var(--text-color);
}

.country-item:hover {
  background: var(--card-background);
}

.country-item.selected {
  background: var(--primary-color);
  color: white;
}

.country-item.highlighted {
  background: var(--card-background);
}

.country-item.selected.highlighted {
  background: var(--primary-color);
}

/* Error state styling */
.country-selector.error .country-search {
  border-color: #ff4444 !important;
  background-color: rgba(255, 68, 68, 0.1) !important;
}

.country-code {
  color: var(--text-color);
  margin-right: 8px;
  font-size: 0.9em;
}

.account-settings-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

.section-header {
  margin-bottom: 2rem;
}

.account-info-section,
.account-actions-section {
  display: grid;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .account-actions-section {
    grid-template-columns: repeat(2, 1fr);
  }
}

.account-info-card,
.action-card {
  background-color: var(--card-background);
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--border-color);
}

.danger-zone {
  border-color: #dc3545;
}

.danger-zone h3 {
  color: #dc3545;
}

/* Pricing Page Styles */
.pricing-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

/* Hero Section */
.pricing-hero {
  text-align: center;
  margin-bottom: 2rem;
}

.pricing-hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 1.1rem;
  gap: 1rem;
}

.pricing-hero-content ul {
  max-width: 500px;
  text-align: left;
  align-self: center;
  margin-bottom: 1rem;
}

.pricing-hero-content li::before {
  content: "✓";
  color: var(--primary-color);
  font-weight: bold;
  display: inline-block;
  width: 1.2em;
  margin-left: -1.2em;
  margin-right: 0.4em;
}

.pricing-hero-content li {
  list-style-type: none;
  padding-left: 1.2em;
  margin-bottom: 0.5rem;
}

.pricing-hero h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.pricing-subtitle {
  font-size: 1.25rem;
  color: var(--text-color-faded);
  margin-bottom: 1.5rem;
}

/* Section Headers */
.pricing-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.pricing-header h2 {
  font-size: 2rem;
  margin-bottom: 0.75rem;
  color: var(--text-color);
}

.pricing-header p {
  color: var(--text-color-faded);
  font-size: 1.1rem;
}

/* Pricing Cards */
.pricing-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-bottom: 4rem;
}

.pricing-card {
  background-color: var(--card-background);
  border-radius: 8px;
  border: 1px solid var(--border-color);
  overflow: hidden;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  cursor: pointer;
}

.pricing-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.pricing-card:active {
  transform: translateY(-2px);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

.pricing-card.highlighted {
  border: 2px solid var(--primary-color);
  position: relative;
}

.pricing-card-header {
  padding: 1.5rem 1.5rem 1rem;
  text-align: center;
  position: relative;
}

.pricing-badge {
  position: absolute;
  top: 0;
  right: 0;
  background-color: var(--primary-color);
  color: white;
  font-size: 0.8rem;
  padding: 0.25rem 0.75rem;
  border-bottom-left-radius: 8px;
}

.pricing-card-header h3 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  color: var(--text-color);
}

.price {
  font-size: 2rem;
  font-weight: bold;
  color: var(--primary-color);
}

.pricing-card-body {
  padding: 1.5rem;
  text-align: center;
}

.credits-amount {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
  color: var(--text-color);
}

.pricing-features {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
  text-align: center;
}

.pricing-features li {
  padding: 0.5rem 0;
  position: relative;
  color: var(--text-color-faded);
}

.pricing-features li.credit-usage {
  padding-left: 0;
  font-weight: 500;
}

/* Style for the OR divider */
.pricing-features li.or-divider {
  font-weight: bold;
  color: var(--primary-color);
  padding: 4px 0;
  font-size: 0.9em;
}

.purchase-credits-btn {
  width: 100%;
  margin-top: 1rem;
}

/* Domain Search */
.domain-search {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.domain-search-input {
  width: 100%;
  max-width: 400px;
  padding: 10px 15px;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  font-size: 14px;
  background: var(--card-background);
  color: var(--text-color);
  transition: all 0.2s ease;
}

.domain-search-input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05);
}

/* Cost filter styles */
.cost-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 400px;
}

.cost-filter span {
  color: var(--text-color-faded);
  font-size: 14px;
}

.credits-filter-input {
  flex: 1;
  padding: 10px 15px;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  font-size: 14px;
  background: var(--card-background);
  color: var(--text-color);
  transition: all 0.2s ease;
}

.credits-filter-input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05);
}

/* Domain Pricing Table */
.domain-table-container {
  overflow-x: auto;
  display: flex;
  justify-content: center;
}

.domain-pricing-table {
  width: 100%;
  background: var(--card-background);
  border-collapse: collapse;
  text-align: left;
  max-width: 500px;
  margin-bottom: 1rem;
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.domain-pricing-table th,
.domain-pricing-table td {
  padding: 1rem;
  border-bottom: 1px solid var(--border-color);
  width: 50%;
}

.domain-pricing-table th {
  background-color: var(--card-background-dark);
  color: var(--text-color);
  font-weight: bold;
}

.domain-pricing-table tr:last-child td {
  border-bottom: none;
}

/* FAQ Section */
.faq-container {
  margin-bottom: 4rem;
}

.faq-item {
  background: var(--card-background);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 1rem;
}

.faq-item h3 {
  margin-bottom: 0.75rem;
  color: var(--text-color);
}

.faq-item p {
  color: var(--text-color-faded);
}

/* Credit Purchase Modal */
.credit-purchase-container {
  padding: 1rem 0;
}

.credit-options {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  margin-bottom: 1.5rem;
}

.credit-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem;
  border: 2px solid var(--border-color);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.credit-option.selected {
  border-color: var(--primary-color);
  background-color: var(--card-background-dark);
}

.credit-image {
  max-width: 100px;
  height: auto;
  margin-bottom: 1rem;
}

.credit-details {
  text-align: center;
}

.credit-details h3 {
  margin-bottom: 0.5rem;
}

.credit-price {
  font-weight: bold;
  color: var(--primary-color);
  font-size: 1.25rem;
}

.credit-purchase-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .pricing-hero h1 {
    font-size: 2rem;
  }

  .pricing-header h2 {
    font-size: 1.75rem;
  }

  .pricing-cards,
  .credits-usage-cards {
    grid-template-columns: 1fr;
  }

  .domain-search-input {
    max-width: 100%;
  }
}

/* Domain Pricing Table Pagination */
.domain-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0.75rem;
  margin-bottom: 2rem;
  gap: 1rem;
}

.pagination-btn {
  background-color: var(--card-background);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  color: var(--text-color);
  transition: all 0.2s ease;
}

.pagination-btn:hover {
  background-color: var(--card-background-dark);
}

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

.pagination-info {
  color: var(--text-color-faded);
  font-size: 0.9rem;
}

.logo-frame {
  stroke: var(--text-color-faded, #00bfff);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.logo-ui {
  stroke: var(--text-color, #00bfff);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.logo-brain,
.logo-nodes {
  stroke: var(--primary-color, #ffa500);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.logo-node-fill {
  stroke: var(--primary-color, #ffa500);
  stroke-width: 4;
  fill: none;
}

.logo-text-gray {
  fill: var(--text-color, #707070);
  font-family: var(--font-family, Arial, sans-serif);
  font-weight: bold;
}

.logo-text-orange {
  fill: var(--primary-color, #ffa500);
  font-family: var(--font-family, Arial, sans-serif);
  font-weight: bold;
}

/* Define logo container sizes */
.site-logo {
  height: 55px;
  width: auto;
  vertical-align: middle;
}

/* Add styles for the h1 that contains the logo */
.site-header h1 {
  margin: 0;
  display: flex;
  align-items: center;
}

.site-title {
  display: flex;
  align-items: center;
}


/*# sourceMappingURL=app.5deba166ec96d568f54c.css.map*/