@font-face {
    font-family: 'Arista2.0Alternate';
    src: url('fonts/Arista2.0Alternate.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Критически важно для мобильных! */
}
    
@font-face {
    font-family: 'FregatRegular';
    src: url('fonts/FregatRegular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Критически важно для мобильных! */
}

    :root {
    /* Переменные для размеров */
    --input-width: 260px;   /* Ширина полей ввода и кнопки */
    --input-height: 48px;  /* Высота полей ввода и кнопки */
    --input-padding: 0 16px; /* Внутренние отступы */
    --button-height: 48px; /* Высота кнопки (можно отдельно настроить) */
	
   .input-group {
    margin-bottom: 20px;
    text-align: center; /* Центрируем содержимое */
}
}
/* Базовые стили с надежными fallback-шрифтами */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* Системные шрифты как fallback */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 
                Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
}

        /* Основные стили страницы */
        body {
            background-color: #f8f9fa;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        /* Контейнер с содержимым */
        .login-container {
            width: 100%;
            max-width: 380px;
            background-color: white;
            padding: 40px 30px;
            border-radius: 12px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
            text-align: center;
        }

        /* Логотип */
        .logo {
            width: 80px;
            height: 31px;
            margin: 0 auto -15px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-size: 24px;
            font-weight: bold;
        }

        /* Название компании */
        .company-name {
			font-family: 'Arista2.0Alternate', sans-serif;
            color: #333333;
            font-size: 60px;
            font-weight: 600;
            margin-bottom: 0px;
        }
		
		.jina {
			 font-family: 'Arista2.0Alternate', sans-serif;
             color: #FF8706; /* Основной сине-зеленый цвет */
        }

       .vet {
		      font-family: 'Arista2.0Alternate', sans-serif;
              color: #5B8C9A; /* Акцентный оранжевый цвет */
        }
		
	   .subtitle {
		      font-family: 'FregatRegular', sans-serif;
              text-align: center;
              margin-bottom: 40px;
              line-height: 1.3;
        }

        .subtitle-line1, .subtitle-line2 {
			  font-family: 'FregatRegular', sans-serif;
              display: block;
              color: #5b8c9a;
              font-size: 18px;
              font-weight: 400;
}

        .subtitle-line1 {
             margin-bottom: 2px;
}

        /* Поля ввода */
        .input-group {
            margin-bottom: 20px;
            text-align: left;
        }

        input[type="text"],
        input[type="password"] {
			width: var(--input-width);
            height: var(--input-height);
            padding: var(--input-padding);
			align-content: center;
            border: 2px solid #959595;
            border-radius: 10px;
            font-size: 16px;
            transition: border-color 0.3s;
        }

        input[type="text"]:focus,
        input[type="password"]:focus {
            outline: none;
            border-color: #5B8C9A; /* Основной цвет при фокусе */
        }

        /* Кнопка входа */
        .login-btn {
            width: var(--input-width);
            height: var(--input-height);
            padding: var(--input-padding);
            background-color: #5b8c9a; /* Акцентный оранжевый */
			font-family: 'FregatRegular', sans-serif;
            color: white;
            border: none;
            border-radius: 10px;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            transition: background-color 0.3s;
            margin-bottom: 10px;
        }

        .login-btn:hover {
            background-color: #4c7885; /* Темнее при наведении */
        }

        /* Текстовые ссылки */
        .forgot-link {
            color: #5B8C9A;
            text-decoration: none;
            font-size: 14px;
            display: block;
            margin-bottom: 10px;
        }

        .validation-text {
            color: #666;
            font-size: 13px;
        }

        /* Адаптивность для мобильных */
    @media (max-width: 768px)
	{
       body {
        padding: 15px;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
		background-color: white;
       
    }
    
    .login-container {
        width: 100%;
        max-width: 400px; /* Ограничиваем максимальную ширину */
        padding: 30px 20px;
        margin: 0 auto;
		box-shadow: none;
    }
    
    .logo {
        width: 80px;
        height: 31px;
        font-size: 20px;
        margin-bottom: -15px;
    }
    
    .company-name {
		font-family: 'Arista2.0Alternate', sans-serif;
        font-size: 60px;
        margin-bottom: 0px;
    }
	.jina {
			 font-family: 'Arista2.0Alternate', sans-serif;
             color: #FF8706; /* Основной сине-зеленый цвет */
        }

    .vet {
		      font-family: 'Arista2.0Alternate', sans-serif;
              color: #5B8C9A; /* Акцентный оранжевый цвет */
        }
    
    .subtitle {
		font-family: 'FregatRegular', sans-serif;
        margin-bottom: 25px;
    }
    
    .subtitle-line1, .subtitle-line2 {
		font-family: 'FregatRegular', sans-serif;
        font-size: 20px;
    }
    
    :root {
        --input-height: 50px;
        --button-height: 50px;
    }
    
    input[type="text"],
    input[type="password"] {
        font-size: 16px; /* Важно для iOS, чтобы не увеличивался шрифт при зуме */
    }
}