/* ===== Modern Crypto/AI/Flat Design Theme - v2.1 ===== */

/* Override Bootstrap variables */
:root {
	--bs-body-bg: #000000 !important;
	--bs-body-color: #e6eaf0 !important;
	--bs-border-color: #1a1a1a !important;
	--bs-link-color: #8ab4f8 !important;
	--bs-link-hover-color: #22d3ee !important;
}

:root {
	--bg: #000000;
	--surface: #0b0b0b;
	--surface-light: #151515;
	--border: #1a1a1a;
	--text: #e6eaf0;
	--text-muted: #9aa3af;
	--accent: #8ab4f8;
	--accent-2: #22d3ee;
	--accent-soft: rgba(var(--accent-rgb), 0.12);
	--success: #10b981;
	--success-soft: rgba(16, 185, 129, 0.12);
	--danger: #ef4444;
	--warning: #f59e0b;
	--warning-soft: rgba(245, 158, 11, 0.12);
	--shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
	--shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);
}

/* ===== Exchange Confirm Page - Creative Design ===== */

/* Animated Icon */
.confirm-icon-wrapper {
	width: 80px;
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.15), rgba(var(--accent-2-rgb), 0.15));
	border-radius: 50%;
	animation: iconPulse 3s ease-in-out infinite;
	position: relative;
}

.confirm-icon-wrapper::before {
	content: '';
	position: absolute;
	inset: -5px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--accent), var(--accent-2));
	opacity: 0.3;
	filter: blur(10px);
	animation: iconGlow 3s ease-in-out infinite;
}

.confirm-icon {
	color: var(--accent);
	position: relative;
	z-index: 1;
	animation: iconRotate 10s linear infinite;
}

@keyframes iconPulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.05); }
}

@keyframes iconGlow {
	0%, 100% { opacity: 0.3; }
	50% { opacity: 0.6; }
}

@keyframes iconRotate {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

/* Exchange Flow */
.exchange-flow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2rem;
	flex-wrap: wrap;
	margin-bottom: 2rem;
}

.exchange-flow-card {
	position: relative;
	background: linear-gradient(135deg, rgba(11, 11, 11, 0.95), rgba(20, 20, 25, 0.98));
	border: 1px solid rgba(var(--accent-rgb), 0.25);
	border-radius: 20px;
	padding: 2rem 1.5rem;
	min-width: 280px;
	max-width: 320px;
	text-align: center;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
	animation: cardFloat 6s ease-in-out infinite;
	transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
	overflow: hidden;
}

.exchange-flow-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.1), transparent);
	transition: left 0.6s ease;
}

.exchange-flow-card:hover::before {
	left: 100%;
}

.exchange-flow-card:hover {
	transform: translateY(-8px) scale(1.02);
	border-color: rgba(var(--accent-rgb), 0.5);
	box-shadow: 0 12px 48px rgba(var(--accent-rgb), 0.2);
}

.card-float-1 {
	animation-delay: 0s;
}

.card-float-2 {
	animation-delay: 3s;
}

@keyframes cardFloat {
	0%, 100% { transform: translateY(0px); }
	50% { transform: translateY(-10px); }
}

.exchange-flow-icon {
	width: 56px;
	height: 56px;
	margin: 0 auto 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(var(--accent-rgb), 0.1);
	border-radius: 14px;
	color: var(--accent);
	animation: iconBounce 2s ease-in-out infinite;
}

@keyframes iconBounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-5px); }
}

.exchange-flow-title {
	font-size: 0.875rem;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 1rem;
	font-weight: 600;
}

.exchange-flow-content {
	position: relative;
	z-index: 1;
}

.exchange-flow-content img {
	width: 48px !important;
	height: 48px !important;
	border-radius: 50% !important;
	object-fit: cover;
	border: 2px solid rgba(var(--accent-rgb), 0.2);
	transition: all 0.3s ease;
	display: block;
	margin: 0 auto 0.75rem;
}

.exchange-flow-card:hover .exchange-flow-content img {
	border-color: rgba(var(--accent-rgb), 0.5);
	transform: scale(1.1);
}

.exchange-flow-currency {
	font-size: 1.125rem;
	color: var(--text);
	font-weight: 600;
	margin-bottom: 0.5rem;
	display: block;
}

.exchange-flow-amount {
	font-size: 1.5rem;
	color: var(--accent);
	font-weight: 700;
	background: linear-gradient(135deg, var(--accent), var(--accent-2));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	display: block;
	line-height: 1.2;
}

.exchange-arrow-animated {
	color: var(--accent);
	animation: arrowPulse 2s ease-in-out infinite;
}

@keyframes arrowPulse {
	0%, 100% { 
		opacity: 0.5; 
		transform: translateX(0) scale(1);
	}
	50% { 
		opacity: 1; 
		transform: translateX(10px) scale(1.1);
	}
}

/* Details Grid */
.details-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 1rem;
}

.detail-card {
	background: linear-gradient(135deg, rgba(11, 11, 11, 0.8), rgba(15, 15, 18, 0.9));
	border: 1px solid rgba(var(--accent-rgb), 0.15);
	border-radius: 16px;
	padding: 1.25rem;
	transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
	animation: detailSlideIn 0.5s ease-out backwards;
	position: relative;
	overflow: hidden;
}

.detail-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.1), transparent);
	transition: left 0.5s ease;
}

.detail-card:hover {
	transform: translateY(-4px);
	border-color: rgba(var(--accent-rgb), 0.4);
	box-shadow: 0 8px 24px rgba(var(--accent-rgb), 0.15);
}

.detail-card:hover::before {
	left: 100%;
}

@keyframes detailSlideIn {
	from {
		opacity: 0;
		transform: translateX(-20px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.detail-label {
	font-size: 0.8125rem;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 0.5rem;
	font-weight: 500;
}

.detail-value {
	font-size: 1rem;
	color: var(--text);
	font-weight: 600;
	word-break: break-word;
}

/* Custom Alert */
.alert-custom {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1.5rem;
	background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(245, 158, 11, 0.05));
	border: 2px solid rgba(245, 158, 11, 0.3);
	border-radius: 16px;
	animation: alertSlideDown 0.6s ease-out 0.8s backwards;
	position: relative;
	overflow: hidden;
}

.alert-custom::before {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: radial-gradient(circle, rgba(245, 158, 11, 0.1) 0%, transparent 70%);
	animation: alertPulseWave 4s ease-in-out infinite;
}

@keyframes alertPulseWave {
	0%, 100% { transform: scale(0.8); opacity: 0; }
	50% { transform: scale(1.2); opacity: 0.3; }
}

@keyframes alertSlideDown {
	from {
		opacity: 0;
		transform: translateY(-30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.alert-icon-wrapper {
	width: 48px;
	height: 48px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(245, 158, 11, 0.2);
	border-radius: 12px;
	color: #f59e0b;
	position: relative;
	z-index: 1;
}

.pulse-animation {
	animation: alertIconPulse 2s ease-in-out infinite;
}

@keyframes alertIconPulse {
	0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); }
	50% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(245, 158, 11, 0); }
}

.alert-content {
	flex: 1;
	position: relative;
	z-index: 1;
}

.alert-title {
	font-size: 1.125rem;
	font-weight: 700;
	color: #f59e0b;
	margin-bottom: 0.5rem;
}

.alert-text {
	font-size: 0.9375rem;
	color: var(--text);
	line-height: 1.6;
}

/* Action Buttons */
.action-buttons {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1rem;
	animation: buttonsSlideUp 0.6s ease-out 1s backwards;
}

@keyframes buttonsSlideUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.action-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 1.25rem 2rem;
	border-radius: 14px;
	font-size: 1.0625rem;
	font-weight: 600;
	text-decoration: none;
	border: none;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
	position: relative;
	overflow: hidden;
}

.action-btn::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.1), transparent);
	transform: translateX(-100%);
	transition: transform 0.6s ease;
}

.action-btn:hover::before {
	transform: translateX(100%);
}

.action-btn-confirm {
	background: linear-gradient(135deg, var(--accent), var(--accent-2));
	color: #ffffff;
	box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.3);
}

.action-btn-confirm:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(var(--accent-rgb), 0.5);
}

.action-btn-cancel {
	background: transparent;
	color: #ef4444;
	border: 2px solid #ef4444;
	box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15);
}

.action-btn-cancel:hover {
	background: #ef4444;
	color: #ffffff;
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(239, 68, 68, 0.4);
}

.action-btn-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.3s ease;
}

.action-btn:hover .action-btn-icon {
	transform: scale(1.2) rotate(10deg);
}

.action-btn-text {
	font-weight: 600;
}

/* ===== Exchange Page Styles ===== */
.page-header {
	margin-bottom: 2rem;
}

.page-header h1 {
	display: flex;
	align-items: center;
	color: var(--text);
	font-weight: 700;
	margin: 0;
}

.exchange-notification {
	background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), rgba(var(--accent-2-rgb), 0.06));
	border: 1px solid rgba(var(--accent-rgb), 0.25);
	border-radius: 12px;
	padding: 1rem 1.25rem;
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	animation: slideDown 0.3s ease;
	box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.1);
}

.exchange-notification svg {
	color: var(--accent);
	flex-shrink: 0;
}

.exchange-notification div {
	color: var(--text);
	line-height: 1.6;
}

@keyframes slideDown {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.exchange-currency-block {
	background: rgba(11, 11, 11, 0.6);
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 1.5rem;
	transition: all 0.3s ease;
	/* Оптимизация для мобильной версии - убираем user-select: none чтобы не блокировать скролл */
	-webkit-user-select: text;
	user-select: text;
	-webkit-touch-callout: default;
	touch-action: pan-y;
}

.exchange-currency-block:hover {
	border-color: rgba(var(--accent-rgb), 0.3);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

/* На мобильной версии убираем hover эффекты и оптимизируем */
@media (max-width: 768px) {
	.exchange-currency-block {
		transition: none !important;
		-webkit-user-select: text !important;
		user-select: text !important;
		-webkit-touch-callout: default !important;
		touch-action: pan-y !important;
		/* КРИТИЧНО: Убираем все hover и active эффекты для контейнеров на мобильных */
		pointer-events: auto !important;
	}
	
	/* КРИТИЧНО: Полностью отключаем hover и active эффекты для контейнеров на мобильных */
	.exchange-currency-block:hover,
	.exchange-currency-block:active,
	.exchange-currency-block:focus {
		box-shadow: none !important;
		transform: none !important;
		border-color: var(--border) !important;
		background: rgba(11, 11, 11, 0.6) !important;
	}
	
	/* КРИТИЧНО: Убираем hover эффекты для всех контейнеров обмена */
	.exchange-amount:hover,
	.exchange-amount:active,
	.exchange-amount:focus,
	.exchange-block:hover,
	.exchange-block:active,
	.exchange-block:focus {
		box-shadow: none !important;
		transform: none !important;
		border-color: var(--border) !important;
		background: inherit !important;
		transition: none !important;
	}
	
	/* КРИТИЧНО: Убираем transition для всех контейнеров на мобильных */
	.exchange-amount,
	.exchange-block,
	.exchange-info-grid {
		transition: none !important;
	}
	
	/* КРИТИЧНО: Отключаем touch feedback для контейнеров (убирает подсвечивание при нажатии) */
	.exchange-currency-block,
	.exchange-amount,
	.exchange-block,
	.exchange-info-grid {
		-webkit-tap-highlight-color: transparent !important;
		tap-highlight-color: transparent !important;
	}
	
	/* КРИТИЧНО: Убираем синюю обводку (outline) с полей ввода и выпадающих списков на мобильных */
	input:focus,
	input:active,
	textarea:focus,
	textarea:active,
	select:focus,
	select:active,
	.form-control:focus,
	.form-control:active,
	.form-select:focus,
	.form-select:active,
	.custom-select-trigger:focus,
	.custom-select-trigger:active,
	.custom-select-search-input:focus,
	.custom-select-search-input:active,
	.custom-select-wrapper:focus,
	.custom-select-wrapper:active {
		outline: none !important;
		outline-width: 0 !important;
		outline-style: none !important;
		outline-color: transparent !important;
		-webkit-tap-highlight-color: transparent !important;
		-webkit-focus-ring-color: transparent !important;
		box-shadow: none !important;
	}
	
	/* КРИТИЧНО: Убираем outline для полей ввода суммы */
	.exchange-amount input:focus,
	.exchange-amount input:active,
	#swap-send-amount:focus,
	#swap-send-amount:active,
	#swap-receive-amount:focus,
	#swap-receive-amount:active,
	#bridge-send-amount:focus,
	#bridge-send-amount:active,
	#bridge-receive-amount:focus,
	#bridge-receive-amount:active,
	#dex-send-amount:focus,
	#dex-send-amount:active,
	#dex-receive-amount:focus,
	#dex-receive-amount:active {
		outline: none !important;
		outline-width: 0 !important;
		-webkit-tap-highlight-color: transparent !important;
		box-shadow: none !important;
		border-color: var(--border) !important;
	}
	
	/* КРИТИЧНО: Убираем outline для dropdown элементов */
	.custom-select-dropdown:focus,
	.custom-select-dropdown:active,
	.custom-select-options:focus,
	.custom-select-options:active {
		outline: none !important;
		outline-width: 0 !important;
		-webkit-tap-highlight-color: transparent !important;
	}
	
	/* КРИТИЧНО: Выпадающие списки, кнопки и поля ввода сохраняют анимации */
	/* Но без синей обводки на мобильных */
}

.exchange-currency-header {
	display: flex;
	align-items: center;
}

.exchange-currency-header h5 {
	color: var(--text);
	font-weight: 600;
	margin: 0;
}

.exchange-info-pair {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.exchange-info-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.5rem 0.75rem;
	background: rgba(var(--accent-rgb), 0.04);
	border: 1px solid rgba(var(--accent-rgb), 0.1);
	border-radius: 8px;
}

.exchange-info-label {
	color: var(--text-muted);
	font-size: 0.875rem;
}

.exchange-info-value {
	color: var(--accent);
	font-weight: 600;
	font-size: 0.9375rem;
}

.options-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1rem;
}

.option-card {
	background: rgba(11, 11, 11, 0.5);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 1rem 1.25rem;
	transition: all 0.2s ease;
}

.option-card:hover {
	border-color: rgba(var(--accent-rgb), 0.3);
	background: rgba(11, 11, 11, 0.7);
}

.option-card-highlight {
	border-color: rgba(var(--accent-rgb), 0.6);
	background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.14), rgba(var(--accent-rgb), 0.05));
	box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.35), 0 6px 20px rgba(var(--accent-rgb), 0.18);
}

.option-card-highlight:hover {
	border-color: rgba(var(--accent-rgb), 0.85);
	background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.2), rgba(var(--accent-rgb), 0.08));
}

@keyframes fastExchangePulse {
	0% { box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.35), 0 6px 20px rgba(var(--accent-rgb), 0.18); }
	50% { box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.7), 0 8px 28px rgba(var(--accent-rgb), 0.4); }
	100% { box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.35), 0 6px 20px rgba(var(--accent-rgb), 0.18); }
}

.option-card-highlight.fast-exchange-flash {
	animation: fastExchangePulse 0.9s ease-in-out 2;
}

.bg-accent-soft {
	background-color: var(--accent-soft) !important;
}

.text-accent {
	color: var(--accent) !important;
}

