@charset "UTF-8";

/*
  Final mobile layer for Adsrek
  Load AFTER theme.css and style.css
*/

:root{
  --mobile-radius: 18px;
  --mobile-radius-lg: 22px;
  --mobile-radius-xl: 26px;
  --mobile-bottom-safe: calc(env(safe-area-inset-bottom, 0px) + 92px);
  --x-blur: none !important;
}

/* dark theme fallbacks */
html[data-theme="dark"],
html[data-bs-theme="dark"],
body.theme-dark,
body.dark-theme,
body.dark,
body[data-theme="dark"]{
  --mobile-shell-bg: #08111d;
  --mobile-shell-bg-2: #0b1626;
  --mobile-panel-bg: #0d192b;
  --mobile-panel-bg-2: #111f34;
  --mobile-border: rgba(255,255,255,.08);
  --mobile-border-strong: rgba(214,181,122,.24);
  --mobile-text: #edf1f8;
  --mobile-text-soft: rgba(237,241,248,.74);
  --mobile-text-muted: rgba(237,241,248,.54);
  --mobile-shadow: 0 16px 38px rgba(0,0,0,.34);
  --mobile-shadow-soft: 0 10px 24px rgba(0,0,0,.28);
}

/* light theme fallbacks */
html[data-theme="light"],
html[data-bs-theme="light"],
body.theme-light,
body.light-theme,
body.light,
body[data-theme="light"]{
  --mobile-shell-bg: #edf3fb;
  --mobile-shell-bg-2: #dfe9f5;
  --mobile-panel-bg: #ffffff;
  --mobile-panel-bg-2: #f7faff;
  --mobile-border: rgba(18,27,42,.10);
  --mobile-border-strong: rgba(184,138,67,.22);
  --mobile-text: #172131;
  --mobile-text-soft: rgba(23,33,49,.72);
  --mobile-text-muted: rgba(23,33,49,.54);
  --mobile-shadow: 0 16px 38px rgba(10,22,40,.12);
  --mobile-shadow-soft: 0 10px 24px rgba(10,22,40,.10);
}

/* default if no theme flag is present */
html:not([data-theme]):not([data-bs-theme]),
:root{
  --mobile-shell-bg: #08111d;
  --mobile-shell-bg-2: #0b1626;
  --mobile-panel-bg: #0d192b;
  --mobile-panel-bg-2: #111f34;
  --mobile-border: rgba(255,255,255,.08);
  --mobile-border-strong: rgba(214,181,122,.24);
  --mobile-text: #edf1f8;
  --mobile-text-soft: rgba(237,241,248,.74);
  --mobile-text-muted: rgba(237,241,248,.54);
  --mobile-shadow: 0 16px 38px rgba(0,0,0,.34);
  --mobile-shadow-soft: 0 10px 24px rgba(0,0,0,.28);
}

html,
body,
.page-frame{
  width: 100%;
  max-width: 100%;
}

.page-frame{
  overflow-x: clip !important;
}

@media (min-width: 981px){
  #mobile-menu,
  #mobile-menu-guest,
  .mobile-menu,
  .mobile-profile-menu,
  .mobile-profile-btn,
  .theme-toggle--mobile,
  .open-menu,
  .mobile-bottom-nav,
  .menu_mob,
  .leftmenu-mob,
  .footer-menu{
    display: none !important;
  }
}

