@keyframes formSlideIn {
	0% {
		opacity:0;
		transform:translateY(30px);
	}
	100% {
		opacity:1;
		transform:translateY(0);
	}
}
@keyframes formSlideIn {
	0% {
		opacity:0;
		transform:translateY(30px);
	}
	100% {
		opacity:1;
		transform:translateY(0);
	}
}
@keyframes formSlideIn {
	0% {
		opacity:0;
		transform:translateY(30px);
	}
	100% {
		opacity:1;
		transform:translateY(0);
	}
}
@keyframes fadeIn {
	from {opacity:0}
	to {opacity:1}
}
html, body {height:100%}
html {scrollbar-width:none}
* {margin:0; padding:0; box-sizing:border-box; font-family:'Roboto', sans-serif; scroll-behavior:smooth}
body {background:#0d0d0d; color:#f1f1f1; line-height:1.8; overflow-x:hidden;}
body::-webkit-scrollbar {width:0; height:0;}
header {display:flex; justify-content:space-between; align-items:center; padding:20px 10%; background:rgba(0, 0, 0, 0.8); backdrop-filter:blur(5px); border-bottom:1px solid rgba(255, 255, 255, 0.1); position:sticky; top:0; z-index:1000;}
.logo {text-decoration:none; font-size:2rem; font-weight:bold; color:#0acf97; text-transform:uppercase; letter-spacing:3px;}
nav {display:flex; margin-left:auto}
nav a {text-decoration:none; margin:0 15px; color:#f1f1f1; font-size:1.2rem; font-weight:500; transition:color 0.3s ease;}
nav a:hover {color:#0acf97;}
.section {display:flex; align-items:center; justify-content:center; padding:0 10%; text-align:center; position:relative; min-height:calc(100% - 190px)}
.form-register {max-width:450px; margin:50px auto; padding:35px; background:#333; border-radius:20px; box-shadow:0 10px 40px rgba(0, 0, 0, 0.4); position:relative; z-index:2; overflow:hidden; animation:formSlideIn 1s ease-out;}
.form-register {max-width:450px; width:100%; margin:50px auto; padding:40px; background:#1f1f1f; border-radius:20px; box-shadow:0 12px 40px rgba(0, 0, 0, 0.3); position:relative; overflow:hidden; animation:formSlideIn 1s ease-out;}
.form-register h2 {color:#fff; text-align:left; font-size:2rem; margin-bottom:30px; letter-spacing:1px; font-weight:600;}
.form-group {position:relative; margin-bottom:25px;}
.form-group label {font-size:1.1rem; color:#aaa; margin-bottom:8px; display:block; font-weight:500; letter-spacing:0.5px; text-align:left}
.form-group input {width:100%; padding:15px 20px; font-size:1rem; color:#333; background:#f5f5f5; border:1px solid #ddd; border-radius:12px; outline:none; transition:all 0.3s ease-in-out;}
.form-group input:focus {border-color:#0acf97; box-shadow:0 0 12px rgba(6, 179, 132, 0.8); transform:translateY(-3px); background-color:#fff;}
.form-group input::placeholder {color:#aaa;}
.btn {width:100%; padding:15px; font-size:1.1rem; background-color:#0acf97; color:white; border:none; border-radius:12px; cursor:pointer; transition:all 0.3s ease; letter-spacing:1px; box-shadow:0 5px 15px rgba(6, 179, 132, 0.3);}
.btn:hover {background-color:#06b384; transform:translateY(-3px); box-shadow:0 8px 20px rgba(6, 179, 132, 0.5);}
.btn:active {transform:translateY(0); box-shadow:0 4px 10px rgba(6, 179, 132, 0.4);}
.form-register>a {color:#0acf97; text-decoration:none; text-align:center; display:block; margin-top:20px; font-size:0.9rem;}
.form-register>a:hover {color:#06b384}
footer {padding:30px; background:#121212; color:#b0b0b0; text-align:center; border-top:2px solid #333;}
#form-error {display:none}
.error-list {list-style-type:none; padding:0; margin-top:20px;}
.error-item {background-color:#ffcccc; color:#b22222; padding:10px; margin-bottom:5px; border-radius:5px; font-size:14px;}
.error-item strong {font-weight:bold}
div.policy {display:flex; flex-direction:column; align-items:center; line-height:1.4; font-size:12px; margin-bottom:24px}
div.policy>.as {display:flex; align-items:center; gap:6px}
div.policy>.as>.a {text-decoration:none; color:#0acf97; cursor:pointer}

@media (min-width: 160px) and (max-width:820px) {
	header {padding:20px 0 20px 16px}
	.logo {display:none}
	nav a {font-size:16px; margin:0 22px 0 0;}
	.section {padding:40px 18px; min-height:calc(100% - 157px)}
	.form-register {padding:40px 20px;}
	footer {font-size:14px; color:#fff}
}