/* ===== Custom Toast Notification ===== */
.custom-toast {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 9999;
	min-width: 320px;
	max-width: 450px;
	background: var(--surface-light);
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 20px 24px;
	box-shadow: var(--shadow-lg);
	backdrop-filter: blur(10px);
	animation: slideInRight 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.custom-toast.toast-warning {
	border-left: 4px solid var(--warning);
	background: linear-gradient(135deg, var(--surface-light), rgba(245, 158, 11, 0.05));
}

.custom-toast.toast-error {
	border-left: 4px solid var(--danger);
	background: linear-gradient(135deg, var(--surface-light), rgba(239, 68, 68, 0.05));
}

.custom-toast.toast-success {
	border-left: 4px solid var(--success);
	background: linear-gradient(135deg, var(--surface-light), rgba(16, 185, 129, 0.05));
}

.custom-toast-icon {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.custom-toast-icon svg {
	width: 24px;
	height: 24px;
}

.custom-toast.toast-warning .custom-toast-icon {
	color: var(--warning);
}

.custom-toast.toast-error .custom-toast-icon {
	color: var(--danger);
}

.custom-toast.toast-success .custom-toast-icon {
	color: var(--success);
}

.custom-toast-content {
	flex: 1;
}

.custom-toast-title {
	font-weight: 600;
	font-size: 15px;
	margin-bottom: 4px;
	color: var(--text);
}

.custom-toast-message {
	font-size: 14px;
	color: var(--text-muted);
	line-height: 1.5;
}

.custom-toast-close {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	background: transparent;
	border: none;
	color: var(--text-muted);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	transition: all 0.2s ease;
}

.custom-toast-close:hover {
	background: rgba(255, 255, 255, 0.05);
	color: var(--text);
}

@keyframes slideInRight {
	from {
		transform: translateX(400px);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes slideOutRight {
	from {
		transform: translateX(0);
		opacity: 1;
	}
	to {
		transform: translateX(400px);
		opacity: 0;
	}
}

.custom-toast.hiding {
	animation: slideOutRight 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@media (max-width: 768px) {
	.custom-toast {
		left: 20px;
		right: 20px;
		min-width: auto;
		max-width: none;
	}
}

/* ===== Base ===== */
html, body {
	background-color: var(--bg) !important;
	background-image:
		radial-gradient(1000px 500px at -5% -5%, rgba(var(--accent-2-rgb), 0.09), transparent 65%),
		radial-gradient(900px 450px at 105% 10%, rgba(var(--accent-rgb), 0.11), transparent 65%) !important;
	background-attachment: fixed, fixed !important;
	background-repeat: no-repeat !important;
	color: var(--text) !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

body {
	padding-top: 25px !important;
	-moz-osx-font-smoothing: grayscale;
}

body {
	background: var(--bg) !important;
	min-height: 100vh !important;
}

* {
	box-sizing: border-box;
}

/* ===== Container: универсальная десктопная ширина =====
   Tailwind v4 по умолчанию делает .container с max-width равным самому
   брейкпоинту (то есть контейнер лепится к краям вьюпорта). Задаём:
     • max-width 1140px — уже чем типичный desktop-вьюпорт (1280/1440/1920),
       поэтому контейнер ВСЕГДА центрирован с авто-полями, без «лепки к краям»,
     • адаптивный padding clamp(1rem, 3vw, 2rem) — обеспечивает минимум
       16px gutter на мобилке и до 32px на широких экранах,
     • визуально одинаковая ширина контента на любом десктопном мониторе/зуме.
   Используем повышенную специфичность (html body .container + дубль с атрибутом
   класса), чтобы перебить любые правила из tailwind.css / inline-style из
   критических компонентов. */
.container,
html body .container,
html body div.container,
html body [class~="container"]:not(.container-fluid):not([class*="container-"]) {
	width: 100% !important;
	max-width: 1320px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: clamp(1rem, 2.2vw, 1.5rem) !important;
	padding-right: clamp(1rem, 2.2vw, 1.5rem) !important;
	box-sizing: border-box !important;
}

/* На больших экранах расширяем контейнер ещё, чтобы контент
   не выглядел зажатым. Padding тоже можно оставить скромным —
   воздух по краям создаёт сам viewport. */
@media (min-width: 1400px) {
	.container,
	html body .container,
	html body div.container,
	html body [class~="container"]:not(.container-fluid):not([class*="container-"]) {
		max-width: 1440px !important;
	}
}

@media (min-width: 1700px) {
	.container,
	html body .container,
	html body div.container,
	html body [class~="container"]:not(.container-fluid):not([class*="container-"]) {
		max-width: 1560px !important;
	}
}

/* ===== Typography ===== */
h1, .h1, .display-4, .display-5, .display-6 {
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.15;
}

h2, .h2 { font-weight: 700; letter-spacing: -0.015em; }
h3, .h3 { font-weight: 600; }
h4, .h4, h5, .h5 { font-weight: 600; }

p, .lead { line-height: 1.6; }
.text-muted, .text-muted * { color: var(--text-muted) !important; }

/* ===== Links ===== */
a {
	color: var(--accent) !important;
	text-decoration: none !important;
	transition: color 0.2s ease, transform 0.15s ease;
}
a:hover, a:focus {
	color: var(--accent-2) !important;
	text-decoration: none !important;
}

/* ===== Hero Section ===== */
.hero-section {
	background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), rgba(var(--accent-2-rgb), 0.06));
	border-radius: 24px;
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.06);
	position: relative;
	overflow: hidden;
	min-height: 280px;
}

.trustpilot-review-banner {
	position: relative;
	overflow: hidden;
	min-height: 140px;
	border-radius: 22px;
	border: 1px solid rgba(0, 182, 122, 0.22);
	background:
		radial-gradient(520px 180px at 8% 18%, rgba(0, 182, 122, 0.26), transparent 62%),
		radial-gradient(420px 180px at 96% 92%, rgba(var(--accent-rgb), 0.18), transparent 60%),
		linear-gradient(135deg, rgba(9, 13, 24, 0.96), rgba(14, 22, 39, 0.94));
	box-shadow: 0 22px 56px rgba(3, 8, 20, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.trustpilot-review-banner__glow {
	position: absolute;
	inset: -1px;
	background:
		linear-gradient(90deg, rgba(0, 182, 122, 0), rgba(0, 182, 122, 0.24), rgba(0, 182, 122, 0)),
		repeating-linear-gradient(110deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 18px);
	opacity: 0.75;
	pointer-events: none;
}

.trustpilot-review-banner__content {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.4vw, 1.75rem);
	min-height: 140px;
	padding: clamp(1rem, 2.4vw, 1.45rem) clamp(1.1rem, 3vw, 2rem);
}

.trustpilot-review-banner__mark {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(54px, 7vw, 72px);
	height: clamp(54px, 7vw, 72px);
	border-radius: 20px;
	background: linear-gradient(135deg, rgba(0, 182, 122, 0.96), rgba(0, 150, 102, 0.88));
	box-shadow: 0 18px 36px rgba(0, 182, 122, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.26);
	color: #ffffff;
	font-size: clamp(1.55rem, 3vw, 2.15rem);
	line-height: 1;
}

.trustpilot-review-banner__text {
	min-width: 0;
	flex: 1 1 auto;
	text-align: left;
}

.trustpilot-review-banner__eyebrow {
	display: inline-flex;
	align-items: center;
	margin-bottom: 0.4rem;
	padding: 0.22rem 0.62rem;
	border-radius: 999px;
	border: 1px solid rgba(0, 182, 122, 0.24);
	background: rgba(0, 182, 122, 0.1);
	color: rgba(170, 255, 224, 0.92);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.trustpilot-review-banner__title {
	margin: 0 0 0.35rem;
	color: #ffffff;
	font-size: clamp(1.05rem, 2.4vw, 1.45rem);
	font-weight: 760;
	line-height: 1.18;
	letter-spacing: -0.02em;
}

.trustpilot-review-banner__description {
	margin: 0;
	max-width: 660px;
	color: rgba(226, 232, 240, 0.74);
	font-size: clamp(0.84rem, 1.5vw, 0.96rem);
	line-height: 1.5;
}

.trustpilot-review-banner__actions {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 0.65rem;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.trustpilot-review-banner__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	min-height: 42px;
	padding: 0.7rem 1rem;
	border-radius: 12px;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-decoration: none;
	white-space: nowrap;
	transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.trustpilot-review-banner__btn:hover {
	transform: translateY(-1px);
	text-decoration: none;
}

.trustpilot-review-banner__btn--primary {
	border: 1px solid rgba(0, 182, 122, 0.5);
	background: linear-gradient(135deg, #00b67a, #009b68);
	color: #07120d;
	box-shadow: 0 12px 24px rgba(0, 182, 122, 0.22);
}

.trustpilot-review-banner__btn--primary:hover {
	color: #03100a;
	box-shadow: 0 16px 30px rgba(0, 182, 122, 0.3);
}

.trustpilot-review-banner__btn--ghost {
	border: 1px solid rgba(var(--accent-rgb), 0.24);
	background: rgba(255, 255, 255, 0.055);
	color: rgba(235, 242, 255, 0.9);
}

.trustpilot-review-banner__btn--ghost:hover {
	border-color: rgba(var(--accent-rgb), 0.44);
	background: rgba(var(--accent-rgb), 0.12);
	color: #ffffff;
}
.telegram-channel-banner {
	position: relative;
	overflow: hidden;
	min-height: 140px;
	border-radius: 22px;
	border: 1px solid rgba(42, 171, 238, 0.28);
	background:
		radial-gradient(480px 180px at 10% 12%, rgba(42, 171, 238, 0.28), transparent 64%),
		radial-gradient(380px 160px at 94% 88%, rgba(255, 176, 32, 0.16), transparent 58%),
		linear-gradient(135deg, rgba(8, 16, 28, 0.96), rgba(10, 22, 38, 0.94));
	box-shadow: 0 22px 56px rgba(3, 8, 20, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.telegram-channel-banner__glow {
	position: absolute;
	inset: -1px;
	background:
		linear-gradient(90deg, rgba(42, 171, 238, 0), rgba(42, 171, 238, 0.22), rgba(42, 171, 238, 0)),
		repeating-linear-gradient(-70deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 16px);
	opacity: 0.8;
	pointer-events: none;
}

.telegram-channel-banner__content {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.4vw, 1.75rem);
	min-height: 140px;
	padding: clamp(1rem, 2.4vw, 1.45rem) clamp(1.1rem, 3vw, 2rem);
}

.telegram-channel-banner__mark {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(54px, 7vw, 72px);
	height: clamp(54px, 7vw, 72px);
	border-radius: 999px;
	background: linear-gradient(135deg, #2AABEE, #1C93D1);
	box-shadow: 0 18px 36px rgba(42, 171, 238, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.28);
	color: #ffffff;
}

.telegram-channel-banner__text {
	min-width: 0;
	flex: 1 1 auto;
	text-align: left;
}

.telegram-channel-banner__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin-bottom: 0.4rem;
	padding: 0.18rem 0.55rem 0.18rem 0.18rem;
	border-radius: 999px;
	border: 1px solid rgba(42, 171, 238, 0.28);
	background: rgba(42, 171, 238, 0.1);
	color: rgba(186, 230, 255, 0.94);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.telegram-channel-banner__reward {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.1rem;
	padding: 0.18rem 0.42rem;
	border-radius: 999px;
	background: linear-gradient(135deg, #ffb020, #f59e0b);
	color: #1a1204;
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	box-shadow: 0 8px 18px rgba(255, 176, 32, 0.22);
}

.telegram-channel-banner__title {
	margin: 0 0 0.35rem;
	color: #ffffff;
	font-size: clamp(1.05rem, 2.4vw, 1.45rem);
	font-weight: 760;
	line-height: 1.18;
	letter-spacing: -0.02em;
}

.telegram-channel-banner__description {
	margin: 0;
	max-width: 660px;
	color: rgba(226, 232, 240, 0.74);
	font-size: clamp(0.84rem, 1.5vw, 0.96rem);
	line-height: 1.5;
}

.telegram-channel-banner__actions {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 0.65rem;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.telegram-channel-banner__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	min-height: 42px;
	padding: 0.7rem 1rem;
	border-radius: 12px;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-decoration: none;
	white-space: nowrap;
	transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.telegram-channel-banner__btn:hover {
	transform: translateY(-1px);
	text-decoration: none;
}

.telegram-channel-banner__btn--primary {
	border: 1px solid rgba(42, 171, 238, 0.55);
	background: linear-gradient(135deg, #2AABEE, #1C93D1);
	color: #041018;
	box-shadow: 0 12px 24px rgba(42, 171, 238, 0.24);
}

.telegram-channel-banner__btn--primary:hover {
	color: #02080d;
	box-shadow: 0 16px 30px rgba(42, 171, 238, 0.32);
}

.telegram-channel-banner__btn--ghost {
	border: 1px solid rgba(255, 176, 32, 0.28);
	background: rgba(255, 255, 255, 0.05);
	color: rgba(235, 242, 255, 0.9);
}

.telegram-channel-banner__btn--ghost:hover {
	border-color: rgba(255, 176, 32, 0.5);
	background: rgba(255, 176, 32, 0.12);
	color: #ffffff;
}



.spline-disclaimer-section {
	position: relative;
	border-radius: 24px;
	overflow: hidden;
	min-height: 150px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(7, 10, 18, 0.92);
}

.spline-disclaimer-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0.4;
	pointer-events: none;
}

.spline-disclaimer-bg spline-viewer {
	width: 100%;
	height: 100%;
	display: block;
}

.spline-disclaimer-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(5, 8, 15, 0.85), rgba(7, 11, 22, 0.7));
	backdrop-filter: blur(14px);
	z-index: 1;
}

.spline-disclaimer-card {
	position: relative;
	z-index: 2;
	padding: clamp(1rem, 2.5vw, 1.75rem);
	color: #f4f7ff;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	max-width: 560px;
}

.disclaimer-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.35rem 1rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.75rem;
	font-weight: 700;
	color: #ff9f43;
}

.disclaimer-badge .badge-dot {
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 50%;
	background: #ff9f43;
	display: inline-block;
	box-shadow: 0 0 12px rgba(255, 159, 67, 0.6);
}

.disclaimer-header {
	font-size: 0.95rem;
	color: rgba(244, 247, 255, 0.9);
	margin: 0;
	line-height: 1.4;
}

.disclaimer-rule {
	display: flex;
	gap: 0.45rem;
	font-size: 0.9rem;
	line-height: 1.35;
	color: rgba(233, 236, 249, 0.92);
	margin: 0;
}

.disclaimer-rule span {
	font-weight: 700;
	color: #ff9f43;
	flex: 0 0 auto;
}

@media (max-width: 768px) {
	.trustpilot-review-banner {
		min-height: auto;
		border-radius: 18px;
	}

	.trustpilot-review-banner__content {
		flex-direction: column;
		align-items: flex-start;
		min-height: auto;
		padding: 1.1rem;
	}

	.trustpilot-review-banner__mark {
		width: 50px;
		height: 50px;
		border-radius: 16px;
	}

	.trustpilot-review-banner__actions {
		width: 100%;
		justify-content: stretch;
	}

	.trustpilot-review-banner__btn {
		flex: 1 1 100%;
		width: 100%;
	}

	.telegram-channel-banner {
		min-height: auto;
		border-radius: 18px;
	}

	.telegram-channel-banner__content {
		flex-direction: column;
		align-items: flex-start;
		min-height: auto;
		padding: 1.1rem;
	}

	.telegram-channel-banner__mark {
		width: 50px;
		height: 50px;
	}

	.telegram-channel-banner__actions {
		width: 100%;
		justify-content: stretch;
	}

	.telegram-channel-banner__btn {
		flex: 1 1 100%;
		width: 100%;
	}

	.spline-disclaimer-section {
		border-radius: 18px;
		min-height: 140px;
	}

	.spline-disclaimer-card {
		padding: 1rem;
	}

	.disclaimer-rule {
		flex-direction: row;
	}
}

/* Spline 3D Background */
.hero-spline-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	opacity: 0.4;
	pointer-events: none;
	/* Изолируем Spline от основного потока рендеринга */
	contain: layout style paint;
	isolation: isolate;
	/* Низкий приоритет рендеринга */
	will-change: auto;
	/* Оптимизация для GPU */
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
}

.hero-spline-bg spline-viewer {
	width: 100%;
	height: 100%;
	display: block;
	/* Изолируем Spline viewer от основного потока */
	contain: layout style paint;
	isolation: isolate;
	/* Низкий приоритет рендеринга - не блокирует Navbar */
	will-change: auto;
	/* Оптимизация для GPU */
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
	/* Отключаем композитинг слоев для экономии ресурсов */
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	/* Отключаем композитинг слоев для экономии ресурсов */
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	width: 100%;
	height: 100%;
	display: block;
}

.hero-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6));
	z-index: 1;
	pointer-events: none;
}

.hero-glow {
	position: absolute;
	top: -50%;
	left: 50%;
	transform: translateX(-50%);
	width: 150%;
	height: 200%;
	background: radial-gradient(circle, rgba(var(--accent-rgb), 0.15), transparent 60%);
	animation: glow-pulse 8s ease-in-out infinite;
	pointer-events: none;
	z-index: 0;
}

@keyframes glow-pulse {
	0%, 100% { opacity: 0.5; transform: translateX(-50%) scale(1); }
	50% { opacity: 0.8; transform: translateX(-50%) scale(1.05); }
}

.hero-content {
	position: relative;
	z-index: 2;
}

.hero-title {
	font-size: 2.25rem;
	background: linear-gradient(135deg, var(--text), var(--accent));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	display: inline-block;
	margin-bottom: 0.75rem;
}

.hero-subtitle {
	font-size: 1.125rem;
	color: var(--text-muted);
	max-width: 600px;
	margin: 0 auto 1.25rem;
}

/* ==========================================================================
   Hero trading-chart background.

   Две копии SVG внутри .hero-chart-track лежат бок о бок, трек
   сдвигается на -50% за цикл — получается бесшовная бесконечная
   прокрутка. z-index 0, чтобы график лежал над градиентной подложкой,
   но под затемнением текста. Линия цены подсвечена drop-shadow, у
   маркеров пробоев — мягкое свечение соответствующего цвета.
   ========================================================================== */

.hero-chart {
	z-index: 0;
	overflow: hidden;
	opacity: 0.92;
}

/* Трек повёрнут на -12° и расширен по высоте (200%), а `top: -75%`
   смещает его вверх так, что основная активная зона линии цены
   попадает в верхнюю треть секции. Пики зигзагов, оказавшиеся выше
   верхней кромки, обрезаются — визуально это работает как «окно»
   живого терминала, где исторические максимумы ушли за пределы
   текущего отображения. Нижняя часть секции отдана под область
   заливки, которая эффектно растворяется к низу.

   Поворот применяется ПОСЛЕ translate: в CSS-матрице transforms
   пишутся в порядке применения, поэтому `rotate(-12deg) translate(-50%, 0)`
   означает «сначала сдвиг, потом поворот». Трансляция идёт по оси X
   ВНУТРИ уже повёрнутой системы координат — визуально получается
   диагональное движение: старые свечи уплывают влево-вниз, новые
   приходят из правого верхнего угла. */
.hero-chart-track {
	position: absolute;
	top: -75%;
	left: 0;
	display: flex;
	width: 200%;
	height: 200%;
	transform-origin: 50% 50%;
	animation: hero-chart-scroll 55s linear infinite;
	will-change: transform;
}

.hero-chart-svg {
	flex: 0 0 50%;
	width: 50%;
	height: 100%;
	display: block;
}

.hero-chart-svg .hero-chart-line {
	stroke-width: 2.5;
	filter: drop-shadow(0 0 5px rgba(var(--accent-2-rgb), 0.7));
}

@keyframes hero-chart-scroll {
	from { transform: rotate(-12deg) translate3d(0, 0, 0); }
	to   { transform: rotate(-12deg) translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.hero-chart-track {
		animation: none;
		transform: rotate(-12deg) translate3d(0, 0, 0);
	}
}

/* Keyframes для мобильной версии трека графика.
   Объявлены на топ-уровне (не внутри @media), чтобы браузер
   гарантированно подхватил определения — вложенные @keyframes
   внутри @media ненадёжны кроссбраузерно. Наклон меньше, чем
   на десктопе (-6deg вместо -12deg), смещение по Y центрирует
   трек по вертикали относительно секции. */
@keyframes hero-chart-scroll-mobile {
	from { transform: translate3d(0, -50%, 0) rotate(-6deg); }
	to   { transform: translate3d(-50%, -50%, 0) rotate(-6deg); }
}

/* Для совсем узких экранов — ещё меньший наклон, чтобы график
   не уходил острым углом за пределы секции. */
@keyframes hero-chart-scroll-mobile-xs {
	from { transform: translate3d(0, -50%, 0) rotate(-3deg); }
	to   { transform: translate3d(-50%, -50%, 0) rotate(-3deg); }
}

/* ---- Hero-chart на мобильных/планшетах ----
   На десктопе секция широкая и низкая (~1200×280), трек `width: 200%;
   height: 200%` отлично работает: SVG с preserveAspectRatio="none"
   растягивается горизонтально и не теряет форму. Но на мобильных
   секция узкая и ВЫСОКАЯ (min-height: 400px на <=768px), поэтому
   трек 200% высоты → SVG 800px в высоту при ~360px ширине, и
   зигзаги вытягиваются в узкие острые пики — «график сжимается».

   Фикс: на мобильных прижимаем трек к фиксированному aspect-ratio
   6:1 (две SVG по viewBox 600×200 = 1200×200 = 6:1), центрируем
   вертикально через top: 50% + translateY(-50%) в keyframes,
   уменьшаем наклон (чище выглядит на узких экранах). */
@media (max-width: 991px) {
	.hero-chart-track {
		top: 50%;
		height: auto;
		aspect-ratio: 6 / 1;
		transform-origin: 50% 50%;
		animation: hero-chart-scroll-mobile 45s linear infinite;
	}

	.hero-chart-svg {
		height: 100%;
	}
}

@media (max-width: 991px) and (prefers-reduced-motion: reduce) {
	.hero-chart-track {
		animation: none;
		transform: translate3d(0, -50%, 0) rotate(-6deg);
	}
}

/* На совсем узких экранах (<=480px) ещё сильнее уменьшаем наклон
   и слегка приглушаем прозрачность, чтобы текст занял центральное
   место, а график оставался декоративным фоном без конкуренции. */
@media (max-width: 480px) {
	.hero-chart {
		opacity: 0.7;
	}

	.hero-chart-track {
		animation-name: hero-chart-scroll-mobile-xs;
	}
}

@media (max-width: 480px) and (prefers-reduced-motion: reduce) {
	.hero-chart-track {
		animation: none;
		transform: translate3d(0, -50%, 0) rotate(-3deg);
	}
}

/* ---- Индикатор текущей цены ----
   Горизонтальный «crosshair» с пунктирной зелёной линией через всю
   ширину графика и пульсирующей зелёной точкой у правой кромки.
   Правый край линии заканчивается там, где начинается торговая
   панель (right: 236px), поэтому точка визуально стыкуется с
   левой гранью стакана.
   Ticker лежит над графиком, но под затемнением текста (z-index 1). */
.hero-chart-ticker {
	position: absolute;
	top: 34%;
	left: 0;
	right: 236px;
	z-index: 1;
	display: flex;
	align-items: center;
	pointer-events: none;
}

.hero-chart-ticker-line {
	flex: 1 1 auto;
	height: 0;
	border-top: 1px dashed rgba(52, 211, 153, 0.55);
}

.hero-chart-ticker-price {
	margin: 0 8px;
	padding: 2px 8px;
	background: rgba(6, 24, 16, 0.7);
	border: 1px solid rgba(52, 211, 153, 0.6);
	border-radius: 4px;
	color: #86efac;
	font-family: 'SF Mono', ui-monospace, Consolas, 'Courier New', monospace;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.03em;
	white-space: nowrap;
	text-shadow: 0 0 6px rgba(52, 211, 153, 0.5);
}

.hero-chart-ticker-dot {
	position: relative;
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #34d399;
	box-shadow: 0 0 10px 2px rgba(52, 211, 153, 0.75);
}

.hero-chart-ticker-dot-pulse {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid rgba(52, 211, 153, 0.7);
	animation: hero-chart-ticker-pulse 1.6s ease-out infinite;
}

@keyframes hero-chart-ticker-pulse {
	0%   { transform: scale(1);   opacity: 0.8; }
	100% { transform: scale(3.4); opacity: 0;   }
}

@media (prefers-reduced-motion: reduce) {
	.hero-chart-ticker-dot-pulse { animation: none; }
}

/* ---- Торговая панель (Buy/Sell + стакан лимитных ордеров) ----
   Декоративная имитация: pointer-events: none, aria-hidden.
   Фиксирована у правого края hero-секции, вертикально по центру.
   Полупрозрачный фон + backdrop-filter создают ощущение «окна»
   терминала поверх графика. Моноширинный шрифт, зелёный/красный
   для bid/ask, градиентные бары глубины справа налево. */
.hero-terminal-panel {
	position: absolute;
	top: 50%;
	right: 16px;
	transform: translateY(-50%);
	z-index: 4;
	width: 216px;
	padding: 10px;
	border-radius: 12px;
	background: rgba(10, 14, 22, 0.72);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(var(--accent-rgb), 0.18);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
	font-family: 'SF Mono', ui-monospace, Consolas, 'Courier New', monospace;
	font-size: 10px;
	color: rgba(226, 232, 240, 0.85);
	pointer-events: none;
	user-select: none;
	font-variant-numeric: tabular-nums;
}

.hero-terminal-buttons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
	margin-bottom: 10px;
}

.hero-terminal-btn {
	text-align: center;
	padding: 7px 8px;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	border: 1px solid transparent;
}

.hero-terminal-btn--buy {
	background: linear-gradient(180deg, rgba(52, 211, 153, 0.32), rgba(16, 185, 129, 0.22));
	border-color: rgba(52, 211, 153, 0.55);
	color: #86efac;
	text-shadow: 0 0 6px rgba(52, 211, 153, 0.45);
}

.hero-terminal-btn--sell {
	background: linear-gradient(180deg, rgba(248, 113, 113, 0.32), rgba(239, 68, 68, 0.22));
	border-color: rgba(248, 113, 113, 0.55);
	color: #fca5a5;
	text-shadow: 0 0 6px rgba(248, 113, 113, 0.4);
}

.hero-terminal-book {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.hero-terminal-book-header {
	display: flex;
	justify-content: space-between;
	padding: 0 6px 4px;
	border-bottom: 1px solid rgba(var(--accent-rgb), 0.12);
	margin-bottom: 3px;
	font-size: 9px;
	letter-spacing: 0.08em;
	color: rgba(148, 163, 184, 0.7);
}

.hero-terminal-row {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 2px 6px;
	border-radius: 3px;
	overflow: hidden;
	line-height: 1.4;
}

.hero-terminal-bar {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	opacity: 0.4;
}

.hero-terminal-row--ask .hero-terminal-bar {
	background: linear-gradient(90deg, rgba(248, 113, 113, 0) 0%, rgba(248, 113, 113, 0.4) 100%);
}

.hero-terminal-row--bid .hero-terminal-bar {
	background: linear-gradient(90deg, rgba(52, 211, 153, 0) 0%, rgba(52, 211, 153, 0.4) 100%);
}

.hero-terminal-row--ask .hero-terminal-price { color: #fca5a5; }
.hero-terminal-row--bid .hero-terminal-price { color: #86efac; }

.hero-terminal-price,
.hero-terminal-amount {
	position: relative;
	z-index: 1;
}

.hero-terminal-amount {
	color: rgba(226, 232, 240, 0.55);
}

.hero-terminal-spread {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin: 4px 0;
	padding: 5px 6px;
	border-radius: 4px;
	background: rgba(52, 211, 153, 0.14);
	border: 1px solid rgba(52, 211, 153, 0.32);
}

.hero-terminal-spread-price {
	color: #86efac;
	font-weight: 700;
	font-size: 12px;
	text-shadow: 0 0 6px rgba(52, 211, 153, 0.5);
}

.hero-terminal-spread-change {
	color: rgba(134, 239, 172, 0.9);
	font-size: 9px;
	letter-spacing: 0.03em;
}

/* Скрываем торговую панель и тикер на планшетах/мобильных —
   текст должен занимать всю ширину секции без визуального шума,
   а панель в 216px там всё равно не поместится рядом с заголовком */
@media (max-width: 991px) {
	.hero-terminal-panel,
	.hero-chart-ticker { display: none; }
}

/* Радиальная тёмная подложка под текстом — между графиком и текстом.
   Эллипс тёмный в центре и плавно растворяется к краям, чтобы текст
   читался поверх анимированного графика, а по бокам график оставался
   видимым. */
.hero-text-backdrop {
	z-index: 2;
	/* Плотное ядро эллипса полностью непрозрачное (alpha 1) и держится
	   до 40% радиуса, чтобы текст читался на абсолютно чёрном фоне.
	   Затухание до прозрачности происходит только на внешнем кольце
	   (40% → 100% радиуса) — резких границ нет, но центр гарантированно
	   перекрывает график под заголовком. */
	background:
		radial-gradient(
			ellipse 60% 70% at 50% 55%,
			rgba(6, 10, 18, 1) 0%,
			rgba(6, 10, 18, 1) 40%,
			rgba(6, 10, 18, 0.7) 65%,
			rgba(6, 10, 18, 0.3) 85%,
			rgba(6, 10, 18, 0) 100%
		);
}

.badge-pill {
	display: inline-flex;
	align-items: center;
	background: var(--accent-soft);
	color: var(--accent);
	padding: 0.5rem 1rem;
	border-radius: 50px;
	font-size: 0.875rem;
	font-weight: 600;
	border: 1px solid rgba(var(--accent-rgb), 0.2);
}

/* ===== Buttons ===== */
.btn {
	border-radius: 12px;
	font-weight: 600;
	padding: 0.625rem 1.25rem;
	transition: all 0.2s ease;
	border: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Liquid Glass Button - ONLY for hero section Telegram button */
.btn-hero-glass {
	background: rgba(var(--accent-rgb), 0.12) !important;
	backdrop-filter: blur(20px) saturate(180%) !important;
	-webkit-backdrop-filter: blur(20px) saturate(180%) !important;
	border: 1px solid rgba(var(--accent-rgb), 0.35) !important;
	border-radius: 12px !important;
	color: #ffffff !important;
	font-weight: 700 !important;
	font-size: 1rem !important;
	padding: 0.625rem 1.5rem !important;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 
	            0 1px 0 rgba(255, 255, 255, 0.15) inset,
	            0 -1px 0 rgba(0, 0, 0, 0.3) inset !important;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6), 0 0 25px rgba(var(--accent-rgb), 0.4) !important;
	position: relative !important;
	overflow: hidden !important;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	text-decoration: none !important;
}

.btn-hero-glass::before {
	content: '' !important;
	position: absolute !important;
	top: 0 !important;
	left: -100% !important;
	width: 100% !important;
	height: 100% !important;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent) !important;
	transition: left 0.6s ease !important;
	z-index: 1 !important;
}

.btn-hero-glass:hover::before {
	left: 100% !important;
}

.btn-hero-glass svg,
.btn-hero-glass span {
	position: relative !important;
	z-index: 2 !important;
}

.btn-hero-glass:hover {
	background: rgba(var(--accent-rgb), 0.22) !important;
	border-color: rgba(var(--accent-rgb), 0.55) !important;
	transform: translateY(-2px) scale(1.03) !important;
	box-shadow: 0 12px 48px rgba(var(--accent-rgb), 0.5), 
	            0 2px 0 rgba(255, 255, 255, 0.2) inset,
	            0 -2px 0 rgba(0, 0, 0, 0.4) inset !important;
	color: #ffffff !important;
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7), 0 0 35px rgba(var(--accent-rgb), 0.6) !important;
}

.btn-hero-glass:active {
	transform: translateY(-1px) scale(0.99) !important;
	box-shadow: 0 4px 20px rgba(var(--accent-rgb), 0.4) !important;
}

/* Default btn-hero and btn-accent (for other pages) - keep original styles */
.btn-hero, .btn-accent {
	background: linear-gradient(135deg, var(--accent), var(--accent-2));
	color: #ffffff !important;
	font-weight: 600 !important;
	box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.3);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.btn-hero:hover, .btn-accent:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(var(--accent-rgb), 0.4);
	color: #ffffff !important;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
   Submit-кнопка обмена (Fiat / Swap / Bridge / DEX) на главной.

   Растягивается на всю ширину виджета, чёрная с вертикальным градиентом,
   белый текст. Тонкий верхний блик (inset box-shadow) + внешняя
   «приподнимающая» тень делают её объёмной. Переопределяем общий .btn-hero
   только в пределах .exchange-widget, чтобы на других страницах
   (подтверждение обмена, формы и т.д.) сохранился прежний синий стиль.
   ========================================================================== */
.exchange-widget .btn-hero {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 1rem 1.5rem !important;
	/* Основа кнопки — чистый чёрный. Вместо rim-light градиентов
	   используем синюю обводку того же цвета (--accent = var(--accent)),
	   что давал максимальный стоп прежнего градиента (alpha 0.50).
	   Обводка рисуется через 2px-бордер + мягкое внешнее/внутреннее
	   свечение в box-shadow, чтобы визуально читалась как одна
	   равномерная синяя рамка по всем четырём краям. */
	background: var(--bg) !important;
	color: #ffffff !important;
	font-weight: 700 !important;
	font-size: 0.95rem !important;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	border: 2px solid rgba(var(--accent-rgb), 0.5) !important;
	border-radius: 14px;
	box-shadow:
		0 0 0 1px rgba(var(--accent-rgb), 0.15),
		0 0 12px rgba(var(--accent-rgb), 0.12),
		0 6px 22px rgba(0, 0, 0, 0.6) !important;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
	position: relative;
	overflow: hidden;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.3s ease !important;
}

/* Псевдо-элемент больше не рисует центральный блик (он делал кнопку
   не-чёрной по центру). Оставляем его пустым-прозрачным, чтобы не
   ломать каскад (если где-то его видно через `::before` DOM-осмотра),
   но визуально он ничего не добавляет. */
.exchange-widget .btn-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: transparent;
	pointer-events: none;
}

.exchange-widget .btn-hero:hover {
	/* На hover кнопка остаётся чёрной, но синяя обводка становится
	   ярче (alpha 0.50 → 0.75) и добавляется голубоватый glow через
	   box-shadow с цветом --accent-2 (var(--accent-2)). */
	background: var(--bg) !important;
	border-color: rgba(var(--accent-rgb), 0.75) !important;
	color: #ffffff !important;
	transform: translateY(-2px);
	box-shadow:
		0 0 0 1px rgba(var(--accent-rgb), 0.25),
		0 0 18px rgba(var(--accent-2-rgb), 0.2),
		0 10px 28px rgba(0, 0, 0, 0.7) !important;
}

.exchange-widget .btn-hero:active {
	transform: translateY(-1px);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.1),
		0 4px 14px rgba(0, 0, 0, 0.55) !important;
}

.exchange-widget .btn-hero:disabled,
.exchange-widget .btn-hero[disabled] {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.04),
		0 4px 14px rgba(0, 0, 0, 0.35) !important;
}

/* SVG-иконка внутри submit-кнопки получает лёгкий акцентный оттенок,
   чтобы не сливалась с абсолютно чёрным фоном. */
.exchange-widget .btn-hero svg {
	color: rgba(var(--accent-rgb), 0.9);
}

.btn-outline-light {
	background: transparent;
	color: var(--text);
	border: 2px solid rgba(255, 255, 255, 0.15);
}

.btn-outline-light:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.25);
	color: var(--text);
}

.btn-outline-dark {
	background: transparent;
	color: var(--text);
	border: 1px solid var(--border);
}

.btn-outline-dark:hover {
	background: var(--surface-light);
	border-color: var(--accent);
	color: var(--accent);
	transform: translateY(-1px);
}

.btn-success {
	background: linear-gradient(135deg, var(--success), #059669);
	color: #ffffff;
	border: none;
	font-weight: 600;
}

.btn-success:hover {
	background: linear-gradient(135deg, #059669, var(--success));
	color: #ffffff;
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(16, 185, 129, 0.3);
}

.btn-dark {
	background: var(--surface-light);
	color: var(--text);
	border: none;
}

.btn-dark:hover {
	background: #1f1f1f;
	color: var(--text);
}

.glow-on-hover:hover {
	box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15), 0 8px 24px rgba(var(--accent-rgb), 0.2);
}

/* ===== Exchange Confirm Page ===== */
.confirmation-section {
	background: rgba(0, 0, 0, 0.2);
	border-radius: 12px;
	padding: 16px;
}

/* Мобильная версия - отступ для заголовка */
@media (max-width: 576px) {
	.page-header {
		padding-left: 3rem !important;
		padding-right: 1rem !important;
	}
	
	.page-header h1 {
		font-size: 1.25rem !important;
	}
	
	.page-header p {
		font-size: 0.8125rem !important;
		padding-left: 2rem !important;
	}
	
	/* Фикс кнопок на странице подтверждения */
	.confirmation-section + .alert + .row .btn-hero,
	.confirmation-section + .alert + .row .btn {
		pointer-events: auto !important;
		z-index: 10 !important;
		position: relative !important;
		touch-action: manipulation !important;
	}
	
	.btn-hero, .btn-accent {
		min-height: 48px !important;
		font-size: 0.9375rem !important;
		padding: 0.75rem 1.5rem !important;
	}
	
	/* Адаптация текста из БД (страница "О нас" и др.) */
	.card-body {
		padding: 1rem !important;
	}
	
	.card-body p {
		font-size: 0.875rem !important;
		line-height: 1.6 !important;
		margin-bottom: 1rem !important;
		word-wrap: break-word !important;
		overflow-wrap: break-word !important;
	}
	
	.card-body h1,
	.card-body h2,
	.card-body h3,
	.card-body h4,
	.card-body h5,
	.card-body h6 {
		font-size: 1.125rem !important;
		line-height: 1.4 !important;
		margin-bottom: 0.75rem !important;
		margin-top: 1.25rem !important;
		word-wrap: break-word !important;
		overflow-wrap: break-word !important;
	}
	
	.card-body ul,
	.card-body ol {
		padding-left: 1.25rem !important;
		margin-bottom: 1rem !important;
	}
	
	.card-body li {
		font-size: 0.875rem !important;
		line-height: 1.6 !important;
		margin-bottom: 0.5rem !important;
		word-wrap: break-word !important;
		overflow-wrap: break-word !important;
	}
	
	.card-body a {
		word-break: break-all !important;
		font-size: 0.875rem !important;
	}
	
	.card-body img {
		max-width: 100% !important;
		height: auto !important;
		border-radius: 8px !important;
		margin: 0.75rem 0 !important;
	}
	
	.card-body table {
		font-size: 0.8125rem !important;
		overflow-x: auto !important;
		display: block !important;
	}
	
	.card-body table td,
	.card-body table th {
		padding: 0.5rem !important;
		font-size: 0.8125rem !important;
		word-wrap: break-word !important;
	}
	
	/* Страница контактов - убираем вложенные рамки, делаем простые карточки */
	.contact-page-wrapper {
		padding: 1rem !important;
		border: none !important;
		background: transparent !important;
		box-shadow: none !important;
		backdrop-filter: none !important;
		border-radius: 0 !important;
	}
	
	.contact-page-header {
		margin-bottom: 1.5rem !important;
	}
	
	.contact-page-header h1 {
		font-size: 1.5rem !important;
		margin-bottom: 1rem !important;
	}
	
	/* Убираем рамку контактной информации */
	.contact-info-frame {
		background: transparent !important;
		border: none !important;
		padding: 0 !important;
		box-shadow: none !important;
		backdrop-filter: none !important;
		border-radius: 0 !important;
		margin-bottom: 1.5rem !important;
	}
	
	.contact-info-section .row {
		margin: 0 !important;
		gap: 1rem !important;
	}
	
	.contact-info-section .col-md-6 {
		padding: 0 !important;
		width: 100% !important;
		flex: 0 0 100% !important;
		max-width: 100% !important;
		margin-bottom: 1rem !important;
	}
	
	/* Простые карточки контактов */
	.contact-info-card {
		background: linear-gradient(135deg, rgba(11, 11, 11, 0.95), rgba(21, 21, 21, 0.9)) !important;
		border: 1px solid rgba(var(--accent-rgb), 0.2) !important;
		border-radius: 12px !important;
		padding: 1.25rem !important;
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
		backdrop-filter: blur(10px) !important;
		margin-bottom: 1rem !important;
	}
	
	/* Убираем рамку контента */
	.contact-page-content {
		background: linear-gradient(135deg, rgba(11, 11, 11, 0.95), rgba(21, 21, 21, 0.9)) !important;
		border: 1px solid rgba(var(--accent-rgb), 0.2) !important;
		border-radius: 12px !important;
		padding: 1.25rem !important;
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
		backdrop-filter: blur(10px) !important;
		margin-bottom: 1.5rem !important;
	}
	
	.contact-form-section .row {
		margin: 0 !important;
	}
	
	.contact-form-section .col-12 {
		padding: 0 !important;
		width: 100% !important;
		flex: 0 0 100% !important;
		max-width: 100% !important;
	}
	
	/* Простая карточка формы */
	.contact-form-card {
		background: linear-gradient(135deg, rgba(11, 11, 11, 0.95), rgba(21, 21, 21, 0.9)) !important;
		border: 1px solid rgba(var(--accent-rgb), 0.2) !important;
		border-radius: 12px !important;
		padding: 1.25rem !important;
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
		backdrop-filter: blur(10px) !important;
	}
	
	.contact-form-header {
		margin-bottom: 1.25rem !important;
	}
	
	.contact-form-header h3 {
		font-size: 1.25rem !important;
		margin-bottom: 0.5rem !important;
	}
	
	.contact-form-header p {
		font-size: 0.875rem !important;
	}
	
	.contact-form .form-group {
		margin-bottom: 1.25rem !important;
	}
	
	.contact-form-label {
		font-size: 0.875rem !important;
		margin-bottom: 0.5rem !important;
	}
	
	.contact-form-input,
	.contact-form-textarea {
		font-size: 0.9375rem !important;
		padding: 0.75rem !important;
		border-radius: 8px !important;
	}
	
	.contact-form-textarea {
		min-height: 120px !important;
	}
	
	/* Страница exchange - убираем иконку и центрируем заголовок */
	.page-header h1 svg {
		display: none !important;
	}
	
	.page-header h1 {
		text-align: center !important;
		padding-left: 0 !important;
	}
	
	/* Отступ между иконкой валюты и названием */
	.exchange-currency-header img {
		margin-right: 0.75rem !important;
	}
	
	.exchange-currency-header h5 {
		margin-left: 0.25rem !important;
	}
	
	/* Страница user-orders - карточный дизайн для мобильной версии */
	/* Таблица заменяется на карточки через JavaScript */
	.user-orders-page .table-responsive {
		overflow: visible !important;
		margin-bottom: 1.5rem !important;
	}
	
	/* Отступ перед пагинацией */
	.user-orders-page .pagination {
		margin-top: 1.5rem !important;
	}
	
	/* Статистика вверху */
	.user-orders-page .alert-secondary {
		background: linear-gradient(135deg, rgba(11, 11, 11, 0.95), rgba(21, 21, 21, 0.9)) !important;
		border: 1px solid rgba(var(--accent-rgb), 0.15) !important;
		border-radius: 12px !important;
		padding: 1rem !important;
		margin-bottom: 1.25rem !important;
	}
	
	.user-orders-page .alert-secondary .row {
		display: flex !important;
		flex-direction: column !important;
		gap: 0.75rem !important;
	}
	
	.user-orders-page .alert-secondary .col-md-6 {
		width: 100% !important;
		padding: 0 !important;
		font-size: 0.875rem !important;
		display: flex !important;
		justify-content: space-between !important;
		align-items: center !important;
	}
	
	.user-orders-page .alert-secondary strong {
		color: rgba(var(--accent-rgb), 0.85) !important;
		font-size: 0.75rem !important;
		text-transform: uppercase !important;
		letter-spacing: 0.5px !important;
	}
	
	/* Страница user-details - центрирование заголовка и отступы */
	.card-header {
		text-align: center !important;
		padding-left: 1rem !important;
		padding-right: 1rem !important;
		padding-bottom: 1.25rem !important;
	}
	
	.card-header .btn {
		margin-top: 1rem !important;
	}
	
	/* Страница user-referrals - карточки для мобильной версии */
	.referrals-list-grid {
		gap: 1.25rem !important;
		margin-bottom: 1.5rem !important;
	}
	
	/* Статистика user-referrals - компактный формат */
	.alert-secondary {
		background: linear-gradient(135deg, rgba(11, 11, 11, 0.95), rgba(21, 21, 21, 0.9)) !important;
		border: 1px solid rgba(var(--accent-rgb), 0.15) !important;
		border-radius: 12px !important;
		padding: 1rem !important;
		margin-bottom: 1.25rem !important;
	}
	
	.alert-secondary .row {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		gap: 0.875rem !important;
	}
	
	.alert-secondary .col-md-6 {
		width: 100% !important;
		padding: 0.75rem !important;
		font-size: 0.8125rem !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		text-align: center !important;
		background: rgba(0, 0, 0, 0.2) !important;
		border: 1px solid rgba(var(--accent-rgb), 0.1) !important;
		border-radius: 10px !important;
		gap: 0.375rem !important;
	}
	
	.alert-secondary .col-md-6:nth-child(3),
	.alert-secondary .col-md-6:nth-child(4) {
		grid-column: 1 / -1 !important;
	}
	
	.alert-secondary strong {
		color: rgba(var(--accent-rgb), 0.75) !important;
		font-size: 0.6875rem !important;
		text-transform: uppercase !important;
		letter-spacing: 0.3px !important;
		font-weight: 600 !important;
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		max-width: 100% !important;
	}
	
	.alert-secondary .col-md-6:not(:has(strong)) {
		color: #ffffff !important;
		font-weight: 600 !important;
		font-size: 0.9375rem !important;
	}
	
	/* Заголовок страницы user-referrals в мобильной версии */
	body .card .card-header {
		text-align: center !important;
		padding-left: 1rem !important;
		padding-right: 1rem !important;
	}
	
	body .card .card-header .btn.float-end {
		margin-top: 1rem !important;
		float: none !important;
		display: block !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

.table-dark-custom {
	color: var(--text);
	border-color: var(--border) !important;
}

/* Card style for confirmation and order sections */
.confirmation-section,
.order-info-section {
	position: relative;
	background: linear-gradient(135deg, rgba(11, 11, 11, 0.5), rgba(15, 15, 18, 0.6));
	border: 1px solid rgba(var(--accent-rgb), 0.18);
	border-radius: 16px;
	padding: 1.75rem;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.confirmation-section .table-dark-custom,
.order-info-section .table-dark-custom,
.order-info-section .table,
.order-info-section .table-responsive .table,
div.card-body > div.order-info-section .table,
div.card-body > div > div.table-responsive > table.table-dark-custom,
div.card-body > div > div.table-responsive > table.table-striped,
/* Super aggressive selector for order page */
table.table.table-dark-custom.table-bordered,
table.table.table-striped.table-bordered {
	display: block !important;
	border: none !important;
	width: 100% !important;
	border-collapse: separate !important;
	border-spacing: 0 !important;
}

/* Override Bootstrap table classes inside order-info-section */
.order-info-section .table-striped tbody tr,
.order-info-section .table-bordered,
div.card-body > div.order-info-section .table-striped tbody tr,
div.card-body > div.order-info-section .table-bordered,
div.card-body > div > div.table-responsive > table.table-striped tbody tr,
div.card-body > div > div.table-responsive > table.table-bordered {
	border: none !important;
	border-bottom: none !important;
	border-top: none !important;
}

.order-info-section .table-striped > tbody > tr:nth-of-type(odd),
div.card-body > div.order-info-section .table-striped > tbody > tr:nth-of-type(odd),
div.card-body > div > div.table-responsive > table.table-striped > tbody > tr:nth-of-type(odd) {
	background: transparent !important;
}

.order-info-section .table-bordered td,
.order-info-section .table-bordered th,
div.card-body > div.order-info-section .table-bordered td,
div.card-body > div.order-info-section .table-bordered th,
div.card-body > div > div.table-responsive > table.table-bordered td,
div.card-body > div > div.table-responsive > table.table-bordered th {
	border: none !important;
	border-bottom: none !important;
	border-top: none !important;
	border-left: none !important;
	border-right: none !important;
}

.confirmation-section .table-dark-custom tbody,
.order-info-section .table-dark-custom tbody,
.order-info-section .table tbody,
.order-info-section .table-responsive .table tbody,
/* Fallback for order page if class is missing */
div.card-body > div.order-info-section .table tbody,
div.card-body > div > div.table-responsive > table.table-dark-custom tbody,
div.card-body > div > div.table-responsive > table.table-striped tbody {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: 0.875rem !important;
	align-items: stretch !important;
	border: none !important;
}

.confirmation-section .table-dark-custom tbody tr,
.order-info-section .table-dark-custom tbody tr,
.order-info-section .table tbody tr,
.order-info-section .table-responsive .table tbody tr,
/* Fallback for order page */
div.card-body > div.order-info-section .table tbody tr,
div.card-body > div > div.table-responsive > table.table-dark-custom tbody tr,
div.card-body > div > div.table-responsive > table.table-striped tbody tr {
	border: none !important;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
	position: relative !important;
	display: grid !important;
	grid-template-columns: 140px 1fr !important;
	gap: 1.125rem !important;
	background: linear-gradient(135deg, rgba(25, 25, 30, 0.4), rgba(18, 18, 22, 0.5)) !important;
	border: 1px solid rgba(var(--accent-rgb), 0.15) !important;
	border-radius: 12px !important;
	padding: 14px 18px !important;
	overflow: hidden !important;
	align-items: center !important;
	min-height: 58px !important;
	margin-bottom: 0 !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.1) !important;
	backdrop-filter: blur(10px) !important;
}

.confirmation-section .table-dark-custom tbody tr::before,
.order-info-section .table-dark-custom tbody tr::before,
.order-info-section .table tbody tr::before,
.order-info-section .table-responsive .table tbody tr::before,
div.card-body > div.order-info-section .table tbody tr::before,
div.card-body > div > div.table-responsive > table.table-dark-custom tbody tr::before,
div.card-body > div > div.table-responsive > table.table-striped tbody tr::before {
	content: '';
	position: absolute;
	top: -1px;
	left: -1px;
	right: -1px;
	bottom: -1px;
	background: linear-gradient(135deg, var(--accent), var(--accent-2));
	border-radius: 8px;
	opacity: 0;
	z-index: -1;
	transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.confirmation-section .table-dark-custom tbody tr:hover,
.order-info-section .table-dark-custom tbody tr:hover,
.order-info-section .table tbody tr:hover,
.order-info-section .table-responsive .table tbody tr:hover,
div.card-body > div.order-info-section .table tbody tr:hover,
div.card-body > div > div.table-responsive > table.table-dark-custom tbody tr:hover,
div.card-body > div > div.table-responsive > table.table-striped tbody tr:hover {
	background: linear-gradient(135deg, rgba(30, 30, 35, 0.9), rgba(25, 25, 30, 0.95)) !important;
	border-color: transparent !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 8px 24px rgba(var(--accent-rgb), 0.2), 0 0 0 1px rgba(var(--accent-rgb), 0.3) inset !important;
}

.confirmation-section .table-dark-custom tbody tr:hover::before,
.order-info-section .table-dark-custom tbody tr:hover::before,
.order-info-section .table tbody tr:hover::before,
.order-info-section .table-responsive .table tbody tr:hover::before,
div.card-body > div.order-info-section .table tbody tr:hover::before,
div.card-body > div > div.table-responsive > table.table-dark-custom tbody tr:hover::before,
div.card-body > div > div.table-responsive > table.table-striped tbody tr:hover::before {
	opacity: 0.15;
}

.confirmation-section .table-dark-custom td,
.order-info-section .table-dark-custom td,
.order-info-section .table td,
.order-info-section .table-responsive .table td,
div.card-body > div.order-info-section .table td,
div.card-body > div > div.table-responsive > table.table-dark-custom td,
div.card-body > div > div.table-responsive > table.table-striped td {
	padding: 0 !important;
	border: none !important;
	background: transparent !important;
	display: block !important;
	position: relative;
	z-index: 1;
	vertical-align: middle !important;
}

.confirmation-section .table-dark-custom td:first-child,
.order-info-section .table-dark-custom td:first-child,
.order-info-section .table td:first-child,
.order-info-section .table-responsive .table td:first-child,
div.card-body > div.order-info-section .table td:first-child,
div.card-body > div > div.table-responsive > table.table-dark-custom td:first-child,
div.card-body > div > div.table-responsive > table.table-striped td:first-child,
table.table.table-dark-custom.table-bordered td:first-child,
table.table.table-striped.table-bordered td:first-child,
table.table-bordered td:first-child,
.table-responsive table td:first-child {
	color: rgba(var(--accent-rgb), 0.85) !important;
	font-weight: 700 !important;
	font-size: 0.75rem !important;
	text-transform: uppercase !important;
	letter-spacing: 1px !important;
	text-align: left !important;
	white-space: nowrap !important;
	min-width: 140px !important;
	opacity: 0.95 !important;
}

.confirmation-section .table-dark-custom td:last-child,
.order-info-section .table-dark-custom td:last-child,
.order-info-section .table td:last-child,
.order-info-section .table-responsive .table td:last-child,
div.card-body > div.order-info-section .table td:last-child,
div.card-body > div > div.table-responsive > table.table-dark-custom td:last-child,
div.card-body > div > div.table-responsive > table.table-striped td:last-child,
table.table.table-dark-custom.table-bordered td:last-child,
table.table.table-striped.table-bordered td:last-child,
table.table-bordered td:last-child,
.table-responsive table td:last-child {
	color: #ffffff !important;
	font-weight: 600 !important;
	font-size: 0.9375rem !important;
	text-align: left !important;
	word-break: break-word !important;
	line-height: 1.5 !important;
}

.confirmation-section .table-dark-custom td:last-child img,
.order-info-section .table-dark-custom td:last-child img,
.order-info-section .table td:last-child img,
.order-info-section .table-responsive .table td:last-child img,
div.card-body > div.order-info-section .table td:last-child img,
div.card-body > div > div.table-responsive > table.table-dark-custom td:last-child img,
div.card-body > div > div.table-responsive > table.table-striped td:last-child img {
	vertical-align: middle !important;
	margin-right: 6px !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
	.confirmation-section .table-dark-custom tbody,
	.order-info-section .table-dark-custom tbody,
	.order-info-section .table tbody,
	.order-info-section .table-responsive .table tbody {
		grid-template-columns: 1fr !important;
		gap: 0.375rem !important;
	}
	
	.confirmation-section .table-dark-custom tbody tr,
	.order-info-section .table-dark-custom tbody tr,
	.order-info-section .table tbody tr,
	.order-info-section .table-responsive .table tbody tr {
		grid-template-columns: 90px 1fr !important;
		gap: 0.5rem !important;
		padding: 6px 10px !important;
		min-height: 38px !important;
	}
	
	.confirmation-section .table-dark-custom td:first-child,
	.order-info-section .table-dark-custom td:first-child,
	.order-info-section .table td:first-child,
	.order-info-section .table-responsive .table td:first-child {
		min-width: auto !important;
		font-size: 0.625rem !important;
	}
	
	.confirmation-section .table-dark-custom td:last-child,
	.order-info-section .table-dark-custom td:last-child,
	.order-info-section .table td:last-child,
	.order-info-section .table-responsive .table td:last-child {
		font-size: 0.8125rem !important;
	}
}

/* Payment section styles - ensure all fields are visible */
.card-body .form-group {
	margin-bottom: 1rem !important;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	height: auto !important;
	overflow: visible !important;
}

.card-body label {
	color: var(--text-muted) !important;
	font-size: 0.875rem !important;
	font-weight: 500 !important;
	margin-bottom: 0.5rem !important;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* КРИТИЧНО: поля формы внутри .card-body (оплата, реквизиты и т.п.)
 * почти не отличались от фона карточки. Первая попытка (фон на базе
 * --surface-2-rgb) не сработала: сама .card тоже залита градиентом
 * --surface-2-rgb → --surface-rgb, поэтому поле осталось того же тона,
 * что и карточка. Берём заметно светлее --surface-3-rgb и непрозрачную
 * рамку акцентного цвета, чтобы поле реально отделялось от фона. */
.card-body .form-control,
.card-body .form-control[readonly] {
	background: rgba(var(--surface-3-rgb), 0.95) !important;
	border: 2px solid rgba(var(--accent-rgb), 0.55) !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 10px rgba(0, 0, 0, 0.35) !important;
	color: var(--text) !important;
	font-weight: 600 !important;
	font-size: 0.9375rem !important;
	padding: 0.75rem 1rem !important;
	border-radius: 8px !important;
	cursor: text !important;
	display: block !important;
	width: 100% !important;
	visibility: visible !important;
	opacity: 1 !important;
	height: auto !important;
	min-height: 44px !important;
	overflow: visible !important;
}

.card-body .form-control:hover,
.card-body .form-control[readonly]:hover {
	border-color: rgba(var(--accent-rgb), 0.7) !important;
}

.card-body .form-control:focus {
	background: rgba(var(--surface-3-rgb), 0.98) !important;
	border-color: var(--accent) !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 3px rgba(var(--accent-rgb), 0.22) !important;
}

.card-body .form-control[readonly]:focus {
	border-color: rgba(var(--accent-rgb), 0.4) !important;
	box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1) !important;
	outline: none !important;
}

/* QR code container */
.card-body .qrcode {
	display: block;
	background: #ffffff;
	padding: 8px;
	border-radius: 8px;
}

.card-body .border.rounded {
	border-color: rgba(var(--accent-rgb), 0.2) !important;
	background: rgba(11, 11, 11, 0.5);
}

/* Payment description */
.card-body .mb-3 {
	color: var(--text);
	line-height: 1.6;
}

/* Default table styles for other pages */
.table-dark-custom tbody tr {
	border-bottom: 1px solid var(--border);
}

.table-dark-custom tbody tr:last-child {
	border-bottom: none;
}

.table-dark-custom td {
	padding: 16px;
	border-color: var(--border) !important;
	background: transparent;
	vertical-align: middle;
}

.table-dark-custom td:first-child {
	color: var(--text-muted);
	font-weight: 500;
	font-size: 14px;
	width: 35%;
}

.table-dark-custom td:last-child {
	color: var(--text);
	font-weight: 600;
}

/* IMPORTANT: Override default styles for confirmation and order sections - MUST be after default styles */
.confirmation-section .table-dark-custom tbody tr,
.order-info-section .table-dark-custom tbody tr,
.confirmation-section .table tbody tr,
.order-info-section .table tbody tr {
	border-bottom: none !important;
}

.confirmation-section .table-dark-custom td,
.order-info-section .table-dark-custom td,
.confirmation-section .table td,
.order-info-section .table td {
	width: auto !important;
}

.alert-warning-custom {
	background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(245, 158, 11, 0.05));
	border: 1px solid rgba(245, 158, 11, 0.2);
	border-left: 4px solid var(--warning);
	border-radius: 12px;
	padding: 20px;
	display: flex;
	align-items: flex-start;
	gap: 16px;
	color: var(--text);
}

.alert-warning-custom svg {
	flex-shrink: 0;
	color: var(--warning);
	margin-top: 2px;
}

.alert-warning-custom .fw-bold {
	color: var(--warning);
}

.btn-outline-danger-custom {
	background: transparent;
	border: 2px solid var(--danger);
	color: var(--danger);
	font-weight: 600;
	border-radius: 12px;
	transition: all 0.3s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.btn-outline-danger-custom:hover {
	background: var(--danger);
	border-color: var(--danger);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(239, 68, 68, 0.3);
}

.btn-outline-danger-custom svg {
	transition: transform 0.3s ease;
}

.btn-outline-danger-custom:hover svg {
	transform: scale(1.1);
}

@media (max-width: 768px) {
	.exchange-flow {
		flex-direction: column;
		gap: 1.5rem;
	}
	
	.exchange-flow-card {
		min-width: 100%;
		max-width: 100%;
		padding: 1.5rem 1rem;
	}
	
	.exchange-arrow-animated {
		transform: rotate(90deg);
	}
	
	.table-dark-custom td:first-child {
		width: 40%;
		font-size: 13px;
	}
	
	.table-dark-custom td:last-child {
		font-size: 14px;
	}
	
	.table-dark-custom td {
		padding: 12px;
	}
}

/* ===== Exchange Widget ===== */
.exchange-widget {
	background: var(--surface);
	background-image: 
		radial-gradient(600px 300px at 50% 0%, rgba(var(--accent-rgb), 0.08), transparent 70%),
		linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0) 50%);
	border: 1px solid var(--border);
	border-radius: 24px;
	box-shadow: var(--shadow-lg);
}

/* Exchange form gutters: Bootstrap `.p-4.p-md-5` gives 48px side padding
   on tablet/desktop, which makes the currency blocks feel squeezed. */
#exchange-form .exchange-widget > .p-4.p-md-5 {
	padding-left: 1rem !important;
	padding-right: 1rem !important;
}

#exchange-form .exchange-widget > .p-4.p-md-5 > .row.g-4 {
	--bs-gutter-x: 1rem !important;
}

