:root {
    font-size:16px;
        --primary-yellow:#ffd249ff;
        --primary-yellow-active:#f2c200ff;
        --primary-yellow-hover:#ffcc00ff;
    --gray-black:#000000ff;
    --gray-white:#fffffff;
    --gray-100: #f6f7f9ff;
    --shadow-15: 0 0 0.9375rem rgba(0,21,64,0.08);
    font-family: Ubuntu, sans-serif;
    font-weight: 400;
}
.auth_root {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-block-size: 100dvh;
    background: var(--gray-100);
}

.auth_container {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 1.875rem;
    padding: 1.25rem 2.5rem;
}
.auth_logo {
    flex-shrink: 0;
    align-self: center;
    margin-block-start: auto;
}
.auth_image {
    inline-size: 153px;
    block-size: 36px;
}
.auth_fake_main{
    align-self: center;
}
.auth_fake_button {
    padding: 0;
    min-inline-size: auto;
    min-block-size: auto;
    color:#0047d9ff;
    font: inherit;
    text-decoration: none;
    font-weight: 500;
    line-height: inherit;
    display: inline;
    cursor: pointer;
}
.auth_fake_button:hover{
    text-decoration: underline;
}
.auth_body{
    display: flex;
    justify-content: center;
    flex-shrink: 1;
    margin-block-end: auto;
}
.auth_form_root {
    display: flex;
    flex-direction: column;
    background: var(--gray-white);
    box-shadow: var(--shadow-15);
    max-inline-size: 22.5rem;
    inline-size: 100%;
}

.auth_form_body {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.875rem 2.5rem;
}

.auth_signin {
    display: flex;
    flex-direction: column;
    gap: .625rem;
    width: 100%;
}

.auth_input_root_login {
    --border-style: solid;
    --border-width: 1px;
    --body-border-color: #babfc3ff;
    display: flex;
    flex-direction: column;
    gap: .625rem;
    position: relative;
    cursor: text;
    width: 100%;
}

.field_login_field {
    min-block-size: 2.5rem;
    display: flex;
    align-items: center;
    border-radius: .1875rem;
    border: 1px solid #babfc3ff;
    width: 100%;
    transition: border-color 0.2s ease;
}

/* Фокус для контейнера */
.auth_input_root_login:focus-within .field_login_field {
    border-color: #146aa8ff;
    box-shadow: 0 0 0 2px rgba(25, 128, 237, 0.1);
}

.field_login_body {
    padding: .625rem .937rem;
    gap: .625rem;
    display: flex;
    align-items: center;
    align-self: normal;
    flex-grow: 1;
    inline-size: 100%;
    box-sizing: border-box;
}

.field_login_content {
    font-size: .875rem;
    line-height: 1rem;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--gray-black);
    flex-grow: 1;
    display: flex;
    align-items: center;
    inline-size: 100%;
    overflow: hidden;
}

.login_input {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    inline-size: 100%;
    color: var(--gray-black);
    border: none;
    outline: none;
    background: transparent;
    padding: 0;
    font: inherit;
    height: 100%;
}

/* Плейсхолдер */
.login_input::placeholder {
    color: #828a90ff;
}

/* Ховер для всего поля */
.auth_input_root_login:hover .field_login_field {
    border-color: #828a90ff;
}
/* Общие стили для всех полей */
.auth_input_root {
    --border-style: solid;
    --border-width: 1px;
    --body-border-color: #babfc3ff;
    display: flex;
    flex-direction: column;
    gap: .625rem;
    position: relative;
    cursor: text;
    width: 100%;
}

.field_container {
    min-block-size: 2.5rem;
    display: flex;
    align-items: center;
    border-radius: .1875rem;
    border: 1px solid #babfc3ff;
    width: 100%;
    transition: border-color 0.2s ease;
    background-color: var(--gray-white);
}

/* Фокус для контейнера */
.auth_input_root:focus-within .field_container {
    border-color: #146aa8ff;
    box-shadow: 0 0 0 2px rgba(25, 128, 237, 0.1);
}

.field_body {
    padding: .625rem .937rem;
    gap: .625rem;
    display: flex;
    align-items: center;
    align-self: normal;
    flex-grow: 1;
    inline-size: 100%;
    box-sizing: border-box;
}

.field_content {
    font-size: .875rem;
    line-height: 1rem;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--gray-black);
    flex-grow: 1;
    display: flex;
    align-items: center;
    inline-size: 100%;
    overflow: hidden;
    position: relative;
}

.auth_input {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    inline-size: 100%;
    color: var(--gray-black);
    border: none;
    outline: none;
    background: transparent;
    padding: 0;
    font: inherit;
    height: 100%;
    font-family: Ubuntu, sans-serif;
}

/* Плейсхолдер */
.auth_input::placeholder {
    color: #828a90ff;
}

/* Ховер для всего поля */
.auth_input_root:hover .field_container {
    border-color: #828a90ff;
}

/* Отступы между полями в форме */
.auth_signin {
    display: flex;
    flex-direction: column;
    gap: 1.25rem; /* Увеличенный отступ между полями */
    width: 100%;
}

.button_signin {
    min-block-size: 2.5rem;
    min-inline-size: 2.5rem;
    padding: .3125rem .625rem;
    gap: .3125rem;
    font-size: .875rem;
    line-height: 1rem;
    font-weight: 400;
    letter-spacing: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-yellow);
    color: #000000ff;
    border: 1px solid #ffd249ff;
    border-radius: .1875rem;
    cursor: pointer;

    /* Анимация для плавности эффектов */
    transition: all 0.2s ease;

    /* Отключаем стандартное выделение при нажатии */
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* Эффект при наведении (затемнение через изменение фона) */
.button_signin:hover {
    background: var(--primary-yellow-hover);
}

/* Эффект при нажатии (активное состояние) */
.button_signin:active {
    background: var(--primary-yellow-active);
    transform: scale(0.98); /* Легкое уменьшение кнопки */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2); /* Внутренняя тень для эффекта вдавливания */
}

/* Фокус для доступности */
.button_signin:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 204, 0, 0.3);
}

/* Для мобильных устройств: уменьшаем эффект scale */
@media (hover: none) and (pointer: coarse) {
    .button_signin:active {
        transform: scale(0.99);
    }
}

.footer{
    border-block-start: 1px solid #ecf0f6ff;
    margin-block-start: 1.75rem;
    padding: 1.25rem 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.reg_button{
    padding: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: .1875rem;
    cursor: pointer;
    min-inline-size: auto;
    min-block-size: auto;
    color: #828a90ff;
    gap: .3125rem;
    font-size: .875rem;
    line-height: 1rem;
    font-weight: 400;
    letter-spacing: 0;
}
.captcha{
    display:flex;
    flex-direction: column;
    gap: .625rem;
}