/* === Базовые стили body и корневого контейнера === */

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: #f4f5fa;
  font-family: 'Inter', Arial, sans-serif;
  display: flex;
  justify-content: center;   /* По горизонтали по центру */
  align-items: flex-start;   /* Или center — по вертикали по центру */
}

/* Главный контейнер всего приложения (растягивается на весь экран) */
.main-flasher {
  max-width: 95%;                       /* Максимальная ширина - вся вьюпорт */
  min-height: 95vh;                      /* Высота на весь экран */
  margin: 0;
  background: #fff;                       /* Белый фон */
  border-radius: 2px;                    /* Скруглённые углы блока */
  box-shadow: 0 1px 8px #b8b8b822;        /* Лёгкая тень для "карточки" */
  padding: 0;
  display: flex;
  flex-direction: column;                 /* Располагаем элементы вертикально */
}

/* === Заголовок формы === */
.flasher-header {
  font-size: 2rem;
  font-weight: 600;
  padding: 32px 32px 0 32px;              /* Сверху и по бокам отступы */
  margin-bottom: 24px;
  letter-spacing: -1px;
}

/* === Контейнер формы (обертка для всех строк/select-ов) === */
.flasher-form {
  width: 100%;
  margin: 0;
  padding: 0 32px 32px 32px;              /* Отступы по бокам и снизу */
  display: flex;
  flex-direction: column;                 /* Внутри - вертикальное размещение */
  gap: 0;                                 /* Нет стандартного gap между row */
}

/* === Общий стиль для каждой строки формы (label + select) === */
.flasher-row {
  display: flex;                          /* Строчный flex-контейнер */
  flex-direction: row;                    /* label слева, select справа */
  align-items: center;                    /* Выравнивание по центру по вертикали */
  margin: 0;
  border-bottom: 1px solid #f0f0f0;       /* Лёгкая серая линия между рядами */
  padding: 4px 0 4px 0;                 /* Вертикальные отступы между рядами */
  min-height: 60px;                       /* Минимальная высота строки */
}

/* === Стилизация заголовка-лейбла (Project/Device Family/...) === */
.flasher-row label {
  width: 230px;                           /* Ширина лейбла, строго слева */
  font-size: 1.22rem;
  color: #232323;
  font-weight: 400;
  margin-right: 0;
  flex-shrink: 0;                         /* Лейбл не сужается */
}

/* === Стилизация селектов (выпадающих списков) === */
.flasher-row select {
  width: 480px;                           /* Ширина селекта */
  font-size: 1.18rem;
  padding: 12px 24px;                     /* Внутренние отступы */
  border: 1.5px solid #e0e2eb;            /* Граница */
  border-radius: 6px;                    /* Скругление углов */
  background: #fafbfe;                    /* Цвет фона селекта */
  font-family: inherit;
  color: #2d2d2d;
  outline: none;
  transition: border 0.2s;                /* Плавный переход для border при фокусе */
}

/* === Фокус на select (при выборе — синяя граница) === */
.flasher-row select:focus {
  border: 1.5px solid #6c55ff;
  background: #fff;
}

/* === Убираем линию для последнего ряда === */
.flasher-row:last-child { border-bottom: none; }

/* === Ряд с кнопками (Flash to Controller, Direct Link) === */
.flasher-actions {
  border-bottom: none;
  padding-top: 6px;                       /* Отступ сверху перед кнопками */
  justify-content: flex-start;            /* Кнопки выравниваются слева */
  gap: 16px;                              /* Промежуток между кнопками */
  min-height: 60px;
}

