:root {
    --primary-color: #10b981;
    --primary-hover: #059669;
    --link-underline: #10b981;
    --bg-body: #ffffff;
    --text-color: #121212;
    --btn-text: #ffffff;
    --highlight-bg: #f0fdf4;
    --dropzone-border: var(--primary-color);
    --shadow-header: rgba(0, 0, 0, 0.1);
    --btn-shadow: rgba(0, 0, 0, 0.2);
    --nav-hover-underline: var(--link-underline);
    --header-shadow-scrolled: rgba(0, 0, 0, 0.1);
    --bg-white: #ffffff;
    --bg-gray-50: #f9fafb;
    --bg-gray-100: #f3f4f6;
    --text-black: #000000;
    --text-gray-600: #4b5563;
    --text-gray-400: #9ca3af;
    --text-gray-300: #d1d5db;
    --text-gray-500: #6b7280;
    --border-gray-200: #e5e7eb;
    --focus-shadow: rgba(255, 193, 7, 0.2);
    --focus-border: #ffc107;
  }
  
  html.dark {
    --primary-color: #10b981;
    --primary-hover: #059669;
    --link-underline: #10b981;
    --bg-body: #121212;
    --text-color: #e0e0e0;
    --btn-text: #121212;
    --highlight-bg: #1e1e1e;
    --dropzone-border: var(--primary-color);
    --shadow-header: rgba(0, 0, 0, 0.5);
    --btn-shadow: rgba(0, 0, 0, 0.3);
    --header-bg: #121212;
    --header-border: #333333;
    --text-light: #e0e0e0;
    --text-muted: #b0b0b0;
    --bg-dark: #1e1e1e;
    --border-dark: #333333;
    --text-highlight: #ffc107;
    --text-highlight-glow: rgba(255, 193, 7, 0.4);
    --focus-shadow: rgba(255, 193, 7, 0.2);
    --focus-border: #ffc107;
  }
  
  body {
    background-color: var(--bg-body);
    color: var(--text-color);
  }
  
  .btn-primary {
    background-color: var(--primary-color);
    color: var(--btn-text);
    transition: background-color 0.3s ease;
  }
  
  .btn-primary:hover {
    background-color: var(--primary-hover);
  }
  
  .idea-card {
    transition: transform 0.3s;
    cursor: pointer;
  }
  
  .idea-card:hover {
    transform: scale(1.05);
  }
  
  #dropzone.dragover {
    border-color: var(--dropzone-border);
    background-color: var(--highlight-bg);
  }
  
  header.scrolled {
    box-shadow: 0 2px 10px var(--shadow-header);
  }
  
  .nav-link {
    position: relative;
  }
  
  .nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 0;
    background-color: var(--nav-hover-underline);
    transition: width 0.3s ease;
  }
  
  .nav-link:hover::after {
    width: 100%;
  }
  
  /* Stile personalizzato per la barra di scorrimento */
  .custom-scrollbar::-webkit-scrollbar {
    width: 8px;
  }
  
  .custom-scrollbar::-webkit-scrollbar-track {
    background: var(--bg-gray-50);
    border-radius: 10px;
  }
  
  .custom-scrollbar::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 10px;
  }
  
  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--primary-hover);
  }
  
  /* Stile per Firefox */
  .custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) var(--bg-gray-50);
    max-height: 350px;
    height: 350px;
    overflow-y: auto;
  }
  
  /* Stile per la scrollbar in modalità dark */
  .dark .custom-scrollbar::-webkit-scrollbar-track {
    background: var(--bg-dark);
  }
  
  .dark .custom-scrollbar::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-color: var(--bg-dark);
  }
  
  #backToTopBtn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: var(--btn-text);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    box-shadow: 0 4px 10px var(--btn-shadow);
    z-index: 40;
  }
  
  #backToTopBtn:hover {
    background-color: var(--primary-hover);
  }
  
  #backToTopBtn.visible {
    opacity: 1;
    visibility: visible;
  }
  
  html.dark .bg-white,
  html.dark .bg-gray-50,
  html.dark .bg-gray-100 {
    background-color: var(--bg-dark) !important;
  }
  
  html.dark .text-black,
  html.dark .text-gray-600,
  html.dark .text-gray-400,
  html.dark .text-gray-300 {
    color: var(--text-light) !important;
  }
  
  html.dark .text-gray-500 {
    color: var(--text-muted) !important;
  }
  
  html.dark .border-gray-200 {
    border-color: var(--border-dark) !important;
  }
  
  html.dark header {
    background-color: var(--header-bg) !important;
    border-color: var(--header-border) !important;
    box-shadow: 0 2px 10px var(--shadow-header);
  }
  
  html.dark header h1,
  html.dark .nav-link,
  html.dark #toggleDark {
    color: var(--text-light) !important;
  }
  
  html.dark .nav-link:hover,
  html.dark #toggleDark:hover {
    color: var(--text-highlight) !important;
    text-shadow: 0 0 8px var(--text-highlight-glow);
  }
  
  html.dark #mobileMenu {
    background-color: var(--bg-dark);
  }
  
  html.dark #mobileMenu .nav-link {
    border-color: var(--border-dark);
  }
  
  html.dark header.scrolled {
    box-shadow: 0 4px 12px var(--shadow-header);
  }
  
  html.dark select,
  html.dark input,
  html.dark textarea {
    color: var(--text-light);
    border-color: var(--border-dark) !important;
    background-color: var(--bg-dark) !important;
  }
  
  html.dark select:focus,
  html.dark input:focus,
  html.dark textarea:focus {
    border-color: var(--focus-border) !important;
    box-shadow: 0 0 0 2px var(--focus-shadow);
    outline: none;
  }
  
  html.dark .shadow-md {
    box-shadow: 0 4px 6px var(--btn-shadow) !important;
  }
  
  html.dark .idea-card {
    background-color: var(--bg-dark);
    border: 1px solid var(--border-dark);
    box-shadow: none;
  }
  
  html.dark .idea-card:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 15px var(--btn-shadow);
  }
  
  /* Miglioramento leggibilità testo con altezza fissa e scrollbar */
  #termsModal .mb-6 {
    height: 350px;
    overflow-y: auto;
    padding-right: 10px;
    margin-bottom: 1.5rem;
    line-height: 1.6;
    font-size: 0.95rem;
  }
  
  #termsModal .mb-6.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
  }
  
  #termsModal .mb-6 p {
    margin-bottom: 1rem;
  }
  
  /* Stile per il popup delle idee */
  #ideaModal {
    max-width: 90%;
    width: 500px;
  }
  
  #ideaModal .idea-image-container {
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
  }
  
  #ideaModal .idea-image {
    max-width: 100%;
    max-height: 250px;
    object-fit: contain;
    border-radius: 0.5rem;
  }
  
  #ideaModal .idea-icon {
    font-size: 6rem;
    color: var(--primary-color);
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
  
  #ideaModal #ideaModalDescription {
    line-height: 1.5;
    margin-bottom: 0.75rem;
  }
  
  #ideaModal #ideaModalPrompt {
    font-style: italic;
    padding: 0.75rem;
    background-color: var(--bg-gray-50);
    border-radius: 0.5rem;
    border-left: 3px solid var(--primary-color);
    margin-bottom: 1rem;
    line-height: 1.5;
  }
  
  /* Miglioramento responsive */
  @media (max-width: 640px) {
    #ideaModal {
      width: 95%;
    }
    
    #ideaModal .idea-image-container {
      height: 200px;
    }
    
    #ideaModal .idea-icon {
      font-size: 4rem;
      height: 200px;
    }
    
    .footer-content {
      flex-direction: column;
      text-align: center;
    }
    
    .footer-content > div {
      margin-bottom: 1.5rem;
    }
  }
  
  /* Stile per le card delle idee */
  .idea-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: all 0.3s ease;
  }
  
  .idea-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  }
  
  .idea-card h2 {
    margin-bottom: 0.5rem;
  }
  
  .idea-card p {
    flex-grow: 1;
    line-height: 1.5;
  }
  
  /* Stile per limitare il testo a 2 righe */
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }