/**
 * Single coin market view — compact dashboard layout.
 */

.cryptomag-market-coin__panel {
	box-shadow: 0 24px 80px rgba(17, 18, 20, 0.08);
}

.cryptomag-market-coin__change.is-up,
.cryptomag-market-coin__perf dd.is-up {
	color: #138085;
}

.cryptomag-market-coin__change.is-down,
.cryptomag-market-coin__perf dd.is-down {
	color: #e11d48;
}

.cryptomag-market-coin__actions {
	white-space: nowrap;
}

.cryptomag-market-coin__trade,
.cryptomag-market-coin__view {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 4.5rem;
	padding: 0.45rem 1rem;
	border-radius: 0.35rem;
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.cryptomag-market-coin__trade {
	background: #138085;
	border: 1px solid #138085;
	color: #ffffff;
}

.cryptomag-market-coin__trade:hover {
	background: #0f666a;
	border-color: #0f666a;
	color: #ffffff;
}

.cryptomag-market-coin__view {
	background: #ffffff;
	border: 1px solid rgba(17, 18, 20, 0.14);
	color: #111214;
}

.cryptomag-market-coin__view:hover {
	border-color: #138085;
	color: #138085;
}

.cryptomag-market-coin__credit-link {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}

.cryptomag-market-coin__credit-logo {
	display: block;
	height: 0.875rem;
	width: auto;
	filter: var(--cryptomag-zeroa-logo-filter, none);
}

.cryptomag-market-coin__strip-item {
	border-radius: 0.75rem;
	background: rgba(17, 18, 20, 0.03);
	padding: 0.55rem 0.75rem;
}

.cryptomag-market-coin__strip-item dt {
	font-size: 0.65rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: rgba(17, 18, 20, 0.45);
}

.cryptomag-market-coin__strip-item dd {
	margin-top: 0.15rem;
	font-size: 0.9rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: #111214;
}

.cryptomag-market-coin__chart {
	position: relative;
	height: 220px;
	min-height: 220px;
	border-radius: 0.75rem;
	background: linear-gradient(180deg, rgba(17, 18, 20, 0.02), rgba(17, 18, 20, 0));
	cursor: crosshair;
}

.cryptomag-market-coin__chart-hit {
	cursor: crosshair;
}

.cryptomag-market-coin__chart-crosshair-line {
	stroke: rgba(17, 18, 20, 0.28);
	stroke-width: 1;
	stroke-dasharray: 4 4;
	pointer-events: none;
}

.cryptomag-market-coin__chart-crosshair-dot {
	fill: #fff;
	stroke-width: 2.5;
	pointer-events: none;
}

.cryptomag-market-coin__chart-tooltip {
	position: absolute;
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	padding: 0.4rem 0.6rem;
	border-radius: 0.5rem;
	background: rgba(17, 18, 20, 0.92);
	color: #f4f5f7;
	box-shadow: 0 10px 28px rgba(17, 18, 20, 0.22);
	pointer-events: none;
	opacity: 0;
	transform: translate(-50%, calc(-100% - 8px));
	transition: opacity 0.12s ease;
}

.cryptomag-market-coin__chart-tooltip.is-visible {
	opacity: 1;
}

.cryptomag-market-coin__chart-tooltip.is-below {
	transform: translate(-50%, 12px);
}

.cryptomag-market-coin__chart-tooltip-price {
	font-size: 0.78rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
}

.cryptomag-market-coin__chart-tooltip-date {
	font-size: 0.68rem;
	font-weight: 600;
	color: rgba(244, 245, 247, 0.72);
	line-height: 1.2;
}

.cryptomag-market-coin__chart-svg {
	display: block;
	overflow: visible;
}

.cryptomag-market-coin__chart-grid {
	stroke: rgba(17, 18, 20, 0.08);
	stroke-width: 1;
}

.cryptomag-market-coin__chart-grid--x {
	stroke-dasharray: 3 4;
}

.cryptomag-market-coin__chart-axis-line {
	stroke: rgba(17, 18, 20, 0.18);
	stroke-width: 1.5;
}

.cryptomag-market-coin__chart-axis {
	fill: rgba(17, 18, 20, 0.55);
	font-size: 10px;
	font-weight: 600;
	font-family: Inter, sans-serif;
}

.cryptomag-market-coin__chart-axis--y {
	font-variant-numeric: tabular-nums;
}

.cryptomag-market-coin__chart.is-loading {
	opacity: 0.45;
	pointer-events: none;
}

.cryptomag-market-coin__chart-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 1rem;
	text-align: center;
	color: rgba(17, 18, 20, 0.45);
	font-weight: 600;
	font-size: 0.875rem;
}

