src/spa/src/index.css
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    font-family: 'Inter', system-ui, sans-serif;
  }
}

@layer components {
  .btn {
    @apply inline-flex items-center justify-center px-4 py-2 text-sm font-medium rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-telegram-blue;
  }
  
  .btn-primary {
    @apply bg-telegram-blue text-white hover:bg-telegram-blue-dark focus:ring-telegram-blue;
  }
  
  .btn-secondary {
    @apply bg-transparent border border-telegram-border text-telegram-text hover:bg-telegram-border hover:border-telegram-blue;
  }
  
  .btn-danger {
    @apply bg-red-600 text-white hover:bg-red-700 focus:ring-red-500;
  }
  
  .btn-sm {
    @apply px-3 py-1.5 text-xs;
  }
  
  .btn-lg {
    @apply px-6 py-3 text-base;
  }
  
  .card {
    @apply bg-telegram-bg-light/10 backdrop-blur-sm border border-telegram-border rounded-xl p-6 transition-all duration-300 hover:bg-telegram-bg-light/20 hover:border-telegram-blue hover:-translate-y-1;
  }
  
  .form-input {
    @apply w-full px-4 py-3 bg-telegram-bg-light/10 border border-telegram-border rounded-lg text-telegram-text placeholder-telegram-text-secondary focus:border-telegram-blue focus:ring-1 focus:ring-telegram-blue transition-colors;
  }
  
  .form-label {
    @apply block text-sm font-medium text-telegram-text mb-2;
  }
  
  .status-badge {
    @apply inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium;
  }
  
  .status-online {
    @apply bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300;
  }
  
  .status-offline {
    @apply bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300;
  }
  
  .status-idle {
    @apply bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300;
  }
  
  .nav-link {
    @apply flex items-center px-4 py-2 text-telegram-text-secondary hover:text-telegram-blue hover:bg-telegram-blue/10 rounded-lg transition-all duration-200;
  }
  
  .nav-link.active {
    @apply text-telegram-blue bg-telegram-blue/10;
  }
  
  .modal-overlay {
    @apply fixed inset-0 bg-black/80 flex items-center justify-center z-50 p-4;
  }
  
  .modal {
    @apply bg-telegram-bg border border-telegram-border rounded-xl p-6 max-w-lg w-full max-h-[80vh] overflow-y-auto;
  }
  
  .telegram-logo {
    @apply w-10 h-10 bg-gradient-to-br from-telegram-blue to-blue-400 rounded-full flex items-center justify-center text-white text-lg mr-3;
  }
  
  .bot-item {
    @apply flex items-center justify-between p-4 bg-telegram-bg-light/5 border border-telegram-border rounded-lg hover:bg-telegram-bg-light/10 hover:border-telegram-blue transition-all duration-200;
  }
  
  .loading-spinner {
    @apply animate-spin rounded-full h-8 w-8 border-b-2 border-telegram-blue;
  }
  
  .error-message {
    @apply bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg dark:bg-red-900/20 dark:border-red-800 dark:text-red-300;
  }
  
  .success-message {
    @apply bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-lg dark:bg-green-900/20 dark:border-green-800 dark:text-green-300;
  }
}

@layer utilities {
  .text-gradient {
    @apply bg-gradient-to-r from-telegram-blue to-blue-400 bg-clip-text text-transparent;
  }
  
  .glass-effect {
    @apply backdrop-blur-sm bg-white/5 border border-white/10;
  }
}