body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Основные стили */
.section {
  display: none;
}

.section.active {
  display: block;
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Навигация */
.nav-btn.active {
  background-color: rgb(30 58 138);
  border-bottom: 3px solid #fbbf24;
}

/* Карточки тканей */
.tissue-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Виртуальный микроскоп */
#microscope-view {
  background: radial-gradient(circle, #f3f4f6 0%, #d1d5db 100%);
  position: relative;
  overflow: hidden;
}

#tissue-image {
  border-radius: 50%;
  transition: transform 0.5s ease;
  max-width: 90%;
  max-height: 90%;
  object-fit: cover;
}

.magnification-btn.active {
  background-color: rgb(37 99 235);
  color: white;
  font-weight: bold;
}

/* 3D Модели */
.model-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.model-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.model-container svg {
  transition: transform 0.3s ease;
}

/* Классификация */
.classification-by-location > div > div:hover,
.classification-by-function > div > div:hover,
.classification-by-form > div > div:hover {
  transform: translateX(5px);
  transition: transform 0.2s ease;
}

/* Протокол */
.lab-protocol-form input:focus,
.lab-protocol-form textarea:focus,
.lab-protocol-form select:focus {
  outline: none;
  ring: 2px solid rgb(37 99 235);
  border-color: rgb(37 99 235);
}

/* Схема тела */
.muscle-diagram svg {
  transition: transform 0.3s ease;
}

.muscle-diagram svg:hover {
  transform: scale(1.05);
}

/* Анимации загрузки */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.loading {
  animation: pulse 2s infinite;
}

/* Уведомления */
.notification {
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* Подсказки */
.hint-popup {
  animation: fadeInUp 0.3s ease-out;
  z-index: 1000;
}

@keyframes fadeInUp {
  from { transform: translateY(10px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* Таблица сравнения */
table th {
  position: sticky;
  top: 0;
  background-color: rgb(37 99 235);
  color: white;
}

table tr:nth-child(even) {
  background-color: rgba(243, 244, 246, 0.5);
}

table tr:hover {
  background-color: rgba(59, 130, 246, 0.1);
}

/* Микроскоп - перекрестие */
.microscope-crosshair {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border: 1px solid rgba(239, 68, 68, 0.6);
  border-radius: 50%;
  pointer-events: none;
}

.microscope-crosshair::before,
.microscope-crosshair::after {
  content: '';
  position: absolute;
  background-color: rgba(239, 68, 68, 0.4);
}

.microscope-crosshair::before {
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 22px;
}

.microscope-crosshair::after {
  left: -1px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 1px;
}

/* Адаптивность */
@media (max-width: 768px) {
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  nav .nav-btn {
    padding: 0.75rem 0.5rem;
    font-size: 0.875rem;
  }
  
  #microscope-view {
    width: 280px;
    height: 280px;
  }
  
  .grid.md\\:grid-cols-3 {
    grid-template-columns: 1fr;
  }
  
  .grid.md\\:grid-cols-2 {
    grid-template-columns: 1fr;
  }
}

/* Печать */
@media print {
  body * {
    visibility: hidden;
  }
  
  #protocol-section,
  #protocol-section * {
    visibility: visible;
  }
  
  #protocol-section {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
  
  .no-print {
    display: none !important;
  }
}