/* Header Styles */
header {
    background: #fff;
    box-shadow: 0 0.125rem 0.625rem rgba(0,0,0,0.1);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    padding: 1.25rem 1.25rem;
    flex-wrap: wrap;
    max-width: 81.25rem;
}

.header-left {
    display: flex;
}

.logo-first {
    width: 50%;
    font-size: 1.5rem;
    font-weight: bold;
    display: flex;
    align-items: center;
}

.logo-first span {
    background: linear-gradient(90deg, #0F4097 0%, #009FCB 100%);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}


.logo-first i {
    margin-right: 0.625rem;
    font-size: 1.75rem;
}
.logo-second {
    font-size: 1.5rem;
    font-weight: bold;
    display: flex;
    align-items: center;
}

.logo-second i {
    margin-right: 0.3125rem;
    font-size: 0.9375rem;
    color: black;
}

.user-actions {
    display: flex;
    gap: 1.5625rem;
    align-items: center;
}

.user-actions a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #333;
    font-size: 0.875rem;
    font-weight: bold;
    margin-left: 1.25rem;
}

.user-actions a i {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.8125rem;
}

.user-actions a img {
    width: 1.5625rem;
    height: 1.5625rem;
    display: block;
}

/*login*/
.auth-login-box {
    background: #24282e;
    border-radius: 0.625rem;
    padding: 2rem 1.5rem 2rem 1.5rem;
    width: 45rem;
    max-width: 97vw;
    margin: 1.5rem auto 0 auto;
    box-sizing: border-box;
}

.auth-login-tabs {
    display: flex;
    margin-bottom: 1.875rem;
    align-items: center;
    justify-content: space-between;
}

.auth-login-tab {
    flex: 1 1 50%;
    background: none;
    color: #fff;
    font-size: 2.5rem;
    text-align: center;
    font-weight: 400;
    padding: 2rem 0;
    border-radius: 0.5rem 0.5rem 0 0;
    transition: background 0.13s, color 0.13s;
    cursor: pointer;
}

.auth-login-tab--active {
    background: #01AEF0;
    color: #fff;
    font-weight: 400;
    border-radius: 0.5rem;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.login-form-row {
    display: flex;
    gap: 1.875rem;
    margin-bottom: 0;
}

.login-input {
    flex: 1 1 50%;
    background: #fff;
    border: none;
    border-radius: 0.625rem;
    font-size: 1.25rem;
    color: #222;
    padding: 0.875rem 1.25rem;
    font-family: inherit;
    box-sizing: border-box;
    outline: none;
    margin-bottom: 0;
    transition: box-shadow 0.14s;
}

.login-input::placeholder {
    color: #bbb;
    opacity: 1;
    font-weight: 400;
}

.login-input:focus {
    box-shadow: 0 0 0 0.125rem #f3b30744;
}

.forgot-row {
    text-align: right;
    margin-top: 0.5rem;
    margin-bottom: 1.125rem;
    min-height: 1.25rem;
}

.forgot-link {
    font-size: 1.0625rem;
    color: #f04e4e;
    text-decoration: none;
    cursor: pointer;
    font-weight: 400;
}

.login-btn {
    width: 23.125rem;
    max-width: 100%;
    display: block;
    margin: 0 auto;
    background: #01AEF0;
    color: #fff;
    font-size: 2rem;
    font-weight: 400;
    border: none;
    border-radius: 0.625rem;
    padding: 0.625rem 0 0.8125rem 0;
    margin-top: 0.5rem;
    cursor: pointer;
    transition: background 0.15s;
}

.login-btn:hover,
.login-btn:focus {
    background: #01AEF0;
}


.auth-register-box {
    background: #24282e;
    border-radius: 0.625rem;
    padding: 2.25rem 1.5rem 1.75rem 1.5rem;
    width: 34.0625rem;
    max-width: 96vw;
    margin: 1.5rem auto 0 auto;
    box-sizing: border-box;
    position: absolute;
}
.auth-register-tabs {
    display: flex;
    margin-bottom: 1.75rem;
    align-items: center;
    justify-content: space-between;
}
.auth-tab {
    flex: 1 1 50%;
    background: none;
    color: #fff;
    font-size: 2rem;
    text-align: center;
    font-weight: 400;
    padding: 0.75rem 0;
    border-radius: 0.5rem 0.5rem 0 0;
    transition: background 0.13s, color 0.13s;
    cursor: pointer;
    /* Если нужен переход между табами — добавить JS-логику */
}
.auth-tab--active {
    background: #01AEF0;
    color: #fff;
    font-weight: 400;
    border-radius: 0.5rem;
}
.register-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.register-form-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 0;
}
.register-input {
    flex: 1 1 50%;
    background: #fff;
    border: none;
    border-radius: 0.5rem;
    font-size: 14px;
    color: #222;
    padding: 0.6875rem 1rem;
    font-family: inherit;
    box-sizing: border-box;
    outline: none;
    margin-bottom: 0;
    transition: box-shadow 0.14s;
}
.register-input:focus {
    box-shadow: 0 0 0 0.125rem #f3b30744;
}
.register-btn {
    width: 100%;
    background: #01AEF0;
    color: #fff;
    font-size: 1.75rem;
    font-weight: 400;
    border: none;
    border-radius: 0.5rem;
    padding: 0.625rem 0 0.8125rem 0;
    margin-top: 1rem;
    cursor: pointer;
    transition: background 0.15s;
}
.register-btn:hover,
.register-btn:focus {
    background: #01AEF0;
}

/* ---- ПЛАНШЕТЫ (до 1024px) ---- */
@media (max-width: 1024px) {
    .header-content { padding: 0 1vw; }
    .header-left { width: 45%; }
    .user-actions { gap: 1rem; }
}

/* ---- МОБИЛЬНЫЕ (до 768px) ---- */
@media (max-width: 768px) {
    .header-content { gap: 0.7rem; padding: 0.7rem 0.5rem; }
    .header-left, .logo-first, .logo-second { width: 45%; font-size: 1.1rem; }

    .user-actions { gap: 0.5rem; font-size: 0.8rem; }
    .user-actions a { margin-left: 0.3rem; }
}

/* ---- СМАРТФОНЫ (до 425px) ---- */
@media (max-width: 425px) {
    .main,
    .header-content { padding: 0.4rem 0.2rem; }
    .header-left { width: 100%; }
    .header-content { padding: 0.4rem 0.2rem; }
}

/* ---- МАЛЫЕ ЭКРАНЫ (до 320px) ---- */
@media (max-width: 320px) {
    .header-left { width: 100%; flex-direction: row; align-items: center; }
}