/* =============================================================================
   🎨 ГЛОБАЛЬНЫЕ ПЕРЕМЕННЫЕ ЦВЕТОВ
   ============================================================================= */

   :root {
	/* 📝 Цвета интерфейсных элементов */
	--input-bg-color:        #fefefe;   /* Фон текстовых полей */
	--input-text-color:      #666;   /* Основной цвет текста в инпутах */
	--input-placeholder-color: #999; /* Цвет placeholder-текста в инпутах */

	--thin-scrollbar-width: 0.4rem; /* ширина тонкого скролбара */
	--thin-scrollbar-background-color: #999; /* фон тонкого скролбара */
	--thin-scrollbar-thumb-background-color: #111; /* цвет бегунка тонкого скролбара */
	--thin-scrollbar-thumb-hover-background-color: #222; /* цвет бегунка тонкого скролбара при наведении */
}

/* =============================================================================
   🏗️ БАЗОВАЯ СБРОСКА И НАСТРОЙКИ ДОКУМЕНТА
   ============================================================================= */

html, body, p, h1, h2, h3, ul {
	margin: 0;
	padding: 0;
}

html {
	font-size: 1.1vw;       /* Адаптивный базовый размер шрифта. Все базовые размеры зависят от него, т.к. указаны через rem */
}

body {
	min-width: 100vw;
	min-height: 100vh;
	color: #666;
	position: relative;
	background: #eee;
	overflow-x: hidden;      /* Скрываю горизонтальный скролл */
	overflow-y: scroll;      /* Разрешаю вертикальный скролл */
}

/* Сброс box-sizing для всех элементов */
*, *::before, *::after {
	box-sizing: border-box !important;
	/* Префиксы для старых браузеров (на всякий случай) */
	-moz-box-sizing: border-box !important;
	-webkit-box-sizing: border-box !important;
}

/* Вертикальное выравнивание изображений и SVG */
img, svg {
	vertical-align: bottom;
}

/* Стили ссылок */
a, .link {
	text-decoration: none;
	color: rgb(24, 108, 160);
	cursor: pointer;
}

/* =============================================================================
   📏 РАЗМЕРЫ ЗАГОЛОВКОВ
   ============================================================================= */

h1 { font-size: 1.5rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.1rem; }


/* =============================================================================
   📋 СТИЛИЗАЦИЯ СПИСКОВ И ПРОЧИХ ЭЛЕМЕНТОВ
   ============================================================================= */

li {
	margin: 0 0 0 1.2rem; /* Отступ слева для маркеров списка */
	padding: 0;
}

label {
	display: inline-flex;
	align-items: center;
}

table {
	border-collapse: collapse;
}


/* =============================================================================
   🖱️ КАСТОМНЫЕ СКРОЛЛБАРЫ
   ============================================================================= */

.thin_scrollbar::-webkit-scrollbar { width: var(--thin-scrollbar-width); }
/* Цвет трека (фон полосы) */
.thin_scrollbar::-webkit-scrollbar-track { background-color: var(--thin-scrollbar-background-color); }
/* Цвет "бегунка" */
.thin_scrollbar::-webkit-scrollbar-thumb { background-color: var(--thin-scrollbar-thumb-background-color); }
/* При наведении — чуть светлее */
.thin_scrollbar::-webkit-scrollbar-thumb:hover { background-color: var(--thin-scrollbar-thumb-hover-background-color); }

html::-webkit-scrollbar { width: var(--thin-scrollbar-width); }
html::-webkit-scrollbar-track { background-color: var(--thin-scrollbar-background-color); }
html::-webkit-scrollbar-thumb { background-color: var(--thin-scrollbar-thumb-background-color); }
html::-webkit-scrollbar-thumb:hover { background-color: var(--thin-scrollbar-thumb-hover-background-color); }

/* Скрытие скроллбара (но прокрутка остаётся) */
.hidden_scroll::-webkit-scrollbar {
	width: 0;
}


/* =============================================================================
   🧩 УТИЛИТНЫЕ КЛАССЫ
   ============================================================================= */

/* Скрытие элемента */
.hidden {
	display: none;
}

/* Flexbox */
.flex {
	display: flex;
}

.inline_flex {
	display: inline-flex;
}

/* Запрет выделения текста */
.copying_denied {
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}

