/* SAF_LINUX_ORIGINAL_STICKERS_V3 */ /* Убираем дополнительные круги и обводки */ #safConnectPage .saf-linux-step-icon { width: 36px !important; height: 36px !important; min-width: 36px !important; padding: 0 !important; border: none !important; border-radius: 50% !important; background: transparent !important; box-shadow: none !important; opacity: 1 !important; overflow: visible !important; } /* Показываем оригинальные PNG целиком */ #safConnectPage .saf-linux-step-icon .saf-guide-icon-image { display: block !important; width: 36px !important; height: 36px !important; max-width: none !important; object-fit: contain !important; opacity: 1 !important; filter: none !important; transform: none !important; border: none !important; background: transparent !important; box-shadow: none !important; } /* Выравниваем вертикальную линию */ #safConnectPage .saf-linux-step:not(:last-child)::before { left: 17px !important; top: 36px !important; } /* Сохраняем отступы */ #safConnectPage .saf-linux-step { grid-template-columns: 36px minmax(0, 1fr) !important; column-gap: 13px !important; } @media (max-width: 430px) { #safConnectPage .saf-linux-step-icon, #safConnectPage .saf-linux-step-icon .saf-guide-icon-image { width: 34px !important; height: 34px !important; min-width: 34px !important; } } /* SAF_LINUX_BRANDS_MATCH_IOS_V8 */ /* Общий стиль Linux-логотипов */ #safConnectPage .saf-app-button .saf-app-brand.saf-linux-app-brand { display: block !important; margin-left: auto !important; margin-right: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; width: 27px !important; height: 27px !important; min-width: 27px !important; min-height: 27px !important; flex: 0 0 27px !important; object-fit: contain !important; opacity: .45 !important; filter: grayscale(1) brightness(.85) contrast(.9) !important; transform: none !important; pointer-events: none !important; } /* Выбранное приложение */ #safConnectPage .saf-app-button.active .saf-linux-app-brand { opacity: .58 !important; } /* Наведение */ #safConnectPage .saf-app-button:hover .saf-linux-app-brand { opacity: .65 !important; } /* SAF_HEADER_CONTAINER_RESPONSIVE_V1 */ @media (min-width: 760px) { body:not(.guest-mode) .app > .header { box-sizing: border-box !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 6px !important; min-width: 0 !important; } body:not(.guest-mode) .app > .header > .brand { flex: 0 0 auto !important; margin: 0 !important; } body:not(.guest-mode) .app > .header > .header-actions { flex: 0 0 auto !important; margin-left: auto !important; margin-right: 0 !important; gap: 5px !important; } body:not(.guest-mode) #safDesktopNav { display: flex !important; flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 6px !important; gap: 2px !important; justify-content: center !important; transform: none !important; } body:not(.guest-mode) #safDesktopNav .saf-desktop-nav-btn { flex: 0 0 auto !important; padding-left: 7px !important; padding-right: 7px !important; gap: 5px !important; white-space: nowrap !important; } body:not(.guest-mode) .app > .header.saf-nav-tight #safDesktopNav { gap: 0 !important; padding-left: 3px !important; padding-right: 3px !important; } body:not(.guest-mode) .app > .header.saf-nav-tight #safDesktopNav .saf-desktop-nav-btn { padding-left: 4px !important; padding-right: 4px !important; gap: 3px !important; font-size: 11px !important; } body:not(.guest-mode) .app > .header.saf-nav-hidden #safDesktopNav { display: none !important; } } /* На мобильных сохраняем исходную навигацию */ @media (max-width: 759px) { body:not(.guest-mode) #safDesktopNav { display: none !important; } } /* SAF_HEADER_ACTUAL_FIT_V7 */ @media (min-width: 760px) { body:not(.guest-mode) #safDesktopNav { display: flex !important; flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; justify-content: center !important; } body:not(.guest-mode) .app > .header.saf-nav-tight #safDesktopNav { display: flex !important; } body:not(.guest-mode) .app > .header.saf-nav-hidden #safDesktopNav { display: none !important; } } /* SAF_LIGHT_DESKTOP_NAV_CONTRAST_V1 */ /* * Только светлая тема. * Контрастная навигация и заметный плавающий индикатор. */ @media (min-width: 1024px) { html body.light:not(.guest-mode) #safDesktopNav .saf-desktop-nav-btn { color: #46504a !important; -webkit-text-fill-color: #46504a !important; font-weight: 700 !important; background: transparent !important; border-color: transparent !important; } html body.light:not(.guest-mode) #safDesktopNav .saf-desktop-nav-btn svg { color: #46504a !important; stroke: currentColor !important; opacity: 1 !important; } /* * Активная кнопка: * текст и значок немного темнее. */ html body.light:not(.guest-mode) #safDesktopNav .saf-desktop-nav-btn.active { color: #26332b !important; -webkit-text-fill-color: #26332b !important; font-weight: 750 !important; background: transparent !important; border-color: transparent !important; } html body.light:not(.guest-mode) #safDesktopNav .saf-desktop-nav-btn.active svg { color: #26332b !important; stroke: currentColor !important; } /* * Подвижная подложка. * Сохраняем её существующее движение. */ html body.light:not(.guest-mode) #safDesktopNav .saf-nav-slider { background: linear-gradient( 145deg, #dfe6e1 0%, #e9eeea 52%, #d8e1da 100% ) !important; border: 1px solid #aabbb0 !important; border-radius: 12px !important; box-shadow: 0 2px 7px rgba(36, 59, 43, .09), inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(62,82,67,.05) !important; /* * Не меняем transform, width, * height и transition. */ } } /* SAF_DARK_HEADER_EXACT_LIGHT_SIZES_V7 */ /* * Геометрия одинаковая для обеих тем. * Светлая тема не изменяется. */ @media (min-width: 1024px) { html body:not(.light):not(.guest-mode) #safDesktopNav .saf-desktop-nav-btn { box-sizing: border-box !important; height: 42px !important; min-height: 42px !important; max-height: 42px !important; padding: 0 8px !important; gap: 5px !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: 0 !important; white-space: nowrap !important; flex: 0 0 auto !important; color: #d7e2db !important; -webkit-text-fill-color: #d7e2db !important; background: transparent !important; border-color: transparent !important; } html body:not(.light):not(.guest-mode) #safDesktopNav .saf-desktop-nav-btn.active { font-weight: 750 !important; color: #90eeb4 !important; -webkit-text-fill-color: #90eeb4 !important; background: transparent !important; border-color: transparent !important; } html body:not(.light):not(.guest-mode) #safDesktopNav .saf-desktop-nav-btn svg { width: 17px !important; height: 17px !important; flex-shrink: 0 !important; opacity: 1 !important; } html body:not(.light):not(.guest-mode) #safDesktopNav .saf-nav-slider { background: linear-gradient( 145deg, #234632 0%, #1c3b2a 52%, #173323 100% ) !important; border: 1px solid rgba(90,205,130,.52) !important; border-radius: 12px !important; box-shadow: 0 2px 7px rgba(0,0,0,.17), inset 0 1px 0 rgba(180,255,200,.09) !important; } /* * При сжатии окна используем общие * адаптивные отступы, без отдельного * уменьшения шрифта тёмной темы. */ html body:not(.light):not(.guest-mode) .app > .header.saf-nav-tight #safDesktopNav .saf-desktop-nav-btn { font-size: 14px !important; font-weight: 700 !important; padding-left: 4px !important; padding-right: 4px !important; gap: 3px !important; } } /* SAF_LIGHT_SHARED_SLIDER_V4 */ /* * Используем существующий общий слайдер. * Отдельных подложек и обработчиков нет. */ @media (min-width: 1024px) { html body.light:not(.guest-mode) #safDesktopNav .saf-nav-slider { display: block !important; background: linear-gradient( 145deg, #e2e9e4 0%, #e9eeea 52%, #dce5de 100% ) !important; border: 1px solid #aabbb0 !important; border-radius: 12px !important; box-shadow: 0 2px 7px rgba(36,59,43,.09), inset 0 1px 0 rgba(255,255,255,.9) !important; pointer-events: none !important; } html body.light:not(.guest-mode) #safDesktopNav .saf-desktop-nav-btn.active { background: transparent !important; border-color: transparent !important; box-shadow: none !important; color: #26332b !important; -webkit-text-fill-color: #26332b !important; font-weight: 750 !important; } } /* SAF_INSTALL_HEADING_BRANDED_V1 */ /* Единое оформление заголовка */ #safConnectPage .saf-install-title { display: flex; align-items: center; gap: 10px; min-width: 0; line-height: 1.25; } /* Существующий SVG — без замены картинки */ #safConnectPage .saf-install-title-arrows-v1 { width: 23px; height: 23px; flex: 0 0 23px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Светлая тема */ html body.light #safConnectPage .saf-install-title { color: #343b37 !important; } html body.light #safConnectPage .saf-install-title-arrows-v1 { color: #343b37 !important; stroke: #343b37 !important; filter: none !important; } /* Тёмная тема */ html body:not(.light) #safConnectPage .saf-install-title-arrows-v1 { color: #75e7a5; stroke: #75e7a5; } /* На небольших экранах длинный заголовок переносится */ @media (max-width: 600px) { #safConnectPage .saf-install-title { font-size: clamp(16px, 4vw, 20px); gap: 8px; overflow-wrap: anywhere; } #safConnectPage .saf-install-title-arrows-v1 { width: 21px; height: 21px; flex-basis: 21px; } } /* SAF_BALANCE_LIGHT_GRAPHITE_V1 */ body.light #balancePage { --sb-green: #343b37; --sb-green-soft: #e7ece8; --sb-green-border: #cbd6ce; --sb-card: #ffffff; --sb-card-2: #f4f7f5; --sb-border: #d8e2db; --sb-muted: #69776e; } body.light #balancePage .saf-new-balance-kicker, body.light #balancePage .saf-new-section-icon { color: #343b37 !important; } body.light #balancePage .saf-new-section-icon { background: #e7ece8 !important; } body.light #balancePage .saf-new-section-title h2 { color: #26312b !important; opacity: 1 !important; } body.light #balancePage .saf-new-section-title p { color: #68766d !important; opacity: 1 !important; } body.light #balancePage .saf-new-balance-main { background: linear-gradient( 135deg, #ffffff, #edf2ee ) !important; border-color: #d3ded5 !important; } body.light #balancePage .saf-new-balance-label, body.light #balancePage .saf-new-balance-description { color: #66746b !important; } body.light #balancePage .saf-new-balance-value { color: #25332b !important; } body.light #balancePage .saf-new-balance-ruble { color: #343b37 !important; background: #e7ece8 !important; border-color: #cbd6ce !important; } body.light #balancePage .saf-new-balance-glow { background: radial-gradient( circle, rgba(52,59,55,.07), transparent 68% ) !important; } body.light #balancePage .saf-new-section:has(#promoInput), body.light #balancePage .saf-new-section.saf-topup-final, body.light #balancePage .saf-new-history-section { border-color: #d5e0d7 !important; } body.light #balancePage #promoInput { background: #f3f6f4 !important; color: #26312b !important; border-color: #cbd5ce !important; } body.light #balancePage #promoInput:focus { border-color: #343b37 !important; box-shadow: 0 0 0 2px rgba(52,59,55,.10) !important; } body.light #balancePage #promoButton { background: #343b37 !important; color: #ffffff !important; border-color: #343b37 !important; } body.light #balancePage .saf-history-filter { background: #edf1ee !important; border-color: #d5ded7 !important; color: #4a5750 !important; } body.light #balancePage .saf-history-filter.is-active { background: #dfe6e0 !important; border-color: #aab9ae !important; color: #26312b !important; } body.light #balancePage #safBalanceHistory .saf-balance-operation { background: #edf1ee !important; border-color: #dce5de !important; } body.light #balancePage .saf-new-refresh { background: #edf1ee !important; border-color: #d5ded7 !important; color: #343b37 !important; } /* SAF_BALANCE_GREEN_TO_GRAPHITE_V2 */ /* Иконка подарка */ body.light #balancePage .saf-promo-gift-icon, body.light #balancePage .saf-promo-gift-icon svg { color: #343b37 !important; stroke: #343b37 !important; } /* Символ рубля в карточке пополнения */ body.light #balancePage #safBalanceTopup .saf-topup-final-ruble { color: #343b37 !important; -webkit-text-fill-color: #343b37 !important; text-shadow: none !important; filter: none !important; } /* Лимит пополнения */ body.light #balancePage .saf-topup-payment-limit { color: #343b37 !important; -webkit-text-fill-color: #343b37 !important; text-shadow: none !important; } /* SAF_BALANCE_HISTORY_GRAPHITE_V3 */ /* Основная карточка истории */ body.light #balancePage .saf-new-history-section { background: #ffffff !important; border: 1px solid #d8e1da !important; box-shadow: 0 5px 22px rgba(35,48,39,.035) !important; } /* Заголовок и описание */ body.light #balancePage .saf-new-history-section .saf-new-section-title h2 { color: #26312b !important; opacity: 1 !important; } body.light #balancePage .saf-new-history-section .saf-new-section-title p { color: #68766d !important; opacity: 1 !important; } /* Иконка истории */ body.light #balancePage .saf-new-history-section .saf-new-section-icon { background: #e7ece8 !important; color: #343b37 !important; } body.light #balancePage .saf-new-history-section .saf-new-section-icon svg { color: #343b37 !important; stroke: currentColor !important; } /* Фильтры */ body.light #balancePage .saf-history-filter { background: #f2f5f2 !important; border: 1px solid #d5ded7 !important; color: #48564d !important; box-shadow: none !important; opacity: 1 !important; } body.light #balancePage .saf-history-filter.is-active { background: #dfe6e0 !important; border: 1px solid #899a8e !important; color: #26312b !important; box-shadow: inset 0 0 0 1px #899a8e !important; } /* Плюсы и минусы в фильтрах */ body.light #balancePage .saf-history-filter { --sb-green: #343b37; } /* Строки операций */ body.light #balancePage #safBalanceHistory .saf-balance-operation { background: #f1f4f1 !important; border: 1px solid #dce4dd !important; border-radius: 13px !important; box-shadow: none !important; } /* Название операции */ body.light #balancePage #safBalanceHistory .saf-balance-operation-title { color: #26312b !important; opacity: 1 !important; font-weight: 700 !important; } /* Дата операции */ body.light #balancePage #safBalanceHistory .saf-balance-operation-date { color: #758179 !important; opacity: 1 !important; } /* Иконки операций */ body.light #balancePage #safBalanceHistory .saf-balance-operation-icon { background: #e2e8e3 !important; color: #343b37 !important; border-radius: 12px !important; } /* SVG-стрелки и значки */ body.light #balancePage #safBalanceHistory .saf-balance-operation-icon svg { color: #343b37 !important; stroke: currentColor !important; } /* Положительные и отрицательные суммы */ body.light #balancePage #safBalanceHistory .saf-balance-operation-amount, body.light #balancePage #safBalanceHistory .saf-balance-operation-amount.plus, body.light #balancePage #safBalanceHistory .saf-balance-operation-amount.minus { color: #343b37 !important; -webkit-text-fill-color: #343b37 !important; text-shadow: none !important; font-weight: 800 !important; } /* Кнопка обновления */ body.light #balancePage .saf-new-refresh { background: #edf1ee !important; border: 1px solid #d5ded7 !important; color: #343b37 !important; box-shadow: none !important; } /* Контраст при наведении */ @media (hover: hover) { body.light #balancePage #safBalanceHistory .saf-balance-operation:hover { background: #e9efea !important; border-color: #c3d0c6 !important; } body.light #balancePage .saf-history-filter:hover { border-color: #9eafa2 !important; } } /* SAF_INVITED_AVATAR_GRAPHITE_FINAL_V1 */ html body.light #referralsPage .saf-ref-people .saf-ref-invited-item .saf-ref-invited-avatar { color: #343b37 !important; background: #e5e9e6 !important; background-image: none !important; border: 1px solid #d4dbd6 !important; box-shadow: none !important; } html body.light #referralsPage .saf-ref-people .saf-ref-invited-item .saf-ref-invited-avatar svg, html body.light #referralsPage .saf-ref-people .saf-ref-invited-item .saf-ref-invited-avatar svg * { color: #343b37 !important; stroke: #343b37 !important; } /* SAF_MOBILE_LIGHT_WHITE_BACKGROUND_V1 */ /* Только мобильные устройства, только светлая тема */ @media (max-width: 1023px) { html:has(body.light), html:has(body.light-theme), html body.light, html body.light-theme { background: #ffffff !important; background-color: #ffffff !important; background-image: none !important; } html body.light:not(.guest-mode) .app, html body.light-theme:not(.guest-mode) .app { background: #ffffff !important; background-color: #ffffff !important; background-image: none !important; } /* Белая основа всех основных страниц */ html body.light:not(.guest-mode) .app > .page, html body.light-theme:not(.guest-mode) .app > .page { background-color: #ffffff !important; background-image: none !important; } /* Страница «Информация» */ html body.light.saf-info-page-open #safInfoPage.active-page, html body.light-theme.saf-info-page-open #safInfoPage.active-page { background: #ffffff !important; background-image: none !important; color: #343b37 !important; } html body.light #safInfoPage .saf-info-heading, html body.light-theme #safInfoPage .saf-info-heading { margin-bottom: 18px; min-width: 0; } html body.light #safInfoPage .saf-info-card, html body.light-theme #safInfoPage .saf-info-card { box-sizing: border-box; width: 100%; max-width: 100%; padding: 18px 16px 22px; overflow-wrap: anywhere; } html body.light #safInfoPage .saf-info-tabs, html body.light-theme #safInfoPage .saf-info-tabs { max-width: 100%; } } @media (max-width: 390px) { html body.light #safInfoPage .saf-info-card, html body.light-theme #safInfoPage .saf-info-card { padding: 16px 13px 20px; } } /* SAF_MOBILE_LIGHT_NAV_GRAPHITE_V1 */ @media (max-width: 1023px) { /* Белая плавающая панель */ html body.light:not(.guest-mode) nav.bottom-nav, html body.light-theme:not(.guest-mode) nav.bottom-nav { background: rgba(255,255,255,.96) !important; background-color: #ffffff !important; background-image: none !important; border: 1px solid #e0e5e1 !important; box-shadow: 0 8px 26px rgba(35,48,40,.09), inset 0 1px 0 #ffffff !important; } /* Подвижная подложка активного пункта */ html body.light nav.bottom-nav #safBottomActivePillV35, html body.light-theme nav.bottom-nav #safBottomActivePillV35 { background: linear-gradient( 135deg, #e4e9e5 0%, #f0f2f0 55%, #e1e7e2 100% ) !important; border: 1px solid #d5ddd6 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 3px 10px rgba(52,59,55,.06) !important; } /* Активная кнопка */ html body.light nav.bottom-nav .nav-item.active, html body.light-theme nav.bottom-nav .nav-item.active { color: #343b37 !important; -webkit-text-fill-color: #343b37 !important; background: transparent !important; border-color: transparent !important; box-shadow: none !important; } /* Иконка и подпись активной кнопки */ html body.light nav.bottom-nav .nav-item.active svg, html body.light nav.bottom-nav .nav-item.active svg *, html body.light nav.bottom-nav .nav-item.active span, html body.light-theme nav.bottom-nav .nav-item.active svg, html body.light-theme nav.bottom-nav .nav-item.active svg *, html body.light-theme nav.bottom-nav .nav-item.active span { color: #343b37 !important; stroke: #343b37 !important; -webkit-text-fill-color: #343b37 !important; } /* SAF_MOBILE_NAV_ICON_FILTER_FIX_V2 */ /* Убираем зелёный фильтр у активной иконки */ html body.light nav.bottom-nav .nav-item.active .nav-icon .saf-icon-v10, html body.light-theme nav.bottom-nav .nav-item.active .nav-icon .saf-icon-v10 { filter: brightness(0) saturate(100%) invert(22%) sepia(8%) saturate(440%) hue-rotate(92deg) brightness(94%) contrast(91%) !important; -webkit-filter: brightness(0) saturate(100%) invert(22%) sepia(8%) saturate(440%) hue-rotate(92deg) brightness(94%) contrast(91%) !important; } /* Графитовая подложка вместо зелёной */ html body.light nav.bottom-nav #safBottomActivePillV35, html body.light-theme nav.bottom-nav #safBottomActivePillV35 { background: linear-gradient( 135deg, #e2e7e3, #f0f2f0 ) !important; border-color: #d3dad5 !important; } /* SAF_MOBILE_NAV_INTERACTION_GRAPHITE_V3 */ /* Все состояния значков нижней навигации */ html body.light nav.bottom-nav .nav-item:is(:hover, :focus, :focus-visible, :active) .nav-icon .saf-icon-v10, html body.light-theme nav.bottom-nav .nav-item:is(:hover, :focus, :focus-visible, :active) .nav-icon .saf-icon-v10, html body.light nav.bottom-nav .nav-item.active .nav-icon .saf-icon-v10, html body.light-theme nav.bottom-nav .nav-item.active .nav-icon .saf-icon-v10 { filter: brightness(0) saturate(100%) invert(22%) sepia(8%) saturate(440%) hue-rotate(92deg) brightness(94%) contrast(91%) !important; -webkit-filter: brightness(0) saturate(100%) invert(22%) sepia(8%) saturate(440%) hue-rotate(92deg) brightness(94%) contrast(91%) !important; } /* Цвет иконок и подписей при взаимодействии */ html body.light nav.bottom-nav .nav-item:is(:hover, :focus, :focus-visible, :active, .active), html body.light-theme nav.bottom-nav .nav-item:is(:hover, :focus, :focus-visible, :active, .active) { color: #343b37 !important; -webkit-text-fill-color: #343b37 !important; } html body.light nav.bottom-nav .nav-item:is(:hover, :focus, :focus-visible, :active, .active) .saf-nav-label, html body.light-theme nav.bottom-nav .nav-item:is(:hover, :focus, :focus-visible, :active, .active) .saf-nav-label { color: #343b37 !important; -webkit-text-fill-color: #343b37 !important; } /* SAF_MOBILE_NAV_ICON_GRAPHITE_V4 */ /* Графитовый цвет всех активных PNG/SVG-иконок */ html body.light nav.bottom-nav .nav-item.active .nav-icon img, html body.light-theme nav.bottom-nav .nav-item.active .nav-icon img, html body.light nav.bottom-nav .nav-item:is(:hover, :focus, :active) .nav-icon img, html body.light-theme nav.bottom-nav .nav-item:is(:hover, :focus, :active) .nav-icon img { filter: brightness(0) saturate(100%) !important; -webkit-filter: brightness(0) saturate(100%) !important; } /* Графитовый SVG, если иконка встроена в разметку */ html body.light nav.bottom-nav .nav-item.active .nav-icon svg, html body.light-theme nav.bottom-nav .nav-item.active .nav-icon svg, html body.light nav.bottom-nav .nav-item:is(:hover, :focus, :active) .nav-icon svg, html body.light-theme nav.bottom-nav .nav-item:is(:hover, :focus, :active) .nav-icon svg { color: #343b37 !important; stroke: #343b37 !important; } } /* SAF_INFO_MOBILE_LIGHT_FINAL_V1 */ @media (max-width: 1023px) { /* Основной блок страницы */ html body.light #safInfoPage, html body.light-theme #safInfoPage { background: #ffffff !important; background-image: none !important; color: #343b37 !important; } /* Заголовок и значок информации */ html body.light #safInfoPage .saf-info-heading, html body.light-theme #safInfoPage .saf-info-heading, html body.light #safInfoPage .saf-info-heading h1, html body.light-theme #safInfoPage .saf-info-heading h1, html body.light #safInfoPage .saf-info-heading-icon, html body.light-theme #safInfoPage .saf-info-heading-icon { color: #343b37 !important; -webkit-text-fill-color: #343b37 !important; } /* Кнопка «Назад» */ html body.light #safInfoPage .saf-info-back, html body.light-theme #safInfoPage .saf-info-back { background: #f0f2f0 !important; background-image: none !important; border: 1px solid #dce2dd !important; color: #343b37 !important; box-shadow: none !important; } /* Выпадающий блок выбора раздела */ html body.light #safInfoPage .saf-info-dropdown-v1, html body.light-theme #safInfoPage .saf-info-dropdown-v1 { background: #ffffff !important; background-image: none !important; border-color: #dce2dd !important; color: #343b37 !important; } /* Кнопки выбора разделов */ html body.light #safInfoPage .saf-info-tab, html body.light-theme #safInfoPage .saf-info-tab { background: #f0f2f0 !important; background-image: none !important; border-color: #dce2dd !important; color: #343b37 !important; } html body.light #safInfoPage .saf-info-tab.active, html body.light-theme #safInfoPage .saf-info-tab.active { background: #e4e9e5 !important; border-color: #aab7ad !important; color: #343b37 !important; } /* Графитовые SVG-значки */ html body.light #safInfoPage .saf-info-back svg, html body.light #safInfoPage .saf-info-tab svg, html body.light-theme #safInfoPage .saf-info-back svg, html body.light-theme #safInfoPage .saf-info-tab svg { color: #343b37 !important; stroke: #343b37 !important; } /* SAF_INFO_MOBILE_LIGHT_CONTAINERS_V2 */ /* Белый фон страницы */ html body.light.saf-info-page-open #safInfoPage.active-page, html body.light-theme.saf-info-page-open #safInfoPage.active-page { background: #ffffff !important; background-color: #ffffff !important; background-image: none !important; } /* Белый фон приложения при открытой информации */ html body.light.saf-info-page-open .app, html body.light-theme.saf-info-page-open .app { background: #ffffff !important; background-color: #ffffff !important; background-image: none !important; } /* Реальный верхний контейнер */ html body.light #safInfoPage .saf-info-unified-header-v1, html body.light-theme #safInfoPage .saf-info-unified-header-v1 { background: #ffffff !important; background-color: #ffffff !important; background-image: none !important; border: 1px solid #dce3de !important; box-shadow: 0 8px 24px rgba(35,48,40,.06) !important; } /* Заголовок */ html body.light #safInfoPage .saf-info-heading, html body.light-theme #safInfoPage .saf-info-heading { color: #343b37 !important; background: transparent !important; } /* Реальная кнопка Назад */ html body.light #safInfoPage #safInfoBack, html body.light-theme #safInfoPage #safInfoBack { background: #edf1ee !important; background-image: none !important; border: 1px solid #d8e0d9 !important; color: #343b37 !important; } /* Контейнер выбора раздела */ html body.light #safInfoPage .saf-info-dropdown-v1, html body.light-theme #safInfoPage .saf-info-dropdown-v1 { background: transparent !important; background-image: none !important; border-color: transparent !important; } /* Настоящая кнопка выбора раздела */ html body.light #safInfoPage .saf-info-dropdown-trigger-v1, html body.light-theme #safInfoPage .saf-info-dropdown-trigger-v1 { background: #f0f2f0 !important; background-image: none !important; border: 1px solid #dce3de !important; color: #343b37 !important; } /* Графитовые иконки и текст */ html body.light #safInfoPage .saf-info-dropdown-trigger-v1 *, html body.light-theme #safInfoPage .saf-info-dropdown-trigger-v1 *, html body.light #safInfoPage #safInfoBack *, html body.light-theme #safInfoPage #safInfoBack * { color: #343b37 !important; stroke: #343b37 !important; -webkit-text-fill-color: #343b37 !important; } /* SAF_INFO_MOBILE_WHITE_BACKGROUND_V3 */ /* Полностью белый фон страницы и приложения */ html body.light.saf-info-page-open, html body.light-theme.saf-info-page-open, html body.light.saf-info-page-open .app, html body.light-theme.saf-info-page-open .app, html body.light.saf-info-page-open #safInfoPage, html body.light-theme.saf-info-page-open #safInfoPage, html body.light.saf-info-page-open #safInfoPage.active-page, html body.light-theme.saf-info-page-open #safInfoPage.active-page, html body.light.saf-ambient-ready.saf-info-page-open #safInfoPage.active-page, html body.light-theme.saf-ambient-ready.saf-info-page-open #safInfoPage.active-page { background: #ffffff !important; background-color: #ffffff !important; background-image: none !important; } /* Убираем тёмную декоративную подложку */ html body.light.saf-info-page-open #safInfoPage::before, html body.light-theme.saf-info-page-open #safInfoPage::before { background: none !important; background-image: none !important; } /* Кнопка назад */ html body.light #safInfoPage #safInfoBack, html body.light-theme #safInfoPage #safInfoBack { color: #343b37 !important; background: #edf1ee !important; border-color: #d7dfd9 !important; } /* Стрелка внутри кнопки */ html body.light #safInfoPage #safInfoBack .saf-guest-back-arrow, html body.light-theme #safInfoPage #safInfoBack .saf-guest-back-arrow { color: #343b37 !important; -webkit-text-fill-color: #343b37 !important; background: #e0e6e1 !important; border-color: #d0d9d2 !important; box-shadow: none !important; } /* Значок информации */ html body.light #safInfoPage .saf-info-heading-icon img, html body.light-theme #safInfoPage .saf-info-heading-icon img { filter: brightness(0) saturate(100%) !important; -webkit-filter: brightness(0) saturate(100%) !important; opacity: .8 !important; } /* Иконки выпадающего меню */ html body.light #safInfoPage .saf-info-dropdown-trigger-v1 svg, html body.light-theme #safInfoPage .saf-info-dropdown-trigger-v1 svg { color: #343b37 !important; stroke: #343b37 !important; } /* SAF_INFO_MOBILE_ARROW_SHADOW_V4 */ /* Убираем тёмную полосу и тень под верхней карточкой */ html body.light #safInfoPage .saf-info-unified-header-v1, html body.light-theme #safInfoPage .saf-info-unified-header-v1 { box-shadow: none !important; filter: none !important; -webkit-filter: none !important; } /* Убираем декоративные слои карточки */ html body.light #safInfoPage .saf-info-unified-header-v1::before, html body.light #safInfoPage .saf-info-unified-header-v1::after, html body.light-theme #safInfoPage .saf-info-unified-header-v1::before, html body.light-theme #safInfoPage .saf-info-unified-header-v1::after { content: none !important; display: none !important; box-shadow: none !important; background: none !important; } /* Стрелка «Назад» всегда графитовая */ html body.light #safInfoPage #safInfoBack .saf-guest-back-arrow, html body.light-theme #safInfoPage #safInfoBack .saf-guest-back-arrow { color: #343b37 !important; -webkit-text-fill-color: #343b37 !important; text-shadow: none !important; filter: grayscale(1) !important; -webkit-filter: grayscale(1) !important; } /* Если стрелка реализована через SVG */ html body.light #safInfoPage #safInfoBack svg, html body.light #safInfoPage #safInfoBack svg *, html body.light-theme #safInfoPage #safInfoBack svg, html body.light-theme #safInfoPage #safInfoBack svg * { color: #343b37 !important; stroke: #343b37 !important; fill: none !important; } /* Нейтральная подложка стрелки */ html body.light #safInfoPage #safInfoBack .saf-guest-back-arrow, html body.light-theme #safInfoPage #safInfoBack .saf-guest-back-arrow { background: #e2e8e3 !important; border-color: #d5ddd7 !important; box-shadow: none !important; } /* SAF_INFO_MOBILE_CONTENT_HEIGHT_V5 */ /* Пока раздел не выбран: высота страницы определяется содержимым. */ html body.light.saf-info-page-open #safInfoPage.active-page:not(:has(.saf-info-panel.active)), html body.light-theme.saf-info-page-open #safInfoPage.active-page:not(:has(.saf-info-panel.active)) { height: auto !important; min-height: 0 !important; max-height: none !important; padding-bottom: 0 !important; overflow-y: visible !important; clip-path: none !important; border-radius: 0 !important; } /* После выбора раздела: сохраняем ограничение высоты и прокрутку. */ html body.light.saf-info-page-open #safInfoPage.active-page:has(.saf-info-panel.active), html body.light-theme.saf-info-page-open #safInfoPage.active-page:has(.saf-info-panel.active) { overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; } /* Убираем нижний затемняющий слой */ html body.light.saf-info-page-open #safInfoPage.active-page::after, html body.light-theme.saf-info-page-open #safInfoPage.active-page::after { content: none !important; display: none !important; background: none !important; } /* Убираем остаточную тень под верхней карточкой */ html body.light #safInfoPage .saf-info-unified-header-v1, html body.light-theme #safInfoPage .saf-info-unified-header-v1 { box-shadow: none !important; filter: none !important; -webkit-filter: none !important; } } /* SAF_TOPUP_LIGHT_GRAPHITE_FINAL_V1 */ /* Только светлая тема, все платформы */ body:is(.light,.light-theme) #safTopupPage .sftp-title-icon { background: #343b37 !important; border-color: #343b37 !important; color: #ffffff !important; } body:is(.light,.light-theme) #safTopupPage .sftp-method.active { background: linear-gradient(135deg,#e1e6e2,#f1f3f1) !important; border-color: #aab5ad !important; box-shadow: inset 0 0 0 1px rgba(52,59,55,.12) !important; color: #343b37 !important; } body:is(.light,.light-theme) #safTopupPage .sftp-method.active::before, body:is(.light,.light-theme) #safTopupPage .sftp-method.active::after { background-color: #343b37 !important; border-color: #343b37 !important; } body:is(.light,.light-theme) #safTopupPage .sftp-method { color: #343b37 !important; border-color: #d9e0db !important; } body:is(.light,.light-theme) #safTopupPage .sftp-method svg { color: #343b37 !important; } body:is(.light,.light-theme) #safTopupPage .sftp-method svg path { stroke: #343b37 !important; } body:is(.light,.light-theme) #safTopupPage .sftp-quick-button { border-color: #d9e0db !important; color: #343b37 !important; } body:is(.light,.light-theme) #safTopupPage .sftp-quick-button.active { background: #e7ebe8 !important; border-color: #aab5ad !important; } body:is(.light,.light-theme) #safTopupPage .sftp-pay { background: #343b37 !important; border-color: #343b37 !important; color: #ffffff !important; } body:is(.light,.light-theme) #safTopupPage .sftp-pay:disabled { background: #748078 !important; border-color: #748078 !important; color: #ffffff !important; } body:is(.light,.light-theme) #safTopupPage .saf-topup-back { color: #343b37 !important; -webkit-text-fill-color: #343b37 !important; } /* SAF_LIGHT_THEME_ALL_NOTIFICATIONS_V1 */ /* Светлая тема: нейтральный графитовый стиль уведомлений */ html[data-theme="light"] body #toast.toast, html[data-theme="light"] body #safProfileCopyToast, html[data-theme="light"] body #safWebAuthGate #safMidnightFormStatus:not(:empty), html[data-theme="light"] body #safNotificationSaveStatus.is-visible, body.light #toast.toast, body.light #safProfileCopyToast, body.light #safWebAuthGate #safMidnightFormStatus:not(:empty), body.light #safNotificationSaveStatus.is-visible, body.light-theme #toast.toast, body.light-theme #safProfileCopyToast, body.light-theme #safWebAuthGate #safMidnightFormStatus:not(:empty), body.light-theme #safNotificationSaveStatus.is-visible { color: #343b37 !important; background: #f0f2f0 !important; border: 1px solid #c7cfca !important; box-shadow: 0 8px 24px rgba(30,40,34,.10) !important; text-shadow: none !important; } /* Уведомления Email: успех, ошибка, загрузка */ html[data-theme="light"] body #safMidnightFormStatus[data-kind], body.light #safMidnightFormStatus[data-kind], body.light-theme #safMidnightFormStatus[data-kind] { color: #343b37 !important; background: #f0f2f0 !important; border-color: #c7cfca !important; box-shadow: none !important; } html[data-theme="light"] body #safMidnightFormStatus::before, body.light #safMidnightFormStatus::before, body.light-theme #safMidnightFormStatus::before { color: #343b37 !important; background: #e2e6e3 !important; border-color: #b7c0ba !important; } /* Текст общих всплывающих уведомлений */ html[data-theme="light"] body #toast .saf-toast-text, body.light #toast .saf-toast-text, body.light-theme #toast .saf-toast-text { color: #343b37 !important; } /* Убираем зелёный декоративный оттенок иконки toast */ html[data-theme="light"] body #toast.toast::before, body.light #toast.toast::before, body.light-theme #toast.toast::before { filter: grayscale(1) brightness(.55) saturate(0) !important; } /* Копирование и сохранение настроек */ html[data-theme="light"] body #safProfileCopyToast svg, html[data-theme="light"] body #safNotificationSaveStatus svg, body.light #safProfileCopyToast svg, body.light #safNotificationSaveStatus svg, body.light-theme #safProfileCopyToast svg, body.light-theme #safNotificationSaveStatus svg { color: #343b37 !important; stroke: #343b37 !important; } html[data-theme="light"] body #safNotificationSaveStatus.is-success, html[data-theme="light"] body #safNotificationSaveStatus.is-error, body.light #safNotificationSaveStatus.is-success, body.light #safNotificationSaveStatus.is-error, body.light-theme #safNotificationSaveStatus.is-success, body.light-theme #safNotificationSaveStatus.is-error { color: #343b37 !important; background: #f0f2f0 !important; border-color: #c7cfca !important; } @media (prefers-reduced-motion: reduce) { html[data-theme="light"] body #safMidnightFormStatus, body.light #safMidnightFormStatus, body.light-theme #safMidnightFormStatus { animation: none !important; transition: none !important; } } /* SAF_INSUFFICIENT_BALANCE_LIGHT_GRAPHITE_V1 Адаптивный дизайн для всех платформ. Только светлая тема. Логику оплаты не меняет. */ html body.light .saf-tariff-balance-warning-v19, html body.light-theme .saf-tariff-balance-warning-v19 { box-sizing: border-box !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 14px !important; width: 100% !important; min-width: 0 !important; padding: 12px 14px !important; background: #f0f2f0 !important; background-image: none !important; border: 1px solid #d8ded9 !important; border-radius: 15px !important; color: #343b37 !important; box-shadow: none !important; filter: none !important; } html body.light .saf-tariff-balance-warning-left-v19, html body.light-theme .saf-tariff-balance-warning-left-v19 { display: flex !important; align-items: center !important; gap: 10px !important; flex: 1 1 auto !important; min-width: 0 !important; } html body.light .saf-tariff-balance-warning-icon-v19, html body.light-theme .saf-tariff-balance-warning-icon-v19 { flex: 0 0 auto !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 32px !important; height: 32px !important; border-radius: 50% !important; background: #e0e5e1 !important; border: 1px solid #d0d8d2 !important; color: #343b37 !important; box-shadow: none !important; } html body.light .saf-tariff-balance-warning-icon-v19 svg, html body.light .saf-tariff-balance-warning-icon-v19 svg *, html body.light-theme .saf-tariff-balance-warning-icon-v19 svg, html body.light-theme .saf-tariff-balance-warning-icon-v19 svg * { color: #343b37 !important; stroke: #343b37 !important; fill: none; } html body.light .saf-tariff-balance-warning-title-v19, html body.light-theme .saf-tariff-balance-warning-title-v19 { color: #68716b !important; -webkit-text-fill-color: #68716b !important; font-size: 12px !important; font-weight: 600 !important; line-height: 1.4 !important; overflow-wrap: anywhere !important; } html body.light .saf-tariff-balance-warning-amount-v19, html body.light-theme .saf-tariff-balance-warning-amount-v19 { display: block !important; margin-top: 2px !important; color: #343b37 !important; -webkit-text-fill-color: #343b37 !important; font-size: 15px !important; font-weight: 750 !important; line-height: 1.35 !important; overflow-wrap: anywhere !important; } html body.light .saf-tariff-balance-warning-topup-v19, html body.light-theme .saf-tariff-balance-warning-topup-v19 { box-sizing: border-box !important; flex: 0 0 auto !important; min-height: 38px !important; max-width: 100% !important; padding: 9px 15px !important; background: #343b37 !important; background-image: none !important; border: 1px solid #343b37 !important; border-radius: 11px !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; font: inherit !important; font-size: 12px !important; font-weight: 650 !important; white-space: normal !important; text-align: center !important; box-shadow: none !important; filter: none !important; transition: background-color .15s ease, transform .15s ease !important; } html body.light .saf-tariff-balance-warning-topup-v19 *, html body.light-theme .saf-tariff-balance-warning-topup-v19 * { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } html body.light .saf-tariff-balance-warning-topup-v19:hover, html body.light-theme .saf-tariff-balance-warning-topup-v19:hover { background: #252c28 !important; border-color: #252c28 !important; } html body.light .saf-tariff-balance-warning-topup-v19:active, html body.light-theme .saf-tariff-balance-warning-topup-v19:active { transform: scale(.98) !important; } /* Узкие экраны: не допускаем переполнения суммы и кнопки. */ @media (max-width: 420px) { html body.light .saf-tariff-balance-warning-v19, html body.light-theme .saf-tariff-balance-warning-v19 { gap: 8px !important; padding: 10px !important; border-radius: 13px !important; } html body.light .saf-tariff-balance-warning-left-v19, html body.light-theme .saf-tariff-balance-warning-left-v19 { gap: 8px !important; } html body.light .saf-tariff-balance-warning-topup-v19, html body.light-theme .saf-tariff-balance-warning-topup-v19 { padding: 9px 11px !important; } } /* SAF_AUTH_LINK_FORGOT_LIGHT_GRAPHITE_V1 Единая адаптивная светлая тема SAF CONNECT. Только визуальное оформление. */ html body.light #safSmartAuthLinkCard, html body.light-theme #safSmartAuthLinkCard { color: #343b37 !important; background: #ffffff !important; border: 1px solid #d8e0db !important; border-radius: 17px !important; box-shadow: 0 8px 24px rgba(35, 48, 40, .045) !important; } html body.light #safSmartAuthLinkCard button, html body.light #safSmartAuthLinkCard [role="button"], html body.light-theme #safSmartAuthLinkCard button, html body.light-theme #safSmartAuthLinkCard [role="button"] { color: #ffffff !important; background: #343b37 !important; border: 1px solid #343b37 !important; border-radius: 10px !important; box-shadow: none !important; -webkit-text-fill-color: #ffffff !important; } html body.light #safSmartAuthLinkCard button *, html body.light-theme #safSmartAuthLinkCard button * { color: inherit !important; -webkit-text-fill-color: inherit !important; } html body.light #safSmartAuthLinkCard button:disabled, html body.light-theme #safSmartAuthLinkCard button:disabled { background: #e9edeb !important; border-color: #e9edeb !important; color: #858e88 !important; -webkit-text-fill-color: #858e88 !important; opacity: 1 !important; } /* Восстановление пароля: светлая карточка вместо тёмной панели. */ html body.light #safWebAuthGate .saf-forgot-box, html body.light-theme #safWebAuthGate .saf-forgot-box { color: #343b37 !important; background: #ffffff !important; border: 1px solid #d8e0db !important; border-radius: 13px !important; box-shadow: 0 5px 18px rgba(35, 48, 40, .045) !important; } html body.light #safWebAuthGate .saf-forgot-box h1, html body.light #safWebAuthGate .saf-forgot-box h2, html body.light #safWebAuthGate .saf-forgot-box h3, html body.light #safWebAuthGate .saf-forgot-box label, html body.light #safWebAuthGate .saf-forgot-box p, html body.light #safWebAuthGate .saf-forgot-box span, html body.light-theme #safWebAuthGate .saf-forgot-box h1, html body.light-theme #safWebAuthGate .saf-forgot-box h2, html body.light-theme #safWebAuthGate .saf-forgot-box h3, html body.light-theme #safWebAuthGate .saf-forgot-box label, html body.light-theme #safWebAuthGate .saf-forgot-box p, html body.light-theme #safWebAuthGate .saf-forgot-box span { color: #343b37 !important; -webkit-text-fill-color: #343b37 !important; } html body.light #safWebAuthGate .saf-forgot-box input, html body.light #safWebAuthGate .saf-forgot-box input[type="email"], html body.light-theme #safWebAuthGate .saf-forgot-box input, html body.light-theme #safWebAuthGate .saf-forgot-box input[type="email"] { color: #343b37 !important; background: #ffffff !important; border: 1px solid #cfd8d2 !important; border-radius: 10px !important; box-shadow: none !important; caret-color: #343b37 !important; -webkit-text-fill-color: #343b37 !important; } html body.light #safWebAuthGate .saf-forgot-box input::placeholder, html body.light-theme #safWebAuthGate .saf-forgot-box input::placeholder { color: #89928c !important; -webkit-text-fill-color: #89928c !important; opacity: 1 !important; } html body.light #safWebAuthGate .saf-forgot-box input:focus, html body.light-theme #safWebAuthGate .saf-forgot-box input:focus { border-color: #89958d !important; outline: 2px solid rgba(52, 59, 55, .08) !important; outline-offset: 1px !important; } /* Кнопки формы — графитовые, включая отправку ссылки. */ html body.light #safWebAuthGate .saf-forgot-box button, html body.light #safWebAuthGate .saf-forgot-box [type="submit"], html body.light #safWebAuthGate .saf-forgot-box .saf-forgot-submit, html body.light-theme #safWebAuthGate .saf-forgot-box button, html body.light-theme #safWebAuthGate .saf-forgot-box [type="submit"], html body.light-theme #safWebAuthGate .saf-forgot-box .saf-forgot-submit { color: #ffffff !important; background: #343b37 !important; border: 1px solid #343b37 !important; border-radius: 10px !important; box-shadow: none !important; -webkit-text-fill-color: #ffffff !important; } html body.light #safWebAuthGate .saf-forgot-box button *, html body.light-theme #safWebAuthGate .saf-forgot-box button * { color: inherit !important; -webkit-text-fill-color: inherit !important; } html body.light #safWebAuthGate .saf-forgot-box button:disabled, html body.light-theme #safWebAuthGate .saf-forgot-box button:disabled { color: #ffffff !important; background: #737d76 !important; border-color: #737d76 !important; opacity: .8 !important; } /* Ссылки и возврат ко входу. */ html body.light #safWebAuthGate .saf-forgot-box a, html body.light-theme #safWebAuthGate .saf-forgot-box a { color: #525c55 !important; -webkit-text-fill-color: #525c55 !important; text-decoration-color: #b6c0b9 !important; } /* Сообщения формы: нейтральные поверхности и читаемый текст. */ html body.light #safWebAuthGate .saf-forgot-box [role="status"], html body.light #safWebAuthGate .saf-forgot-box [role="alert"], html body.light #safWebAuthGate .saf-forgot-box .saf-forgot-status, html body.light-theme #safWebAuthGate .saf-forgot-box [role="status"], html body.light-theme #safWebAuthGate .saf-forgot-box [role="alert"], html body.light-theme #safWebAuthGate .saf-forgot-box .saf-forgot-status { color: #343b37 !important; background: #f0f3f1 !important; border-color: #d8e0db !important; -webkit-text-fill-color: #343b37 !important; } @media (hover: hover) and (pointer: fine) { html body.light #safSmartAuthLinkCard button:hover, html body.light-theme #safSmartAuthLinkCard button:hover, html body.light #safWebAuthGate .saf-forgot-box button:hover, html body.light-theme #safWebAuthGate .saf-forgot-box button:hover { background: #252c28 !important; border-color: #252c28 !important; } } @media (max-width: 480px) { html body.light #safSmartAuthLinkCard, html body.light-theme #safSmartAuthLinkCard { max-width: 100% !important; box-sizing: border-box !important; } html body.light #safWebAuthGate .saf-forgot-box, html body.light-theme #safWebAuthGate .saf-forgot-box { box-sizing: border-box !important; max-width: 100% !important; } } /* SAF_ANDROID_INSTALL_SCROLL_V1 */ /* Mobile installation page only */ @media (max-width: 699px) { html:has(body.saf-connect-page-open #safConnectPage.active-page) { height: auto !important; min-height: 100% !important; overflow-y: auto !important; overscroll-behavior-y: auto !important; } body.saf-connect-page-open:has(#safConnectPage.active-page) { height: auto !important; min-height: 100dvh !important; max-height: none !important; overflow-y: auto !important; touch-action: pan-y !important; overscroll-behavior-y: auto !important; } body.saf-connect-page-open:has(#safConnectPage.active-page) > .app { height: auto !important; min-height: 100dvh !important; max-height: none !important; overflow: visible !important; } body.saf-connect-page-open #safConnectPage.active-page { position: relative !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; touch-action: pan-y !important; padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)) !important; } body.saf-connect-page-open #safConnectPage.active-page .saf-connect-page-inner, body.saf-connect-page-open #safConnectPage.active-page .saf-connect-guide, body.saf-connect-page-open #safConnectPage.active-page .saf-guide-timeline { height: auto !important; max-height: none !important; overflow: visible !important; touch-action: pan-y !important; } } /* SAF_INSTALL_DARK_MOBILE_SURFACE_FIX_V1 */ /* Только тёмная тема, экраны до 699px */ @media (max-width: 699px) { html body:not(.light):not(.light-theme) #safConnectPage .saf-connect-page-inner { background: linear-gradient( 155deg, #10251a 0%, #102218 55%, #0d1c15 100% ) !important; border: 1px solid rgba(105, 185, 130, .20) !important; box-shadow: 0 12px 32px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.035) !important; } html body:not(.light):not(.light-theme) #safConnectPage .saf-install-panel { background: linear-gradient( 145deg, #173625 0%, #142d20 100% ) !important; background-color: #142d20 !important; border: 1px solid rgba(111, 218, 146, .22) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 8px 24px rgba(0,0,0,.10) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } } /* SAF CONNECT — QR white background */ /* Both themes, desktop and mobile */ #safQrPage .saf-qr-card { background: #ffffff !important; } #safQrPage #safQrCode { background: #ffffff !important; padding: 12px !important; box-sizing: border-box !important; border-radius: 12px !important; } #safQrPage #safQrCode canvas, #safQrPage #safQrCode img { background: #ffffff !important; } /* SAF CONNECT — QR white inner square */ /* All themes and devices */ html body #safQrPage .saf-qr-card, html body #safQrPage #safQrCode { background: #ffffff !important; background-image: none !important; } /* Белое поле вокруг QR */ html body #safQrPage #safQrCode { padding: 12px !important; box-sizing: border-box !important; border-radius: 16px !important; overflow: hidden !important; } /* Сам QR */ html body #safQrPage #safQrCode canvas, html body #safQrPage #safQrCode img { background: #ffffff !important; border-radius: 0 !important; max-width: 100% !important; max-height: 100% !important; } /* Сохраняем белую подложку на узких экранах */ @media (max-width: 600px) { html body #safQrPage #safQrCode { background: #ffffff !important; padding: 12px !important; } } #safNotificationSettingsCard .saf-misc-link { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 8px 14px; border-radius: 11px; border: 1px solid rgba(120,150,130,.35); background: rgba(120,150,130,.12); color: inherit; font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; } #safNotificationSettingsCard .saf-misc-link[aria-disabled="true"] { opacity: .5; pointer-events: none; } @media(max-width:480px) { #safNotificationSettingsCard .saf-notify-top { gap: 12px; } } /* SAF_TELEGRAM_PHONE_NOTICE_V1 */ .saf-telegram-phone-notice-v1 { display: block; width: 100%; box-sizing: border-box; margin: 7px 0 12px; padding: 0 8px; text-align: center; font-size: 11px; line-height: 1.45; font-weight: 400; color: #8c9298; } /* SAF_TELEGRAM_NOTICE_SPACING_V3 */ /* SAF_TELEGRAM_SPACING_CORRECTION_V5 */ #safMidnightAuthPanel #safTelegramPhoneNoticeV1 { margin-top: 2px !important; margin-bottom: -8px !important; } /* SAF_PASSWORD_EYE_POSITION_FIX_V6 */ #safMidnightAuthPanel .saf-eye-v6-wrap { display: block !important; position: relative !important; width: 100% !important; } #safMidnightAuthPanel .saf-eye-v6-wrap > input { width: 100% !important; padding-right: 52px !important; } #safMidnightAuthPanel .saf-eye-v5-button { top: 50% !important; bottom: auto !important; right: 9px !important; transform: translateY(-50%) !important; width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } #safMidnightAuthPanel .saf-eye-v5-button svg { width: 21px !important; height: 21px !important; min-width: 21px !important; min-height: 21px !important; stroke-width: 2 !important; } /* SAF_TELEGRAM_COMPACT_V6 */ /* Telegram button -> warning */ #safMidnightAuthPanel #safTelegramPhoneNoticeV1 { margin-top: 3px !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; line-height: 1.25 !important; } /* Warning -> bot caption -> bot link */ #safMidnightAuthPanel .saf-midnight-telegram-info { gap: 2px !important; padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; } #safMidnightAuthPanel .saf-midnight-telegram-caption { margin: 0 !important; padding: 0 !important; line-height: 1.25 !important; } #safMidnightAuthPanel .saf-midnight-telegram-link { margin: 0 !important; padding: 0 !important; min-height: 20px; } /* Bot link -> Email divider */ #safMidnightAuthPanel .saf-midnight-divider { margin-top: 7px !important; margin-bottom: 9px !important; } /* SAF_TELEGRAM_LINK_ALIGNMENT_V1 */ #safMidnightAuthPanel .saf-midnight-telegram-link { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; line-height: 20px !important; vertical-align: middle !important; } #safMidnightAuthPanel .saf-midnight-telegram-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 19px !important; height: 19px !important; flex: 0 0 19px !important; line-height: 1 !important; vertical-align: middle !important; } #safMidnightAuthPanel .saf-midnight-telegram-link { padding-top: 2px !important; } /* SAF_TOPUP_PAYMENT_UI_V1_3 */ #safTopupPage .sftp-methods { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; align-items: stretch !important; } #safTopupPage .sftp-methods > .sftp-method { box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; } #safTopupPage #safTopupSbp { grid-column: 1 !important; grid-row: 1 !important; } #safTopupPage #safTopupBankCard { grid-column: 2 !important; grid-row: 1 !important; } #safTopupPage #safTopupCard { grid-column: 1 / -1 !important; grid-row: 2 !important; } #safTopupPage .saf-topup-method-svg { display: block !important; width: 27px !important; height: 27px !important; min-width: 27px !important; flex: 0 0 27px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.9 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } /* SAF_CARD_PRIVATE_TEST_V1 */ #safTopupPage #safTopupBankCard { opacity: 1 !important; cursor: pointer !important; pointer-events: auto !important; } #safTopupPage #safTopupBankCard.active { border-color: #00D977 !important; } #safTopupPage .saf-topup-soon { font-size: 10px !important; font-weight: 600 !important; opacity: .75 !important; white-space: nowrap !important; } @media (max-width: 480px) { #safTopupPage .sftp-methods { gap: 8px !important; } } /* SAF_CRYPTO_BUTTON_DESIGN_V1_4 */ #safTopupPage #safTopupCard { display: flex !important; align-items: center !important; justify-content: center !important; position: relative !important; min-height: 58px !important; } #safTopupPage .saf-crypto-content { display: inline-flex !important; align-items: flex-start !important; justify-content: center !important; gap: 9px !important; } #safTopupPage .saf-crypto-wallet-icon { width: 20px !important; height: 20px !important; flex: 0 0 20px !important; margin-top: 1px !important; stroke: currentColor !important; fill: none !important; } #safTopupPage .saf-crypto-text { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 3px !important; text-align: left !important; } #safTopupPage .saf-crypto-name { font-size: 14px !important; font-weight: 700 !important; line-height: 18px !important; } #safTopupPage .saf-crypto-status { font-size: 12px !important; font-weight: 400 !important; line-height: 16px !important; opacity: .75 !important; } #safTopupPage #safTopupCard .sftp-method-dot { position: absolute !important; right: 12px !important; top: 12px !important; } /* SAF_CRYPTO_SIZE_MATCH_V1 */ #safTopupPage #safTopupCard { height: 52px !important; min-height: 52px !important; max-height: 52px !important; padding-top: 4px !important; padding-bottom: 4px !important; } #safTopupPage .saf-crypto-content { align-items: center !important; } #safTopupPage .saf-crypto-wallet-icon { margin-top: 0 !important; } #safTopupPage .saf-crypto-text { gap: 0 !important; } #safTopupPage .saf-crypto-name { line-height: 17px !important; } #safTopupPage .saf-crypto-status { line-height: 15px !important; } /* SAF_CRYPTO_ALIGNMENT_V1 */ #safTopupPage #safTopupCard { display: flex !important; justify-content: center !important; align-items: center !important; height: 52px !important; min-height: 52px !important; max-height: 52px !important; } #safTopupPage #safTopupCard .saf-crypto-content { display: inline-flex !important; flex-direction: row !important; justify-content: center !important; align-items: center !important; gap: 10px !important; } #safTopupPage #safTopupCard .saf-crypto-wallet-icon { width: 23px !important; height: 23px !important; flex: 0 0 23px !important; margin: 0 !important; } #safTopupPage #safTopupCard .saf-crypto-text { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 0 !important; } #safTopupPage #safTopupCard .saf-crypto-name { font-size: 14px !important; font-weight: 700 !important; line-height: 20px !important; white-space: nowrap !important; } /* SAF_BANK_CARD_ACTIVE_DOT_V1 */ #safTopupPage #safTopupBankCard { position: relative !important; } #safTopupPage #safTopupBankCard::after { content: "" !important; display: none !important; } #safTopupPage #safTopupBankCard.active::after { content: "" !important; display: block !important; position: absolute !important; top: 9px !important; right: 9px !important; width: 8px !important; height: 8px !important; border-radius: 50% !important; background: #20e582 !important; box-shadow: 0 0 8px rgba(32,229,130,.35) !important; pointer-events: none !important; } /* SAF_BANK_CARD_LIGHT_DOT_V1 */ /* Светлая тема: графитовая точка */ html[data-theme="light"] body #safTopupPage #safTopupBankCard.active::after, body.light #safTopupPage #safTopupBankCard.active::after, body.light-theme #safTopupPage #safTopupBankCard.active::after { content: "" !important; display: block !important; background: #343b37 !important; box-shadow: none !important; width: 8px !important; height: 8px !important; border-radius: 50% !important; top: 9px !important; right: 9px !important; } /* Неактивная карта: точку скрываем */ #safTopupPage #safTopupBankCard:not(.active)::after { display: none !important; } /* SAF_BANK_CARD_LIGHT_SELECTED_V2 */ /* Только светлая тема: выбранная банковская карта */ html[data-theme="light"] body #safTopupPage #safTopupBankCard.active, body.light #safTopupPage #safTopupBankCard.active, body.light-theme #safTopupPage #safTopupBankCard.active { background: #e2e7e4 !important; background-image: none !important; border: 1px solid #aebbb3 !important; color: #343b37 !important; box-shadow: inset 0 0 0 1px rgba(52,59,55,.06) !important; } /* Иконка и текст */ html[data-theme="light"] body #safTopupPage #safTopupBankCard.active svg, body.light #safTopupPage #safTopupBankCard.active svg, body.light-theme #safTopupPage #safTopupBankCard.active svg { color: #343b37 !important; stroke: currentColor !important; } /* Графитовая точка выбранного способа оплаты */ html[data-theme="light"] body #safTopupPage #safTopupBankCard.active::after, body.light #safTopupPage #safTopupBankCard.active::after, body.light-theme #safTopupPage #safTopupBankCard.active::after { background: #343b37 !important; box-shadow: none !important; } /* Неактивная карта сохраняет обычный вид */ #safTopupPage #safTopupBankCard:not(.active)::after { display: none !important; }