@media (max-width: 768px) {
	#exchange-form .exchange-widget > .p-4.p-md-5 {
		padding-left: 0.5rem !important;
		padding-right: 0.5rem !important;
	}

	#exchange-form .exchange-widget > .p-4.p-md-5 > .row.g-4 {
		--bs-gutter-x: 0.5rem !important;
	}
}

/* ===== Orders Cards Grid ===== */
.orders-card-header h3 {
	color: var(--text);
	font-weight: 700;
	letter-spacing: -0.02em;
}

.orders-cards-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1.5rem;
}

@media (max-width: 768px) {
	.orders-cards-grid {
		grid-template-columns: 1fr;
		gap: 1rem;
	}
}

.order-card {
	background: linear-gradient(135deg, rgba(11, 11, 11, 0.95), rgba(21, 21, 21, 0.9));
	border: 1px solid rgba(var(--accent-rgb), 0.12);
	border-radius: 16px;
	padding: 1.5rem;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3),
	            0 0 0 1px rgba(var(--accent-rgb), 0.08);
	backdrop-filter: blur(10px);
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
	animation: orderCardFadeIn 0.5s ease-out both;
}

@keyframes orderCardFadeIn {
	from {
		opacity: 0;
		transform: translateY(20px) scale(0.95);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.order-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: linear-gradient(90deg, var(--accent), var(--accent-2));
	opacity: 0;
	transition: opacity 0.3s ease;
}

.order-card:hover::before {
	opacity: 1;
}

.order-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4),
	            0 0 0 1px rgba(var(--accent-rgb), 0.2),
	            inset 0 1px 0 rgba(255, 255, 255, 0.05);
	border-color: rgba(var(--accent-rgb), 0.25);
}

.order-card-header {
	margin-bottom: 1rem;
}

.order-currencies {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	justify-content: center;
	padding: 1rem;
	background: rgba(0, 0, 0, 0.3);
	border-radius: 12px;
	border: 1px solid rgba(var(--accent-rgb), 0.08);
}

.order-currency-icon {
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
	transition: transform 0.3s ease;
}

.order-card:hover .order-currency-icon {
	transform: scale(1.1);
}

.order-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.15), rgba(var(--accent-2-rgb), 0.1));
	border: 1px solid rgba(var(--accent-rgb), 0.3);
	border-radius: 50%;
	color: var(--accent);
	animation: arrowBounce 2s ease-in-out infinite;
}

@keyframes arrowBounce {
	0%, 100% {
		transform: translateX(0);
	}
	50% {
		transform: translateX(4px);
	}
}

.order-card-body {
	text-align: center;
	padding: 1rem 0;
}

.order-amount {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--text);
	margin-bottom: 0.5rem;
	background: linear-gradient(135deg, var(--accent), var(--accent-2));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.order-date {
	font-size: 0.875rem;
	color: var(--text-muted);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
}

.order-card-footer {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid rgba(var(--accent-rgb), 0.1);
}

.order-action-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 0.75rem 1.25rem;
	background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.12), rgba(var(--accent-2-rgb), 0.08));
	border: 1px solid rgba(var(--accent-rgb), 0.3);
	border-radius: 10px;
	color: var(--accent);
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
	transition: all 0.3s ease;
	box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.1),
	            inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.order-action-btn:hover {
	background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.2), rgba(var(--accent-2-rgb), 0.15));
	border-color: rgba(var(--accent-rgb), 0.5);
	color: #ffffff;
	transform: translateY(-2px);
	box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.3),
	            inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.order-action-btn:active {
	transform: translateY(0);
}

/* ===== Reserves List (Row Layout) ===== */
.reserves-page-header h1 {
	color: var(--text);
	font-weight: 700;
	letter-spacing: -0.02em;
	display: flex;
	align-items: center;
}

.reserves-list-grid {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-bottom: 2rem;
}

.reserve-row {
	display: flex;
	align-items: center;
	background: linear-gradient(135deg, rgba(11, 11, 11, 0.95), rgba(21, 21, 21, 0.9));
	border: 1px solid rgba(var(--accent-rgb), 0.12);
	border-radius: 12px;
	padding: 1rem 1.5rem;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3),
	            0 0 0 1px rgba(var(--accent-rgb), 0.08);
	backdrop-filter: blur(10px);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
	animation: reserveRowSlideIn 0.4s ease-out both;
}

@keyframes reserveRowSlideIn {
	from {
		opacity: 0;
		transform: translateX(-20px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.reserve-row::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 3px;
	height: 100%;
	background: linear-gradient(180deg, var(--accent), var(--accent-2));
	opacity: 0;
	transition: opacity 0.3s ease;
}

.reserve-row:hover::before {
	opacity: 1;
}

.reserve-row:hover {
	transform: translateX(4px);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
	            0 0 0 1px rgba(var(--accent-rgb), 0.2),
	            inset 0 1px 0 rgba(255, 255, 255, 0.05);
	border-color: rgba(var(--accent-rgb), 0.25);
}

.reserve-row:hover .reserve-icon-wrapper {
	transform: scale(1.1);
	border-color: rgba(var(--accent-rgb), 0.3);
	box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.3);
}

.reserve-row:hover .reserve-icon-wrapper img {
	transform: scale(1.1);
}

@media (max-width: 768px) {
	.reserve-row {
		flex-wrap: wrap;
		gap: 0.75rem;
	}
	
	.reserve-row-amount {
		flex: 1 !important;
		text-align: left !important;
		margin-left: 60px !important;
	}
}

/* ===== Rates List (Row Layout) ===== */
.rates-page-header h1 {
	color: var(--text);
	font-weight: 700;
	letter-spacing: -0.02em;
	display: flex;
	align-items: center;
	/* Bootstrap .h3 по умолчанию ~1.75rem — крупновато для заголовка списка,
	   уменьшаем до 1.25rem (20px) на десктопе с плавным скейлом на мобилке. */
	font-size: clamp(1.05rem, 1.4vw + 0.6rem, 1.25rem) !important;
	line-height: 1.3;
}

/* SVG-иконка слева от заголовка — уменьшаем пропорционально тексту */
.rates-page-header h1 > svg {
	width: 18px;
	height: 18px;
}

/* Счётчик «(97)» — чуть меньше основного заголовка */
.rates-page-header h1 > .ms-2 {
	font-size: 0.8125rem;
}

.rates-list-grid {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-bottom: 2rem;
}

.rate-row {
	display: flex;
	align-items: center;
	background: linear-gradient(135deg, rgba(11, 11, 11, 0.95), rgba(21, 21, 21, 0.9));
	border: 1px solid rgba(var(--accent-rgb), 0.12);
	border-radius: 12px;
	padding: 1rem 1.5rem;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3),
	            0 0 0 1px rgba(var(--accent-rgb), 0.08);
	backdrop-filter: blur(10px);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
	text-decoration: none;
	gap: 1.5rem;
	animation: rateRowSlideIn 0.4s ease-out both;
}

@keyframes rateRowSlideIn {
	from {
		opacity: 0;
		transform: translateX(-20px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.rate-row::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 3px;
	height: 100%;
	background: linear-gradient(180deg, var(--accent), var(--accent-2));
	opacity: 0;
	transition: opacity 0.3s ease;
}

.rate-row:hover::before {
	opacity: 1;
}

.rate-row:hover {
	transform: translateX(4px);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
	            0 0 0 1px rgba(var(--accent-rgb), 0.2),
	            inset 0 1px 0 rgba(255, 255, 255, 0.05);
	border-color: rgba(var(--accent-rgb), 0.25);
}

.rate-row:hover .rate-icon-wrapper {
	transform: scale(1.1);
	border-color: rgba(var(--accent-rgb), 0.3);
	box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.3);
}

.rate-row:hover .rate-row-arrow {
	transform: scale(1.15);
	background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.25), rgba(var(--accent-2-rgb), 0.15));
	border-color: rgba(var(--accent-rgb), 0.4);
}

.rate-row:hover .rate-exchange-btn {
	background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.2), rgba(var(--accent-2-rgb), 0.15));
	border-color: rgba(var(--accent-rgb), 0.5);
	color: #ffffff;
	box-shadow: 0 2px 12px rgba(var(--accent-rgb), 0.3);
}

@media (max-width: 992px) {
	.rate-row {
		flex-wrap: wrap;
		gap: 1rem;
	}
	
	.rate-row-send,
	.rate-row-receive {
		min-width: 140px !important;
	}
	
	.rate-row-rate {
		flex: 1 1 100% !important;
		order: 10;
	}
}

/* Мобильная версия - вертикальная компоновка */
@media (max-width: 576px) {
	.rate-row {
		padding: 0.75rem !important;
		gap: 0.625rem !important;
		flex-wrap: wrap !important;
		overflow: visible !important;
	}
	
	/* Верхняя часть - валюты и стрелка */
	.rate-row-send,
	.rate-row-receive {
		min-width: auto !important;
		flex: 0 0 auto !important;
		gap: 0.5rem !important;
	}
	
	.rate-icon-wrapper {
		width: 32px !important;
		height: 32px !important;
		padding: 0.25rem !important;
	}
	
	.rate-icon-wrapper img {
		width: 24px !important;
		height: 24px !important;
	}
	
	.rate-currency-name {
		font-size: 0.8125rem !important;
		white-space: nowrap !important;
	}
	
	.rate-row-arrow {
		width: 28px !important;
		height: 28px !important;
		flex-shrink: 0 !important;
	}
	
	.rate-row-arrow svg {
		width: 14px !important;
		height: 14px !important;
	}
	
	/* Нижняя часть - курс и кнопка */
	.rate-row-rate {
		flex: 1 1 100% !important;
		order: 10 !important;
		text-align: left !important;
		padding: 0.5rem 0 0 0 !important;
		border-top: 1px solid rgba(var(--accent-rgb), 0.1) !important;
		margin-top: 0.25rem !important;
		display: flex !important;
		justify-content: space-between !important;
		align-items: center !important;
	}
	
	.rate-value {
		font-size: 0.9375rem !important;
		line-height: 1.2 !important;
	}
	
	.rate-range {
		font-size: 0.6875rem !important;
		margin-top: 0.125rem !important;
		white-space: normal !important;
	}
	
	.rate-row-action {
		flex: 0 0 auto !important;
		order: 11 !important;
	}
	
	.rate-exchange-btn {
		padding: 0.5rem 0.875rem !important;
		font-size: 0.8125rem !important;
		white-space: nowrap !important;
	}
	
	.rate-exchange-btn svg {
		width: 14px !important;
		height: 14px !important;
		margin-right: 0.375rem !important;
	}
}

/* ===== Contact Page ===== */
.contact-page-wrapper {
	background: linear-gradient(135deg, rgba(5, 5, 5, 0.8), rgba(15, 15, 15, 0.7));
	border: 2px solid rgba(var(--accent-rgb), 0.2);
	border-radius: 24px;
	padding: 3rem;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5),
	            0 0 0 1px rgba(var(--accent-rgb), 0.15),
	            inset 0 1px 0 rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(20px);
	position: relative;
	overflow: hidden;
}

.contact-page-wrapper::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent));
	animation: gradientFlow 3s ease-in-out infinite;
}

@keyframes gradientFlow {
	0%, 100% { opacity: 0.6; }
	50% { opacity: 1; }
}

@media (max-width: 768px) {
	.contact-page-wrapper {
		padding: 1.5rem;
	}
}

.contact-page-header h1 {
	color: var(--text);
	font-weight: 700;
	letter-spacing: -0.02em;
	display: inline-flex;
	align-items: center;
}

.contact-info-cards {
	animation: fadeIn 0.6s ease-out;
}

@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

.contact-info-frame {
	background: linear-gradient(135deg, rgba(8, 8, 8, 0.6), rgba(18, 18, 18, 0.5));
	border: 2px solid rgba(var(--accent-rgb), 0.15);
	border-radius: 20px;
	padding: 2rem;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4),
	            inset 0 1px 0 rgba(255, 255, 255, 0.03);
	backdrop-filter: blur(15px);
	position: relative;
}

.contact-info-frame::before {
	content: '';
	position: absolute;
	top: -1px;
	left: -1px;
	right: -1px;
	height: 2px;
	background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.4), transparent);
	border-radius: 20px 20px 0 0;
}

.contact-info-card {
	background: linear-gradient(135deg, rgba(11, 11, 11, 0.95), rgba(21, 21, 21, 0.9));
	border: 2px solid rgba(var(--accent-rgb), 0.2);
	border-radius: 16px;
	padding: 2rem;
	text-align: center;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3),
	            0 0 0 1px rgba(var(--accent-rgb), 0.08),
	            inset 0 1px 0 rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(10px);
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
	animation: cardSlideUp 0.5s ease-out both;
}

/* Убран псевдоэлемент ::after - создавал квадратный артефакт при наведении */

@keyframes cardSlideUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.contact-info-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4),
	            0 0 0 1px rgba(var(--accent-rgb), 0.2),
	            inset 0 1px 0 rgba(255, 255, 255, 0.05);
	border-color: rgba(var(--accent-rgb), 0.25);
}

.contact-info-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.15), rgba(var(--accent-2-rgb), 0.1));
	border: 2px solid rgba(var(--accent-rgb), 0.3);
	border-radius: 50%;
	color: var(--accent);
	margin: 0 auto 1.5rem;
	transition: all 0.3s ease;
	box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.2),
	            inset 0 2px 0 rgba(255, 255, 255, 0.1);
}

.contact-info-card:hover .contact-info-icon {
	transform: scale(1.1) rotate(5deg);
	box-shadow: 0 8px 24px rgba(var(--accent-rgb), 0.4),
	            inset 0 2px 0 rgba(255, 255, 255, 0.15);
}

.contact-info-label {
	font-size: 0.875rem;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 0.75rem;
	font-weight: 600;
}

.contact-info-value {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--text);
	word-break: break-all;
}

.contact-form-frame {
	background: linear-gradient(135deg, rgba(8, 8, 8, 0.6), rgba(18, 18, 18, 0.5));
	border: 2px solid rgba(var(--accent-rgb), 0.15);
	border-radius: 20px;
	padding: 2rem;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4),
	            inset 0 1px 0 rgba(255, 255, 255, 0.03);
	backdrop-filter: blur(15px);
	position: relative;
	animation: formFrameSlideUp 0.6s ease-out 0.15s both;
}

.contact-form-frame::before {
	content: '';
	position: absolute;
	top: -1px;
	left: -1px;
	right: -1px;
	height: 2px;
	background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.4), transparent);
	border-radius: 20px 20px 0 0;
}

@keyframes formFrameSlideUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.contact-form-card {
	background: linear-gradient(135deg, rgba(11, 11, 11, 0.95), rgba(21, 21, 21, 0.9));
	border: 2px solid rgba(var(--accent-rgb), 0.2);
	border-radius: 16px;
	padding: 2.5rem;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3),
	            0 0 0 1px rgba(var(--accent-rgb), 0.08),
	            inset 0 1px 0 rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(20px);
	position: relative;
}

.contact-form-card::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100px;
	background: radial-gradient(ellipse at bottom, rgba(var(--accent-rgb), 0.1), transparent);
	pointer-events: none;
}

@keyframes formSlideUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.contact-form-header {
	text-align: center;
	margin-bottom: 2rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid rgba(var(--accent-rgb), 0.1);
}

.contact-form-header h3 {
	color: var(--text);
	font-weight: 700;
	display: inline-flex;
	align-items: center;
}

.contact-form-label {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--text);
	margin-bottom: 0.5rem;
	display: flex;
	align-items: center;
}

.contact-form-input,
.contact-form-textarea {
	background: rgba(0, 0, 0, 0.4) !important;
	border: 1px solid rgba(var(--accent-rgb), 0.15) !important;
	border-radius: 10px !important;
	padding: 0.875rem 1.125rem !important;
	color: var(--text) !important;
	font-size: 0.9375rem !important;
	transition: all 0.3s ease !important;
}

.contact-form-input:focus,
.contact-form-textarea:focus {
	background: rgba(0, 0, 0, 0.5) !important;
	border-color: rgba(var(--accent-rgb), 0.4) !important;
	box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1),
	            inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
	outline: none !important;
}

.contact-form-input::placeholder,
.contact-form-textarea::placeholder {
	color: var(--text-muted) !important;
	opacity: 0.6 !important;
}

.contact-submit-btn {
	width: 100%;
	padding: 1rem 2rem !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	border: none !important;
	border-radius: 12px !important;
	background: linear-gradient(135deg, var(--accent) 0%, #4a90e2 50%, #1e40af 100%) !important;
	color: #ffffff !important;
	box-shadow: 0 8px 24px rgba(var(--accent-rgb), 0.3),
	            inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
	position: relative;
	overflow: hidden;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.contact-submit-btn::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
	transition: left 0.5s ease;
}

.contact-submit-btn:hover::before {
	left: 100%;
}

.contact-submit-btn:hover {
	transform: translateY(-3px) scale(1.02);
	box-shadow: 0 12px 32px rgba(var(--accent-rgb), 0.4),
	            0 0 0 1px rgba(255, 255, 255, 0.1),
	            inset 0 1px 0 rgba(255, 255, 255, 0.3);
	background: linear-gradient(135deg, #9ac5ff 0%, #5a9fe8 50%, #2e52cc 100%) !important;
}

.contact-submit-btn:active {
	transform: translateY(-1px) scale(1);
	box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.3);
}

.contact-page-content {
	background: linear-gradient(135deg, rgba(11, 11, 11, 0.95), rgba(21, 21, 21, 0.9));
	border: 2px solid rgba(var(--accent-rgb), 0.15);
	border-radius: 16px;
	padding: 2.5rem;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3),
	            inset 0 1px 0 rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(10px);
	position: relative;
}

.contact-page-content::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: linear-gradient(90deg, var(--accent), var(--accent-2));
	border-radius: 16px 16px 0 0;
}

/* Блоки «ОТДАЁТЕ / ПОЛУЧАЕТЕ».
   Компактнее по вертикальному паддингу (1.25rem вместо 1.5rem),
   подложка — мягкий вертикальный градиент от полупрозрачного тёмно-синего
   к почти чёрному (вместо плоского rgba), и тонкий цветной акцент сверху,
   который подсвечивается при hover. Bordere-radius чуть уменьшен до 14px
   под стилистику новой submit-кнопки. */
.exchange-block {
	position: relative;
	background: linear-gradient(180deg, rgba(14, 18, 28, 0.72) 0%, rgba(8, 11, 18, 0.82) 100%);
	border: 1px solid rgba(var(--accent-rgb), 0.12);
	border-radius: 14px;
	padding: 1.25rem 1.25rem 1.125rem;
	transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
	/* overflow: visible — иначе `.custom-select-dropdown` обрезается,
	   когда его высота превышает блок (≈300px). `::before` — это
	   декоративная линия, прикреплённая сверху по границам 12%-12%,
	   она не вылезает и не требует hidden. */
	overflow: visible;
}

.exchange-block::before {
	content: '';
	position: absolute;
	top: 0;
	left: 12%;
	right: 12%;
	height: 1px;
	background: linear-gradient(90deg, transparent 0%, rgba(var(--accent-rgb), 0.45) 50%, transparent 100%);
	opacity: 0.65;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

.exchange-block:hover {
	border-color: rgba(var(--accent-rgb), 0.32);
	box-shadow: 0 6px 22px rgba(8, 12, 24, 0.45), 0 0 0 1px rgba(var(--accent-rgb), 0.08) inset;
}

.exchange-block:hover::before {
	opacity: 1;
}

/* Лейбл внутри блока — чуть уменьшаем шрифт под новый компактный размер */
.exchange-block .exchange-label {
	font-size: 0.8125rem;
	margin-bottom: 0.875rem !important;
}

/* КРИТИЧНО: На мобильных убираем hover эффекты для контейнеров */
@media (max-width: 768px) {
	.exchange-block:hover,
	.exchange-block:active,
	.exchange-block:focus {
		border-color: var(--border) !important;
		box-shadow: none !important;
		background: rgba(0, 0, 0, 0.3) !important;
		transition: none !important;
	}
	
	.exchange-block {
		transition: none !important;
	}
}

.exchange-label {
	display: flex;
	align-items: center;
	font-weight: 600;
	font-size: 1rem;
	color: var(--text);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.exchange-arrow-icon {
	width: 64px;
	height: 64px;
	background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.15), rgba(var(--accent-2-rgb), 0.1));
	border: 2px solid rgba(var(--accent-rgb), 0.3);
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--accent);
	animation: pulse-arrow 2s ease-in-out infinite;
	cursor: pointer;
	user-select: none;
	transition: all 0.3s ease;
}

.exchange-arrow-icon:hover {
	background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.25), rgba(var(--accent-2-rgb), 0.2));
	border-color: rgba(var(--accent-rgb), 0.5);
	transform: scale(1.1);
	box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.4);
	animation: none;
}

.exchange-arrow-icon:active {
	transform: scale(0.95);
}

.exchange-arrow-icon.swapping {
	animation: swapRotate 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}

@keyframes swapRotate {
	0% {
		transform: rotate(0deg) scale(1);
	}
	50% {
		transform: rotate(180deg) scale(1.2);
		background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.35), rgba(var(--accent-2-rgb), 0.3));
		box-shadow: 0 0 30px rgba(var(--accent-rgb), 0.6);
		border-color: rgba(var(--accent-rgb), 0.7);
	}
	100% {
		transform: rotate(360deg) scale(1);
	}
}

@keyframes pulse-arrow {
	/* Убрал изменение opacity (раньше 0.9 ↔ 1.0): оно применялось
	   ко всей кнопке .exchange-arrow-icon и роняло насыщенность
	   чёрного зрачка внутри «глаза» — при opacity:0.9 var(--bg)
	   визуально превращался в тёмно-серый. Пульсация теперь
	   полностью через scale, визуально она такая же мягкая. */
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.05); }
}

