.nr-widget {
	container-type: inline-size;
	container-name: nr;
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 24px;
	width: 100%;
	background: linear-gradient(135deg, #f7f9fc 0%, #eef2f8 100%);
	border: 1px solid #e7ebf1;
	border-radius: 20px;
	padding: 20px 28px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	box-sizing: border-box;
	overflow: hidden;
}
.nr-widget * { box-sizing: border-box; min-width: 0; }

.nr-icon {
	position: relative;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: linear-gradient(135deg, #3b82ff 0%, #1a56db 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	box-shadow: 0 8px 18px rgba(37, 99, 235, .35);
}
.nr-icon-inner { color: #fff; font-size: 28px; line-height: 1; }
.nr-spark { position: absolute; background: #3b82ff; border-radius: 2px; }
.nr-spark-1 { width: 3px; height: 14px; top: -11px; right: 8px; transform: rotate(20deg); }
.nr-spark-2 { width: 3px; height: 10px; top: 3px; right: -11px; transform: rotate(70deg); }

/* Заголовок и подпись — гибкие, реально ужимаются вместе с контейнером,
   а не держат фиксированную ширину по содержимому (в этом была причина наложения). */
.nr-heading { flex: 1 1 220px; min-width: 0; }
.nr-title {
	font-size: 22px;
	font-weight: 800;
	color: #0f172a;
	margin-bottom: 6px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.nr-subtitle {
	font-size: 14px;
	color: #64748b;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.nr-buttons-wrap { flex: 1 1 300px; min-width: 0; }
.nr-buttons { display: flex; flex-wrap: nowrap; gap: 10px; }
.nr-btn {
	flex: 1 1 0;
	min-width: 0;
	border: none;
	border-radius: 12px;
	padding: 16px 0;
	font-size: 22px;
	font-weight: 800;
	color: #fff;
	cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
	box-shadow: 0 6px 12px rgba(0, 0, 0, .08);
}
.nr-btn:hover:not(:disabled) { transform: translateY(-2px); }
.nr-btn:disabled { cursor: default; opacity: .5; }

.nr-btn-1 { background: linear-gradient(135deg, #ff7a5c 0%, #f43f3f 100%); }
.nr-btn-2 { background: linear-gradient(135deg, #ffa85c 0%, #f97316 100%); }
.nr-btn-3 { background: linear-gradient(135deg, #ffdb5c 0%, #f2b90b 100%); }
.nr-btn-4 { background: linear-gradient(135deg, #cfe24a 0%, #a3c211 100%); }
.nr-btn-5 { background: linear-gradient(135deg, #3fd67a 0%, #0f9d58 100%); }

.nr-labels { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: 13px; color: #64748b; }
.nr-labels span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.nr-result { margin-top: 10px; font-size: 14px; color: #0f172a; min-height: 20px; }
.nr-result-text strong { color: #0f9d58; }

.nr-top-list { margin: 0; padding-left: 20px; }
.nr-top-item { margin-bottom: 6px; }
.nr-top-rating { color: #f2b90b; font-weight: 700; margin-left: 6px; }

/* Ширина самого блока (не окна браузера) уходит ниже — ступенчато уменьшаем
   отступы/шрифты, пропорции при этом остаются стабильными благодаря flex выше. */
@container nr (max-width: 560px) {
	.nr-widget { gap: 14px; padding: 16px 18px; }
	.nr-icon { width: 48px; height: 48px; }
	.nr-icon-inner { font-size: 20px; }
	.nr-title { font-size: 16px; margin-bottom: 4px; }
	.nr-subtitle { font-size: 12px; }
	.nr-heading { flex-basis: 140px; }
	.nr-buttons-wrap { flex-basis: 180px; }
	.nr-buttons { gap: 6px; }
	.nr-btn { padding: 11px 0; font-size: 15px; border-radius: 10px; }
	.nr-labels { font-size: 10px; margin-top: 6px; }
}

@container nr (max-width: 340px) {
	.nr-widget { gap: 8px; padding: 12px 14px; flex-wrap: wrap; }
	.nr-icon { width: 40px; height: 40px; }
	.nr-icon-inner { font-size: 17px; }
	.nr-spark { display: none; }
	.nr-heading { flex-basis: 100%; }
	.nr-buttons-wrap { flex-basis: 100%; }
	.nr-title { font-size: 15px; }
	.nr-subtitle { font-size: 12px; -webkit-line-clamp: 2; }
	.nr-btn { padding: 10px 0; font-size: 16px; }
}

@supports not (container-type: inline-size) {
	.nr-widget { overflow-x: auto; }
}