/* static/style.css ---------------------------------------------------- */

/* 1️⃣ Переменные – общие цвета */
:root {
    /* Фоны */
    --bg-page: #121212;          /* фон всей страницы */
    --bg-card: #1e1e1e;          /* фон карточки и форм */
    --bg-input: #2c2c2c;         /* фон полей ввода */

    /* Текст */
    --text-light: #e5feef;

    /* Кнопка «Войти/Зарегистрироваться» */
    --btn-primary-bg: #3b82f6;
    --btn-primary-hover: #2563eb;

    /* Алерты (Bootstrap) */
    --alert-success-bg: #22c55e;
    --alert-danger-bg:  #ef4444;
}

/* 2️⃣ Общие стили страницы ---------------------------------------- */
body {
    background-color: var(--bg-page);
    color: var(--text-light);
    font-family:
        system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, "Helvetica Neue",
        Arial, "Noto Sans", sans-serif;
}

/* 3️⃣ Центрирование карточки --------------------------------------- */
body {
    display: flex;                /* Flex‑контейнер */
    align-items: center;          /* Вертикальное центрирование */
    justify-content: center;      /* Горизонтальное центрирование */
    min-height: 100vh;            /* Минимальная высота окна */
}

/* 4️⃣ Карточка ----------------------------------------------------- */
.card {
    background-color: var(--bg-card);
    border: none;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .6);
    border-radius: .75rem;        /* Закругление карточки */
}

.alert.alert-danger{
    margin-bottom: 15px; 
    border-radius: 15px;
}

/* 5️⃣ Поля ввода ---------------------------------------------------- */
.form-control {
    background-color: var(--bg-input);
    border: 1px solid rgba(255, 255, 255, .15);
    color: var(--text-light);
    margin-bottom: 7px;
    font-size: 17px;
    border-radius: 10px;      /* Закругление полей */
}
.form-control::placeholder { color: rgba(255,255,255,.6); }
.form-control:focus {
    box-shadow: none;
    border-color: var(--btn-primary-bg);
}

/* 6️⃣ Кнопка «Войти/Зарегистрироваться» -------------------------- */
.btn-primary {
    background-color: var(--btn-primary-bg);
    border: none;
    font-size: 18px;
    border-radius: 10px;      /* Закругление кнопки */
}
.btn-primary:hover,
.btn-primary:focus { background-color: var(--btn-primary-hover); }

/* 7️⃣ Ссылки ------------------------------------------------------- */
a, a.text-light {
    color: var(--btn-primary-bg);
    text-decoration: none;
}
a:hover, a:focus { text-decoration: underline; }

/* 8️⃣ Алерты (сообщения) ------------------------------------------ */
.alert-success,
.alert-danger {
    border-radius: .25rem;
    padding: .75rem 1.25rem;
}
.alert-success { background-color: var(--alert-success-bg); }
.alert-danger  { background-color: var(--alert-danger-bg); }

/* 9️⃣ Дополнительные внутренние отступы --------------------------- */
.card-body { padding: 2rem; }   /* чуть больше отступов внутри карточки */

/* 10️⃣ Мобильная адаптация --------------------------------------- */
@media (max-width: 576px) {
    .container { width: 90%; }
}