/* ==========================================================================
   Анимированный «глаз» внутри кнопки swap (.exchange-arrow-icon).

   Семантика:
   - Радужка (.swap-eye-iris) двигается за курсором в пределах глазного яблока
     (управляется из JS — initSwapEyes() в template/views/index.php).
   - При наведении мышью — глаз моргает: scaleY у .swap-eye сжимает картинку
     по вертикали (iris + pupil обрезаются overflow:hidden).
   - При клике — .exchange-arrow-icon получает класс .loading: блик
     исчезает, а поверх зрачка крутится кольцо-лоадер.

   Вложенность:
     .swap-eye                 (ellipsoid scleral белок, overflow: hidden)
       └── .swap-eye-iris      (16px кружок радужки, transform → смещение за курсором)
             └── .swap-eye-pupil (13px чёрный зрачок)
                   ├── .swap-eye-shine  (белый блик, прячется в .loading)
                   └── .swap-eye-loader (крутится в .loading)

   Всё внутри .exchange-arrow-icon — 64×64 круг, поэтому размер глаза
   подобран так, чтобы визуально помещался с «кожей» (фон кнопки) вокруг. */

.exchange-arrow-icon .swap-eye {
	position: relative;
	width: 42px;
	height: 26px;
	/* Вместо чистого эллипса (border-radius:50%) — almond-форма
	   глаза через clip-path: плавные кривые сверху и снизу, острые
	   углы век слева и справа. Путь задан в пиксельных координатах
	   исходя из фиксированного размера 42×26:
	     - левая точка (0,13) и правая (42,13) — это и есть «углы век»;
	     - верхняя кривая: кубическая Безье через (8,0) и (34,0);
	     - нижняя: симметрично через (34,26) и (8,26).
	   При изменении размеров .swap-eye нужно пересчитать координаты
	   пропорционально или переписать path(). */
	clip-path: path('M 0 13 C 8 0, 34 0, 42 13 C 34 26, 8 26, 0 13 Z');
	background: radial-gradient(ellipse at 50% 38%, #f3f6ff 0%, #d6dcef 78%, #b8c2d9 100%);
	/* Box-shadow с clip-path работает нестабильно (в ряде браузеров
	   тень обрезается по форме и выглядит обрезанной по углам).
	   Объём теперь чисто через градиент фона — не на обводку
	   полагаемся, а на освещение «белка». */
	overflow: hidden;
	transform: scaleY(1);
	transform-origin: center center;
	pointer-events: none; /* клики ловит .exchange-arrow-icon */
	/* Явно создаём стекинг-контекст с z-index:0, чтобы дочерние
	   iris/pupil/shine с более высокими z-index гарантированно
	   рисовались поверх фона белка. Без этого в некоторых
	   сочетаниях overflow/clip-path/transform браузер мог
	   перекрасить фон родителя поверх дочерних элементов. */
	z-index: 0;
	isolation: isolate;
}

/* Моргание: быстрое схлопывание по вертикали и обратно. Длительность
   синхронизирована с setTimeout в JS (см. инициализацию swap-eye — 320ms). */
.exchange-arrow-icon .swap-eye.blinking {
	animation: swap-eye-blink 0.32s ease-in-out;
}

@keyframes swap-eye-blink {
	0%, 100% { transform: scaleY(1); }
	45%, 55% { transform: scaleY(0.06); }
}

.exchange-arrow-icon .swap-eye-iris {
	position: absolute;
	width: 16px;
	height: 16px;
	top: 50%;
	left: 50%;
	border-radius: 50%;
	/* Весь движущийся кружок — чистый чёрный. Раньше тут была
	   синяя радужка (radial-gradient), из-за чего «зрачок»
	   визуально читался как синий. Блик сверху-слева (.swap-eye-shine)
	   сохраняет объём без цвета. */
	background: var(--bg) !important;
	background-color: var(--bg) !important;
	background-image: none !important;
	/* Исходная позиция — центр. JS добавляет инлайн-стиль
	   translate(calc(-50% + Xpx), calc(-50% + Ypx)). Transition делает
	   движение плавным без явных промежуточных кадров. */
	transform: translate(-50%, -50%);
	transition: transform 0.12s cubic-bezier(0.25, 0.1, 0.25, 1);
	/* Убрал inset 0 -1px 2px rgba(255,255,255,0.08) — эта светлая
	   внутренняя тень читалась как «белок просвечивает в зрачке».
	   Оставил только тонкий внешний контур, чтобы чёрный круг
	   отчётливо отделялся от светлого белка по краю. */
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
	/* z-index:1 в стекинг-контексте белка — радужка рисуется поверх
	   фона .swap-eye, даже если где-то всплывёт баг с перекраской. */
	z-index: 1;
}

.exchange-arrow-icon .swap-eye-pupil {
	position: absolute;
	/* Было 9px — слишком мелко внутри 16px-радужки: зрачок визуально
	   «растворялся» в синей радужке, из-за чего читался как синий.
	   13px оставляет от радужки тонкое кольцо ~1.5px — зрачок
	   чётко доминирует и однозначно читается как чёрный. */
	width: 13px;
	height: 13px;
	top: 50%;
	left: 50%;
	border-radius: 50%;
	/* !important + дублирующий background-color + background-image:none —
	   страховка от любых глобальных/инлайновых правил, которые могли
	   бы ненароком подкрасить зрачок (у нас их нет, но мало ли). */
	background: var(--bg) !important;
	background-color: var(--bg) !important;
	background-image: none !important;
	transform: translate(-50%, -50%);
	/* Явно отрубаем наследование прозрачности с родителя на случай,
	   если анимация какая-нибудь снова подкинет opacity < 1. */
	opacity: 1 !important;
	/* z-index:2 — зрачок поверх радужки внутри её стекинг-контекста. */
	z-index: 2;
}

.exchange-arrow-icon .swap-eye-shine {
	/* Блик скрыт: пользователь считывал этот белый пиксель как
	   «белок, просвечивающий сквозь зрачок». Оставил элемент в
	   DOM (на случай, если захотим вернуть) через display:none,
	   но он не рендерится и не влияет на лейаут. */
	display: none;
}

/* Лоадер: тонкое кольцо вокруг зрачка (по размеру pupil), виден только
   когда .exchange-arrow-icon.loading. Вращение — infinite, но пока
   opacity: 0 — CSS спокойно пересчитывает анимацию вхолостую (GPU). */
.exchange-arrow-icon .swap-eye-loader {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 1.5px solid transparent;
	border-top-color: rgba(168, 205, 255, 1);
	border-right-color: rgba(168, 205, 255, 0.6);
	transform: translate(-50%, -50%);
	opacity: 0;
	animation: swap-eye-loader-spin 0.65s linear infinite;
	pointer-events: none;
}

/* Состояние «загрузка»: лоадер появляется, блик гасим, чтобы не
   мешал читаемости крутилки. Класс навешивается на .exchange-arrow-icon
   из JS при mousedown/touchstart. */
.exchange-arrow-icon.loading .swap-eye-loader {
	opacity: 1;
}

.exchange-arrow-icon.loading .swap-eye-shine {
	opacity: 0;
}

@keyframes swap-eye-loader-spin {
	from { transform: translate(-50%, -50%) rotate(0deg); }
	to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Уважаем prefers-reduced-motion: гасим блинк и крутилку, а слежку
   радужки JS тоже отключит (через matchMedia). */
@media (prefers-reduced-motion: reduce) {
	.exchange-arrow-icon .swap-eye.blinking {
		animation: none;
	}
	.exchange-arrow-icon .swap-eye-loader {
		animation: none;
	}
}

/* .exchange-amount — контейнер-обёртка поля ввода суммы.
   Делаем всю обёртку чёрной плашкой с тем же border-radius, что и
   у .form-control внутри — так не остаётся никакой полоски градиента
   .exchange-block по краям инпута, если сам input не заполняет
   обёртку на все 100% высоты. Border прозрачный, чтобы не было
   светлой рамки вокруг — хотим плоский матовый чёрный. */
.exchange-amount {
	background: var(--bg) !important;
	border-radius: 12px;
	overflow: hidden;
}

.exchange-amount input {
	font-size: 1.25rem;
	font-weight: 600;
	text-align: center;
	width: 100%;
	/* Высоту поля уменьшили примерно на треть (было ~56–70px,
	   стало ~44px): укоротили вертикальный паддинг, занизили
	   min-height и line-height, шрифт 1.25rem — этого достаточно
	   для крупных цифр суммы, но плашка стала компактнее. */
	min-height: 44px !important;
	height: 44px !important;
	line-height: 1.2 !important;
	padding: 0.5rem 1rem !important;
	background: var(--bg) !important;
	border: 1px solid transparent !important;
	box-shadow: none !important;
	pointer-events: auto !important;
	user-select: text !important;
	-webkit-user-select: text !important;
}

/* Держим чистый чёрный фон внутри .exchange-amount во всех состояниях
   инпута — включая hover, focus и disabled, чтобы не было перехода
   к #050505/var(--surface) из общих .form-control правил. */
.exchange-amount input:hover,
.exchange-amount input:focus,
.exchange-amount input:active,
.exchange-amount input:disabled {
	background: var(--bg) !important;
	border-color: transparent !important;
	box-shadow: none !important;
}

/* КРИТИЧНО: убираем opacity: 0.5 от .form-control:disabled — без этого
   чёрный #000 становится полупрозрачным и сквозь него просвечивает
   градиент .exchange-block, из-за чего поле выглядит тёмно-серым
   вместо чёрного. Также явно гасим filter/backdrop-filter на всякий
   случай. */
.exchange-amount,
.exchange-amount input,
.exchange-amount input:disabled,
.exchange-amount input[disabled],
.exchange-amount input[readonly] {
	opacity: 1 !important;
	filter: none !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}

/* ===== Чёрные поля формы обмена =====
   Приводим к ЕДИНОМУ чистому чёрному (#000) обе визуальные плашки
   внутри .exchange-block:
     1) дропдаун валюты .custom-select-trigger (был var(--surface) — тёмно-серый)
     2) обёртку суммы .exchange-amount и её инпут (выше уже чёрные)
   Перекрываем общие .form-control / .custom-select-trigger правила
   с var(--surface) с помощью !important и повышенной специфичностью через
   .exchange-block. Также нейтрализуем hover/active/focus состояния,
   чтобы фон не становился #0f0f0f при взаимодействии. */
.exchange-block .custom-select-trigger,
.exchange-block .custom-select-trigger:hover,
.exchange-block .custom-select-trigger:focus,
.exchange-block .custom-select-trigger:active,
.exchange-block .custom-select-trigger.active {
	background: var(--bg) !important;
	background-color: var(--bg) !important;
	background-image: none !important;
}

.exchange-block .exchange-amount,
.exchange-block .exchange-amount input,
.exchange-block .exchange-amount input:hover,
.exchange-block .exchange-amount input:focus,
.exchange-block .exchange-amount input:active,
.exchange-block .exchange-amount input:disabled,
.exchange-block .exchange-amount input[disabled],
.exchange-block .exchange-amount input[readonly] {
	background: var(--bg) !important;
	background-color: var(--bg) !important;
	background-image: none !important;
	opacity: 1 !important;
}

/* ===== Search Input ===== */
.search-wrapper {
	position: relative;
}

.search-icon {
	position: absolute;
	left: 1rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--text-muted);
	pointer-events: none;
}

.form-control-search {
	padding-left: 2.75rem !important;
}

.form-control, .form-select {
	background: var(--surface) !important;
	border: 1px solid var(--border) !important;
	color: var(--text) !important;
	border-radius: 12px;
	padding: 0.75rem 1rem;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control::placeholder {
	color: #6b7280;
}

.form-control:focus, .form-select:focus {
	background: var(--surface) !important;
	border-color: var(--accent) !important;
	box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1) !important;
	color: var(--text) !important;
	outline: none;
}

.form-control:disabled, .form-select:disabled {
	background: #050505;
	border-color: rgba(255, 255, 255, 0.03);
	color: var(--text-muted);
	opacity: 0.5;
	cursor: not-allowed;
}

.form-select-lg, .form-control-lg {
	padding: 1rem 1.25rem;
	font-size: 1.125rem;
	border-radius: 12px;
	min-height: 56px;
}

/* Стили для ошибки лимита суммы в Swap */
.exchange-numeric-input.amount-limit-error {
	color: #ff6b6b !important;
	border-color: rgba(255, 107, 107, 0.4) !important;
	background: linear-gradient(135deg, rgba(255, 107, 107, 0.08), rgba(255, 107, 107, 0.05)) !important;
	box-shadow: 0 0 0 1px rgba(255, 107, 107, 0.2), 0 4px 12px rgba(255, 107, 107, 0.15) !important;
}

.currency-select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	cursor: pointer;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
	font-weight: 600;
	font-size: 0.9375rem;
	letter-spacing: -0.01em;
	color: #e8edf4 !important;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	padding-right: 1rem;
	background-image: none;
	position: relative;
	background-color: var(--surface) !important;
	background: linear-gradient(135deg, rgba(15, 15, 15, 0.8), rgba(10, 10, 10, 0.9)) !important;
	color-scheme: dark;
}

/* Remove all native select arrows and spinners */
.currency-select::-ms-expand {
	display: none;
}

.currency-select:hover {
	border-color: rgba(var(--accent-rgb), 0.6);
	background: linear-gradient(135deg, rgba(20, 20, 20, 0.9), rgba(15, 15, 15, 0.95));
	box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1), 0 4px 12px rgba(0, 0, 0, 0.3);
	transform: translateY(-1px);
}

.currency-select:focus {
	border-color: var(--accent);
	background: linear-gradient(135deg, rgba(20, 20, 20, 0.95), rgba(15, 15, 15, 1));
	box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.2), 0 8px 24px rgba(var(--accent-rgb), 0.15);
	outline: none;
	transform: translateY(-2px);
}

/* Hide scrollbar in dropdown */
.currency-select::-webkit-scrollbar {
	width: 0;
	height: 0;
	display: none;
}

.currency-select {
	scrollbar-width: none;
	-ms-overflow-style: none;
}

/* Styled option cards */
.currency-select option {
	background-color: var(--surface) !important;
	background: linear-gradient(135deg, rgba(5, 5, 5, 0.98), rgba(0, 0, 0, 1)) !important;
	color: #9aa3af !important;
	padding: 0.875rem 1rem;
	margin: 0.25rem 0.375rem;
	border-radius: 8px;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
	font-weight: 500;
	font-size: 0.875rem;
	letter-spacing: -0.005em;
	line-height: 1.5;
	border: 1px solid rgba(255, 255, 255, 0.05);
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover state with gradient animation */
.currency-select option:hover {
	background-color: #151518 !important;
	background: linear-gradient(135deg, rgba(20, 20, 25, 0.95), rgba(15, 15, 18, 0.98)) !important;
	color: #e6eaf0 !important;
	font-weight: 600;
	border-color: rgba(var(--accent-rgb), 0.25);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(var(--accent-rgb), 0.1);
	transform: translateX(3px) scale(1.01);
}

/* Checked/selected state */
.currency-select option:checked {
	background-color: #1a1a1e !important;
	background: linear-gradient(135deg, rgba(25, 25, 30, 0.98), rgba(18, 18, 22, 1)) !important;
	color: var(--accent) !important;
	font-weight: 700;
	border-color: rgba(var(--accent-rgb), 0.35);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(var(--accent-rgb), 0.15);
}

/* Focus state */
.currency-select option:focus {
	background-color: #121216 !important;
	background: linear-gradient(135deg, rgba(22, 22, 27, 0.96), rgba(16, 16, 20, 0.99)) !important;
	color: #e6eaf0 !important;
	font-weight: 600;
	border-color: rgba(var(--accent-rgb), 0.3);
	outline: none;
}

/* ===== Custom Select (Dark Theme) ===== */
.custom-select-wrapper {
	position: relative;
	width: 100%;
	/* Базовый z-index чтобы обёртка создавала контекст над соседями
	   внутри .exchange-block (кнопки, инпут суммы и т.п.). */
	z-index: 1;
}

/* Когда триггер активен (или внутри есть открытый dropdown) — поднимаем
   и саму обёртку, и сам .exchange-block, чтобы выпадающий список не
   уходил ПОД соседний блок (другую валюту, тип курса, адрес и т.д.).
   `:has()` поддерживается во всех актуальных браузерах (Chrome 105+,
   Safari 15.4+, Firefox 121+). */
.custom-select-wrapper:has(.custom-select-trigger.active),
.custom-select-wrapper:has(.custom-select-dropdown.active) {
	z-index: 100;
}

.exchange-block:has(.custom-select-dropdown.active),
.exchange-block:has(.custom-select-trigger.active) {
	z-index: 100;
}

.custom-select-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.25rem;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 12px;
	cursor: pointer;
	transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
	            background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
	            transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
	            box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	min-height: 56px;
	will-change: transform, background-color;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
	/* GPU ускорение для мобильных */
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
}

.custom-select-trigger:hover {
	border-color: rgba(var(--accent-rgb), 0.6);
	background: #0f0f0f;
	box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
	transform: translateY(-1px);
}

.custom-select-trigger.active {
	border-color: var(--accent);
	background: #0f0f0f;
	box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.2);
}

.custom-select-value {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	font-weight: 600;
	font-size: 0.9375rem;
	color: #e8edf4;
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.custom-select-arrow {
	color: var(--accent);
	transition: none !important;
	flex-shrink: 0;
	will-change: auto;
}

.custom-select-trigger.active .custom-select-arrow {
	transform: rotate(180deg);
}

.custom-select-dropdown {
	position: absolute;
	top: calc(100% + 0.5rem);
	left: 0;
	right: 0;
	background: var(--surface) !important;
	background-color: var(--surface) !important;
	backdrop-filter: none !important;
	border: 1px solid rgba(var(--accent-rgb), 0.3);
	border-radius: 12px;
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(var(--accent-rgb), 0.1);
	max-height: 400px;
	overflow: hidden;
	/* z-index поднят до 99999: в проекте встречается флоатинг-кнопка
	   чата, rate-refresh pill, modal backdrop и прочее с 10k+, из-за
	   чего 10000 порой перекрывался. */
	z-index: 99999;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px) translateZ(0);
	-webkit-transform: translateY(-8px) translateZ(0);
	/* Мгновенное закрытие без анимации - по аналогии с мобильной версией */
	transition: none !important;
	transition-delay: 0s;
	will-change: transform, opacity;
	pointer-events: none;
	/* GPU ускорение */
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	/* КРИТИЧНО: Разрешаем скролл через закрытый dropdown на мобильных */
	touch-action: none;
}

/* При закрытии отключаем все transition для ВСЕХ элементов внутри dropdown - десктоп и мобильные */
.custom-select-dropdown:not(.active) *,
.custom-select-dropdown:not(.active) *::before,
.custom-select-dropdown:not(.active) *::after {
	transition: none !important;
	animation: none !important;
	transform: none !important;
}

/* Специально для опций, фильтров и поиска при закрытии */
.custom-select-dropdown:not(.active) .custom-select-option,
.custom-select-dropdown:not(.active) .custom-select-options,
.custom-select-dropdown:not(.active) .custom-select-search,
.custom-select-dropdown:not(.active) .custom-select-search-input,
.custom-select-dropdown:not(.active) .select-filter-btn {
	transition: none !important;
	animation: none !important;
	transform: none !important;
}

.custom-select-dropdown.active {
	opacity: 1 !important;
	visibility: visible;
	transform: translateY(0) translateZ(0);
	-webkit-transform: translateY(0) translateZ(0);
	background: var(--surface) !important;
	background-color: var(--surface) !important;
	pointer-events: auto;
	overflow: hidden;
	/* Мгновенное открытие без анимации для максимальной скорости */
	transition: none !important;
	transition-delay: 0s;
	/* КРИТИЧНО: Разрешаем скролл внутри открытого dropdown */
	touch-action: pan-y;
	-webkit-overflow-scrolling: touch;
}

.custom-select-search {
	padding: 0.75rem;
	border-bottom: 1px solid var(--border);
}

.custom-select-search-input {
	width: 100%;
	padding: 0.625rem 1rem;
	background: #050505 !important;
	background-color: #050505 !important;
	border: 1px solid var(--border);
	border-radius: 8px;
	color: #e8edf4;
	font-size: 0.875rem;
	outline: none;
	transition: all 0.2s ease;
}

.custom-select-search-input:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
}

.custom-select-options {
	max-height: 320px;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 0.5rem;
	padding-bottom: 5rem;
	scrollbar-width: thin;
	scrollbar-color: rgba(var(--accent-rgb), 0.3) transparent;
	/* Обеспечиваем возможность прокрутки до конца списка */
	scroll-padding-bottom: 5rem;
	/* КРИТИЧЕСКИ ВАЖНО: Предотвращаем выход контента за границы */
	box-sizing: border-box;
	width: 100%;
	/* Добавляем псевдоэлемент для дополнительного отступа внизу */
	position: relative;
}

.custom-select-options::after {
	content: '';
	display: block;
	height: 3rem;
	width: 100%;
	flex-shrink: 0;
}

.custom-select-options::-webkit-scrollbar {
	width: 6px;
}

.custom-select-options::-webkit-scrollbar-track {
	background: transparent;
}

.custom-select-options::-webkit-scrollbar-thumb {
	background: rgba(var(--accent-rgb), 0.3);
	border-radius: 3px;
}

.custom-select-options::-webkit-scrollbar-thumb:hover {
	background: rgba(var(--accent-rgb), 0.5);
}

.custom-select-options .custom-select-option,
.custom-select-option {
	display: flex !important;
	align-items: center !important;
	gap: 0.75rem !important;
	padding: 0.875rem 1rem !important;
	background: rgba(5, 5, 5, 0.98) !important;
	border: 1px solid rgba(255, 255, 255, 0.05) !important;
	border-radius: 8px !important;
	margin-bottom: 0.375rem !important;
	cursor: pointer !important;
	transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
	            border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
	            color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
	            transform 0.15s cubic-bezier(0.4, 0, 0.2, 1),
	            box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
	font-weight: 500 !important;
	font-size: 0.875rem !important;
	color: #9aa3af !important;
	will-change: transform, background-color;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
	/* GPU ускорение */
	transform: translateZ(0) !important;
	-webkit-transform: translateZ(0) !important;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	/* ВАЖНО: Убеждаемся, что элемент виден как карточка */
	min-height: 48px;
	box-sizing: border-box;
}

.custom-select-option:hover {
	background: linear-gradient(135deg, rgba(20, 20, 25, 0.95), rgba(15, 15, 18, 0.98));
	color: #e6eaf0;
	font-weight: 600;
	border-color: rgba(var(--accent-rgb), 0.25);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(var(--accent-rgb), 0.1);
	transform: translateX(3px) scale(1.01);
}

/* Стили для групп валют (currency-group) */
.currency-group {
	margin-bottom: 0.375rem;
	border-radius: 8px;
	overflow: hidden;
}

.currency-group-header {
	display: flex !important;
	align-items: center !important;
	gap: 0.75rem !important;
	padding: 0.875rem 1rem !important;
	background: rgba(5, 5, 5, 0.98) !important;
	border: 1px solid rgba(255, 255, 255, 0.05) !important;
	border-radius: 8px !important;
	cursor: pointer !important;
	transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
	            border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
	            color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
	            transform 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
	position: relative !important;
	color: #9aa3af !important;
	font-weight: 500 !important;
	font-size: 0.875rem !important;
	min-height: 48px;
	box-sizing: border-box;
}

.currency-group-header:hover {
	background: linear-gradient(135deg, rgba(20, 20, 25, 0.95), rgba(15, 15, 18, 0.98));
	border-color: rgba(var(--accent-rgb), 0.25);
	color: #e6eaf0;
	transform: translateX(3px);
}

.currency-group-header .currency-group-arrow {
	margin-left: auto;
	transition: transform 0.3s ease;
	color: var(--accent);
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.currency-group.expanded .currency-group-header {
	background: linear-gradient(135deg, rgba(25, 25, 30, 0.98), rgba(20, 20, 25, 0.98));
	border-color: rgba(var(--accent-rgb), 0.3);
	color: #e6eaf0;
}

.currency-group-networks {
	display: none;
	padding-left: 1rem;
	padding-top: 0.375rem;
	padding-bottom: 0.375rem;
	background: rgba(5, 5, 5, 0.5);
	border-left: 2px solid rgba(var(--accent-rgb), 0.2);
	margin-left: 0.5rem;
	margin-top: 0.375rem;
	border-radius: 0 0 8px 8px;
}

.currency-group.expanded .currency-group-networks {
	display: block;
}

.currency-network-option {
	padding: 0.625rem 0.875rem !important;
	padding-left: 2rem !important;
	font-size: 0.875rem !important;
	color: #9aa3af !important;
	cursor: pointer !important;
	transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
	            color 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
	border-radius: 6px !important;
	margin-bottom: 0.25rem !important;
	display: flex !important;
	align-items: center !important;
	background: transparent !important;
	border: none !important;
	min-height: 40px;
	box-sizing: border-box;
}

.currency-network-option:hover {
	background: rgba(var(--accent-rgb), 0.1);
	color: #e6eaf0;
}

.currency-network-option.selected {
	background: rgba(var(--accent-rgb), 0.2);
	color: var(--accent);
	font-weight: 600;
}


/* CSS фильтрация через data-атрибуты (минимальная нагрузка - без JavaScript) */
/* Используем селектор [data-category*="..."] для поиска категории в строке с пробелами */

/* КРИТИЧЕСКИ ВАЖНО: Скрываем все неактивные монеты во всех фильтрах */
.custom-select-options .custom-select-option.is-disabled {
	display: none !important;
}

.custom-select-options[data-filter="all"] .custom-select-option:not(.is-disabled),
.custom-select-options[data-filter="all"] .currency-group {
	display: flex !important;
}

.custom-select-options[data-filter="all"] .currency-group {
	display: block !important;
}

/* Фильтры для Fiat (usd, rub, coin) */
.custom-select-options[data-filter="usd"] .custom-select-option:not([data-category*="usd"]):not(.is-disabled),
.custom-select-options[data-filter="rub"] .custom-select-option:not([data-category*="rub"]):not(.is-disabled),
.custom-select-options[data-filter="coin"] .custom-select-option:not([data-category*="coin"]):not(.is-disabled),
.custom-select-options[data-filter="usd"] .currency-group:not([data-category*="usd"]),
.custom-select-options[data-filter="rub"] .currency-group:not([data-category*="rub"]),
.custom-select-options[data-filter="coin"] .currency-group:not([data-category*="coin"]) {
	display: none !important;
}

/* Показываем опции с нужной категорией для Fiat */
.custom-select-options[data-filter="usd"] .custom-select-option[data-category*="usd"]:not(.is-disabled),
.custom-select-options[data-filter="rub"] .custom-select-option[data-category*="rub"]:not(.is-disabled),
.custom-select-options[data-filter="coin"] .custom-select-option[data-category*="coin"]:not(.is-disabled),
.custom-select-options[data-filter="usd"] .currency-group[data-category*="usd"],
.custom-select-options[data-filter="rub"] .currency-group[data-category*="rub"],
.custom-select-options[data-filter="coin"] .currency-group[data-category*="coin"] {
	display: flex !important;
}

/* Show disabled options matching active category filter (visible but dimmed, still clickable) */
.custom-select-options[data-filter="usd"] .custom-select-option[data-category*="usd"].is-disabled,
.custom-select-options[data-filter="rub"] .custom-select-option[data-category*="rub"].is-disabled,
.custom-select-options[data-filter="coin"] .custom-select-option[data-category*="coin"].is-disabled {
	display: flex !important;
	opacity: 0.5;
}

.custom-select-options[data-filter="usd"] .currency-group[data-category*="usd"],
.custom-select-options[data-filter="rub"] .currency-group[data-category*="rub"],
.custom-select-options[data-filter="coin"] .currency-group[data-category*="coin"] {
	display: block !important;
}

/* Фильтры для Swap/Bridge/DEX (stable, popular, new, gainers, losers) */
.custom-select-options[data-filter="stable"] .custom-select-option:not([data-category*="stable"]):not(.is-disabled),
.custom-select-options[data-filter="popular"] .custom-select-option:not([data-category*="popular"]):not(.is-disabled),
.custom-select-options[data-filter="new"] .custom-select-option:not([data-category*="new"]):not(.is-disabled),
.custom-select-options[data-filter="gainers"] .custom-select-option:not([data-category*="gainers"]):not(.is-disabled),
.custom-select-options[data-filter="losers"] .custom-select-option:not([data-category*="losers"]):not(.is-disabled),
.custom-select-options[data-filter="stable"] .currency-group:not([data-category*="stable"]),
.custom-select-options[data-filter="popular"] .currency-group:not([data-category*="popular"]),
.custom-select-options[data-filter="new"] .currency-group:not([data-category*="new"]),
.custom-select-options[data-filter="gainers"] .currency-group:not([data-category*="gainers"]),
.custom-select-options[data-filter="losers"] .currency-group:not([data-category*="losers"]) {
	display: none !important;
}

/* Показываем опции с нужной категорией для Swap/Bridge/DEX */
.custom-select-options[data-filter="stable"] .custom-select-option[data-category*="stable"]:not(.is-disabled),
.custom-select-options[data-filter="popular"] .custom-select-option[data-category*="popular"]:not(.is-disabled),
.custom-select-options[data-filter="new"] .custom-select-option[data-category*="new"]:not(.is-disabled),
.custom-select-options[data-filter="gainers"] .custom-select-option[data-category*="gainers"]:not(.is-disabled),
.custom-select-options[data-filter="losers"] .custom-select-option[data-category*="losers"]:not(.is-disabled),
.custom-select-options[data-filter="stable"] .currency-group[data-category*="stable"],
.custom-select-options[data-filter="popular"] .currency-group[data-category*="popular"],
.custom-select-options[data-filter="new"] .currency-group[data-category*="new"],
.custom-select-options[data-filter="gainers"] .currency-group[data-category*="gainers"],
.custom-select-options[data-filter="losers"] .currency-group[data-category*="losers"] {
	display: flex !important;
}

.custom-select-options[data-filter="stable"] .currency-group[data-category*="stable"],
.custom-select-options[data-filter="popular"] .currency-group[data-category*="popular"],
.custom-select-options[data-filter="new"] .currency-group[data-category*="new"],
.custom-select-options[data-filter="gainers"] .currency-group[data-category*="gainers"],
.custom-select-options[data-filter="losers"] .currency-group[data-category*="losers"] {
	display: block !important;
}

/* КРИТИЧНО: блок поиска должен идти ПОСЛЕ всех data-filter правил ниже.
 * При равной специфичности (0,4,0) и одинаковом !important побеждает то
 * правило, что определено позже в файле. Если data-search стоит раньше
 * data-filter="all"/"usd"/... — активный фильтр "перебивает" скрытие
 * несовпадающих по поиску элементов, и поиск визуально не фильтрует список. */
/* Поиск - скрываем элементы без совпадений */
.custom-select-options[data-search] .custom-select-option:not([data-search-match]),
.custom-select-options[data-search] .currency-group:not([data-search-match]) {
	display: none !important;
}

.custom-select-options[data-search] .custom-select-option[data-search-match],
.custom-select-options[data-search] .currency-group[data-search-match] {
	display: flex !important;
	visibility: visible !important;
}

.custom-select-options[data-search] .currency-group[data-search-match] {
	display: block !important;
}

.custom-select-option.selected {
	background: linear-gradient(135deg, rgba(25, 25, 30, 0.98), rgba(18, 18, 22, 1));
	color: var(--accent);
	font-weight: 700;
	border-color: rgba(var(--accent-rgb), 0.35);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(var(--accent-rgb), 0.15);
}

.custom-select-icon {
	border-radius: 50%;
	flex-shrink: 0;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.custom-select-option.hidden {
	display: none;
}

.custom-select-option.is-disabled {
	opacity: 0.35;
	filter: grayscale(0.55);
	pointer-events: none;
}

.custom-select-option.is-disabled .custom-select-icon {
	opacity: 0.85;
	filter: grayscale(0.5);
}

.custom-select-options .custom-select-option:last-child {
	margin-bottom: 0.5rem;
	/* Обеспечиваем видимость последнего элемента при прокрутке */
	padding-bottom: 0.25rem;
}

/* Обеспечиваем достаточный отступ для последней группы валют */
.custom-select-options .currency-group:last-child {
	margin-bottom: 3.5rem;
}

/* Обеспечиваем достаточный отступ для последнего элемента сети в группе */
.currency-group-networks .currency-network-option:last-child {
	margin-bottom: 1.5rem !important;
	padding-bottom: 1.5rem !important;
}

/* Обеспечиваем достаточный отступ для последней группы сетей */
.currency-group-networks:last-child {
	padding-bottom: 2.5rem;
}

@media (max-width: 768px) {
	/* Максимальная оптимизация для мобильных - минимальные анимации */
	.custom-select-trigger {
		/* Только необходимые transition - убираем transform и box-shadow для производительности */
		transition: border-color 0.1s ease,
		            background-color 0.1s ease;
		will-change: auto; /* Убираем will-change на мобильных */
	}
	
	.custom-select-trigger:hover {
		transform: none !important; /* Отключаем transform на мобильных */
		box-shadow: none !important; /* Отключаем box-shadow на мобильных */
	}

	/* Фильтры (ВСЕ / USD / RUB / COIN): не вылезают за ширину dropdown */
	.custom-select-dropdown .custom-select-filters {
		display: flex !important;
		flex-wrap: wrap !important;
		gap: 0.25rem !important;
		padding: 0.35rem 0.4rem !important;
		box-sizing: border-box !important;
	}

	.custom-select-dropdown .custom-select-filters .select-filter-btn {
		flex: 1 1 calc((100% - 0.25rem) / 2) !important;
		min-width: 0 !important;
		padding: 0.28rem 0.35rem !important;
		font-size: 0.625rem !important;
		letter-spacing: 0.04em !important;
		line-height: 1.15 !important;
		border-radius: 8px !important;
		box-sizing: border-box !important;
	}
	
	.custom-select-dropdown {
		/* Убираем scale - только translateY для производительности */
		transform: translateY(-4px);
		/* Мгновенное закрытие без анимации на мобильных */
		transition: none !important;
		will-change: auto; /* Убираем will-change */
		/* КРИТИЧНО: Закрытый dropdown не должен блокировать скролл */
		pointer-events: none !important;
		touch-action: none !important;
	}
	
	/* КРИТИЧНО: Закрытые dropdown не должны создавать слепые зоны при скролле */
	.custom-select-dropdown:not(.active) {
		pointer-events: none !important;
		touch-action: none !important;
		/* Убираем из потока событий полностью */
		/* display управляется через JavaScript inline стили, но pointer-events: none предотвращает блокировку скролла */
	}
	
	/* КРИТИЧНО: Все контейнеры в Swap должны разрешать скролл */
	#swap-exchange .exchange-currency-block,
	#swap-exchange .exchange-amount,
	#swap-exchange .custom-select-wrapper,
	#swap-exchange .exchange-tab-content {
		touch-action: pan-y !important;
		-webkit-overflow-scrolling: touch !important;
		overscroll-behavior-y: auto !important;
		pointer-events: auto !important;
	}
	
	/* КРИТИЧНО: Wrapper всегда должен разрешать скролл, кроме когда dropdown активен */
	.custom-select-wrapper {
		pointer-events: auto !important;
		touch-action: pan-y !important;
	}
	
	/* КРИТИЧНО: Когда dropdown активен, wrapper должен пропускать события к dropdown */
	.custom-select-wrapper .custom-select-dropdown.active {
		pointer-events: auto !important;
		touch-action: pan-y !important;
	}
	
	/* Увеличиваем padding-bottom для мобильных устройств */
	.custom-select-options {
		padding-bottom: 6rem !important;
		scroll-padding-bottom: 6rem !important;
	}
	
	.custom-select-options::after {
		height: 4rem !important;
	}
	
	/* Увеличиваем отступы для последних элементов на мобильных */
	.custom-select-options .currency-group:last-child {
		margin-bottom: 4.5rem !important;
	}
	
	.currency-group-networks .currency-network-option:last-child {
		margin-bottom: 2.5rem !important;
		padding-bottom: 2.5rem !important;
	}
	
	.currency-group-networks:last-child {
		padding-bottom: 3.5rem !important;
	}
	
	.custom-select-dropdown.active {
		/* Мгновенное открытие без анимации для максимальной скорости */
		transform: translateY(0);
		transition: none !important;
		transition-delay: 0s;
		will-change: auto;
		/* КРИТИЧНО: Открытый dropdown должен быть видимым и не блокировать скролл */
		display: block !important;
		pointer-events: auto !important;
		touch-action: pan-y !important;
		-webkit-overflow-scrolling: touch !important;
	}
	
	/* Мгновенное закрытие - убираем все transition когда dropdown не активен */
	.custom-select-dropdown:not(.active) {
		transition: none !important;
		opacity: 0 !important;
		visibility: hidden !important;
		transform: translateY(-4px) !important;
	}
	
	/* При закрытии полностью отключаем transition для ВСЕХ элементов внутри dropdown */
	.custom-select-dropdown:not(.active) *,
	.custom-select-dropdown:not(.active) *::before,
	.custom-select-dropdown:not(.active) *::after {
		transition: none !important;
		animation: none !important;
		transform: none !important;
		opacity: 1 !important;
	}
	
	/* Специально для опций, фильтров и поиска */
	.custom-select-dropdown:not(.active) .custom-select-option,
	.custom-select-dropdown:not(.active) .custom-select-options,
	.custom-select-dropdown:not(.active) .custom-select-search,
	.custom-select-dropdown:not(.active) .custom-select-search-input,
	.custom-select-dropdown:not(.active) .select-filter-btn {
		transition: none !important;
		animation: none !important;
		transform: none !important;
		opacity: 1 !important;
	}
	
	.custom-select-arrow {
		/* Упрощенная анимация стрелки */
		transition: transform 0.08s ease;
		will-change: auto; /* Убираем will-change */
	}
	
	.custom-select-option {
		/* Минимальные transition - только background-color для производительности */
		transition: background-color 0.1s ease;
		will-change: auto; /* Убираем will-change */
	}
	
	.custom-select-option:hover {
		transform: none !important; /* Отключаем transform на мобильных */
		box-shadow: none !important; /* Отключаем box-shadow на мобильных */
	}
	
	/* Оптимизация Bootstrap dropdown для мобильных */
	.dropdown-menu {
		/* Закрытие быстрее на мобильных - только GPU свойства */
		transition: opacity 0.1s cubic-bezier(0.4, 0, 0.2, 1),
		            transform 0.1s cubic-bezier(0.4, 0, 0.2, 1) !important;
		transition-delay: 0s;
		will-change: transform, opacity;
	}
	
	.dropdown-menu.show {
		transform: translateY(0) !important;
		opacity: 1 !important;
		/* При открытии нормальная скорость */
		transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1),
		            transform 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
		transition-delay: 0s;
	}
	
	.dropdown-item {
		transition: background-color 0.12s cubic-bezier(0.4, 0, 0.2, 1) !important;
		will-change: background-color;
		-webkit-tap-highlight-color: transparent;
		touch-action: manipulation;
	}
}