@media (max-width: 980px){
  /* global anti-blur */
  :root{
    --x-blur: none !important;
  }

  body::before,
  .main-header,
  .main,
  table.main,
  .main.premium-main,
  table.main.premium-main,
  #leftcolumn .leftside,
  #rightcolumn .rightside,
  #rightcolumn .sidebar-widget,
  #leftcolumn .banners,
  #rightcolumn .banners,
  #contentwrapper .members_new_block,
  #contentwrapper .premium-card,
  #contentwrapper .settings-avatar,
  #contentwrapper .settings-personal-data,
  #contentwrapper .settings-password,
  #contentwrapper .settings-payout,
  #contentwrapper .settings-social-network,
  #contentwrapper .rating-block,
  #contentwrapper .context-links-list,
  #contentwrapper .banner-catalog,
  #contentwrapper .pay-today-chart-shell,
  #contentwrapper .pay-today-total,
  #contentwrapper .top100-page__intro,
  #contentwrapper .top100-page__table-wrap,
  #contentwrapper .top100-page__empty,
  #contentwrapper .competition-page .premium-empty,
  #contentwrapper .competition-page .premium-card,
  #contentwrapper .goodref,
  #contentwrapper .goodref_new,
  #contentwrapper a.goodref,
  .mobile-menu,
  .mobile-menu .mm__bg,
  .mobile-menu .mm__wrapper,
  .mobile-profile-menu,
  .mobile-bottom-nav,
  span.select,
  .menu-panellang .select,
  span.select .options,
  .menu-panellang .select .options{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body::before{
    content: none !important;
    display: none !important;
  }

  html,
  body,
  body.site-body,
  .page-frame{
    min-height: 100dvh !important;
  }

  body.site-body,
  body{
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    min-height: 100dvh !important;
    background: linear-gradient(180deg, var(--mobile-shell-bg) 0%, var(--mobile-shell-bg-2) 100%) fixed !important;
    color: var(--mobile-text) !important;
  }

  body.site-body,
  body,
  body a,
  body .ajax-site,
  body button,
  body input,
  body select,
  body textarea{
    color: var(--mobile-text) !important;
  }

  .page-frame{
    display: flex !important;
    flex-direction: column !important;
    padding: 0 0 var(--mobile-bottom-safe) !important;
  }

  .layout-stage{
    flex: 1 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 10px 20px !important;
    box-sizing: border-box !important;
  }

  .layout-stage,
  .main-header,
  .footer,
  .main,
  .main.premium-main,
  table.main,
  table.main.premium-main{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* hide desktop side columns */
  #leftcolumn,
  .leftmenu,
  #rightcolumn,
  .rightmenu{
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
  }

  table.main,
  table.main.premium-main,
  table.main tbody,
  table.main tr,
  table.main td,
  table.main.premium-main tbody,
  table.main.premium-main tr,
  table.main.premium-main td{
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  table.main,
  table.main.premium-main{
    border-spacing: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }

  #contentwrapper{
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }

  /* header */
  .menu_mob,
  .mobile-profile-btn,
  .mobile-bottom-nav,
  .leftmenu-mob,
  .theme-toggle--mobile,
  .open-menu,
  .footer-menu{
    display: flex !important;
  }

  .theme-toggle:not(.theme-toggle--mobile),
  #open_lang,
  #theme-toggle,
  .main-header .notifs,
  .main-header__nav,
  .main-header .menu,
  .main-navigation{
    display: none !important;
  }

  .main-header,
  .main-header.main-header--refined{
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    min-height: 0 !important;
    margin: 10px 10px 14px !important;
    padding: 12px 14px !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto auto !important;
    align-items: center !important;
    gap: 10px !important;
    border-radius: 22px !important;
    border: 1px solid var(--mobile-border) !important;
    background: linear-gradient(180deg, var(--mobile-panel-bg), var(--mobile-panel-bg-2)) !important;
    box-shadow: var(--mobile-shadow-soft) !important;
    z-index: 20 !important;
  }

  .main-header__logo,
  .main-header .logo{
    min-width: 0 !important;
  }

  .main-header__logo img,
  .main-header .logo img,
  .logo img{
    width: 148px !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  .main-header__controls,
  .main-header__toolbar,
  .main-header__control-stack{
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    position: static !important;
  }

  .header-icon-btn,
  .theme-toggle--mobile,
  .open-menu,
  .mobile-profile-btn,
  .main-header .header-icon-btn,
  .main-header .theme-toggle--mobile,
  .main-header .open-menu,
  .main-header .mobile-profile-btn{
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 14px !important;
    border: 1px solid var(--mobile-border) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)), #132238 !important;
    box-shadow: none !important;
    color: var(--mobile-text) !important;
  }

  .mobile-profile-btn img{
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    object-fit: cover !important;
  }

  /* mobile drawer */
  #mobile-menu,
  #mobile-menu-guest{
    display: none;
  }

  .mobile-menu{
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    z-index: 9999 !important;
    display: none;
  }

  .mobile-menu[style*="display: block"],
  .mobile-menu.is-open,
  body.menu-open .mobile-menu{
    display: block !important;
  }

  .mobile-menu .mm__bg{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(3, 8, 16, .96) !important;
    opacity: 1 !important;
    z-index: 1 !important;
  }

  .mobile-menu .mm__wrapper{
    position: absolute !important;
    inset: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    height: 100dvh !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: linear-gradient(180deg, var(--mobile-shell-bg) 0%, var(--mobile-panel-bg) 100%) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    visibility: visible !important;
    transform: translateX(0) !important;
    transition: none !important;
    z-index: 2 !important;
    touch-action: auto !important;
  }

  .mobile-drawer{
    min-height: 100dvh !important;
    padding: 16px 14px calc(env(safe-area-inset-bottom, 0px) + 28px) !important;
    box-sizing: border-box !important;
    background: transparent !important;
  }

  .mobile-drawer__header{
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin: 0 0 16px !important;
  }

  .mobile-drawer__close{
    align-self: flex-end !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 14px !important;
    background: var(--mobile-panel-bg) !important;
    border: 1px solid var(--mobile-border) !important;
    color: var(--mobile-text) !important;
    box-shadow: none !important;
  }

  .mobile-drawer__brand,
  .mobile-drawer__profile,
  .mobile-drawer__balances,
  .mobile-drawer__group,
  .mobile-drawer__group a,
  .mobile-drawer__balance{
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .mobile-drawer__profile{
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px !important;
    border-radius: 18px !important;
    background: linear-gradient(180deg, #0d192b, #111f34) !important;
    border: 1px solid var(--mobile-border) !important;
    box-shadow: none !important;
  }

  .mobile-drawer__avatar{
    width: 68px !important;
    height: 68px !important;
    min-width: 68px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    background: #d8dbe1 !important;
    border: 2px solid rgba(214,181,122,.75) !important;
  }

  .mobile-drawer__name,
  .mobile-drawer__group a,
  .mobile-drawer__group a i,
  .mobile-drawer__balance,
  .mobile-drawer__balance span,
  .mobile-drawer__title,
  .mobile-drawer__id{
    color: var(--mobile-text) !important;
    text-shadow: none !important;
    opacity: 1 !important;
  }

  .mobile-drawer__name{
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
  }

  .mobile-drawer__id,
  .mobile-drawer__balance span,
  .mobile-drawer__title{
    color: var(--mobile-text-soft) !important;
  }

  .mobile-drawer__balances{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  .mobile-drawer__balance{
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    padding: 12px 14px !important;
    border-radius: 16px !important;
    background: var(--mobile-panel-bg) !important;
    border: 1px solid var(--mobile-border) !important;
    font-weight: 700 !important;
  }

  .mobile-drawer__group{
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin: 0 0 16px !important;
  }

  .mobile-drawer__title{
    margin: 2px 0 0 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
  }

  .mobile-drawer__group a{
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 46px !important;
    padding: 0 14px !important;
    border-radius: 14px !important;
    text-decoration: none !important;
    background: var(--mobile-panel-bg) !important;
    border: 1px solid var(--mobile-border) !important;
    box-shadow: none !important;
    font-size: 15px !important;
    line-height: 1.25 !important;
  }

  .mobile-drawer__group a i{
    width: 18px !important;
    text-align: center !important;
    color: #f3f5fb !important;
    opacity: 1 !important;
  }

  .mobile-drawer__logout{
    color: #ffd4d4 !important;
  }

  body.menu-open,
  body.menu-open.site-body{
    overflow: hidden !important;
    touch-action: none !important;
  }

  body.menu-open .main-header,
  body.menu-open .mobile-bottom-nav,
  body.menu-open .footer,
  body.menu-open .fixedtabs,
  body.menu-open .fixedtabsd,
  body.menu-open .fixedtab,
  body.menu-open #cookie_notification,
  body.menu-open .small-card--telegram,
  body.menu-open .fixedtabb,
  body.menu-open .fixedtabbb{
    display: none !important;
  }

  /* cards / blocks */
  #contentwrapper .members_new_block,
  #contentwrapper .premium-card,
  #contentwrapper .settings-avatar,
  #contentwrapper .settings-personal-data,
  #contentwrapper .settings-password,
  #contentwrapper .settings-payout,
  #contentwrapper .settings-social-network,
  #contentwrapper .rating-block,
  #contentwrapper .context-links-list,
  #contentwrapper .banner-catalog,
  #contentwrapper .pay-today-chart-shell,
  #contentwrapper .pay-today-total,
  #contentwrapper .top100-page__intro,
  #contentwrapper .top100-page__table-wrap,
  #contentwrapper .top100-page__empty,
  #contentwrapper .competition-page .premium-empty,
  #contentwrapper .competition-page .premium-card,
  #contentwrapper .goodref,
  #contentwrapper .goodref_new,
  #contentwrapper a.goodref,
  #contentwrapper .settings__block-content,
  #contentwrapper .members_data,
  #contentwrapper .members-page--reference,
  #contentwrapper .wall_record,
  #contentwrapper .wall-post,
  #contentwrapper .cabinet-popup,
  #contentwrapper .premium-cabinet{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    border-radius: 18px !important;
    background: linear-gradient(180deg, rgba(17,31,52,.94), rgba(12,23,38,.96)) !important;
    border: 1px solid var(--mobile-border) !important;
    box-shadow: none !important;
  }

  #contentwrapper .settings-avatar,
  #contentwrapper .settings-personal-data,
  #contentwrapper .settings-password,
  #contentwrapper .settings-payout,
  #contentwrapper .settings-social-network,
  #contentwrapper .rating-block,
  #contentwrapper .context-links-list,
  #contentwrapper .banner-catalog,
  #contentwrapper .pay-today-chart-shell,
  #contentwrapper .pay-today-total,
  #contentwrapper .top100-page__intro,
  #contentwrapper .top100-page__table-wrap,
  #contentwrapper .top100-page__empty,
  #contentwrapper .competition-page .premium-empty,
  #contentwrapper .competition-page .premium-card{
    padding: 16px !important;
  }

  .titles,
  .titles2,
  .wall_new_title,
  .members-progress-title,
  .sidebar-widget__title{
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 0 12px !important;
    padding: 0 14px !important;
    border-radius: 14px !important;
    background: var(--mobile-shell-bg) !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    color: var(--mobile-text) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-shadow: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .members-grid,
  .members-grid--two,
  #contentwrapper .members-grid,
  #contentwrapper .members-grid--two{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .premium-tabs,
  .menu-task-work,
  .settings-page__nav,
  .settings-page .menu-task-work{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .premium-tabs__link,
  .menu-task-work__link,
  .settings-page .menu-task-work__link{
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 0 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
    border-radius: 14px !important;
  }

  /* tables / forms */
  .table,
  .tabl,
  .premium-table,
  .nw,
  .table tbody,
  .tabl tbody,
  .premium-table tbody,
  .nw tbody,
  .table tr,
  .tabl tr,
  .premium-table tr,
  .nw tr,
  .table td,
  .tabl td,
  .premium-table td,
  .nw td{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .table,
  .tabl,
  .premium-table,
  .nw{
    display: block !important;
    border-collapse: collapse !important;
  }

  .table tr,
  .tabl tr,
  .premium-table tr,
  .nw tr{
    display: block !important;
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
  }

  .table td,
  .tabl td,
  .premium-table td,
  .nw td{
    display: block !important;
    padding: 10px 0 !important;
    border: 0 !important;
  }

  input,
  select,
  textarea,
  .expanding,
  .input,
  .inp,
  .search-history .inp-ser-arch{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  textarea,
  .expanding{
    min-height: 120px !important;
  }

  button,
  .button,
  .button2,
  .btn,
  .fbtn-green,
  .fbtn-red,
  .fbtn-black,
  .fbtn-org,
  .fbtn-blue160,
  .start-yes-serf,
  .start-error-serf,
  .go-link-youtube,
  .status-link-youtube,
  .youtube-error{
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .load-pages,
  #load-pages,
  #load-pages-dop,
  .block-task-read,
  .reflink{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #popup{
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: calc(100vw - 24px) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
    overflow: hidden !important;
  }

  #popup .text-popup{
    max-height: calc(100dvh - 110px) !important;
  }

  /* page-specific helper blocks */
  #page-goodref .goodref,
  #page-goodref .goodref_new,
  #page-goodref a.goodref,
  .goodref-toolbar{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .goodref-toolbar{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  .wall_new_avatar img,
  #contentwrapper #id_board-avatar,
  #contentwrapper .ava-dosa,
  .avatar-smoll,
  .mail-mailer img{
    max-width: 100% !important;
    height: auto !important;
  }

  .block1,
  .block2,
  .block3,
  .block4,
  .block5{
    float: none !important;
    width: 100% !important;
  }

  .block4 ul li,
  .block5 ul li{
    padding-left: 0 !important;
  }

  .menu-kabinet a,
  .menu-earnings a{
    margin: 4px !important;
  }

  .small-card--telegram{
    position: static !important;
    right: auto !important;
    bottom: auto !important;
    max-width: 100% !important;
    margin: 10px auto 0 !important;
  }

  /* footer */
  .footer{
    flex: 0 0 auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 16px 10px var(--mobile-bottom-safe) !important;
    background: transparent !important;
    color: var(--mobile-text-soft) !important;
  }

  .footer__container{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  .foot-left,
  .foot-center,
  .foot-right{
    float: none !important;
    width: 100% !important;
    text-align: center !important;
    margin: 0 0 10px !important;
  }

  .foot-left span,
  .foot-left ul,
  .foot-right span,
  .foot-right .copyr,
  .foot-center{
    padding: 0 !important;
  }

  .foot-left ul li,
  .foot-right ul li{
    position: static !important;
    display: inline-block !important;
    margin: 0 4px !important;
    padding: 0 !important;
  }

  /* bottom nav */
  .mobile-bottom-nav{
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 8px) !important;
    z-index: 9000 !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 4px !important;
    padding: 8px !important;
    border-radius: 20px !important;
    background: var(--mobile-shell-bg) !important;
    border: 1px solid var(--mobile-border) !important;
    box-shadow: 0 14px 30px rgba(0,0,0,.36) !important;
  }

  .mbn__item{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    min-height: 44px !important;
    padding: 4px 2px !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    color: var(--mobile-text) !important;
    text-align: center !important;
    text-decoration: none !important;
  }

  .mbn__item i{
    font-size: 16px !important;
  }

  .mobile-profile-menu{
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    width: 220px !important;
    padding: 10px !important;
    border-radius: 16px !important;
    background: var(--mobile-shell-bg-2) !important;
    border: 1px solid var(--mobile-border) !important;
    box-shadow: var(--mobile-shadow-soft) !important;
    z-index: 40 !important;
  }

  .mobile-profile-menu a{
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 42px !important;
    padding: 0 12px !important;
    border-radius: 12px !important;
    color: var(--mobile-text) !important;
    text-decoration: none !important;
  }
}

@media (max-width: 640px){
  .main-header,
  .main-header.main-header--refined{
    margin: 8px 8px 12px !important;
    padding: 11px 12px !important;
    border-radius: 20px !important;
  }

  .main-header__logo img,
  .main-header .logo img,
  .logo img{
    width: 136px !important;
  }

  .titles,
  .titles2,
  .wall_new_title,
  .members-progress-title,
  .sidebar-widget__title{
    font-size: 15px !important;
  }

  .mobile-drawer{
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .mobile-drawer__balances{
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 420px){
  .main-header,
  .main-header.main-header--refined{
    grid-template-columns: minmax(0,1fr) auto auto !important;
    gap: 8px !important;
  }

  .main-header__logo img,
  .main-header .logo img,
  .logo img{
    width: 126px !important;
  }

  .header-icon-btn,
  .theme-toggle--mobile,
  .open-menu,
  .mobile-profile-btn,
  .main-header .header-icon-btn,
  .main-header .theme-toggle--mobile,
  .main-header .open-menu,
  .main-header .mobile-profile-btn{
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }

  .mobile-bottom-nav{
    left: 6px !important;
    right: 6px !important;
    padding: 7px !important;
  }

  .mbn__item{
    font-size: 9px !important;
  }
}

/* ===== FINAL LIGHT/DARK + GENERIC ACCOUNT FIX ===== */
@media (max-width: 980px){
  /* theme-dependent shell */
  html,
  body,
  body.site-body{
    background: linear-gradient(180deg, var(--mobile-shell-bg) 0%, var(--mobile-shell-bg-2) 100%) fixed !important;
    color: var(--mobile-text) !important;
  }

  body a,
  body button,
  body input,
  body select,
  body textarea{
    color: var(--mobile-text) !important;
  }

  /* make theme switchers clickable */
  .theme-toggle,
  .theme-toggle--mobile,
  .header-icon-btn,
  .open-menu,
  [id*="theme-toggle"],
  [class*="theme-toggle"]{
    pointer-events: auto !important;
    cursor: pointer !important;
  }

  /* kill old desktop footer/reklama rows on mobile */
  .footer,
  .footer__container,
  .foot-left,
  .foot-center,
  .foot-right,
  .foot-left ul,
  .foot-right ul,
  .foot-left span,
  .foot-right span,
  .foot-right .copyr,
  .wm1,
  .wm2,
  .footer-menu,
  .foot-right img,
  #baner-serf,
  .support_panel,
  .on_line,
  .on_chat,
  .left-banner,
  .banners,
  .banners2,
  .all-banner-100,
  .all-banner-200{
    display: none !important;
  }

  .footer{
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
  }

  .page-frame{
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 94px) !important;
  }

  /* strong generic card styling for old account pages */
  #contentwrapper{
    gap: 14px !important;
  }

  #contentwrapper > div,
  #contentwrapper > table,
  #contentwrapper > form,
  #contentwrapper > section{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 14px !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    border-radius: 20px !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
      linear-gradient(180deg, var(--mobile-panel-bg), var(--mobile-panel-bg-2)) !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  #contentwrapper > div > div,
  #contentwrapper > div > table,
  #contentwrapper > table > tbody > tr > td > div,
  #contentwrapper > table > tbody > tr > td > table{
    background: transparent !important;
    box-shadow: none !important;
  }

  #contentwrapper .titles,
  #contentwrapper .titles2,
  #contentwrapper .members-progress-title,
  #contentwrapper .sidebar-widget__title,
  #contentwrapper .wall_new_title{
    min-height: 46px !important;
    margin: 0 0 12px !important;
    padding: 0 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 16px !important;
    background: var(--mobile-shell-bg) !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    color: var(--mobile-text) !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    text-shadow: none !important;
    letter-spacing: .01em !important;
  }

  /* generic tables inside account screens */
  #contentwrapper table:not(.main):not(.premium-main){
    width: 100% !important;
    max-width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: rgba(255,255,255,.015) !important;
    border: 1px solid rgba(255,255,255,.05) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }

  #contentwrapper table:not(.main):not(.premium-main) tbody{
    display: table-row-group !important;
  }

  #contentwrapper table:not(.main):not(.premium-main) tr{
    display: table-row !important;
  }

  #contentwrapper table:not(.main):not(.premium-main) td,
  #contentwrapper table:not(.main):not(.premium-main) th{
    display: table-cell !important;
    width: auto !important;
    padding: 12px 10px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.05) !important;
    vertical-align: middle !important;
    line-height: 1.3 !important;
    font-size: 13px !important;
    color: var(--mobile-text) !important;
    background: transparent !important;
  }

  #contentwrapper table:not(.main):not(.premium-main) tr:last-child td{
    border-bottom: 0 !important;
  }

  #contentwrapper table:not(.main):not(.premium-main) td:first-child{
    width: 44% !important;
    color: var(--mobile-text-soft) !important;
    font-size: 12px !important;
  }

  #contentwrapper table:not(.main):not(.premium-main) td:last-child{
    color: var(--mobile-text) !important;
    font-weight: 600 !important;
    text-align: right !important;
  }

  #contentwrapper table:not(.main):not(.premium-main) strong,
  #contentwrapper table:not(.main):not(.premium-main) b{
    color: #8db5ff !important;
    font-weight: 700 !important;
  }

  /* light theme visual polish */
  html[data-theme="light"] #contentwrapper > div,
  html[data-theme="light"] #contentwrapper > table,
  html[data-theme="light"] #contentwrapper > form,
  html[data-theme="light"] #contentwrapper > section,
  html[data-bs-theme="light"] #contentwrapper > div,
  html[data-bs-theme="light"] #contentwrapper > table,
  html[data-bs-theme="light"] #contentwrapper > form,
  html[data-bs-theme="light"] #contentwrapper > section,
  body.theme-light #contentwrapper > div,
  body.theme-light #contentwrapper > table,
  body.theme-light #contentwrapper > form,
  body.theme-light #contentwrapper > section,
  body.light-theme #contentwrapper > div,
  body.light-theme #contentwrapper > table,
  body.light-theme #contentwrapper > form,
  body.light-theme #contentwrapper > section{
    box-shadow: var(--mobile-shadow-soft) !important;
  }

  html[data-theme="light"] .mobile-menu .mm__bg,
  html[data-bs-theme="light"] .mobile-menu .mm__bg,
  body.theme-light .mobile-menu .mm__bg,
  body.light-theme .mobile-menu .mm__bg{
    background: rgba(237,243,251,.88) !important;
  }

  /* avoid legacy spacer artifacts */
  #contentwrapper br{
    display: none !important;
  }

  #contentwrapper td:empty{
    padding: 6px !important;
  }
}

@media (max-width: 640px){
  #contentwrapper > div,
  #contentwrapper > table,
  #contentwrapper > form,
  #contentwrapper > section{
    padding: 10px !important;
    border-radius: 18px !important;
  }

  #contentwrapper table:not(.main):not(.premium-main) td,
  #contentwrapper table:not(.main):not(.premium-main) th{
    padding: 10px 8px !important;
    font-size: 12px !important;
  }

  #contentwrapper table:not(.main):not(.premium-main) td:first-child{
    font-size: 11px !important;
  }
}