/* === GLOBAL AUTH PAGE STYLING === */
.mx_AuthPage {
    background-color: #050914 !important;
    background-image: url("background.svg") !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

/* Modal/Card Container */
.mx_AuthPage .mx_AuthPage_modalContent {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* Main Card Body (Container for the form) */
.mx_AuthPage .mx_AuthBody,
.mx_AuthPage .mx_AuthBody_loginPanel,
.mx_AuthPage .mx_AuthBody_registerPanel {
    background: rgba(10, 23, 48, 0.96) !important;
    color: #ffffff !important;
    border-radius: 26px !important;
    border: 1px solid #1b2c4a !important;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.7) !important;
    padding: 32px !important;
    
    /* FIX: Разрешаем сжиматься, если экран маленький */
    max-width: 94vw !important; 
    box-sizing: border-box !important;
}

/* === MOBILE RESPONSIVENESS (FIX FOR LOGIN/REGISTER) === */
@media (max-width: 600px) {
    .mx_AuthPage .mx_AuthBody,
    .mx_AuthPage .mx_AuthBody_loginPanel,
    .mx_AuthPage .mx_AuthBody_registerPanel {
        padding: 20px !important;      /* Уменьшаем внутренние отступы */
        min-width: unset !important;   /* Отключаем минимальную ширину Element (которая ломает мобилку) */
        width: 100% !important;        /* Растягиваем на всю доступную ширину */
        margin: 0 auto !important;     /* Центрируем */
    }

    /* Уменьшаем отступы вокруг полей ввода */
    .mx_AuthPage .mx_Field {
        margin-bottom: 15px !important;
    }
    
    /* Логотип поменьше на мобильных */
    .mx_AuthHeader_logo img {
        max-width: 150px !important;
        height: auto !important;
    }
}

/* === TEXT COLORS === */
/* Все заголовки белые */
.mx_AuthPage h1,
.mx_AuthPage h2,
.mx_AuthPage h3,
.mx_AuthPage h4,
.mx_AuthPage_header,
.mx_AuthBody_header,
.mx_AuthBody_headerText,
.mx_AuthHeader h1,
.mx_AuthBody p {
    color: #ffffff !important;
}

/* Подзаголовки светло-голубые */
.mx_AuthPage .mx_AuthHeader_subtitle,
.mx_AuthPage .mx_AuthBody h2,
.mx_AuthPage .mx_AuthBody small {
    color: #dfe7ff !important;
}

/* Надпись "Войти с помощью" */
.mx_AuthPage .mx_AuthBody_loginButtons_label {
    color: #ffffff !important;
}

/* Ссылки (голубые) */
.mx_AuthPage .mx_AuthBody a,
.mx_AuthPage .mx_AuthButtons a,
.mx_AuthPage .mx_AuthFooter a {
    color: #22c1f1 !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

/* Название сервера (голубое) */
.mx_AuthPage .mx_ServerPicker_server,
.mx_AuthPage .mx_AuthBody_serverName {
    color: #22c1f1 !important;
}

/* === DROPDOWN MENU FIX === */
.mx_AuthPage .mx_Dropdown,
.mx_AuthPage .mx_Dropdown_input,
.mx_AuthPage .mx_Dropdown_menu,
.mx_AuthPage .mx_AuthBody_language .mx_Dropdown_input {
    background-color: #0a1628 !important;
    color: #ffffff !important;
    border-color: #1e2d45 !important;
}
.mx_AuthPage .mx_Dropdown_arrow {
    filter: invert(1) !important;
}
.mx_AuthPage .mx_Dropdown_option {
    background-color: #0a1628 !important;
    color: #ffffff !important;
}
.mx_AuthPage .mx_Dropdown_option:hover,
.mx_AuthPage .mx_Dropdown_option_highlight {
    background-color: #0B6BB3 !important;
    color: #ffffff !important;
}

/* === CRITICAL FIX: INPUT FIELDS VISIBILITY === */
.mx_AuthPage .mx_Field_input {
    background-color: #ffffff !important; 
    color: #000000 !important;            
    border: 1px solid #ccc !important;
    border-radius: 8px !important;
    caret-color: #000000 !important;
}

.mx_AuthPage .mx_Field_input:focus {
    outline: none !important;
    border-color: #22c1f1 !important;
    box-shadow: 0 0 0 1px #22c1f1 !important;
}

.mx_AuthPage .mx_Field_input::placeholder {
    color: #555555 !important;
    opacity: 1 !important;
}

/* === BUTTONS === */
.mx_AuthPage .mx_AccessibleButton,
.mx_AuthPage .mx_Button {
    color: #ffffff !important;
}

/* Footer elements */
.mx_AuthPage .mx_AuthFooter span { color: #22c1f1 !important; }