/* Сбрасываем box-sizing */
* {
  box-sizing: border-box;
}

/* Базовые стили body */
body {
  font-family: Arial, sans-serif;
  background-color: #ffffff; /* Белый фон */
  color: #141414;            /* Тёмный текст */
  display: flex;             /* Центрируем содержимое по вертикали и горизонтали */
  justify-content: center;
  align-items: center;
  margin: 0;
  min-height: 100vh;
}

/* Контейнер авторизации */
.auth-container {
  background-color: #f8f8f8; /* Светлый фон контейнера */
  padding: 20px;
  border-radius: 12px;
  width: 400px;
  max-width: 400px;
  text-align: center;
  border: 4px solid #000;  /* Толстая чёрная рамка для контраста */
  box-shadow: 5px 5px 0 #aaa; /* Лёгкая тень для «комиксового» эффекта */
}

/* Заголовок — красный акцент */
h2 {
  margin-bottom: 20px;
  font-size: 22px;
  font-weight: bold;
  color: #e57373;             /* Красный акцент, смягчённый для светлого стиля */
  text-shadow: 3px 3px 0 #ccc; /* Комиксовая тень в светлых тонах */
}

/* Класс для важных зелёных выделений (при необходимости) */
.highlight {
  color: #00aa00;
  font-weight: bold;
}

/* Форма */
form {
  display: flex;
  flex-direction: column;
}

/* Подписи к полям */
label {
  text-align: left;
  font-size: 14px;
  margin-bottom: 5px;
  color: #141414; /* Тёмный текст для лучшей читаемости */
}

/* Поля ввода */
input {
  padding: 10px;
  border: 2px solid #000;       /* Чёрная граница для акцента */
  border-radius: 6px;
  background-color: #ffffff;    /* Светлый фон поля ввода */
  color: #141414;               /* Тёмный текст */
  box-shadow: 3px 3px 0 #aaa;    /* Комиксовая тень */
  margin-bottom: 15px;
}

/* Кнопки */
button {
  padding: 12px;
  /* Красный градиент в мягких тонах */
  background: linear-gradient(45deg, #e57373, #ef5350);
  border: 4px solid #000;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
  color: #fff;
  text-shadow: 2px 2px 0 #aaa;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  margin-top: 10px;
}

button:hover {
  transform: translateY(-4px);
  box-shadow: 4px 4px 0 #aaa;
}

/* Ссылки — красный акцент */
a {
  color: #e57373;
  text-decoration: none;
  font-size: 14px;
}
a:hover {
  text-decoration: underline;
}

/* Поле ввода в промо-форме */
#promo-form input {
  padding: 10px;
  margin-right: 10px;
  width: 100%;
  font-size: 15px;
  border: 2px solid #000;
  background-color: #ffffff;
  color: #141414;
}

/* Блок подписок */
#subscription-options label {
  font-size: 15px;
  display: block;
  margin: 10px 0;
  background: #f8f8f8;       /* Светлый фон */
  border: 2px solid #000;    /* Чёрная граница */
  border-radius: 8px;
  padding: 10px;
  cursor: pointer;
  box-shadow: 3px 3px 0 #aaa;
  color: #141414;
}
#subscription-options label:hover {
  background: #e0e0e0;       /* Лёгкое затемнение при наведении */
}

/* Мобильная адаптация */
@media screen and (max-width: 780px) {
  /* На совсем маленьких экранах растягиваем на всю ширину */
  body {
    display: block;
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
  }
  .auth-container {
    width: 100vw;
    max-width: 100vw;
    margin: 0;
    border-radius: 0;
    padding: 20px;
    border: none;
    box-shadow: none;
  }
  h2 {
    font-size: 24px;
    margin-bottom: 20px;
  }
  input, button, a, #promo-form input, #subscription-options label {
    font-size: 18px;
  }
}