.cryptomag-market-coin__period {
	border: 1px solid rgba(17, 18, 20, 0.1);
	border-radius: 9999px;
	background: #fff;
	padding: 0.2rem 0.55rem;
	font-size: 0.65rem;
	font-weight: 800;
	color: rgba(17, 18, 20, 0.55);
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.cryptomag-market-coin__period:hover,
.cryptomag-market-coin__period.is-active {
	border-color: #ff9700;
	color: #111214;
	background: rgba(255, 151, 0, 0.08);
}

.cryptomag-market-coin__back:hover {
	color: #ff9700;
}

.cryptomag-market-coin__aside {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.cryptomag-market-coin__aside-block {
	border-radius: 0.75rem;
	border: 1px solid rgba(17, 18, 20, 0.08);
	background: rgba(17, 18, 20, 0.02);
	padding: 0.5rem;
}

.cryptomag-market-coin__aside-title {
	font-size: 0.62rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: rgba(17, 18, 20, 0.45);
}

.cryptomag-market-coin__perf-grid {
	margin-top: 0.35rem;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.3rem;
}

.cryptomag-market-coin__perf-grid--tech {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cryptomag-market-coin__perf {
	border-radius: 0.5rem;
	background: #fff;
	padding: 0.3rem 0.35rem;
	text-align: center;
}

.cryptomag-market-coin__perf dt {
	font-size: 0.55rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: rgba(17, 18, 20, 0.45);
}

.cryptomag-market-coin__perf dd {
	margin-top: 0.1rem;
	font-size: 0.72rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: #111214;
}

@media (max-width: 1023px) {
	.cryptomag-market-coin__perf-grid--tech {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (prefers-color-scheme: dark) {
	.cryptomag-market-coin__panel {
		background-color: #161a20 !important;
		border-color: rgba(255, 255, 255, 0.12) !important;
		box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
	}

	.cryptomag-market-coin__header {
		border-color: rgba(255, 255, 255, 0.1) !important;
	}

	.cryptomag-market-coin__title,
	.cryptomag-market-coin__price {
		color: #f4f5f7;
	}

	.cryptomag-market-coin__meta,
	.cryptomag-market-coin .text-black\/35,
	.cryptomag-market-coin .text-black\/40,
	.cryptomag-market-coin .text-black\/45,
	.cryptomag-market-coin .text-black\/50,
	.cryptomag-market-coin .text-black\/60 {
		color: rgba(244, 245, 247, 0.65) !important;
	}

	.cryptomag-market-coin__back {
		color: rgba(244, 245, 247, 0.72) !important;
	}

	.cryptomag-market-coin__back:hover {
		color: #ff9700 !important;
	}

	.cryptomag-market-coin__strip-item {
		background: #1c1f24;
	}

	.cryptomag-market-coin__strip-item dt,
	.cryptomag-market-coin__aside-title {
		color: rgba(244, 245, 247, 0.55);
	}

	.cryptomag-market-coin__strip-item dd {
		color: #f4f5f7;
	}

	.cryptomag-market-coin__chart {
		background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent);
	}

	.cryptomag-market-coin__chart-grid {
		stroke: rgba(255, 255, 255, 0.1);
	}

	.cryptomag-market-coin__chart-axis-line {
		stroke: rgba(255, 255, 255, 0.2);
	}

	.cryptomag-market-coin__chart-axis {
		fill: rgba(244, 245, 247, 0.62);
	}

	.cryptomag-market-coin__chart-crosshair-line {
		stroke: rgba(255, 255, 255, 0.35);
	}

	.cryptomag-market-coin__chart-crosshair-dot {
		fill: #1c1f24;
	}

	.cryptomag-market-coin__chart-tooltip {
		background: rgba(28, 31, 36, 0.96);
		box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
	}

	.cryptomag-market-coin__chart-empty {
		color: rgba(244, 245, 247, 0.55);
	}

	.cryptomag-market-coin__period {
		background: #1c1f24;
		border-color: rgba(255, 255, 255, 0.16);
		color: rgba(244, 245, 247, 0.72);
	}

	.cryptomag-market-coin__period:hover,
	.cryptomag-market-coin__period.is-active {
		border-color: #ff9700;
		color: #111214;
		background: #ff9700;
	}

	.cryptomag-market-coin__aside-block {
		background: #1c1f24;
		border-color: rgba(255, 255, 255, 0.1);
	}

	.cryptomag-market-coin__perf {
		background: #161a20;
		border: 1px solid rgba(255, 255, 255, 0.08);
	}

	.cryptomag-market-coin__perf dt {
		color: rgba(244, 245, 247, 0.55);
	}

	.cryptomag-market-coin__perf dd:not(.is-up):not(.is-down) {
		color: #f4f5f7;
	}

	.cryptomag-market-coin__change.is-up,
	.cryptomag-market-coin__perf dd.is-up {
		color: #4ade80;
	}

	.cryptomag-market-coin__change.is-down,
	.cryptomag-market-coin__perf dd.is-down {
		color: #f87171;
	}
}