/* ============================================================
   Coin360 Ticker CMC — visual próprio: claro, leve, espaçoso.
   Paleta: fundo branco, texto quase-preto, laranja da marca só
   como destaque pontual, verde/vermelho em pílulas suaves (não
   cores saturadas gritantes como o CMC usa).
   ============================================================ */

:root {
	--cct-bg: #ffffff;
	--cct-bg-alt: #fafafa;
	--cct-text: #14171c;
	--cct-text-muted: #6b7280;
	--cct-border: #ececec;
	--cct-brand: #E8500A;
	--cct-up-bg: #e7f7ef;
	--cct-up-text: #0f9d58;
	--cct-down-bg: #fdecec;
	--cct-down-text: #d93025;
}

/* ── Ticker ────────────────────────────────────────────────── */
.cct-ticker-wrap {
	width: 100%;
	overflow: hidden;
	background: var(--cct-bg);
	border: 1px solid var(--cct-border);
	border-radius: 14px;
	padding: 12px 0;
	margin: 0 0 24px;
}
.cct-ticker-track {
	display: flex;
	align-items: center;
	gap: 32px;
	white-space: nowrap;
	width: max-content;
	animation: cct-scroll 40s linear infinite;
}
.cct-ticker-wrap:hover .cct-ticker-track { animation-play-state: paused; }
@keyframes cct-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
.cct-ticker-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 6px;
}
.cct-ticker-logo { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; }
.cct-ticker-sym { font-weight: 700; font-size: 13px; color: var(--cct-text); }
.cct-ticker-price { font-weight: 600; font-size: 13px; color: var(--cct-text); font-variant-numeric: tabular-nums; }
.cct-ticker-chg {
	font-size: 12px;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 20px;
}
.cct-ticker-chg.up { background: var(--cct-up-bg); color: var(--cct-up-text); }
.cct-ticker-chg.down { background: var(--cct-down-bg); color: var(--cct-down-text); }

.cct-topo-auto { width: 100%; }
.cct-topo-auto .cct-ticker-wrap { border-radius: 0; border-left: none; border-right: none; margin: 0; }

/* ── Grade de moedas ──────────────────────────────────────────
   O diferencial visual "mais bonito que CMC": cards espaçosos com
   respiro, em vez da tabela densa cheia de colunas do CoinMarketCap. */
.cct-moedas-wrap { margin: 0 0 28px; }
.cct-moedas-title {
	font-size: 22px;
	font-weight: 800;
	margin: 0 0 18px;
	color: var(--cct-text);
	letter-spacing: -0.01em;
}
.cct-moedas-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 16px;
}
.cct-moeda-card {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px;
	border: 1px solid var(--cct-border);
	border-radius: 16px;
	text-decoration: none;
	color: inherit;
	background: var(--cct-bg);
	transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
	position: relative;
	overflow: hidden;
}
.cct-moeda-card::before {
	/* Barra de destaque sutil no topo do card, só aparece no hover */
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: var(--cct-brand);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .25s ease;
}
.cct-moeda-card:hover {
	box-shadow: 0 8px 24px rgba(20, 23, 28, 0.08);
	border-color: transparent;
	transform: translateY(-3px);
}
.cct-moeda-card:hover::before { transform: scaleX(1); }

.cct-moeda-rank {
	position: absolute;
	top: 12px;
	right: 14px;
	font-size: 11px;
	font-weight: 700;
	color: var(--cct-text-muted);
	background: var(--cct-bg-alt);
	padding: 2px 8px;
	border-radius: 20px;
}
.cct-moeda-icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	flex-shrink: 0;
	background: var(--cct-bg-alt);
}
.cct-moeda-info { flex: 1; min-width: 0; }
.cct-moeda-name {
	font-weight: 700;
	font-size: 15px;
	color: var(--cct-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.cct-moeda-sym {
	font-size: 12px;
	color: var(--cct-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-weight: 600;
}
.cct-moeda-right { text-align: right; flex-shrink: 0; }
.cct-moeda-price {
	font-weight: 800;
	font-size: 15px;
	color: var(--cct-text);
	font-variant-numeric: tabular-nums;
	margin-bottom: 4px;
}
.cct-moeda-chg {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	padding: 3px 9px;
	border-radius: 20px;
}
.cct-moeda-chg.up { background: var(--cct-up-bg); color: var(--cct-up-text); }
.cct-moeda-chg.down { background: var(--cct-down-bg); color: var(--cct-down-text); }

.cct-fonte { font-size: 12px; color: var(--cct-text-muted); margin: 14px 0 0; }

/* ── Skeleton (carregamento) ─────────────────────────────────── */
.cct-skeleton-card {
	height: 78px;
	border-radius: 16px;
	background: linear-gradient(90deg, var(--cct-bg-alt) 25%, #f0f0f0 37%, var(--cct-bg-alt) 63%);
	background-size: 400% 100%;
	animation: cct-shimmer 1.4s ease infinite;
}
@keyframes cct-shimmer {
	0%   { background-position: 100% 50%; }
	100% { background-position: 0 50%; }
}
.cct-loading { color: var(--cct-text-muted); font-size: 13px; padding: 4px 14px; }

@media (max-width: 640px) {
	.cct-moedas-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
	.cct-moedas-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.cct-ticker-track { animation: none; }
	.cct-skeleton-card { animation: none; }
}