/* ==========================================================================
   ArtistsMate — Public / Frontend Styles
   ========================================================================== */

:root {
	--am-pub-primary:   #6c63ff;
	--am-pub-bg:        #f8f9fc;
	--am-pub-card:      #ffffff;
	--am-pub-border:    #e2e8f0;
	--am-pub-text:      #2d3748;
	--am-pub-muted:     #718096;
	--am-pub-radius:    10px;
	--am-pub-shadow:    0 4px 16px rgba(0,0,0,0.07);
}

/* ---- Widget container ---- */
.am-stats-widget {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: var(--am-pub-text);
	max-width: 900px;
	margin: 0 auto;
}

.am-stats-widget.am-theme-dark {
	--am-pub-bg:     #1a202c;
	--am-pub-card:   #2d3748;
	--am-pub-border: #4a5568;
	--am-pub-text:   #e2e8f0;
	--am-pub-muted:  #a0aec0;
}

/* ---- Artist header ---- */
.am-artist-header {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 24px;
	padding: 20px;
	background: var(--am-pub-card);
	border: 1px solid var(--am-pub-border);
	border-radius: var(--am-pub-radius);
	box-shadow: var(--am-pub-shadow);
}

.am-artist-avatar {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--am-pub-primary);
}

.am-artist-title {
	margin: 0 0 6px;
	font-size: 1.5rem;
	font-weight: 700;
}

.am-artist-genre-badge {
	display: inline-block;
	padding: 3px 12px;
	background: var(--am-pub-primary);
	color: #fff;
	border-radius: 100px;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* ---- Platform block ---- */
.am-platform-block {
	margin-bottom: 20px;
	padding: 20px;
	background: var(--am-pub-card);
	border: 1px solid var(--am-pub-border);
	border-radius: var(--am-pub-radius);
	box-shadow: var(--am-pub-shadow);
}

.am-platform-heading {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
	font-size: 1.1rem;
	font-weight: 700;
	border-bottom: 1px solid var(--am-pub-border);
	padding-bottom: 10px;
}

.am-platform-icon { font-size: 1.3em; }

/* ---- Metrics grid ---- */
.am-metrics-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 12px;
}

.am-metric-tile {
	background: var(--am-pub-bg);
	border: 1px solid var(--am-pub-border);
	border-radius: 8px;
	padding: 14px 12px;
	text-align: center;
}

.am-metric-value {
	display: block;
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--am-pub-primary);
	line-height: 1.1;
	word-break: break-all;
}

.am-metric-label {
	display: block;
	font-size: 0.72rem;
	color: var(--am-pub-muted);
	margin-top: 5px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* ---- Chart ---- */
.am-chart-wrapper {
	background: var(--am-pub-card);
	border: 1px solid var(--am-pub-border);
	border-radius: var(--am-pub-radius);
	padding: 16px;
	box-shadow: var(--am-pub-shadow);
	position: relative;
}

.am-chart-canvas { width: 100% !important; }

/* ---- Inline stat ---- */
.am-inline-stat {
	font-weight: 700;
	color: var(--am-pub-primary);
}

/* ---- States ---- */
.am-no-data, .am-error {
	padding: 20px;
	text-align: center;
	color: var(--am-pub-muted);
	font-style: italic;
}

.am-error { color: #c0392b; }

.am-powered-by {
	text-align: center;
	font-size: 0.7rem;
	color: var(--am-pub-muted);
	margin-top: 16px;
}

/* ---- Responsive ---- */
@media (max-width: 480px) {
	.am-metrics-grid { grid-template-columns: repeat(2, 1fr); }
	.am-artist-header { flex-direction: column; text-align: center; }
}