/* Вес шрифта */
.font_bold   { font-weight: bold !important; }
.font_normal { font-weight: normal !important; }

/* Перенос слов */
.break_all  { word-break: break-all; }      /* Ломает слово в любом месте */
.break_word { word-wrap: break-word; }      /* Более мягкий перенос */

/* Курсор */
.cursor_pointer { cursor: pointer; }

/* Подчёркивание при наведении */
.hover_underline:hover {
	text-decoration: underline;
}

/* Выравнивание */
.align_center {
	margin: 0 auto;
	align-self: center;
}
.align_content_center {
	text-align: center;
	align-items: center;
}
.space_between {
	justify-content: space-between;
}

/* Обрезание по строкам */
.line_clamp {
	/*общие правила*/
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	word-wrap: break-word;
	word-break: break-word;
}
.line_clamp_2 {
	/*ограничение в 2 строки*/
	line-clamp: 2;
	-webkit-line-clamp: 2;
}
.line_clamp_3 {
	/*ограничение в 3 строки*/
	line-clamp: 3;
	-webkit-line-clamp: 3;
}
.line_clamp_4 {
	/*ограничение в 4 строки*/
	line-clamp: 4;
	-webkit-line-clamp: 4;
}


/* =============================================================================
   🛑 НАЛОЖЕНИЕ НЕАКТИВНОГО СЛОЯ
   ============================================================================= */

.stop_layer::after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	content: '';
}


/* =============================================================================
   📏 РАЗМЕРЫ ШРИФТОВ
   ============================================================================= */

.text_3xs { font-size: 0.6rem; }
.text_2xs { font-size: 0.7rem; }
.text_xs  { font-size: 0.8rem; }
.text_sm  { font-size: 0.9rem; }
.text_base{ font-size: 1rem; }
.text_lg  { font-size: 1.1rem; }
.text_xl  { font-size: 1.2rem; }
.text_2xl { font-size: 1.3rem; }
.text_3xl { font-size: 1.4rem; }


/* =============================================================================
   📐 УТИЛИТНЫЕ КЛАССЫ ДЛЯ ОТСТУПОВ (MARGIN)
   ============================================================================= */

/* Верхние отступы */
.mt_0 { margin-top: 0; }       .mt_1 { margin-top: 0.25rem; }
.mt_2 { margin-top: 0.5rem; }  .mt_3 { margin-top: 0.75rem; }
.mt_4 { margin-top: 1rem; }    .mt_5 { margin-top: 1.25rem; }
.mt_6 { margin-top: 1.5rem; }

/* Нижние отступы */
.mb_0 { margin-bottom: 0; }       .mb_1 { margin-bottom: 0.25rem; }
.mb_2 { margin-bottom: 0.5rem; }  .mb_3 { margin-bottom: 0.75rem; }
.mb_4 { margin-bottom: 1rem; }    .mb_5 { margin-bottom: 1.25rem; }
.mb_6 { margin-bottom: 1.5rem; }

/* Левые отступы */
.ml_0 { margin-left: 0; }       .ml_1 { margin-left: 0.25rem; }
.ml_2 { margin-left: 0.5rem; }  .ml_3 { margin-left: 0.75rem; }
.ml_4 { margin-left: 1rem; }    .ml_5 { margin-left: 1.25rem; }
.ml_6 { margin-left: 1.5rem; }

/* Правые отступы */
.mr_0 { margin-right: 0; }       .mr_1 { margin-right: 0.25rem; }
.mr_2 { margin-right: 0.5rem; }  .mr_3 { margin-right: 0.75rem; }
.mr_4 { margin-right: 1rem; }    .mr_5 { margin-right: 1.25rem; }
.mr_6 { margin-right: 1.5rem; }

/* Горизонтальные отступы (left + right) */
.mx_0 { margin-left: 0; margin-right: 0; }
.mx_1 { margin-left: 0.25rem; margin-right: 0.25rem; }
.mx_2 { margin-left: 0.5rem; margin-right: 0.5rem; }
.mx_3 { margin-left: 0.75rem; margin-right: 0.75rem; }
.mx_4 { margin-left: 1rem; margin-right: 1rem; }
.mx_5 { margin-left: 1.25rem; margin-right: 1.25rem; }
.mx_6 { margin-left: 1.5rem; margin-right: 1.5rem; }

