/* ========================================================= PAXOR ACCOUNT — MOBILE DRAWER Desktop is not affected. ========================================================= */ .account-mobile-header, .account-mobile-drawer-header, .account-mobile-drawer-backdrop { display: none; } @media (max-width: 760px) { /* ----------------------------------------------------- ACCOUNT PAGE ----------------------------------------------------- */ html body:has(.account-container) .account-container { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 10px 24px !important; box-sizing: border-box !important; } html body:has(.account-container) .account-box { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } /* ----------------------------------------------------- COMPACT MOBILE HEADER ----------------------------------------------------- */ html body:has(.account-container) .account-mobile-header { position: sticky !important; top: var(--paxor-mobile-top-nav-height, 46px) !important; z-index: 1180 !important; width: 100% !important; height: 50px !important; min-height: 50px !important; display: grid !important; grid-template-columns: 48px minmax(0, 1fr) 48px !important; align-items: center !important; margin: 0 0 8px !important; padding: 0 4px !important; box-sizing: border-box !important; background: linear-gradient( 180deg, rgba(8, 26, 33, .98), rgba(5, 16, 21, .98) ) !important; border-bottom: 1px solid rgba(25, 205, 235, .20) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; } html body:has(.account-container) .account-mobile-header-title { grid-column: 2 !important; margin: 0 !important; padding: 0 !important; font-size: 20px !important; line-height: 1 !important; font-weight: 700 !important; text-align: center !important; color: #f4f8fa !important; } html body:has(.account-container) .account-mobile-menu-toggle { grid-column: 1 !important; width: 42px !important; height: 42px !important; display: grid !important; place-items: center !important; margin: 0 !important; padding: 0 !important; border: 1px solid rgba(32, 211, 242, .32) !important; border-radius: 11px !important; background: rgba(9, 27, 34, .82) !important; color: #eaf7fa !important; box-shadow: inset 0 0 18px rgba(0, 185, 220, .04) !important; cursor: pointer !important; -webkit-tap-highlight-color: transparent !important; } html body:has(.account-container) .account-mobile-menu-toggle i { font-size: 22px !important; line-height: 1 !important; } /* ----------------------------------------------------- HIDE LARGE ACCOUNT HERO ON MOBILE ----------------------------------------------------- */ html body:has(.account-container) .account-hero, html body:has(.account-container) #account-page-status { display: none !important; } /* ----------------------------------------------------- MAIN ACCOUNT LAYOUT ----------------------------------------------------- */ html body:has(.account-container) .account-dashboard-layout { display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; grid-template-columns: none !important; } html body:has(.account-container) .account-dashboard-main { width: 100% !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } /* ===================================================== DRAWER ===================================================== */ html body:has(.account-container) .account-dashboard-sidebar { position: fixed !important; top: var(--paxor-mobile-top-nav-height, 46px) !important; left: 0 !important; right: auto !important; bottom: 0 !important; width: min(84vw, 340px) !important; max-width: 340px !important; min-width: 0 !important; height: calc( 100dvh - var(--paxor-mobile-top-nav-height, 46px) ) !important; display: block !important; margin: 0 !important; padding: 0 10px 20px !important; box-sizing: border-box !important; overflow-x: hidden !important; overflow-y: auto !important; background: linear-gradient( 180deg, rgba(8, 20, 26, .995), rgba(4, 11, 15, .995) ) !important; border-right: 1px solid rgba(29, 207, 238, .22) !important; box-shadow: 18px 0 38px rgba(0, 0, 0, .42) !important; transform: translate3d(-104%, 0, 0) !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; transition: transform .24s ease, opacity .18s ease, visibility .18s ease !important; z-index: 1520 !important; } html body.account-mobile-drawer-open .account-dashboard-sidebar { transform: translate3d(0, 0, 0) !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } /* ----------------------------------------------------- DRAWER SMALL HEADER ----------------------------------------------------- */ html body:has(.account-container) .account-mobile-drawer-header { position: sticky !important; top: 0 !important; z-index: 3 !important; height: 52px !important; min-height: 52px !important; display: grid !important; place-items: center !important; margin: 0 -10px 8px !important; padding: 0 12px !important; box-sizing: border-box !important; background: linear-gradient( 180deg, rgba(10, 28, 36, .995), rgba(7, 20, 26, .995) ) !important; border-bottom: 1px solid rgba(35, 209, 238, .18) !important; } html body:has(.account-container) .account-mobile-drawer-header strong { display: block !important; margin: 0 !important; padding: 0 !important; font-size: 19px !important; line-height: 1 !important; font-weight: 700 !important; text-align: center !important; color: #f4f8fa !important; } /* ----------------------------------------------------- SIDEBAR ITEMS ----------------------------------------------------- */ html body:has(.account-container) .account-dashboard-sidebar .tab-button { position: relative !important; width: 100% !important; min-width: 0 !important; max-width: none !important; min-height: 52px !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 13px !important; margin: 2px 0 !important; padding: 10px 12px !important; box-sizing: border-box !important; border: 0 !important; border-radius: 10px !important; background: transparent !important; text-align: left !important; text-decoration: none !important; transform: none !important; } html body:has(.account-container) .account-dashboard-sidebar .tab-button i { width: 26px !important; min-width: 26px !important; font-size: 19px !important; text-align: center !important; color: #9eafb5 !important; } html body:has(.account-container) .account-dashboard-sidebar .tab-button span { min-width: 0 !important; font-size: 15px !important; line-height: 1.2 !important; font-weight: 600 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } html body:has(.account-container) .account-dashboard-sidebar .tab-button:hover, html body:has(.account-container) .account-dashboard-sidebar .tab-button.active { background: rgba(25, 199, 229, .10) !important; } /* ===================================================== BACKDROP ===================================================== */ html body:has(.account-container) .account-mobile-drawer-backdrop { position: fixed !important; top: var(--paxor-mobile-top-nav-height, 46px) !important; left: 0 !important; right: 0 !important; bottom: 0 !important; display: block !important; margin: 0 !important; padding: 0 !important; background: rgba(0, 0, 0, .54) !important; backdrop-filter: blur(1.5px) !important; -webkit-backdrop-filter: blur(1.5px) !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: opacity .20s ease, visibility .20s ease !important; z-index: 1510 !important; } html body.account-mobile-drawer-open .account-mobile-drawer-backdrop { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } html body.account-mobile-drawer-open { overflow: hidden !important; } } /* === ACCOUNT MOBILE BANK CARD CLEAN V5 START === */ @media (max-width: 760px) { /* ===================================================== OUTER PROFILE FRAME No large empty box below the card. ===================================================== */ html body:has(.account-container) .account-profile-overview { display: block !important; width: 100% !important; max-width: none !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 8px 0 14px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; } /* Original right-side actions are not needed on mobile. They are available in the hamburger drawer. */ html body:has(.account-container) .account-profile-side { display: none !important; } /* Safety: even if JS/card state produced it previously */ html body:has(.account-container) .account-card-actions, html body:has(.account-container) .account-card-actions-list { display: none !important; visibility: hidden !important; pointer-events: none !important; } /* Remove old large collapse control */ html body:has(.account-container) .account-profile-overview-toggle { display: none !important; } /* ===================================================== CARD ===================================================== */ html body:has(.account-container) .account-bank-card-shell { width: 100% !important; max-width: none !important; height: 195px !important; min-height: 195px !important; max-height: 195px !important; margin: 0 !important; padding: 0 !important; } html body:has(.account-container) .account-bank-card { position: relative !important; width: 100% !important; max-width: none !important; height: 195px !important; min-height: 195px !important; max-height: 195px !important; aspect-ratio: auto !important; margin: 0 !important; border-radius: 19px !important; box-sizing: border-box !important; overflow: hidden !important; } html body:has(.account-container) .account-bank-card-face { inset: 0 !important; width: 100% !important; height: 195px !important; min-height: 195px !important; max-height: 195px !important; padding: 10px 11px 9px !important; border-radius: 19px !important; box-sizing: border-box !important; overflow: hidden !important; } /* ===================================================== FRONT ===================================================== */ html body:has(.account-container) .account-bank-card-front { display: flex !important; flex-direction: column !important; justify-content: flex-start !important; gap: 6px !important; padding-right: 11px !important; } /* ===================================================== TOP PROFILE AREA ===================================================== */ html body:has(.account-container) .account-bank-card-top, html body:has(.account-container) .account-bank-card-top:has(.account-card-actions) { position: relative !important; display: grid !important; grid-template-columns: 58px minmax(0, 1fr) !important; align-items: start !important; column-gap: 9px !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 32px 0 0 !important; flex: 0 0 auto !important; } /* ===================================================== AVATAR — TOP LEFT ===================================================== */ html body:has(.account-container) .account-bank-card .account-profile-avatar-wrap { grid-column: 1 !important; position: relative !important; align-self: start !important; width: 58px !important; min-width: 58px !important; max-width: 58px !important; height: 58px !important; min-height: 58px !important; max-height: 58px !important; margin: 0 !important; padding: 0 !important; flex: none !important; transform: none !important; } html body:has(.account-container) .account-profile-avatar { display: block !important; width: 58px !important; height: 58px !important; margin: 0 !important; object-fit: cover !important; transform: none !important; } html body:has(.account-container) .account-bank-card .account-profile-online-dot { width: 13px !important; height: 13px !important; right: 1px !important; bottom: 1px !important; } /* ===================================================== NAME + VERIFIED ===================================================== */ html body:has(.account-container) .account-profile-summary { grid-column: 2 !important; display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; padding: 1px 0 0 !important; transform: none !important; } html body:has(.account-container) .account-bank-card .account-profile-title-row { display: flex !important; align-items: center !important; justify-content: flex-start !important; flex-wrap: nowrap !important; gap: 4px !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 0 0 5px !important; padding: 0 !important; } html body:has(.account-container) .account-bank-card .account-profile-title-row h2 { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; font-size: 13px !important; line-height: 1.05 !important; font-weight: 700 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; transform: none !important; } html body:has(.account-container) .account-bank-card .account-profile-verified { flex: 0 0 18px !important; display: grid !important; place-items: center !important; width: 18px !important; min-width: 18px !important; max-width: 18px !important; height: 18px !important; min-height: 18px !important; max-height: 18px !important; margin: 0 !important; padding: 0 !important; font-size: 8px !important; line-height: 1 !important; transform: none !important; } html body:has(.account-container) .account-bank-card .account-profile-verified i { font-size: 8px !important; line-height: 1 !important; } /* ===================================================== EMAIL + PHONE ===================================================== */ html body:has(.account-container) .account-bank-card .account-profile-details { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 3px !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; font-size: 9.5px !important; line-height: 1.08 !important; } html body:has(.account-container) .account-bank-card .account-profile-details span { display: flex !important; align-items: center !important; gap: 5px !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; font-size: 9.5px !important; line-height: 1.08 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; transform: none !important; } html body:has(.account-container) .account-bank-card .account-profile-details i { flex: 0 0 13px !important; width: 13px !important; margin: 0 !important; font-size: 9px !important; line-height: 1 !important; text-align: center !important; } /* ===================================================== BALANCE — CLEAN BOTTOM ROW ===================================================== */ html body:has(.account-container) .account-bank-card .account-profile-balance { display: grid !important; grid-template-columns: 24px minmax(0, 1fr) auto !important; align-items: center !important; column-gap: 6px !important; width: 100% !important; height: 43px !important; min-height: 43px !important; max-height: 43px !important; margin: auto 0 0 !important; padding: 5px 7px !important; border-radius: 10px !important; box-sizing: border-box !important; overflow: hidden !important; flex: 0 0 43px !important; } html body:has(.account-container) .account-profile-balance-icon { grid-column: 1 !important; display: grid !important; place-items: center !important; width: 24px !important; min-width: 24px !important; max-width: 24px !important; height: 24px !important; margin: 0 !important; font-size: 10px !important; } html body:has(.account-container) .account-profile-balance-copy { grid-column: 2 !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } html body:has(.account-container) .account-profile-balance-main-line { display: flex !important; align-items: center !important; flex-wrap: nowrap !important; gap: 4px !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; } html body:has(.account-container) .account-profile-balance-main-line span { flex: 0 1 auto !important; font-size: 8px !important; line-height: 1 !important; white-space: nowrap !important; } html body:has(.account-container) #account-profile-total-balance { flex: 0 0 auto !important; font-size: 10.5px !important; line-height: 1 !important; white-space: nowrap !important; } html body:has(.account-container) #account-profile-balance-hint { display: block !important; max-width: 100% !important; margin: 2px 0 0 !important; font-size: 7.5px !important; line-height: 1 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } html body:has(.account-container) .account-profile-connect-wallet-btn, html body:has(.account-container) .account-profile-disconnect-wallet-btn { grid-column: 3 !important; align-self: center !important; width: auto !important; min-width: 0 !important; max-width: 96px !important; height: 25px !important; min-height: 25px !important; max-height: 25px !important; margin: 0 !important; padding: 3px 6px !important; border-radius: 7px !important; font-size: 8px !important; line-height: 1 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } html body:has(.account-container) .account-profile-disconnect-wallet-btn i { margin-right: 3px !important; font-size: 8px !important; } /* ===================================================== FLIP BUTTON ===================================================== */ html body:has(.account-container) .account-bank-card-front > .account-bank-card-flip-btn { position: absolute !important; top: 9px !important; right: 9px !important; bottom: auto !important; left: auto !important; width: 27px !important; min-width: 27px !important; max-width: 27px !important; height: 27px !important; min-height: 27px !important; max-height: 27px !important; flex-basis: 27px !important; margin: 0 !important; padding: 0 !important; border-radius: 8px !important; font-size: 10px !important; transform: none !important; } html body:has(.account-container) .account-bank-card-front > .account-bank-card-flip-btn::after { display: none !important; content: none !important; } /* ===================================================== BACK ===================================================== */ html body:has(.account-container) .account-bank-card-back { display: flex !important; flex-direction: column !important; gap: 5px !important; } html body:has(.account-container) .account-bank-card-back-top { margin: 0 !important; font-size: 9px !important; line-height: 1 !important; } html body:has(.account-container) .account-bank-card-address-row { gap: 5px !important; margin: 3px 0 !important; padding: 5px 7px !important; border-radius: 8px !important; } html body:has(.account-container) #account-profile-wallet-address-full { min-width: 0 !important; font-size: 8px !important; line-height: 1.1 !important; word-break: break-all !important; } html body:has(.account-container) .account-bank-card-copy-btn { width: 26px !important; min-width: 26px !important; height: 26px !important; padding: 0 !important; } html body:has(.account-container) .account-bank-card-meta { display: grid !important; grid-template-columns: 1fr !important; gap: 2px !important; margin: 2px 0 0 !important; } html body:has(.account-container) .account-bank-card-meta span { display: flex !important; align-items: center !important; gap: 4px !important; min-width: 0 !important; font-size: 7.5px !important; line-height: 1.05 !important; } html body:has(.account-container) .account-bank-card-meta strong, html body:has(.account-container) .account-bank-card-meta b { font-size: inherit !important; line-height: inherit !important; } } /* === ACCOUNT MOBILE BANK CARD CLEAN V5 END === */ /* === ACCOUNT MOBILE CARD ALIGNMENT V6 START === */ @media (max-width: 760px) { /* ===================================================== AVATAR + INFORMATION ===================================================== */ html body:has(.account-container) .account-bank-card-top, html body:has(.account-container) .account-bank-card-top:has(.account-card-actions) { grid-template-columns: 58px minmax(0, 1fr) !important; column-gap: 4px !important; padding-right: 34px !important; } html body:has(.account-container) .account-profile-summary { padding-top: 0 !important; } /* * NAME * Отступ 13px совпадает с: * icon 10px + gap 3px в email/phone. */ html body:has(.account-container) .account-bank-card .account-profile-title-row { margin: 0 0 4px 13px !important; width: calc(100% - 13px) !important; gap: 3px !important; } html body:has(.account-container) .account-bank-card .account-profile-title-row h2 { font-size: 12.5px !important; line-height: 1.04 !important; font-weight: 700 !important; } html body:has(.account-container) .account-bank-card .account-profile-verified { width: 17px !important; min-width: 17px !important; max-width: 17px !important; height: 17px !important; min-height: 17px !important; max-height: 17px !important; flex-basis: 17px !important; } html body:has(.account-container) .account-bank-card .account-profile-verified i { font-size: 7.5px !important; } /* ===================================================== EMAIL + PHONE icon column = 10px gap = 3px => text starts exactly 13px from summary start. ===================================================== */ html body:has(.account-container) .account-bank-card .account-profile-details { gap: 3px !important; font-size: 9px !important; line-height: 1.05 !important; } html body:has(.account-container) .account-bank-card .account-profile-details span { display: grid !important; grid-template-columns: 10px minmax(0, 1fr) !important; column-gap: 3px !important; align-items: center !important; font-size: 9px !important; line-height: 1.05 !important; width: 100% !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } html body:has(.account-container) .account-bank-card .account-profile-details i { width: 10px !important; min-width: 10px !important; margin: 0 !important; font-size: 8px !important; text-align: center !important; } /* ===================================================== FLIP BUTTON + ARROW ===================================================== */ html body:has(.account-container) .account-bank-card-front > .account-bank-card-flip-btn { top: 8px !important; right: 15px !important; width: 28px !important; min-width: 28px !important; max-width: 28px !important; height: 28px !important; min-height: 28px !important; max-height: 28px !important; overflow: visible !important; } html body:has(.account-container) .account-bank-card-front > .account-bank-card-flip-btn::after { content: "" !important; display: block !important; position: absolute !important; top: 50% !important; right: -8px !important; width: 7px !important; height: 7px !important; border-right: 2px solid currentColor !important; border-bottom: 2px solid currentColor !important; opacity: .9 !important; transform: translateY(-50%) rotate(-45deg) !important; pointer-events: none !important; } /* ===================================================== PROFILE LINKS — ICONS ONLY ===================================================== */ html body:has(.account-container) .account-card-actions { position: absolute !important; top: 78px !important; left: 10px !important; right: 10px !important; bottom: auto !important; z-index: 5 !important; display: flex !important; width: auto !important; height: 28px !important; margin: 0 !important; padding: 0 !important; justify-content: flex-end !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } html body:has(.account-container) .account-card-actions .account-card-actions-list { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-end !important; gap: 5px !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; visibility: visible !important; opacity: 1 !important; background: transparent !important; border: 0 !important; } html body:has(.account-container) .account-card-actions .account-edit-profile-btn { display: grid !important; place-items: center !important; flex: 0 0 26px !important; width: 26px !important; min-width: 26px !important; max-width: 26px !important; height: 26px !important; min-height: 26px !important; max-height: 26px !important; margin: 0 !important; padding: 0 !important; border: 1px solid rgba(45, 206, 235, .20) !important; border-radius: 8px !important; background: rgba(9, 30, 37, .62) !important; color: rgba(220, 247, 252, .82) !important; box-shadow: none !important; text-decoration: none !important; transform: none !important; } html body:has(.account-container) .account-card-actions .account-edit-profile-btn i { display: block !important; margin: 0 !important; font-size: 10px !important; line-height: 1 !important; color: inherit !important; } /* Текст ссылок на мобильном скрываем */ html body:has(.account-container) .account-card-actions .account-edit-profile-btn span { display: none !important; } html body:has(.account-container) .account-card-actions .account-edit-profile-btn:active { background: rgba(19, 190, 222, .16) !important; color: #ffffff !important; } /* ===================================================== COLLAPSE ARROW UNDER CARD ===================================================== */ html body:has(.account-container) .account-profile-overview-toggle { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; display: grid !important; place-items: center !important; width: 46px !important; min-width: 46px !important; max-width: 46px !important; height: 26px !important; min-height: 26px !important; max-height: 26px !important; margin: 7px auto 0 !important; padding: 0 !important; border: 1px solid rgba(32, 207, 236, .35) !important; border-radius: 14px !important; background: rgba(6, 32, 39, .92) !important; color: #dff9fd !important; box-shadow: 0 0 12px rgba(0, 190, 225, .08) !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; z-index: 8 !important; transform: none !important; } html body:has(.account-container) .account-profile-overview-toggle i { font-size: 11px !important; line-height: 1 !important; transform: none !important; transition: transform .2s ease !important; } /* ===================================================== COLLAPSED STATE ===================================================== */ html body:has(.account-container) .account-dashboard-main.profile-overview-collapsed .account-bank-card-shell { display: none !important; } html body:has(.account-container) .account-dashboard-main.profile-overview-collapsed .account-profile-overview { height: auto !important; min-height: 0 !important; margin: 6px 0 10px !important; padding: 0 !important; } html body:has(.account-container) .account-dashboard-main.profile-overview-collapsed .account-profile-overview-toggle { display: grid !important; margin: 0 auto !important; } html body:has(.account-container) .account-dashboard-main.profile-overview-collapsed .account-profile-overview-toggle i { transform: rotate(180deg) !important; } } /* === ACCOUNT MOBILE CARD ALIGNMENT V6 END === */ /* === ACCOUNT MOBILE CARD TUNING V7 START === */ @media (max-width: 760px) { /* ===================================================== TOP AREA ALIGNMENT ===================================================== */ html body:has(.account-container) .account-bank-card-top, html body:has(.account-container) .account-bank-card-top:has(.account-card-actions) { grid-template-columns: 60px minmax(0, 1fr) !important; column-gap: 7px !important; padding-right: 38px !important; } html body:has(.account-container) .account-profile-summary { padding-top: 0 !important; } /* Имя немного ближе к аватару */ html body:has(.account-container) .account-bank-card .account-profile-title-row { margin: 0 0 4px 10px !important; width: calc(100% - 10px) !important; gap: 4px !important; } html body:has(.account-container) .account-bank-card .account-profile-title-row h2 { font-size: 12.5px !important; line-height: 1.04 !important; } html body:has(.account-container) .account-bank-card .account-profile-verified { width: 18px !important; min-width: 18px !important; max-width: 18px !important; height: 18px !important; min-height: 18px !important; max-height: 18px !important; } html body:has(.account-container) .account-bank-card .account-profile-verified i { font-size: 8px !important; } /* ===================================================== EMAIL + PHONE Иконки чуть правее от аватара, текст ближе к иконкам, все три строки визуально с одной левой линии. ===================================================== */ html body:has(.account-container) .account-bank-card .account-profile-details { margin-left: 10px !important; width: calc(100% - 10px) !important; gap: 4px !important; font-size: 9.2px !important; line-height: 1.08 !important; } html body:has(.account-container) .account-bank-card .account-profile-details span { display: grid !important; grid-template-columns: 12px minmax(0, 1fr) !important; column-gap: 2px !important; align-items: center !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; font-size: 9.2px !important; line-height: 1.08 !important; } html body:has(.account-container) .account-bank-card .account-profile-details i { width: 12px !important; min-width: 12px !important; font-size: 9px !important; line-height: 1 !important; margin: 0 !important; text-align: center !important; } /* ===================================================== ACTION ICONS ACROSS FULL CARD WIDTH ===================================================== */ html body:has(.account-container) .account-card-actions { position: absolute !important; left: 12px !important; right: 12px !important; top: 82px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; display: block !important; z-index: 8 !important; pointer-events: auto !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } html body:has(.account-container) .account-card-actions .account-card-actions-list { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; align-items: center !important; justify-items: center !important; gap: 8px !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; z-index: 8 !important; pointer-events: auto !important; } html body:has(.account-container) .account-card-actions .account-edit-profile-btn { display: grid !important; place-items: center !important; width: 34px !important; min-width: 34px !important; max-width: 34px !important; height: 34px !important; min-height: 34px !important; max-height: 34px !important; margin: 0 !important; padding: 0 !important; border: 1px solid rgba(45, 206, 235, .24) !important; border-radius: 10px !important; background: rgba(8, 28, 35, .72) !important; color: rgba(233, 250, 255, .92) !important; text-decoration: none !important; z-index: 9 !important; pointer-events: auto !important; box-sizing: border-box !important; } html body:has(.account-container) .account-card-actions .account-edit-profile-btn i { display: block !important; font-size: 13px !important; line-height: 1 !important; margin: 0 !important; color: inherit !important; pointer-events: none !important; } html body:has(.account-container) .account-card-actions .account-edit-profile-btn span { display: none !important; } html body:has(.account-container) .account-card-actions .account-edit-profile-btn:hover, html body:has(.account-container) .account-card-actions .account-edit-profile-btn:active { background: rgba(20, 188, 220, .14) !important; color: #ffffff !important; } } /* === ACCOUNT MOBILE CARD TUNING V7 END === */ /* === ACCOUNT MOBILE CARD TUNING V8 START === */ @media (max-width: 760px) { /* ===================================================== NAME / EMAIL / PHONE — move closer to avatar ===================================================== */ html body:has(.account-container) .account-bank-card-top, html body:has(.account-container) .account-bank-card-top:has(.account-card-actions) { grid-template-columns: 60px minmax(0, 1fr) !important; column-gap: 2px !important; padding-right: 38px !important; } html body:has(.account-container) .account-profile-summary { padding-top: 0 !important; margin-left: -1px !important; } html body:has(.account-container) .account-bank-card .account-profile-title-row { margin: 0 0 4px 2px !important; width: calc(100% - 2px) !important; gap: 4px !important; justify-content: flex-start !important; } html body:has(.account-container) .account-bank-card .account-profile-title-row h2 { font-size: 12.5px !important; line-height: 1.04 !important; } html body:has(.account-container) .account-bank-card .account-profile-verified { width: 18px !important; min-width: 18px !important; max-width: 18px !important; height: 18px !important; min-height: 18px !important; max-height: 18px !important; margin-left: 1px !important; } html body:has(.account-container) .account-bank-card .account-profile-details { margin-left: 2px !important; width: calc(100% - 2px) !important; gap: 3px !important; font-size: 9.2px !important; line-height: 1.08 !important; } html body:has(.account-container) .account-bank-card .account-profile-details span { display: grid !important; grid-template-columns: 11px minmax(0, 1fr) !important; column-gap: 1px !important; align-items: center !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; font-size: 9.2px !important; line-height: 1.08 !important; } html body:has(.account-container) .account-bank-card .account-profile-details i { width: 11px !important; min-width: 11px !important; font-size: 9px !important; line-height: 1 !important; margin: 0 !important; text-align: center !important; } /* ===================================================== LOWER ACTION ICONS — no frames, full width, 6 items ===================================================== */ html body:has(.account-container) .account-card-actions { position: absolute !important; left: 10px !important; right: 10px !important; top: 82px !important; width: auto !important; margin: 0 !important; padding: 0 !important; z-index: 8 !important; pointer-events: auto !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } html body:has(.account-container) .account-card-actions .account-card-actions-list { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; align-items: center !important; justify-items: center !important; gap: 4px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; pointer-events: auto !important; } html body:has(.account-container) .account-card-actions .account-edit-profile-btn { display: grid !important; place-items: center !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 28px !important; min-height: 28px !important; max-height: 28px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: rgba(233, 250, 255, .95) !important; text-decoration: none !important; box-shadow: none !important; outline: none !important; z-index: 9 !important; pointer-events: auto !important; } html body:has(.account-container) .account-card-actions .account-edit-profile-btn i { display: block !important; font-size: 17px !important; line-height: 1 !important; margin: 0 !important; color: inherit !important; pointer-events: none !important; } html body:has(.account-container) .account-card-actions .account-edit-profile-btn span { display: none !important; } html body:has(.account-container) .account-card-actions .account-edit-profile-btn:hover, html body:has(.account-container) .account-card-actions .account-edit-profile-btn:active { background: transparent !important; color: #ffffff !important; transform: none !important; box-shadow: none !important; } } /* === ACCOUNT MOBILE CARD TUNING V8 END === */ /* === ACCOUNT MOBILE CARD TUNING V9 START === */ @media (max-width: 760px) { /* ===================================================== TOP BLOCK ===================================================== */ /* Общий блок: имя ближе к аватару */ html body:has(.account-container) .account-bank-card-top, html body:has(.account-container) .account-bank-card-top:has(.account-card-actions) { grid-template-columns: 60px minmax(0, 1fr) !important; column-gap: 1px !important; padding-right: 38px !important; } html body:has(.account-container) .account-profile-summary { margin-left: -2px !important; padding-top: 0 !important; } /* Имя + фамилия ближе к аватару */ html body:has(.account-container) .account-bank-card .account-profile-title-row { margin: 0 0 4px 0 !important; width: 100% !important; gap: 2px !important; justify-content: flex-start !important; align-items: center !important; } html body:has(.account-container) .account-bank-card .account-profile-title-row h2 { font-size: 12.5px !important; line-height: 1.04 !important; margin: 0 !important; } /* Галочка почти вплотную к имени */ html body:has(.account-container) .account-bank-card .account-profile-verified { width: 18px !important; min-width: 18px !important; max-width: 18px !important; height: 18px !important; min-height: 18px !important; max-height: 18px !important; margin-left: 0 !important; } html body:has(.account-container) .account-bank-card .account-profile-verified i { font-size: 8px !important; } /* ===================================================== EMAIL / PHONE Иконки чуть правее от аватара, текст почти вплотную ===================================================== */ html body:has(.account-container) .account-bank-card .account-profile-details { margin-left: 4px !important; width: calc(100% - 4px) !important; gap: 2px !important; font-size: 9.1px !important; line-height: 1.06 !important; } html body:has(.account-container) .account-bank-card .account-profile-details span { display: grid !important; grid-template-columns: 12px minmax(0, 1fr) !important; column-gap: 1px !important; align-items: center !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; font-size: 9.1px !important; line-height: 1.06 !important; } html body:has(.account-container) .account-bank-card .account-profile-details i { width: 12px !important; min-width: 12px !important; font-size: 9px !important; line-height: 1 !important; margin: 0 !important; text-align: center !important; } /* ===================================================== LOWER ACTION ICONS Меньше, серее, равномерно по всей ширине ===================================================== */ html body:has(.account-container) .account-card-actions { position: absolute !important; top: 102px !important; left: 10px !important; right: 10px !important; bottom: auto !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; justify-self: stretch !important; align-self: auto !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } html body:has(.account-container) .account-card-actions .account-card-actions-list { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; align-items: center !important; justify-items: center !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 4px !important; gap: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } html body:has(.account-container) .account-card-actions .account-edit-profile-btn { display: grid !important; place-items: center !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 24px !important; min-height: 24px !important; max-height: 24px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: rgba(214, 223, 228, 0.76) !important; text-decoration: none !important; } html body:has(.account-container) .account-card-actions .account-edit-profile-btn i { display: block !important; margin: 0 !important; font-size: 15px !important; line-height: 1 !important; color: inherit !important; } html body:has(.account-container) .account-card-actions .account-edit-profile-btn span { display: none !important; } html body:has(.account-container) .account-card-actions .account-edit-profile-btn:hover, html body:has(.account-container) .account-card-actions .account-edit-profile-btn:active { color: rgba(245, 250, 252, 0.96) !important; background: transparent !important; box-shadow: none !important; transform: none !important; } } /* === ACCOUNT MOBILE CARD TUNING V9 END === */ /* === ACCOUNT MOBILE CARD SPACING V7 START === */ @media (max-width: 760px) { /* ------------------------------------------------- NAME ROW — чуть ближе к аватару ------------------------------------------------- */ html body:has(.account-container) .account-bank-card .account-profile-title-row { margin: 0 0 4px 8px !important; width: calc(100% - 8px) !important; gap: 2px !important; } html body:has(.account-container) .account-bank-card .account-profile-title-row h2 { font-size: 12.5px !important; } html body:has(.account-container) .account-bank-card .account-profile-verified { margin-left: 0 !important; } /* ------------------------------------------------- EMAIL + PHONE Иконки немного не вплотную к аватару, а текст почти вплотную к иконкам. ------------------------------------------------- */ html body:has(.account-container) .account-bank-card .account-profile-details { margin-left: 8px !important; gap: 2px !important; font-size: 9px !important; line-height: 1.04 !important; } html body:has(.account-container) .account-bank-card .account-profile-details span { display: grid !important; grid-template-columns: 12px minmax(0, 1fr) !important; column-gap: 1px !important; align-items: center !important; width: 100% !important; min-width: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; font-size: 9px !important; line-height: 1.04 !important; } html body:has(.account-container) .account-bank-card .account-profile-details i { width: 12px !important; min-width: 12px !important; font-size: 8px !important; margin: 0 !important; text-align: center !important; } /* ------------------------------------------------- LOWER ICONS ROW Растянуть по всей ширине карточки и сделать одинаковое расстояние. ------------------------------------------------- */ html body:has(.account-container) .account-card-actions { position: absolute !important; left: 18px !important; right: 18px !important; top: auto !important; bottom: 58px !important; width: auto !important; height: 24px !important; margin: 0 !important; padding: 0 !important; display: block !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } html body:has(.account-container) .account-card-actions .account-card-actions-list { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; gap: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } html body:has(.account-container) .account-card-actions .account-edit-profile-btn { display: grid !important; place-items: center !important; flex: 0 0 22px !important; width: 22px !important; min-width: 22px !important; max-width: 22px !important; height: 22px !important; min-height: 22px !important; max-height: 22px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; color: rgba(214, 224, 229, .78) !important; } html body:has(.account-container) .account-card-actions .account-edit-profile-btn i { display: block !important; font-size: 18px !important; line-height: 1 !important; margin: 0 !important; color: inherit !important; } html body:has(.account-container) .account-card-actions .account-edit-profile-btn span { display: none !important; } } /* === ACCOUNT MOBILE CARD SPACING V7 END === */ /* === ACCOUNT MOBILE CARD FINAL ALIGN V10 START === */ @media (max-width: 760px) { /* ===================================================== NAME — closer to avatar VERIFIED — immediately after surname ===================================================== */ html body:has(.account-container) .account-bank-card .account-profile-title-row { display: flex !important; align-items: center !important; justify-content: flex-start !important; flex-wrap: nowrap !important; width: calc(100% + 5px) !important; margin: 0 0 4px 0 !important; padding: 0 !important; gap: 1px !important; transform: translateX(-5px) !important; } html body:has(.account-container) .account-bank-card .account-profile-title-row h2 { flex: 0 1 auto !important; width: auto !important; min-width: 0 !important; max-width: calc(100% - 20px) !important; margin: 0 !important; padding: 0 !important; font-size: 12.5px !important; line-height: 1.04 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } html body:has(.account-container) .account-bank-card .account-profile-verified { flex: 0 0 18px !important; width: 18px !important; min-width: 18px !important; max-width: 18px !important; height: 18px !important; min-height: 18px !important; max-height: 18px !important; margin: 0 0 0 1px !important; } /* ===================================================== EMAIL + PHONE Icons slightly away from avatar. Text almost touches icons. ===================================================== */ html body:has(.account-container) .account-bank-card .account-profile-details { display: flex !important; flex-direction: column !important; width: calc(100% - 7px) !important; margin: 0 0 0 7px !important; padding: 0 !important; gap: 3px !important; text-align: left !important; } html body:has(.account-container) .account-bank-card .account-profile-details span { display: flex !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; gap: 2px !important; font-size: 9.1px !important; line-height: 1.05 !important; text-align: left !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } html body:has(.account-container) .account-bank-card .account-profile-details i { flex: 0 0 11px !important; width: 11px !important; min-width: 11px !important; max-width: 11px !important; margin: 0 !important; padding: 0 !important; font-size: 9px !important; line-height: 1 !important; text-align: center !important; } /* ===================================================== SIX ACTION ICONS Visible again. Equal spacing from left edge to right edge. ===================================================== */ html body:has(.account-container) .account-card-actions { position: absolute !important; left: 20px !important; right: 20px !important; top: auto !important; bottom: 58px !important; width: auto !important; height: 26px !important; margin: 0 !important; padding: 0 !important; display: block !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; background: transparent !important; border: 0 !important; box-shadow: none !important; z-index: 12 !important; } html body:has(.account-container) .account-card-actions .account-card-actions-list { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; height: 26px !important; margin: 0 !important; padding: 0 !important; gap: 0 !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } html body:has(.account-container) .account-card-actions .account-edit-profile-btn { display: grid !important; place-items: center !important; flex: 0 0 24px !important; width: 24px !important; min-width: 24px !important; max-width: 24px !important; height: 24px !important; min-height: 24px !important; max-height: 24px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: rgba(190, 201, 207, .78) !important; box-shadow: none !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; z-index: 13 !important; } html body:has(.account-container) .account-card-actions .account-edit-profile-btn i { display: block !important; margin: 0 !important; font-size: 15px !important; line-height: 1 !important; color: inherit !important; pointer-events: none !important; } html body:has(.account-container) .account-card-actions .account-edit-profile-btn span { display: none !important; } html body:has(.account-container) .account-card-actions .account-edit-profile-btn:active { color: #ffffff !important; background: transparent !important; } } /* === ACCOUNT MOBILE CARD FINAL ALIGN V10 END === */ /* === ACCOUNT STATIC MOBILE ICON ROW V11 START === */ /* Desktop: hidden */ .account-mobile-card-icons { display: none; } @media (max-width: 760px) { /* * Старый JS-generated action row на мобильном больше * вообще не используем. */ html body:has(.account-container) .account-card-actions, html body:has(.account-container) .account-card-actions-list { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* ----------------------------------------------------- EMAIL + PHONE — text close to icon ----------------------------------------------------- */ html body:has(.account-container) .account-bank-card .account-profile-details { display: flex !important; flex-direction: column !important; margin-left: 7px !important; width: calc(100% - 7px) !important; gap: 3px !important; } html body:has(.account-container) .account-bank-card .account-profile-details span { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 1px !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; font-size: 9.1px !important; line-height: 1.05 !important; text-align: left !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } html body:has(.account-container) .account-bank-card .account-profile-details i { flex: 0 0 11px !important; width: 11px !important; min-width: 11px !important; margin: 0 !important; padding: 0 !important; font-size: 9px !important; text-align: center !important; } /* ----------------------------------------------------- STATIC ICON ROW ----------------------------------------------------- */ html body:has(.account-container) .account-mobile-card-icons { position: absolute !important; left: 22px !important; right: 22px !important; top: auto !important; bottom: 58px !important; z-index: 30 !important; display: flex !important; align-items: center !important; justify-content: space-between !important; width: auto !important; height: 26px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } html body:has(.account-container) .account-mobile-card-icon { display: grid !important; place-items: center !important; flex: 0 0 24px !important; width: 24px !important; min-width: 24px !important; max-width: 24px !important; height: 24px !important; min-height: 24px !important; max-height: 24px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: rgba(192, 203, 208, .82) !important; box-shadow: none !important; text-decoration: none !important; cursor: pointer !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; -webkit-tap-highlight-color: transparent !important; } html body:has(.account-container) .account-mobile-card-icon i { display: block !important; margin: 0 !important; font-size: 15px !important; line-height: 1 !important; color: inherit !important; pointer-events: none !important; } html body:has(.account-container) .account-mobile-card-icon:active { color: #ffffff !important; transform: scale(.94) !important; } } /* === ACCOUNT STATIC MOBILE ICON ROW V11 END === */ /* === ACCOUNT MOBILE CARD POSITION V12 START === */ @media (max-width: 760px) { /* ------------------------------------------------- EMAIL + PHONE — slightly lower ------------------------------------------------- */ html body:has(.account-container) .account-bank-card .account-profile-details { margin-top: 3px !important; /* чуть больше расстояние между email и phone */ gap: 5px !important; } html body:has(.account-container) .account-bank-card .account-profile-details span { /* текст почти вплотную к значку */ gap: 1px !important; } /* ------------------------------------------------- STATIC LOWER ICONS — move slightly down ------------------------------------------------- */ html body:has(.account-container) .account-mobile-card-icons { bottom: 48px !important; } } /* === ACCOUNT MOBILE CARD POSITION V12 END === */ /* === ACCOUNT MOBILE ICON/BALANCE LAYER FIX START === */ @media (max-width: 760px) { html body:has(.account-container) .account-bank-card-front { position: relative !important; } /* Нижний ряд иконок */ html body:has(.account-container) .account-card-actions { position: absolute !important; left: 18px !important; right: 18px !important; bottom: 56px !important; width: auto !important; height: 26px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; z-index: 2 !important; /* чтобы невидимая планка не перекрывала баланс */ pointer-events: none !important; } html body:has(.account-container) .account-card-actions .account-card-actions-list { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; align-items: center !important; justify-items: center !important; width: 100% !important; height: 26px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; pointer-events: none !important; } /* Кликабельны только сами кнопки/иконки */ html body:has(.account-container) .account-card-actions .account-edit-profile-btn { pointer-events: auto !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* Баланс и рамка подключения — верхний слой */ html body:has(.account-container) .account-bank-card .account-profile-balance { position: relative !important; z-index: 7 !important; } html body:has(.account-container) .account-bank-card .account-profile-balance.connected, html body:has(.account-container) .account-bank-card .account-profile-balance.loading { position: relative !important; z-index: 8 !important; } /* На всякий случай убираем любые псевдо-слои у ряда иконок */ html body:has(.account-container) .account-card-actions::before, html body:has(.account-container) .account-card-actions::after, html body:has(.account-container) .account-card-actions .account-card-actions-list::before, html body:has(.account-container) .account-card-actions .account-card-actions-list::after { content: none !important; display: none !important; } } /* === ACCOUNT MOBILE ICON/BALANCE LAYER FIX END === */ /* === ACCOUNT MOBILE CONNECTION LAYERS V14 START === */ @media (max-width: 760px) { /* ===================================================== REAL STATIC ICON ROW ===================================================== */ html body:has(.account-container) .account-mobile-card-icons { z-index: 4 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; pointer-events: none !important; } html body:has(.account-container) .account-mobile-card-icon { position: relative !important; z-index: 5 !important; pointer-events: auto !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* ===================================================== BALANCE / WALLET FRAME Always above the invisible icon container ===================================================== */ html body:has(.account-container) .account-bank-card .account-profile-balance { position: relative !important; z-index: 20 !important; } html body:has(.account-container) .account-bank-card .account-profile-balance.connected { z-index: 22 !important; } html body:has(.account-container) .account-bank-card .account-profile-balance.loading { z-index: 24 !important; } /* ===================================================== CONNECTING / CONNECTED STATUS Must be the highest content layer ===================================================== */ html body:has(.account-container) .account-bank-card-loading { position: absolute !important; z-index: 40 !important; pointer-events: none !important; } html body:has(.account-container) .account-bank-card.loading .account-bank-card-loading { z-index: 45 !important; } /* * Пока идёт подключение, ряд иконок не должен * проходить поверх зелёного индикатора. */ html body:has(.account-container) .account-bank-card.loading .account-mobile-card-icons { z-index: 2 !important; opacity: .18 !important; pointer-events: none !important; } /* ===================================================== ANIMATED GREEN CARD BORDER ===================================================== */ html body:has(.account-container) .account-bank-card::after { z-index: 50 !important; pointer-events: none !important; } html body:has(.account-container) .account-bank-card.loading::after { z-index: 55 !important; pointer-events: none !important; } /* ===================================================== REMOVE ANY INVISIBLE VISUAL PANEL FROM ICON ROW ===================================================== */ html body:has(.account-container) .account-mobile-card-icons::before, html body:has(.account-container) .account-mobile-card-icons::after { content: none !important; display: none !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } } /* === ACCOUNT MOBILE CONNECTION LAYERS V14 END === */ /* === ACCOUNT MOBILE NAME POSITION V15 START === */ @media (max-width: 760px) { html body:has(.account-container) .account-bank-card .account-profile-title-row { transform: translateX(6px) !important; } } /* === ACCOUNT MOBILE NAME POSITION V15 END === */ /* === ACCOUNT MOBILE COMPACT CONTENT V16 START === */ @media (max-width: 760px) { /* ===================================================== MAIN TAB CONTENT ===================================================== */ html body:has(.account-container) .account-dashboard-main .tab-content { margin-top: 8px !important; padding: 0 8px 16px !important; box-sizing: border-box !important; } /* ===================================================== LARGE SECTION / CARD HEADERS Personal Info and similar blocks ===================================================== */ html body:has(.account-container) .account-dashboard-main .tab-content > section, html body:has(.account-container) .account-dashboard-main .tab-content > .settings-card, html body:has(.account-container) .account-dashboard-main .tab-content > .info-card { margin-top: 8px !important; } /* Заголовки типа Personal Info */ html body:has(.account-container) .account-dashboard-main .tab-content h1, html body:has(.account-container) .account-dashboard-main .tab-content h2 { margin-top: 0 !important; margin-bottom: 8px !important; font-size: 24px !important; line-height: 1.08 !important; font-weight: 700 !important; } /* Подзаголовки */ html body:has(.account-container) .account-dashboard-main .tab-content h3 { margin-top: 8px !important; margin-bottom: 6px !important; font-size: 17px !important; line-height: 1.15 !important; } /* Описания типа Manage your personal information */ html body:has(.account-container) .account-dashboard-main .tab-content p { margin-top: 3px !important; margin-bottom: 8px !important; font-size: 13px !important; line-height: 1.25 !important; } /* ===================================================== GENERIC CARDS / BLOCKS ===================================================== */ html body:has(.account-container) .account-dashboard-main .tab-content section, html body:has(.account-container) .account-dashboard-main .tab-content .card, html body:has(.account-container) .account-dashboard-main .tab-content .settings-card, html body:has(.account-container) .account-dashboard-main .tab-content .info-card { min-height: 0 !important; padding-top: 14px !important; padding-bottom: 14px !important; border-radius: 16px !important; } /* ===================================================== LABELS / TEXT ===================================================== */ html body:has(.account-container) .account-dashboard-main .tab-content label { font-size: 12px !important; line-height: 1.15 !important; } html body:has(.account-container) .account-dashboard-main .tab-content small { font-size: 10px !important; line-height: 1.15 !important; } /* ===================================================== INPUTS / SELECTS / TEXTAREAS ===================================================== */ html body:has(.account-container) .account-dashboard-main .tab-content input, html body:has(.account-container) .account-dashboard-main .tab-content select { min-height: 38px !important; height: 38px !important; padding: 7px 10px !important; font-size: 12px !important; border-radius: 10px !important; box-sizing: border-box !important; } html body:has(.account-container) .account-dashboard-main .tab-content textarea { min-height: 76px !important; padding: 8px 10px !important; font-size: 12px !important; line-height: 1.25 !important; border-radius: 10px !important; } /* ===================================================== BUTTONS ===================================================== */ html body:has(.account-container) .account-dashboard-main .tab-content button, html body:has(.account-container) .account-dashboard-main .tab-content .action-btn { min-height: 36px !important; padding: 7px 11px !important; font-size: 11px !important; line-height: 1 !important; border-radius: 9px !important; } /* ===================================================== SPACE BETWEEN FORM ROWS ===================================================== */ html body:has(.account-container) .account-dashboard-main .tab-content form { gap: 10px !important; } } /* === ACCOUNT MOBILE COMPACT CONTENT V16 END === */ /* === ACCOUNT MOBILE COMPACT CONTENT V16 START === */ @media (max-width: 760px) { /* ===================================================== MAIN TAB CONTENT ===================================================== */ html body:has(.account-container) .account-dashboard-main .tab-content { margin-top: 8px !important; padding: 0 8px 16px !important; box-sizing: border-box !important; } /* ===================================================== LARGE SECTION / CARD HEADERS Personal Info and similar blocks ===================================================== */ html body:has(.account-container) .account-dashboard-main .tab-content > section, html body:has(.account-container) .account-dashboard-main .tab-content > .settings-card, html body:has(.account-container) .account-dashboard-main .tab-content > .info-card { margin-top: 8px !important; } /* Заголовки типа Personal Info */ html body:has(.account-container) .account-dashboard-main .tab-content h1, html body:has(.account-container) .account-dashboard-main .tab-content h2 { margin-top: 0 !important; margin-bottom: 8px !important; font-size: 24px !important; line-height: 1.08 !important; font-weight: 700 !important; } /* Подзаголовки */ html body:has(.account-container) .account-dashboard-main .tab-content h3 { margin-top: 8px !important; margin-bottom: 6px !important; font-size: 17px !important; line-height: 1.15 !important; } /* Описания типа Manage your personal information */ html body:has(.account-container) .account-dashboard-main .tab-content p { margin-top: 3px !important; margin-bottom: 8px !important; font-size: 13px !important; line-height: 1.25 !important; } /* ===================================================== GENERIC CARDS / BLOCKS ===================================================== */ html body:has(.account-container) .account-dashboard-main .tab-content section, html body:has(.account-container) .account-dashboard-main .tab-content .card, html body:has(.account-container) .account-dashboard-main .tab-content .settings-card, html body:has(.account-container) .account-dashboard-main .tab-content .info-card { min-height: 0 !important; padding-top: 14px !important; padding-bottom: 14px !important; border-radius: 16px !important; } /* ===================================================== LABELS / TEXT ===================================================== */ html body:has(.account-container) .account-dashboard-main .tab-content label { font-size: 12px !important; line-height: 1.15 !important; } html body:has(.account-container) .account-dashboard-main .tab-content small { font-size: 10px !important; line-height: 1.15 !important; } /* ===================================================== INPUTS / SELECTS / TEXTAREAS ===================================================== */ html body:has(.account-container) .account-dashboard-main .tab-content input, html body:has(.account-container) .account-dashboard-main .tab-content select { min-height: 38px !important; height: 38px !important; padding: 7px 10px !important; font-size: 12px !important; border-radius: 10px !important; box-sizing: border-box !important; } html body:has(.account-container) .account-dashboard-main .tab-content textarea { min-height: 76px !important; padding: 8px 10px !important; font-size: 12px !important; line-height: 1.25 !important; border-radius: 10px !important; } /* ===================================================== BUTTONS ===================================================== */ html body:has(.account-container) .account-dashboard-main .tab-content button, html body:has(.account-container) .account-dashboard-main .tab-content .action-btn { min-height: 36px !important; padding: 7px 11px !important; font-size: 11px !important; line-height: 1 !important; border-radius: 9px !important; } /* ===================================================== SPACE BETWEEN FORM ROWS ===================================================== */ html body:has(.account-container) .account-dashboard-main .tab-content form { gap: 10px !important; } } /* === ACCOUNT MOBILE COMPACT CONTENT V16 END === */ /* === ACCOUNT MOBILE PERSONAL INFO COMPACT V17 START === */ @media (max-width: 760px) { /* ===================================================== УБИРАЕМ ПУСТОЕ ПРОСТРАНСТВО ПОД БАНКОВСКОЙ КАРТОЙ ===================================================== */ html body:has(.account-container) .account-profile-overview { margin-bottom: 2px !important; } html body:has(.account-container) .account-dashboard-main .tab-content { margin-top: 0 !important; padding-top: 0 !important; } /* ===================================================== FIRST CONTENT BLOCK — PERSONAL INFO ===================================================== */ html body:has(.account-container) .account-dashboard-main .tab-content:first-of-type { margin-top: 0 !important; padding-top: 0 !important; } /* Первая карточка/секция сразу после банковской карты */ html body:has(.account-container) .account-dashboard-main .tab-content:first-of-type > section:first-child, html body:has(.account-container) .account-dashboard-main .tab-content:first-of-type > div:first-child { margin-top: 0 !important; margin-bottom: 4px !important; padding-top: 7px !important; padding-bottom: 7px !important; min-height: 0 !important; height: auto !important; border-radius: 12px !important; } /* ===================================================== PERSONAL INFO TITLE ===================================================== */ html body:has(.account-container) .account-dashboard-main .tab-content:first-of-type h1, html body:has(.account-container) .account-dashboard-main .tab-content:first-of-type h2 { margin: 0 !important; padding: 0 !important; font-size: 16px !important; line-height: 1.05 !important; font-weight: 700 !important; } /* ===================================================== PERSONAL INFO DESCRIPTION ===================================================== */ html body:has(.account-container) .account-dashboard-main .tab-content:first-of-type p { margin: 3px 0 0 !important; padding: 0 !important; font-size: 9px !important; line-height: 1.1 !important; } /* ===================================================== ВНУТРЕННИЕ ОБЁРТКИ — УБИРАЕМ ЛИШНЮЮ ВЫСОТУ ===================================================== */ html body:has(.account-container) .account-dashboard-main .tab-content:first-of-type section, html body:has(.account-container) .account-dashboard-main .tab-content:first-of-type .card, html body:has(.account-container) .account-dashboard-main .tab-content:first-of-type .settings-card, html body:has(.account-container) .account-dashboard-main .tab-content:first-of-type .info-card { min-height: 0 !important; margin-top: 0 !important; margin-bottom: 4px !important; padding-top: 7px !important; padding-bottom: 7px !important; } /* ===================================================== ЕСЛИ У PERSONAL INFO ЕСТЬ ОТДЕЛЬНАЯ HERO/HEADER ЗОНА ===================================================== */ html body:has(.account-container) .account-dashboard-main .tab-content:first-of-type [class*="header"], html body:has(.account-container) .account-dashboard-main .tab-content:first-of-type [class*="hero"] { min-height: 0 !important; height: auto !important; margin: 0 !important; padding: 6px 8px !important; } /* ===================================================== ТЕКСТ НИЖЕ — ТОЖЕ КОМПАКТНЕЕ ===================================================== */ html body:has(.account-container) .account-dashboard-main .tab-content:first-of-type label { font-size: 9px !important; line-height: 1.05 !important; } html body:has(.account-container) .account-dashboard-main .tab-content:first-of-type small { font-size: 8px !important; line-height: 1.05 !important; } /* ===================================================== FORM FIELDS ===================================================== */ html body:has(.account-container) .account-dashboard-main .tab-content:first-of-type input, html body:has(.account-container) .account-dashboard-main .tab-content:first-of-type select { height: 32px !important; min-height: 32px !important; padding: 5px 8px !important; font-size: 10px !important; border-radius: 8px !important; } html body:has(.account-container) .account-dashboard-main .tab-content:first-of-type textarea { min-height: 58px !important; padding: 6px 8px !important; font-size: 10px !important; line-height: 1.15 !important; border-radius: 8px !important; } } /* === ACCOUNT MOBILE PERSONAL INFO COMPACT V17 END === */ /* === ACCOUNT MOBILE PERSONAL INFO EXACT V18 START === */ @media (max-width: 760px) { /* Убираем пространство после банковской карточки */ html body:has(.account-container) .account-profile-overview { margin-bottom: 0 !important; padding-bottom: 0 !important; } /* ===================================================== WHOLE PERSONAL INFO TAB ===================================================== */ html body:has(.account-container) #personal-info.tab-content, html body:has(.account-container) #personal-info.tab-content.active { width: 100% !important; min-height: 0 !important; height: auto !important; margin: -8px 0 0 !important; padding: 0 4px 8px !important; box-sizing: border-box !important; } /* Главная рамка Personal Info */ html body:has(.account-container) #personal-info .personal-info-container { width: 100% !important; min-height: 0 !important; height: auto !important; margin: 0 !important; padding: 0 !important; border-radius: 12px !important; overflow: hidden !important; } /* ===================================================== HEADER — Personal Info ===================================================== */ html body:has(.account-container) #personal-info .tab-section-header { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 34px !important; min-height: 34px !important; max-height: 34px !important; margin: 0 !important; padding: 0 8px !important; box-sizing: border-box !important; border-radius: 12px 12px 0 0 !important; } html body:has(.account-container) #personal-info .tab-section-header h2 { margin: 0 !important; padding: 0 !important; font-size: 16px !important; line-height: 1 !important; font-weight: 700 !important; text-align: center !important; } /* ===================================================== BODY ===================================================== */ html body:has(.account-container) #personal-info .tab-section-body { min-height: 0 !important; height: auto !important; margin: 0 !important; padding: 5px 7px 7px !important; } /* Manage your personal information */ html body:has(.account-container) #personal-info .personal-info-description { margin: 0 0 5px !important; padding: 0 !important; font-size: 9px !important; line-height: 1.08 !important; text-align: center !important; } /* ===================================================== INFO BOX ===================================================== */ html body:has(.account-container) #personal-info .personal-info-box { min-height: 0 !important; height: auto !important; margin: 0 !important; padding: 4px 5px !important; border-radius: 9px !important; } html body:has(.account-container) #personal-info .user-info-table { display: grid !important; gap: 2px !important; margin: 0 !important; padding: 0 !important; } /* Каждая строка информации */ html body:has(.account-container) #personal-info .row-info { display: grid !important; grid-template-columns: 22px 68px minmax(0, 1fr) !important; align-items: center !important; column-gap: 4px !important; min-height: 26px !important; height: 26px !important; margin: 0 !important; padding: 2px 4px !important; box-sizing: border-box !important; } /* Круглая иконка */ html body:has(.account-container) #personal-info .icon-circle { display: grid !important; place-items: center !important; width: 21px !important; min-width: 21px !important; height: 21px !important; min-height: 21px !important; margin: 0 !important; padding: 0 !important; } html body:has(.account-container) #personal-info .info-icon { font-size: 9px !important; line-height: 1 !important; } /* First Name / Last Name / Email... */ html body:has(.account-container) #personal-info .info-label { margin: 0 !important; padding: 0 !important; font-size: 9px !important; line-height: 1.05 !important; font-weight: 600 !important; white-space: nowrap !important; } /* Значение */ html body:has(.account-container) #personal-info .info-value { min-width: 0 !important; margin: 0 !important; padding: 0 !important; font-size: 9px !important; line-height: 1.05 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* ===================================================== ACCOUNT SETTINGS BUTTON ===================================================== */ html body:has(.account-container) #personal-info .logout-container { margin: 5px 0 0 !important; padding: 0 !important; } html body:has(.account-container) #personal-info .settings-btn { min-height: 28px !important; height: 28px !important; margin: 0 !important; padding: 4px 8px !important; font-size: 9px !important; line-height: 1 !important; border-radius: 8px !important; } html body:has(.account-container) #personal-info .settings-btn i { font-size: 9px !important; } } /* === ACCOUNT MOBILE PERSONAL INFO EXACT V18 END === */ /* === ACCOUNT MOBILE PERSONAL INFO TUNING V19 START === */ @media (max-width: 760px) { /* ===================================================== PERSONAL INFO HEADER Размер оставляем, закругляем все 4 угла ===================================================== */ html body:has(.account-container) #personal-info .tab-section-header { height: 34px !important; min-height: 34px !important; max-height: 34px !important; margin: 0 0 5px !important; padding: 0 8px !important; border-radius: 12px !important; overflow: hidden !important; } html body:has(.account-container) #personal-info .tab-section-header h2 { font-size: 16px !important; line-height: 1 !important; } /* ===================================================== BODY — немного крупнее ===================================================== */ html body:has(.account-container) #personal-info .tab-section-body { padding: 7px 8px 9px !important; } /* Manage your personal information */ html body:has(.account-container) #personal-info .personal-info-description { margin: 0 0 7px !important; font-size: 10.5px !important; line-height: 1.15 !important; } /* ===================================================== INFORMATION BOX ===================================================== */ html body:has(.account-container) #personal-info .personal-info-box { padding: 6px 7px !important; border-radius: 10px !important; } html body:has(.account-container) #personal-info .user-info-table { gap: 3px !important; } /* ===================================================== ROWS ===================================================== */ html body:has(.account-container) #personal-info .row-info { grid-template-columns: 25px 76px minmax(0, 1fr) !important; column-gap: 5px !important; height: 30px !important; min-height: 30px !important; padding: 3px 5px !important; } /* Иконка */ html body:has(.account-container) #personal-info .icon-circle { width: 24px !important; min-width: 24px !important; height: 24px !important; min-height: 24px !important; } html body:has(.account-container) #personal-info .info-icon { font-size: 10.5px !important; } /* First Name / Last Name / Email... */ html body:has(.account-container) #personal-info .info-label { font-size: 10.5px !important; line-height: 1.08 !important; } /* Значение */ html body:has(.account-container) #personal-info .info-value { font-size: 10.5px !important; line-height: 1.08 !important; } /* ===================================================== ACCOUNT SETTINGS ===================================================== */ html body:has(.account-container) #personal-info .logout-container { margin-top: 7px !important; } html body:has(.account-container) #personal-info .settings-btn { height: 31px !important; min-height: 31px !important; padding: 5px 10px !important; font-size: 10px !important; border-radius: 8px !important; } html body:has(.account-container) #personal-info .settings-btn i { font-size: 10px !important; } } /* === ACCOUNT MOBILE PERSONAL INFO TUNING V19 END === */ /* === ACCOUNT MOBILE PERSONAL INFO V20 START === */ @media (max-width: 760px) { /* ===================================================== ШАПКУ PERSONAL INFO НЕ УВЕЛИЧИВАЕМ ===================================================== */ html body:has(.account-container) #personal-info .tab-section-header { height: 34px !important; min-height: 34px !important; max-height: 34px !important; border-radius: 12px !important; } /* ===================================================== СОДЕРЖИМОЕ ЧУТЬ КРУПНЕЕ ===================================================== */ html body:has(.account-container) #personal-info .personal-info-description { font-size: 11px !important; line-height: 1.15 !important; margin-bottom: 8px !important; } html body:has(.account-container) #personal-info .personal-info-box { padding: 7px 8px !important; } html body:has(.account-container) #personal-info .user-info-table { gap: 4px !important; } html body:has(.account-container) #personal-info .row-info { grid-template-columns: 26px 80px minmax(0, 1fr) !important; column-gap: 5px !important; height: 32px !important; min-height: 32px !important; padding: 3px 5px !important; } html body:has(.account-container) #personal-info .icon-circle { width: 25px !important; min-width: 25px !important; height: 25px !important; min-height: 25px !important; } html body:has(.account-container) #personal-info .info-icon { font-size: 11px !important; } html body:has(.account-container) #personal-info .info-label { min-width: 0 !important; font-size: 11px !important; line-height: 1.08 !important; white-space: nowrap !important; } html body:has(.account-container) #personal-info .info-value { position: relative !important; display: block !important; min-width: 0 !important; width: 100% !important; font-size: 11px !important; line-height: 1.08 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* ===================================================== MARQUEE — ТОЛЬКО ЕСЛИ JS ОБНАРУЖИЛ OVERFLOW ===================================================== */ html body:has(.account-container) #personal-info .info-value.is-marquee { text-overflow: clip !important; } html body:has(.account-container) #personal-info .info-value .account-marquee-text { display: inline-block !important; min-width: max-content !important; white-space: nowrap !important; transform: translateX(0); will-change: transform; } html body:has(.account-container) #personal-info .info-value.is-marquee .account-marquee-text { animation: account-mobile-marquee var(--account-marquee-duration, 7s) ease-in-out 1s infinite alternate !important; } /* ===================================================== ACCOUNT SETTINGS BUTTON ===================================================== */ html body:has(.account-container) #personal-info .logout-container { margin-top: 8px !important; } html body:has(.account-container) #personal-info .settings-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; min-height: 33px !important; height: 33px !important; padding: 5px 11px !important; font-size: 10.5px !important; line-height: 1 !important; white-space: nowrap !important; border-radius: 9px !important; box-sizing: border-box !important; } html body:has(.account-container) #personal-info .settings-btn i { flex: 0 0 auto !important; width: 13px !important; margin: 0 !important; padding: 0 !important; font-size: 11px !important; line-height: 1 !important; text-align: center !important; } html body:has(.account-container) #personal-info .settings-btn span { flex: 0 1 auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; } } @keyframes account-mobile-marquee { 0%, 12% { transform: translateX(0); } 88%, 100% { transform: translateX( calc(-1 * var(--account-marquee-distance, 0px)) ); } } /* === ACCOUNT MOBILE PERSONAL INFO V20 END === */ /* === ACCOUNT MOBILE PERSONAL INFO V23 START === */ @media (max-width: 760px) { /* ===================================================== ACCOUNT SETTINGS ===================================================== */ html body:has(.account-container) #personal-info .logout-container { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; margin: 8px 0 0 !important; padding: 0 !important; } html body:has(.account-container) #personal-info .settings-btn { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 128px !important; width: 128px !important; min-width: 128px !important; max-width: 128px !important; height: 30px !important; min-height: 30px !important; max-height: 30px !important; gap: 6px !important; margin: 0 auto !important; padding: 0 8px !important; font-size: 8px !important; line-height: 1 !important; white-space: nowrap !important; box-sizing: border-box !important; overflow: hidden !important; transform: none !important; } /* Убираем старые декоративные элементы кнопки */ html body:has(.account-container) #personal-info .settings-btn::before, html body:has(.account-container) #personal-info .settings-btn::after { content: none !important; display: none !important; } /* Шестерёнка */ html body:has(.account-container) #personal-info .settings-btn > i { position: static !important; inset: auto !important; display: block !important; flex: 0 0 9px !important; width: 9px !important; min-width: 9px !important; max-width: 9px !important; height: auto !important; margin: 0 !important; padding: 0 !important; font-size: 8px !important; line-height: 1 !important; text-align: center !important; transform: none !important; } /* Текст Account Settings */ html body:has(.account-container) #personal-info .settings-btn > span { position: static !important; inset: auto !important; display: block !important; flex: 0 0 auto !important; width: auto !important; margin: 0 !important; padding: 0 !important; font-size: 8px !important; line-height: 1 !important; white-space: nowrap !important; transform: none !important; } /* ===================================================== EMAIL MARQUEE ===================================================== */ html body:has(.account-container) #personal-info .info-value-email-marquee { position: relative !important; display: block !important; min-width: 0 !important; width: 100% !important; overflow: hidden !important; white-space: nowrap !important; text-overflow: clip !important; } html body:has(.account-container) #personal-info .paxor-email-marquee-track { display: flex !important; align-items: center !important; width: max-content !important; white-space: nowrap !important; transform: translate3d(0, 0, 0); will-change: transform; } html body:has(.account-container) #personal-info .paxor-email-marquee-item { display: inline-block !important; flex: 0 0 auto !important; width: max-content !important; white-space: nowrap !important; } html body:has(.account-container) #personal-info .info-value-email-marquee.is-scrolling .paxor-email-marquee-track { animation: paxor-email-marquee-v23 var(--paxor-email-duration, 10s) linear infinite !important; } } @keyframes paxor-email-marquee-v23 { from { transform: translate3d(0, 0, 0); } to { transform: translate3d( calc(-1 * var(--paxor-email-shift, 0px)), 0, 0 ); } } /* === ACCOUNT MOBILE PERSONAL INFO V23 END === */ /* === ACCOUNT MOBILE PERSONAL INFO SIZE V27 START === */ @media (max-width: 760px) { /* Шапка Personal Info */ html body:has(.account-container) #personal-info .tab-section-header { height: 38px !important; min-height: 38px !important; max-height: 38px !important; border-radius: 12px !important; } html body:has(.account-container) #personal-info .tab-section-header h2 { font-size: 17px !important; line-height: 1 !important; } /* Текст под заголовком */ html body:has(.account-container) #personal-info .personal-info-description { font-size: 11.5px !important; line-height: 1.2 !important; margin-bottom: 8px !important; } /* Внутренняя рамка */ html body:has(.account-container) #personal-info .personal-info-box { padding: 8px 9px !important; border-radius: 11px !important; } /* Расстояние между строками */ html body:has(.account-container) #personal-info .user-info-table { gap: 4px !important; } /* First Name / Last Name / Birthdate / Email / Phone */ html body:has(.account-container) #personal-info .row-info { grid-template-columns: 28px 84px minmax(0, 1fr) !important; column-gap: 6px !important; height: 34px !important; min-height: 34px !important; padding: 4px 6px !important; } /* Круглые значки слева */ html body:has(.account-container) #personal-info .icon-circle { width: 27px !important; min-width: 27px !important; height: 27px !important; min-height: 27px !important; } html body:has(.account-container) #personal-info .info-icon { font-size: 12px !important; } /* Подписи */ html body:has(.account-container) #personal-info .info-label { font-size: 11.5px !important; line-height: 1.1 !important; } /* Значения */ html body:has(.account-container) #personal-info .info-value { font-size: 11.5px !important; line-height: 1.1 !important; } /* Бегущая почта наследует новый размер */ html body:has(.account-container) #personal-info .paxor-email-marquee-item { font-size: 11.5px !important; line-height: 1.1 !important; } } /* === ACCOUNT MOBILE PERSONAL INFO SIZE V27 END === */ /* === ACCOUNT MOBILE DRAWER MENU V28 START === */ @media (max-width: 760px) { /* * Все основные пункты левого мобильного меню. * Иконке даём отдельную колонку, * текст начинается правее и больше не налезает. */ html body:has(.account-container) #account-dashboard-sidebar .tab-button, html body:has(.account-container) #account-dashboard-sidebar .account-sidebar-page-link, html body:has(.account-container) #account-dashboard-sidebar .account-sidebar-logout { display: grid !important; grid-template-columns: 26px minmax(0, 1fr) !important; align-items: center !important; column-gap: 12px !important; padding-left: 14px !important; padding-right: 10px !important; text-align: left !important; } /* * Иконки строго в своей колонке */ html body:has(.account-container) #account-dashboard-sidebar .tab-button > i, html body:has(.account-container) #account-dashboard-sidebar .account-sidebar-page-link > i, html body:has(.account-container) #account-dashboard-sidebar .account-sidebar-logout > i { position: static !important; inset: auto !important; width: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; transform: none !important; text-align: center !important; justify-self: center !important; } /* * Текст — только во второй колонке */ html body:has(.account-container) #account-dashboard-sidebar .tab-button > span, html body:has(.account-container) #account-dashboard-sidebar .account-sidebar-page-link > span, html body:has(.account-container) #account-dashboard-sidebar .account-sidebar-logout > span { position: static !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; transform: none !important; text-align: left !important; justify-self: stretch !important; } } /* === ACCOUNT MOBILE DRAWER MENU V28 END === */ /* === ACCOUNT MOBILE DRAWER ACTIVE V29 START === */ @media (max-width: 760px) { /* ===================================================== УБИРАЕМ КРУЖКИ / ОБВОДКИ ВОКРУГ ИКОНОК ===================================================== */ html body:has(.account-container) #account-dashboard-sidebar .tab-button::before, html body:has(.account-container) #account-dashboard-sidebar .account-sidebar-page-link::before, html body:has(.account-container) #account-dashboard-sidebar .account-sidebar-logout::before { content: none !important; display: none !important; } html body:has(.account-container) #account-dashboard-sidebar .tab-button > i, html body:has(.account-container) #account-dashboard-sidebar .account-sidebar-page-link > i, html body:has(.account-container) #account-dashboard-sidebar .account-sidebar-logout > i { background: transparent !important; border: 0 !important; outline: 0 !important; border-radius: 0 !important; box-shadow: none !important; width: 26px !important; min-width: 26px !important; height: auto !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; font-size: 15px !important; color: rgba(220, 232, 240, .68) !important; } /* ===================================================== ОБЫЧНЫЕ ПУНКТЫ ===================================================== */ html body:has(.account-container) #account-dashboard-sidebar .tab-button { position: relative !important; min-height: 42px !important; border: 1px solid transparent !important; border-radius: 8px !important; background: transparent !important; color: rgba(225, 235, 242, .72) !important; transition: background .18s ease, color .18s ease, border-color .18s ease !important; } /* ===================================================== АКТИВНАЯ ВКЛАДКА выделяем всю строку, а не иконку ===================================================== */ html body:has(.account-container) #account-dashboard-sidebar .tab-button.active { background: rgba(29, 202, 139, .11) !important; border-color: rgba(29, 202, 139, .20) !important; color: #ffffff !important; box-shadow: inset 3px 0 0 #1dca8b !important; } /* Активная иконка */ html body:has(.account-container) #account-dashboard-sidebar .tab-button.active > i { color: #1dca8b !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* Активный текст */ html body:has(.account-container) #account-dashboard-sidebar .tab-button.active > span { color: #ffffff !important; font-weight: 700 !important; } /* Hover / touch */ html body:has(.account-container) #account-dashboard-sidebar .tab-button:not(.active):hover { background: rgba(255, 255, 255, .045) !important; color: rgba(255, 255, 255, .92) !important; } html body:has(.account-container) #account-dashboard-sidebar .tab-button:not(.active):hover > i { color: rgba(255, 255, 255, .90) !important; } } /* === ACCOUNT MOBILE DRAWER ACTIVE V29 END === */ /* === ACCOUNT MOBILE DRAWER ACTIVE BLUE V30 START === */ @media (max-width: 760px) { html body:has(.account-container) #account-dashboard-sidebar .tab-button.active { background: rgba(59, 169, 255, .12) !important; border-color: rgba(59, 169, 255, .24) !important; color: #ffffff !important; box-shadow: inset 3px 0 0 #3ba9ff !important; } html body:has(.account-container) #account-dashboard-sidebar .tab-button.active > i { color: #3ba9ff !important; } html body:has(.account-container) #account-dashboard-sidebar .tab-button.active > span { color: #ffffff !important; font-weight: 700 !important; } } /* === ACCOUNT MOBILE DRAWER ACTIVE BLUE V30 END === */ /* === ACCOUNT MOBILE DRAWER ACTIVE CYAN V31 START === */ @media (max-width: 760px) { html body:has(.account-container) #account-dashboard-sidebar .tab-button.active { background: rgba(32, 217, 255, .12) !important; border-color: rgba(32, 217, 255, .26) !important; color: #ffffff !important; box-shadow: inset 3px 0 0 #20d9ff !important; } html body:has(.account-container) #account-dashboard-sidebar .tab-button.active > i { color: #20d9ff !important; } html body:has(.account-container) #account-dashboard-sidebar .tab-button.active > span { color: #ffffff !important; font-weight: 700 !important; } } /* === ACCOUNT MOBILE DRAWER ACTIVE CYAN V31 END === */ /* === ACCOUNT MOBILE CARD ICONS NO STRIP V32 START === */ @media (max-width: 760px) { /* * Оставляем только сами значки. * Полоса/стекло/рамка полностью прозрачные. */ html body:has(.account-container) .account-bank-card .account-mobile-card-icons { background: transparent !important; background-color: transparent !important; background-image: none !important; border: 0 !important; outline: 0 !important; border-radius: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; filter: none !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* Если полоса рисовалась псевдоэлементом */ html body:has(.account-container) .account-bank-card .account-mobile-card-icons::before, html body:has(.account-container) .account-bank-card .account-mobile-card-icons::after { content: none !important; display: none !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* Сами кнопки-значки оставляем без фона */ html body:has(.account-container) .account-mobile-card-icon { background: transparent !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } } /* === ACCOUNT MOBILE CARD ICONS NO STRIP V32 END === */