/* ------------------------------- MODAL ------------------------------- */

#modal {
    position: fixed; top: 0; bottom: 0; inset-inline-start: 0; width: 100%; height: 100%; overflow: hidden;
    display: none; opacity: 0; filter: alpha(opacity=0); background: rgba(0, 0, 0, 0.8); z-index: 1000;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
#modal.active {display: block; opacity: 1;}

#modal_container {
    overflow-y: auto; z-index: 1001; top: 0; bottom: 0; inset-inline-start: 0; width: 100%; height: 100%;
    text-align: start; position: fixed;
}
#modal_overlay {position: absolute; width: 100%; min-height: 100%; inset-inline-start: 0; top: 0;}

/* head */

#modal_head {
    display: flex; align-items: center; width: 100%; height: 56px; background: var(--white-color); border-radius: 12px 12px 0 0;
    padding-block: 0; padding-inline: 20px 16px; border-bottom: 1px solid var(--gray-color-13);
}
#modal_head > div:nth-of-type(1) {
    width: calc(100% - 30px); font-size: 16px; font-weight: 500; color: var(--black-color); letter-spacing: 0; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
}
#modal_head > div:nth-of-type(2) {width: 30px;}
#modal_head.extra {
    padding-block: 20px 16px; padding-inline: 20px 16px; height: auto; align-items: start; background: var(--gray-color-15);
}

/* info */

.modal_head_info {display: flex; align-items: flex-start; padding: 0;}
.modal_head_info > div:nth-of-type(1) {display: flex;}
.modal_head_info > div:nth-of-type(2) {width: 100%;}

.modal_head_photo {width: 42px; min-width: 42px; height: 42px; border-radius: 21px; margin-inline-end: 16px;}
.modal_head_photo.square {border-radius: 2px;}
.modal_head_title {font-size: 18px; line-height: 1; font-weight: 500;}
.modal_head_tags {
    color: var(--gray-color-3); font-size: 13px; font-weight: 400; line-height: 1.5; white-space: break-spaces; padding-top: 6px;
}
.modal_head_tags > b {font-weight: 500;}

.modal_head_controls {display: flex; align-items: center; gap: 10px; padding-top: 10px;}

/* close */

#modal_close_btn {
    display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 15px; cursor: pointer;
    border: 1px solid var(--gray-color-12); background: var(--white-color); transition: all 0.2s ease-in-out;
}
#modal_close_btn > i {color: var(--gray-color-6); font-size: 12px; width: 11.5px; height: 14px; transition: all 0.2s ease-in-out;}
#modal_close_btn:hover {border-color: var(--gray-color-10);}
#modal_close_btn:hover > i {color: var(--gray-color-4);}

/* body */

#modal_body {background-color: var(--white-color); padding: 10px 20px 20px; border-radius: 0 0 12px 12px;}

#modal_content {
    position: relative; height: auto; margin: 55px auto 20px; padding: 0; border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

@media only screen and (max-width: 1024px) {
    #modal_head {height: 62px; padding-inline: 22px 18px;}
    #modal_head > div:nth-of-type(1) {font-size: 17px;}
    #modal_head > div:nth-of-type(2) {width: 36px;}
    #modal_close_btn {width: 36px; height: 36px; border-radius: 18px;}
    #modal_close_btn > i {font-size: 14px; width: 13px; height: 16px;}
    #modal_body {padding: 14px 22px 22px;}
    .modal_notification_controls {padding-top: 22px !important;}
}

@media only screen and (max-width: 768px) {
    #modal_container {overflow-y: auto;}
    #modal_content {
        margin: 0; width: 100%; max-width: 100%; min-height: 100vh; border-radius: 0; box-shadow: none;
        display: flex; flex-direction: column;
    }
    #modal_head {border-radius: 0; height: 64px; flex-shrink: 0; padding-inline: 20px 16px;}
    #modal_head.extra {border-radius: 0; height: auto;}
    #modal_head > div:nth-of-type(1) {font-size: 18px;}
    #modal_head > div:nth-of-type(2) {width: 40px;}
    #modal_close_btn {width: 40px; height: 40px; border-radius: 20px;}
    #modal_close_btn > i {font-size: 15px; width: 14px; height: 17px;}
    #modal_body {border-radius: 0; flex: 1; padding: 16px 20px 96px;}
    .modal_notification_controls {padding-top: 24px !important;}
    .modal_head_controls {margin-inline-start: -58px; flex-wrap: wrap;}
}

/* desc */

.modal_desc {line-height: 1.3; color: var(--gray-color-5); font-size: 13px;}
.modal_desc.compact {padding-top: 8px;}
.modal_notification_controls {padding-top: 20px;}

/* menu body */

.modal_menu_body {padding: 26px 20px 30px 20px;}
.modal_menu_body > .btn_primary.share {margin-bottom: 20px;}
.modal_menu_body.spaced > .btn_primary {margin-top: 20px;}
.modal_menu_body.spaced > .btn_primary.share {margin-top: 0; margin-bottom: 0;}

/* share link */

.modal_share_link {margin-top: 20px;}
.modal_share_link > .btn_primary {height: 44px;}

/* section desc */

.modal_section_desc {font-size: 13px; line-height: 1.3; font-weight: 500; padding-top: 8px; padding-bottom: 20px;}
.modal_section_desc.tight {padding-bottom: 4px;}

/* form section (items / add / subgroup) */

.form_section_items {margin-top: 18px;}
.form_section_add {margin-top: 14px;}
.form_section_subgroup {margin-top: 24px;}

/* form note (max-width 700) */

.form_note {max-width: 700px;}
.form_note.tight {padding-top: 12px; padding-bottom: 8px;}
.form_note.desc {padding-top: 24px; padding-bottom: 8px;}
.form_note.compact {padding-top: 12px;}
.form_note.wide {padding-top: 26px;}

/* note */

.modal_note {font-size: 13px; line-height: 1.3; color: var(--gray-color-5);}
.modal_note > div {padding-top: 12px;}
.modal_note > div:first-child {padding-top: 0;}

@media only screen and (max-width: 1024px) {
    .modal_desc {font-size: 16px; line-height: 1.4;}
    .modal_note {font-size: 16px; line-height: 1.4;}
}

/* controls */

.modal_controls {display: flex; padding-top: 24px;}
.modal_controls > div {width: 50%;}
.modal_controls > div:nth-of-type(1) {padding-inline-end: 5px;}
.modal_controls > div:nth-of-type(2) {padding-inline-start: 5px; display: flex; justify-content: end;}
.modal_controls > div:nth-of-type(2) > div:not(:first-child) {margin-inline-start: 10px;}

@media only screen and (max-width: 1024px) {
    .modal_controls {padding-top: 28px; gap: 12px;}
    .modal_controls > div:nth-of-type(1) {padding-inline-end: 0;}
    .modal_controls > div:nth-of-type(2) {padding-inline-start: 0;}
}

@media only screen and (max-width: 768px) {
    .modal_controls {
        position: fixed; bottom: 0; inset-inline-start: 0; width: 100%; padding: 14px 18px;
        background: var(--white-color); border-top: 1px solid var(--gray-color-12); z-index: 10;
    }
    .modal_controls > div:nth-of-type(1) {display: none;}
    .modal_controls > div:nth-of-type(2) {width: 100%; padding-inline-start: 0; gap: 12px;}
    .modal_controls > div:nth-of-type(2) > div {width: 50%; box-sizing: border-box;}
    .modal_controls > div:nth-of-type(2) > div:not(:first-child) {margin-inline-start: 0;}
}

/* auth window */