@media (max-width: 576px) {
	.custom-select-options {
		padding-bottom: 2rem;
	}

	.custom-select-trigger,
	.custom-select-dropdown,
	.custom-select-option {
		box-shadow: none !important;
		backdrop-filter: none !important;
	}

	.custom-select-option:hover {
		transform: none;
	}
}

/* ===== Currency List ===== */
.currency-list {
	max-height: 400px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--border) transparent;
}

.currency-list::-webkit-scrollbar {
	width: 6px;
}

.currency-list::-webkit-scrollbar-track {
	background: transparent;
}

.currency-list::-webkit-scrollbar-thumb {
	background: var(--border);
	border-radius: 3px;
}

.currency-list::-webkit-scrollbar-thumb:hover {
	background: var(--surface-light);
}

.currency-item {
	display: flex;
	align-items: center;
	padding: 0.875rem 1rem;
	border-radius: 10px;
	margin-bottom: 0.5rem;
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid transparent;
	cursor: pointer;
	transition: all 0.2s ease;
}

.currency-item:hover {
	background: rgba(var(--accent-rgb), 0.08);
	border-color: rgba(var(--accent-rgb), 0.2);
	transform: translateX(4px);
}

.currency-icon {
	border-radius: 50%;
	margin-right: 1rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
	transition: transform 0.2s ease;
}

.currency-item:hover .currency-icon {
	transform: scale(1.1);
}

.currency-info {
	flex: 1;
}

.currency-name {
	font-weight: 600;
	color: var(--text);
	font-size: 0.95rem;
}

.currency-arrow {
	color: var(--text-muted);
	transition: all 0.2s ease;
}

.currency-item:hover .currency-arrow {
	color: var(--accent);
	transform: translateX(4px);
}

/* ===== Cards (General) ===== */
.card {
	background: var(--surface) !important;
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0) 40%) !important;
	border: 1px solid var(--border) !important;
	border-radius: 20px !important;
	color: var(--text) !important;
	overflow: hidden;
	box-shadow: var(--shadow) !important;
}

.card-header {
	background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.05), rgba(var(--accent-2-rgb), 0.03)) !important;
	border-bottom: 1px solid var(--border) !important;
	padding: 1.25rem 1.5rem;
	font-weight: 600;
	color: var(--text) !important;
}

.card-body {
	padding: 1.5rem;
	background: transparent !important;
}

.shadow-sm {
	box-shadow: var(--shadow);
}

/* ===== Rates List - Gradient Styles ===== */
.rates-list {
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
	padding: 1.5rem;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.1), transparent 50%);
}

.rate-row {
	display: grid;
	grid-template-columns: 1fr 1fr 1.5fr 1.2fr auto;
	align-items: center;
	gap: 1.5rem;
	padding: 1.25rem 1.75rem;
	background: linear-gradient(135deg, rgba(11, 11, 11, 0.95), rgba(21, 21, 21, 0.9));
	border: 1px solid rgba(var(--accent-rgb), 0.15);
	border-radius: 14px;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	text-decoration: none !important;
	position: relative;
	overflow: hidden;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.rate-row::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 4px;
	height: 100%;
	background: linear-gradient(180deg, var(--accent), var(--accent-2), #10b981);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.rate-row::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.05), rgba(var(--accent-2-rgb), 0.03));
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

.rate-row:hover {
	background: linear-gradient(135deg, rgba(15, 15, 20, 0.98), rgba(25, 25, 30, 0.95));
	border-color: rgba(var(--accent-rgb), 0.3);
	transform: translateX(4px);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(var(--accent-rgb), 0.2) inset;
	text-decoration: none !important;
}

.rate-row:hover::before {
	opacity: 1;
}

.rate-row:hover::after {
	opacity: 1;
}

.rate-cell {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	text-decoration: none !important;
	position: relative;
	z-index: 1;
}

.rate-icon {
	border-radius: 50%;
	flex-shrink: 0;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
	transition: all 0.3s ease;
	border: 2px solid rgba(var(--accent-rgb), 0.1);
}

.rate-row:hover .rate-icon {
	box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.3);
	border-color: rgba(var(--accent-rgb), 0.3);
	transform: scale(1.08);
}

.rate-currency-name {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: -0.015em;
	color: #e8edf4 !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-decoration: none !important;
	transition: all 0.3s ease;
}

.rate-row:hover .rate-currency-name {
	color: #ffffff !important;
	text-shadow: 0 0 8px rgba(var(--accent-rgb), 0.3);
}

.rate-value {
	font-family: 'SF Mono', 'Roboto Mono', 'Fira Code', Consolas, monospace;
	font-weight: 700;
	font-size: 1.0625rem;
	letter-spacing: -0.02em;
	background: linear-gradient(135deg, var(--accent), var(--accent-2));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	white-space: nowrap;
	text-decoration: none !important;
	transition: all 0.3s ease;
}

.rate-row:hover .rate-value {
	background: linear-gradient(135deg, #a5c7ff, #4dd4f4, #34e4a6);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	filter: brightness(1.2);
}

.rate-range {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
	font-weight: 600;
	font-size: 0.875rem;
	letter-spacing: -0.01em;
	color: #8294ab !important;
	white-space: nowrap;
	text-decoration: none !important;
	transition: all 0.3s ease;
}

.rate-row:hover .rate-range {
	color: rgba(var(--accent-rgb), 0.85) !important;
}

.rate-exchange-btn {
	display: inline-flex;
	align-items: center;
	padding: 0.75rem 2rem;
	background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.15), rgba(var(--accent-2-rgb), 0.1));
	border: 1px solid rgba(var(--accent-rgb), 0.3);
	border-radius: 12px;
	color: #d4e3fc !important;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
	font-weight: 700;
	font-size: 0.9375rem;
	letter-spacing: -0.01em;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	white-space: nowrap;
	text-decoration: none !important;
	position: relative;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.rate-exchange-btn::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.25), rgba(var(--accent-2-rgb), 0.2));
	opacity: 0;
	transition: opacity 0.3s ease;
}

.rate-exchange-btn::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.3), transparent 70%);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	transition: width 0.4s ease, height 0.4s ease;
}

.rate-row:hover .rate-exchange-btn {
	background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.3), rgba(var(--accent-2-rgb), 0.25));
	border-color: rgba(var(--accent-rgb), 0.5);
	color: #ffffff !important;
	transform: scale(1.06);
	box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.4), 0 0 0 1px rgba(var(--accent-rgb), 0.2) inset;
}

.rate-row:hover .rate-exchange-btn::before {
	opacity: 1;
}

.rate-exchange-btn:active::after {
	width: 200px;
	height: 200px;
}

/* ===== Tables ===== */
.table {
	color: var(--text) !important;
	background-color: transparent !important;
	border-collapse: separate;
	border-spacing: 0;
}

.table thead th {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0));
	color: var(--text-muted);
	border-bottom: 2px solid var(--border);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	padding: 1rem;
}

.table tbody tr {
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.table tbody tr:hover {
	background: rgba(var(--accent-rgb), 0.05);
	transform: translateX(2px);
}

.table tbody td {
	border-top: 1px solid var(--border);
	padding: 1rem;
	vertical-align: middle;
}

.table-striped > tbody > tr:nth-of-type(odd) {
	background-color: rgba(255, 255, 255, 0.02);
}

.table-bordered {
	border: 1px solid var(--border);
	border-radius: 12px;
	overflow: hidden;
}

.table img {
	border-radius: 50%;
	transition: transform 0.2s ease;
}

.table tr:hover img {
	transform: scale(1.1);
}

/* ===== Alerts ===== */
.alert {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--border);
	border-radius: 12px;
	color: var(--text);
	padding: 1rem 1.25rem;
}

.alert-success {
	background: var(--success-soft);
	border-color: rgba(16, 185, 129, 0.3);
	color: var(--success);
}

.alert-danger {
	background: rgba(239, 68, 68, 0.12);
	border-color: rgba(239, 68, 68, 0.3);
	color: var(--danger);
}

.alert-secondary {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--border);
}

/* ===== Badges ===== */
.badge {
	border-radius: 6px;
	padding: 0.35rem 0.65rem;
	font-weight: 600;
	font-size: 0.75rem;
}

.bg-accent-soft {
	background: var(--accent-soft);
	color: var(--accent);
}

.bg-success-soft {
	background: var(--success-soft);
	color: var(--success);
}

.text-accent {
	color: var(--accent);
}

.text-success {
	color: var(--success);
}

/* ===== Navbar Modern (Sticky) ===== */
.navbar-wrapper {
	position: sticky;
	top: 0;
	z-index: 1000;
	padding: 0.75rem 0;
	background: rgba(0, 0, 0, 0.3) !important;
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	animation: navbar-slide-down 0.4s ease-out;
}

@media (max-width: 768px) {
	.navbar-wrapper {
		/* Быстрая анимация появления Navbar */
		animation: navbar-slide-down 0.3s ease-out;
	}
	
	/* Оптимизированная анимация collapse меню - быстрая и плавная */
	.navbar-collapse.collapsing {
		transition: height 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
		transition-duration: 0.2s !important;
	}
	
	.navbar-collapse.collapse.show {
		transition: height 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
	}
	
	.navbar-collapse.collapse {
		transition: height 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
	}
}

@keyframes navbar-slide-down {
	from { transform: translateY(-100%); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
}

.navbar-modern {
	background: var(--surface) !important;
	background-image: linear-gradient(135deg, rgba(var(--accent-rgb), 0.06), rgba(var(--accent-2-rgb), 0.04));
	border: 1px solid rgba(var(--accent-rgb), 0.2);
	border-radius: 16px;
	padding: 0.4rem 1.25rem !important;
	min-height: 50px !important;
	max-height: 50px !important;
	overflow: visible;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(var(--accent-rgb), 0.1);
	width: 90% !important;
	margin: 0 auto !important;
}


.navbar-container {
	padding: 0;
}

.brand-modern {
	display: flex;
	align-items: center;
	color: var(--text) !important;
	font-weight: 800;
	font-size: 1.375rem;
	letter-spacing: -0.02em;
	text-decoration: none;
	transition: color 0.2s ease, transform 0.2s ease;
}

.brand-modern:hover {
	color: var(--accent) !important;
	transform: scale(1.02);
}

/* Brand logo wrapper */
.brand-modern {
	display: flex;
	align-items: center;
	transition: all 0.3s ease;
}

.brand-logo-wrapper {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 60px !important;
}

.brand-modern img {
	max-height: 55px !important;
	height: auto;
	width: auto;
	object-fit: contain;
	position: absolute !important;
	left: -18px !important;
	top: 50%;
	transform: translateY(-50%) !important;
	z-index: 1 !important;
	filter: brightness(1.2) drop-shadow(0px 0px 8px rgba(var(--accent-rgb), 0.8)) drop-shadow(0px 0px 12px rgba(var(--accent-2-rgb), 0.6)) !important;
	pointer-events: none;
	-webkit-filter: brightness(1.2) drop-shadow(0px 0px 8px rgba(var(--accent-rgb), 0.8)) drop-shadow(0px 0px 12px rgba(var(--accent-2-rgb), 0.6)) !important;
	animation: logoPulse 2s ease-in-out infinite, logoFlicker 3s ease-in-out infinite;
}

.brand-modern:hover img {
	filter: brightness(1.3) drop-shadow(0px 0px 10px rgba(var(--accent-rgb), 0.9)) drop-shadow(0px 0px 15px rgba(var(--accent-2-rgb), 0.7)) !important;
	-webkit-filter: brightness(1.3) drop-shadow(0px 0px 10px rgba(var(--accent-rgb), 0.9)) drop-shadow(0px 0px 15px rgba(var(--accent-2-rgb), 0.7)) !important;
	animation: logoPulse 1s ease-in-out infinite, logoFlicker 1.5s ease-in-out infinite;
}

/* Brand text - in front of logo */
.brand-text {
	position: relative !important;
	display: inline-block;
	margin-left: 0 !important;
	padding-left: 0 !important;
	font-size: 1.15rem;
	font-weight: 900;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	z-index: 10 !important;
	color: #ffffff !important;
	text-shadow: none;
	filter: none;
	-webkit-font-smoothing: antialiased;
}

.brand-modern:hover .brand-text {
	color: #ffffff !important;
}

/* Custom File Upload */
.custom-file-upload {
	position: relative;
}

.custom-file-input {
	position: absolute !important;
	opacity: 0 !important;
	width: 0 !important;
	height: 0 !important;
	pointer-events: none !important;
	visibility: hidden !important;
	display: none !important;
}

.custom-file-label {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem 1.5rem;
	background: rgba(var(--accent-rgb), 0.08) !important;
	backdrop-filter: blur(10px) saturate(150%) !important;
	-webkit-backdrop-filter: blur(10px) saturate(150%) !important;
	border: 2px dashed rgba(var(--accent-rgb), 0.3) !important;
	border-radius: 12px;
	color: var(--text-muted);
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 
	            0 1px 0 rgba(255, 255, 255, 0.05) inset;
	position: relative;
	overflow: hidden;
}

.custom-file-label::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
	transition: left 0.6s ease;
	z-index: 0;
}

.custom-file-label:hover::before {
	left: 100%;
}

.custom-file-label svg,
.custom-file-label span {
	position: relative;
	z-index: 1;
}

.custom-file-label:hover {
	background: rgba(var(--accent-rgb), 0.15) !important;
	border-color: rgba(var(--accent-rgb), 0.5) !important;
	color: #ffffff;
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(var(--accent-rgb), 0.3), 
	            0 2px 0 rgba(255, 255, 255, 0.1) inset;
}

.custom-file-label svg {
	color: var(--accent);
	transition: all 0.3s ease;
}

.custom-file-label:hover svg {
	color: var(--accent-2);
	transform: translateY(-3px);
}

.file-count {
	margin-left: 0.5rem;
	color: var(--accent);
	font-weight: 700;
}

/* Verification Photo Upload */
.verification-photo-upload {
	position: relative;
}

.verification-photo-input {
	position: absolute !important;
	opacity: 0 !important;
	width: 1px !important;
	height: 1px !important;
	pointer-events: auto !important;
	visibility: visible !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	left: 0 !important;
	top: 0 !important;
	z-index: 2 !important;
}

/* Скрываем стандартный UI браузера для file input */
.verification-photo-input::file-selector-button,
.verification-photo-input::-webkit-file-upload-button {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	width: 0 !important;
	height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
}

/* Скрываем текст "файл не выбран" и стандартный UI браузера */
.verification-photo-input::before,
.verification-photo-input::after {
	display: none !important;
	content: none !important;
}

.verification-photo-label {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 2rem 1.5rem;
	background: rgba(var(--accent-rgb), 0.08) !important;
	backdrop-filter: blur(10px) saturate(150%) !important;
	-webkit-backdrop-filter: blur(10px) saturate(150%) !important;
	border: 2px dashed rgba(var(--accent-rgb), 0.3) !important;
	border-radius: 12px;
	color: var(--text-muted);
	font-weight: 500;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 
	            0 1px 0 rgba(255, 255, 255, 0.05) inset;
	position: relative;
	overflow: hidden;
	min-height: 120px;
	text-align: center;
	width: 100%;
	z-index: 1;
}

.verification-photo-label::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
	transition: left 0.6s ease;
	z-index: 0;
}

.verification-photo-label:hover::before {
	left: 100%;
}

.verification-photo-label svg,
.verification-photo-label span {
	position: relative;
	z-index: 1;
}

.verification-photo-label:hover {
	background: rgba(var(--accent-rgb), 0.15) !important;
	border-color: rgba(var(--accent-rgb), 0.5) !important;
	color: #ffffff;
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(var(--accent-rgb), 0.3), 
	            0 2px 0 rgba(255, 255, 255, 0.1) inset;
}

.verification-photo-label svg {
	color: var(--accent);
	transition: all 0.3s ease;
	margin-bottom: 0.5rem;
}

.verification-photo-label:hover svg {
	color: var(--accent-2);
	transform: translateY(-3px);
}

.verification-photo-label-text {
	font-size: 0.875rem;
	line-height: 1.4;
	color: var(--text-muted);
	transition: color 0.3s ease;
}

.verification-photo-label:hover .verification-photo-label-text {
	color: #ffffff;
}

.verification-photo-preview {
	display: none;
	margin-top: 1rem;
}

.verification-photo-preview-item {
	position: relative;
	display: inline-block;
	border-radius: 12px;
	overflow: hidden;
	background: rgba(11, 11, 11, 0.8);
	border: 1px solid rgba(var(--accent-rgb), 0.3);
	padding: 0.5rem;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.verification-photo-preview-img {
	max-width: 200px;
	max-height: 200px;
	width: auto;
	height: auto;
	border-radius: 8px;
	display: block;
	object-fit: contain;
}

.verification-photo-preview-pdf {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	min-width: 200px;
	min-height: 200px;
	color: var(--accent);
}

.verification-photo-preview-pdf svg {
	width: 48px;
	height: 48px;
	margin-bottom: 0.75rem;
}

.verification-photo-preview-pdf span {
	font-size: 0.875rem;
	color: var(--text-muted);
	word-break: break-all;
	text-align: center;
}

.verification-photo-remove {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(239, 68, 68, 0.9);
	border: none;
	color: #ffffff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
	z-index: 10;
}

.verification-photo-remove:hover {
	background: rgba(239, 68, 68, 1);
	transform: scale(1.1);
	box-shadow: 0 4px 12px rgba(239, 68, 68, 0.5);
}

.verification-photo-remove svg {
	width: 16px;
	height: 16px;
}

/* Адаптивность для мобильных */
@media (max-width: 768px) {
	.verification-photo-label {
		padding: 1.5rem 1rem;
		min-height: 100px;
	}
	
	.verification-photo-label-text {
		font-size: 0.8rem;
	}
	
	.verification-photo-preview-img {
		max-width: 150px;
		max-height: 150px;
	}
	
	.verification-photo-preview-pdf {
		min-width: 150px;
		min-height: 150px;
	}
}

/* User Orders Page - Stats Card */
.user-orders-page .alert-secondary {
	background: rgba(11, 11, 11, 0.6) !important;
	border: 1px solid rgba(var(--accent-rgb), 0.2) !important;
	color: #e6eaf0 !important;
	border-radius: 8px !important;
}

.user-orders-page .alert-secondary .row {
	margin: 0 !important;
}

.user-orders-page .alert-secondary .col-md-6 {
	padding: 0.5rem !important;
}

.user-orders-page .alert-secondary strong {
	color: var(--accent) !important;
	font-weight: 700 !important;
}

/* User Orders Page - Table Header */
.user-orders-page thead {
	background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.12), rgba(var(--accent-2-rgb), 0.08)) !important;
	backdrop-filter: blur(10px) !important;
	-webkit-backdrop-filter: blur(10px) !important;
}

.user-orders-page thead th {
	color: #ffffff !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	border: 1px solid rgba(var(--accent-rgb), 0.2) !important;
	background: transparent !important;
}

/* User Orders Page - Table Body Rows - OVERRIDE GLOBAL STYLES */
.user-orders-page table tbody {
	display: table-row-group !important;
	grid-template-columns: unset !important;
	gap: 0 !important;
}

.user-orders-page table tbody tr {
	display: table-row !important;
	grid-template-columns: unset !important;
	gap: 0 !important;
	background: rgba(11, 11, 11, 0.4) !important;
	border: none !important;
	transition: background-color 0.2s ease !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	backdrop-filter: none !important;
	transform: none !important;
	position: static !important;
}

.user-orders-page table tbody tr:hover {
	background: rgba(var(--accent-rgb), 0.1) !important;
	transform: none !important;
}

.user-orders-page table tbody td {
	display: table-cell !important;
	border-top: 1px solid rgba(var(--accent-rgb), 0.1) !important;
	border-left: 1px solid rgba(var(--accent-rgb), 0.1) !important;
	border-right: 1px solid rgba(var(--accent-rgb), 0.1) !important;
	padding: 0.75rem 1rem !important;
	vertical-align: middle !important;
	color: #e6eaf0 !important;
	white-space: nowrap !important;
	background: transparent !important;
}

.user-orders-page table.table-striped > tbody > tr:nth-of-type(odd) {
	background-color: rgba(11, 11, 11, 0.4) !important;
}

.user-orders-page table.table-striped > tbody > tr:nth-of-type(even) {
	background-color: rgba(11, 11, 11, 0.6) !important;
}

.user-orders-page table tbody td a {
	color: var(--accent) !important;
	text-decoration: none !important;
}

.user-orders-page table tbody td a:hover {
	color: var(--accent-2) !important;
	text-decoration: underline !important;
}

/* Column widths for proper alignment */
.user-orders-page table thead th:nth-child(1),
.user-orders-page table tbody td:nth-child(1) {
	min-width: 140px !important;
}

.user-orders-page table thead th:nth-child(2),
.user-orders-page table tbody td:nth-child(2) {
	min-width: 160px !important;
}

.user-orders-page table thead th:nth-child(3),
.user-orders-page table tbody td:nth-child(3) {
	min-width: 300px !important;
}

.user-orders-page table thead th:nth-child(4),
.user-orders-page table tbody td:nth-child(4) {
	min-width: 300px !important;
}

.user-orders-page table thead th:nth-child(5),
.user-orders-page table tbody td:nth-child(5) {
	min-width: 120px !important;
}

/* Logo electric animations */
@keyframes logoPulse {
	0%, 100% {
		filter: brightness(1.2) drop-shadow(0px 0px 8px rgba(var(--accent-rgb), 0.8)) drop-shadow(0px 0px 12px rgba(var(--accent-2-rgb), 0.6));
		-webkit-filter: brightness(1.2) drop-shadow(0px 0px 8px rgba(var(--accent-rgb), 0.8)) drop-shadow(0px 0px 12px rgba(var(--accent-2-rgb), 0.6));
	}
	50% {
		filter: brightness(1.3) drop-shadow(0px 0px 12px rgba(var(--accent-rgb), 1)) drop-shadow(0px 0px 18px rgba(var(--accent-2-rgb), 0.8));
		-webkit-filter: brightness(1.3) drop-shadow(0px 0px 12px rgba(var(--accent-rgb), 1)) drop-shadow(0px 0px 18px rgba(var(--accent-2-rgb), 0.8));
	}
}

@keyframes logoFlicker {
	0%, 100% {
		opacity: 1;
	}
	10% {
		opacity: 0.95;
	}
	20% {
		opacity: 1;
	}
	30% {
		opacity: 0.92;
	}
	40% {
		opacity: 1;
	}
	50% {
		opacity: 0.97;
	}
	60% {
		opacity: 1;
	}
	70% {
		opacity: 0.94;
	}
	80% {
		opacity: 1;
	}
	90% {
		opacity: 0.96;
	}
}

@media (max-width: 768px) {
	.brand-modern img {
		max-height: 48px !important;
		left: -14px !important;
	}
	.brand-text {
		font-size: 1.25rem !important;
		padding-left: 6px;
		font-weight: 800 !important;
	}
	.navbar-modern {
		min-height: 80px !important;
		max-height: none !important;
		width: 95% !important;
		padding: 0.5rem 1.125rem !important;
		display: flex !important;
		align-items: center !important;
	}
	
	/* Центрирование элементов navbar */
	.navbar-container {
		display: flex !important;
		align-items: center !important;
		width: 100% !important;
		min-height: 70px !important;
	}
	
	/* Фикс переполнения логотипа и меню */
	.brand-logo-wrapper {
		min-height: auto !important;
		max-height: none !important;
		overflow: visible !important;
		display: flex !important;
		align-items: center !important;
		margin-left: 0.75rem !important;
	}
	
	.brand-modern {
		display: flex !important;
		align-items: center !important;
		margin-left: 0 !important;
	}
	
	.brand-modern img {
		max-height: 54px !important;
		height: 54px !important;
		width: auto !important;
		left: 0 !important;
		position: static !important;
		transform: none !important;
		top: auto !important;
		margin-right: 0.625rem !important;
	}
	
	.brand-text {
		position: static !important;
		transform: none !important;
		top: auto !important;
		left: auto !important;
	}
	
	.navbar-nav {
		overflow-x: visible !important;
		overflow-y: visible !important;
		flex-wrap: wrap !important;
		align-items: stretch !important;
		width: 100% !important;
		padding: 0 !important;
	}
	
	.nav-item {
		flex-shrink: 0 !important;
		display: flex !important;
		align-items: center !important;
		width: 100% !important;
		margin: 0.25rem 0 !important;
	}
	
	.nav-link-modern {
		width: 100% !important;
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		padding: 0.75rem 1rem !important;
		font-size: 0.875rem !important;
		border-radius: 8px !important;
		margin: 0 !important;
		/* Оптимизированные анимации с GPU-ускорением */
		transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
		            color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
		            border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
		            transform 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
		will-change: transform, background-color;
		border: 1px solid transparent !important;
		position: relative !important;
		-webkit-tap-highlight-color: transparent !important;
		touch-action: manipulation !important;
	}
	
	.nav-link-modern::before {
		content: '';
		position: absolute;
		inset: 0;
		border-radius: 8px;
		background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.1), rgba(var(--accent-2-rgb), 0.05));
		opacity: 0;
		transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
		pointer-events: none;
		z-index: -1;
	}
	
	.nav-link-modern:hover {
		color: rgba(230, 234, 240, 0.9) !important;
		background-color: rgba(var(--accent-rgb), 0.08) !important;
		border-color: rgba(var(--accent-rgb), 0.3) !important;
		transform: translateY(-1px) !important;
	}
	
	.nav-link-modern:hover::before {
		opacity: 1;
	}
	
	/* При нажатии - полноценная анимация с обводкой */
	.nav-link-modern:active,
	.nav-link-modern:focus {
		color: rgba(var(--accent-rgb), 1) !important;
		background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.15), rgba(var(--accent-2-rgb), 0.1)) !important;
		border-color: rgba(var(--accent-rgb), 0.5) !important;
		transform: translateY(0) scale(0.98) !important;
		box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 0 2px rgba(var(--accent-rgb), 0.2) !important;
	}
	
	.nav-link-modern:active::before,
	.nav-link-modern:focus::before {
		opacity: 1;
	}
	
	/* Центрирование кнопки аккаунт и гамбургера */
	.dropdown {
		display: flex !important;
		align-items: center !important;
		margin-right: 0.5rem !important;
	}
	
	/* Иконка меню (гамбургер) */
	.navbar-toggler-modern {
		padding: 0.5rem 0.75rem !important;
		font-size: 1rem !important;
		display: flex !important;
		align-items: center !important;
		margin-right: 0.75rem !important;
		/* Оптимизированные анимации с GPU-ускорением */
		transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
		            border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
		            transform 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
		will-change: transform, background-color;
		-webkit-tap-highlight-color: transparent !important;
		touch-action: manipulation !important;
	}
	
	.navbar-toggler-modern:hover {
		background-color: rgba(var(--accent-rgb), 0.1) !important;
		border-color: rgba(var(--accent-rgb), 0.5) !important;
		transform: scale(1.05) !important;
	}
	
	/* При нажатии - полноценная анимация */
	.navbar-toggler-modern:active,
	.navbar-toggler-modern:focus {
		background-color: rgba(var(--accent-rgb), 0.2) !important;
		border-color: rgba(var(--accent-rgb), 0.6) !important;
		transform: scale(0.95) !important;
		box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 0 2px rgba(var(--accent-rgb), 0.2) !important;
	}
	
	.navbar-toggler-icon {
		width: 24px !important;
		height: 24px !important;
	}
	
	/* Выпадающее меню: clamp по viewport (100vw от .dropdown вылезал за правый край) */
	.dropdown-menu {
		box-sizing: border-box !important;
		width: min(320px, calc(100vw - 1.5rem)) !important;
		max-width: calc(100vw - 1.5rem) !important;
		left: 50% !important;
		right: auto !important;
		transform: translateX(-50%) !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		border-radius: 12px !important;
		padding: 0.5rem 0 !important;
		position: absolute !important;
	}

	.dropdown-menu.dropdown-menu-end,
	.dropdown-menu[class*="dropdown-menu-"][class*="-end"] {
		left: auto !important;
		right: 0 !important;
		transform: none !important;
		width: min(260px, calc(100vw - 1.5rem)) !important;
		max-width: calc(100vw - 1.5rem) !important;
		min-width: min(220px, calc(100vw - 1.5rem)) !important;
	}

	/* Сильнее .dropdown-menu.show { translateY(0) } из блока custom-select (тот же max-width: 768px) */
	.dropdown-menu.show:not(.dropdown-menu-end):not([class*="dropdown-menu-"][class*="-end"]) {
		transform: translate(-50%, 0) !important;
	}

	.dropdown-menu.show.dropdown-menu-end,
	.dropdown-menu.show[class*="dropdown-menu-"][class*="-end"] {
		transform: none !important;
	}
	
	.dropdown-item {
		border-radius: 0 !important;
		padding: 0.75rem 1.25rem !important;
		margin: 0 !important;
		width: 100% !important;
	}
}

