:root {
	--surface: #1a1a2e;
	--surface2: #16213e;
	--surface3: #0f3460;
	--border: #3a3a5a;
	--text: #e6e6e6;
	--muted: #a0a0b8;
}

.gradient-bg {
	background: linear-gradient(135deg, #0f3460 0%, #1a1a2e 50%, #16213e 100%);
	position: relative;
	overflow: hidden;
}

.gradient-bg::before {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, rgba(59, 130, 246, 0) 70%);
	animation: float 20s infinite linear;
	z-index: 0;
}

.static-bg {
	background: linear-gradient(135deg, #0f3460 0%, #1a1a2e 50%, #16213e 100%);
	position: relative;
	overflow: hidden;
}

@keyframes float {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.chart-container {
	width: 100%;
}

.coin-card {
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
	position: relative;
	overflow: hidden;
}

.coin-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 5px;
	background: linear-gradient(90deg, transparent, var(--border), transparent);
	animation: shine 3s infinite;
}

@keyframes shine {
	0% { left: -100%; }
	100% { left: 100%; }
}

.coin-card:hover {
	transform: translateY(-10px) scale(1.02);
	box-shadow: 0 25px 35px -10px rgba(0, 0, 0, 0.4);
}

.coin-card:hover .feature-icon {
	transform: scale(1.1) rotate(5deg);
}

.feature-icon {
	transition: all 0.3s ease;
	display: inline-block;
}

.animate-pulse {
	animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

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

.chart-bg-frame {
	background-color: #070d16;
	border: 1px solid var(--border);
	position: relative;
	overflow: hidden;
}

.custom-table th {
	background-color: var(--surface2);
	color: var(--muted);
	border-bottom: 1px solid var(--border);
	user-select: none;
	position: relative;
}

.custom-table th.sortable {
	cursor: pointer;
	transition: all 0.2s;
}

.custom-table th.sortable:hover {
	background-color: var(--surface3);
	color: #ffffff;
}

.custom-table tr {
	border-bottom: 1px solid var(--border);
	background-color: var(--surface);
	transition: all 0.2s;
}

.custom-table tr:hover {
	background-color: rgba(15, 52, 96, 0.2);
}

.custom-table tr td {
	transition: all 0.2s;
}

.custom-table tr:hover td {
	transform: translateX(5px);
}

.crypto-icon {
	transition: all 0.3s ease;
}

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

.range-btn {
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.range-btn.active {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.subscribe-btn {
	position: relative;
	overflow: hidden;
}

.subscribe-btn::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 5px;
	height: 5px;
	background: rgba(255, 255, 255, 0.5);
	opacity: 0;
	border-radius: 100%;
	transform: scale(1, 1) translate(-50%, -50%);
	transform-origin: 50% 50%;
}

.subscribe-btn:focus:not(:active)::after {
	animation: ripple 1s ease-out;
}

@keyframes ripple {
	0% {
		transform: scale(0, 0);
		opacity: 0.5;
	}
	100% {
		transform: scale(20, 20);
		opacity: 0;
	}
}

.floating-coins {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	pointer-events: none;
	z-index: -1;
	overflow: hidden;
}

.floating-coin {
	position: absolute;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(59,130,246,0.3) 70%);
	animation: floatCoin linear infinite;
}

@keyframes floatCoin {
	0% {
		transform: translateY(100vh) rotate(0deg);
		opacity: 0;
	}
	10% {
		opacity: 1;
	}
	90% {
		opacity: 1;
	}
	100% {
		transform: translateY(-100px) rotate(360deg);
		opacity: 0;
	}
}

.title-animation {
	opacity: 0;
	transform: translateY(30px);
	transition: all 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.title-animation.visible {
	opacity: 1;
	transform: translateY(0);
}

.feature-stagger {
	opacity: 0;
	transform: translateY(20px);
	transition: all 0.5s ease;
}

.feature-stagger.visible {
	opacity: 1;
	transform: translateY(0);
}

.coin-row {
	opacity: 0;
	transform: translateX(-20px);
	transition: all 0.3s ease;
}

.coin-row.visible {
	opacity: 1;
	transform: translateX(0);
}

.modal-enter {
	opacity: 0;
	transform: scale(0.9);
}

.modal-enter-active {
	opacity: 1;
	transform: scale(1);
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.modal-exit {
	opacity: 1;
	transform: scale(1);
}

.modal-exit-active {
	opacity: 0;
	transform: scale(0.9);
	transition: all 0.2s ease;
}

/* Responsive adjustments for mobile card blocks */
@media (max-width: 768px) {
	.custom-table {
		display: block;
		width: 100%;
	}

	.custom-table thead {
		display: none;
	}

	.custom-table tbody {
		display: block;
		width: 100%;
	}

	.custom-table tr {
		display: block;
		margin-bottom: 1.25rem;
		background-color: var(--surface);
		border: 1px solid var(--border);
		border-radius: 12px;
		padding: 0.5rem 0;
		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
	}

	/* Prevent hover translation jumping on mobile */
	.custom-table tr:hover td {
		transform: none;
	}

	.custom-table td {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0.65rem 1rem;
		border-bottom: 1px solid var(--border);
		text-align: right;
	}

	.custom-table td::before {
		content: attr(data-label);
		font-weight: 600;
		margin-right: 1rem;
		color: var(--muted);
		text-align: left;
		font-size: 0.9rem;
	}

	.custom-table td:last-child {
		border-bottom: none;
	}
}