.auth_window {padding: 8px 4px 4px; text-align: center;}
.auth_window_icon {
    display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 32px;
    background: var(--primary-color-2); color: var(--primary-color-5); margin-bottom: 16px;
}
.auth_window_icon > i {font-size: 26px; color: var(--white-color);}
.auth_window_title {font-size: 20px; font-weight: 600; color: var(--black-color); line-height: 1.2;}
.auth_window_desc {
    font-size: 14px; line-height: 1.5; color: var(--gray-color-5); padding-top: 10px; max-width: 380px; margin: 0 auto;
}
.auth_window_benefits {
    display: flex; flex-direction: column; gap: 10px; text-align: start; background: var(--gray-color-15); border-radius: 10px;
    padding: 14px 16px; margin-top: 20px;
}
.auth_window_benefits > div {display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--gray-color-2);}
.auth_window_benefits > div > i {color: var(--primary-color-5); font-size: 14px;}
.auth_window_controls {display: flex; flex-direction: column; gap: 10px; margin-top: 20px;}
.auth_window_note {
    font-size: 12px; line-height: 1.4; color: var(--gray-color-6); padding-top: 14px; max-width: 340px; margin: 0 auto;
}
.auth_window_note a {color: var(--primary-color-5); text-decoration: none;}
.auth_window_note a:hover {text-decoration: underline;}

/* subscription window */

.subscription_upgrade {padding: 8px 4px 4px; text-align: center;}
.subscription_upgrade_icon {
    display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 32px;
    background: linear-gradient(135deg, var(--primary-color-3), var(--primary-color-5)); color: var(--white-color);
    margin-bottom: 16px;
}
.subscription_upgrade_icon > i {font-size: 26px; color: var(--white-color);}
.subscription_upgrade_title {font-size: 20px; font-weight: 600; color: var(--black-color); line-height: 1.2;}
.subscription_upgrade_desc {
    font-size: 14px; line-height: 1.5; color: var(--gray-color-5); padding-top: 10px; max-width: 380px; margin: 0 auto;
}
.subscription_upgrade_benefits {
    display: flex; flex-direction: column; gap: 10px; text-align: start; background: var(--gray-color-15); border-radius: 10px;
    padding: 14px 16px; margin-top: 20px;
}
.subscription_upgrade_benefits > div {display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--gray-color-2);}
.subscription_upgrade_benefits > div > i {color: var(--primary-color-5); font-size: 14px;}
.subscription_upgrade_controls {display: flex; flex-direction: column; gap: 10px; margin-top: 20px;}
.subscription_upgrade_note {
    font-size: 12px; line-height: 1.4; color: var(--gray-color-6); padding-top: 14px; max-width: 340px; margin: 0 auto;
}

/* topup window (payment method) */

.topup_methods_label {padding-top: 20px; font-size: 13px; font-weight: 600; color: var(--gray-color-3);}
.topup_methods {display: flex; flex-direction: column; gap: 12px; margin-top: 12px;}
.topup_method {
    display: flex; align-items: center; position: relative; width: 100%; min-width: 0; padding: 14px;
    border: 1.5px solid var(--gray-color-14); border-radius: 12px; background: var(--white-color); cursor: pointer;
    user-select: none; transition: all 0.2s ease-in-out;
}
.topup_method:hover {border-color: var(--primary-color-4); background: var(--primary-color-9);}
.topup_method.active {border-color: var(--primary-color-3); background: var(--primary-color-9); box-shadow: 0 0 0 3px var(--primary-color-8);}
.topup_method.disabled {cursor: not-allowed; background: var(--gray-color-15); border-color: var(--gray-color-14); opacity: 0.7;}
.topup_method.disabled:hover {border-color: var(--gray-color-14); background: var(--gray-color-15);}
.topup_method_icon {
    display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; min-width: 40px;
    margin-inline-end: 12px; border-radius: 10px; background: var(--white-color); border: 1px solid var(--gray-color-13);
    color: var(--primary-color-3);
}
.topup_method_icon > svg {width: 22px; height: 22px;}
.topup_method.active .topup_method_icon {background: var(--primary-color-3); border-color: var(--primary-color-3); color: var(--white-color);}
.topup_method.disabled .topup_method_icon {color: var(--gray-color-7);}
.topup_method_info {display: flex; flex-direction: column; min-width: 0;}
.topup_method_title {font-size: 14px; font-weight: 600; line-height: 1.2; color: var(--black-color);}
.topup_method_desc {
    padding-top: 3px; font-size: 12px; line-height: 1.3; color: var(--gray-color-5); overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
}
.topup_method.disabled .topup_method_title, .topup_method.disabled .topup_method_desc {color: var(--gray-color-7);}
.topup_method_badge {
    position: absolute; top: 8px; inset-inline-end: 8px; padding: 3px 7px; border-radius: 999px;
    background: var(--gray-color-13); color: var(--gray-color-5); font-size: 10px; font-weight: 600; line-height: 1;
    white-space: nowrap;
}
.topup_method_check {
    display: none; align-items: center; justify-content: center; position: absolute; top: 8px; inset-inline-end: 8px;
    width: 18px; height: 18px; border-radius: 50%; background: var(--primary-color-3); color: var(--white-color);
}
.topup_method_check > i {font-size: 9px;}
.topup_method.active .topup_method_check {display: flex;}
.topup_method_hint {display: flex; align-items: center; gap: 6px; padding-top: 10px; font-size: 12px; line-height: 1.3; color: var(--gray-color-6);}
.topup_method_hint > i {color: var(--primary-color-4); font-size: 13px;}
.topup_secure_note {
    display: flex; align-items: center; gap: 8px; margin-top: 16px; padding: 10px 12px; border-radius: 10px;
    background: var(--gray-color-15); color: var(--gray-color-5); font-size: 12px; line-height: 1.4;
}
.topup_secure_note > i {color: var(--green-color-2); font-size: 14px;}

@media only screen and (max-width: 768px) {
    .topup_methods {flex-direction: column; gap: 10px;}
    .topup_methods_label {font-size: 15px;}
    .topup_method_title {font-size: 15px;}
    .topup_method_desc {font-size: 13px;}
    .topup_method_hint {font-size: 13px;}
    .topup_secure_note {font-size: 13px;}
}

/* technologies */

.tech_modal_head {padding-block: 24px 20px; padding-inline: 24px 20px;}
.tech_modal_info > div:nth-of-type(1) {align-items: flex-start;}
.tech_modal_logo {
    width: 64px; min-width: 64px; height: 64px; border-radius: 14px; background: var(--white-color); padding: 6px;
    border: 1px solid var(--gray-color-14); object-fit: contain;
}
.tech_modal_logo_empty {
    display: flex; align-items: center; justify-content: center; width: 64px; min-width: 64px; height: 64px; border-radius: 14px;
    background: var(--white-color); margin-inline-end: 16px; border: 1px solid var(--gray-color-14);
}
.tech_modal_logo_empty > i {font-size: 28px; color: var(--primary-color-3);}
.tech_modal_title {font-size: 22px; font-weight: 500; color: var(--black-color); letter-spacing: -0.2px;}
.tech_modal_brief {color: var(--gray-color-3); font-size: 13px; line-height: 1.5; padding-top: 8px; max-width: 560px;}
.tech_modal_links {padding-top: 14px; gap: 8px; flex-wrap: wrap;}
.tech_modal_links > a {
    display: inline-flex; align-items: center; text-decoration: none; font-size: 12px; font-weight: 500; padding: 6px 12px;
    border-radius: 10px; background: var(--white-color); color: var(--primary-color-2); border: 1px solid var(--gray-color-14);
    transition: all 0.2s ease-in-out;
}
.tech_modal_links > a > i {font-size: 14px;}
.tech_modal_body {padding: 20px 24px 24px;}
.tech_modal_description {color: var(--gray-color-2); font-size: 14px; line-height: 1.6; padding-top: 8px; white-space: pre-line;}

