<!-- Модальные окна -->
	<dialog class="modal" id="login-modal">
		<div class="modal-content">
			<div class="modal-header">
				<h2>Авторизация</h2>
			</div>
			<button class="btn btn-modal btn-discord">Войти через Discord</button>
			<div class="modal-separator">или</div>
			<form class="modal-form">
				<input class="modal-input" type="email" placeholder="Почта" required>
				<input class="modal-input" type="password" placeholder="Пароль" required>
				<button class="btn-small">Забыли пароль?</button>
				<button type="submit" class="btn btn-modal">Войти</button>
			</form>
			<div class="register-text">
				Нет аккаунта?<button id="switch-to-register" >Создайте сейчас!</button>
			</div>
		</div>
	</dialog>


/* МОДАЛЬНЫЕ ОКНА */
/* основные стили для модального окна */
.modal {
    width: 30vw;
    padding: 0;
    border: 1px solid #ccc;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    background-color: white;
    font-family: inherit;
    text-align: center;
	box-sizing: border-box; 
}

.modal-content {
    padding: 2vw;
}

.modal-header {
    padding-bottom: 2vw;
}

.modal-header h2 {
    color: #888;
    font-size: 2vw;
    margin: 0vw;
}

.modal-separator {
	font-size: 1vw;
    margin: 1vw 0;
    color: #888;
}

.modal-input {
    width: 100%;
    padding: 1vw;
    margin-bottom: 1vw;
    border: 1px solid #ccc;
    font-size: 1vw;
    font-family: inherit;
    box-sizing: border-box;
}

.modal-form {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.link-small {
    font-size: 0.9vw;
    color: #888;
    text-decoration: underline;
    cursor: pointer;
    display: block;
    margin: 0.5vw 0;
    text-align: center;
    background: none;
    border: none;
    padding: 0;
}

.link-small:hover {
    color: #f4f;
}

.btn-discord {
    color: white;
    background: #5865F2;
}

.btn-discord:hover {
	color: white;
    background: #4752c4;
    border: 1px solid white;
}

.btn-discord:active {
    box-shadow: inset 0 0 0 2px #343da3;
}

.btn-discord[disabled] {
    color: #D9D9D6;
    background: #8891f7;
    border: 1px solid #a9a9a9;
}

.btn-modal {
    width: 100%;
    padding: 1vw;
}

.register-text {
    font-size: 1vw;
    color: #888;
    margin-top: 1vw;
}

.register-text button {
    appearance:		 none;
    background:		 none;
    border:			 none;
    color:			 #555;
    cursor:			 pointer;
    font-family:	 inherit;
    font-size:		 1vw;
    text-decoration: none;
}

.register-text button:hover {
    color:			 #f4f;
    text-decoration: underline;
}

.register-text button[disabled] {
    color:			 #a9a9a9;
    cursor:			 not-allowed;
}

.btn-small {
    font-family: inherit;
    background: none;
    border: none;
    color: #888;
    font-size: 0.9vw;
    cursor: pointer;
    display: block;
    margin: 0.5vw 0;
    text-align: center;
    padding: 0;
    align-self: flex-end;
    margin-top: 0.5vw;
}

.btn-small:hover {
    color: #f4f;
    text-decoration: underline;
}

.resend-code-btn:hover,
.back-btn:hover {
    color: #f4f;
}

.confirm-text {
    color: #555;
    font-size: 1.25vw;
    text-align: center;
    margin: 0vw auto 1vw;
}

.confirm-buttons {
    display: flex;
    justify-content: center;
    gap: 1vw;
    padding-top: 1vw;
    padding-left: 2vw;
    padding-right: 2vw;
}


#login-modal .btn-small {
    margin-top: -0.5vw;
}




добавь сюда текст красный текст для всяких ошибок, типа введите пароль, введите почту, аккаунт не найден итд итп