@import url('font.css');

/* Ширина всей полосы прокрутки */
::-webkit-scrollbar {
  width: 7px; /* Вертикальный скролл */
}

/* Трек (фон) */
::-webkit-scrollbar-track {
  background: #04040C;
  border-radius: 5px;
}

/* Ползунок (перетаскиваемый элемент) */
::-webkit-scrollbar-thumb {
  background: #2E93FF;
  border-radius: 5px;
}

/* Ползунок при наведении */
::-webkit-scrollbar-thumb:hover {
  background: #506e97;
}

.left_block {
    display: flex;
    width: 100%;
    max-width: 300px;
    height: auto;
    background: #04040C;
    min-height: 100vh;
    border-right: 1px solid #192433;
}

.header {
    display: flex;
    flex-direction: column;
    padding: 25px;
    width: 100%;
}

.logo_block {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.logo_title {
    /* MWF */
    font-weight: 700;
    font-size: 20px;
    line-height: 22px;
    /* identical to box height */
    color: #FFFFFF;
    /* Inside auto layout */
}

.logo_img {
    width: 60px;
}

.header_profile {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 24px 0;
    padding-bottom: 24px;
    border-bottom: 2px solid transparent;
    border-image: linear-gradient( 90deg, rgba(24,24,24,1) 0%, rgba(78,78,78,1) 50%, rgba(24,24,24,1) 100% ) 1;
}

.avatar_profile_header {
    /* Container */
    box-sizing: border-box;
    /* Auto layout */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px 0.00957897px 0px 0px;
    width: 36px;
    height: 36px;
    border: 1px solid #506e97;
    border-radius: 12.0021px;
    /* Inside auto layout */
    background: transparent;
    font-weight: 700;
    font-size: 14px;
}

.nickname_profile_header {
    display: flex;
    flex-direction: column;
    margin-left: 10px;
}

.hello_time {
    margin: 0;
    font-size: 12px;
    font-weight: 100;
}

.nickname_header {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
}

.menu_block_header {
    display: flex;
    flex-direction: column;
}

.menu_cat_block {
    margin-bottom: 24px;
    color: #707070;
}

.title_cat {
    margin: 0;
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 500;
}

.menu_block {
    margin-bottom: 12px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
}

.active {
    font-weight: 700;
    color: #2E93FF;
    background: linear-gradient(93.07deg, #3e57a7 0%, #f9f9f9 103.19%), #04040c;
    /* подложка */
    background-blend-mode: color-dodge;
}

.menu_block.active > svg > path {
    stroke: #2E93FF;
}

.name_menu {
    margin-left: 10px;
    font-size: 16px;
}

body {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    min-height: 100vh;
    height: 100%;
    display: flex;
    color: #fff;
    background: #0A0A1A;
}

.right_block {
    width: 100%;
}

.overview_block {
    background: #04040C;
    height: 85px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
}

.ow_wrap {
    display: flex;
    font-size: 16px;
    gap: 10px;
}

.ow_cat {
    color: #707070;
}

.separator {
    color: #707070;
}

.ow_page {
    color: #fff;
    font-weight: 500;
}

.notification_wrap {
    display: flex;
    border: 2px solid #152C45;
    border-radius: 10px;
    padding: 10px;
    cursor: pointer;
}

.container {
    max-width: 1200px;
    width: 100%;
    margin: 20px auto;
    display: flex;
    flex-direction: column;
    padding: 0 10px;
}

.mobile_menu {
    display: none;
}

@media screen and (max-width: 860px) {
    body > .left_block {
        display: none;
    }

    .overview_block {
        display: none;
    }

    .mobile_menu {
        position: fixed;
        bottom: 20px;
        left: 20px;
        right: 20px;
        width: auto;
        z-index: 999;
        display: block;
    }

    .mobile_menu_back {
        background: linear-gradient(180deg, #101221 -2.63%, #0A0B14 100%);
        background-clip: content-box;
        border-radius: 30px;
        padding: 1px;
        display: flex;
        position: relative;
    }

    .mobile_menu_back::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(221deg, rgba(25, 36, 51, 1) 0%, rgb(57 123 193) 50%, rgba(21, 44, 69, 1) 100%);
        border-radius: inherit;
        z-index: -1;
        padding: 1px;
        box-sizing: border-box;
    }

    .mobile_menu_content {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
        justify-content: space-between;
        padding: 10px 25px;
        gap: 10px;
    }

    .mobile_menu_block {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .mobile_menu_block > svg {
        width: 23px;
        height: 23px;
    }

    .name_menu {
        margin: 5px 0;
        font-size: 14px;
    }

    .active {
        background: none;
    }
    .mobile_menu_block.active > svg > path {
    stroke: #2E93FF;
}

.container {
    width: 95%;
}

main {
    margin-bottom: 110px;
}
}
/* ═══════════════════════════════════════════
   LIGHT THEME
   ═══════════════════════════════════════════ */
body.light-theme,
body[data-theme="light"] {
    background: #f0f2f5 !important;
    color: #1a1a2e !important;
}

body[data-theme="light"] .left_block {
    background: #ffffff;
    border-right: 1px solid #e0e0e0;
}

body[data-theme="light"] .header {
    background: #ffffff;
}

body[data-theme="light"] .right_block {
    background: #f0f2f5;
}

body[data-theme="light"] .mobile_menu {
    background: #ffffff;
    border-top: 1px solid #e0e0e0;
}

body[data-theme="light"] .mobile_menu_back {
    background: #ffffff;
}

body[data-theme="light"] .title,
body[data-theme="light"] .nickname,
body[data-theme="light"] .nickname_header,
body[data-theme="light"] h1,
body[data-theme="light"] h2,
body[data-theme="light"] h3 {
    color: #1a1a2e !important;
}

body[data-theme="light"] .subtitle,
body[data-theme="light"] .ow_cat,
body[data-theme="light"] .ow_page,
body[data-theme="light"] .hello_time {
    color: #6B7280 !important;
}

body[data-theme="light"] .profile_block,
body[data-theme="light"] .balance_profile_block,
body[data-theme="light"] .settings_section,
body[data-theme="light"] .recent_block,
body[data-theme="light"] .referal_block {
    background: #ffffff;
}

body[data-theme="light"] .profile_block::before,
body[data-theme="light"] .balance_profile_block::before,
body[data-theme="light"] .settings_section::before,
body[data-theme="light"] .recent_block::before,
body[data-theme="light"] .referal_block::before {
    background: linear-gradient(221deg, #d0dce8 0%, #a8c4e0 50%, #d0dce8 100%);
}

body[data-theme="light"] .setting_input,
body[data-theme="light"] .setting_select,
body[data-theme="light"] .ref_info_block,
body[data-theme="light"] .recent_activity_block {
    background: #f7f8fa !important;
    border-color: #d0dce8 !important;
    color: #1a1a2e !important;
}

body[data-theme="light"] .theme_btn {
    background: #f7f8fa;
    border-color: #d0dce8;
    color: #6B7280;
}

body[data-theme="light"] .theme_btn.active {
    background: rgba(46, 147, 255, 0.1);
    border-color: #2E93FF;
    color: #1a1a2e;
}

body[data-theme="light"] .ico_balance_prof,
body[data-theme="light"] .ico_w_r,
body[data-theme="light"] .icon_ref,
body[data-theme="light"] .avatar_profile,
body[data-theme="light"] .setting_profile_btn {
    background: #f0f2f5;
    border-color: #d0dce8;
}

body[data-theme="light"] .name_menu {
    color: #4a5568;
}

body[data-theme="light"] .menu_block.active .name_menu,
body[data-theme="light"] .mobile_menu_block.active .name_menu {
    color: #2E93FF;
}

body[data-theme="light"] .title_cat {
    color: #6B7280;
}

body[data-theme="light"] .w_r_t {
    color: #1a1a2e;
}

body[data-theme="light"] .rank {
    color: #6B7280;
}

body[data-theme="light"] .r_a_title > span,
body[data-theme="light"] .ref_title_block > span,
body[data-theme="light"] .title_recent {
    color: #1a1a2e;
}

body[data-theme="light"] .miners_value_span > span,
body[data-theme="light"] .ref_info_content > span,
body[data-theme="light"] .setting_label {
    color: #6B7280;
}

/* Wallet page light theme */
body[data-theme="light"] .wallet_wrap,
body[data-theme="light"] .balance_block,
body[data-theme="light"] .main_coin_block,
body[data-theme="light"] .coin_block {
    background: #ffffff;
    border-color: #d0dce8;
}

body[data-theme="light"] .total_balance,
body[data-theme="light"] .amount_coin {
    color: #1a1a2e;
}

/* Mining page light theme */
body[data-theme="light"] .catalog_item {
    background: #ffffff;
    border-color: #d0dce8;
}