/* ------------------------------- MENU ------------------------------- */

#menu {
    position: fixed; top: 0; inset-inline-start: 0; width: 100%; z-index: 100; background-color: var(--white-color-90);
    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.15); -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
}

#menu > .wrap {padding-inline-end: 0;}

.menu_group {display: flex; align-items: center; height: 52px;}
.menu_group > div:nth-of-type(1) {width: 100px; height: 32px;}
.menu_group > div:nth-of-type(1) > a > img {width: 28px;}
.menu_group > div:nth-of-type(2) {width: calc(100% - 350px);}
.menu_group > div:nth-of-type(2) > a {
    color: var(--gray-color-1); padding: 0 10px; display: inline-flex; align-items: center; height: 52px; margin-inline-end: 2px;
    text-decoration: none; position: relative;
}
.menu_group > div:nth-of-type(2) > a.active {color: var(--primary-color-3);}
.menu_group > div:nth-of-type(2) > a:after {
    content: ''; display: block; position: absolute; bottom: 0; inset-inline-start: 10px; inset-inline-end: 10px;
    width: calc(100% - 20px); height: 2px; background-color: transparent; transition: all 0.2s ease-out;
}
.menu_group > div:nth-of-type(2) > a:hover:after {background-color: var(--primary-color-3);}
.menu_group > div:nth-of-type(2) > a.active:after {background-color: var(--primary-color-3);}

#menu_messages {
    display: inline-flex; justify-content: center; min-width: 20px; position: relative; top: -1px; inset-inline-start: -8px;
    background: var(--primary-color-5); color: var(--white-color); font-size: 11px; font-weight: 500; padding: 4px;
    border-radius: 3px; cursor: default; opacity: 1; user-select: none; transition: all 0.2s ease-out;
}
#menu_messages.hidden {opacity: 0;}

@media screen and (max-width: 1024px) {
    #menu {background-color: var(--white-color); -webkit-backdrop-filter: none; backdrop-filter: none;}
}

/* ------------------------------- MENU PROFILE ------------------------------- */

#menu_profile {width: 264px; height: 100%; display: flex; position: relative; justify-content: flex-start; user-select: none;}
#menu_profile:hover, #menu_profile.active {background-color: var(--gray-color-15);}
#menu_profile.active > .menu_profile_popup {opacity: 1; pointer-events: auto;}

.menu_profile_brief {display: flex; align-items: center; padding: 0 20px; cursor: pointer; transition: all 0.3s ease-in-out;}
.menu_profile_brief > div:nth-of-type(1) {display: flex;}
.menu_profile_brief > div:nth-of-type(1) > img {width: 32px; height: 32px; border-radius: 16px;}
.menu_profile_brief > div:nth-of-type(2) {padding-inline-start: 14px;}
.menu_profile_brief > div:nth-of-type(2) > div:nth-of-type(1) {
    color: var(--gray-color-1); font-weight: 500; max-width: 150px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.menu_profile_brief > div:nth-of-type(2) > div:nth-of-type(2) {
    color: var(--primary-color-3); font-weight: 500; padding-top: 1px; font-size: 13px; max-width: 150px; overflow: hidden;
    white-space: nowrap; text-overflow: ellipsis;
}

.menu_profile_popup {
    position: absolute; top: 52px; z-index: 5; inset-inline-start: 0; width: 100%; opacity: 0; pointer-events: none; padding: 12px 0;
    box-shadow: var(--menu-profile-shadow); background-color: var(--white-color); border-radius: 0 0 4px 4px;
    transition: all 0.3s ease-out;
}

.menu_profile_popup > div {height: 34px; padding: 0 14px; display: flex; align-items: center;}

.menu_profile_popup_item {
    display: flex; align-items: center; font-size: 13px; font-weight: 500; width: 100%; border-radius: 9px; padding: 8px 10px;
    text-decoration: none; cursor: pointer; transition: all 0.3s ease-out;
}

.menu_profile_popup_item > span {display: flex; justify-content: center; width: 20px;}
.menu_profile_popup_item > span > i {color: var(--primary-color-4); font-size: 15px;}
.menu_profile_popup_item > span > i.icon_logout {position: relative; inset-inline-start: 1px;}
.menu_profile_popup_item > div {color: var(--gray-color-2); width: calc(100% - 20px); margin-inline-end: 8px; padding: 0 10px;}

.menu_profile_popup_item:hover {background-color: var(--primary-color-9);}
.menu_profile_popup_item:hover > div {color: var(--primary-color-1);}

/* ------------------------------- MENU BURGER (MOBILE) ------------------------------- */

#menu_burger {display: none; align-items: center; justify-content: center; height: 100%; cursor: pointer; user-select: none;}
#menu_burger > i {font-size: 30px; color: var(--gray-color-1);}

/* ------------------------------- MENU AUTH ------------------------------- */

.menu_auth {display: flex; align-items: center; justify-content: flex-end; width: 250px; gap: 10px;}
.menu_auth_btn {min-width: 100px; justify-content: center;}

.menu_spacer {width: 20px; flex-shrink: 0;}

/* ------------------------------- MENU HEAD ------------------------------- */

.menu_head {display: none;}

@media only screen and (max-width: 1024px) {
    .menu_group {height: 58px;}
    .menu_group > div:nth-of-type(1) {width: 280px; align-items: center; display: flex;}
    .menu_group > div:nth-of-type(2) > a {display: none;}
    .menu_group > div:nth-of-type(2) {width: auto; flex: 1;}
    #menu_profile {display: none;}
    #menu_burger {display: inline-flex;}
    .menu_logo_filters > a:first-child {display: none;}
    .menu_head {
        position: relative; display: flex; align-items: center; flex: 1; gap: 8px; min-width: 0; height: 58px;
        z-index: 3; background: var(--white-color);
    }
    .menu_head_back {
        display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0;
        border-radius: 18px; color: var(--gray-color-2); cursor: pointer; text-decoration: none;
        transition: background-color 0.18s ease-out;
    }
    .menu_head_back:hover, .menu_head_back:active {background: var(--primary-color-9); color: var(--primary-color-3);}
    .menu_head_back > i {font-size: 20px; transform: rotate(180deg);}
    html[dir="rtl"] .menu_head_back > i {transform: rotate(0deg);}
    .menu_head_title {
        color: var(--gray-color-1); font-size: 16px; font-weight: 600; min-width: 0; flex: 1; overflow: hidden;
        text-overflow: ellipsis; white-space: nowrap;
    }
    .btn_primary.compact.menu_head_action {height: 34px; padding: 0 12px; font-size: 15px; display: inline-flex; align-items: center; gap: 0;}
    .menu_head_subject {display: flex; align-items: center; flex: 1; gap: 10px; min-width: 0; text-decoration: none;}
    .menu_head_photo {
        width: 36px; min-width: 36px; height: 36px; border-radius: 8px; object-fit: cover;
        box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.1);
    }
    .menu_head_photo.round {border-radius: 50%;}
    .menu_head_info {display: flex; flex-direction: column; justify-content: center; flex: 1; min-width: 0;}
    .menu_head_name {
        color: var(--gray-color-1); font-size: 16px; font-weight: 600; line-height: 1.2; overflow: hidden;
        text-overflow: ellipsis; white-space: nowrap;
    }
    .menu_head_meta {
        display: none; padding-top: 2px; color: var(--gray-color-5); font-size: 14px; font-weight: 500;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .menu_head_status {
        padding-top: 2px; color: var(--gray-color-7); font-size: 14px; line-height: 1.25; overflow: hidden;
        text-overflow: ellipsis; white-space: nowrap;
    }
    .menu_head_status.online {color: var(--green-color-2);}
}

/* ------------------------------- MENU MOBILE ------------------------------- */

#menu_mobile_overlay {
    position: fixed; inset: 0; background: rgba(15, 18, 25, 0.45); opacity: 0; pointer-events: none; z-index: 1000;
    transition: opacity 0.25s ease-out;
}
#menu_mobile_overlay.active {opacity: 1; pointer-events: auto;}