@media (max-width: 576px) {
	.brand-modern img {
		max-height: 32px !important;
		left: -8px !important;
	}
	.brand-text {
		font-size: 1.1rem !important;
		padding-left: 2px;
		letter-spacing: 0.08em;
		font-weight: 800 !important;
	}
	.navbar-modern {
		min-height: 75px !important;
		max-height: none !important;
		width: 98% !important;
		padding: 0.5rem 0.875rem !important;
		display: flex !important;
		align-items: center !important;
	}
	
	/* Центрирование элементов navbar */
	.navbar-container {
		padding: 0 !important;
		display: flex !important;
		align-items: center !important;
		width: 100% !important;
		min-height: 65px !important;
	}
	
	/* Фикс переполнения на малых экранах */
	.brand-logo-wrapper {
		min-height: auto !important;
		max-height: none !important;
		display: flex !important;
		align-items: center !important;
		margin-left: 0.875rem !important;
	}
	
	.brand-modern {
		display: flex !important;
		align-items: center !important;
		margin-left: 0 !important;
	}
	
	.brand-modern img {
		max-height: 48px !important;
		height: 48px !important;
		width: auto !important;
		left: 0 !important;
		position: static !important;
		transform: none !important;
		top: auto !important;
		margin-right: 0.5rem !important;
	}
	
	.brand-text {
		position: static !important;
		transform: none !important;
		top: auto !important;
		left: auto !important;
	}
	
	.navbar-nav {
		overflow-x: visible !important;
		overflow-y: visible !important;
		flex-wrap: wrap !important;
		align-items: stretch !important;
		width: 100% !important;
		padding: 0 !important;
	}
	
	.nav-item {
		display: flex !important;
		align-items: center !important;
		width: 100% !important;
		margin: 0.25rem 0 !important;
	}
	
	.nav-link-modern {
		width: 100% !important;
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		padding: 0.75rem 1rem !important;
		font-size: 0.875rem !important;
		border-radius: 8px !important;
		margin: 0 !important;
	}
	
	.btn-account {
		font-size: 0.7rem !important;
		padding: 0.3rem 0.625rem !important;
		/* Оптимизированные анимации с GPU-ускорением */
		transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
		            border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
		            transform 0.15s cubic-bezier(0.4, 0, 0.2, 1),
		            box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
		will-change: transform, background-color;
		-webkit-tap-highlight-color: transparent !important;
		touch-action: manipulation !important;
	}
	
	.btn-account:hover {
		background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.2), rgba(var(--accent-2-rgb), 0.15)) !important;
		border-color: rgba(var(--accent-rgb), 0.5) !important;
		transform: translateY(-1px) scale(1.02) !important;
		box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.25) !important;
	}
	
	/* При нажатии - полноценная анимация */
	.btn-account:active,
	.btn-account:focus {
		background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.25), rgba(var(--accent-2-rgb), 0.2)) !important;
		border-color: rgba(var(--accent-rgb), 0.6) !important;
		transform: translateY(0) scale(0.98) !important;
		box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 0 2px rgba(var(--accent-rgb), 0.2) !important;
	}
	
	.btn-account svg {
		width: 12px !important;
		height: 12px !important;
		margin-right: 0.25rem !important;
	}
	
	/* Центрирование кнопки аккаунт и гамбургера */
	.dropdown {
		display: flex !important;
		align-items: center !important;
		margin-right: 0.625rem !important;
	}
	
	/* Иконка меню (гамбургер) - оптимизированные анимации */
	.navbar-toggler-modern {
		padding: 0.45rem 0.65rem !important;
		font-size: 0.9rem !important;
		display: flex !important;
		align-items: center !important;
		margin-right: 0.875rem !important;
		/* Оптимизированные анимации с GPU-ускорением */
		transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
		            border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
		            transform 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
		will-change: transform, background-color;
		-webkit-tap-highlight-color: transparent !important;
		touch-action: manipulation !important;
	}
	
	.navbar-toggler-modern:hover {
		background-color: rgba(var(--accent-rgb), 0.1) !important;
		border-color: rgba(var(--accent-rgb), 0.5) !important;
		transform: scale(1.05) !important;
	}
	
	.navbar-toggler-modern:active,
	.navbar-toggler-modern:focus {
		background-color: rgba(var(--accent-rgb), 0.2) !important;
		border-color: rgba(var(--accent-rgb), 0.6) !important;
		transform: scale(0.95) !important;
		box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 0 2px rgba(var(--accent-rgb), 0.2) !important;
	}
	
	.navbar-toggler-icon {
		width: 22px !important;
		height: 22px !important;
	}
	
	/* Выпадающее меню: clamp по viewport (см. блок max-width: 768px выше) */
	.dropdown-menu {
		box-sizing: border-box !important;
		width: min(320px, calc(100vw - 1.5rem)) !important;
		max-width: calc(100vw - 1.5rem) !important;
		left: 50% !important;
		right: auto !important;
		transform: translateX(-50%) !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		border-radius: 12px !important;
		padding: 0.5rem 0 !important;
		position: absolute !important;
	}

	.dropdown-menu.dropdown-menu-end,
	.dropdown-menu[class*="dropdown-menu-"][class*="-end"] {
		left: auto !important;
		right: 0 !important;
		transform: none !important;
		width: min(260px, calc(100vw - 1.5rem)) !important;
		max-width: calc(100vw - 1.5rem) !important;
		min-width: min(220px, calc(100vw - 1.5rem)) !important;
	}
	
	.dropdown-item {
		border-radius: 0 !important;
		padding: 0.75rem 1.25rem !important;
		margin: 0 !important;
		width: 100% !important;
	}
}

/* Свернутая шапка (ниже xl): меню аккаунта на всю ширину экрана; top задаётся в main.js (getBoundingClientRect кнопки) */
@media (max-width: 1199.98px) {
	body .navbar-wrapper .navbar #navbar .dropdown > .dropdown-menu {
		position: fixed !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		max-width: none !important;
		min-width: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		transform: none !important;
		border-radius: 0 !important;
		padding-left: max(0.75rem, env(safe-area-inset-left, 0px)) !important;
		padding-right: max(0.75rem, env(safe-area-inset-right, 0px)) !important;
		box-sizing: border-box !important;
		z-index: 1060 !important;
	}

	body .navbar-wrapper .navbar #navbar .dropdown > .dropdown-menu.dropdown-menu-end,
	body .navbar-wrapper .navbar #navbar .dropdown > .dropdown-menu[class*="dropdown-menu-"][class*="-end"] {
		left: 0 !important;
		right: 0 !important;
		transform: none !important;
	}
}

.navbar-toggler-modern {
	border: 1px solid rgba(var(--accent-rgb), 0.3);
	border-radius: 8px;
	padding: 0.5rem 0.75rem;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.navbar-toggler-modern:hover {
	background: rgba(var(--accent-rgb), 0.1);
	border-color: rgba(var(--accent-rgb), 0.5);
}

.nav-link-modern {
	/* Логика цвета пунктов меню работает как у вкладок FIAT/SWAP/BRIDGE:
	   неактивные — светло-серые, активный — белый с голубоватым
	   свечением. Явный color стоит и на :link/:visited, потому что
	   `a:not(#z):not(#z)` из dark-theme-critical.php красит все
	   ссылки в var(--accent) с высокой специфичностью и перекрывал бы нас. */
	color: rgba(230, 234, 240, 0.7) !important;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	font-weight: 600;
	font-size: 0.68rem;
	text-transform: uppercase !important;
	letter-spacing: 0.05em;
	border-radius: 10px;
	padding: 0.4rem 0.5rem !important;
	position: relative;
	background: transparent !important;
	border: 1px solid transparent !important;
	box-shadow: none !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	transition: color 0.25s ease, text-shadow 0.25s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
	overflow: hidden;
}

.nav-link-modern:link,
.nav-link-modern:visited {
	color: rgba(230, 234, 240, 0.7) !important;
}

.nav-link-modern::before {
	content: '';
	position: absolute;
	top: 0;
	left: -120%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
	opacity: 0;
	transition: left 0.6s ease, opacity 0.4s ease;
	z-index: 0;
}

.nav-link-modern:hover::before,
.nav-link-modern:focus-visible::before,
.nav-link-modern.active::before,
.nav-link-modern:active::before {
	left: 120%;
	opacity: 1;
}

.nav-link-modern > * {
	position: relative;
	z-index: 1;
}

.nav-link-modern:hover,
.nav-link-modern:focus-visible {
	/* Лёгкое поднятие до белого без тяжёлого фона/обводки/тени —
	   по аналогии с вкладками: просто цвет + мягкое свечение. */
	color: #ffffff !important;
	background: transparent !important;
	border-color: transparent !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	transform: none;
	box-shadow: none !important;
	text-shadow: 0 0 8px rgba(var(--accent-rgb), 0.25);
}

/* На мобильных оптимизируем анимации для touch устройств */
@media (max-width: 768px) {
	/* Упрощаем hover эффекты на touch устройствах - они могут срабатывать при нажатии */
	@media (hover: none) and (pointer: coarse) {
		.nav-link-modern:hover {
			/* На touch устройствах hover не нужен */
			transform: none !important;
		}
	}
}

/* Активная страница: белый цвет + голубоватое свечение text-shadow,
   как у активной вкладки FIAT/SWAP/BRIDGE. Без фона/обводки —
   подсветка идёт чисто через текстовое свечение. Намеренно отделено
   от :active (пользовательское нажатие мыши), чтобы клик по
   другим пунктам не красил их «как выбранный». */
.nav-link-modern.active {
	color: #ffffff !important;
	background: transparent !important;
	border-color: transparent !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	box-shadow: none !important;
	text-shadow: 0 0 12px rgba(var(--accent-rgb), 0.6), 0 1px 3px rgba(0, 0, 0, 0.4);
	font-weight: 700;
}

/* Короткое нажатие (mousedown) — чтобы не выглядело как «выбран»: */
.nav-link-modern:active {
	color: #ffffff !important;
	transform: none;
}


.btn-account {
	background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.15), rgba(var(--accent-2-rgb), 0.1));
	border: 1px solid rgba(var(--accent-rgb), 0.3);
	color: var(--accent);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	font-weight: 700;
	font-size: 0.8125rem !important;
	padding: 0.4rem 0.875rem !important;
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
	box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.15);
}

.btn-account svg {
	width: 14px !important;
	height: 14px !important;
	margin-right: 0.375rem !important;
}

.btn-account:hover {
	background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.25), rgba(var(--accent-2-rgb), 0.18));
	border-color: rgba(var(--accent-rgb), 0.5);
	color: #ffffff;
	transform: translateY(-2px);
	box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.3);
}

.btn-account:focus,
.btn-account:active {
	background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.2), rgba(var(--accent-2-rgb), 0.15));
	border-color: rgba(var(--accent-rgb), 0.5);
	color: #ffffff;
	box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.15);
}

/* ===== Footer ===== */
.footer-modern {
	margin-top: 4rem;
	padding: 2rem 0 1.5rem;
	text-align: center;
}

/* Partners */
.footer-partners {
	padding-bottom: 1.25rem;
}

.footer-section-title {
	font-size: 0.875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--text-muted);
	margin-bottom: 1rem;
}

.partners-grid {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
}

/* ==========================================================================
   Footer partner row — единая монохромная стилистика
   Все элементы (логотипы, WoT, TrustPilot, Telegram) приводятся к:
     • высоте 40px
     • без рамок, фонов и теней
     • grayscale + приглушённая непрозрачность
     • при наведении — цвет возвращается
   ========================================================================== */

.footer-partner-banner {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 1rem;
	padding-bottom: 1.5rem;
}

/* ==========================================================================
   Partner marquee — бесшовная бесконечная прокрутка логотипов партнёров.

   Ключевой момент для БЕСШОВНОСТИ цикла:
   обе группы .partner-marquee-group должны иметь АБСОЛЮТНО одинаковую
   ширину, и на стыке group1 → group2 расстояние между последним логотипом
   первой копии и первым логотипом второй должно быть ТАКИМ ЖЕ, как
   между любыми двумя логотипами внутри группы.

   Вместо связки `gap + padding-right` (которая даёт разные ширины на
   разных движках браузера и приводит к «обрыву» на стыке), используем
   самый надёжный приём: каждому логотипу внутри marquee задаём
   margin-right: 2.75rem (вкл. последний). Тогда:
     • ширина group = (logoWidth + 2.75rem) × N  — одинаковая у обеих копий,
     • расстояние last-logo-of-group1 → first-logo-of-group2 = 2.75rem,
     • анимация translateX(0 → -50%) гарантированно зацикливается
       визуально пиксель-в-пиксель. */

.partner-marquee {
	--partner-marquee-duration: 40s;
	position: relative;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	overflow: hidden;
	box-sizing: border-box;
	/* contain: layout изолирует внутренние пересчёты лайаута —
	   ширина трека (max-content) НЕ может «раздуть» родителя даже
	   в экзотических контекстах (flex items, grid cells и т.п.). */
	contain: layout paint;
	/* Мягкий «срез» по краям — логотипы растворяются, а не обрываются */
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 56px,
		#000 calc(100% - 56px),
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 56px,
		#000 calc(100% - 56px),
		transparent 100%
	);
}

.partner-marquee-track {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	width: max-content;
	/* Длительность цикла задаётся на .partner-marquee (--partner-marquee-duration). */
	animation: partner-marquee-scroll var(--partner-marquee-duration) linear infinite;
	will-change: transform;
}

/* После JS-перемера: сдвиг ровно на ширину первой копии группы (в px),
   а не -50% ширины трека — иначе при асинхронной подгрузке TrustPilot
   две копии разъезжаются по ширине на доли пикселя и на втором круге
   баннеры визуально наплывают друг на друга. */
.partner-marquee-track.partner-marquee-track--pixel-shift {
	animation-name: partner-marquee-scroll-px;
}

.partner-marquee-group {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	flex-shrink: 0;
}

/* Единый «ритм» отступов между ВСЕМИ элементами бегущей строки
   (логотипы партнёров, WoT-бейдж, TrustPilot, Telegram),
   включая промежуток между последним элементом первой группы
   и первым элементом второй — именно это делает цикл бесшовным. */
.partner-marquee-group > .footer-partner-banner-link,
.partner-marquee-group > .wot-badge,
.partner-marquee-group > .footer-trustpilot-widget,
.partner-marquee-group > .footer-telegram-link {
	margin-right: 2.75rem !important;
	margin-left: 0 !important;
	flex-shrink: 0 !important;
}

/* TrustPilot-виджет внутри бегущей строки — ФИКСИРОВАННАЯ ширина.
   Iframe от TrustPilot загружается асинхронно и может менять
   intrinsic width на доли пикселя при ресайзе/реинициализации.
   Если у двух копий виджета получится разная ширина — группы будут
   разными, и цикл translateX(0 → -50%) «прыгнет» на стыке.
   Жёсткая ширина гарантирует, что обе копии всегда совпадают. */
.partner-marquee-group > .footer-trustpilot-widget {
	/* Контейнер оставляем 220px — именно в эту ширину рендерится
	   iframe TrustPilot (data-style-width="100%") в своём
	   «нормальном» размере. Сжимать сам iframe нельзя — падает
	   читаемость бейджа.

	   Проблема с «лишним» пространством по бокам: после scale(0.76)
	   видимая картинка бейджа ~167px, а layout-box контейнера всё
	   ещё 220px — остаётся по ~26.5px пустоты слева/справа внутри
	   контейнера. Плюс стандартный margin-right: 2.75rem (~44px) к
	   соседу — и визуальный зазор до соседей становится ~70px
	   вместо 44px у остальных пар элементов ряда.

	   Компенсируем НЕ сжатием, а отрицательным margin-left и
	   уменьшенным margin-right: сдвигаем весь контейнер влево на
	   26px (визуально прижимаем к предыдущему элементу) и
	   укорачиваем правый промежуток на те же 26px. В итоге зазоры
	   от видимого бейджа до соседей слева/справа — ровно как у всех
	   остальных пар в ряду (~2.75rem).

	   Внимание по бесшовности: обе копии .partner-marquee-group
	   используют одинаковые CSS-правила, так что суммарная ширина
	   группы остаётся одинаковой — цикл translateX(0→-50%) не
	   прыгает на стыке. */
	width: 220px !important;
	min-width: 220px !important;
	max-width: 220px !important;
	height: 40px !important;
	margin-left: -26px !important;
	margin-right: calc(2.75rem - 26px) !important;
	/* Внешний margin-top не помогает: он двигает ВЕСЬ виджет вместе
	   с overflow-родителем, поэтому клип остаётся тем же. Проблема
	   именно во внутреннем позиционировании — iframe TrustPilot
	   имеет intrinsic height ~52px, при scale(0.92) превращается в
	   ~48px, а контейнер всего 40px, из-за чего верхняя рамка
	   iframe «торчит» вверх и срезается overflow:hidden у
	   .partner-marquee. Сдвиг делаем во внутреннем transform (см.
	   правило ниже). */
	margin-top: 0 !important;
	box-sizing: border-box !important;
}

/* Внутренний .trustpilot-widget (обёртка iframe) — тянем на всю
   фиксированную ширину и уменьшаем scale так, чтобы iframe целиком
   поместился в 40px высоты контейнера.
   Почему translateY не работал: iframe TrustPilot имеет intrinsic
   height ~52px. При scale(0.92) высота ~47.8px, а контейнер и
   соседние элементы ряда (логотипы, WoT, Telegram) — 40px. Лишние
   ~4px выше/ниже отрезаются `overflow:hidden` у .partner-marquee,
   причём равномерно сверху и снизу (iframe был отцентрирован).
   Сдвиг вниз на 3px прятал верх чуть меньше, но теперь срезалось
   больше снизу — суммарно «обводки» по-прежнему было не видно.
   Решение: уменьшить scale до 0.76, чтобы iframe получил высоту
   ~39.5px и свободно помещался в 40px-строку с запасом ~0.25px
   сверху и снизу. Верхняя рамка iframe остаётся в видимой зоне,
   нижняя — тоже. Немного теряется в размере текста виджета, но
   TrustPilot остаётся читаемым и визуально сопоставимым с другими
   партнёрскими логотипами ряда. */
.partner-marquee-group > .footer-trustpilot-widget .trustpilot-widget {
	width: 100% !important;
	max-width: 100% !important;
	transform: scale(0.76) !important;
	transform-origin: center center !important;
}

/* Пауза прокрутки при наведении — чтобы можно было спокойно кликнуть */
.partner-marquee:hover .partner-marquee-track,
.partner-marquee:focus-within .partner-marquee-track {
	animation-play-state: paused;
}

@keyframes partner-marquee-scroll {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

@keyframes partner-marquee-scroll-px {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(calc(-1 * var(--pm-shift, 0px)), 0, 0); }
}

/* Мобильные (≤768px): бесконечная лента из двух копий + transform
   на узком экране стабильно даёт «второй круг» и налезание логотипов
   (ширина группы >> viewport, TrustPilot, субпиксели). Вместо анимации —
   одна видимая группа, перенос flex, равномерный gap между всеми
   баннерами; вторая копия скрыта (остаётся в DOM для доступности
   скринридеров не трогаем — aria-hidden дубликат). */
