.sst-rank-card {
	--sst-rank-accent: #586069;
	background: #fff;
	border: 1px solid #e2e5e9;
	border-left: 6px solid var(--sst-rank-accent);
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(15, 23, 42, 0.07);
	margin: 1.5rem 0;
	padding: clamp(1rem, 3vw, 1.75rem);
}

.sst-rank-card--silver { --sst-rank-accent: #7a8794; }
.sst-rank-card--gold { --sst-rank-accent: #b8860b; }
.sst-rank-card--platinum { --sst-rank-accent: #536878; }

.sst-rank-card__heading {
	align-items: flex-start;
	display: flex;
	gap: 1rem;
	justify-content: space-between;
}

.sst-rank-card__heading h2 { margin: 0.15rem 0 0; }
.sst-rank-card__heading strong { color: var(--sst-rank-accent); font-size: 1.35rem; }
.sst-rank-card__eyebrow { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; }

.sst-rank-progress {
	background: #eceff2;
	border-radius: 999px;
	height: 10px;
	overflow: hidden;
}

.sst-rank-progress span {
	background: var(--sst-rank-accent);
	display: block;
	height: 100%;
}

.sst-rank-card__meta { display: grid; gap: 0.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sst-rank-card__meta div { background: #f7f8fa; border-radius: 5px; padding: 0.65rem 0.8rem; }
.sst-rank-card__meta dt { font-size: 0.78rem; font-weight: 700; }
.sst-rank-card__meta dd { margin: 0.2rem 0 0; }
.sst-rank-card__notice { background: #fff8e5; border-radius: 4px; padding: 0.75rem; }
.sst-rank-table-wrap { overflow-x: auto; }
.sst-rank-history time { font-variant-numeric: tabular-nums; }

@media (max-width: 600px) {
	.sst-rank-card__heading { display: block; }
	.sst-rank-card__heading strong { display: block; margin-top: 0.75rem; }
	.sst-rank-card__meta { grid-template-columns: 1fr; }
}