#menu_mobile {
    position: fixed; top: 0; bottom: 0; inset-inline-end: 0; width: 300px; max-width: 86vw; z-index: 1001;
    background: var(--white-color);
    transform: translateX(100%); transition: transform 0.28s ease-out;
    display: flex; flex-direction: column; overflow-y: auto;
}
html[dir="rtl"] #menu_mobile {transform: translateX(-100%);}
#menu_mobile.active, html[dir="rtl"] #menu_mobile.active {transform: translateX(0);}

.menu_mobile_head {
    display: flex; align-items: center; justify-content: space-between; height: 59px; padding: 0 18px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.2); flex-shrink: 0;
}
@media only screen and (max-width: 1024px) {
    .menu_mobile_head {height: 59px;}
}
.menu_mobile_user {display: flex; align-items: center; gap: 12px; min-width: 0;}
.menu_mobile_user > img {width: 36px; height: 36px; border-radius: 18px; flex-shrink: 0;}
.menu_mobile_user > div {min-width: 0;}
.menu_mobile_name {
    color: var(--gray-color-1); font-size: 16px; font-weight: 500; max-width: 180px;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.menu_mobile_mode {
    color: var(--primary-color-3); font-size: 14px; font-weight: 500; padding-top: 2px; max-width: 180px;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.menu_mobile_close {
    display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 16px;
    cursor: pointer; user-select: none; transition: background-color 0.2s ease-out; flex-shrink: 0;
}
.menu_mobile_close:hover {background-color: var(--gray-color-15);}
.menu_mobile_close > i {color: var(--gray-color-1); font-size: 17px;}

.menu_mobile_nav {display: flex; flex-direction: column; padding: 10px 10px;}
.menu_mobile_item {
    display: flex; align-items: center; height: 42px; padding: 0 10px; border-radius: 10px;
    font-size: 14px; font-weight: 500; text-decoration: none; cursor: pointer;
    transition: background-color 0.2s ease-out, color 0.2s ease-out;
}
.menu_mobile_item > span {display: flex; justify-content: center; width: 24px; flex-shrink: 0;}
.menu_mobile_item > span > i {color: var(--primary-color-4); font-size: 16px;}
.menu_mobile_item > div {
    color: var(--gray-color-2); padding-inline-start: 12px; flex: 1;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.menu_mobile_item:hover {background-color: var(--primary-color-9);}
.menu_mobile_item:hover > div {color: var(--primary-color-1);}
.menu_mobile_item:hover > span > i {color: var(--primary-color-3);}

@media only screen and (max-width: 1024px) {
    .menu_mobile_item {height: 44px;}
}

@media only screen and (max-width: 768px) {
    .menu_mobile_item {height: 44px; font-size: 16px;}
    .menu_mobile_item > span {width: 28px;}
    .menu_mobile_item > span > i {font-size: 20px;}
    .menu_mobile_item > div {padding-inline-start: 14px;}
}

.menu_mobile_badge {
    display: inline-flex; justify-content: center; align-items: center; min-width: 20px; height: 18px; padding: 0 6px;
    background: var(--primary-color-5); color: var(--white-color); font-size: 11px; font-weight: 500; font-style: normal;
    border-radius: 9px;
}

.menu_mobile_divider {height: 1px; background: var(--gray-color-14); margin: 4px 16px;}

/* ------------------------------- MOBILE BOTTOM MENU ------------------------------- */

.menu_bottom {display: none;}

@media only screen and (max-width: 768px) {
    .menu_bottom {
        position: fixed; left: 0; right: 0; bottom: -1px; z-index: 900;
        display: flex; align-items: stretch; justify-content: space-around;
        height: calc(62px + env(safe-area-inset-bottom));
        padding: 4px 6px calc(env(safe-area-inset-bottom) + 6px) 6px;
        background: var(--white-color);
        border-top: 0.75px solid rgba(15, 23, 42, 0.12);
        box-shadow: 0 -6px 24px rgba(15, 23, 42, 0.06);
        transform: translateY(0); transition: transform 0.32s cubic-bezier(.4, 0, .2, 1);
        will-change: transform;
    }
    body.chat_open .menu_bottom {transform: translateY(110%);}
    .menu_bottom_item {
        flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
        text-decoration: none; color: var(--gray-color-5); padding: 0 4px;
        transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, transform 0.15s ease-in-out;
        -webkit-tap-highlight-color: transparent; user-select: none;
    }
    .menu_bottom_item:active {transform: scale(0.94);}
    .menu_bottom_item.active {color: var(--primary-color-3);}
    .menu_bottom_icon {
        position: relative; display: flex; align-items: center; justify-content: center;
        width: 34px; height: 28px; border-radius: 10px; transition: background-color 0.25s ease-in-out;
    }
    .menu_bottom_icon > i {font-size: 20px; line-height: 1; transition: transform 0.2s ease-in-out;}
    .menu_bottom_label {
        font-size: 12px; line-height: 1.2; font-weight: 500; letter-spacing: -0.1px;
        white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
    }
    .menu_bottom_item.active .menu_bottom_label {font-weight: 600;}
    .menu_bottom_badge {
        position: absolute; top: -2px; inset-inline-end: -4px; min-width: 16px; height: 16px; padding: 0 4px;
        border-radius: 8px; background: var(--primary-color-3); color: var(--white-color);
        font-size: 10px; font-weight: 600; line-height: 16px; text-align: center; font-style: normal;
        border: 1.5px solid var(--white-color); box-sizing: content-box;
    }
    .menu_bottom_badge.hidden {display: none;}
    body {padding-bottom: calc(62px + env(safe-area-inset-bottom));}
}

html.dark .menu_bottom {
    background: rgba(20, 25, 35, 0.86); border-top-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.35);
}
html.dark .menu_bottom_item {color: var(--gray-color-9);}
html.dark .menu_bottom_item.active {color: var(--primary-color-5);}
html.dark .menu_bottom_item.active .menu_bottom_icon {background: rgba(45, 111, 178, 0.18);}

/* ------------------------------- MOBILE FILTERS ------------------------------- */

.tabs_bar {
    display: flex; align-items: center; gap: 14px; width: 100%; min-width: 0;
}
.tabs_bar_items {flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;}
.tabs_bar_items::-webkit-scrollbar {display: none;}
.tabs_bar_items > .tab_items {flex-wrap: nowrap; white-space: nowrap;}

@media only screen and (max-width: 1024px) {
    .tabs_bar {gap: 10px; padding: 0 0 2px;}
}

.tab_filters_btn, .tab_sort_btn {display: none;}
.tab_filters_btn > i, .tab_sort_btn > i {font-size: 13px; color: var(--primary-color-3); transition: color 0.2s ease-in-out;}
.tab_filters_btn > span, .tab_sort_btn > span {font-size: 16px; font-weight: 500; color: var(--primary-color-2);}

@media only screen and (max-width: 1024px) {
    .tab_sort_btn {margin-inline-start: 10px;}
    .tabs_bar .sort_by {display: none;}
    .tab_filters_btn, .tab_sort_btn {
        display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; cursor: pointer; user-select: none;
        height: 34px; padding: 0 14px; border-radius: 10px; background: var(--primary-color-9);
        border: 1px solid var(--surface-border); transition: all 0.2s ease-in-out; text-decoration: none;
    }
    .tab_filters_btn:hover, .tab_sort_btn:hover {background: var(--primary-color-8); border-color: var(--primary-color-5);}
    .tab_filters_btn:active, .tab_sort_btn:active {transform: scale(0.98);}
    .tab_filters_btn.active {background: var(--primary-color-3); border-color: var(--primary-color-3);}
    .tab_filters_btn.active > i, .tab_filters_btn.active > span {color: var(--white-color);}
    .tab_filters_btn.active:hover {background: var(--primary-color-2); border-color: var(--primary-color-2);}
}

@media only screen and (max-width: 1024px) {
    .tab_items > a {margin-inline-start: 16px; font-size: 14px;}
    .sidebar_filters {padding: 6px 0;}
    .salary_filter_hint {font-size: 13px; padding-top: 10px;}
}

#filters_overlay {
    position: fixed; inset: 0; background: rgba(15, 18, 25, 0.45); opacity: 0; pointer-events: none; z-index: 1000;
    transition: opacity 0.25s ease-out;
}
#filters_overlay.active {opacity: 1; pointer-events: auto;}

.filters_panel_head {display: none;}

.filters_panel_head_actions {display: flex; align-items: center; gap: 10px;}
.filters_panel_head_actions > .btn_primary {display: none;}

@media only screen and (max-width: 1024px) {
    #filters_panel {
        position: fixed; top: 0; bottom: 0; inset-inline-start: 0; width: 320px; max-width: 88vw; z-index: 1001;
        background: var(--white-color); transform: translateX(-100%); transition: transform 0.28s ease-out;
        display: flex; flex-direction: column; overflow-y: auto; padding-inline-end: 0;
    }
    html[dir="rtl"] #filters_panel {transform: translateX(100%);}
    #filters_panel.active, html[dir="rtl"] #filters_panel.active {transform: translateX(0);}
    .filters_panel_head {
        display: flex; align-items: center; justify-content: space-between; height: 59px; padding: 0 14px 0 18px;
        border-bottom: 1px solid rgba(15, 23, 42, 0.2); flex-shrink: 0; font-size: 16px; font-weight: 600;
        color: var(--gray-color-1); position: sticky; top: 0; background: var(--white-color); z-index: 2;
    }
    .filters_panel_close {
        display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 16px;
        cursor: pointer; user-select: none; transition: background-color 0.2s ease-out; flex-shrink: 0;
    }
    .filters_panel_close:hover {background-color: var(--gray-color-15);}
    .filters_panel_close > i {color: var(--gray-color-1); font-size: 14px;}
    #filters_panel .sidebar_filters {padding-inline: 8px;}
    #filters_panel .sidebar {border: none; padding: 0;}
    #filters_panel .sidebar_filters_reset {display: none;}
    .filters_panel_head_actions > .btn_primary {display: inline-flex;}
}

