.su {color: inherit; --su-a: #c34c14; --su-b: color-mix(in srgb, #c34c14 62%, #ffffff); --su-card: rgba(127,127,127,.08); --su-line: rgba(127,127,127,.2);}
.su-hero {display: flex; align-items: center; gap: 18px; padding: 20px 22px; margin: 4px 0 26px; border-radius: 16px; position: relative; overflow: hidden;
	background: linear-gradient(135deg, color-mix(in srgb, var(--su-a) 16%, transparent), color-mix(in srgb, var(--su-b) 16%, transparent)); border: 1px solid color-mix(in srgb, var(--su-b) 35%, transparent);}
.su-hero__text {flex: 1 1 auto; min-width: 0;}
.su-hero__text b {display: block; font-size: 20px; margin-bottom: 4px;}
.su-hero__text span {opacity: .75; font-size: 14px; line-height: 1.5;}
.su-hero__stat {flex: none; text-align: center; padding: 0 6px;}
.su-hero__stat b {display: block; font-size: 30px; line-height: 1; background: linear-gradient(to right, var(--su-a), var(--su-b)); -webkit-background-clip: text; background-clip: text; color: transparent;}
.su-hero__stat span {font-size: 12px; opacity: .7;}
.su-hero__btn {flex: none; padding: 11px 18px; border-radius: 999px; color: #fff !important; font-weight: 600; font-size: 14px; text-decoration: none !important;
	background: linear-gradient(to right, var(--su-a), var(--su-b)); white-space: nowrap;}
.su-hero__btn:hover {filter: brightness(1.08);}
.su-feed {position: relative; padding-left: 26px;}
.su-feed::before {content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: linear-gradient(to bottom, var(--su-a), var(--su-b) 60%, var(--su-line));}
.su-day {position: relative; margin: 0 0 26px;}
.su-day::before {content: ""; position: absolute; left: -25px; top: 6px; width: 14px; height: 14px; border-radius: 50%; box-sizing: border-box;
	background: transparent; border: 3px solid var(--su-b);}
.su-day--new::before {border-color: var(--su-a); box-shadow: 0 0 0 4px color-mix(in srgb, var(--su-a) 20%, transparent);}
.su-date {display: flex; align-items: baseline; gap: 6px; margin: 0 0 12px;}
.su-date b {font-size: 24px; line-height: 1;}
.su-date span {font-size: 15px; opacity: .7;}
.su-day--new .su-date::after {content: "новое"; align-self: center; margin-left: 6px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; color: #fff;
	text-transform: uppercase; letter-spacing: .04em; background: linear-gradient(to right, var(--su-a), var(--su-b));}
.su .su-list {list-style: none !important; margin: 0; padding: 0; display: grid; gap: 8px;}
.su .su-list li {display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--su-card); border: 1px solid var(--su-line);
	transition: border-color .2s, transform .2s;}
.su .su-list li::before {content: none !important; display: none !important;}
.su .su-list li:hover {border-color: color-mix(in srgb, var(--su-b) 55%, transparent); transform: translateX(2px);}
.su .su-list p {margin: 0; line-height: 1.55; font-size: 14px;}
.su .su-list a {color: var(--su-a);}
.su-tag {flex: none; min-width: 96px; box-sizing: border-box; text-align: center; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.5; color: #fff;}
.su-tag--player {background: var(--su-a);}
.su-tag--app {background: #2daae1;}
.su-tag--profile {background: #9b6bf2;}
.su-tag--pm {background: #3d8bff;}
.su-tag--comments {background: #3fae5a;}
.su-tag--catalog {background: #e0912f;}
.su-tag--safety {background: #e25555;}
.su-tag--site {background: #6d7480;}
.su-tag--premium {background: linear-gradient(135deg, #ffc861, #ff8a3d); color: #1a1a1a;}
@media (max-width: 640px) {
	.su-hero {flex-wrap: wrap; padding: 16px;}
	.su-hero__text {flex-basis: 100%;}
	.su-hero__btn {flex: 1 1 auto; text-align: center;}
	.su-feed {padding-left: 20px;}
	.su-feed::before {left: 4px;}
	.su-day::before {left: -22px;}
	.su .su-list li {flex-direction: column; gap: 8px; padding: 12px;}
	.su-tag {min-width: 0;}
}