/* Виртуальная примерочная — точечные стили поверх Tailwind (CDN).
 * Тёмная тема, акцентный цвет — по Figma-мокапу interface.png.
 */

:root {
  --accent: #f0a464;
}

body {
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  background: #121212;
}

/* Подсветка зоны Drag & Drop при перетаскивании */
.dragover {
  border-color: var(--accent) !important;
  background: rgba(240, 164, 100, 0.06);
}

/* Скроллбар в тёмной теме */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: #161616;
}
::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
  background: #444;
}

/* Плавное появление карточек истории */
#history-list > article {
  animation: fade-in 0.25s ease-out;
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Состояние "Скоро исчезнет" */
.timer-line {
  transition: color 0.2s ease;
}