/* === Стилизация кастомной кнопки esp-web-install-button === */
esp-web-install-button {
  --install-button-color: #fff;
  --install-button-background: linear-gradient(100deg, #00b0fa 0%, #007cff 100%);
  --install-button-background-hover: #006bb3;
  --install-button-border-radius: 28px;
  --install-button-font-size: 1.18rem;
  --install-button-padding: 0.9em 2.3em;
  --install-button-font-weight: 600;
  --install-button-box-shadow: 0 2px 12px #00b0fa22;
  margin: 0;
}

/* === Кнопка "Direct Link" (справа от Flash) === */
.direct-link-btn {
  background: #3d4250;
  color: #fff;
  border-radius: 12px;
  font-size: 1.1rem;
  font-weight: 500;
  padding: 0.85em 2.1em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  box-shadow: 0 2px 8px #3d425033;
  border: none;
  transition: background 0.2s;
  margin-left: 0;
}

.direct-link-btn:hover {
  background: #232323;
}

/* === Ряд с деталями выбранной прошивки (фото, описание, changelog) === */
.flasher-details {
  border-bottom: none;
  min-height: 60px;
}

/* --- Блок описания прошивки — стильная карточка --- */
#fw-details {
  margin: 24px 0 0 0;
  font-size: 1.13rem;
  background: linear-gradient(120deg, #f6f8fb 80%, #e8eefd 100%);
  border-radius: 18px;
  box-shadow: 0 2px 18px #28357c12, 0 0.5px 1.5px #b0b4d744;
  padding: 24px 32px 18px 32px;
  max-width: 480px;
  min-width: 280px;
  border: 1.5px solid #e2e7f6;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}

#fw-details:before {
  content: '';
  display: block;
  position: absolute;
  left: 28px; top: 22px;
  width: 36px; height: 4px;
  border-radius: 2px;
  background: #b7c7fa;
  opacity: 0.55;
}

#fw-details img {
  display: block;
  /* Жёстко ограничиваем размер превью */
  width: 150px;         /* Или 160/180px по вкусу */
  height: 110px;        /* Можно 100-120px — подгони под твой стиль */
  object-fit: contain;  /* Сохраняет пропорции, добавляет “рамку” */
  /* object-fit: cover; */ /* Если хочешь заполнять блок полностью с обрезкой */
  border-radius: 10px;
  margin: 0 0 12px 0;
  box-shadow: 0 2px 8px #b3c4e744;
  background: #eef1f7;  /* Серый фон, если png прозрачный */
  /* Центруем если нужно */
  margin-left: auto;
  margin-right: auto;
}

/* Можно для мобильных чуть уменьшить */
@media (max-width: 600px) {
  #fw-details img {
    width: 120px;
    height: 80px;
  }
}
}

#fw-details strong {
  font-size: 1.19rem;
  font-weight: 700;
  letter-spacing: 0.1px;
  color: #192a59;
  display: block;
  margin-bottom: 2px;
}

#fw-details > div {
  margin: 0 0 10px 0;
  color: #4b5060;
  font-weight: 400;
}

#fw-details details {
  margin: 10px 0 0 0;
  background: #ecf1fa;
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 1.01rem;
  box-shadow: 0 1px 5px #ccd6ee33;
  border: 1px solid #dde4f3;
}

#fw-details summary {
  font-weight: 600;
  color: #3450d6;
  font-size: 1.08rem;
  cursor: pointer;
  outline: none;
  margin-bottom: 5px;
  letter-spacing: 0.2px;
}

#fw-details pre {
  font-family: 'JetBrains Mono', 'Fira Mono', 'Consolas', monospace;
  font-size: 1.01rem;
  white-space: pre-wrap;
  background: #f7f8fa;
  border-radius: 8px;
  padding: 7px 0 0 0;
  color: #303b5b;
  margin: 7px 0 0 0;
  line-height: 1.47;
  border: none;
  box-shadow: none;
}

/* --- Анимация появления карточки --- */
#fw-details {
  animation: cardFadeIn 0.4s cubic-bezier(.5,1.5,.5,1) 1;
}
@keyframes cardFadeIn {
  0% { opacity: 0; transform: translateY(30px) scale(0.97);}
  85% { opacity: 1; transform: translateY(-2px) scale(1.01);}
  100% { opacity: 1; transform: translateY(0) scale(1);}
}