@media (max-width: 768px) {
	.partner-marquee {
		contain: none;
		overflow-x: hidden;
		overflow-y: visible;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.partner-marquee-track,
	.partner-marquee-track.partner-marquee-track--pixel-shift {
		animation: none !important;
		transform: none !important;
		will-change: auto;
		width: 100% !important;
		max-width: 100%;
		min-width: 0;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		column-gap: 1rem;
		row-gap: 0.85rem;
	}

	.partner-marquee-group[aria-hidden="true"] {
		display: none !important;
	}

	.partner-marquee-group {
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		width: 100% !important;
		max-width: 100%;
		min-width: 0;
		flex-shrink: 1;
		column-gap: 1rem;
		row-gap: 0.85rem;
	}

	.partner-marquee-group > .footer-partner-banner-link,
	.partner-marquee-group > .wot-badge,
	.partner-marquee-group > .footer-trustpilot-widget,
	.partner-marquee-group > .footer-telegram-link {
		margin-left: 0 !important;
		margin-right: 0 !important;
		flex-shrink: 0;
	}

	/* TrustPilot: ширина как у десктопной полосы (220px), высота под
	   data-style-height="52px" — иначе iframe сжимается и текст
	   переносится внутри виджета. */
	.partner-marquee-group > .footer-trustpilot-widget {
		margin-left: 0 !important;
		margin-right: 0 !important;
		width: 220px !important;
		min-width: 220px !important;
		max-width: 220px !important;
		height: 52px !important;
		min-height: 52px !important;
		overflow: visible !important;
	}

	.partner-marquee-group > .footer-trustpilot-widget .trustpilot-widget {
		height: 52px !important;
		min-height: 52px !important;
		transform: scale(0.92) !important;
		transform-origin: center center !important;
	}

	.partner-marquee-group > .wot-badge {
		gap: 0.3rem;
		padding: 0 0.2rem;
		min-width: 0;
		max-width: min(72vw, 280px);
	}

	.partner-marquee-group .wot-secured,
	.partner-marquee-group .wot-report {
		font-size: 0.58rem;
		letter-spacing: 0.02em;
		white-space: nowrap;
	}

	.partner-marquee-group .wot-logo,
	.partner-marquee-group .wot-shield {
		width: 15px;
		height: 15px;
		flex-shrink: 0;
	}

	.partner-marquee-group .wot-vertical {
		height: 12px;
		flex-shrink: 0;
	}

	.partner-marquee-group > .footer-telegram-link {
		font-size: 0.65rem !important;
		letter-spacing: 0.02em !important;
		white-space: nowrap;
		max-width: min(56vw, 220px);
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

@media (max-width: 480px) {
	.partner-marquee-track,
	.partner-marquee-group {
		column-gap: 0.85rem;
		row-gap: 0.75rem;
	}

	/* На очень узких экранах не ужимаем виджет сильнее десктопа — только чуть меньше scale */
	.partner-marquee-group > .footer-trustpilot-widget {
		width: min(220px, calc(100vw - 2rem)) !important;
		min-width: min(220px, calc(100vw - 2rem)) !important;
		max-width: min(220px, calc(100vw - 2rem)) !important;
	}

	.partner-marquee-group > .footer-trustpilot-widget .trustpilot-widget {
		transform: scale(0.88) !important;
	}

	.partner-marquee-group .wot-secured,
	.partner-marquee-group .wot-report {
		font-size: 0.52rem;
	}
}

/* Уважаем системные настройки доступности */
@media (prefers-reduced-motion: reduce) {
	.partner-marquee-track {
		animation: none;
	}
}

/* Страховка от «раздутия» футера любыми дочерними элементами. */
.footer-modern,
.footer-partner-banner {
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

/* .footer-trust-row больше не используется: WoT/TrustPilot/Telegram
   теперь внутри .partner-marquee-group и плывут вместе с логотипами. */

.footer-partner-banner-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding: 0;
	border-radius: 0;
	background: transparent;
	border: none;
	box-shadow: none;
	overflow: hidden;
	vertical-align: middle;
	filter: grayscale(1) brightness(1.1) contrast(0.95);
	opacity: 0.7;
	transition: opacity 0.25s ease, filter 0.25s ease, transform 0.25s ease;
}

.footer-partner-banner-link:hover {
	background: transparent;
	border: none;
	filter: grayscale(0);
	opacity: 1;
	transform: translateY(-1px);
}

.footer-partner-banner-link img {
	display: block;
	height: 28px;
	width: auto;
	max-width: 140px;
	max-height: 28px;
	object-fit: contain;
	filter: none;
	border-radius: 0;
}

/* Change.pro — чёрный логотип на тёмном фоне не виден,
   подкладываем полупрозрачную плашку — визуально совпадает
   с муторно-серым тоном TrustPilot-виджета */
.footer-partner-banner-link[href*="change.pro"] {
	background: rgba(255, 255, 255, 0.82) !important;
	border: none !important;
	height: 28px !important;
	padding: 0 0.4rem !important;
	border-radius: 3px !important;
	align-self: center !important;
	filter: grayscale(1) brightness(1.05) !important;
	opacity: 0.75 !important;
}

.footer-partner-banner-link[href*="change.pro"]:hover {
	background: rgba(255, 255, 255, 0.95) !important;
	border: none !important;
	filter: grayscale(1) brightness(1.1) !important;
	opacity: 1 !important;
	transform: translateY(-1px);
}

.footer-partner-banner-link[href*="change.pro"] img {
	height: 18px;
	max-height: 18px;
	max-width: 80px;
}

/* Profinvestment лого — двухцветное (чёрный текст + жёлтый акцент #FCC300) на
   вытянутом формате ~9:1. На белой подложке жёлтый сливался, на тёмной — чёрный.
   Превращаем лого в монохромный белый силуэт через brightness(0) invert(1) —
   стандартный приём для «light variant» на тёмной теме. */
.footer-partner-banner-link[href*="profinvestment"] img {
	height: 20px;
	max-height: 20px;
	max-width: 200px;
	filter: brightness(0) invert(1);
	opacity: 0.78;
	transition: opacity 0.2s ease;
}

.footer-partner-banner-link[href*="profinvestment"]:hover img {
	opacity: 1;
}

.wot-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	height: 40px;
	padding: 0 0.25rem;
	border-radius: 0;
	background: transparent;
	border: none;
	box-shadow: none;
	text-decoration: none;
	color: var(--text);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 0.8rem;
	line-height: 1;
	vertical-align: middle;
	filter: grayscale(1) brightness(1.1);
	opacity: 0.7;
	transition: opacity 0.25s ease, filter 0.25s ease, transform 0.25s ease;
}

.wot-badge:hover {
	background: transparent;
	border: none;
	filter: grayscale(0);
	opacity: 1;
	transform: translateY(-1px);
	color: #fff;
}

.wot-logo,
.wot-shield {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: linear-gradient(145deg, #51c26f, #1e8f52);
}

.wot-shield {
	border-radius: 6px;
	background: linear-gradient(145deg, #ffb347, #ffcc33);
}

.wot-secured,
.wot-report {
	margin: 0;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 0.8rem;
	line-height: 1;
}

.wot-secured {
	font-size: 0.8rem;
	color: #8ef7c4;
}

.wot-report {
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.8);
}

.wot-vertical {
	width: 1px;
	height: 16px;
	background: rgba(255, 255, 255, 0.15);
}

.footer-trustpilot-widget {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 180px;
	max-width: 240px;
	width: auto;
	height: 40px;
	padding: 0;
	margin: 4px 0 0 0;
	border-radius: 0;
	background: none;
	border: none;
	box-shadow: none;
	overflow: visible;
	vertical-align: middle;
	/* Белую подложку iframe TrustPilot не получится убрать изнутри (cross-origin),
	   поэтому инвертируем её в чёрную — вписывается в тёмный футер */
	filter: invert(1) grayscale(1) brightness(1.05);
	opacity: 0.75;
	transition: opacity 0.25s ease, filter 0.25s ease, transform 0.25s ease;
}

.footer-trustpilot-widget:hover {
	filter: invert(1) grayscale(1) brightness(1.15);
	opacity: 1;
	/* transform: translateY(-1px) убран:
	   iframe TrustPilot (scale 0.76) сидит в 40px-строке с запасом
	   всего ~0.25px сверху и снизу. Подъём на 1px на hover выпихивал
	   верхнюю рамку iframe за верхний край .partner-marquee и её
	   срезало overflow:hidden. Hover-эффект теперь только цветовой
	   (filter + opacity) — без вертикального сдвига. */
	transform: none;
}

.footer-trustpilot-widget .trustpilot-widget {
	margin: 0;
	width: 100%;
	border-radius: 0;
	box-shadow: none !important;
	border: none !important;
	transform: scale(0.92);
	transform-origin: center center;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 40px;
}

.footer-trustpilot-widget .trustpilot-widget iframe {
	border-radius: 0 !important;
	border: none !important;
}

.footer-telegram-link {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: 40px !important;
	padding: 0 0.25rem !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: #ffffff !important;
	text-decoration: none !important;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
	font-size: 0.8rem !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.04em !important;
	border: none !important;
	box-shadow: none !important;
	vertical-align: middle !important;
	line-height: 1 !important;
	margin: 0 !important;
	filter: grayscale(1) brightness(1.1) !important;
	opacity: 0.7 !important;
	transition: opacity 0.25s ease, filter 0.25s ease, transform 0.25s ease !important;
}

.footer-telegram-link,
.footer-telegram-link:link,
.footer-telegram-link:visited,
.footer-telegram-link:active,
.footer-telegram-link:hover,
.footer-telegram-link:focus {
	color: #ffffff !important;
}

.footer-telegram-link:hover {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	filter: grayscale(0) !important;
	opacity: 1 !important;
	transform: translateY(-1px) !important;
}

@media (max-width: 576px) {
	.footer-partner-banner {
		gap: 1rem;
		row-gap: 0.75rem;
		justify-content: center;
	}

	.footer-partner-banner-link img {
		height: 24px;
		max-height: 24px;
	}

	.footer-trustpilot-widget {
		min-width: 160px;
		max-width: 200px;
	}
}

.partner-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem 1.25rem;
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid var(--border);
	border-radius: 10px;
	transition: all 0.3s ease;
	text-decoration: none;
}

.partner-badge:hover {
	background: rgba(var(--accent-rgb), 0.06);
	border-color: rgba(var(--accent-rgb), 0.3);
	transform: translateY(-3px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.partner-logo {
	max-height: 32px;
	max-width: 120px;
	object-fit: contain;
	filter: grayscale(0.3) brightness(1.1);
	transition: filter 0.3s ease;
}

.partner-badge:hover .partner-logo {
	filter: grayscale(0) brightness(1.2);
}

/* Footer Links */
.footer-links {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 2rem;
	flex-wrap: wrap;
	padding: 1.25rem 0;
}

.footer-link {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	font-weight: 500;
	/* Уменьшен с 0.875rem (14px) до 0.75rem (12px) — чтобы нижний
	   ряд служебных ссылок не конкурировал визуально с основным
	   контентом футера. */
	font-size: 0.75rem;
	/* Светло-серый базовый цвет, в духе неактивных пунктов навбара
	   и вкладок FIAT/SWAP/BRIDGE. Явный color здесь нужен даже без
	   !important, потому что критический CSS (см. dark-theme-critical.php)
	   перебивает его правилом `a:not(#z):not(#z)` — дублируем там. */
	color: rgba(230, 234, 240, 0.6);
	text-decoration: none;
	transition: color 0.2s ease;
	position: relative;
}

.footer-link:hover,
.footer-link:focus-visible {
	color: #ffffff;
}

.footer-link::after {
	content: '';
	position: absolute;
	bottom: -4px;
	left: 0;
	width: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--accent), var(--accent-2));
	transition: width 0.3s ease;
}

.footer-link:hover::after {
	width: 100%;
}

/* Footer Bottom */
.footer-bottom {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 3rem;
	flex-wrap: wrap;
	padding-top: 1.25rem;
}

.footer-copyright {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	font-weight: 500;
	font-size: 0.875rem;
	color: var(--text-muted);
}

.footer-languages {
	display: flex;
	gap: 0.5rem;
}

.language-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem 1rem;
	min-width: 48px;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	font-weight: 700;
	font-size: 0.8125rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid var(--border);
	border-radius: 8px;
	color: var(--text-muted);
	transition: all 0.2s ease;
}

.language-btn:hover {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(var(--accent-rgb), 0.3);
	color: var(--text);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.language-btn.active {
	background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.15), rgba(var(--accent-2-rgb), 0.1));
	border-color: rgba(var(--accent-rgb), 0.4);
	color: var(--accent);
	box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.language-btn.active:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(var(--accent-rgb), 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Responsive Footer */
@media (max-width: 768px) {
	.footer-bottom {
		flex-direction: column;
		gap: 1.5rem;
	}

	.footer-links {
		gap: 1rem;
	}

	.partners-grid {
		gap: 1rem;
	}
}

/* ===== Utilities ===== */
.bg-light, .bg-white, .bg-body, .bg-body-tertiary {
	background-color: transparent !important;
}

.bg-dark {
	background-color: var(--surface) !important;
}

.text-dark {
	color: var(--text) !important;
}

.border-bottom {
	border-bottom-color: var(--border) !important;
}

.rounded-4 {
	border-radius: 1rem !important;
}

.rounded-5 {
	border-radius: 1.5rem !important;
}

hr, .hr {
	border-color: var(--border);
	opacity: 1;
}

/* ===== Animations ===== */
@keyframes fade-in {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes slide-up {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.fade-in {
	animation: fade-in 0.6s ease-out;
}

.slide-up {
	animation: slide-up 0.7s ease-out;
}

/* ===== Smooth Scroll ===== */
html {
	scroll-behavior: smooth;
}

/* ===== Dropdown ===== */
.dropdown-menu {
	background: var(--surface) !important;
	background-color: var(--surface) !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	border: 1px solid var(--border);
	border-radius: 12px;
	opacity: 1 !important;
	box-shadow: var(--shadow-lg);
	padding: 0.5rem;
	z-index: 9999 !important;
}

.dropdown {
	position: relative;
	z-index: 1000;
}

.dropdown.show {
	z-index: 10000;
}

.dropdown-item {
	color: var(--text);
	border-radius: 8px;
	padding: 0.625rem 1rem;
	transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: background-color;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

.dropdown-item:hover {
	background: rgba(var(--accent-rgb), 0.1);
	color: var(--text);
}


.home-news {
	position: relative;
	overflow: hidden;
	height: 100%;
	border-radius: 22px;
	border: 1px solid rgba(var(--accent-rgb), 0.18);
	background:
		radial-gradient(420px 180px at 8% 0%, rgba(var(--accent-rgb), 0.16), transparent 62%),
		linear-gradient(180deg, rgba(var(--surface-2-rgb), 0.96), rgba(var(--surface-rgb), 0.98));
	box-shadow: 0 22px 56px rgba(3, 8, 20, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.home-news__header {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 1.05rem 1.2rem;
	border-bottom: 1px solid rgba(var(--accent-rgb), 0.16);
	background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.18), rgba(var(--accent-2-rgb), 0.08));
}

.home-news__mark {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 16px;
	background: linear-gradient(135deg, var(--accent), var(--accent-2));
	color: #041018;
	box-shadow: 0 12px 26px rgba(var(--accent-rgb), 0.22);
}

.home-news__heading {
	min-width: 0;
	flex: 1 1 auto;
}

.home-news__eyebrow {
	display: inline-flex;
	margin-bottom: 0.15rem;
	color: rgba(186, 214, 255, 0.86);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.home-news__title {
	margin: 0;
	color: #ffffff;
	font-size: 1.2rem;
	font-weight: 760;
	letter-spacing: -0.02em;
}

.home-news__all {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.55rem 0.8rem;
	border-radius: 12px;
	border: 1px solid rgba(var(--accent-rgb), 0.24);
	background: rgba(255, 255, 255, 0.04);
	color: rgba(235, 242, 255, 0.92);
	font-size: 0.78rem;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.home-news__all:hover {
	transform: translateY(-1px);
	border-color: rgba(var(--accent-rgb), 0.5);
	background: rgba(var(--accent-rgb), 0.14);
	color: #ffffff;
	text-decoration: none;
}

.home-news__list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1rem 1.1rem 1.15rem;
}

.home-news__item {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.95rem 1rem;
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, 0.07);
	background: rgba(var(--surface-2-rgb), 0.72);
	text-decoration: none;
	transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.home-news__item:hover,
.home-news__item:focus-visible {
	transform: translateY(-1px);
	border-color: rgba(var(--accent-rgb), 0.46);
	background: rgba(var(--surface-3-rgb), 0.88);
	box-shadow: 0 14px 32px rgba(0, 0, 0, 0.2);
	outline: none;
	text-decoration: none;
}

.home-news__item-main {
	min-width: 0;
	flex: 1 1 auto;
}

.home-news__item-title {
	margin: 0 0 0.3rem;
	color: #ffffff;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
}

.home-news__item-excerpt {
	color: rgba(226, 232, 240, 0.68);
	font-size: 0.86rem;
	line-height: 1.45;
}

.home-news__item-date {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.32rem 0.62rem;
	border-radius: 999px;
	border: 1px solid rgba(255, 176, 32, 0.28);
	background: rgba(255, 176, 32, 0.1);
	color: var(--gold, #ffb020);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

@media (max-width: 768px) {
	.home-news {
		border-radius: 18px;
	}

	.home-news__header {
		flex-wrap: wrap;
		padding: 0.95rem 1rem;
	}

	.home-news__all {
		width: 100%;
		justify-content: center;
	}

	.home-news__item {
		flex-direction: column;
		gap: 0.7rem;
	}
}
/* ===== News & Orders ===== */
.news-item {
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--border);
}

.news-item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.news-title {
	color: var(--text);
	font-weight: 600;
	transition: color 0.2s ease;
	display: block;
}

.news-title:hover {
	color: var(--accent);
}

.order-item {
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid var(--border);
	transition: all 0.2s ease;
}

.order-item:hover {
	background: rgba(var(--accent-rgb), 0.06);
	border-color: rgba(var(--accent-rgb), 0.2);
	transform: translateX(2px);
}

.order-pair {
	display: flex;
	align-items: center;
}

.review-card {
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid var(--border);
	transition: all 0.3s ease;
}

.review-card:hover {
	background: rgba(var(--accent-rgb), 0.06);
	border-color: rgba(var(--accent-rgb), 0.2);
	transform: translateY(-2px);
}

.review-author {
	color: var(--text);
}

.review-text {
	color: var(--text-muted);
	line-height: 1.5;
}

/* ===== Smooth Scroll ===== */
.smooth-scroll {
	scroll-behavior: smooth;
}

/* ===== Page Header ===== */
.page-header {
	padding: 1.5rem 0;
}

.page-header h1 {
	display: flex;
	align-items: center;
	color: var(--text);
}

/* ===== Exchange Page ===== */
.exchange-summary {
	background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.03), rgba(var(--accent-2-rgb), 0.02));
	border-radius: 16px;
	padding: 1.5rem;
	border: 1px solid rgba(var(--accent-rgb), 0.1);
}

.exchange-summary-card {
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 1.5rem;
	transition: all 0.3s ease;
	min-height: 180px;
	display: flex;
	flex-direction: column;
}

.exchange-summary-card:hover {
	border-color: rgba(var(--accent-rgb), 0.3);
	box-shadow: 0 8px 24px rgba(var(--accent-rgb), 0.1);
	transform: translateY(-2px);
}

.exchange-summary-header {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.exchange-summary-icon {
	border-radius: 50%;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.exchange-summary-title {
	flex: 1;
}

.exchange-summary-label {
	font-size: 0.75rem;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 600;
	margin-bottom: 0.25rem;
}

.exchange-summary-currency {
	font-size: 1rem;
	color: var(--text);
	font-weight: 700;
}

.exchange-summary-amount {
	margin-top: auto;
	padding: 1rem;
	background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), rgba(var(--accent-2-rgb), 0.05));
	border-radius: 8px;
	text-align: center;
	border: 1px solid rgba(var(--accent-rgb), 0.15);
}

.exchange-summary-amount-value {
	display: block;
	font-size: 2rem;
	font-weight: 700;
	color: var(--accent);
	font-family: 'SF Mono', 'Roboto Mono', monospace;
	margin-bottom: 0.25rem;
}

.exchange-summary-amount-currency {
	font-size: 0.875rem;
	color: var(--muted);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.exchange-rate-info {
	background: rgba(0, 0, 0, 0.2);
	border-radius: 8px;
	padding: 1rem;
}

.exchange-rate-badge {
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid var(--border);
	border-radius: 6px;
	padding: 0.5rem 0.75rem;
	text-align: center;
	transition: all 0.2s ease;
}

.exchange-rate-badge:hover {
	border-color: rgba(var(--accent-rgb), 0.2);
	background: rgba(255, 255, 255, 0.04);
}

.exchange-rate-label {
	display: block;
	font-size: 0.7rem;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 0.25rem;
}

.exchange-rate-value {
	display: block;
	font-size: 0.85rem;
	color: var(--text);
	font-weight: 600;
}

/* Force equal height for address/detail inputs row */
.row.align-items-stretch > .col-md-6 {
	display: flex;
	flex-direction: column;
}

.row.align-items-stretch > .col-md-6 .form-group {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.row.align-items-stretch > .col-md-6 .form-group .form-control {
	margin-top: auto;
}

/* Custom checkbox styling */
.form-check {
	padding-left: 0;
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.form-check-input {
	width: 1.25rem;
	height: 1.25rem;
	margin: 0;
	background-color: rgba(255, 255, 255, 0.05);
	border: 2px solid var(--border);
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.2s ease;
	flex-shrink: 0;
}

.form-check-input:hover {
	border-color: var(--accent);
	background-color: rgba(var(--accent-rgb), 0.1);
}

.form-check-input:checked {
	background-color: var(--accent);
	border-color: var(--accent);
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
	background-size: 100% 100%;
	background-position: center;
	background-repeat: no-repeat;
	animation: checkboxPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes checkboxPop {
	0% {
		transform: scale(0.8);
	}
	50% {
		transform: scale(1.1);
	}
	100% {
		transform: scale(1);
	}
}

.form-check-input:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
	outline: none;
}

.form-check-input:invalid {
	border-color: #ef4444;
	animation: shake 0.3s;
}

@keyframes shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-4px); }
	75% { transform: translateX(4px); }
}

@keyframes fadeIn {
	from { opacity: 0; transform: translateY(-10px); }
	to { opacity: 1; transform: translateY(0); }
}

.form-validation-alert {
	border-left: 4px solid #ef4444;
}

.form-check-label {
	cursor: pointer;
	user-select: none;
	color: var(--text);
	font-size: 0.9375rem;
}

.form-check-label:hover {
	color: var(--accent);
}

/* Locked amount fields (not disabled, just styled) */
.exchange-amount-locked {
	background: rgba(var(--accent-rgb), 0.05) !important;
	border-color: rgba(var(--accent-rgb), 0.2) !important;
	color: var(--accent) !important;
	font-weight: 700;
	cursor: default;
	user-select: none;
	pointer-events: none;
}

.exchange-amount-locked:focus {
	box-shadow: none !important;
	outline: none !important;
}

.exchange-currency-block {
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 1.5rem;
	transition: all 0.2s ease;
	min-height: 100%;
}

.exchange-currency-block:hover {
	border-color: rgba(var(--accent-rgb), 0.3);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.exchange-amount-fields {
	flex: 1;
}

.exchange-currency-header {
	display: flex;
	align-items: center;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--border);
}

.exchange-info-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 0.75rem;
	margin-top: 1rem;
}

.exchange-info-pair {
	display: flex;
	gap: 0.75rem;
	margin-top: 1rem;
}

.exchange-info-pair .exchange-info-item {
	flex: 1;
}

.exchange-info-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 1.25rem;
}

.exchange-info-item {
	background: rgba(0, 0, 0, 0.3);
	padding: 1rem;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.05);
	text-align: center;
	transition: all 0.2s ease;
}

.exchange-info-item:hover {
	border-color: rgba(var(--accent-rgb), 0.25);
	background: rgba(0, 0, 0, 0.5);
	transform: translateY(-2px);
}

.exchange-info-label {
	font-size: 0.75rem;
	color: var(--text-muted);
	display: block;
	margin-bottom: 0.5rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 600;
}

.exchange-info-value {
	font-family: 'SF Mono', 'Roboto Mono', monospace;
	font-weight: 700;
	font-size: 1rem;
	color: var(--accent);
	display: block;
}

.exchange-description {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--text-muted);
}

.options-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1rem;
}

.option-card {
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 1rem;
	transition: all 0.2s ease;
}

.option-card:hover {
	background: rgba(var(--accent-rgb), 0.06);
	border-color: rgba(var(--accent-rgb), 0.25);
}

.option-card-highlight {
	border-color: rgba(var(--accent-rgb), 0.6);
	background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.14), rgba(var(--accent-rgb), 0.05));
	box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.35), 0 6px 20px rgba(var(--accent-rgb), 0.18);
}

.option-card-highlight:hover {
	border-color: rgba(var(--accent-rgb), 0.85);
	background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.2), rgba(var(--accent-rgb), 0.08));
}

.option-card-highlight.fast-exchange-flash {
	animation: fastExchangePulse 0.9s ease-in-out 2;
}

.form-check-input {
	background-color: var(--surface);
	border-color: var(--border);
	width: 1.25rem;
	height: 1.25rem;
}

.form-check-input:checked {
	background-color: var(--accent);
	border-color: var(--accent);
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
	background-size: 100% 100%;
	background-position: center;
	background-repeat: no-repeat;
	animation: checkboxPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.form-check-input:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
}

.form-check-label {
	color: var(--text);
	margin-left: 0.5rem;
}

/* ===== Reserves List ===== */
.reserves-list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1.5rem;
}

.reserve-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	padding: 1.25rem 1.5rem;
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid var(--border);
	border-radius: 12px;
	transition: all 0.2s ease;
}

.reserve-row:hover {
	background: rgba(var(--accent-rgb), 0.06);
	border-color: rgba(var(--accent-rgb), 0.25);
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.reserve-currency {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex: 1;
	min-width: 0;
}

.reserve-icon {
	border-radius: 50%;
	flex-shrink: 0;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
	transition: transform 0.2s ease;
}

.reserve-row:hover .reserve-icon {
	transform: scale(1.1);
}

.reserve-currency-info {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
}

.reserve-currency-name {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: -0.015em;
	color: #e8edf4;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.reserve-currency-code {
	font-family: 'SF Mono', 'Roboto Mono', monospace;
	font-weight: 600;
	font-size: 0.75rem;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.reserve-amount {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.375rem;
}

.reserve-value {
	font-family: 'SF Mono', 'Roboto Mono', 'Fira Code', Consolas, monospace;
	font-weight: 700;
	font-size: 1.125rem;
	letter-spacing: -0.02em;
	color: #a0c4fd;
	white-space: nowrap;
}

.reserve-status {
	display: flex;
	gap: 0.375rem;
}

.badge-warning-soft {
	background: rgba(251, 191, 36, 0.12);
	color: #fbbf24;
	border-radius: 6px;
	padding: 0.25rem 0.5rem;
	font-weight: 600;
	font-size: 0.75rem;
}

/* Sticky Sidebar */
.sticky-sidebar {
	position: sticky;
	top: 1.5rem;
}

/* ===== Pagination ===== */
.pagination-wrapper {
	padding: 1.5rem;
	display: flex;
	justify-content: center;
}

.pagination {
	display: flex;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.page-item {
	display: inline-block;
}

.page-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0.5rem 0.75rem;
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid var(--border);
	border-radius: 8px;
	color: var(--text-muted);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	font-weight: 600;
	font-size: 0.875rem;
	text-decoration: none;
	transition: all 0.2s ease;
}

.page-link:hover {
	background: rgba(var(--accent-rgb), 0.08);
	border-color: rgba(var(--accent-rgb), 0.3);
	color: var(--accent);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.page-item.active .page-link {
	background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.15), rgba(var(--accent-2-rgb), 0.1));
	border-color: rgba(var(--accent-rgb), 0.4);
	color: var(--accent);
	box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.2);
}

.page-item.disabled .page-link {
	opacity: 0.3;
	cursor: not-allowed;
	pointer-events: none;
}

/* ===== Modal ===== */
.modal-content {
	background: rgba(11, 11, 11, 0.75) !important;
	backdrop-filter: blur(40px) saturate(180%) !important;
	-webkit-backdrop-filter: blur(40px) saturate(180%) !important;
	border: 1px solid rgba(var(--accent-rgb), 0.25) !important;
	border-radius: 20px !important;
	box-shadow: 0 32px 96px rgba(0, 0, 0, 0.8), 
	            0 0 0 1px rgba(var(--accent-rgb), 0.1) inset,
	            0 8px 32px rgba(var(--accent-rgb), 0.15) !important;
}

.modal-header {
	border-bottom: 1px solid rgba(var(--accent-rgb), 0.15);
	padding: 1.5rem;
	background: linear-gradient(135deg, rgba(20, 20, 25, 0.4), rgba(15, 15, 18, 0.3)) !important;
	backdrop-filter: blur(20px) !important;
	-webkit-backdrop-filter: blur(20px) !important;
}

.modal-title {
	color: #e6eaf0 !important;
	font-weight: 700;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.modal-body {
	padding: 1.5rem;
	background: rgba(0, 0, 0, 0.15) !important;
}

.modal-footer {
	border-top: 1px solid rgba(var(--accent-rgb), 0.15);
	padding: 1.25rem 1.5rem;
	background: linear-gradient(135deg, rgba(20, 20, 25, 0.3), rgba(15, 15, 18, 0.2)) !important;
	backdrop-filter: blur(20px) !important;
	-webkit-backdrop-filter: blur(20px) !important;
}

/* Modal backdrop - максимальное размытие */
.modal-backdrop {
	backdrop-filter: blur(8px) !important;
	-webkit-backdrop-filter: blur(8px) !important;
	background-color: rgba(0, 0, 0, 0.6) !important;
}

.modal-backdrop.show {
	opacity: 1 !important;
}

.btn-close {
	filter: invert(1) grayscale(1) brightness(2);
	opacity: 0.6;
}

.btn-close:hover {
	opacity: 1;
}

/* ===== Form Labels ===== */
.form-label {
	display: flex;
	align-items: center;
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--text);
	margin-bottom: 0.5rem;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
	.hero-section {
		min-height: 400px;
	}

	.hero-title {
		font-size: 2rem;
	}

	.hero-subtitle {
		font-size: 1rem;
	}

	.hero-spline-bg {
		opacity: 0.25;
	}

	.exchange-widget {
		padding: 1.5rem !important;
	}

	.exchange-block {
		padding: 1.25rem;
	}

	.exchange-arrow-icon {
		width: 48px;
		height: 48px;
		margin: 1rem 0;
		/* КРИТИЧНО: Сохраняем анимацию для кнопки смены валют на мобильных */
		animation: pulse-arrow 2s ease-in-out infinite;
		transition: all 0.3s ease;
	}

	.exchange-arrow-icon.swapping {
		/* КРИТИЧНО: Анимация смены валют должна работать на мобильных */
		animation: swapRotate 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
	}

	.exchange-arrow-icon svg {
		width: 24px;
		height: 24px;
	}

	.exchange-amount input {
		font-size: 1.25rem;
	}

	.rate-row {
		grid-template-columns: 1fr;
		gap: 1rem;
		padding: 1rem;
	}

	.rate-cell {
		justify-content: flex-start;
	}

	.rate-exchange-btn {
		width: 100%;
		justify-content: center;
	}

	.reserve-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}

	.reserve-amount {
		width: 100%;
		align-items: flex-start;
	}

	.sticky-sidebar {
		position: relative;
		top: 0;
	}

	.navbar-wrapper {
		padding: 0.5rem 0;
	}

	.navbar-modern {
		border-radius: 12px;
		padding: 0.5rem 0.75rem;
	}

	.brand-modern {
		font-size: 1.125rem;
	}

	.brand-modern svg {
		width: 22px;
		height: 22px;
	}

	.nav-link-modern {
		padding: 0.5rem 0.75rem !important;
		font-size: 0.875rem;
	}

	.btn-account {
		font-size: 0.875rem;
		padding: 0.5rem 1rem;
	}

	.exchange-info-row {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.75rem;
		padding: 1rem;
	}

	.exchange-info-item {
		padding: 0.75rem;
	}

	.exchange-info-value {
		font-size: 0.875rem;
	}
}

/* ===== Z-index layers ===== */
.z-1 {
	z-index: 1;
}

.position-relative {
	position: relative;
}

.overflow-hidden {
	overflow: hidden;
}

/* ===== CRITICAL OVERRIDES - Must be last to override vendor.css ===== */
body, html {
	background: var(--bg) !important;
	color: #e6eaf0 !important;
}

.bg-light, .bg-white {
	background: var(--surface) !important;
	color: var(--text) !important;
}

.text-dark {
	color: var(--text) !important;
}

.border {
	border-color: var(--border) !important;
}

.btn-light, .btn-white {
	background: var(--surface-light) !important;
	color: var(--text) !important;
	border-color: var(--border) !important;
}

.btn-light:hover, .btn-white:hover {
	background: #1f1f1f !important;
	color: var(--text) !important;
}

/* Force all Bootstrap components to dark theme */
.modal-content, .popover, .tooltip-inner {
	background: var(--surface) !important;
	color: var(--text) !important;
	border-color: var(--border) !important;
}

.dropdown-menu {
	background: var(--surface) !important;
	background-color: var(--surface) !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	opacity: 1 !important;
	color: var(--text) !important;
	border-color: var(--border) !important;
}

.list-group-item {
	background: var(--surface) !important;
	color: var(--text) !important;
	border-color: var(--border) !important;
}

/* ===== User Details Page - Reserve-style Design ===== */
@keyframes detailRowSlideIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.details-list-grid {
	display: flex !important;
	flex-direction: column !important;
	gap: 0.75rem !important;
	margin-bottom: 2rem !important;
}

.detail-row {
	animation: detailRowSlideIn 0.4s ease-out both !important;
	display: flex !important;
	align-items: center !important;
	background: linear-gradient(135deg, rgba(11, 11, 11, 0.95), rgba(21, 21, 21, 0.9)) !important;
	border: 1px solid rgba(var(--accent-rgb), 0.12) !important;
	border-radius: 12px !important;
	padding: 1rem 1.5rem !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
	backdrop-filter: blur(10px) !important;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
	position: relative !important;
	overflow: hidden !important;
}

.detail-row:hover {
	background: linear-gradient(135deg, rgba(15, 15, 20, 0.95), rgba(25, 25, 30, 0.9)) !important;
	border-color: rgba(var(--accent-rgb), 0.3) !important;
	box-shadow: 0 8px 24px rgba(var(--accent-rgb), 0.2) !important;
	transform: translateY(-2px) !important;
}

.detail-row:hover .detail-icon-wrapper {
	border-color: rgba(var(--accent-rgb), 0.4) !important;
	box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.3) !important;
}

.detail-row:hover .detail-icon-wrapper img {
	transform: scale(1.1) !important;
}

.detail-row-checkbox {
	flex-shrink: 0 !important;
	margin-right: 1rem !important;
}

.detail-row-icon {
	flex-shrink: 0 !important;
	margin-right: 1.25rem !important;
}

.detail-icon-wrapper {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 48px !important;
	height: 48px !important;
	background: rgba(0, 0, 0, 0.3) !important;
	border: 2px solid rgba(var(--accent-rgb), 0.15) !important;
	border-radius: 50% !important;
	padding: 0.5rem !important;
	transition: all 0.3s ease !important;
}

.detail-icon-wrapper img {
	display: block !important;
	border-radius: 50% !important;
	transition: transform 0.3s ease !important;
}

.detail-row-info {
	flex: 1 !important;
	min-width: 0 !important;
}

.detail-name {
	font-size: 1rem !important;
	font-weight: 700 !important;
	color: #e6eaf0 !important;
	margin-bottom: 0 !important;
}

.detail-row-value {
	flex-shrink: 0 !important;
	text-align: right !important;
	margin-left: 1rem !important;
	max-width: 60% !important;
}

.detail-value {
	font-size: 0.9rem !important;
	font-weight: 600 !important;
	color: var(--accent) !important;
	word-break: break-all !important;
	font-family: 'Courier New', monospace !important;
}

/* ===== User Referrals Page - Card Design ===== */
@keyframes referralRowSlideIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.referrals-list-grid {
	display: flex !important;
	flex-direction: column !important;
	gap: 0.75rem !important;
	margin-bottom: 2rem !important;
}

.referral-row {
	animation: referralRowSlideIn 0.4s ease-out both !important;
	display: grid !important;
	grid-template-columns: auto 1fr auto auto !important;
	gap: 1rem !important;
	align-items: center !important;
	background: linear-gradient(135deg, rgba(11, 11, 11, 0.95), rgba(21, 21, 21, 0.9)) !important;
	border: 1px solid rgba(var(--accent-rgb), 0.12) !important;
	border-radius: 12px !important;
	padding: 1rem 1.5rem !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
	backdrop-filter: blur(10px) !important;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
	position: relative !important;
	overflow: hidden !important;
}

.referral-row:hover {
	background: linear-gradient(135deg, rgba(15, 15, 20, 0.95), rgba(25, 25, 30, 0.9)) !important;
	border-color: rgba(var(--accent-rgb), 0.3) !important;
	box-shadow: 0 8px 24px rgba(var(--accent-rgb), 0.2) !important;
	transform: translateY(-2px) !important;
}

.referral-row:hover .currency-icon-wrapper {
	border-color: rgba(var(--accent-rgb), 0.4) !important;
	box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.3) !important;
}

.referral-row:hover .currency-icon-wrapper img {
	transform: scale(1.1) !important;
}

.referral-currencies {
	display: flex !important;
	align-items: center !important;
	gap: 0.5rem !important;
}

.currency-icon-wrapper {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 40px !important;
	height: 40px !important;
	background: rgba(0, 0, 0, 0.3) !important;
	border: 2px solid rgba(var(--accent-rgb), 0.15) !important;
	border-radius: 50% !important;
	padding: 0.375rem !important;
	transition: all 0.3s ease !important;
}

.currency-icon-wrapper img {
	display: block !important;
	border-radius: 50% !important;
	transition: transform 0.3s ease !important;
}

.referral-info {
	flex: 1 !important;
	min-width: 0 !important;
}

.referral-order-number {
	font-size: 0.875rem !important;
	color: #9aa3af !important;
	margin-bottom: 0.25rem !important;
}

.referral-exchange {
	display: none !important;
}

.referral-login {
	font-size: 0.8rem !important;
	color: var(--accent) !important;
}

.referral-reward {
	text-align: right !important;
}

.referral-status span {
	display: inline-block !important;
	padding: 0.375rem 0.875rem !important;
	border-radius: 20px !important;
	font-size: 0.8rem !important;
	font-weight: 600 !important;
	background: rgba(16, 185, 129, 0.15) !important;
	color: #10b981 !important;
	border: 1px solid rgba(16, 185, 129, 0.3) !important;
	transition: all 0.3s ease !important;
}

.referral-row:hover .referral-status span {
	background: rgba(16, 185, 129, 0.25) !important;
	border-color: rgba(16, 185, 129, 0.5) !important;
	box-shadow: 0 0 12px rgba(16, 185, 129, 0.2) !important;
}

@media (max-width: 576px) {
    #rate-refresh-indicator {
        padding: 0.55rem 1rem 0.55rem 0.6rem !important;
        gap: 0.85rem !important;
    }

    #rate-refresh-indicator .rate-refresh-label {
        font-size: 0.75rem !important;
        letter-spacing: 0.08em !important;
    }

    #rate-refresh-indicator .rate-refresh-label span:last-child {
        font-size: 0.95rem !important;
        letter-spacing: 0.05em !important;
    }
 }

/* ═══════════════════════════════════════════════════════════════════════
   Плавный SVG-таймер обновления курса (rate-refresh)
   ───────────────────────────────────────────────────────────────────────
   Используем SVG-кольцо со stroke-dashoffset вместо conic-gradient:
   · Обновляется через requestAnimationFrame (60fps), без ступенек.
   · Градиентный штрих + мягкое свечение через <filter>.
   · linecap=round — скруглённые концы, выглядит премиально.
   · Цифра в центре дышит (pulse) в последние 3 секунды.
   ═══════════════════════════════════════════════════════════════════ */
#rate-refresh-indicator {
    transition: box-shadow 0.35s ease, transform 0.35s ease, border-color 0.35s ease;
}
#rate-refresh-indicator:hover {
    border-color: rgba(var(--accent-rgb), 0.45) !important;
    box-shadow: 0 6px 22px rgba(6, 12, 30, 0.45),
                0 0 0 1px rgba(var(--accent-rgb), 0.15) inset !important;
}

.rate-ring {
    position: relative;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.rate-ring__svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    overflow: visible;
}
.rate-ring__track {
    fill: none;
    stroke: rgba(var(--accent-rgb), 0.14);
    stroke-width: 3;
}
.rate-ring__bar {
    fill: none;
    stroke: url(#rate-ring-gradient);
    stroke-width: 3;
    stroke-linecap: round;
    transform-origin: 50% 50%;
    filter: drop-shadow(0 0 4px rgba(var(--accent-rgb), 0.55));
    transition: stroke-dashoffset 180ms cubic-bezier(0.4, 0.0, 0.2, 1);
    will-change: stroke-dashoffset;
}
.rate-ring__core {
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%,
        rgba(16, 22, 38, 0.98) 0%,
        rgba(3, 6, 12, 1) 75%);
    box-shadow: inset 0 0 8px rgba(var(--accent-rgb), 0.22),
                inset 0 0 0 1px rgba(var(--accent-rgb), 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.rate-ring__count {
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    color: #cfe0ff;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 8px rgba(var(--accent-rgb), 0.35);
    transition: color 240ms ease, transform 240ms ease;
}

/* Хвостовая анимация последних 3 секунд — мягкая пульсация и смена цвета */
.rate-ring.is-ending .rate-ring__count {
    color: #ffd27a;
    text-shadow: 0 0 10px rgba(255, 196, 122, 0.55);
    animation: rate-ring-pulse 700ms ease-in-out infinite;
}
.rate-ring.is-ending .rate-ring__bar {
    filter: drop-shadow(0 0 6px rgba(255, 196, 122, 0.7));
}
@keyframes rate-ring-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.14); }
}

/* Момент «сброса» на новый цикл — плавный flash всего кольца */
.rate-ring.is-refreshing .rate-ring__bar {
    animation: rate-ring-flash 520ms ease-out;
}
@keyframes rate-ring-flash {
    0%   { filter: drop-shadow(0 0 10px rgba(var(--accent-rgb), 0.95)); opacity: 0.65; }
    60%  { filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), 0.7)); opacity: 1; }
    100% { filter: drop-shadow(0 0 4px rgba(var(--accent-rgb), 0.55)); opacity: 1; }
}

@media (max-width: 576px) {
    .rate-ring { width: 36px; height: 36px; }
    .rate-ring__count { font-size: 0.72rem; }
}

.affiliate-program-card .affiliate-table tbody tr {
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.affiliate-program-card .affiliate-table tbody tr:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.14), rgba(var(--accent-2-rgb), 0.12)) !important;
    box-shadow: 0 10px 28px rgba(8, 14, 26, 0.35) !important;
}

.affiliate-program-card .affiliate-cell-value {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@media (max-width: 576px) {
    .affiliate-program-card .affiliate-table-wrapper {
        padding: 0.25rem 0.15rem !important;
    }

    .affiliate-program-card .affiliate-table tbody tr {
        background: rgba(8, 12, 22, 0.78) !important;
        box-shadow: 0 8px 22px rgba(8, 14, 26, 0.4) !important;
    }
}

.affiliate-program-card .affiliate-table tbody tr,
+.discount-program-card .discount-table tbody tr {
     transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
 }
 
-.affiliate-program-card .affiliate-table tbody tr:hover {
+.affiliate-program-card .affiliate-table tbody tr:hover,
+.discount-program-card .discount-table tbody tr:hover {
     transform: translateY(-2px);
     background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.14), rgba(var(--accent-2-rgb), 0.12)) !important;
     box-shadow: 0 10px 28px rgba(8, 14, 26, 0.35) !important;
 }
 