/* ------------------------------- CONTENT ------------------------------- */

#content {
    display: flex; flex-direction: column; min-height: 100vh;
    padding-top: 52px; overflow: clip; background: var(--gray-color-14a);
}

@media only screen and (max-width: 1024px) {
    #content {padding-top: 58px; padding-bottom: 64px;}
    #content.content_jobs, #content.content_users, #content.content_profile_jobs, #content.content_profile_companies, #content.content_job_applies {background: var(--gray-color-14a);}
    #content.content_chats {padding-bottom: 0;}
}

@media only screen and (max-width: 768px) {
    #content {background: var(--white-color);}
}

.container {display: flex;}
.container > :nth-child(1) {width: 270px; padding-inline-end: 14px;}
.container > :nth-child(2) {width: calc(100% - 270px); padding-bottom: 50px;}

.container.v2 > :nth-child(1) {width: 270px; padding-inline-end: 14px;}
.container.v2 > :nth-child(2) {width: calc(100% - 540px); padding-bottom: 50px;}
.container.v2 > :nth-child(3) {width: 270px; padding-inline-start: 14px;}

.container.v3 > :nth-child(1) {width: calc(100% - 270px); padding-bottom: 50px;}
.container.v3 > :nth-child(2) {width: 270px; padding-inline-end: 14px;}

@media only screen and (max-width: 1024px) {
    .container {display: block;}
    .container > :nth-child(1) {width: 100%; padding-inline-end: 0;}
    .container > :nth-child(2), .container.v2 > :nth-child(2), .container.v3 > :nth-child(1) {width: 100%; padding-bottom: 0;}
}

/* ------------------------------- SIDEBAR ------------------------------- */

.sidebar {
    border: var(--surface-border); background: var(--white-color); min-height: 150px; border-radius: 12px; margin-bottom: 12px;
    padding: 14px 16px 16px;
}

.sidebar_title {color: var(--black-color); font-size: 18px; font-weight: 500;}

.sidebar_menu {padding-top: 10px;}
.sidebar_menu > a {
    display: flex; align-items: center; margin-top: 2px; line-height: 1; border-radius: 9px; font-size: 13px; font-weight: 500;
    height: 32px; cursor: pointer; text-decoration: none; transition: all 0.3s ease-in-out;
}
.sidebar_menu > a:nth-of-type(1) {margin-top: 0;}

.sidebar_menu > a > span {display: flex; justify-content: center; width: 28px; padding-inline-start: 8px;}
.sidebar_menu > a > span > i {color: var(--primary-color-4); font-size: 15px;}
.sidebar_menu > a > div:nth-of-type(1) {
    color: var(--gray-color-2); width: calc(100% - 42px); margin-inline-end: 8px; padding: 0 10px; user-select: none;
    transition: all 0.3s ease-in-out;
}
.sidebar_menu > a > div:nth-of-type(2) {
    color: var(--black-color); display: flex; align-items: center; justify-content: center; min-width: 34px; padding: 0 10px;
}

.sidebar_menu > a.active, .sidebar_menu > a:hover {background: var(--primary-color-9);}
.sidebar_menu > a.active > div:nth-of-type(1), .sidebar_menu > a:hover > div:nth-of-type(1) {color: var(--primary-color-3);}

.sidebar_menu > a.btn_primary:hover {background: var(--primary-color-2);}

@media only screen and (max-width: 1024px) {
    .sidebar_menu > a {height: 40px; font-size: 14px;}
    .sidebar_menu > a.active, .sidebar_menu > a:hover {background: none;}
    .sidebar_menu > a.active > div:nth-of-type(1), .sidebar_menu > a:hover > div:nth-of-type(1) {color: var(--gray-color-2);}
}

@media only screen and (max-width: 768px) {
    .sidebar {padding: 0; border-radius: 10px; border: none;}
    .sidebar_title {font-size: 16px;}
    .sidebar_menu > a {height: 44px; margin-top: 4px; font-size: 16px;}
    .sidebar_menu > a > span {width: 32px; padding-inline-start: 12px;}
    .sidebar_menu > a > span > i {font-size: 20px;}
    .sidebar_menu > a > div:nth-of-type(1) {font-size: 16px; padding: 0 18px;}
}

/* ------------------------------- SIDEBAR FILTERS ------------------------------- */

.sidebar_filter {position: relative;}

.sidebar_filter_head {padding: 10px 14px; user-select: none; cursor: pointer;}

.sidebar_filter_title {display: flex; align-items: center;}
.sidebar_filter_title > div:nth-of-type(1) {
    display: flex; align-items: center; width: calc(100% - 30px); font-size: 14px; font-weight: 500; color: var(--gray-color-2);
    transition: all 0.3s ease-in-out;
}
.sidebar_filter_title > div:nth-of-type(2) {width: 30px; display: flex; justify-content: end;}
.sidebar_filter_title > div:nth-of-type(2) > i {
    font-size: 12px; color: var(--gray-color-10); cursor: pointer; transition: all 0.3s ease-in-out;
}
.sidebar_filter_title > div:nth-of-type(1) > i.icon_filter_full {
    display: none; font-size: 14px; color: var(--primary-color-3); padding-inline-end: 6px;
}
.sidebar_filter.filtered .sidebar_filter_title > div:nth-of-type(1) > i.icon_filter_full {display: inline-flex;}
.sidebar_filter_title > div:nth-of-type(1) > i.icon_filter_full:hover {color: var(--primary-color-6);}