/* Вертикальные отступы (top + bottom) */
.my_0 { margin-top: 0; margin-bottom: 0; }
.my_1 { margin-top: 0.25rem; margin-bottom: 0.25rem; }
.my_2 { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.my_3 { margin-top: 0.75rem; margin-bottom: 0.75rem; }
.my_4 { margin-top: 1rem; margin-bottom: 1rem; }
.my_5 { margin-top: 1.25rem; margin-bottom: 1.25rem; }
.my_6 { margin-top: 1.5rem; margin-bottom: 1.5rem; }

/* Отступы со всех сторон */
.m_0 { margin: 0; }
.m_1 { margin: 0.25rem; }
.m_2 { margin: 0.5rem; }
.m_3 { margin: 0.75rem; }
.m_4 { margin: 1rem; }
.m_5 { margin: 1.25rem; }
.m_6 { margin: 1.5rem; }


/* =============================================================================
   📝 ПОЛЯ ВВОДА, ЧЕКБОКСЫ И СЕЛЕКТЫ
   ============================================================================= */

/* Общие стили для кнопок и редактируемых элементов */
button,
input[type='button'],
input[type='button']:active,
input[type='submit'],
input[type='submit']:active,
[contenteditable] {
	outline: none;
	border: none;
}

/* Чекбоксы — выравнивание по низу строки */
input[type='checkbox'] {
	vertical-align: bottom;
}

/* Текстовые поля, пароли, textarea и contenteditable */
input[type='text'],
input[type='password'],
textarea,
*[contenteditable],
*[contenteditable='true'] {
	width: auto;
	color: var(--input-text-color);
	font-size: 1rem;
	resize: none;
	border: none;
	border-radius: 0.2rem;
	position: relative;
	display: inline-block;
	vertical-align: top;
}

/* Убираем outline при фокусе */
input[type='text']:focus,
input[type='password']:focus,
textarea:focus {
	outline: none;
}

/* Особенности textarea */
textarea {
	overflow: hidden;
	height: auto;
}

/* Селекты */
select {
	width: 100%;
	padding: 0.5rem 0.5rem;
	font-size: 1rem;
	color: var(--input-text-color);
	background: var(--input-bg-color);
	border: 0.15rem solid #ccc;
	border-radius: 0.3rem;
	outline: none;
}


/* =============================================================================
   🏷️ ПОЛЯ С ПЛАВАЮЩЕЙ МЕТКОЙ (BORDER-LABEL)
   Пример использования:
   <div class="border_label_text_field">
     <label>Имя</label>
     <input type="text">
   </div>
   ============================================================================= */

.border_label_text_field {
	position: relative;
}

.border_label_text_field label {
	position: absolute;
	top: 0;
	left: 1rem;
	z-index: 1;
	background: #fff;
	transform: translateY(-50%);
	display: inline-block;
	padding: 0.1rem 0.25rem;
	font-size: 0.9rem;
	font-weight: bold;
}

/* =============================================================================
   🏷️ ПОЛЯ С ПЛАВАЮЩИМ ПЛЕЙСХОЛДЕРОМ
   ============================================================================= */

.floating_placeholder_field {
	position: relative;
}

.floating_placeholder_field input {
	width: 100%;
	padding: 0.5rem 0;
	border: none;
	border-bottom: 1px solid #aaa;
	background: transparent;
	color: #eee;
	border-radius: 0;
}

.floating_placeholder_field label {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	font-size: 1rem;
	color: #aaa;
	pointer-events: none;
	transition: 0.2s ease;
}

/* Поднимаем метку, когда поле в фокусе или содержит текст */
.floating_placeholder_field input:focus + label,
.floating_placeholder_field input:not(:placeholder-shown) + label {
	top: 0;
	font-size: 0.7rem;
	color: #eee;
	transform: translateY(-100%);
}

/* =============================================================================
   💬 PLACEHOLDER-ТЕКСТ
   ============================================================================= */

/* Совместимость с разными браузерами */
input[type='text']::placeholder,
input[type='password']::placeholder,
textarea::placeholder {
	color: var(--input-placeholder-color);
	/* Унифицировано: modern browsers поддерживают ::placeholder */
}

/* Поддержка старых версий Firefox и IE (по необходимости) */
input[type='text']::-moz-placeholder,
input[type='password']::-moz-placeholder,
textarea::-moz-placeholder {
	color: var(--input-placeholder-color);
	opacity: 1;
}

input[type='text']:-ms-input-placeholder,
input[type='password']:-ms-input-placeholder,
textarea:-ms-input-placeholder {
	color: var(--input-placeholder-color);
}


/* =============================================================================
   ⚠️ ОБОЗНАЧЕНИЕ ОБЯЗАТЕЛЬНЫХ ПОЛЕЙ
   ============================================================================= */

.required_field_mark {
	position: relative;
}

.required_field_mark::after {
	content: '*';
	margin-left: 0.2rem;
	transform: translateY(-100%);
	color: crimson;
	font-size: 1.2rem;
}


/* =============================================================================
   🖱️ КНОПКИ
   ============================================================================= */

.button {
	color: #fff; text-align: center;
	padding: 0.5rem 1rem 0.6rem 1rem;
	border-radius: 0.3rem;
    background: linear-gradient(135deg, rgba(7, 223, 123, 0.8), rgba(3, 172, 93, 0.8));
	cursor: pointer;
	transition: 0.1s;
	overflow: hidden;
	position: relative;
	display: inline-block;
	box-shadow: 0 0.3rem 0.6rem rgba(0, 0, 0, 0.1);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.button:hover {
	filter: brightness(1.05);
}
.button:active {
	filter: brightness(0.95);
}
.button:active {
	box-shadow: 0 0.3rem 0.6rem rgba(0, 0, 0, 0.1);
}

/* Прозрачная кнопка */
.transparent_button {
	background: transparent;
}

/* Неактивное состояние кнопки */
.inactive_button {
	opacity: 0.6;
}
.disabled_button {
	opacity: 0.6;
	pointer-events: none;
}

/* Размеры кнопок — крупные */
.button_lg { padding: 0.6rem 1.2rem 0.7rem 1.2rem; font-size: 1.1rem; border-radius: 0.35rem; }
.button_xl { padding: 0.7rem 1.4rem 0.8rem 1.4rem; font-size: 1.2rem; border-radius: 0.4rem; }
.button_2xl { padding: 0.8rem 1.6rem 0.9rem 1.6rem; font-size: 1.3rem; border-radius: 0.45rem; }
.button_3xl { padding: 0.9rem 1.8rem 1rem 1.8rem; font-size: 1.4rem; border-radius: 0.5rem; }
.button_4xl { padding: 1rem 2rem 1.1rem 2rem; font-size: 1.5rem; border-radius: 0.55rem; }
.button_5xl { padding: 1.1rem 2.2rem 1.2rem 2.2rem; font-size: 1.6rem; border-radius: 0.6rem; }

/* Размеры кнопок — мелкие */
.button_sm { padding: 0.45rem 0.9rem 0.55rem 0.9rem; font-size: 0.9rem; border-radius: 0.25rem; }
.button_xs { padding: 0.4rem 0.8rem 0.5rem 0.8rem; font-size: 0.8rem; border-radius: 0.2rem; }
.button_2xs { padding: 0.35rem 0.7rem 0.45rem 0.7rem; font-size: 0.7rem; border-radius: 0.15rem; }
.button_3xs { padding: 0.3rem 0.6rem 0.4rem 0.6rem; font-size: 0.6rem; border-radius: 0.1rem; }
.button_4xs { padding: 0.25rem 0.5rem 0.35rem 0.5rem; font-size: 0.5rem; border-radius: 0.05rem; }
.button_5xs { padding: 0.2rem 0.4rem 0.3rem 0.4rem; font-size: 0.4rem; border-radius: 0; }


/* =============================================================================
   🚧 СТРАНИЦЫ ОШИБОК И ЗАГРУЗКИ
   ============================================================================= */

/* Страница "Проект на стадии открытия" */
.error_page {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	width: 100%;
	padding: 8rem 2rem;
	font-size: 1.5rem;
	font-weight: bold;
	text-align: center;
}

/* Страница 404 — "Не найдено" */
.not_founded_page {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 70vh;
	padding: 2rem;
	font-size: 1.5rem;
	font-weight: bold;
	text-align: center;
}

/* =============================================================================
   🪟 ВСПЛЫВАЮЩИЕ ОКНА (POPUP)
   ============================================================================= */

   :root {
	/* ✖️ SVG-иконка крестика в формате base64 (92×92) */
	--cross_svg: 'data:image/svg+xml;base64,PHN2ZyBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA5MiA5MiIgaGVpZ2h0PSI5MiIgdmlld0JveD0iMCAwIDkyIDkyIiB3aWR0aD0iOTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTcwLjcgNjQuM2MxLjggMS44IDEuOCA0LjYgMCA2LjQtLjkuOS0yIDEuMy0zLjIgMS4zcy0yLjMtLjQtMy4yLTEuM2wtMTguMy0xOC4zLTE4LjMgMTguM2MtLjkuOS0yIDEuMy0zLjIgMS4zcy0yLjMtLjQtMy4yLTEuM2MtMS44LTEuOC0xLjgtNC42IDAtNi40bDE4LjMtMTguMy0xOC4zLTE4LjNjLTEuOC0xLjgtMS44LTQuNiAwLTYuNHM0LjYtMS44IDYuNCAwbDE4LjMgMTguMyAxOC4zLTE4LjNjMS44LTEuOCA0LjYtMS44IDYuNCAwczEuOCA0LjYgMCA2LjRsLTE4LjMgMTguM3oiLz48L3N2Zz4=';
}

/* Фоновая подложка под попап */
.popup_back {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.6);
	z-index: 100;
	overflow-y: scroll;
}

/* Внутренний контейнер для центрирования */
.popup_back_in {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 100%;
	padding: 1rem;
}

/* Сам попап */
.popup {
	position: relative;
}

/* Кнопка закрытия (крестик) */
.popup_close_icon {
	position: absolute;
	top: 0;
	right: 0;
	transform: translate(0, -50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.4rem;
	height: 1.4rem;
	background: #fff;
	border-radius: 50%;
	cursor: pointer;
	transition: transform 0.2s ease;
	background-image: var(--cross_svg);
	background-size: contain;
	background-repeat: no-repeat;
}

.popup_close_icon:hover {
	transform: translate(0, -50%) scale(1.1);
}

/*
---------------------------------------------------------
			  Всплывающие уведомления
---------------------------------------------------------
*/
.notifications_container {
    position: fixed; bottom: 1rem; z-index: 10000;
    display: flex;
    flex-direction: column;
    /* Естественный порядок: сверху вниз */
    gap: 0.6rem;
    pointer-events: none;
}

/* Позиционирование: слева */
.notifications_container.left {
    left: 1rem;
    align-items: flex-start;
}

/* Позиционирование: справа */
.notifications_container.right {
    right: 1rem;
    align-items: flex-end;
}

/* Позиционирование: по центру */
.notifications_container.center {
    left: 50%;
	transform: translateX(-50%);
    align-items: center;
}

	.notification {
		display: inline-block;
		font-size: 0.9rem;
		padding: 0.8rem 1.2rem;
		border-radius: 0.5rem;
		box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.25);
		max-width: 15rem;
		word-wrap: break-word;
		opacity: 0;
		/* Начальная позиция: ниже своего места */
		transform: translateY(calc(100% + 2rem));
		transition: opacity 0.3s ease, transform 0.3s ease;
		pointer-events: auto;
		width: auto;
	}

		.notification.show {
			opacity: 1;
			transform: translateY(0);
			/* Плавно всплывает на своё место */
		}

		.notification .close-btn {
			position: absolute; top: 0; right: 0;
			transform: translate(50%, -50%);
			cursor: pointer;
			color: #ccc;
			background: #222;
			width: 1.2rem; height: 1.2rem;
			border-radius: 50%;
			display: inline-flex; align-items: center;
			justify-content: center;
			text-align: center;
		}

		.notification .close-btn:hover {
			color: #fff;
		}

/*
----------------------------------------------------
-- ПЛАВАЮЩИЕ ОКНА (ОКНО ПОДТВЕРЖДЕНИЯ И ОБЫЧНОЕ) ---
----------------------------------------------------
*/

.floating_window {
    position: fixed; z-index: 10000;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 0.4rem;
    padding: 1rem;
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.3);
}