-.affiliate-program-card .affiliate-cell-value {
+.affiliate-program-card .affiliate-cell-value,
+.discount-program-card .discount-cell-value {
     background: linear-gradient(135deg, var(--accent), var(--accent-2));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }
 
 @media (max-width: 576px) {
-    .affiliate-program-card .affiliate-table-wrapper {
+    .affiliate-program-card .affiliate-table-wrapper,
+    .discount-program-card .discount-table-wrapper {
         padding: 0.25rem 0.15rem !important;
     }
 
-    .affiliate-program-card .affiliate-table tbody tr {
+    .affiliate-program-card .affiliate-table tbody tr,
+    .discount-program-card .discount-table tbody tr {
         background: rgba(8, 12, 22, 0.78) !important;
         box-shadow: 0 8px 22px rgba(8, 14, 26, 0.4) !important;
     }
 }

.rates-list-grid {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-bottom: 2rem;
}

.rates-show-more-wrapper {
	display: none;
	justify-content: center;
	margin-top: 1.25rem;
}

.rates-show-more-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 1.75rem;
	border-radius: 12px;
	border: 1px solid rgba(var(--accent-rgb), 0.28);
	background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.14), rgba(var(--accent-2-rgb), 0.1));
	color: #cbd5f5;
	font-weight: 600;
	font-size: 0.9375rem;
	letter-spacing: 0.01em;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
	backdrop-filter: blur(12px);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.rates-show-more-btn:hover {
	transform: translateY(-2px);
	border-color: rgba(var(--accent-rgb), 0.45);
	color: #ffffff;
	box-shadow: 0 12px 32px rgba(var(--accent-2-rgb), 0.2);
}

.rates-show-more-btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 0.2rem rgba(var(--accent-rgb), 0.35);
}

@media (max-width: 576px) {
	.rates-show-more-wrapper {
		margin-top: 1rem;
	}

	.rates-show-more-btn {
		width: 100%;
		padding: 0.65rem 1.25rem;
		font-size: 0.875rem;
	}
}

/* MOBILE NAVBAR OPTIMIZATION */
@media (max-width: 576px) {
	body .navbar-wrapper {
		padding: 0.4rem 0 !important;
		background: rgba(6, 9, 16, 0.97) !important;
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
		box-shadow: 0 10px 20px rgba(0, 0, 0, 0.45) !important;
		animation: none !important;
	}

	body .navbar-modern {
		background: rgba(8, 12, 20, 0.95) !important;
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
		box-shadow: 0 12px 24px rgba(4, 8, 18, 0.45) !important;
		transition: background 0.2s ease;
	}

	body .navbar-nav {
		gap: 0.45rem !important;
	}

	body .nav-link-modern {
		justify-content: space-between !important;
		padding: 0.65rem 1rem !important;
		font-size: 0.84rem !important;
		border-radius: 10px !important;
		background: rgba(12, 18, 32, 0.88) !important;
		border: 1px solid rgba(var(--accent-rgb), 0.16) !important;
		box-shadow: none !important;
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
		transition: background 0.15s ease, color 0.15s ease !important;
		text-shadow: none !important;
		transform: none !important;
	}

	body .nav-link-modern::before {
		display: none !important;
	}

	body .nav-link-modern:hover,
	body .nav-link-modern:focus,
	body .nav-link-modern:active,
	body .nav-link-modern.active {
		background: rgba(18, 28, 48, 0.96) !important;
		color: #ffffff !important;
		border-color: rgba(var(--accent-rgb), 0.32) !important;
		box-shadow: none !important;
		transform: none !important;
	}

	body .btn-account,
	body .navbar-toggler-modern {
		background: rgba(12, 18, 32, 0.92) !important;
		border: 1px solid rgba(var(--accent-rgb), 0.2) !important;
		box-shadow: none !important;
	}

	body .dropdown-menu {
		width: calc(100% - 1.5rem) !important;
		max-width: calc(100% - 1.5rem) !important;
		left: 50% !important;
		right: auto !important;
		transform: translateX(-50%) !important;
		margin-top: 0.75rem !important;
		border-radius: 14px !important;
		border: 1px solid rgba(var(--accent-rgb), 0.15) !important;
		padding: 0.4rem 0 !important;
		background: rgba(10, 14, 24, 0.98) !important;
		box-shadow: 0 12px 32px rgba(4, 8, 18, 0.55) !important;
	}

	body .navbar-wrapper .navbar #navbar .dropdown > .dropdown-menu {
		position: fixed !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		max-width: none !important;
		min-width: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		transform: none !important;
		border-radius: 0 !important;
		padding-left: max(0.75rem, env(safe-area-inset-left, 0px)) !important;
		padding-right: max(0.75rem, env(safe-area-inset-right, 0px)) !important;
		box-sizing: border-box !important;
		z-index: 1060 !important;
	}

	body .navbar-wrapper .navbar #navbar .dropdown > .dropdown-menu.dropdown-menu-end,
	body .navbar-wrapper .navbar #navbar .dropdown > .dropdown-menu[class*="dropdown-menu-"][class*="-end"] {
		left: 0 !important;
		right: 0 !important;
		transform: none !important;
	}

	body .dropdown-item {
		padding: 0.65rem 1.1rem !important;
		font-size: 0.85rem !important;
		color: rgba(220, 228, 244, 0.9) !important;
		background: transparent !important;
		transition: background 0.15s ease, color 0.15s ease;
	}

	body .dropdown-item:hover,
	body .dropdown-item:focus,
	body .dropdown-item:active {
		background: rgba(24, 32, 52, 0.92) !important;
		color: #ffffff !important;
	}
}

/* ============================================
   Exchange Tabs System - Стили для вкладок FIAT/SWAP/BRIDGE/DEX
   ============================================ */

/* Убеждаемся что exchange-tabs не перекрывает custom-select */
#exchange-tabs {
  z-index: 1 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  text-align: center !important;
}

#exchange-tabs .exchange-tabs-container {
  z-index: 1 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 auto 1.5rem auto !important;
}

#exchange-tabs .exchange-tabs-nav {
  z-index: 1 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: auto !important;
  margin: 0 auto !important;
}

#exchange-tabs .exchange-tabs-inner {
  z-index: 1 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: auto !important;
  margin: 0 auto !important;
  gap: 10px !important; /* Отступ между кнопками 10px */
}

/* Custom-select должен быть выше вкладок */
#exchange-form .custom-select-wrapper {
  z-index: 999999 !important;
  position: relative !important;
  height: auto !important;
  min-height: auto !important;
}

#exchange-form .custom-select-dropdown {
  z-index: 999999 !important;
  position: absolute !important;
  height: auto !important;
  min-height: 0 !important;
}

.exchange-tabs-container {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: auto !important;
  max-width: 100% !important;
  position: relative;
  z-index: 1 !important;
  margin: 0 auto 1.5rem auto !important;
}

.exchange-tabs-nav {
  position: relative !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0;
  padding: 0.4rem;
  background: rgba(11, 11, 11, 0.85) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(var(--accent-rgb), 0.2) !important;
  border-radius: 16px !important;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.5),
    0 1px 0 rgba(var(--accent-rgb), 0.1) inset,
    0 -1px 0 rgba(0, 0, 0, 0.3) inset !important;
  overflow: visible !important;
  z-index: 1 !important;
  pointer-events: auto !important;
  width: auto !important;
  margin: 0 auto !important;
}

/* Внутренняя обертка для обрезки свечения */
.exchange-tabs-inner {
  position: relative !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px; /* Отступ между кнопками 10px */
  width: auto !important;
  max-width: 100% !important;
  height: 100%;
  min-height: 2rem;
  overflow: visible !important;
  border-radius: 16px;
  z-index: 1 !important;
  margin: 0 auto !important;
  flex-wrap: nowrap !important;
}

/* CSS переменные для синхронизации маски с ползунком */
.exchange-tabs-nav {
  --slider-left: 0px;
  --slider-width: 0px;
}

.exchange-tabs-nav::before {
  display: none !important;
}

/* Ползунок с анимацией */
.exchange-tabs-slider {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 0 !important;
  min-height: 100% !important;
  height: 100% !important;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.25), rgba(var(--accent-2-rgb), 0.25)) !important;
  backdrop-filter: blur(12px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
  border: 1px solid rgba(var(--accent-rgb), 0.4) !important;
  border-radius: 12px !important;
  box-shadow: 
    0 4px 16px rgba(var(--accent-rgb), 0.3),
    0 0 20px rgba(var(--accent-rgb), 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2) !important;
  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1), width 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  z-index: 0 !important;
  pointer-events: none !important;
  will-change: left, width !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  overflow: visible !important;
  /* КРИТИЧНО: Исключаем слайдер из flex-потока, чтобы он не влиял на центровку */
  flex: 0 0 0 !important;
  flex-basis: 0 !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
}

.exchange-tab-btn {
  position: relative !important;
  flex: 0 0 auto !important;
  padding: 0.6rem 1.5rem !important;
  background: transparent !important;
  border: none !important;
  border-radius: 12px !important;
  color: rgba(230, 234, 240, 0.7) !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  z-index: 10 !important;
  min-width: auto !important;
  width: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  pointer-events: auto !important;
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
  will-change: color, font-weight, transform !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  box-shadow: none !important;
  outline: none !important;
  text-decoration: none !important;
  margin-right: 5px !important; /* Отступ справа 5px (итого 10px между кнопками) */
}

.exchange-tab-btn:last-child {
  margin-right: 0 !important; /* Убираем отступ у последней кнопки */
}

.exchange-tab-btn:hover {
  color: rgba(var(--accent-rgb), 0.95) !important;
  background: rgba(var(--accent-rgb), 0.1) !important;
  transform: translateY(-1px) !important;
}

.exchange-tab-btn.active {
  color: #ffffff !important;
  font-weight: 600 !important;
  text-shadow: 0 0 12px rgba(var(--accent-rgb), 0.6), 0 1px 3px rgba(0, 0, 0, 0.4) !important;
  background: transparent !important;
}

.exchange-tab-btn span {
  position: relative !important;
  z-index: 1 !important;
  display: inline-block !important;
}

.exchange-tab-content {
  /* Видимость управляется через inline стили в JavaScript */
  /* НЕ устанавливаем display здесь - только через JavaScript inline стили */
  transition: opacity 0.15s ease-out, visibility 0.15s ease-out;
  will-change: opacity, visibility;
  /* КРИТИЧНО: Разрешаем скролл на мобильных */
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: auto !important;
  /* Убираем все правила display - полностью управляется через JavaScript */
}

/* По умолчанию все вкладки скрыты, кроме активной */
.exchange-tab-content:not(.active) {
  display: none !important;
}

/* Fiat вкладка должна быть видна по умолчанию (через класс active) */
.exchange-tab-content.active {
  display: block !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   Rate Type Toggle (Market / Fixed) — segmented pill
   ───────────────────────────────────────────────────────────────────────
   Два «сегмента» в одном pill-контейнере. Активный подсвечивается
   градиентной плашкой, неактивный — ghost. !important на фон/бордер
   нужен: в проекте живёт глобальное `div:not(#z):not(#z){background-color:
   transparent !important}` и Tailwind preflight (`button{background-image:
   none}`) — без !important они съедают наш фон и кнопки пропадают.
   ═══════════════════════════════════════════════════════════════════ */

.rate-type-container {
  flex-wrap: wrap;
}

.rate-type-label {
  margin: 0;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(207, 224, 255, 0.55);
}

.rate-type-toggle,
div.rate-type-toggle,
div#swap-rate-type-toggle.rate-type-toggle {
  display: inline-flex !important;
  flex-direction: row !important;
  gap: 2px !important;
  padding: 3px !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, rgba(11, 15, 24, 0.9), rgba(18, 22, 34, 0.8)) !important;
  background-color: rgba(11, 15, 24, 0.9) !important;
  background-image: linear-gradient(135deg, rgba(11, 15, 24, 0.9), rgba(18, 22, 34, 0.8)) !important;
  border: 1px solid rgba(var(--accent-rgb), 0.22) !important;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.45),
              0 2px 10px rgba(0, 0, 0, 0.28) !important;
  position: relative;
  overflow: hidden;
}

.rate-type-btn,
button.rate-type-btn,
.rate-type-toggle .rate-type-btn {
  position: relative;
  z-index: 1;
  -webkit-appearance: none !important;
  appearance: none !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: rgba(207, 224, 255, 0.65) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.6875rem !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  padding: 0.32rem 0.75rem !important;
  border-radius: 7px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: color 0.25s ease,
              background 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.25s ease,
              transform 0.12s ease !important;
}

.rate-type-btn:hover,
button.rate-type-btn:hover {
  color: #e6eaf0 !important;
  background: rgba(var(--accent-rgb), 0.08) !important;
  background-color: rgba(var(--accent-rgb), 0.08) !important;
  background-image: none !important;
}

.rate-type-btn:active,
button.rate-type-btn:active {
  transform: scale(0.97);
}

.rate-type-btn:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.5),
              0 0 0 4px rgba(var(--accent-rgb), 0.18) !important;
}

/* Активная кнопка — градиентная плашка */
.rate-type-btn.active,
button.rate-type-btn.active,
.rate-type-toggle .rate-type-btn.active,
#swap-rate-type-toggle .rate-type-btn.active {
  color: #ffffff !important;
  background: linear-gradient(135deg,
      rgba(var(--accent-rgb), 0.95) 0%,
      rgba(var(--accent-2-rgb), 0.85) 55%,
      rgba(167, 139, 250, 0.9) 100%) !important;
  background-color: rgba(var(--accent-rgb), 0.9) !important;
  background-image: linear-gradient(135deg,
      rgba(var(--accent-rgb), 0.95) 0%,
      rgba(var(--accent-2-rgb), 0.85) 55%,
      rgba(167, 139, 250, 0.9) 100%) !important;
  border-color: rgba(var(--accent-rgb), 0.5) !important;
  box-shadow: 0 6px 16px rgba(var(--accent-rgb), 0.32),
              0 0 0 1px rgba(255, 255, 255, 0.08) inset,
              0 1px 0 rgba(255, 255, 255, 0.18) inset !important;
  text-shadow: 0 1px 3px rgba(6, 12, 30, 0.5) !important;
}

.rate-type-btn.active:hover,
button.rate-type-btn.active:hover {
  filter: brightness(1.08);
  background: linear-gradient(135deg,
      rgba(var(--accent-rgb), 0.95) 0%,
      rgba(var(--accent-2-rgb), 0.85) 55%,
      rgba(167, 139, 250, 0.9) 100%) !important;
}

/* Мобильная версия для кнопок типа курса */
@media (max-width: 768px) {
  /* Глобальные правила для предотвращения горизонтального скролла */
  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    max-width: 100% !important;
    width: 100% !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: none !important;
    overscroll-behavior-y: auto !important;
  }
  
  /* Блокируем горизонтальный скролл для всех элементов */
  * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Блокируем горизонтальный скролл для всех контейнеров */
  body > *,
  html > * {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
  }
  
  /* Все контейнеры должны учитывать padding в ширине */
  *,
  *::before,
  *::after {
    box-sizing: border-box !important;
  }
  
  /* Основные контейнеры */
  .container,
  .container-fluid {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  
  .row {
    max-width: 100% !important;
    width: calc(100% + 1.5rem) !important;
    margin-left: -0.75rem !important;
    margin-right: -0.75rem !important;
  }
  
  /* Колонки Bootstrap */
  [class*="col-"] {
    max-width: 100% !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    width: 100% !important;
    flex: 0 0 100% !important;
  }
  
  /* Форма обмена */
  #exchange-form,
  .exchange-form {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    overflow-x: hidden !important;
    margin: 0 auto !important;
  }
  
  /* Контейнеры вкладок - КРИТИЧНО: Центрирование на мобильных */
  #exchange-tabs {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    position: relative !important;
    left: 0 !important;
    transform: none !important;
  }
  
  .exchange-tabs-container {
    max-width: 100% !important;
    width: auto !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    position: relative !important;
    transform: none !important;
  }
  
  .exchange-tabs-nav {
    margin: 0 auto !important;
    transform: none !important;
    left: 0 !important;
    position: relative !important;
  }
  
  .exchange-tabs-inner {
    margin: 0 auto !important;
    transform: none !important;
    left: 0 !important;
    position: relative !important;
  }
  
  .exchange-tabs-nav,
  .exchange-tabs-inner {
    max-width: 100% !important;
    width: auto !important;
    box-sizing: border-box !important;
    gap: 10px !important; /* Отступ между кнопками 10px на мобильных */
  }
  
  /* Контент вкладок */
  .exchange-tab-content {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    margin: 0 auto !important;
  }
  
  /* Custom select */
  .custom-select-wrapper {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  .custom-select-dropdown {
    max-width: calc(100vw - 1.5rem) !important;
    box-sizing: border-box !important;
  }

  /* Exchange form: даём селектам больше полезной ширины на мобильных.
     Без этого ширина съедается сразу несколькими слоями: .container,
     #exchange-form, .exchange-tab-content, .p-4 и колонками Bootstrap. */
  .container:has(#exchange-form) {
    padding-left: 0.375rem !important;
    padding-right: 0.375rem !important;
  }

  .container:has(#exchange-form) > .my-3 {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #exchange-form,
  #exchange-form .exchange-tab-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #exchange-form .exchange-widget {
    padding: 0 !important;
    border-radius: 18px !important;
  }

  #exchange-form .exchange-widget > .p-4,
  #exchange-form .exchange-widget > .p-md-5 {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  #exchange-form .row {
    --bs-gutter-x: 0.5rem !important;
    width: calc(100% + 0.5rem) !important;
    margin-left: -0.25rem !important;
    margin-right: -0.25rem !important;
  }

  #exchange-form [class*="col-"] {
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
  }

  #exchange-form .exchange-block {
    padding: 1rem 0.75rem !important;
    border-radius: 12px !important;
  }

  #exchange-form .custom-select-dropdown {
    max-width: calc(100vw - 0.75rem) !important;
  }
  
  .custom-select-options {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Исправляем dropdown-menu с 100vw */
  .dropdown-menu {
    width: calc(100% - 1.5rem) !important;
    max-width: calc(100% - 1.5rem) !important;
  }

  /* Шапка: полная ширина экрана (см. @media max-width: 1199.98px + main.js для top) */
  body .navbar-wrapper .navbar #navbar .dropdown > .dropdown-menu {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
    border-radius: 0 !important;
    padding-left: max(0.75rem, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(0.75rem, env(safe-area-inset-right, 0px)) !important;
    box-sizing: border-box !important;
    z-index: 1060 !important;
  }

  body .navbar-wrapper .navbar #navbar .dropdown > .dropdown-menu.dropdown-menu-end,
  body .navbar-wrapper .navbar #navbar .dropdown > .dropdown-menu[class*="dropdown-menu-"][class*="-end"] {
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
  }
  
  /* Скрываем надпись "Тип курса" на мобильных */
  .rate-type-label,
  .rate-type-container > label.mb-0,
  .d-flex.rate-type-container > label,
  label.rate-type-label,
  .col-12.mt-3 .rate-type-container label {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
  }
  
  /* Изменяем контейнер на вертикальный и растягиваем на всю ширину */
  .rate-type-container,
  .d-flex.rate-type-container,
  .col-12.mt-3 > .d-flex.rate-type-container,
  div.d-flex.rate-type-container {
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0.75rem !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
  }
  
  /* Изменяем контейнер кнопок на вертикальный */
  .rate-type-toggle,
  #swap-rate-type-toggle,
  div.rate-type-toggle#swap-rate-type-toggle,
  div#swap-rate-type-toggle.rate-type-toggle {
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 0.75rem !important;
    padding: 0 !important;
    display: flex !important;
    box-sizing: border-box !important;
  }
  
  /* Растягиваем кнопки на всю ширину с отступами */
  .rate-type-btn,
  #swap-rate-type-toggle .rate-type-btn,
  button.rate-type-btn,
  .rate-type-toggle button.rate-type-btn,
  #swap-rate-type-toggle button.rate-type-btn {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0.75rem 1rem !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    flex: 1 1 100% !important;
    min-width: 0 !important;
    flex-shrink: 0 !important;
  }
}

/* ============================================
   Agreement Links Styles
   ============================================ */
.agreement-link {
    color: var(--accent) !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.agreement-link:hover,
.agreement-link:focus {
    color: var(--accent-2) !important;
    text-decoration: none !important;
}

.agreement-link:hover span,
.agreement-link:focus span {
    border-bottom-color: rgba(var(--accent-2-rgb), 0.5) !important;
}

.agreement-link svg {
    transition: transform 0.2s ease !important;
}

.agreement-link:hover svg,
.agreement-link:focus svg {
    transform: scale(1.1) !important;
}

/* Мобильная версия для ссылок соглашений */
@media (max-width: 768px) {
    .agreement-link {
        font-size: 0.875rem !important;
        padding: 0.5rem 0 !important;
    }
    
    .agreement-link svg {
        width: 14px !important;
        height: 14px !important;
    }
}

/* ============================================
   Promocode Field
   ============================================ */

.promocode-wrapper {
  position: relative;
}

.promocode-wrapper .form-control {
  background: rgba(11, 11, 11, 0.6);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 16px;
  color: var(--text);
  padding: 0.75rem 1rem;
}

.promocode-wrapper .form-control:focus {
  background: rgba(11, 11, 11, 0.8);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
}

.promocode-status {
  margin-top: 0.5rem;
  padding: 0.5rem;
  border-radius: 12px;
  font-size: 0.875rem;
}

.promocode-status.valid {
  background: rgba(16, 185, 129, 0.1);
  color: var(--success);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.promocode-status.invalid {
  background: rgba(239, 68, 68, 0.1);
  color: var(--danger);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

/* ===== DEX Wallet Select Modal ===== */
/* КРИТИЧНО: Правила ТОЛЬКО для DEX модального окна (#dex-wallet-select-modal), не затрагивают другие вкладки */
/* КРИТИЧНО: Правила ТОЛЬКО для #dex-wallet-select-modal, не затрагивают другие элементы */
/* КРИТИЧНО: Когда скрыто - position: absolute вместо fixed чтобы не влиять на layout */
#dex-wallet-select-modal.dex-modal-overlay {
  position: absolute !important; /* absolute когда скрыто, чтобы не блокировать */
  top: -9999px !important; /* Убираем за пределы экрана */
  left: -9999px !important;
  width: 0 !important;
  height: 0 !important;
  z-index: -9999 !important; /* КРИТИЧНО: Очень отрицательный z-index когда скрыто */
  display: none !important; /* КРИТИЧНО: По умолчанию скрыто */
  align-items: center !important; /* КРИТИЧНО: Центрирование по вертикали */
  justify-content: center !important; /* КРИТИЧНО: Центрирование по горизонтали */
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important; /* КРИТИЧНО: none когда скрыто */
  visibility: hidden !important;
  opacity: 0 !important;
  overflow: hidden !important;
}

/* Показываем только когда есть inline style display: flex */
/* КРИТИЧНО: При открытии используем position: fixed */
#dex-wallet-select-modal.dex-modal-overlay[style*="display: flex"],
#dex-wallet-select-modal.dex-modal-overlay.show {
  display: flex !important;
  position: fixed !important; /* fixed при открытии */
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 100002 !important; /* Восстанавливаем z-index при открытии */
  pointer-events: none !important; /* КРИТИЧНО: none чтобы клики проходили через пустую область */
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
  align-items: center !important; /* КРИТИЧНО: Центрирование по вертикали */
  justify-content: center !important; /* КРИТИЧНО: Центрирование по горизонтали */
  flex-direction: row !important; /* КРИТИЧНО: Горизонтальное направление для центрирования */
}

/* Когда скрыто - полностью отключаем все взаимодействия */
/* КРИТИЧНО: Правила ТОЛЬКО для #dex-wallet-select-modal, не затрагивают другие элементы */
#dex-wallet-select-modal.dex-modal-overlay:not([style*="display: flex"]),
#dex-wallet-select-modal.dex-modal-overlay[style*="display: none"] {
  pointer-events: none !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  z-index: -9999 !important; /* КРИТИЧНО: Очень отрицательный z-index когда скрыто, чтобы НЕ блокировать страницу */
}

/* КРИТИЧНО: Все дочерние элементы тоже должны быть неактивны когда скрыто */
/* КРИТИЧНО: Правила ТОЛЬКО для #dex-wallet-select-modal, не затрагивают другие элементы */
#dex-wallet-select-modal.dex-modal-overlay:not([style*="display: flex"]) *,
#dex-wallet-select-modal.dex-modal-overlay[style*="display: none"] * {
  pointer-events: none !important;
  z-index: -9999 !important;
  display: none !important;
}

/* Backdrop - затемнение, ниже диалога */
#dex-wallet-select-backdrop.dex-modal-backdrop {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-color: rgba(0, 0, 0, 0.5) !important;
  z-index: 1 !important; /* Ниже диалога */
  pointer-events: auto !important; /* Кликабелен для закрытия */
}

/* Dialog - контейнер для центрирования */
#dex-wallet-select-modal .dex-modal-dialog,
.dex-modal-dialog {
  position: relative !important;
  z-index: 2 !important; /* Выше backdrop */
  pointer-events: auto !important; /* КРИТИЧНО: auto чтобы диалог был кликабельным */
  max-width: 500px !important;
  width: 90% !important;
  margin: 0 auto !important;
  align-self: center !important; /* КРИТИЧНО: Центрирование по вертикали в flex контейнере */
  flex-shrink: 0 !important; /* КРИТИЧНО: Не сжимается в flex контейнере */
}

/* Content - само модальное окно */
.dex-modal-content {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(32px) brightness(0.9) !important;
  -webkit-backdrop-filter: blur(32px) brightness(0.9) !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Мобильная версия - убираем прозрачность, черный фон */
@media (max-width: 768px) {
  /* Основной контент модального окна - черный непрозрачный фон */
  .dex-modal-content,
  #dex-wallet-select-modal .dex-modal-content,
  .dex-modal-dialog .dex-modal-content {
    background: var(--bg) !important;
    background-color: var(--bg) !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1 !important;
    -webkit-opacity: 1 !important;
    filter: none !important;
    -webkit-filter: none !important;
  }
  
  /* Также убираем прозрачность у backdrop на мобильных */
  #dex-wallet-select-backdrop.dex-modal-backdrop,
  .dex-modal-backdrop {
    background-color: rgba(0, 0, 0, 0.85) !important;
    background: rgba(0, 0, 0, 0.85) !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  
  /* Убираем прозрачность у всех элементов внутри модального окна */
  .dex-modal-content *,
  #dex-wallet-select-modal .dex-modal-content * {
    opacity: 1 !important;
  }
  
  /* Убираем прозрачность у header, body, footer */
  .dex-modal-header,
  .dex-modal-body,
  .dex-modal-footer,
  #dex-wallet-select-modal .dex-modal-header,
  #dex-wallet-select-modal .dex-modal-body,
  #dex-wallet-select-modal .dex-modal-footer {
    background: transparent !important;
    background-color: transparent !important;
    opacity: 1 !important;
  }
  
  /* Убираем прозрачные границы */
  .dex-modal-content {
    border: 1px solid rgba(var(--accent-rgb), 0.3) !important;
  }
  
  /* Скрываем крестик закрытия на мобильных */
  .dex-modal-close,
  #dex-wallet-select-close,
  .dex-modal-header .dex-modal-close {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}

.dex-modal-header {
  padding: 1.5rem !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  pointer-events: auto !important;
}

.dex-modal-title {
  margin: 0 !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  pointer-events: auto !important;
}

.dex-modal-close {
  background: transparent !important;
  border: none !important;
  font-size: 2rem !important;
  line-height: 1 !important;
  cursor: pointer !important;
  color: #666 !important;
  padding: 0 !important;
  width: 2rem !important;
  height: 2rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: auto !important;
  transition: color 0.15s ease !important;
}

.dex-modal-close:hover {
  color: #000 !important;
}

.dex-modal-body {
  padding: 1.5rem !important;
  pointer-events: auto !important;
}

.dex-modal-footer {
  padding: 1rem 1.5rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
  display: flex !important;
  justify-content: flex-end !important;
  pointer-events: auto !important;
}

/* Все элементы внутри модального окна должны быть кликабельными ТОЛЬКО когда модальное окно видимо */
/* КРИТИЧНО: Правила ТОЛЬКО для #dex-wallet-select-modal, не затрагивают другие элементы */
#dex-wallet-select-modal.dex-modal-overlay[style*="display: flex"] * {
  pointer-events: auto !important;
}

/* Исключение для overlay - он должен пропускать клики когда видим */
#dex-wallet-select-modal.dex-modal-overlay[style*="display: flex"] {
  pointer-events: none !important;
}

/* Неактивные поля выбора монет в DEX */
.dex-coin-select-inactive {
  pointer-events: none !important;
  opacity: 0.5 !important;
}

.dex-coin-select-inactive .custom-select-trigger {
  cursor: not-allowed !important;
}

.dex-coin-select-inactive .custom-select-arrow {
  opacity: 0.5 !important;
}

/* ============================================
   КРИТИЧЕСКИ ВАЖНО: Центрирование вкладок - максимальная специфичность
   ============================================ */
#exchange-form #exchange-tabs {
  position: relative !important;
  width: 100% !important;
  text-align: center !important;
  display: block !important;
}

#exchange-form #exchange-tabs .exchange-tabs-container {
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: inline-block !important;
  width: auto !important;
  max-width: 100% !important;
  margin-bottom: 1.5rem !important;
  text-align: center !important;
}

#exchange-form #exchange-tabs .exchange-tabs-nav {
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: auto !important;
  text-align: center !important;
}

#exchange-form #exchange-tabs .exchange-tabs-inner {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: auto !important;
  text-align: center !important;
  gap: 10px !important; /* Отступ между кнопками 10px */
}

/* ============================================
   КРИТИЧЕСКИ ВАЖНО: Стили кнопок вкладок - максимальная специфичность
   ============================================ */
#exchange-form #exchange-tabs button.exchange-tab-btn,
#exchange-form #exchange-tabs .exchange-tab-btn {
  position: relative !important;
  flex: 0 0 auto !important;
  padding: 0.6rem 1.5rem !important;
  background: transparent !important;
  border: none !important;
  border-radius: 12px !important;
  color: rgba(230, 234, 240, 0.7) !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  z-index: 10 !important;
  min-width: auto !important;
  width: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  pointer-events: auto !important;
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
  will-change: color, font-weight, transform !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  box-shadow: none !important;
  outline: none !important;
  text-decoration: none !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
  line-height: 1.5 !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Оптимизация для мобильной версии - ускоряем переключение вкладок */
@media (max-width: 768px) {
  /* КРИТИЧНО: Отступы справа для контейнера вкладок на мобильных, чтобы последняя вкладка не упиралась в край */
  #exchange-tabs,
  #exchange-form #exchange-tabs {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  #exchange-tabs .exchange-tabs-container,
  #exchange-form #exchange-tabs .exchange-tabs-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: calc(100% - 2rem) !important;
    position: relative !important;
    left: 20px !important;
  }
  
  #exchange-tabs .exchange-tabs-nav,
  #exchange-form #exchange-tabs .exchange-tabs-nav {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  #exchange-tabs .exchange-tabs-inner,
  #exchange-form #exchange-tabs .exchange-tabs-inner {
    padding-right: 1.3125rem !important; /* Отступ справа 21px (16px + 5px), чтобы последняя вкладка не упиралась в край */
  }
  
  #exchange-form #exchange-tabs button.exchange-tab-btn,
  #exchange-form #exchange-tabs .exchange-tab-btn {
    transition: color 0.15s ease, font-weight 0.15s ease !important;
    will-change: color !important;
  }
  
  #exchange-form #exchange-tabs .exchange-tabs-slider {
    transition: left 0.2s cubic-bezier(0.4, 0, 0.2, 1), width 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    /* КРИТИЧНО: Ползунок не должен влиять на layout на мобильных */
    position: absolute !important;
    flex: 0 0 0 !important;
    flex-basis: 0 !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    width: 0 !important;
    pointer-events: none !important;
  }
  
  #exchange-form #exchange-tabs button.exchange-tab-btn:hover,
  #exchange-form #exchange-tabs .exchange-tab-btn:hover {
    transform: none !important;
  }
}

/* КРИТИЧНО: Отступы между кнопками вкладок - максимальная специфичность */
#exchange-tabs .exchange-tabs-inner .exchange-tab-btn:not(:last-child),
#exchange-form #exchange-tabs .exchange-tabs-inner .exchange-tab-btn:not(:last-child),
.exchange-tabs-inner .exchange-tab-btn:not(:last-child) {
  margin-right: 10px !important;
}

#exchange-tabs .exchange-tabs-inner .exchange-tab-btn:last-child,
#exchange-form #exchange-tabs .exchange-tabs-inner .exchange-tab-btn:last-child,
.exchange-tabs-inner .exchange-tab-btn:last-child {
  margin-right: 0 !important;
}

#exchange-form #exchange-tabs button.exchange-tab-btn:hover,
#exchange-form #exchange-tabs .exchange-tab-btn:hover {
  color: rgba(var(--accent-rgb), 0.95) !important;
  background: rgba(var(--accent-rgb), 0.1) !important;
  transform: translateY(-1px) !important;
}

#exchange-form #exchange-tabs button.exchange-tab-btn.active,
#exchange-form #exchange-tabs .exchange-tab-btn.active {
  color: #ffffff !important;
  font-weight: 600 !important;
  text-shadow: 0 0 12px rgba(var(--accent-rgb), 0.6), 0 1px 3px rgba(0, 0, 0, 0.4) !important;
  background: transparent !important;
}

#exchange-form #exchange-tabs button.exchange-tab-btn span,
#exchange-form #exchange-tabs .exchange-tab-btn span {
  position: relative !important;
  z-index: 1 !important;
  display: inline-block !important;
}