.sidebar_filter_desc {
    font-size: 11px; color: var(--gray-color-5); line-height: 1.35; padding-top: 3px; padding-inline-end: 20px;
}

.sidebar_filter_content {max-height: 0; overflow: hidden; transition: all 0.3s ease-in-out;}
.sidebar_filter_content > :where(div) {padding: 6px 14px 16px;}

.sidebar_filter_subtitle {font-size: 12px; color: var(--gray-color-3); padding-top: 16px;}

.sidebar_filter_head:hover {background: var(--primary-color-9);}
.sidebar_filter_head:hover .sidebar_filter_title > div:nth-of-type(1) {color: var(--primary-color-3);}
.sidebar_filter_head:hover .sidebar_filter_title > div:nth-of-type(2) > i {color: var(--gray-color-3);}

.sidebar_filter.active:first-of-type .sidebar_filter_head {background: none; cursor: default;}
.sidebar_filter.active .sidebar_filter_head {background: var(--primary-color-9);}
.sidebar_filter.active .sidebar_filter_content {max-height: initial; overflow: initial;}
.sidebar_filter.active .sidebar_filter_title > div:nth-of-type(1) {color: var(--primary-color-3);}
.sidebar_filter.active:first-of-type .sidebar_filter_title > div:nth-of-type(1) {color: var(--gray-color-2);}
.sidebar_filter.active.in_progress .sidebar_filter_content {overflow: hidden;}

.sidebar_filter.pro .sidebar_filter_title > div:nth-of-type(1) > i {padding-inline-start: 8px;}
.badge_pro {
    display: inline-block; vertical-align: middle; padding: 2px 8px; margin-inline-start: 8px; border-radius: 10px;
    background: var(--primary-color-3); color: var(--white-color); font-size: 10px; font-weight: 600;
    letter-spacing: 0.6px; line-height: 1.3;
}
.sidebar_filter.active:first-of-type .filter_pro_hint {margin-top: 0; margin-bottom: 10px; position: relative; top: -3px;}
.filter_pro_hint {
    display: flex; align-items: start; gap: 7px; margin-top: 8px; color: var(--primary-color-2); font-size: 11.5px;
    line-height: 1.2; font-weight: 500;
}
.filter_pro_hint > i {color: var(--primary-color-3); font-size: 13px;}

.sidebar_filters {padding: 8px 0; margin-bottom: 0;}

@media only screen and (max-width: 1024px) {
    .sidebar_filters {padding: 6px 0;}
}

.salary_filter_hint {font-size: 12px; font-weight: 400; color: var(--gray-color-3); padding-top: 8px;}
.salary_filter_hint_link {
    text-decoration: underline; color: var(--primary-color-2); cursor: pointer; text-transform: lowercase;
}

@media only screen and (max-width: 1024px) {
    .salary_filter_hint {font-size: 13px; padding-top: 10px;}
}

.filter_note {margin-top: 22px; font-size: 12px; color: var(--gray-color-4);}

@media only screen and (max-width: 1024px) {
    .sidebar_filter {border-radius: 12px; margin-bottom: 4px;}
    .sidebar_filter_head {padding: 16px;}
    .sidebar_filter_title > div:nth-of-type(1) {font-size: 17px; font-weight: 600; width: calc(100% - 40px);}
    .sidebar_filter_title > div:nth-of-type(1) > i.icon_filter_full {font-size: 17px; padding-inline-end: 10px;}
    .sidebar_filter_title > div:nth-of-type(2) {width: 40px;}
    .sidebar_filter_title > div:nth-of-type(2) > i {font-size: 16px;}
    .sidebar_filter_desc {font-size: 14px; line-height: 1.5; padding-top: 6px; padding-inline-end: 8px;}
    .sidebar_filter_content > :where(div) {padding: 10px 16px 22px;}
    .sidebar_filter_subtitle {font-size: 14px; padding-top: 20px; font-weight: 500;}
    .filter_note {margin-top: 24px; font-size: 13.5px; line-height: 1.5;}
}

@media only screen and (max-width: 768px) {
    .sidebar_filter_head {padding: 18px;}
    .sidebar_filter_title > div:nth-of-type(1) {font-size: 18px; width: calc(100% - 44px);}
    .sidebar_filter_title > div:nth-of-type(1) > i.icon_filter_full {font-size: 18px; padding-inline-end: 10px;}
    .sidebar_filter_title > div:nth-of-type(2) {width: 44px;}
    .sidebar_filter_title > div:nth-of-type(2) > i {font-size: 18px;}
    .sidebar_filter_desc {font-size: 14.5px; line-height: 1.55; padding-top: 8px;}
    .sidebar_filter_content > :where(div) {padding: 12px 18px 24px;}
    .sidebar_filter_subtitle {font-size: 15px; padding-top: 22px;}
    .salary_filter_hint {font-size: 14px; padding-top: 12px; line-height: 1.5;}
    .filter_note {margin-top: 26px; font-size: 14px; line-height: 1.55;}
}

.sidebar_filters_reset {padding: 12px 0;}
.sidebar_filters_reset > a, .sidebar_filters_reset > div {width: 100%;}
.sidebar_filters_reset .btn_primary {border-radius: 12px;}

@media only screen and (max-width: 1024px) {
    .sidebar_filters_reset {padding: 14px 0;}
    .sidebar_filters_reset .btn_primary {height: 48px; font-size: 15px;}
}

@media only screen and (max-width: 768px) {
    .sidebar_filters_reset {padding: 16px 0;}
    .sidebar_filters_reset .btn_primary {height: 52px; font-size: 16px; font-weight: 600;}
}

.job_match_selected {
    display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: var(--surface-border);
    border-radius: 10px; background: var(--primary-color-9); margin-bottom: 10px;
}
.job_match_selected_title {
    flex: 1; font-size: 13px; font-weight: 500; color: var(--primary-color-2); overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
}
.job_match_selected > i.icon_delete {
    font-size: 12px; color: var(--gray-color-6); cursor: pointer; transition: color 0.2s ease-in-out;
}
.job_match_selected > i.icon_delete:hover {color: var(--gray-color-2);}
#job_match_btn > i {padding-inline-end: 6px; font-size: 13px;}

@media only screen and (max-width: 1024px) {
    .job_match_selected {gap: 10px; padding: 10px 14px; border-radius: 12px; margin-bottom: 12px;}
    .job_match_selected_title {font-size: 14.5px;}
    .job_match_selected > i.icon_delete {font-size: 14px;}
    #job_match_btn {height: 44px; font-size: 14.5px;}
    #job_match_btn > i {font-size: 15px; padding-inline-end: 8px;}
}

@media only screen and (max-width: 768px) {
    .job_match_selected {gap: 12px; padding: 12px 16px; margin-bottom: 14px;}
    .job_match_selected_title {font-size: 15.5px;}
    .job_match_selected > i.icon_delete {font-size: 15px;}
    #job_match_btn {height: 48px; font-size: 15.5px;}
    #job_match_btn > i {font-size: 16px; padding-inline-end: 10px;}
}

/* ------------------------------- MAIN SELECTOR ------------------------------- */

.main_selector {display: flex; margin-top: 11px; border: var(--surface-border); background: var(--white-color); border-radius: 12px;}
.main_selector > div {display: flex; align-items: end;}
.main_selector > div:nth-of-type(1) {width: 47%; position: relative;}
.main_selector > div:nth-of-type(2) {width: 53%; padding-inline-end: 8px;}