.floating_window .confirm_message {
    margin-bottom: 0.8rem;
    text-align: center;
    white-space: pre-line;
}

.floating_window .confirm_buttons_container {
    display: flex;
    gap: 0.8rem;
    justify-content: center;
}

.confirm_buttons_container button {
    text-align: center;
    padding: 0.4rem 0.8rem 0.6rem 0.8rem;
    color: white;
    border: none;
    border-radius: 0.3rem;
    cursor: pointer;
}

.confirm_buttons_container .confirm_button {
    background-color: #4CAF50;
}

.confirm_buttons_container .cancel_button {
    background-color: #f44336;
}

/*
----------------------------------------------------
------------------ МОДАЛЬНОЕ ОКНО ------------------
----------------------------------------------------
*/

body.modal_open {
	overflow: hidden;
	padding-right: 15px; /* Компенсация ширины скроллбара */
}

	.modal_overlay {
		position: fixed; top: 0; left: 0; right: 0; bottom: 0;
		background-color: rgba(0, 0, 0, 0.7);
		z-index: 1000;
		display: flex;
		justify-content: center;
		align-items: flex-start; /* Изменено на flex-start */
		overflow-y: auto; /* Добавляем прокрутку */
		padding: 2rem 0; /* Добавляем отступы по вертикали */
		box-sizing: border-box;
	}

		.modal {
			background-color: white;
			padding: 2rem;
			border-radius: 0.5rem;
			min-width: 5rem; max-width: 80%;
			position: relative;
			font-size: 1.15rem;
			opacity: 0;
			transform: translateY(-20px);
			transition: opacity 0.3s ease, transform 0.3s ease;
			margin: auto; /* Центрируем по горизонтали и вертикали */
		}

		.modal_visible {
			opacity: 1;
			transform: translateY(0);
		}

		.modal_close {
			position: absolute; top: -1rem; right: -1rem;
			width: 2rem; height: 2rem;
			background-color: white;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			cursor: pointer;
			font-size: 1.5rem;
			border: none;
			z-index: 1001;
		}

		.modal_close:hover {
			background-color: #f0f0f0;
		}



