:root {
	color-scheme: light;
	--theme-menu-background: #ffffff;
	--theme-menu-element-background: #f2f7f9;
	--theme-menu-text: #000000;
	--theme-menu-muted-text: #6b7280;
}

@media (prefers-color-scheme: dark) {
	:root {
		color-scheme: dark;
		--theme-menu-background: #161920;
		--theme-menu-element-background: #000000;
		--theme-menu-text: #ffffff;
		--theme-menu-muted-text: #aeb4c0;
	}

	body {
		background: #161920;
	}

	.geoControl__btn,
	.menuControl__btn,
	.zoomControl__btn,
	.menuControl__btn:active,
	.menuControl__btn:focus,
	.zoomControl__btn:hover,
	.zoomControl__btn:active {
		background-color: #161920;
		border-color: #ffffff;
		color: #ffffff;
	}

	.geoControl__btn,
	.menuControl__btn,
	.zoomControl__btn {
		border: none;
	}

	.geoControl__btn {
		background-image: none;
		position: relative;
	}

	.geoControl__btn::after {
		content: '';
		position: absolute;
		inset: 0;
		background: #ffffff;
		mask: url('./icon/geolocation.svg') center / 45% no-repeat;
		-webkit-mask: url('./icon/geolocation.svg') center / 45% no-repeat;
	}

	.menuControl__btn {
		background-image: none;
	}

	.menuControl__btn::before {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 22px;
		height: 2px;
		background: #ffffff;
		box-shadow: 0 -7px #ffffff, 0 7px #ffffff;
		transform: translate(-50%, -50%);
	}

	#bottom-sheet.bottomSheet {
		background: var(--theme-menu-background);
	}

	#bottom-sheet .bottomSheet__account,
	#bottom-sheet .profileTabCard,
	#bottom-sheet .bottomSheetCard {
		background: var(--theme-menu-element-background);
	}

	#bottom-sheet .bottomSheetCard {
		border-radius: 12px;
		padding: 14px 16px;
	}

	#bottom-sheet .bottomSheet__cardsStack > .bottomSheetCard + .bottomSheetCard {
		margin-top: 8px;
	}

	#bottom-sheet .bottomSheetCard__iconWrap {
		background: transparent;
	}

	#bottom-sheet .bottomSheet__accountName,
	#bottom-sheet .bottomSheet__accountPhone,
	#bottom-sheet .bottomSheetCard__label,
	#bottom-sheet .profileTabRow__label,
	#bottom-sheet .profileTabRow__value,
	#bottom-sheet .supportMenu__title {
		color: var(--theme-menu-text);
	}

	#bottom-sheet .bottomSheet__version {
		color: var(--theme-menu-muted-text);
	}

	#payments-sheet.bottomSheet,
	#take-payments-sheet.bottomSheet,
	#documents-sheet.bottomSheet,
	#support-sheet.bottomSheet,
	#tariff-sheet.bottomSheet,
	#station-sheet.bottomSheet,
	#take-power-sheet.bottomSheet,
	.nameEditor,
	.historyView,
	.historyDetailsView,
	.logoutConfirm__card {
		background: #161920;
		color: #ffffff;
	}

	#payments-sheet .bottomSheet__content,
	#take-payments-sheet .bottomSheet__content,
	#documents-sheet .bottomSheet__content,
	#support-sheet .bottomSheet__content,
	#tariff-sheet .bottomSheet__content,
	#station-sheet .bottomSheet__content.stationSheet__content,
	#take-power-sheet .bottomSheet__content,
	.historyView__body,
	.historyDetailsView__body {
		background: #161920;
	}

	#payments-sheet .supportMenu__title,
	#take-payments-sheet .supportMenu__title,
	#documents-sheet .supportMenu__title,
	#support-sheet .supportMenu__title,
	#tariff-sheet .supportMenu__title,
	#payments-sheet .bottomSheet__docButton,
	#take-payments-sheet .bottomSheet__docButton,
	#documents-sheet .bottomSheet__docButton,
	#support-sheet .bottomSheet__docButton,
	#tariff-sheet .bottomSheet__docButton,
	.paymentsLoader__title,
	.supportMenu__cardLabel,
	.supportMenu__problemText,
	.historyView__title,
	.historyDetailsView__title,
	.historySection,
	.historyDetailsView__sectionTitle,
	.nameEditor__title,
	.logoutConfirm__title,
	.logoutConfirm__text {
		color: #ffffff;
	}

	#payments-sheet .supportMenu__closeX,
	#payments-sheet .supportMenu__back,
	#take-payments-sheet .supportMenu__closeX,
	#take-payments-sheet .supportMenu__back,
	#documents-sheet .supportMenu__closeX,
	#documents-sheet .supportMenu__back,
	#support-sheet .supportMenu__closeX,
	#support-sheet .supportMenu__back,
	#tariff-sheet .supportMenu__closeX,
	#tariff-sheet .supportMenu__back,
	.nameEditor__back,
	.historyView__back,
	.historyDetailsView__back,
	.logoutConfirm__cancel,
	#bottom-sheet .supportMenu__closeX,
	#bottom-sheet .supportMenu__back,
	#bottom-sheet .profileTabLogoutBtn {
		background: #000000;
		color: #ffffff;
	}

	.supportMenu__closeX path {
		stroke: #ffffff;
	}

	.supportMenu__back img,
	.nameEditor__back img,
	.historyView__back img,
	.historyDetailsView__back img {
		filter: brightness(0) invert(1);
	}

	#bottom-sheet .profileTabLogoutBtn__label {
		color: #ffffff;
	}

	.paymentMethodItem,
	.bottomSheet__paymentAddCard,
	.supportMenu__card,
	.supportMenu__copyBtn,
	.bottomSheet__supportClose,
	.historyItem,
	.historyView__pageBtn {
		background: #000000;
		color: #ffffff;
	}

	.paymentMethodItem__label,
	.paymentAddCard__label,
	.bottomSheet__supportLabel,
	.historyItem__number,
	.historyItem__amount,
	.historyDetailsView__value {
		color: #ffffff;
	}

	.paymentsLoader,
	.paymentsLoader__subtitle,
	.historyItem__date,
	.historyView__pageLabel,
	.historyView__empty,
	.historyView__loader,
	.historyDetailsView__subtitle,
	.historyDetailsView__label,
	.bottomSheet__docButtonArrow {
		color: #aeb4c0;
	}

	.historyView__topBar,
	.historyDetailsView__topBar {
		background: rgba(22, 25, 32, 0.92);
		border-color: #2a2e38;
	}

	.historyDetailsView__section,
	.historyView__pagination {
		border-color: #2a2e38;
	}

	.nameEditor__input {
		background: #161920;
		border-color: #2a2e38;
		color: #ffffff;
	}

	#station-sheet .stationSheet__footer {
		background: #161920;
	}

	#station-sheet.stationSheet--peek::after {
		background: linear-gradient(to bottom, transparent, rgba(22, 25, 32, 0.95));
	}

	#station-sheet .stationSheet__footer::before {
		background: #2a2e38;
	}

	#station-sheet .stationSheet__inventory,
	#station-sheet .stationSheet__inventoryRow + .stationSheet__inventoryRow,
	#station-sheet .stationSheet__tariffRow,
	#station-sheet .stationSheet__howList li:not(:last-child) {
		border-color: #2a2e38;
	}

	#station-sheet .stationSheet__iconBtn,
	#station-sheet .stationSheet__errorBannerIcon {
		background: #000000;
	}

	#station-sheet .stationSheet__inventory--loading .stationSheet__inventoryRow::after,
	#station-sheet .stationSheet__inventoryValue--skeleton {
		background: linear-gradient(90deg, #20242d 25%, #2a2e38 50%, #20242d 75%);
		background-size: 200% 100%;
	}

	#station-sheet .stationSheet__stationNumber,
	#station-sheet .stationSheet__placeName,
	#station-sheet .stationSheet__inventoryLabel,
	#station-sheet .stationSheet__inventoryValue,
	#station-sheet .stationSheet__tariffRowLabel,
	#station-sheet .stationSheet__tariffRowValue,
	#station-sheet .tariff-price-promo,
	#station-sheet .stationSheet__howItWorks,
	#take-power-sheet .takePower__tariffLabel,
	#take-power-sheet .takePower__tariffPrice,
	#take-power-sheet .takePower__cardLabel,
	#take-power-sheet .takePower__tariffTitle {
		color: #ffffff;
	}

	#station-sheet .stationSheet__placeAddress,
	#station-sheet .stationSheet__placeAddressDot,
	#take-power-sheet .takePower__hint,
	#take-power-sheet .takePower__tariffLink,
	#take-power-sheet .takePower__terms,
	#take-power-sheet .takePower__termsLink,
	#take-power-sheet .takePower__tariffList,
	#take-power-sheet .takePower__cardArrow {
		color: #aeb4c0;
	}

	#take-power-sheet .takePower__tariff,
	#take-power-sheet .takePower__cardRow {
		background: #000000;
	}

	#station-sheet .stationSheet__closeBtn {
		background-color: #161920;
		border: none;
		background-image: none;
	}

	#station-sheet .stationSheet__closeBtn::before {
		content: '';
		position: absolute;
		inset: 0;
		background: #ffffff;
		mask: url('./icon/strelka.svg') center / 38% no-repeat;
		-webkit-mask: url('./icon/strelka.svg') center / 38% no-repeat;
	}
}