/* © 2025 Mark Kats. Все права защищены. Копирование и переработка запрещены. */

a{
	all:unset;
	display:inline;
	color:#8fdfff;
	text-decoration:underline;
	cursor:pointer;
}

.page-center{
	min-height:100svh;
	display:grid;
	place-items:center;
}

.wrap{
	max-width:400px;
	width:100%;
	margin: 0 !important;
}

.auth-card{
	padding:14px;
}

.subheading{
	display:block;
	color:#aaa;
	margin:0;
	margin-top:.25em;
	font-family:'Fira Mono', monospace;
	font-size:.9em;
}

.auth-form label{
	display:block;
	margin-top:.6em;
}
.auth-form .field-label{
	display:block;
	font-size:13px;
	color:#bfbfbf;
	margin:0 0 .25em;
}
.auth-form input[type="text"],
.auth-form input[type="password"],
.auth-form input[type="email"]{
	height:36px;
	border-radius:8px;
	border:1px solid #2a2d35;
	background:#15171b;
	color:#fff;
	padding:0 10px;
	max-width:100%;
	font-family:var(--font-ui);
	box-sizing:border-box;
}

.password-wrapper{
	position:relative;
}
.password-wrapper input{
	height:36px;
	padding-right:50px;
	width: 89%;
}
.toggle-password{
	position:absolute;
	top:54%;
	right:6px;
	transform:translateY(-50%);
	height:32px;
	width:32px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	border-radius:8px;
	border:1px solid var(--hair-strong);
	background:rgba(255,255,255,.06);
	color:#fff;
	cursor:pointer;
	line-height:1;
	transition: background .12s ease, border-color .12s ease, transform .08s ease, box-shadow .12s ease;
}
.toggle-password:hover{
	background:var(--hover);
	border-color:var(--hair-strong);
	box-shadow:0 0 0 3px rgba(255,255,255,.07) inset;
}
.toggle-password:active{
	transform:translateY(-50%) scale(.98);
}

.actions{
	display:flex;
	gap:8px;
	margin-top:1em;
}
.actions .btn{
	height:40px;
	flex:1 0 0;
	min-width:0;
	justify-content:center;
}
.btn.block{
	width:100%;
	justify-content:center;
	height:40px;
}
.btn.ghost{ background:rgba(255,255,255,.05); }
.btn.ghost:hover{ background:rgba(255,255,255,.10); }

.error{ display:none; }
.info-text,
.policy-note{
	font-size:.8em;
	color:rgba(255,255,255,.7);
	margin-top:10px;
	text-align:center;
	margin-bottom: 3px;
}
.policy-note a{
	display:inline;
	color: #8fdfff;
	text-decoration:underline;
}

@media (max-width:560px){
	.actions{ gap:6px; }
}

.auth-form input[name="login"]{
	display: block;
	width: 100%;
}