@charset "utf-8";
/* CSS Document */
* {margin: 0;padding: 0;box-sizing: border-box;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;}
:root {
color-scheme: dark;
--bg: #0b0d12;
--panel: rgba(20, 23, 32, 0.88);
--field: #10131b;
--border: #2a2f3d;
--text: #f4f6fb;
--muted: #9299aa;
--accent: #a6f36b;
--accent-hover: #b8ff83;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
margin: 0;
min-height: 100svh;
display: grid;
place-items: center;
padding: 24px;
overflow-x: hidden;
background:
radial-gradient(ellipse at 15% 10%, rgba(87, 110, 72, 0.16), transparent 36%),
radial-gradient(ellipse at 90% 85%, rgba(83, 93, 145, 0.14), transparent 38%),
var(--bg);
color: var(--text);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.login-container {
width: min(100%, 500px);
padding: clamp(28px, 6vw, 42px);
border: 1px solid rgba(255, 255, 255, 0.09);
border-radius: 24px;
background: var(--panel);
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.42),inset 0 1px 0 rgba(255, 255, 255, 0.035);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
.login-header {
text-align: center;
margin-bottom: 30px;
}
.login-header p {
font-size: 14px;
color: #8b949e;
}
/* Групи полів вводу */

.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%;
    min-height: 52px;
	padding: 0 15px;
	border: 1px solid var(--border);
	border-radius: 12px;
	outline: none;
	background: var(--field);
	color: var(--text);
	font: inherit;
	transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.input-group input:hover { border-color: #41495b; }
.input-group input::placeholder { color: #626a7c; }

/* Ефекти при фокусі на інпутах */
.input-group input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(166, 243, 107, 0.12); background: #121720;}
.input-group input:focus + label {color: #38bdf8;}
/* Кнопка відправки */
.login-btn {
width: 100%;
min-height: 54px;
margin-top: 6px;
border: 0;
border-radius: 12px;
background: var(--accent);
color: #11170d;
font: inherit;
font-weight: 750;
cursor: pointer;
transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
.login-btn:hover {
background: var(--accent-hover);
box-shadow: 0 8px 26px rgba(166, 243, 107, 0.14);
}
.login-btn:active {
transform: translateY(1px);
}
.login-btn:focus-visible {
outline: 3px solid rgba(166, 243, 107, 0.55);
outline-offset: 3px;
}
/* адаптивність для мобільних пристроїв */
@media (max-width: 480px) {
body {
align-items: center;
padding: 16px;
}
.login-container {
padding: 30px 20px;
margin-bottom: 0;
}

}