.main_selector_search {display: flex; align-items: center; position: relative; width: 100%;}
.main_selector_search > i:nth-of-type(1) {font-size: 19px; color: var(--primary-color-3); padding: 0 12px;}
.main_selector_search > input {
    background: var(--white-color); height: 48px; width: 100%; padding-inline-start: 2px; padding-inline-end: 30px;
    border-radius: 6px;
}
#search_clear {
    position: absolute; inset-inline-end: 12px; font-size: 14px; color: var(--gray-color-8); cursor: pointer; display: none;
}
#search_clear.show {display: block;}
#search_clear:hover {color: var(--gray-color-6);}

.main_selector_skill.input_group {display: flex; align-items: end; margin-top: 0; border: 0; min-height: 48px; border-radius: 12px;}
.main_selector_skill.input_group::before {width: 0;}

.main_selector_skill > i:nth-of-type(1) {
    display: flex; align-items: center; min-height: 48px; font-size: 19px; color: var(--primary-color-3); padding: 0 12px;
}
.main_selector_skill > .select_group {display: flex; flex-wrap: wrap; align-items: end;}
.main_selector_skill .selected_items {padding: 9px 0; min-height: 48px;}
.main_selector_skill input[type=text] {
    width: auto; min-width: 260px; padding-inline-start: 6px; padding-inline-end: 0; height: 40px; padding-bottom: 8px;
}

.main_selector_skill_results {
    position: absolute; inset-inline-start: -40px; inset-inline-end: -8px; bottom: -1px; height: 0; min-width: 100%;
}
.main_selector_skill_results > .results_container {top: 0;}

.main_selector_location.input_group {margin-top: 0; border: 0; min-height: 48px; border-radius: 12px;}
.main_selector_location.input_group::before {width: 0;}

.main_selector_location > i:nth-of-type(1) {
    font-size: 20px; color: var(--primary-color-3); padding-block: 0 12px; padding-inline: 10px 8px;
    display: flex; align-items: end;
}
.main_selector_location > .select_group {display: flex; flex-wrap: wrap; align-items: end;}
.main_selector_location .selected_items {padding: 9px 0; min-height: 48px;}
.main_selector_location input[type=text] {
    width: auto; min-width: 260px; padding-inline-start: 6px; padding-inline-end: 0; height: 40px; padding-bottom: 8px;
}

.main_selector_location_results {
    position: absolute; inset-inline-start: -40px; inset-inline-end: -8px; bottom: -1px; height: 0; min-width: 100%;
}
.main_selector_location_results > .results_container {top: 0;}

#search_remote {
    position: absolute; inset-inline-end: 6px; bottom: 12px; font-size: 20px; color: var(--gray-color-9); cursor: pointer;
    display: block;
}
#search_remote:hover {color: var(--gray-color-6);}
#search_remote.active {color: var(--primary-color-2);}

@media only screen and (max-width: 1024px) {
    .main_selector {margin-top: 12px; border-radius: 12px;}
    .main_selector_search > i:nth-of-type(1) {font-size: 22px; padding: 0 12px;}
    .main_selector_search > input {height: 52px; font-size: 15px;}
    .main_selector_search > input::placeholder {font-size: 16px;}
    .main_selector_skill.input_group, .main_selector_location.input_group {min-height: 52px;}
    .main_selector_skill > i:nth-of-type(1), .main_selector_location > i:nth-of-type(1) {
        min-height: 52px; font-size: 22px; padding: 0 12px;
    }
    .main_selector_skill .selected_items, .main_selector_location .selected_items {min-height: 52px; padding: 10px 0;}
    .main_selector_skill input[type=text], .main_selector_location input[type=text] {
        height: 40px; font-size: 15px; padding-bottom: 10px;
    }
    #search_remote {font-size: 22px;}
    #search_clear {font-size: 16px;}
}

@media only screen and (max-width: 768px) {
    .main_selector {flex-direction: column; margin-top: 12px; border-radius: 12px; border: 1px solid var(--gray-color-11);}
    .main_selector > div {width: 100% !important; padding-inline-end: 0 !important;}
    .main_selector > div:nth-of-type(1) {border-bottom: 1px solid var(--gray-color-11);}
    .main_selector_search > i:nth-of-type(1) {font-size: 22px; padding: 0 12px;}
    .main_selector_search > input {height: 52px; padding-inline-end: 36px; border-radius: 12px; font-size: 16px;}
    .main_selector_skill.input_group, .main_selector_location.input_group {min-height: 52px; width: 100%;}
    .main_selector_skill > i:nth-of-type(1), .main_selector_location > i:nth-of-type(1) {
        min-height: 52px; font-size: 24px; padding: 0 12px; align-items: center;
    }
    .main_selector_skill > .select_group, .main_selector_location > .select_group {flex: 1; min-width: 0;}
    .main_selector_skill .selected_items, .main_selector_location .selected_items {min-height: 52px; padding: 10px 0;}
    .main_selector_skill input[type=text], .main_selector_location input[type=text] {
        min-width: 0; width: 100%; height: 40px; font-size: 16px; padding-bottom: 12px;
    }
    .main_selector_skill_results, .main_selector_location_results {inset-inline-start: -48px; inset-inline-end: 0;}
    #search_remote {bottom: 13px; inset-inline-end: 14px; font-size: 24px;}
    #search_clear {font-size: 16px; inset-inline-end: 14px;}
}

/* ------------------------------- TABS ------------------------------- */

.tab_items {display: inline-flex;}
.tab_items > a {
    margin-inline-start: 20px; padding: 4px 0 2px; color: var(--gray-color-3); font-weight: 500; cursor: pointer;
    border-bottom: 2px solid transparent; text-decoration: none; transition: all 0.3s ease-in-out;
}
.tab_items > a:hover {border-color: var(--gray-color-11);}
.tab_items > a.active {border-color: var(--primary-color-3); color: var(--primary-color-3);}
.tab_items > a:first-child {margin-inline-start: 0;}

@media only screen and (max-width: 1024px) {
    .tab_items > a {margin-inline-start: 16px; font-size: 16px;}
}

/* ------------------------------- SORT BY ------------------------------- */

.sort_by {
    position: relative; color: var(--gray-color-3); font-weight: 500; cursor: pointer;
    padding: 4px 0 0; user-select: none;
}

#sort_by_title > span {
    border-bottom: 2px solid var(--gray-color-11); padding-bottom: 2px; font-weight: 400; transition: all 0.3s ease-in-out;
}
#sort_by_title > span:hover {border-color: var(--primary-color-3);}


/* ------------------------------- PREVIEW ------------------------------- */

body.preview .page_header_controls {display: none;}
body.preview .page_header_photo.user {width: 96px; min-width: 96px;}
body.preview #content {padding-top: 0;}

.banner {background: var(--primary-color-8); padding: 24px 0; border-bottom: 0.75px solid rgba(15, 23, 42, 0.12);}
.banner_inner {display: flex; gap: 24px; align-items: stretch;}
.banner_card {
    flex: 3; padding: 20px 24px; background: var(--white-color); border-radius: 12px; border: 0.75px solid rgba(15, 23, 42, 0.2);
}
.banner_card.secondary {flex: 2; background: rgba(255, 255, 255, 0.5); border: 0.75px dashed rgba(15, 23, 42, 0.2);}
.banner_title {font-weight: 500; font-size: 16px; color: var(--primary-color-2); margin-bottom: 4px;}
.banner_desc {font-size: 13px; color: var(--gray-color-3); line-height: 1.4; margin-top: 12px;}
.banner_card.secondary .banner_title {color: var(--red-color-1);}
.banner_card.secondary .banner_desc {color: var(--gray-color-6);}
.banner_card .btn_primary {white-space: nowrap; min-width: fit-content; margin-top: 12px;}