/* =============================================================================
   🔐 ФОРМЫ АВТОРИЗАЦИИ И РЕГИСТРАЦИИ
   ============================================================================= */

.auth_content {
	width: 25vw;
	background: #ddd;
}

.auth_form {
	padding: 2rem 1.5rem 2.5rem 1.5rem;
}

.auth_row {
	margin-bottom: 1rem;
}

.auth_row:last-of-type {
	margin-bottom: 0;
}

.auth_form_title {
	text-align: center;
	font-size: 1.3rem;
	color: #eee;
}

/* Текстовые кнопки внутри формы */
.auth_text_button {
	color: DodgerBlue;
	cursor: pointer;
	font-size: 0.8rem;
}

.auth_text_button:hover {
	text-decoration: underline;
}

/* Сообщения под полями (статусы, ошибки) */
.auth_field_status {
	font-size: 0.8rem;
	color: #bbb;
}

.auth_field_status_error {
	color: red;
}

/* Переключатели типа авторизации */
.auth_toggle_row {
	text-align: center;
}

.auth_toggle_button {
	color: DodgerBlue;
	cursor: pointer;
	font-weight: bold;
}

.auth_toggle_button:hover {
	text-decoration: underline;
}

.auth_toggle_separator {
	color: #999;
	display: inline-block;
	margin: 0 0.5rem;
}


/* =============================================================================
   ⏳ АНИМАЦИЯ ЗАГРУЗКИ С 3 ТОЧКАМИ
   ============================================================================= */

.anim_dots {
	display: inline-flex;
	justify-content: center;
}

.anim_dots div {
	width: 0.5rem;
	height: 0.5rem;
	margin: 0 0.3rem;
	background-color: crimson;
	border-radius: 50%;
	opacity: 0;
}

.anim_dots div:nth-of-type(1) {
	animation: dotFlashing 1s infinite ease-in-out;
}

.anim_dots div:nth-of-type(2) {
	animation: dotFlashing 1s infinite ease-in-out 0.2s;
}

.anim_dots div:nth-of-type(3) {
	animation: dotFlashing 1s infinite ease-in-out 0.4s;
}

@keyframes dotFlashing {
	0%, 80%, 100% {
		opacity: 0;
		transform: scale(1);
	}
	40% {
		opacity: 1;
		transform: scale(1.5);
	}
}


/* =============================================================================
   📱 АДАПТАЦИЯ ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ
   ============================================================================= */

@media screen and (max-width: 480px) {
	html, body {
		font-size: 4.5vw; /* Адаптивный размер шрифта на мобильных */
	}
}