.metasepr-container {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
	background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
	color: #e0e0e0;
	border-radius: 12px;
	padding: 20px;
	max-width: 480px;
	box-sizing: border-box;
}

.metasepr-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
}

.metasepr-metal-name {
	font-size: 18px;
	font-weight: 700;
	color: #f0c040;
}

.metasepr-symbol {
	font-size: 12px;
	color: #8892a4;
	background: rgba(255, 255, 255, 0.08);
	padding: 3px 8px;
	border-radius: 6px;
	font-weight: 600;
}

.metasepr-price-row {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 16px;
}

.metasepr-price {
	font-size: 32px;
	font-weight: 700;
	color: #ffffff;
	letter-spacing: -0.5px;
	transition: color 0.3s ease;
}

.metasepr-price.metasepr-loading {
	color: #555;
}

.metasepr-price.metasepr-flash-up {
	color: #4caf50;
}

.metasepr-price.metasepr-flash-down {
	color: #f44336;
}

.metasepr-change {
	font-size: 14px;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 4px;
}

.metasepr-change.metasepr-up {
	color: #4caf50;
	background: rgba(76, 175, 80, 0.15);
}

.metasepr-change.metasepr-down {
	color: #f44336;
	background: rgba(244, 67, 54, 0.15);
}

.metasepr-change.metasepr-neutral {
	color: #8892a4;
	background: rgba(255, 255, 255, 0.05);
}

.metasepr-details {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	padding: 12px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	margin-bottom: 12px;
}

.metasepr-detail {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	overflow: hidden;
}

.metasepr-label {
	font-size: 11px;
	color: #8892a4;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.metasepr-ask,
.metasepr-bid,
.metasepr-high,
.metasepr-low {
	font-size: 14px;
	font-weight: 600;
	color: #c8c8d0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.metasepr-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.metasepr-updated {
	font-size: 11px;
	color: #6b7280;
}

.metasepr-status {
	font-size: 11px;
	color: #6b7280;
}

.metasepr-status.metasepr-error {
	color: #f44336;
}

.metasepr-status.metasepr-ok {
	color: #4caf50;
}

@keyframes metasepr-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }
}

.metasepr-loading {
	animation: metasepr-pulse 1.5s ease-in-out infinite;
}

/* ─── Light Theme ─────────────────────────────────────────────────────────── */

.metasepr-container.metasepr-light {
	background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
	color: #333;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.metasepr-light .metasepr-metal-name {
	color: #b8860b;
}

.metasepr-light .metasepr-symbol {
	color: #555;
	background: rgba(0, 0, 0, 0.06);
}

.metasepr-light .metasepr-price {
	color: #1a1a2e;
}

.metasepr-light .metasepr-price.metasepr-loading {
	color: #bbb;
}

.metasepr-light .metasepr-change.metasepr-neutral {
	color: #666;
	background: rgba(0, 0, 0, 0.05);
}

.metasepr-light .metasepr-details {
	border-top-color: rgba(0, 0, 0, 0.1);
	border-bottom-color: rgba(0, 0, 0, 0.1);
}

.metasepr-light .metasepr-label {
	color: #888;
}

.metasepr-light .metasepr-ask,
.metasepr-light .metasepr-bid,
.metasepr-light .metasepr-high,
.metasepr-light .metasepr-low {
	color: #333;
}

.metasepr-light .metasepr-updated,
.metasepr-light .metasepr-status {
	color: #999;
}

/* ─── Vibe Theme ──────────────────────────────────────────────────────────── */