html.dark .banner {background: var(--primary-color-8); border-bottom: 1px solid var(--primary-color-7);}
html.dark .banner_card {background: var(--primary-color-9); border-color: var(--primary-color-6);}
html.dark .banner_card.secondary {border-color: var(--primary-color-6);}

/* ------------------------------- SETTINGS ------------------------------- */

.settings_layout {display: flex; gap: 0;}
.settings_col_menu {width: 270px; flex-shrink: 0; padding-inline-end: 14px; padding-bottom: 50px;}
.settings_col_section {width: calc(100% - 540px); flex-shrink: 0; padding-bottom: 50px;}

@media only screen and (max-width: 1024px) {
    /* common mobile layout rules - see .r_layout* in components.css */
    .wrap.top.settings_wrap {padding: 0; margin: 0; max-width: none; width: 100%;}
}

.settings_change_row {align-items: start;}
.settings_change_btn_wrap {padding-top: 26px;}
.settings_change_btn {min-width: 120px;}
.settings_screen_name_status {font-size: 12px; padding-top: 4px; min-height: 16px;}
.settings_screen_name_status.available {color: var(--primary-color-3);}
.settings_screen_name_status.taken,
.settings_screen_name_status.invalid {color: #f03e3e;}
.settings_delete_note {color: var(--gray-color-7); font-size: 13px; line-height: 1.3; padding-top: 30px;}
.settings_delete_btn_wrap {padding-top: 20px;}
.settings_close_btn {height: 34px;}

/* settings page spacing helpers */
.section.settings_section_next {margin-top: 14px;}
.sidebar_menu.settings_sidebar_menu {padding-top: 2px;}
.input_row.settings_input_row {padding-top: 30px;}
.input_row.settings_input_row_sm {padding-top: 20px;}
.section_note.settings_section_note {padding-top: 20px;}
.settings_switch_row {padding-top: 16px;}
.settings_btn_row {padding-top: 20px;}
.settings_blocked_row {padding-top: 8px;}

.privacy_gdpr_footer {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding-top: 22px; margin-top: 22px; border-top: 1px solid var(--gray-color-12);
    font-size: 13px; line-height: 1.3;
}

@media only screen and (max-width: 1024px) {
    .privacy_gdpr_footer {font-size: 14px; padding-top: 24px; margin-top: 24px;}
}
.privacy_gdpr_link {color: var(--primary-color-3); text-decoration: none;}
.privacy_gdpr_link:hover {text-decoration: underline;}
.privacy_gdpr_consent {color: var(--gray-color-5);}

@media only screen and (max-width: 768px) {
    .privacy_gdpr_footer {flex-direction: column; align-items: flex-start; gap: 8px;}
}

.section_title_row {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}

@media only screen and (max-width: 768px) {
    .settings_change_row {flex-direction: column; gap: 0;}
    .settings_change_btn_wrap {padding-top: 12px; width: 100%;}
    .settings_change_btn {width: 100%; text-align: center;}
    .settings_delete_note {padding-top: 22px;}
    .settings_delete_btn_wrap {padding-top: 14px;}
    .settings_close_btn {width: 100%; text-align: center;}
}

/* ------------------------------- UNSUBSCRIBE ------------------------------- */

.unsubscribe_group {display: flex; justify-content: center; align-items: center; min-height: calc(100vh - 120px); padding: 20px;}
.unsubscribe_card {
    max-width: 500px; width: 100%; background: var(--white-color); border: var(--surface-border); border-radius: 12px;
    padding: 40px; text-align: center;
}

.unsubscribe_icon {
    width: 80px; height: 80px; border-radius: 50%; display: flex; justify-content: center; align-items: center; margin: 0 auto 24px;
    font-size: 40px;
}
.unsubscribe_icon.success {background: var(--primary-color-9); color: var(--primary-color-3);}
.unsubscribe_icon.error {background: #fff5f5; color: #f03e3e;}

.unsubscribe_title {font-size: 24px; font-weight: 600; color: var(--black-color); margin-bottom: 16px; letter-spacing: -0.5px;}
.unsubscribe_email {font-size: 16px; font-weight: 500; color: var(--primary-color-2); margin-bottom: 16px;}
.unsubscribe_description {font-size: 15px; line-height: 1.6; color: var(--gray-color-5); margin-bottom: 32px;}
.unsubscribe_btn {min-width: 160px; cursor: pointer; text-decoration: none;}

/* ------------------------------- ERASE ------------------------------- */

.erase_page {display: flex; justify-content: center; align-items: center; min-height: calc(100vh - 120px); padding: 40px 20px;}
.erase_card {
    max-width: 460px; width: 100%; background: var(--white-color); border: var(--surface-border); border-radius: 16px;
    padding: 44px 40px; text-align: center; box-shadow: 0 12px 40px rgba(15, 23, 42, 0.07);
}

.erase_icon {
    width: 72px; height: 72px; border-radius: 50%; display: flex; justify-content: center; align-items: center;
    margin: 0 auto 22px; font-size: 30px; background: var(--gray-color-14); color: var(--gray-color-5);
}
.erase_icon.success {background: var(--primary-color-9); color: var(--primary-color-3);}
.erase_icon.error {background: #fff5f5; color: var(--red-color-1);}

.erase_title {font-size: 23px; font-weight: 600; color: var(--black-color); margin-bottom: 12px; letter-spacing: -0.4px; line-height: 1.25;}
.erase_desc {font-size: 14px; line-height: 1.6; color: var(--gray-color-5); margin: 0 auto; max-width: 360px;}

.erase_form {margin-top: 30px; text-align: start;}
.erase_form .input_group {margin-top: 0;}
.erase_btn {width: 100%; height: 46px; margin-top: 30px; font-size: 15px;}

.erase_note {
    display: flex; align-items: center; gap: 9px; margin-top: 24px; padding-top: 20px; text-align: start;
    border-top: 1px solid var(--gray-color-12); color: var(--gray-color-6); font-size: 12.5px; line-height: 1.45;
}
.erase_note > i {font-size: 15px; color: var(--gray-color-7); flex-shrink: 0;}

.erase_home_btn {display: inline-flex; min-width: 180px; margin-top: 30px; cursor: pointer; text-decoration: none;}

html.dark .erase_card {box-shadow: none;}
html.dark .erase_icon {background: var(--primary-color-8); color: var(--gray-color-5);}
html.dark .erase_icon.error {background: rgba(240, 62, 62, 0.12);}

@media only screen and (max-width: 1024px) {
    .erase_card {padding: 36px 24px; border-radius: 14px;}
    .erase_title {font-size: 22px;}
    .erase_desc {font-size: 16px; max-width: none;}
    .erase_btn {height: 48px; font-size: 16px;}
    .erase_note {font-size: 14px;}
    .erase_note > i {font-size: 17px;}
}

/* ------------------------------- RTL ------------------------------- */

html[dir="rtl"] .ltr, html[dir="rtl"] .technology_chip, html[dir="rtl"] .job_match {direction: ltr; unicode-bidi: isolate;}
html[lang="ar"] body {
    font-family: 'Cairo', 'Inter', 'Segoe UI', Tahoma, sans-serif; font-size-adjust: 0.52;
}
html[lang="ar"] input, html[lang="ar"] textarea, html[lang="ar"] select, html[lang="ar"] button {
    font-family: inherit; font-size-adjust: 0.52;
}
html[dir="rtl"] .job_apply_link_option:hover .job_apply_link_option_arrow {transform: translateX(-2px);}
html[dir="rtl"] .job_apply_link_option_arrow > i {display: inline-block; transform: scaleX(-1);}
html[dir="rtl"] #btn_send {display: inline-block; transform: rotate(180deg);}