html,
	body {
		height: 100%;
		margin: 0;
		background: var(--bg-sidebar);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.login-wrap {
		width: 100%;
		max-width: 400px;
		padding: 20px;
	}

	.login-logo {
		display: flex;
		align-items: center;
		gap: 14px;
		justify-content: center;
		margin-bottom: 28px;
	}

	.login-title-text {
		font-size: 22px;
		font-weight: 800;
		color: #fff;
	}

	.login-sub-text {
		font-size: 12px;
		color: rgba(255, 255, 255, .55);
		margin-top: 2px;
	}

	.login-card {
		background: var(--bg-card);
		border: 1px solid var(--border);
		border-radius: var(--r-lg);
		box-shadow: var(--sh-md);
		padding: 28px;
	}

	.login-heading {
		font-size: 18px;
		font-weight: 700;
		color: var(--text);
		margin-bottom: 6px;
	}

	.login-hint {
		font-size: 12px;
		color: var(--text-muted);
		margin-bottom: 22px;
	}

	.lf-group {
		margin-bottom: 16px;
	}

	.lf-label {
		display: block;
		font-size: 11px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: .4px;
		color: var(--text-muted);
		margin-bottom: 5px;
	}

	.lf-input {
		width: 100%;
		padding: 10px 12px;
		border: 1.5px solid var(--border-strong);
		border-radius: var(--r-sm);
		font-size: 14px;
		font-family: var(--font);
		color: var(--text);
		background: var(--bg-card);
		outline: none;
		transition: border-color .15s, box-shadow .15s;
		box-sizing: border-box;
	}

	.lf-input:focus {
		border-color: var(--primary);
		box-shadow: 0 0 0 3px var(--primary-glass);
	}

	.lf-error {
		background: var(--danger-light);
		border: 1px solid #fca5a5;
		color: var(--danger-dark);
		border-radius: var(--r-sm);
		padding: 9px 14px;
		font-size: 13px;
		margin-bottom: 16px;
		display: flex;
		align-items: center;
		gap: 8px;
	}

	.lf-submit {
		width: 100%;
		padding: 11px;
		background: var(--primary);
		color: #fff;
		border: none;
		border-radius: var(--r-sm);
		font-size: 14px;
		font-weight: 700;
		cursor: pointer;
		font-family: var(--font);
		transition: background .15s, box-shadow .15s;
		margin-top: 4px;
	}

	.lf-submit:hover {
		background: var(--primary-dark, #4D237E);
		box-shadow: 0 4px 12px rgba(94, 43, 154, .3);
	}

	.login-footer {
		text-align: center;
		margin-top: 20px;
		font-size: 11px;
		color: rgba(255, 255, 255, .35);
	}

	/* Показать/скрыть пароль */
	.lf-pass-wrap {
		position: relative;
	}

	.lf-pass-wrap .lf-input {
		padding-right: 40px;
	}

	.lf-eye {
		position: absolute;
		right: 10px;
		top: 50%;
		transform: translateY(-50%);
		background: none;
		border: none;
		cursor: pointer;
		color: var(--text-muted);
		padding: 4px;
		line-height: 0;
	}

	.lf-eye:hover {
		color: var(--primary);
	}