.metasepr-container.metasepr-vibe {
	background: linear-gradient(135deg, #1e1b4b 0%, #2e1065 100%);
	color: #e0e7ff;
	border: 1px solid rgba(55, 48, 163, 0.5);
	box-shadow: 0 1px 2px rgba(15, 23, 42, .1), 0 8px 24px rgba(124, 58, 237, 0.15);
}

.metasepr-vibe .metasepr-metal-name {
	color: #ffffff;
}

.metasepr-vibe .metasepr-symbol {
	color: #c4b5fd;
	background: rgba(49, 46, 129, 0.6);
	border: 1px solid rgba(139, 92, 246, 0.3);
}

.metasepr-vibe .metasepr-price {
	color: #ffffff;
}

.metasepr-vibe .metasepr-change.metasepr-up {
	color: #4ade80;
	background: rgba(74, 222, 128, 0.12);
}

.metasepr-vibe .metasepr-change.metasepr-down {
	color: #f87171;
	background: rgba(248, 113, 113, 0.12);
}

.metasepr-vibe .metasepr-change.metasepr-neutral {
	color: #c4b5fd;
	background: rgba(167, 139, 250, 0.1);
}

.metasepr-vibe .metasepr-details {
	border-top-color: rgba(55, 48, 163, 0.5);
	border-bottom-color: rgba(55, 48, 163, 0.5);
}

.metasepr-vibe .metasepr-label {
	color: #818cf8;
}

.metasepr-vibe .metasepr-ask,
.metasepr-vibe .metasepr-bid,
.metasepr-vibe .metasepr-high,
.metasepr-vibe .metasepr-low {
	color: #e0e7ff;
}

.metasepr-vibe .metasepr-updated,
.metasepr-vibe .metasepr-status {
	color: #818cf8;
}

.metasepr-vibe .metasepr-status.metasepr-ok {
	color: #a78bfa;
}

/* ─── Artistic Theme ─────────────────────────────────────────────────────── */

.metasepr-container.metasepr-artistic {
	background: linear-gradient(135deg, #fffaf3 0%, #fde7cf 100%);
	color: #431407;
	border: 1px solid rgba(251, 146, 60, 0.35);
	box-shadow: 0 1px 2px rgba(154, 52, 18, .08), 0 8px 24px rgba(245, 158, 11, 0.18);
}

.metasepr-artistic .metasepr-metal-name {
	color: #7c2d12;
	font-family: Georgia, "Times New Roman", serif;
	font-style: italic;
}

.metasepr-artistic .metasepr-symbol {
	color: #9a3412;
	background: rgba(254, 215, 170, 0.5);
	border: 1px dashed rgba(251, 146, 60, 0.6);
}

.metasepr-artistic .metasepr-price {
	color: #7c2d12;
	font-family: Georgia, "Times New Roman", serif;
}

.metasepr-artistic .metasepr-price.metasepr-loading {
	color: #c2a279;
}

.metasepr-artistic .metasepr-change.metasepr-up {
	color: #15803d;
	background: rgba(21, 128, 61, 0.1);
}

.metasepr-artistic .metasepr-change.metasepr-down {
	color: #be123c;
	background: rgba(190, 18, 60, 0.1);
}

.metasepr-artistic .metasepr-change.metasepr-neutral {
	color: #9a3412;
	background: rgba(154, 52, 18, 0.08);
}

.metasepr-artistic .metasepr-details {
	border-top-color: rgba(251, 146, 60, 0.35);
	border-bottom-color: rgba(251, 146, 60, 0.35);
}

.metasepr-artistic .metasepr-label {
	color: #c2410c;
}

.metasepr-artistic .metasepr-ask,
.metasepr-artistic .metasepr-bid,
.metasepr-artistic .metasepr-high,
.metasepr-artistic .metasepr-low {
	color: #431407;
}

.metasepr-artistic .metasepr-updated,
.metasepr-artistic .metasepr-status {
	color: #c2410c;
}

.metasepr-artistic .metasepr-status.metasepr-ok {
	color: #15803d;
}

/* ─── Industrial Theme ───────────────────────────────────────────────────── */

.metasepr-container.metasepr-industrial {
	background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
	color: #e5e7eb;
	border: 1px solid rgba(75, 85, 99, 0.6);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 8px 24px rgba(0, 0, 0, 0.25);
}

.metasepr-industrial .metasepr-metal-name {
	color: #f9fafb;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 16px;
}

.metasepr-industrial .metasepr-symbol {
	color: #9ca3af;
	background: #111827;
	border: 1px solid rgba(75, 85, 99, 0.8);
	border-radius: 4px;
	font-family: "SF Mono", Menlo, monospace;
}

.metasepr-industrial .metasepr-price {
	color: #f9fafb;
	font-family: "SF Mono", Menlo, monospace;
}

.metasepr-industrial .metasepr-change.metasepr-up {
	color: #84cc16;
	background: rgba(132, 204, 22, 0.12);
}

.metasepr-industrial .metasepr-change.metasepr-down {
	color: #f97316;
	background: rgba(249, 115, 22, 0.12);
}

.metasepr-industrial .metasepr-change.metasepr-neutral {
	color: #9ca3af;
	background: rgba(156, 163, 175, 0.08);
}

.metasepr-industrial .metasepr-details {
	border-top-color: rgba(75, 85, 99, 0.6);
	border-bottom-color: rgba(75, 85, 99, 0.6);
}

.metasepr-industrial .metasepr-label {
	color: #6b7280;
}

.metasepr-industrial .metasepr-ask,
.metasepr-industrial .metasepr-bid,
.metasepr-industrial .metasepr-high,
.metasepr-industrial .metasepr-low {
	color: #e5e7eb;
	font-family: "SF Mono", Menlo, monospace;
}

.metasepr-industrial .metasepr-updated,
.metasepr-industrial .metasepr-status {
	color: #6b7280;
}

.metasepr-industrial .metasepr-status.metasepr-ok {
	color: #84cc16;
}

.metasepr-industrial .metasepr-status.metasepr-error {
	color: #f97316;
}

/* ─── Space Theme ────────────────────────────────────────────────────────── */

.metasepr-container.metasepr-space {
	background:
		radial-gradient(ellipse at top right, rgba(109, 40, 217, 0.35), transparent 60%),
		radial-gradient(ellipse at bottom left, rgba(14, 165, 233, 0.25), transparent 55%),
		#05010f;
	color: #e0f2fe;
	border: 1px solid rgba(56, 189, 248, 0.25);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(14, 165, 233, 0.08);
	position: relative;
	overflow: hidden;
}

.metasepr-container.metasepr-space::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		radial-gradient(1px 1px at 14% 18%, #ffffff 50%, transparent 51%),
		radial-gradient(1px 1px at 82% 32%, #c4b5fd 50%, transparent 51%),
		radial-gradient(1px 1px at 44% 72%, #ffffff 50%, transparent 51%),
		radial-gradient(1px 1px at 68% 88%, #67e8f9 50%, transparent 51%),
		radial-gradient(1px 1px at 26% 52%, #ffffff 50%, transparent 51%),
		radial-gradient(1px 1px at 92% 62%, #ffffff 50%, transparent 51%),
		radial-gradient(1px 1px at 8% 84%, #a5b4fc 50%, transparent 51%);
	opacity: 0.8;
}

.metasepr-container.metasepr-space > * {
	position: relative;
	z-index: 1;
}

.metasepr-space .metasepr-metal-name {
	color: #ffffff;
	text-shadow: 0 0 12px rgba(34, 211, 238, 0.4);
}

.metasepr-space .metasepr-symbol {
	color: #7dd3fc;
	background: rgba(14, 165, 233, 0.12);
	border: 1px solid rgba(34, 211, 238, 0.4);
	backdrop-filter: blur(4px);
}

.metasepr-space .metasepr-price {
	color: #ffffff;
	text-shadow: 0 0 20px rgba(34, 211, 238, 0.5);
}

.metasepr-space .metasepr-change.metasepr-up {
	color: #22d3ee;
	background: rgba(34, 211, 238, 0.12);
}

.metasepr-space .metasepr-change.metasepr-down {
	color: #f472b6;
	background: rgba(244, 114, 182, 0.12);
}

.metasepr-space .metasepr-change.metasepr-neutral {
	color: #64748b;
	background: rgba(100, 116, 139, 0.12);
}

.metasepr-space .metasepr-details {
	border-top-color: rgba(56, 189, 248, 0.25);
	border-bottom-color: rgba(56, 189, 248, 0.25);
}

.metasepr-space .metasepr-label {
	color: #64748b;
}

.metasepr-space .metasepr-ask,
.metasepr-space .metasepr-bid,
.metasepr-space .metasepr-high,
.metasepr-space .metasepr-low {
	color: #e0f2fe;
}

.metasepr-space .metasepr-updated,
.metasepr-space .metasepr-status {
	color: #64748b;
}

.metasepr-space .metasepr-status.metasepr-ok {
	color: #22d3ee;
}