/* ===== Общие базовые стили ===== */ /* Раздел базовых глобальных настроек */

* { /* Универсальный селектор — применяется ко всем элементам */
    margin: 0; /* Обнуляет внешние отступы у всех элементов */
    padding: 0; /* Обнуляет внутренние отступы у всех элементов */
    box-sizing: border-box; /* Включает padding и border в общую ширину/высоту элемента */
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; /* Устанавливает основной шрифт страницы */
}

/* ===== Тело страницы ===== */ /* Стили для элемента body */

body { /* Основной контейнер всей страницы */
    display: flex; /* Делает body flex-контейнером */
    flex-direction: column; /* Располагает дочерние элементы вертикально */
    min-height: 100vh; /* Минимальная высота равна 100% высоты окна браузера */
    background: linear-gradient(to bottom, #1a2935, #2e1a4f); /* Вертикальный градиентный фон */
    color: #ffffff; /* Цвет текста по умолчанию — белый */
    padding: 20px; /* Внутренний отступ вокруг всего содержимого */
}

/* ===== Основной контейнер ===== */ /* Стили для main */

main { /* Основной контент страницы */
    flex: 1; /* Занимает всё доступное пространство внутри flex-контейнера */
    display: flex; /* Делает main flex-контейнером */
    flex-direction: column; /* Элементы внутри располагаются вертикально */
    justify-content: center; /* Центрирует содержимое по вертикали */
    align-items: center; /* Центрирует содержимое по горизонтали */
    text-align: center; /* Выравнивает текст по центру */
}

/* ===== Заголовки ===== */ /* Стили заголовков */

h1 { /* Главный заголовок страницы */
    font-size: 2em; /* Размер шрифта — в 2 раза больше базового */
    margin-bottom: 30px; /* Отступ снизу */
    color: #e0e6f0; /* Цвет текста */
}

h2 { /* Подзаголовки */
    color: #ff6b6b; /* Красноватый цвет (может использоваться для ошибок) */
}

/* ===== Карточки / блоки ===== */ /* Общий стиль для блоков-контейнеров */

.box, /* Блок общего назначения */
.profile-box, /* Блок профиля */
.api-box, /* Блок API */
form { /* Формы */
    background: rgba(70, 130, 180, 0.85); /* Полупрозрачный синий фон */
    padding: 25px; /* Внутренние отступы */
    border-radius: 12px; /* Скруглённые углы */
    box-shadow: 0 8px 20px rgba(0,0,0,0.4); /* Тень для визуального объёма */
    text-align: left; /* Текст внутри выравнивается по левому краю */
}

/* Ширина по умолчанию */ /* Базовая ширина для некоторых блоков */

.box, /* Общий блок */
form { /* Формы */
    width: 300px; /* Фиксированная ширина 300px */
}

/* Только для profile-box — шире */ /* Переопределение ширины */

.profile-box { /* Блок профиля */
    width: 450px; /* Устанавливает ширину 450px */
}

/* Только для api-box — еще шире */ /* Ещё одно переопределение */

.api-box { /* Блок API */
    width: 600px; /* Устанавливает ширину 600px */
}

/* ===== Формы ===== */ /* Дополнительные стили для форм */

form { /* Элемент form */
    display: flex; /* Делает форму flex-контейнером */
    flex-direction: column; /* Располагает поля вертикально */
    align-items: center; /* Центрирует элементы формы по горизонтали */
}

input[type="text"], /* Поле ввода текста */
input[type="password"], /* Поле ввода пароля */
input[type="file"] { /* Поле загрузки файла */
    width: 90%; /* Ширина 90% от родительского элемента */
    padding: 8px; /* Внутренние отступы */
    margin-bottom: 15px; /* Отступ снизу между полями */
    border-radius: 6px; /* Скругление углов */
    border: none; /* Убирает стандартную рамку */
    box-sizing: border-box; /* Учитывает padding в ширине */
}

/* ===== Кнопки ===== */ /* Стили кнопок */

button { /* Элемент кнопки */
    padding: 10px 20px; /* Внутренние отступы */
    border: none; /* Убирает стандартную рамку */
    border-radius: 6px; /* Скругляет углы */
    background-color: #87cefa; /* Голубой фон */
    color: #1a2935; /* Цвет текста */
    font-weight: bold; /* Жирный текст */
    cursor: pointer; /* Курсор в виде указателя при наведении */
    transition: background-color 0.3s; /* Плавная анимация смены цвета */
}

button:hover { /* Состояние кнопки при наведении */
    background-color: #ffdd57; /* Меняет цвет фона */
}

/* ===== Текст ===== */ /* Стили текста */

p { /* Абзацы */
    margin: 10px 0; /* Вертикальные отступы сверху и снизу */
    word-break: break-all; /* Принудительный перенос длинных слов */
}

.label { /* Класс для подписей */
    font-weight: bold; /* Жирный текст */
    color: #ffdd57; /* Жёлтый цвет текста */
}

/* ===== Футер ===== */

footer { /* Элемент footer */
    margin-top: auto; /* Автоматический верхний отступ (прижимает вниз при flex-верстке) */
    font-size: 0.9em; /* Уменьшенный размер шрифта */
    color: #b0b8c0; /* Светло-серый цвет текста */
    text-align: center; /* Выравнивание по центру */
}

/* ===== Меню главной страницы ===== */ /* Стили списка ссылок */

.main-links { /* Список ссылок */
    display: flex; /* Делает список flex-контейнером */
    flex-direction: column; /* Располагает элементы списка вертикально */
    align-items: center; /* Центрирует элементы */
    padding: 0; /* Убирает внутренние отступы */
    margin: 0; /* Убирает внешние отступы */
    list-style: none; /* Убирает маркеры списка */
}

.main-links li { /* Элемент списка */
    margin: 10px 0; /* Вертикальный отступ между пунктами */
}

.main-links a { /* Ссылки внутри списка */
    font-size: 1.2em; /* Увеличенный размер шрифта */
    color: #87cefa; /* Голубой цвет текста */
    text-decoration: none; /* Убирает подчёркивание */
    transition: color 0.3s; /* Плавная анимация смены цвета */
}

.main-links a:hover { /* Ссылка при наведении */
    color: #ffdd57; /* Меняет цвет текста */
}