:root { --primary: #2c3e50; --accent: #3498db; --danger: #e74c3c; --bg: #f8f9fa; }
        * { box-sizing: border-box; font-family: system-ui, -apple-system, sans-serif; }
        body { margin: 0; background: var(--bg); display: flex; flex-direction: column; min-height: 100vh; }
        .container { display: flex; flex: 1; flex-wrap: wrap; }
        .sidebar { flex: 1; min-width: 280px; max-width: 320px; background: #fff; border-right: 1px solid #e0e0e0; padding: 1.5rem; }
        
        .classe-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; background: #f1f3f5; border-radius: 6px; padding-right: 0.5rem; }
        .classe-item { flex: 1; display: block; padding: 0.75rem 1rem; color: var(--primary); text-decoration: none; font-weight: 500; }
        .classe-row.active { background: var(--accent); }
        .classe-row.active .classe-item { color: white; }
        .classe-btn { background: none; border: none; cursor: pointer; padding: 0.3rem; font-size: 0.9rem; margin-left: 0.2rem; filter: grayscale(100%); }
        .classe-btn:hover { filter: grayscale(0%); }

        .main-content { flex: 3; min-width: 300px; padding: 1.5rem; }
        .card { background: white; border-radius: 8px; padding: 1.5rem; box-shadow: 0 2px 4px rgba(0,0,0,0.05); margin-bottom: 1.5rem; }
        
        .form-row-inline { display: flex; gap: 1rem; flex-wrap: wrap; }
        .form-row-inline .form-group { flex: 1; min-width: 150px; }
        
        .form-group { margin-bottom: 1.25rem; }
        .form-group label { display: block; margin-bottom: 0.5rem; font-weight: bold; }
        .form-control { width: 100%; padding: 0.75rem; border: 1px solid #ccc; border-radius: 6px; font-size: 1rem; }
        textarea.form-control { font-family: monospace; font-size: 0.9rem; resize: vertical; }
        
        .search-container { position: relative; margin-bottom: 1rem; }
        .search-control { width: 100%; padding: 0.85rem 1rem 0.85rem 2.5rem; border: 2px solid var(--accent); border-radius: 6px; font-size: 1rem; outline: none; }
        .search-icon { position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%); font-size: 1.1rem; color: var(--accent); }
        
        .btn { display: inline-block; padding: 0.6rem 1.2rem; border: none; border-radius: 6px; cursor: pointer; text-decoration: none; font-size: 0.95rem; text-align: center; }
        .btn-primary { background: var(--accent); color: white; }
        .btn-danger { background: var(--danger); color: white; }
        .btn-secondary { background: #95a5a6; color: white; }
        .verifica-row { display: flex; justify-content: space-between; align-items: center; padding: 1rem; border-bottom: 1px solid #eee; gap: 1rem; flex-wrap: wrap; }
        .verifica-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
        @media (max-width: 768px) { .container { flex-direction: column; } .sidebar { max-width: 100%; } .form-row-inline { flex-direction: column; gap: 0; } 
        }
.titoli {
  font-size:1.1rem;
  display: inline-block; /* Necessario per permettere il movimento 3D */
  color: #222222; /* Il tuo colore del testo attuale */
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), 
              text-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
              color 0.3s ease;
text-decoration:none;
}

.titoli:hover {
  color: #007bff; /* Opzionale: cambia colore al passaggio (es. Blu) */
  transform: translateY(-4px) translateZ(0); /* Solleva il titolo verso l'alto */
  
  /* Crea l'effetto profondità con una doppia ombra morbida */
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.12), 
               0 2px 4px rgba(0, 0, 0, 0.08); 
}
.btn-copia { 
    background-color: #27ae60; 
    color: white; 
    border: none; 
    cursor: pointer; 
    padding: 0.2rem 0.5rem; 
    font-size: 0.7rem; 
    border-radius: 4px; 
    transition: background 0.2s;
}
.btn-copia:hover { 
    background-color: #219150; 
}