@charset "utf-8";
/* CSS Document */
* {margin: 0;padding: 0;box-sizing: border-box;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;}
body {display: flex;justify-content: center;align-items: center;min-height: 100vh;min-height: 100dvh;background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);padding: 20px;overflow: hidden;}
.login-container {width: 100%;max-width: 400px;background: rgba(255, 255, 255, 0.03);border: 1px solid rgba(255, 255, 255, 0.1);border-radius: 16px;padding: 40px 30px;backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);transition: transform 0.3s ease, box-shadow 0.3s ease;}
.login-container:hover {transform: translateY(-2px);box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.5);}
/* Заголовок */
.login-header {text-align: center;margin-bottom: 35px;}
.login-header h2 {color: #ffffff;font-size: 28px;font-weight: 600;letter-spacing: -0.5px;}
/* Групи полів вводу */
.input-group {margin-bottom: 25px;}
.input-group label {display: block;color: #94a3b8;margin-bottom: 8px;font-size: 14px;font-weight: 500;transition: color 0.3s ease;}
.input-group input {width: 100%;padding: 14px 16px;background: rgba(255, 255, 255, 0.05);border: 1px solid rgba(255, 255, 255, 0.1);border-radius: 8px;color: #ffffff;font-size: 16px;outline: none;transition: all 0.3s ease;}
/* Ефекти при фокусі на інпутах */
.input-group input:focus {background: rgba(255, 255, 255, 0.08);border-color: #38bdf8;box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15);}
.input-group input:focus + label {color: #38bdf8;}
/* Кнопка відправки */
.login-btn {
	width: 100%;
	padding: 14px;
	background: #38bdf8;
	border: none;
	border-radius: 8px;
	color: #0f172a;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
	margin-top: 10px;
}
.login-btn:hover {
	background: #0ea5e9;
	border-radius: 16px;
	transform: scale(1.01);
}
.login-btn:active {background: #0284c7;transform: scale(0.99);}
/* Оновлена адаптивність для мобільних пристроїв */
@media (max-width: 480px) {
body {
align-items: center; /* Центруємо вертикально, щоб уникнути виштовхування вниз */
padding: 16px;
}
.login-container {
padding: 30px 20px;
margin-bottom: 0; /* Прибираємо нижній відступ, який міг створювати скрол */
}
.login-header h2 {
font-size: 24px;
}
}