:root {
            --bg: #08090d;
            --panel: rgba(21, 23, 31, .82);
            --panel-strong: #15171f;
            --text: #f5f6fa;
            --muted: #9298a8;
            --border: rgba(255, 255, 255, .09);
            --accent: #ffcc00;
            --accent-soft: rgba(255, 204, 0, .14);
            --positive: #4be39b;
            --negative: #ff6b7a;
            --shadow: 0 22px 70px rgba(0, 0, 0, .38);
        }

        * { box-sizing: border-box; }

        body {
            margin: 0;
            min-height: 100vh;
            color: var(--text);
            background:
                radial-gradient(circle at 10% -10%, rgba(255, 204, 0, .12), transparent 34rem),
                radial-gradient(circle at 95% 10%, rgba(128, 78, 255, .13), transparent 31rem),
                var(--bg);
            font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        }

        a { color: inherit; text-decoration: none; }

        .container {
            width: min(1540px, calc(100% - 48px));
            margin: 0 auto;
            padding: 52px 0 80px;
        }

        .app-shell {
            position: relative;
            overflow: hidden;
            padding: 17px;
            margin-bottom: 24px;
            border: 1px solid var(--border);
            border-radius: 25px;
            background:
                linear-gradient(135deg, rgba(27, 29, 38, .96), rgba(16, 18, 24, .94));
            box-shadow: var(--shadow);
        }

        .app-shell::before {
            content: "";
            position: absolute;
            width: 310px;
            height: 310px;
            top: -225px;
            left: -90px;
            border-radius: 50%;
            background: rgba(255, 204, 0, .17);
            filter: blur(34px);
            pointer-events: none;
        }

        .topbar {
            position: relative;
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
            padding: 1px 4px 15px;
        }

        .brand {
            display: flex;
            align-items: center;
            gap: 12px;
            min-width: 0;
        }

        .brand-icon {
            display: grid;
            place-items: center;
            width: 42px;
            height: 42px;
            flex: 0 0 42px;
            border-radius: 13px;
            color: #151515;
            background: linear-gradient(145deg, #ffe04d, var(--accent));
            box-shadow: 0 10px 28px rgba(255, 204, 0, .24);
            font-size: 20px;
            font-weight: 900;
        }

        .brand-copy {
            display: grid;
            min-width: 0;
            gap: 2px;
        }

        .brand-title {
            font-size: 19px;
            font-weight: 850;
            letter-spacing: -.035em;
        }

        .brand-subtitle {
            color: var(--muted);
            font-size: 11px;
            font-weight: 500;
        }

        .notice {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            min-height: 34px;
            padding: 0 12px;
            border: 1px solid rgba(75, 227, 155, .16);
            border-radius: 999px;
            color: #bfeeda;
            background: rgba(75, 227, 155, .06);
            font-size: 11px;
            font-weight: 700;
            white-space: nowrap;
        }

        .status-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--positive);
            box-shadow: 0 0 0 5px rgba(75, 227, 155, .08);
        }

        .search-panel,
        .hero,
        .section,
        .error {
            border: 1px solid var(--border);
            background: var(--panel);
            backdrop-filter: blur(18px);
            box-shadow: var(--shadow);
        }

        .search-panel {
            position: relative;
            z-index: 1;
            padding: 8px;
            border-radius: 17px;
            margin-bottom: 0;
            background: rgba(5, 6, 10, .42);
            box-shadow: none;
            backdrop-filter: none;
        }

        .search-form {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 12px;
        }

        .search-input {
            width: 100%;
            min-width: 0;
            height: 48px;
            padding: 0 16px;
            border: 1px solid var(--border);
            border-radius: 15px;
            outline: none;
            color: var(--text);
            background: rgba(0, 0, 0, .23);
            font: inherit;
            transition: border-color .2s, box-shadow .2s;
        }

        .search-input:focus {
            border-color: rgba(255, 204, 0, .65);
            box-shadow: 0 0 0 4px var(--accent-soft);
        }

        .button {
            min-height: 48px;
            padding: 0 22px;
            border: 0;
            border-radius: 15px;
            color: #171717;
            background: var(--accent);
            font: inherit;
            font-weight: 800;
            cursor: pointer;
            transition: transform .2s, filter .2s;
        }

        .button:hover { transform: translateY(-1px); filter: brightness(1.05); }

        .hint {
            margin: 8px 6px 1px;
            color: var(--muted);
            font-size: 13px;
        }

        .error {
            padding: 18px 20px;
            border-color: rgba(255, 107, 122, .28);
            border-radius: 18px;
            color: #ffd9de;
            background: rgba(77, 19, 29, .54);
            margin-bottom: 24px;
        }

        .hero {
            position: relative;
            overflow: hidden;
            display: grid;
            grid-template-columns: 190px minmax(280px, 1fr) minmax(420px, .95fr);
            gap: 25px;
            padding: 24px;
            border-radius: 25px;
            margin-bottom: 18px;
            background:
                linear-gradient(100deg, rgba(21, 23, 31, .98) 0%, rgba(21, 23, 31, .92) 62%, rgba(255, 204, 0, .07) 100%);
        }

        .hero-backdrop {
            position: absolute;
            inset: -45% -4% -45% 58%;
            background-position: center;
            background-size: cover;
            filter: blur(52px) saturate(1.25);
            opacity: .16;
            transform: scale(1.08);
            pointer-events: none;
        }

        .hero-cover-wrap {
            position: relative;
            z-index: 1;
        }

        .hero::after {
            content: "";
            position: absolute;
            inset: auto -120px -160px auto;
            width: 380px;
            height: 380px;
            border-radius: 50%;
            background: rgba(255, 204, 0, .08);
            filter: blur(10px);
            pointer-events: none;
        }

        .artist-cover,
        .placeholder-cover {
            width: 190px;
            aspect-ratio: 1;
            border-radius: 21px;
            object-fit: cover;
            background: linear-gradient(135deg, #2a2d38, #14151b);
            box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
        }

        .placeholder-cover {
            display: grid;
            place-items: center;
            color: var(--muted);
            font-size: 42px;
        }

        .hero-content {
            position: relative;
            z-index: 1;
            align-self: center;
            min-width: 0;
        }

        .hero-stats {
            position: relative;
            z-index: 1;
            align-self: stretch;
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 12px;
            padding: 4px;
        }

        .hero-stat {
            position: relative;
            overflow: hidden;
            min-height: 92px;
            padding: 16px 17px;
            border: 1px solid rgba(255, 255, 255, .09);
            border-radius: 17px;
            background:
                linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
            box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
        }

        .hero-stat::after {
            content: "";
            position: absolute;
            inset: auto -28px -32px auto;
            width: 90px;
            height: 90px;
            border-radius: 50%;
            background: rgba(255, 204, 0, .05);
            filter: blur(8px);
            pointer-events: none;
        }

        .hero-stat-label {
            position: relative;
            z-index: 1;
            color: var(--muted);
            font-size: 12px;
            line-height: 1.25;
        }

        .hero-stat-value {
            position: relative;
            z-index: 1;
            margin-top: 8px;
            font-size: clamp(22px, 2.1vw, 31px);
            font-weight: 850;
            font-variant-numeric: tabular-nums;
            letter-spacing: -.04em;
            line-height: 1;
            white-space: nowrap;
        }

        .eyebrow {
            color: var(--accent);
            font-size: 12px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .16em;
        }

        h1 {
            margin: 7px 0 7px;
            font-size: clamp(36px, 5.6vw, 62px);
            line-height: .98;
            letter-spacing: -.055em;
            overflow-wrap: anywhere;
        }

        .meta {
            color: var(--muted);
            font-size: 15px;
        }

        .hero-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 13px;
        }

        .hero-tag {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            min-height: 32px;
            padding: 0 11px;
            border: 1px solid rgba(255, 204, 0, .19);
            border-radius: 999px;
            color: #f7f8fb;
            background: rgba(255, 204, 0, .075);
            font-size: 12px;
            font-weight: 750;
            line-height: 1;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
        }

        .hero-tag-icon {
            display: grid;
            place-items: center;
            width: 18px;
            height: 18px;
            border-radius: 6px;
            color: #171717;
            background: var(--accent);
            font-size: 10px;
            font-weight: 900;
        }

        .hero-tag-key {
            color: var(--muted);
            font-weight: 650;
        }

        .hero-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 21px;
        }

        .secondary-button,
        .badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            border: 1px solid var(--border);
            border-radius: 12px;
            background: rgba(255, 255, 255, .04);
        }

        .secondary-button {
            min-height: 42px;
            padding: 0 15px;
            font-size: 14px;
            font-weight: 700;
        }

        .secondary-button:hover { background: rgba(255, 255, 255, .08); }

        .positive { color: var(--positive); }
        .negative { color: var(--negative); }
        .neutral { color: var(--text); }

        .analytics-panel {
            position: relative;
            overflow: hidden;
            padding: 19px 22px 14px;
            border: 1px solid var(--border);
            border-radius: 21px;
            background:
                radial-gradient(circle at 86% 18%, rgba(255, 204, 0, .12), transparent 24rem),
                linear-gradient(145deg, rgba(24, 26, 35, .96), rgba(15, 17, 23, .96));
            box-shadow: var(--shadow);
            margin-bottom: 18px;
        }

        .analytics-panel::before {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            background: linear-gradient(115deg, rgba(255, 255, 255, .035), transparent 30%);
        }

        .analytics-header {
            position: relative;
            z-index: 1;
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 18px;
            margin-bottom: 0;
        }

        .analytics-kicker {
            margin-top: 6px;
            color: var(--muted);
            font-size: 13px;
        }

        .trend-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            min-height: 34px;
            padding: 0 11px;
            border: 1px solid rgba(75, 227, 155, .2);
            border-radius: 12px;
            color: var(--positive);
            background: rgba(75, 227, 155, .08);
            font-size: 13px;
            font-weight: 800;
            white-space: nowrap;
        }

        .trend-badge.is-negative {
            color: var(--negative);
            border-color: rgba(255, 107, 122, .22);
            background: rgba(255, 107, 122, .08);
        }

        .listener-chart {
            position: relative;
            z-index: 1;
            width: 100%;
            height: clamp(185px, 18vw, 220px);
            min-height: 0;
            display: block;
            overflow: visible;
        }

        .chart-grid-line {
            stroke: rgba(255, 255, 255, .055);
            stroke-width: 1;
        }

        .chart-axis-label {
            fill: var(--muted);
            font-size: 10px;
            font-family: inherit;
        }

        .chart-month-label {
            fill: var(--muted);
            font-size: 12px;
            font-weight: 650;
            font-family: inherit;
        }

        .chart-value-label {
            fill: var(--text);
            font-size: 15px;
            font-weight: 850;
            font-family: inherit;
        }

        .chart-bar {
            shape-rendering: geometricPrecision;
        }

        .chart-bar-shadow {
            fill: rgba(0, 0, 0, .24);
            filter: blur(7px);
        }

        .chart-trend-pill {
            fill: rgba(8, 9, 13, .72);
            stroke-width: 1;
        }

        .chart-trend-text {
            font-size: 12px;
            font-weight: 850;
            font-family: inherit;
        }

        .chart-arrow {
            fill: none;
            stroke-width: 3;
            stroke-linecap: round;
            stroke-linejoin: round;
            opacity: .9;
        }

        .chart-caption {
            position: relative;
            z-index: 1;
            display: flex;
            justify-content: space-between;
            gap: 16px;
            margin-top: -2px;
            color: var(--muted);
            font-size: 10px;
        }


        .listener-chart-mobile {
            display: none;
            position: relative;
            z-index: 1;
            margin-top: 18px;
        }

        .mobile-chart-cards {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 12px;
        }

        .mobile-month-card {
            min-width: 0;
            padding: 14px 12px 12px;
            border: 1px solid rgba(255, 255, 255, .075);
            border-radius: 18px;
            background: rgba(255, 255, 255, .025);
            text-align: center;
        }

        .mobile-month-card.is-current {
            border-color: color-mix(in srgb, var(--trend-color) 28%, transparent);
            background: color-mix(in srgb, var(--trend-color) 7%, rgba(255, 255, 255, .018));
        }

        .mobile-month-label {
            color: var(--muted);
            font-size: 11px;
            font-weight: 750;
            line-height: 1.2;
            text-transform: uppercase;
            letter-spacing: .055em;
        }

        .mobile-month-value {
            margin-top: 7px;
            color: var(--text);
            font-size: clamp(24px, 8vw, 32px);
            font-weight: 900;
            letter-spacing: -.05em;
            white-space: nowrap;
        }

        .mobile-bar-stage {
            position: relative;
            display: flex;
            align-items: flex-end;
            height: 112px;
            margin-top: 12px;
            padding: 0 12px;
            border-bottom: 1px solid rgba(255, 255, 255, .12);
        }

        .mobile-bar-stage::before,
        .mobile-bar-stage::after {
            content: "";
            position: absolute;
            left: 12px;
            right: 12px;
            height: 1px;
            background: rgba(255, 255, 255, .045);
        }

        .mobile-bar-stage::before { bottom: 33.333%; }
        .mobile-bar-stage::after { bottom: 66.666%; }

        .mobile-chart-bar {
            position: relative;
            z-index: 1;
            width: 100%;
            height: var(--bar-height, 0%);
            min-height: 10px;
            border-radius: 14px 14px 4px 4px;
        }

        .mobile-chart-bar.is-previous {
            background: linear-gradient(180deg, #a9afbe 0%, #5a6070 100%);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
        }

        .mobile-chart-bar.is-current {
            background: linear-gradient(180deg, var(--trend-color) 0%, var(--trend-soft) 100%);
            box-shadow:
                0 0 20px color-mix(in srgb, var(--trend-color) 24%, transparent),
                inset 0 1px 0 rgba(255, 255, 255, .2);
        }

        .mobile-trend-summary {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            min-height: 42px;
            margin-top: 12px;
            padding: 8px 12px;
            border: 1px solid color-mix(in srgb, var(--trend-color) 28%, transparent);
            border-radius: 14px;
            color: var(--trend-color);
            background: color-mix(in srgb, var(--trend-color) 7%, transparent);
            font-size: 13px;
            font-weight: 850;
            text-align: center;
        }

        .mobile-trend-icon {
            font-size: 19px;
            line-height: 1;
        }

        .description-section {
            padding: 24px 28px;
        }

        .artist-description {
            margin: 0;
            color: #d8dbe4;
            font-size: 15px;
            line-height: 1.75;
            white-space: pre-line;
        }

        .content-grid {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 340px;
            gap: 24px;
            align-items: start;
        }

        .section {
            padding: 24px;
            border-radius: 23px;
            margin-bottom: 24px;
        }

        .section-title-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 16px;
            margin-bottom: 18px;
        }

        h2 {
            margin: 0;
            font-size: 22px;
            letter-spacing: -.03em;
        }

        .count {
            color: var(--muted);
            font-size: 13px;
        }

        .track-list { display: grid; gap: 8px; }

        .track {
            display: grid;
            grid-template-columns: 42px minmax(0, 1fr) auto auto;
            gap: 12px;
            align-items: center;
            padding: 10px;
            border-radius: 14px;
            transition: background .2s, box-shadow .2s;
        }

        .track:hover { background: rgba(255, 255, 255, .045); }

        .track.is-playing {
            background: rgba(255, 204, 0, .075);
            box-shadow: inset 0 0 0 1px rgba(255, 204, 0, .17);
        }

        .track-play {
            display: grid;
            place-items: center;
            width: 42px;
            height: 42px;
            padding: 0;
            border: 1px solid rgba(255, 204, 0, .18);
            border-radius: 12px;
            color: #171717;
            background: var(--accent);
            font: inherit;
            font-size: 16px;
            font-weight: 900;
            cursor: pointer;
            transition: transform .18s, filter .18s, box-shadow .18s;
        }

        .track-play:hover {
            transform: translateY(-1px);
            filter: brightness(1.05);
            box-shadow: 0 8px 22px rgba(255, 204, 0, .16);
        }

        .track-play:active { transform: translateY(0); }

        .track-info { min-width: 0; }

        .track-title-link {
            display: inline-flex;
            align-items: center;
            max-width: 100%;
            color: var(--text);
            text-decoration: none;
        }

        .track-title-link:hover { color: var(--accent); }

        .track-title {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-weight: 720;
        }

        .track-subtitle,
        .track-duration {
            color: var(--muted);
            font-size: 13px;
        }

        .track-open {
            display: grid;
            place-items: center;
            width: 34px;
            height: 34px;
            border: 1px solid var(--border);
            border-radius: 10px;
            color: var(--muted);
            text-decoration: none;
            transition: color .18s, border-color .18s, background .18s;
        }

        .track-open:hover {
            color: var(--accent);
            border-color: rgba(255, 204, 0, .26);
            background: rgba(255, 204, 0, .07);
        }

        .music-player {
            display: none;
            margin: 8px 10px 16px;
            padding: 14px;
            border: 1px solid rgba(255, 204, 0, .19);
            border-radius: 18px;
            background: rgba(255, 204, 0, .045);
        }

        .music-player.is-visible { display: block; }

        .music-player-label {
            margin: 0 0 10px;
            color: var(--muted);
            font-size: 12px;
        }

        .music-player-label strong { color: var(--text); }

        .music-player iframe {
            width: 100%;
            height: 180px;
            display: block;
            border: 0;
            border-radius: 13px;
            background: #15161c;
        }

        .album-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 14px;
        }

        .album-grid.latest-releases-grid {
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 12px;
        }

        .album-grid.latest-releases-grid .album-card {
            border-radius: 15px;
        }

        .album-grid.latest-releases-grid .album-body {
            padding: 13px 14px 14px;
        }

        .album-grid.latest-releases-grid .album-title {
            font-size: 14px;
        }

        .album-grid.latest-releases-grid .album-meta {
            font-size: 11px;
        }

        .album-grid.all-releases-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }


        .all-release-item.is-hidden {
            display: none;
        }

        .load-more-row {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }

        .load-more-button {
            min-width: 220px;
            min-height: 50px;
            padding: 0 24px;
            border: 1px solid rgba(255, 204, 0, .28);
            border-radius: 15px;
            color: #171717;
            background: var(--accent);
            font: inherit;
            font-weight: 850;
            cursor: pointer;
            box-shadow: 0 12px 34px rgba(255, 204, 0, .16);
            transition: transform .2s, box-shadow .2s, filter .2s;
        }

        .load-more-button:hover {
            transform: translateY(-1px);
            filter: brightness(1.04);
            box-shadow: 0 16px 40px rgba(255, 204, 0, .23);
        }

        .load-more-button:active {
            transform: translateY(0);
        }

        .album-card {
            overflow: hidden;
            border: 1px solid var(--border);
            border-radius: 17px;
            background: rgba(255, 255, 255, .025);
            transition: transform .2s, background .2s;
        }

        .album-card:hover {
            transform: translateY(-2px);
            background: rgba(255, 255, 255, .05);
        }

        .album-image {
            width: 100%;
            aspect-ratio: 1;
            display: block;
            object-fit: cover;
            background: #1b1d25;
        }

        .album-fallback {
            place-items: center;
            color: var(--muted);
            font-size: 34px;
        }

        .album-body { padding: 13px; }

        .album-title {
            font-weight: 760;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .album-meta {
            margin-top: 5px;
            color: var(--muted);
            font-size: 12px;
        }

        .release-kind {
            display: inline-flex;
            align-items: center;
            margin-right: 5px;
            padding: 3px 7px;
            border: 1px solid rgba(255, 204, 0, .18);
            border-radius: 999px;
            color: #f4d96b;
            background: rgba(255, 204, 0, .08);
            font-size: 10px;
            font-weight: 800;
        }

        .badge {
            padding: 5px 8px;
            color: #ffdfe3;
            border-color: rgba(255, 107, 122, .2);
            background: rgba(255, 107, 122, .1);
            font-size: 10px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .06em;
        }

        .upcoming {
            display: block;
            overflow: hidden;
            border: 1px solid rgba(255, 204, 0, .23);
            border-radius: 17px;
            background: var(--accent-soft);
        }

        .upcoming-cover,
        .upcoming-fallback {
            width: 100%;
            aspect-ratio: 1;
            display: block;
            object-fit: cover;
            background: #242318;
        }

        .upcoming-fallback {
            place-items: center;
            color: rgba(255, 204, 0, .8);
            font-size: 42px;
        }

        .upcoming-body { padding: 18px; }

        .upcoming-label {
            color: var(--accent);
            font-size: 11px;
            font-weight: 850;
            text-transform: uppercase;
            letter-spacing: .13em;
        }

        .upcoming-title {
            margin-top: 7px;
            font-size: 21px;
            font-weight: 850;
            line-height: 1.1;
        }

        .upcoming-date {
            margin-top: 7px;
            color: var(--muted);
            font-size: 13px;
        }

        .info-list {
            display: grid;
            gap: 0;
        }

        .info-row {
            display: flex;
            justify-content: space-between;
            gap: 20px;
            padding: 13px 0;
            border-bottom: 1px solid var(--border);
        }

        .info-row:last-child { border-bottom: 0; }
        .info-key { color: var(--muted); }
        .info-value { text-align: right; font-weight: 720; }

        .similar-list {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
        }

        .similar-card {
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 0;
            padding: 9px;
            border-radius: 14px;
            background: rgba(255, 255, 255, .035);
        }

        .similar-card img,
        .similar-avatar {
            width: 44px;
            height: 44px;
            flex: 0 0 44px;
            border-radius: 12px;
            object-fit: cover;
            background: #23252e;
        }

        .similar-avatar { display: grid; place-items: center; color: var(--muted); }

        .similar-name {
            min-width: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 13px;
            font-weight: 720;
        }

        details {
            border: 1px solid var(--border);
            border-radius: 18px;
            background: rgba(0, 0, 0, .22);
            overflow: hidden;
        }

        summary {
            padding: 17px 19px;
            cursor: pointer;
            font-weight: 760;
        }

        pre {
            max-height: 620px;
            margin: 0;
            padding: 20px;
            overflow: auto;
            border-top: 1px solid var(--border);
            color: #d7dae4;
            font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
            white-space: pre-wrap;
            overflow-wrap: anywhere;
        }

        .empty {
            padding: 30px;
            color: var(--muted);
            text-align: center;
            border: 1px dashed var(--border);
            border-radius: 18px;
        }

        .footer {
            margin-top: 26px;
            color: var(--muted);
            text-align: center;
            font-size: 12px;
            line-height: 1.6;
        }

        @media (max-width: 1240px) {
            .hero {
                grid-template-columns: 170px minmax(260px, 1fr) minmax(360px, .9fr);
            }
            .artist-cover, .placeholder-cover { width: 170px; }
            .hero-stat { min-height: 84px; padding: 14px 15px; }
        }

        @media (max-width: 1120px) {
            .hero {
                grid-template-columns: 170px minmax(0, 1fr);
            }
            .hero-stats {
                grid-column: 1 / -1;
                grid-template-columns: repeat(4, minmax(0, 1fr));
                padding: 0;
            }
            .content-grid { grid-template-columns: 1fr; }
            aside {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 24px;
            }
            aside .section { margin-bottom: 0; }
            .album-grid.latest-releases-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
            .album-grid.all-releases-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        }

        @media (max-width: 900px) {
            .album-grid.latest-releases-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        }

        @media (max-width: 820px) {
            aside { grid-template-columns: 1fr; }
            aside .section { margin-bottom: 24px; }
        }

        @media (max-width: 680px) {
            .container { width: min(100% - 20px, 1540px); padding-top: 24px; }
            .app-shell { padding: 13px; border-radius: 20px; }
            .topbar { gap: 12px; }
            .brand-subtitle { display: none; }
            .notice { padding: 0 10px; }
            .search-form { grid-template-columns: 1fr; }

            .hero {
                grid-template-columns: 1fr;
                gap: 18px;
                padding: 16px;
                border-radius: 22px;
            }

            .hero-backdrop {
                inset: 0;
                opacity: .1;
                filter: blur(46px) saturate(1.15);
            }

            .hero-cover-wrap {
                width: 100%;
            }

            .artist-cover,
            .placeholder-cover {
                width: 100%;
                max-width: none;
                border-radius: 18px;
            }

            .hero-content {
                align-self: auto;
            }

            .eyebrow {
                font-size: 10px;
                letter-spacing: .13em;
            }

            h1 {
                margin-top: 6px;
                font-size: clamp(36px, 12vw, 52px);
            }

            .meta {
                font-size: 13px;
                line-height: 1.45;
            }

            .hero-tags { margin-top: 11px; }
            .hero-tag {
                max-width: 100%;
                min-width: 0;
            }
            .hero-tag span:last-child {
                min-width: 0;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .hero-actions {
                display: grid;
                grid-template-columns: 1fr;
                gap: 9px;
                margin-top: 16px;
            }

            .secondary-button {
                width: 100%;
                min-height: 46px;
                justify-content: flex-start;
                padding-inline: 16px;
            }

            .hero-stats {
                grid-column: auto;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 10px;
                width: 100%;
                padding: 0;
            }

            .hero-stat {
                min-width: 0;
                min-height: 94px;
                padding: 14px;
                border-radius: 16px;
            }

            .hero-stat-label {
                min-height: 30px;
                font-size: 11px;
                line-height: 1.3;
            }

            .hero-stat-value {
                margin-top: 8px;
                font-size: clamp(23px, 7.2vw, 31px);
                letter-spacing: -.035em;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: clip;
            }

            .album-grid,
            .album-grid.latest-releases-grid,
            .album-grid.all-releases-grid { grid-template-columns: 1fr 1fr; }
            .analytics-panel { padding: 18px 15px 14px; }
            .analytics-header { display: block; }
            .trend-badge { display: none; }
            .listener-chart { display: none; }
            .listener-chart-mobile { display: block; }
            .chart-caption { display: none; }
        }

        @media (max-width: 430px) {
            .notice { display: none; }
            .hero { padding: 14px; gap: 16px; }
            .hero-stats { gap: 8px; }
            .hero-stat { min-height: 88px; padding: 12px; }
            .hero-stat-label { min-height: 28px; font-size: 10px; }
            .hero-stat-value { font-size: clamp(22px, 7.4vw, 28px); }
            .stats-grid, .album-grid, .album-grid.latest-releases-grid, .similar-list { grid-template-columns: 1fr; }
            .track { grid-template-columns: 38px minmax(0, 1fr) 32px; gap: 9px; }
            .track-play { width: 38px; height: 38px; }
            .track-duration { display: none; }
            .track-open { width: 32px; height: 32px; }
            .music-player { padding: 10px; }
            .mobile-chart-cards { gap: 9px; }
            .mobile-month-card { padding: 12px 9px 10px; border-radius: 16px; }
            .mobile-month-label { font-size: 10px; }
            .mobile-month-value { font-size: clamp(22px, 8vw, 29px); }
            .mobile-bar-stage { height: 96px; margin-top: 10px; padding: 0 8px; }
            .mobile-bar-stage::before,
            .mobile-bar-stage::after { left: 8px; right: 8px; }
            .mobile-trend-summary { font-size: 12px; }
            .description-section { padding: 20px; }
        }

/* Универсальная модалка подтверждения вместо системного window.confirm */
body.has-open-dialog { overflow: hidden; }
.ui-confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    padding: 20px;
    visibility: hidden;
    opacity: 0;
    transition: opacity .16s ease, visibility .16s ease;
}
.ui-confirm-modal.is-visible {
    visibility: visible;
    opacity: 1;
}
.ui-confirm-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(3, 4, 8, .76);
    backdrop-filter: blur(10px);
}
.ui-confirm-dialog {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 16px;
    width: min(510px, 100%);
    padding: 23px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 22px;
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 204, 0, .09), transparent 20rem),
        linear-gradient(145deg, #1b1d26, #11131a);
    box-shadow: 0 28px 90px rgba(0, 0, 0, .58);
    transform: translateY(12px) scale(.985);
    transition: transform .18s ease;
}
.ui-confirm-modal.is-visible .ui-confirm-dialog { transform: translateY(0) scale(1); }
.ui-confirm-icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border: 1px solid rgba(255, 204, 0, .25);
    border-radius: 17px;
    color: #171717;
    background: var(--accent);
    box-shadow: 0 12px 28px rgba(255, 204, 0, .14);
    font-size: 22px;
    font-weight: 950;
}
.ui-confirm-copy { min-width: 0; }
.ui-confirm-eyebrow {
    color: var(--accent);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.ui-confirm-copy h2 {
    margin: 5px 0 8px;
    color: var(--text);
    font-size: 23px;
    line-height: 1.08;
    letter-spacing: -.035em;
}
.ui-confirm-copy p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
}
.ui-confirm-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 4px;
}
.ui-confirm-button {
    min-height: 48px;
    padding: 0 16px;
    border-radius: 14px;
    font: inherit;
    font-size: 13px;
    font-weight: 850;
    cursor: pointer;
    transition: transform .16s ease, filter .16s ease, border-color .16s ease, background .16s ease;
}
.ui-confirm-button:hover { transform: translateY(-1px); }
.ui-confirm-cancel {
    border: 1px solid var(--border);
    color: var(--text);
    background: rgba(255, 255, 255, .045);
}
.ui-confirm-cancel:hover { background: rgba(255, 255, 255, .075); }
.ui-confirm-submit {
    border: 1px solid transparent;
    color: #171717;
    background: var(--accent);
    box-shadow: 0 12px 28px rgba(255, 204, 0, .14);
}
.ui-confirm-modal[data-tone="danger"] .ui-confirm-icon,
.ui-confirm-modal[data-tone="danger"] .ui-confirm-submit {
    color: #fff;
    background: var(--negative);
    box-shadow: 0 12px 28px rgba(255, 107, 122, .15);
}
.ui-confirm-modal[data-tone="danger"] .ui-confirm-icon { border-color: rgba(255, 107, 122, .30); }
.ui-confirm-modal[data-tone="danger"] .ui-confirm-eyebrow { color: var(--negative); }
.ui-confirm-modal[data-tone="success"] .ui-confirm-icon,
.ui-confirm-modal[data-tone="success"] .ui-confirm-submit {
    color: #092419;
    background: var(--positive);
    box-shadow: 0 12px 28px rgba(75, 227, 155, .14);
}
.ui-confirm-modal[data-tone="success"] .ui-confirm-icon { border-color: rgba(75, 227, 155, .30); }
.ui-confirm-modal[data-tone="success"] .ui-confirm-eyebrow { color: var(--positive); }
@media (max-width: 520px) {
    .ui-confirm-modal { padding: 12px; }
    .ui-confirm-dialog { grid-template-columns: 46px minmax(0, 1fr); gap: 13px; padding: 18px; border-radius: 19px; }
    .ui-confirm-icon { width: 46px; height: 46px; border-radius: 14px; }
    .ui-confirm-copy h2 { font-size: 20px; }
    .ui-confirm-actions { grid-template-columns: 1fr; }
    .ui-confirm-submit { grid-row: 1; }
}

/* Жанры и лейблы ведут к соответствующим подборкам каталога */
.hero-filter-tags { align-items: center; }
.hero-tag-link {
    max-width: 100%;
    transition: transform .17s ease, border-color .17s ease, background .17s ease, color .17s ease;
}
.hero-tag-link:hover {
    transform: translateY(-1px);
    color: #171717;
    border-color: var(--accent);
    background: var(--accent);
}
.hero-tag-link:hover .hero-tag-key { color: rgba(23, 23, 23, .68); }
.hero-tag-link:hover .hero-tag-icon { color: var(--accent); background: #171717; }
.hero-genre-tag {
    border-color: rgba(107, 185, 255, .20);
    background: rgba(71, 151, 224, .075);
}
.hero-genre-tag .hero-tag-icon { color: #e7f5ff; background: #397ebd; }
.hero-genre-tag:hover { border-color: #77bfff; background: #5aa9ef; }
.info-row-taxonomy { align-items: flex-start; }
.info-filter-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    max-width: 220px;
}
.info-filter-list a {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 0 8px;
    border: 1px solid rgba(109, 184, 248, .18);
    border-radius: 9px;
    color: #a9cbe7;
    background: rgba(71, 151, 224, .065);
    font-size: 10px;
    font-weight: 760;
    transition: color .17s, border-color .17s, background .17s;
}
.info-filter-list a:hover { color: #171717; border-color: #77bfff; background: #77bfff; }
@media (max-width: 680px) {
    .info-row-taxonomy { display: grid; gap: 9px; }
    .info-filter-list { justify-content: flex-start; max-width: none; text-align: left; }
}

.metric-noscript { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* BandLink button for an upcoming release */
.upcoming-presave-button {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
    padding: 10px;
    border: 1px solid rgba(255, 204, 0, .28);
    border-radius: 13px;
    color: #16181d;
    background: linear-gradient(135deg, #ffe46b, #ffcc00);
    box-shadow: 0 13px 30px rgba(255, 204, 0, .13);
    transition: transform .18s ease, box-shadow .18s ease;
}
.upcoming-presave-button:hover { transform: translateY(-2px); box-shadow: 0 17px 36px rgba(255, 204, 0, .2); }
.upcoming-presave-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; color: #ffcc00; background: #16181d; font-size: 18px; }
.upcoming-presave-button > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
.upcoming-presave-button b { font-size: 13px; line-height: 1.1; }
.upcoming-presave-button small { color: rgba(17,19,24,.65); font-size: 10px; }
.upcoming-presave-button i { font-size: 16px; font-style: normal; }


/* Алиасы, точная дискография и фиты */
.artist-aliases {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-top: 12px;
    color: var(--muted);
    font-size: 12px;
}
.artist-aliases > span {
    font-weight: 760;
    color: rgba(235, 237, 245, .68);
}
.artist-alias-list { display: flex; flex-wrap: wrap; gap: 6px; }
.artist-alias-list span {
    display: inline-flex;
    padding: 5px 9px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 999px;
    color: #d9dce7;
    background: rgba(255, 255, 255, .035);
    line-height: 1;
}
.section-kicker {
    margin-bottom: 5px;
    color: #aeb3c3;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.participation-title-row { align-items: flex-end; }
.participation-intro {
    max-width: 720px;
    margin: -4px 0 18px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.65;
}
.participation-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.participation-card {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 13px;
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(143, 124, 255, .16);
    border-radius: 17px;
    color: inherit;
    text-decoration: none;
    background: linear-gradient(135deg, rgba(143, 124, 255, .08), rgba(255,255,255,.025));
    transition: transform .18s, border-color .18s, background .18s;
}
.participation-card:hover {
    transform: translateY(-2px);
    border-color: rgba(143, 124, 255, .34);
    background: linear-gradient(135deg, rgba(143, 124, 255, .13), rgba(255,255,255,.045));
}
.participation-card.is-hidden { display: none; }

.participation-card.is-track {
    border-color: rgba(255, 204, 0, .17);
    background: linear-gradient(135deg, rgba(255, 204, 0, .075), rgba(255,255,255,.025));
}
.participation-card.is-track:hover {
    border-color: rgba(255, 204, 0, .34);
    background: linear-gradient(135deg, rgba(255, 204, 0, .12), rgba(255,255,255,.045));
}
.participation-card.is-track .participation-copy small,
.participation-card.is-track > i { color: #e6c94f; }
.participation-explicit {
    display: inline-flex;
    margin-left: 5px;
    padding: 3px 6px;
    border: 1px solid rgba(255, 105, 130, .28);
    border-radius: 999px;
    color: #ffb2c0;
    background: rgba(255, 87, 115, .1);
    font-size: 8px;
    font-weight: 900;
    line-height: 1;
    vertical-align: 2px;
}
.participation-card img,
.participation-cover-fallback {
    width: 74px;
    height: 74px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    object-fit: cover;
    color: #c8c0ff;
    background: #252335;
    font-size: 25px;
}
.participation-copy { display: grid; min-width: 0; gap: 4px; }
.participation-copy small {
    overflow: hidden;
    color: #aaa3dc;
    font-size: 10px;
    font-weight: 760;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.participation-copy strong {
    overflow: hidden;
    font-size: 14px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.participation-copy > span {
    overflow: hidden;
    color: var(--muted);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.participation-copy b {
    color: #d8d3ff;
    font-weight: 800;
}
.participation-card > i {
    color: #9f97db;
    font-style: normal;
    font-size: 16px;
}
.participation-count-only {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 17px;
    border: 1px solid rgba(143, 124, 255, .16);
    border-radius: 16px;
    color: var(--muted);
    background: rgba(143, 124, 255, .055);
    line-height: 1.5;
}
.participation-count-only strong { color: #dedaff; white-space: nowrap; }
.info-row-emphasis .info-value { color: #f0f2f8; }
.info-row-participation .info-key,
.info-row-participation .info-value { color: #c6bfff; }
.similar-card-copy { display: grid; min-width: 0; gap: 3px; }
.similar-card-copy small {
    color: var(--muted);
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .02em;
}
.similar-card.is-internal {
    border: 1px solid rgba(255, 204, 0, .15);
    background: rgba(255, 204, 0, .05);
}
.similar-card.is-internal .similar-card-copy small { color: #e6c94f; }

@media (max-width: 760px) {
    .participation-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .artist-aliases { align-items: flex-start; flex-direction: column; }
    .participation-card { grid-template-columns: 62px minmax(0, 1fr) 18px; gap: 10px; }
    .participation-card img,
    .participation-cover-fallback { width: 62px; height: 62px; border-radius: 11px; }
    .participation-count-only { align-items: flex-start; flex-direction: column; gap: 6px; }
}


/* AI project marker on artist pages */
.artist-title-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.artist-title-line h1 { margin: 0; }
.ai-project-badge--hero {
    min-height: 34px;
    padding-right: 12px;
    font-size: 11px;
}
.ai-project-badge--hero.ai-project-badge--icon {
    width: 34px;
    min-width: 34px;
    height: 30px;
    min-height: 30px;
    padding: 0;
    font-size: 9px;
}
.artist-ai-disclosure {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 620px;
    margin-top: 12px;
    padding: 10px 12px 10px 8px;
    border: 1px solid rgba(172, 135, 255, .22);
    border-radius: 14px;
    background: rgba(137, 91, 238, .065);
}
.artist-ai-disclosure-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 30px;
    flex: 0 0 34px;
    border-radius: 10px;
    color: #171020;
    background: linear-gradient(135deg, #d9c3ff, #9c77f4);
    font-size: 9px;
    font-weight: 950;
    letter-spacing: .05em;
}
.artist-ai-disclosure > span:last-child {
    display: grid;
    gap: 2px;
}
.artist-ai-disclosure strong {
    color: #e8ddff;
    font-size: 10px;
}
.artist-ai-disclosure small {
    color: #a9a0ba;
    font-size: 8px;
    line-height: 1.45;
}
.similar-card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
}
.similar-card-meta em {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 16px;
    padding: 0 5px;
    border: 1px solid rgba(167, 128, 255, .28);
    border-radius: 999px;
    color: #d9c9ff;
    background: rgba(128, 85, 224, .12);
    font-size: 7px;
    font-style: normal;
    font-weight: 950;
    letter-spacing: .04em;
}

@media (max-width: 620px) {
    .artist-title-line { align-items: center; flex-direction: row; flex-wrap: wrap; gap: 8px; }
}

/* ===== Просмотры публичной страницы артиста ===== */
.hero-stat-pageviews {
    border-color: rgba(126, 140, 255, .18);
    background:
        radial-gradient(circle at 100% 100%, rgba(126,140,255,.12), transparent 48%),
        linear-gradient(145deg, rgba(126,140,255,.055), rgba(255,255,255,.018));
}
.hero-stat-pageviews::after { background: rgba(126,140,255,.09); }
.hero-stat-note {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
    color: var(--muted);
    font-size: 9px;
    white-space: nowrap;
}
.hero-stat-note b { color: var(--muted); font-size: 9px; }
.hero-stat-note b.positive { color: #5fe2aa; }
.hero-stat-note b.negative { color: #ff8298; }
@media (min-width: 1121px) {
    .hero:has(.hero-stat-pageviews) { grid-template-columns: 190px minmax(270px, 1fr) minmax(390px, .95fr); }
    .hero:has(.hero-stat-pageviews) .hero-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .hero:has(.hero-stat-pageviews) .hero-stat-pageviews { grid-column: 1 / -1; min-height: 82px; }
}
@media (max-width: 1120px) and (min-width: 821px) {
    .hero:has(.hero-stat-pageviews) .hero-stats { grid-template-columns: repeat(5, minmax(0,1fr)); }
}
@media (max-width: 820px) {
    .hero-stat-pageviews { grid-column: 1 / -1; min-height: 82px; }
    .hero-stat-pageviews .hero-stat-label { min-height: 0; }
}

/* Яндекс Музыка как безопасная замена недоступной страницы будущего альбома */
.upcoming-yandex-button {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
    padding: 10px;
    border: 1px solid rgba(255, 204, 0, .24);
    border-radius: 13px;
    color: #f6f7fb;
    background: linear-gradient(135deg, rgba(31, 33, 41, .98), rgba(17, 18, 24, .98));
    box-shadow: 0 13px 30px rgba(0, 0, 0, .16);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.upcoming-yandex-button:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 204, 0, .46);
    box-shadow: 0 17px 36px rgba(0, 0, 0, .23);
}
.upcoming-yandex-icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 11px;
    color: #15161b;
    background: #ffcc00;
    font-size: 16px;
    font-weight: 950;
}
.upcoming-yandex-button > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
.upcoming-yandex-button b { font-size: 13px; line-height: 1.1; }
.upcoming-yandex-button small { color: rgba(226, 229, 240, .58); font-size: 10px; }
.upcoming-yandex-button i { color: #ffdc4d; font-size: 16px; font-style: normal; }

/* ===== Обновлённая шапка карточки исполнителя ===== */
.artist-profile-hero {
    display: block;
    padding: 28px;
    border-radius: 28px;
    background:
        radial-gradient(circle at 88% 4%, rgba(255, 204, 0, .12), transparent 27rem),
        linear-gradient(118deg, rgba(22, 24, 32, .98), rgba(14, 16, 22, .97));
}

.artist-profile-hero .hero-backdrop {
    inset: -55% -8% -55% 62%;
    opacity: .12;
    filter: blur(64px) saturate(1.2);
}

.artist-profile-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(115deg, rgba(255,255,255,.035), transparent 28%),
        linear-gradient(90deg, rgba(255,204,0,.045), transparent 22%);
}

.artist-profile-hero::after {
    width: 440px;
    height: 440px;
    right: -170px;
    bottom: -260px;
    background: rgba(255, 204, 0, .075);
}

.artist-profile-main {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    grid-template-areas:
        "photo copy"
        "photo actions";
    align-items: center;
    gap: 20px 30px;
}

.artist-photo-column { grid-area: photo; min-width: 0; }
.artist-profile-copy { grid-area: copy; align-self: end; }
.artist-profile-actions { grid-area: actions; align-self: start; }

.artist-photo-trigger {
    display: grid;
    width: 100%;
    gap: 10px;
    padding: 0;
    border: 0;
    outline: 0;
    color: inherit;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: zoom-in;
}

.artist-photo-trigger.is-placeholder { cursor: default; }

.artist-photo-frame {
    position: relative;
    display: block;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 1;
    padding: 5px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 26px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,204,0,.06) 46%, rgba(255,255,255,.025));
    box-shadow:
        0 22px 54px rgba(0, 0, 0, .38),
        inset 0 1px 0 rgba(255,255,255,.08);
}

.artist-photo-frame::before {
    content: "";
    position: absolute;
    inset: 5px;
    z-index: 2;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 20px;
    pointer-events: none;
}

.artist-photo-frame .artist-cover,
.artist-photo-frame .placeholder-cover {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 1;
    border-radius: 20px;
    box-shadow: none;
}

.artist-photo-frame .artist-cover {
    transition: transform .28s ease, filter .28s ease;
}

.artist-photo-frame .placeholder-cover {
    place-items: center;
    font-size: 52px;
}

.artist-photo-overlay {
    position: absolute;
    inset: 5px;
    z-index: 3;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 8px;
    padding: 18px 12px;
    border-radius: 20px;
    color: #fff;
    background: linear-gradient(180deg, transparent 42%, rgba(3, 4, 7, .82));
    opacity: 0;
    transform: translateY(5px);
    transition: opacity .22s ease, transform .22s ease;
}

.artist-photo-overlay strong {
    font-size: 12px;
    font-weight: 850;
    letter-spacing: -.01em;
}

.artist-photo-overlay-icon {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 10px;
    background: rgba(9, 10, 14, .55);
    backdrop-filter: blur(8px);
}

.artist-photo-overlay-icon svg,
.artist-photo-hint svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.artist-photo-trigger:hover .artist-photo-overlay,
.artist-photo-trigger:focus-visible .artist-photo-overlay {
    opacity: 1;
    transform: translateY(0);
}

.artist-photo-trigger:hover .artist-cover,
.artist-photo-trigger:focus-visible .artist-cover {
    transform: scale(1.035);
    filter: saturate(1.06) contrast(1.02);
}

.artist-photo-trigger:focus-visible .artist-photo-frame {
    box-shadow: 0 0 0 4px rgba(255, 204, 0, .16), 0 22px 54px rgba(0, 0, 0, .38);
    border-color: rgba(255, 204, 0, .65);
}

.artist-photo-hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: rgba(224, 227, 237, .48);
    font-size: 10px;
    font-weight: 650;
    transition: color .2s ease;
}

.artist-photo-hint svg { width: 13px; height: 13px; }
.artist-photo-trigger:hover .artist-photo-hint { color: rgba(255, 221, 82, .88); }

.artist-profile-kicker {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-bottom: 8px;
}

.artist-profile-source {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 26px;
    padding: 0 10px;
    border: 1px solid rgba(75, 227, 155, .15);
    border-radius: 999px;
    color: #b8e9d3;
    background: rgba(75, 227, 155, .055);
    font-size: 10px;
    font-weight: 750;
}

.artist-profile-source i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--positive);
    box-shadow: 0 0 0 4px rgba(75, 227, 155, .08);
}

.artist-profile-hero .artist-title-line {
    gap: 13px;
}

.artist-profile-hero .artist-title-line h1 {
    max-width: 100%;
    font-size: clamp(44px, 5vw, 72px);
    line-height: .94;
    letter-spacing: -.058em;
}

.artist-profile-intro {
    max-width: 790px;
    margin: 15px 0 0;
    color: #b0b5c5;
    font-size: 15px;
    line-height: 1.65;
}

.artist-profile-meta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-top: 14px;
}

.artist-profile-id {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 999px;
    color: rgba(226,229,239,.6);
    background: rgba(255,255,255,.025);
    font-size: 10px;
    font-weight: 720;
    font-variant-numeric: tabular-nums;
}

.artist-profile-meta-row .artist-aliases { margin: 0; }
.artist-profile-hero .hero-tags { margin-top: 14px; }

.artist-profile-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 0;
}

.artist-action {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 9px 12px 9px 9px;
    border: 1px solid rgba(255,255,255,.085);
    border-radius: 15px;
    color: #f2f4f9;
    background: rgba(255,255,255,.035);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.artist-action:hover {
    transform: translateY(-2px);
    border-color: rgba(255,255,255,.18);
    background: rgba(255,255,255,.06);
}

.artist-action--primary {
    border-color: rgba(255,204,0,.25);
    background: linear-gradient(135deg, rgba(255,204,0,.105), rgba(255,204,0,.035));
}

.artist-action--primary:hover { border-color: rgba(255,204,0,.48); }
.artist-action--access { border-color: rgba(255,204,0,.13); }

.artist-action-icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 12px;
    color: #e3e6ef;
    background: rgba(255,255,255,.065);
    font-size: 15px;
    font-weight: 900;
}

.artist-action-icon svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.artist-action-icon--yandex {
    color: #151515;
    background: var(--accent);
}

.artist-action > span:nth-child(2) {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.artist-action strong {
    overflow: hidden;
    font-size: 12px;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.artist-action small {
    overflow: hidden;
    color: rgba(218,222,233,.48);
    font-size: 9px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.artist-action > i {
    color: rgba(255,255,255,.55);
    font-size: 15px;
    font-style: normal;
}

.artist-metrics,
.artist-profile-hero:has(.hero-stat-pageviews) .artist-metrics {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 11px;
    width: 100%;
    margin-top: 25px;
    padding: 20px 0 0;
    border-top: 1px solid rgba(255,255,255,.075);
}

.artist-profile-hero.has-pageviews .artist-metrics {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.artist-profile-hero .artist-metric,
.artist-profile-hero .hero-stat-pageviews {
    display: flex;
    flex-direction: column;
    grid-column: auto;
    min-width: 0;
    min-height: 144px;
    padding: 16px;
    border-radius: 18px;
    background:
        radial-gradient(circle at 100% 0%, rgba(255,255,255,.055), transparent 48%),
        linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.018));
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.artist-profile-hero .artist-metric:hover {
    transform: translateY(-2px);
    border-color: rgba(255,255,255,.15);
}

.artist-profile-hero .artist-metric::after {
    width: 112px;
    height: 112px;
    right: -45px;
    bottom: -50px;
    opacity: .8;
}

.artist-metric-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.artist-metric-icon {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    place-items: center;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 11px;
    color: #f2d652;
    background: rgba(255,204,0,.075);
}

.artist-metric-icon svg {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.artist-metric-kicker {
    overflow: hidden;
    color: rgba(213,217,229,.55);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .075em;
    line-height: 1.2;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.artist-profile-hero .artist-metric-value {
    margin-top: 15px;
    color: #f7f8fb;
    font-size: clamp(29px, 2.45vw, 40px);
    font-weight: 900;
    letter-spacing: -.055em;
    line-height: .95;
}

.artist-metric-direction {
    display: inline-block;
    margin-right: 5px;
    font-size: .65em;
    vertical-align: .13em;
}

.artist-metric-label {
    position: relative;
    z-index: 1;
    margin-top: 7px;
    color: #dfe2eb;
    font-size: 11px;
    font-weight: 750;
    line-height: 1.25;
}

.artist-metric-note {
    position: relative;
    z-index: 1;
    margin-top: auto;
    padding-top: 11px;
    color: rgba(205,210,222,.43);
    font-size: 9px;
    line-height: 1.35;
}

.artist-metric-note--split {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.artist-metric-note b {
    padding: 3px 6px;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 900;
    white-space: nowrap;
}

.artist-metric-note b.is-positive {
    color: #75edb7;
    background: rgba(75,227,155,.09);
}

.artist-metric-note b.is-negative {
    color: #ff93a4;
    background: rgba(255,107,122,.09);
}

.artist-metric--trend.is-positive {
    border-color: rgba(75,227,155,.18);
    background:
        radial-gradient(circle at 100% 0%, rgba(75,227,155,.09), transparent 48%),
        linear-gradient(145deg, rgba(75,227,155,.045), rgba(255,255,255,.018));
}

.artist-metric--trend.is-positive .artist-metric-icon,
.artist-metric--trend.is-positive .artist-metric-value {
    color: var(--positive);
}

.artist-metric--trend.is-positive .artist-metric-icon {
    border-color: rgba(75,227,155,.14);
    background: rgba(75,227,155,.07);
}

.artist-metric--trend.is-negative {
    border-color: rgba(255,107,122,.18);
    background:
        radial-gradient(circle at 100% 0%, rgba(255,107,122,.09), transparent 48%),
        linear-gradient(145deg, rgba(255,107,122,.045), rgba(255,255,255,.018));
}

.artist-metric--trend.is-negative .artist-metric-icon,
.artist-metric--trend.is-negative .artist-metric-value {
    color: var(--negative);
}

.artist-metric--trend.is-negative .artist-metric-icon {
    border-color: rgba(255,107,122,.14);
    background: rgba(255,107,122,.07);
}

.artist-metric--likes .artist-metric-icon {
    color: #ff9cab;
    background: rgba(255,107,122,.065);
}

.artist-metric--catalog .artist-metric-icon {
    color: #bda4ff;
    background: rgba(141,102,236,.075);
}

.artist-metric--views {
    border-color: rgba(126,140,255,.16) !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(126,140,255,.09), transparent 48%),
        linear-gradient(145deg, rgba(126,140,255,.04), rgba(255,255,255,.018)) !important;
}

.artist-metric--views .artist-metric-icon {
    color: #a9b2ff;
    background: rgba(126,140,255,.075);
}

/* Просмотр фотографии поверх страницы */
body.artist-photo-lightbox-open { overflow: hidden; }

.artist-photo-lightbox[hidden] { display: none !important; }

.artist-photo-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: grid;
    place-items: center;
    padding: 28px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, visibility .18s ease;
}

.artist-photo-lightbox.is-open {
    opacity: 1;
    visibility: visible;
}

.artist-photo-lightbox-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: rgba(3, 4, 7, .9);
    backdrop-filter: blur(16px);
    cursor: zoom-out;
}

.artist-photo-lightbox-dialog {
    position: relative;
    z-index: 1;
    display: grid;
    max-width: min(820px, 92vw);
    max-height: 92vh;
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 24px;
    background: #101218;
    box-shadow: 0 35px 100px rgba(0,0,0,.66);
    transform: scale(.965) translateY(8px);
    transition: transform .2s ease;
}

.artist-photo-lightbox.is-open .artist-photo-lightbox-dialog {
    transform: scale(1) translateY(0);
}

.artist-photo-lightbox-dialog img {
    display: block;
    max-width: min(820px, 92vw);
    max-height: calc(92vh - 72px);
    object-fit: contain;
    background: #090a0e;
}

.artist-photo-lightbox-dialog figcaption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 64px;
    padding: 12px 18px;
    border-top: 1px solid rgba(255,255,255,.075);
}

.artist-photo-lightbox-dialog figcaption strong { font-size: 14px; }
.artist-photo-lightbox-dialog figcaption span { color: var(--muted); font-size: 10px; }

.artist-photo-lightbox-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 13px;
    color: #fff;
    background: rgba(9,10,14,.72);
    backdrop-filter: blur(12px);
    cursor: pointer;
    transition: transform .18s ease, background .18s ease;
}

.artist-photo-lightbox-close:hover { transform: rotate(4deg); background: rgba(31,33,42,.9); }
.artist-photo-lightbox-close:focus-visible { outline: 3px solid rgba(255,204,0,.35); outline-offset: 2px; }
.artist-photo-lightbox-close svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

@media (max-width: 1320px) {
    .artist-profile-main { grid-template-columns: 200px minmax(0, 1fr); gap: 18px 24px; }
    .artist-profile-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .artist-profile-hero.has-pageviews .artist-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .artist-profile-hero.has-pageviews .artist-metric--views { grid-column: span 2; }
}

@media (max-width: 980px) {
    .artist-profile-hero { padding: 22px; }
    .artist-profile-main { grid-template-columns: 180px minmax(0, 1fr); }
    .artist-profile-hero .artist-title-line h1 { font-size: clamp(40px, 6.4vw, 62px); }
    .artist-profile-intro { font-size: 14px; }
    .artist-profile-actions { grid-template-columns: 1fr 1fr; }
    .artist-metrics,
    .artist-profile-hero:has(.hero-stat-pageviews) .artist-metrics,
    .artist-profile-hero.has-pageviews .artist-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .artist-profile-hero.has-pageviews .artist-metric--views { grid-column: auto; }
}

@media (max-width: 680px) {
    .artist-profile-hero {
        padding: 17px;
        border-radius: 22px;
    }

    .artist-profile-main {
        grid-template-columns: 118px minmax(0, 1fr);
        grid-template-areas:
            "photo copy"
            "actions actions";
        align-items: start;
        gap: 16px;
    }

    .artist-photo-frame { padding: 4px; border-radius: 20px; }
    .artist-photo-frame::before { inset: 4px; border-radius: 15px; }
    .artist-photo-frame .artist-cover,
    .artist-photo-frame .placeholder-cover { border-radius: 15px; }
    .artist-photo-overlay { inset: 4px; border-radius: 15px; padding: 10px 6px; }
    .artist-photo-overlay strong { display: none; }
    .artist-photo-hint { display: none; }

    .artist-profile-copy { align-self: center; }
    .artist-profile-kicker { gap: 7px; margin-bottom: 6px; }
    .artist-profile-source { display: none; }
    .artist-profile-hero .eyebrow { font-size: 9px; }
    .artist-profile-hero .artist-title-line { gap: 7px; }
    .artist-profile-hero .artist-title-line h1 {
        font-size: clamp(31px, 9vw, 46px);
        line-height: .97;
    }
    .artist-profile-hero .ai-project-badge--hero.ai-project-badge--icon { width: 28px; min-width: 28px; height: 26px; min-height: 26px; }
    .artist-profile-intro {
        display: -webkit-box;
        margin-top: 9px;
        overflow: hidden;
        color: rgba(209,213,225,.63);
        font-size: 11px;
        line-height: 1.45;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }
    .artist-profile-meta-row { margin-top: 9px; gap: 7px; }
    .artist-profile-id { min-height: 24px; padding-inline: 8px; font-size: 8px; }
    .artist-profile-meta-row .artist-aliases { display: none; }
    .artist-profile-hero .hero-tags { grid-column: 1 / -1; margin-top: 10px; }

    .artist-profile-actions {
        grid-template-columns: 1fr;
        gap: 8px;
        width: 100%;
    }

    .artist-action { min-height: 56px; }
    .artist-action strong { font-size: 12px; }
    .artist-action small { font-size: 9px; }

    .artist-metrics,
    .artist-profile-hero:has(.hero-stat-pageviews) .artist-metrics,
    .artist-profile-hero.has-pageviews .artist-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-top: 18px;
        padding-top: 16px;
    }

    .artist-profile-hero .artist-metric,
    .artist-profile-hero .hero-stat-pageviews {
        min-height: 136px;
        padding: 13px;
        border-radius: 16px;
    }

    .artist-metric-top { gap: 7px; }
    .artist-metric-icon { width: 30px; height: 30px; flex-basis: 30px; border-radius: 10px; }
    .artist-metric-icon svg { width: 15px; height: 15px; }
    .artist-metric-kicker { font-size: 7px; letter-spacing: .055em; }
    .artist-profile-hero .artist-metric-value { margin-top: 12px; font-size: clamp(27px, 8vw, 34px); }
    .artist-metric-label { font-size: 10px; }
    .artist-metric-note { padding-top: 9px; font-size: 8px; }
    .artist-profile-hero.has-pageviews .artist-metric--views { grid-column: 1 / -1; min-height: 126px; }

    .artist-photo-lightbox { padding: 14px; }
    .artist-photo-lightbox-dialog { max-width: calc(100vw - 28px); border-radius: 18px; }
    .artist-photo-lightbox-dialog img { max-width: calc(100vw - 28px); max-height: calc(88vh - 62px); }
    .artist-photo-lightbox-dialog figcaption { min-height: 58px; padding: 10px 14px; }
    .artist-photo-lightbox-dialog figcaption span { display: none; }
    .artist-photo-lightbox-close { top: 9px; right: 9px; width: 38px; height: 38px; }
}

@media (max-width: 430px) {
    .artist-profile-hero { padding: 14px; }
    .artist-profile-main { grid-template-columns: 96px minmax(0, 1fr); gap: 13px; }
    .artist-profile-hero .artist-title-line h1 { font-size: clamp(29px, 9.5vw, 39px); }
    .artist-profile-intro { -webkit-line-clamp: 2; }
    .artist-profile-hero .hero-tags { gap: 6px; }
    .artist-profile-hero .hero-tag { min-height: 29px; padding-inline: 9px; font-size: 10px; }
    .artist-metrics,
    .artist-profile-hero:has(.hero-stat-pageviews) .artist-metrics,
    .artist-profile-hero.has-pageviews .artist-metrics { gap: 7px; }
    .artist-profile-hero .artist-metric,
    .artist-profile-hero .hero-stat-pageviews { min-height: 128px; padding: 11px; }
    .artist-metric-note { font-size: 7.5px; }
}

/* ===== Сводка и похожие артисты: обновлённая боковая колонка ===== */
.artist-sidebar-card {
    position: relative;
    overflow: hidden;
    padding: 22px;
    border-color: rgba(255, 255, 255, .085);
    background:
        radial-gradient(circle at 100% 0, rgba(255, 204, 0, .065), transparent 38%),
        linear-gradient(155deg, rgba(22, 24, 32, .96), rgba(12, 13, 18, .96));
    box-shadow:
        0 22px 54px rgba(0, 0, 0, .22),
        inset 0 1px 0 rgba(255, 255, 255, .025);
}

.artist-sidebar-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 22px;
    right: 22px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 204, 0, .52), transparent);
    opacity: .68;
}

.sidebar-section-heading {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 13px;
    align-items: start;
    margin-bottom: 18px;
}

.sidebar-section-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(255, 204, 0, .18);
    border-radius: 15px;
    color: #ffdc50;
    background:
        radial-gradient(circle at 25% 20%, rgba(255, 255, 255, .13), transparent 34%),
        rgba(255, 204, 0, .075);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
}

.sidebar-section-icon--similar {
    border-color: rgba(143, 124, 255, .2);
    color: #c5b9ff;
    background:
        radial-gradient(circle at 25% 20%, rgba(255, 255, 255, .12), transparent 34%),
        rgba(143, 124, 255, .08);
}

.sidebar-section-icon svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sidebar-section-heading-copy {
    display: grid;
    min-width: 0;
    gap: 5px;
}

.sidebar-section-kicker {
    color: var(--accent);
    font-size: 9px;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .13em;
}

.similar-artists-section .sidebar-section-kicker { color: #b9acff; }

.sidebar-section-title-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.sidebar-section-title-line h2 {
    min-width: 0;
    font-size: 21px;
    line-height: 1.05;
}

.sidebar-section-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 8px;
    border: 1px solid rgba(255, 255, 255, .085);
    border-radius: 999px;
    color: #cdd1dd;
    background: rgba(255, 255, 255, .035);
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
}

.sidebar-section-heading p {
    margin: 0;
    color: #888f9f;
    font-size: 10px;
    line-height: 1.5;
}

.summary-primary-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.summary-primary-item {
    position: relative;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
    min-width: 0;
    min-height: 112px;
    padding: 14px 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .075);
    border-radius: 17px;
    background:
        radial-gradient(circle at 100% 100%, rgba(255, 204, 0, .1), transparent 48%),
        rgba(255, 255, 255, .025);
}

.summary-primary-item--releases {
    background:
        radial-gradient(circle at 100% 100%, rgba(143, 124, 255, .11), transparent 48%),
        rgba(255, 255, 255, .025);
}

.summary-primary-item::after {
    content: "";
    position: absolute;
    right: -15px;
    bottom: -18px;
    width: 54px;
    height: 54px;
    border: 10px solid rgba(255, 204, 0, .045);
    border-radius: 50%;
}

.summary-primary-item--releases::after { border-color: rgba(143, 124, 255, .05); }

.summary-primary-icon {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 204, 0, .17);
    border-radius: 12px;
    color: #ffdc50;
    background: rgba(255, 204, 0, .07);
}

.summary-primary-item--releases .summary-primary-icon {
    border-color: rgba(143, 124, 255, .2);
    color: #c9beff;
    background: rgba(143, 124, 255, .08);
}

.summary-primary-icon svg {
    width: 19px;
    height: 19px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.summary-primary-copy {
    position: relative;
    z-index: 1;
    display: grid;
    align-content: start;
    min-width: 0;
}

.summary-primary-copy small {
    overflow: hidden;
    color: #9ba1af;
    font-size: 8px;
    font-weight: 760;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.summary-primary-copy strong {
    margin-top: 4px;
    color: #f5f6fa;
    font-size: 29px;
    font-weight: 920;
    line-height: .98;
    letter-spacing: -.055em;
}

.summary-primary-copy > span {
    margin-top: 7px;
    color: #737a89;
    font-size: 8px;
    line-height: 1.35;
}

.summary-participation-note {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    margin-top: 10px;
    padding: 11px 12px;
    border: 1px solid rgba(143, 124, 255, .16);
    border-radius: 15px;
    background: rgba(143, 124, 255, .055);
}

.summary-participation-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    color: #c8bdff;
    background: rgba(143, 124, 255, .09);
}

.summary-participation-icon svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.summary-participation-note > span:last-child { display: grid; gap: 3px; min-width: 0; }
.summary-participation-note strong { color: #ddd8ff; font-size: 10px; line-height: 1.3; }
.summary-participation-note small { color: #9189ba; font-size: 8px; line-height: 1.35; }

.summary-breakdown {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 14px;
}

.summary-mini-stat {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 9px;
    align-items: center;
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, .065);
    border-radius: 14px;
    background: rgba(255, 255, 255, .022);
}

.summary-mini-stat--total {
    border-color: rgba(255, 204, 0, .11);
    background: rgba(255, 204, 0, .035);
}

.summary-mini-icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255, 255, 255, .075);
    border-radius: 10px;
    color: #c7cbd5;
    background: rgba(255, 255, 255, .035);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: -.02em;
}

.summary-mini-stat--total .summary-mini-icon {
    border-color: rgba(255, 204, 0, .15);
    color: #f3d85c;
    background: rgba(255, 204, 0, .06);
}

.summary-mini-icon svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.summary-mini-stat > span:last-child { display: grid; min-width: 0; gap: 2px; }
.summary-mini-stat small { overflow: hidden; color: #7d8492; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.summary-mini-stat strong { color: #edf0f6; font-size: 15px; line-height: 1; }

.summary-taxonomy,
.summary-ratings {
    position: relative;
    z-index: 1;
    margin-top: 16px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, .07);
}

.summary-subheading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.summary-subheading > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #d9dce5;
    font-size: 10px;
    font-weight: 820;
}

.summary-subheading svg {
    width: 15px;
    height: 15px;
    color: #f0cf4a;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.summary-subheading > small {
    color: #707786;
    font-size: 8px;
    line-height: 1.3;
    text-align: right;
}

.summary-genre-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.summary-genre-list a {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 9px;
    border: 1px solid rgba(91, 163, 255, .19);
    border-radius: 9px;
    color: #bcd9ff;
    background: rgba(91, 163, 255, .065);
    font-size: 9px;
    font-weight: 760;
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.summary-genre-list a:hover {
    transform: translateY(-1px);
    border-color: rgba(91, 163, 255, .34);
    background: rgba(91, 163, 255, .11);
}

.summary-rating-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}

.summary-rating-card {
    display: grid;
    gap: 6px;
    min-width: 0;
    padding: 10px 8px;
    border: 1px solid rgba(255, 255, 255, .065);
    border-radius: 13px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .012));
}

.summary-rating-card small {
    color: #767d8b;
    font-size: 7px;
    font-weight: 750;
    white-space: nowrap;
}

.summary-rating-card strong {
    overflow: hidden;
    color: #f2f3f8;
    font-size: 14px;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.summary-rating-card strong span {
    margin-right: 2px;
    color: #f0ce43;
    font-size: 9px;
    font-weight: 850;
}

.similar-artists-section {
    background:
        radial-gradient(circle at 100% 0, rgba(143, 124, 255, .085), transparent 42%),
        linear-gradient(155deg, rgba(22, 24, 32, .96), rgba(12, 13, 18, .96));
}

.similar-artists-section::before {
    background: linear-gradient(90deg, transparent, rgba(143, 124, 255, .58), transparent);
}

.similar-artists-section .similar-list {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.similar-artists-section .similar-card {
    position: relative;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) 30px;
    gap: 11px;
    align-items: center;
    min-width: 0;
    min-height: 74px;
    padding: 8px 9px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .055);
    border-radius: 16px;
    color: inherit;
    background: rgba(255, 255, 255, .025);
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.similar-artists-section .similar-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(100deg, transparent 48%, rgba(255, 255, 255, .025));
    opacity: 0;
    transition: opacity .18s ease;
}

.similar-artists-section .similar-card:hover,
.similar-artists-section .similar-card:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(143, 124, 255, .22);
    background: rgba(143, 124, 255, .055);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .18);
}

.similar-artists-section .similar-card:hover::before,
.similar-artists-section .similar-card:focus-visible::before { opacity: 1; }

.similar-artists-section .similar-card.is-internal {
    border-color: rgba(255, 204, 0, .15);
    background:
        radial-gradient(circle at 100% 100%, rgba(255, 204, 0, .075), transparent 54%),
        rgba(255, 204, 0, .032);
}

.similar-artists-section .similar-card.is-internal:hover,
.similar-artists-section .similar-card.is-internal:focus-visible {
    border-color: rgba(255, 204, 0, .3);
    background: rgba(255, 204, 0, .065);
}

.similar-card-media {
    position: relative;
    display: block;
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
}

.similar-artists-section .similar-card img,
.similar-artists-section .similar-avatar {
    display: block;
    width: 56px;
    height: 56px;
    border: 1px solid rgba(255, 255, 255, .065);
    border-radius: 14px;
    object-fit: cover;
    background: #20222a;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .18);
}

.similar-artists-section .similar-avatar {
    display: grid;
    place-items: center;
    color: #858b99;
    font-size: 18px;
}

.similar-catalog-mark {
    position: absolute;
    right: -4px;
    bottom: -3px;
    display: grid;
    place-items: center;
    width: 19px;
    height: 19px;
    border: 2px solid #121319;
    border-radius: 7px;
    color: #161409;
    background: var(--accent);
    font-size: 8px;
    font-weight: 950;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .28);
}

.similar-artists-section .similar-card-copy {
    position: relative;
    z-index: 1;
    display: grid;
    min-width: 0;
    gap: 6px;
}

.similar-artists-section .similar-name {
    overflow: hidden;
    color: #f0f2f7;
    font-size: 12px;
    font-weight: 820;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.similar-artists-section .similar-card-meta {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 6px;
}

.similar-source-icon {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border-radius: 6px;
    color: #151515;
    background: #ffcc00;
    font-size: 8px;
    font-weight: 950;
}

.similar-source-icon.is-bandlist { background: linear-gradient(135deg, #ffe455, #ffbf00); }

.similar-artists-section .similar-card-meta small {
    min-width: 0;
    overflow: hidden;
    color: #777f8f;
    font-size: 8px;
    font-weight: 700;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.similar-artists-section .similar-card.is-internal .similar-card-meta small { color: #b5a65d; }

.similar-artists-section .similar-card-meta em {
    display: inline-grid;
    place-items: center;
    min-width: 24px;
    height: 17px;
    padding: 0 5px;
    border: 1px solid rgba(167, 128, 255, .28);
    border-radius: 999px;
    color: #d9c9ff;
    background: rgba(128, 85, 224, .12);
    font-size: 7px;
    font-style: normal;
    font-weight: 950;
}

.similar-card-arrow {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(255, 255, 255, .075);
    border-radius: 10px;
    color: #858b99;
    background: rgba(255, 255, 255, .025);
    transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
}

.similar-card-arrow svg {
    width: 15px;
    height: 15px;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.similar-card:hover .similar-card-arrow,
.similar-card:focus-visible .similar-card-arrow {
    transform: translate(1px, -1px);
    border-color: rgba(143, 124, 255, .24);
    color: #c7bdff;
    background: rgba(143, 124, 255, .075);
}

.similar-card.is-internal:hover .similar-card-arrow,
.similar-card.is-internal:focus-visible .similar-card-arrow {
    border-color: rgba(255, 204, 0, .24);
    color: #f1d34c;
    background: rgba(255, 204, 0, .07);
}

@media (max-width: 430px) {
    .artist-sidebar-card { padding: 19px; border-radius: 21px; }
    .artist-sidebar-card::before { left: 19px; right: 19px; }
    .sidebar-section-heading { grid-template-columns: 42px minmax(0, 1fr); gap: 11px; }
    .sidebar-section-icon { width: 42px; height: 42px; border-radius: 14px; }
    .sidebar-section-icon svg { width: 20px; height: 20px; }
    .sidebar-section-title-line h2 { font-size: 19px; }
    .sidebar-section-heading p { font-size: 9px; }
    .summary-primary-item { grid-template-columns: 34px minmax(0, 1fr); min-height: 106px; padding: 12px 10px; }
    .summary-primary-icon { width: 34px; height: 34px; }
    .summary-primary-copy strong { font-size: 26px; }
    .summary-primary-copy > span { font-size: 7.5px; }
    .summary-rating-card { padding-inline: 6px; }
    .summary-rating-card small { font-size: 6.5px; }
    .summary-rating-card strong { font-size: 13px; }
}

/* ===== Дискография: последние и все релизы ===== */
.artist-releases-section {
    position: relative;
    overflow: hidden;
    padding: 25px;
    border-color: rgba(255, 255, 255, .085);
    background:
        radial-gradient(circle at 100% 0, rgba(255, 204, 0, .065), transparent 34%),
        linear-gradient(155deg, rgba(22, 24, 32, .97), rgba(11, 12, 17, .98));
    box-shadow:
        0 24px 58px rgba(0, 0, 0, .22),
        inset 0 1px 0 rgba(255, 255, 255, .025);
}

.artist-releases-section--archive {
    background:
        radial-gradient(circle at 100% 0, rgba(143, 124, 255, .07), transparent 35%),
        linear-gradient(155deg, rgba(20, 21, 29, .97), rgba(11, 12, 17, .98));
}

.artist-releases-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 25px;
    right: 25px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 204, 0, .56), transparent);
    opacity: .68;
}

.artist-releases-section--archive::before {
    background: linear-gradient(90deg, transparent, rgba(143, 124, 255, .58), transparent);
}

.artist-releases-section::after {
    content: "";
    position: absolute;
    right: -72px;
    bottom: -92px;
    width: 230px;
    height: 230px;
    border: 34px solid rgba(255, 204, 0, .025);
    border-radius: 50%;
    pointer-events: none;
}

.artist-releases-section--archive::after {
    border-color: rgba(143, 124, 255, .026);
}

.artist-releases-heading {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 15px;
    align-items: start;
    margin-bottom: 20px;
}

.artist-releases-heading-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border: 1px solid rgba(255, 204, 0, .2);
    border-radius: 17px;
    color: #ffdc50;
    background:
        radial-gradient(circle at 28% 18%, rgba(255, 255, 255, .15), transparent 36%),
        rgba(255, 204, 0, .075);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .045),
        0 13px 30px rgba(0, 0, 0, .16);
}

.artist-releases-heading-icon--archive {
    border-color: rgba(143, 124, 255, .22);
    color: #c8bdff;
    background:
        radial-gradient(circle at 28% 18%, rgba(255, 255, 255, .14), transparent 36%),
        rgba(143, 124, 255, .085);
}

.artist-releases-heading-icon svg {
    width: 25px;
    height: 25px;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.artist-releases-heading-copy {
    display: grid;
    min-width: 0;
    gap: 5px;
}

.artist-releases-kicker {
    color: var(--accent);
    font-size: 9px;
    font-weight: 920;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .135em;
}

.artist-releases-kicker--archive {
    color: #bcb0ff;
}

.artist-releases-title-line {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.artist-releases-title-line h2 {
    min-width: 0;
    font-size: clamp(24px, 2.1vw, 31px);
    line-height: 1.02;
    letter-spacing: -.035em;
}

.artist-releases-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 25px;
    padding: 0 9px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 999px;
    color: #cfd3dd;
    background: rgba(255, 255, 255, .035);
    font-size: 9px;
    font-weight: 820;
    white-space: nowrap;
}

.artist-releases-heading p {
    max-width: 650px;
    margin: 0;
    color: #858c9c;
    font-size: 11px;
    line-height: 1.55;
}

/* Последние релизы */
.latest-release-showcase {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

.latest-release-card {
    position: relative;
    display: grid;
    grid-column: span 2;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .075);
    border-radius: 18px;
    color: inherit;
    background:
        radial-gradient(circle at 100% 100%, rgba(255, 204, 0, .055), transparent 44%),
        rgba(255, 255, 255, .025);
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .02);
    transition:
        transform .22s ease,
        border-color .22s ease,
        background .22s ease,
        box-shadow .22s ease;
}

.latest-release-card.is-featured {
    grid-column: span 3;
    grid-template-columns: minmax(170px, 43%) minmax(0, 1fr);
    min-height: 244px;
}

.latest-release-card:hover,
.latest-release-card:focus-visible {
    transform: translateY(-3px);
    border-color: rgba(255, 204, 0, .25);
    background:
        radial-gradient(circle at 100% 100%, rgba(255, 204, 0, .095), transparent 48%),
        rgba(255, 255, 255, .04);
    box-shadow:
        0 20px 44px rgba(0, 0, 0, .28),
        inset 0 1px 0 rgba(255, 255, 255, .035);
    outline: none;
}

.latest-release-cover {
    position: relative;
    display: block;
    min-width: 0;
    overflow: hidden;
    aspect-ratio: 1;
    background: #181a21;
}

.latest-release-card.is-featured .latest-release-cover {
    height: 100%;
    aspect-ratio: auto;
}

.latest-release-cover img,
.latest-release-fallback {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .42s ease, filter .42s ease;
}

.latest-release-fallback {
    display: grid;
    place-items: center;
    min-height: 180px;
    color: rgba(255, 255, 255, .32);
    background:
        radial-gradient(circle at 35% 25%, rgba(255, 204, 0, .16), transparent 38%),
        #1a1b22;
    font-size: 42px;
}

.latest-release-card:hover .latest-release-cover img,
.latest-release-card:focus-visible .latest-release-cover img {
    transform: scale(1.035);
    filter: saturate(1.08) contrast(1.02);
}

.latest-release-cover-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(7, 8, 11, .03) 38%, rgba(7, 8, 11, .54) 100%),
        linear-gradient(90deg, transparent 55%, rgba(7, 8, 11, .12));
    pointer-events: none;
}

.latest-release-position,
.latest-release-year {
    position: absolute;
    z-index: 2;
    top: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 25px;
    padding: 0 8px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 9px;
    color: #f4f5f8;
    background: rgba(8, 9, 13, .66);
    box-shadow: 0 7px 18px rgba(0, 0, 0, .18);
    backdrop-filter: blur(10px);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .05em;
}

.latest-release-position { left: 11px; }
.latest-release-year { right: 11px; color: #ffdf62; }

.latest-release-body {
    position: relative;
    display: grid;
    align-content: start;
    min-width: 0;
    padding: 15px;
}

.latest-release-card.is-featured .latest-release-body {
    align-content: center;
    padding: 23px;
}

.latest-release-body::after {
    content: "";
    position: absolute;
    right: -31px;
    bottom: -35px;
    width: 88px;
    height: 88px;
    border: 14px solid rgba(255, 204, 0, .032);
    border-radius: 50%;
    pointer-events: none;
}

.latest-release-meta {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.latest-release-kind,
.latest-release-explicit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 0 7px;
    border: 1px solid rgba(255, 204, 0, .18);
    border-radius: 999px;
    color: #f2d963;
    background: rgba(255, 204, 0, .07);
    font-size: 8px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .055em;
}

.latest-release-explicit {
    min-width: 22px;
    padding: 0 6px;
    border-color: rgba(255, 107, 122, .2);
    color: #ffc2ca;
    background: rgba(255, 107, 122, .09);
}

.latest-release-meta time {
    min-width: 0;
    overflow: hidden;
    color: #7f8797;
    font-size: 9px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.latest-release-title {
    position: relative;
    z-index: 1;
    display: -webkit-box;
    min-width: 0;
    margin-top: 10px;
    overflow: hidden;
    color: #f4f5f8;
    font-size: 17px;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -.025em;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.latest-release-card.is-featured .latest-release-title {
    margin-top: 13px;
    font-size: clamp(22px, 2vw, 31px);
    line-height: 1.04;
    letter-spacing: -.045em;
}

.latest-release-footer {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .065);
    color: #89909e;
    font-size: 9px;
    font-weight: 720;
}

.latest-release-footer > span:first-child {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: 6px;
}

.latest-release-footer svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    stroke: #c3a91f;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.latest-release-open {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #c9ad22;
    white-space: nowrap;
}

.latest-release-open i {
    font-style: normal;
    transition: transform .2s ease;
}

.latest-release-card:hover .latest-release-open i,
.latest-release-card:focus-visible .latest-release-open i {
    transform: translate(2px, -2px);
}

/* Полная дискография */
.release-archive-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.release-archive-card {
    position: relative;
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr) 34px;
    gap: 13px;
    align-items: center;
    min-width: 0;
    min-height: 108px;
    padding: 10px 11px 10px 10px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 17px;
    color: inherit;
    background: rgba(255, 255, 255, .024);
    text-decoration: none;
    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

.release-archive-card::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    background: linear-gradient(110deg, rgba(143, 124, 255, .065), transparent 55%);
    transition: opacity .2s ease;
    pointer-events: none;
}

.release-archive-card:hover,
.release-archive-card:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(143, 124, 255, .24);
    background: rgba(255, 255, 255, .038);
    box-shadow: 0 16px 34px rgba(0, 0, 0, .2);
    outline: none;
}

.release-archive-card:hover::before,
.release-archive-card:focus-visible::before {
    opacity: 1;
}

.release-archive-cover {
    position: relative;
    z-index: 1;
    display: block;
    width: 84px;
    height: 84px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 13px;
    background: #181a21;
    box-shadow: 0 9px 22px rgba(0, 0, 0, .2);
}

.release-archive-cover img,
.release-archive-fallback {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .32s ease;
}

.release-archive-fallback {
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, .29);
    background:
        radial-gradient(circle at 35% 25%, rgba(143, 124, 255, .15), transparent 40%),
        #1a1b22;
    font-size: 27px;
}

.release-archive-card:hover .release-archive-cover img,
.release-archive-card:focus-visible .release-archive-cover img {
    transform: scale(1.045);
}

.release-archive-number {
    position: absolute;
    right: 5px;
    bottom: 5px;
    display: inline-grid;
    place-items: center;
    min-width: 25px;
    height: 20px;
    padding: 0 5px;
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 7px;
    color: #e3e0ff;
    background: rgba(9, 10, 14, .68);
    backdrop-filter: blur(8px);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .04em;
}

.release-archive-copy {
    position: relative;
    z-index: 1;
    display: grid;
    min-width: 0;
    align-content: center;
}

.release-archive-badges {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

.release-archive-kind,
.release-archive-explicit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 20px;
    padding: 0 7px;
    border: 1px solid rgba(143, 124, 255, .18);
    border-radius: 999px;
    color: #c9c0ff;
    background: rgba(143, 124, 255, .065);
    font-size: 7px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.release-archive-explicit {
    min-width: 20px;
    padding: 0 5px;
    border-color: rgba(255, 107, 122, .19);
    color: #ffc0c8;
    background: rgba(255, 107, 122, .075);
}

.release-archive-copy > strong {
    min-width: 0;
    margin-top: 7px;
    overflow: hidden;
    color: #eef0f5;
    font-size: 14px;
    font-weight: 850;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.release-archive-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    margin-top: 7px;
    color: #7e8594;
    font-size: 8px;
    font-weight: 680;
    white-space: nowrap;
}

.release-archive-meta time {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.release-archive-meta i {
    width: 3px;
    height: 3px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: rgba(255, 255, 255, .21);
}

.release-archive-arrow {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, .075);
    border-radius: 11px;
    color: #858b99;
    background: rgba(255, 255, 255, .025);
    font-size: 13px;
    transition:
        color .2s ease,
        border-color .2s ease,
        background .2s ease,
        transform .2s ease;
}

.release-archive-card:hover .release-archive-arrow,
.release-archive-card:focus-visible .release-archive-arrow {
    transform: translate(2px, -2px);
    border-color: rgba(143, 124, 255, .24);
    color: #c8beff;
    background: rgba(143, 124, 255, .075);
}

.artist-releases-load-row {
    position: relative;
    z-index: 2;
    margin-top: 17px;
}

.artist-releases-load-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 246px;
    min-height: 50px;
    border-color: rgba(143, 124, 255, .24);
    color: #e6e2ff;
    background:
        radial-gradient(circle at 25% 0, rgba(255, 255, 255, .08), transparent 35%),
        rgba(143, 124, 255, .095);
    box-shadow: 0 13px 32px rgba(0, 0, 0, .18);
}

.artist-releases-load-button:hover {
    border-color: rgba(143, 124, 255, .38);
    color: #fff;
    background:
        radial-gradient(circle at 25% 0, rgba(255, 255, 255, .1), transparent 35%),
        rgba(143, 124, 255, .14);
    box-shadow: 0 17px 38px rgba(0, 0, 0, .24);
    filter: none;
}

.artist-releases-load-button i {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 8px;
    font-size: 12px;
    font-style: normal;
}

.artist-releases-empty {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 13px;
    align-items: center;
    padding: 16px;
    border: 1px dashed rgba(255, 255, 255, .1);
    border-radius: 17px;
    background: rgba(255, 255, 255, .018);
}

.artist-releases-empty > span {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 15px;
    color: #b9adff;
    background: rgba(143, 124, 255, .08);
    font-size: 23px;
}

.artist-releases-empty div {
    display: grid;
    gap: 4px;
}

.artist-releases-empty strong {
    color: #eef0f5;
    font-size: 13px;
}

.artist-releases-empty p {
    margin: 0;
    color: #7f8695;
    font-size: 10px;
    line-height: 1.45;
}

.artist-releases-hint {
    position: relative;
    z-index: 2;
    margin-top: 15px;
}

@media (max-width: 1120px) {
    .latest-release-showcase {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .latest-release-card,
    .latest-release-card.is-featured {
        grid-column: span 1;
    }

    .latest-release-card.is-featured {
        grid-template-columns: minmax(150px, 42%) minmax(0, 1fr);
    }
}

@media (max-width: 920px) {
    .release-archive-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .artist-releases-section {
        padding: 18px;
        border-radius: 22px;
    }

    .artist-releases-section::before {
        left: 18px;
        right: 18px;
    }

    .artist-releases-section::after {
        right: -86px;
        bottom: -110px;
    }

    .artist-releases-heading {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 12px;
        margin-bottom: 16px;
    }

    .artist-releases-heading-icon {
        width: 44px;
        height: 44px;
        border-radius: 14px;
    }

    .artist-releases-heading-icon svg {
        width: 21px;
        height: 21px;
    }

    .artist-releases-kicker {
        font-size: 8px;
    }

    .artist-releases-title-line {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .artist-releases-title-line h2 {
        font-size: 24px;
    }

    .artist-releases-heading p {
        font-size: 9px;
        line-height: 1.45;
    }

    .latest-release-showcase {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .latest-release-card.is-featured {
        display: grid;
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .latest-release-card.is-featured .latest-release-cover {
        height: auto;
        aspect-ratio: 1;
    }

    .latest-release-card.is-featured .latest-release-body {
        align-content: start;
        padding: 13px;
    }

    .latest-release-card.is-featured .latest-release-title {
        margin-top: 9px;
        font-size: 16px;
        line-height: 1.08;
    }

    .latest-release-body {
        padding: 12px;
    }

    .latest-release-title {
        font-size: 14px;
    }

    .latest-release-meta time {
        width: 100%;
    }

    .latest-release-footer {
        align-items: flex-start;
        flex-direction: column;
        margin-top: 12px;
        padding-top: 10px;
    }

    .latest-release-open {
        display: none;
    }

    .release-archive-card {
        grid-template-columns: 72px minmax(0, 1fr) 31px;
        min-height: 94px;
        gap: 11px;
        padding: 9px 9px 9px 8px;
        border-radius: 15px;
    }

    .release-archive-cover {
        width: 72px;
        height: 72px;
        border-radius: 12px;
    }

    .release-archive-copy > strong {
        font-size: 13px;
    }

    .release-archive-arrow {
        width: 31px;
        height: 31px;
        border-radius: 10px;
    }

    .artist-releases-load-button {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 430px) {
    .artist-releases-section {
        padding: 15px;
        border-radius: 20px;
    }

    .artist-releases-section::before {
        left: 15px;
        right: 15px;
    }

    .artist-releases-heading {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 10px;
    }

    .artist-releases-heading-icon {
        width: 40px;
        height: 40px;
        border-radius: 13px;
    }

    .artist-releases-title-line h2 {
        font-size: 21px;
    }

    .artist-releases-heading p {
        font-size: 8.5px;
    }

    .latest-release-showcase {
        grid-template-columns: 1fr;
    }

    .latest-release-card,
    .latest-release-card.is-featured {
        grid-column: span 1;
        grid-template-columns: 112px minmax(0, 1fr);
        min-height: 136px;
    }

    .latest-release-cover,
    .latest-release-card.is-featured .latest-release-cover {
        height: 100%;
        min-height: 136px;
        aspect-ratio: auto;
    }

    .latest-release-card .latest-release-body,
    .latest-release-card.is-featured .latest-release-body {
        align-content: center;
        padding: 13px;
    }

    .latest-release-card .latest-release-title,
    .latest-release-card.is-featured .latest-release-title {
        font-size: 15px;
        -webkit-line-clamp: 3;
    }

    .latest-release-year {
        display: none;
    }

    .latest-release-position {
        top: 8px;
        left: 8px;
    }

    .latest-release-kind {
        font-size: 7px;
    }

    .latest-release-meta time {
        font-size: 8px;
    }

    .latest-release-footer {
        gap: 5px;
        font-size: 8px;
    }

    .release-archive-card {
        grid-template-columns: 64px minmax(0, 1fr) 29px;
        min-height: 84px;
        gap: 9px;
        padding: 8px;
    }

    .release-archive-cover {
        width: 64px;
        height: 64px;
        border-radius: 11px;
    }

    .release-archive-kind {
        min-height: 18px;
        padding-inline: 6px;
        font-size: 6.5px;
    }

    .release-archive-copy > strong {
        margin-top: 5px;
        font-size: 12px;
    }

    .release-archive-meta {
        gap: 5px;
        margin-top: 5px;
        font-size: 7px;
    }

    .release-archive-arrow {
        width: 29px;
        height: 29px;
        font-size: 11px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .latest-release-card,
    .latest-release-cover img,
    .latest-release-open i,
    .release-archive-card,
    .release-archive-cover img,
    .release-archive-arrow {
        transition: none;
    }
}


/* Компактная сетка свежих релизов: два главных и шесть быстрых карточек */
@media (min-width: 681px) {
    .latest-release-card:not(.is-featured) {
        grid-template-columns: 108px minmax(0, 1fr);
        min-height: 128px;
    }

    .latest-release-card:not(.is-featured) .latest-release-cover {
        height: 100%;
        min-height: 128px;
        aspect-ratio: auto;
    }

    .latest-release-card:not(.is-featured) .latest-release-fallback {
        min-height: 128px;
        font-size: 29px;
    }

    .latest-release-card:not(.is-featured) .latest-release-body {
        align-content: center;
        padding: 13px;
    }

    .latest-release-card:not(.is-featured) .latest-release-title {
        margin-top: 8px;
        font-size: 14px;
    }

    .latest-release-card:not(.is-featured) .latest-release-footer {
        margin-top: 10px;
        padding-top: 9px;
        font-size: 8px;
    }

    .latest-release-card:not(.is-featured) .latest-release-open {
        font-size: 0;
    }

    .latest-release-card:not(.is-featured) .latest-release-open i {
        font-size: 11px;
    }
}

@media (max-width: 680px) {
    .latest-release-showcase {
        grid-template-columns: 1fr;
    }

    .latest-release-card,
    .latest-release-card.is-featured {
        grid-column: span 1;
        grid-template-columns: 118px minmax(0, 1fr);
        min-height: 146px;
    }

    .latest-release-cover,
    .latest-release-card.is-featured .latest-release-cover {
        height: 100%;
        min-height: 146px;
        aspect-ratio: auto;
    }

    .latest-release-card .latest-release-body,
    .latest-release-card.is-featured .latest-release-body {
        align-content: center;
        padding: 14px;
    }

    .latest-release-card .latest-release-title,
    .latest-release-card.is-featured .latest-release-title {
        margin-top: 9px;
        font-size: 16px;
        line-height: 1.08;
    }

    .latest-release-footer {
        align-items: center;
        flex-direction: row;
    }

    .latest-release-meta time {
        width: auto;
    }
}

@media (max-width: 430px) {
    .latest-release-card,
    .latest-release-card.is-featured {
        grid-template-columns: 112px minmax(0, 1fr);
        min-height: 136px;
    }

    .latest-release-cover,
    .latest-release-card.is-featured .latest-release-cover {
        min-height: 136px;
    }
}

/* Популярные треки: компактный музыкальный чарт */
.popular-tracks-section {
    position: relative;
    overflow: hidden;
    padding: 24px;
    border-color: rgba(255, 255, 255, .085);
    background:
        radial-gradient(circle at 92% 7%, rgba(255, 204, 0, .065), transparent 25rem),
        linear-gradient(145deg, rgba(21, 23, 31, .95), rgba(12, 14, 20, .96));
}

.popular-tracks-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 52px;
    right: 52px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 204, 0, .58), transparent);
    opacity: .72;
}

.popular-tracks-section::after {
    content: "";
    position: absolute;
    right: -74px;
    bottom: -104px;
    width: 235px;
    height: 235px;
    border: 34px solid rgba(255, 204, 0, .022);
    border-radius: 50%;
    pointer-events: none;
}

.popular-tracks-heading {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 15px;
    align-items: start;
    margin-bottom: 20px;
}

.popular-tracks-heading-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border: 1px solid rgba(255, 204, 0, .2);
    border-radius: 17px;
    color: #ffdc50;
    background:
        radial-gradient(circle at 28% 18%, rgba(255, 255, 255, .15), transparent 36%),
        rgba(255, 204, 0, .075);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .045),
        0 13px 30px rgba(0, 0, 0, .16);
}

.popular-tracks-heading-icon svg {
    width: 26px;
    height: 26px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
}

.popular-tracks-heading-copy {
    display: grid;
    min-width: 0;
    gap: 5px;
}

.popular-tracks-kicker {
    color: var(--accent);
    font-size: 9px;
    font-weight: 920;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .135em;
}

.popular-tracks-title-line {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.popular-tracks-title-line h2 {
    min-width: 0;
    font-size: clamp(24px, 2.1vw, 31px);
    line-height: 1.02;
    letter-spacing: -.035em;
}

.popular-tracks-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 25px;
    padding: 0 9px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 999px;
    color: #cfd3dd;
    background: rgba(255, 255, 255, .035);
    font-size: 9px;
    font-weight: 820;
    white-space: nowrap;
}

.popular-tracks-heading p {
    max-width: 680px;
    margin: 0;
    color: #858c9c;
    font-size: 11px;
    line-height: 1.55;
}

.track-list.popular-tracks-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.popular-track-card.track {
    position: relative;
    display: grid;
    grid-template-columns: 28px 58px minmax(0, 1fr) 36px;
    gap: 10px;
    align-items: center;
    min-width: 0;
    min-height: 80px;
    padding: 10px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .072);
    border-radius: 17px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .037), rgba(255, 255, 255, .016));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .018);
    transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.popular-track-card.track::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 2px;
    background: linear-gradient(180deg, transparent, rgba(255, 204, 0, .5), transparent);
    opacity: 0;
    transition: opacity .18s ease;
}

.popular-track-card.track:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 204, 0, .16);
    background:
        radial-gradient(circle at 12% 0%, rgba(255, 204, 0, .055), transparent 48%),
        linear-gradient(145deg, rgba(255, 255, 255, .052), rgba(255, 255, 255, .022));
    box-shadow: 0 14px 30px rgba(0, 0, 0, .15);
}

.popular-track-card.track:hover::before,
.popular-track-card.track.is-playing::before {
    opacity: 1;
}

.popular-track-card.track.is-top-track {
    border-color: rgba(255, 204, 0, .105);
}

.popular-track-card.track.is-playing {
    border-color: rgba(255, 204, 0, .24);
    background:
        radial-gradient(circle at 12% 0%, rgba(255, 204, 0, .085), transparent 50%),
        rgba(255, 204, 0, .04);
    box-shadow:
        inset 0 0 0 1px rgba(255, 204, 0, .045),
        0 14px 34px rgba(0, 0, 0, .16);
}

.track-rank {
    display: grid;
    place-items: center;
    width: 28px;
    color: #687080;
    font-size: 10px;
    font-weight: 920;
    letter-spacing: .055em;
}

.is-top-track .track-rank {
    color: #e7c94b;
}

.popular-track-card .track-play {
    position: relative;
    width: 58px;
    height: 58px;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 14px;
    color: #fff;
    background: #171920;
    box-shadow: none;
    isolation: isolate;
}

.popular-track-card .track-play img,
.popular-track-card .track-cover-fallback,
.popular-track-card .track-play-shade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.popular-track-card .track-play img {
    z-index: 0;
    display: block;
    object-fit: cover;
    transition: transform .22s ease, filter .22s ease;
}

.popular-track-card .track-cover-fallback {
    z-index: 0;
    display: grid;
    place-items: center;
    color: #ffda43;
    background:
        radial-gradient(circle at 25% 15%, rgba(255, 204, 0, .18), transparent 46%),
        #15171f;
    font-size: 23px;
}

.popular-track-card .track-play-shade {
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(4, 5, 8, .12), rgba(4, 5, 8, .58)),
        radial-gradient(circle at center, transparent 8%, rgba(0, 0, 0, .12) 78%);
    transition: background .18s ease;
}

.popular-track-card .track-play-symbol {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 29px;
    height: 29px;
    margin: auto;
    padding-left: 2px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 10px;
    color: #171717;
    background: var(--accent);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .24);
    font-size: 11px;
    transition: transform .18s ease, filter .18s ease;
}

.popular-track-card .track-play:hover {
    transform: none;
    filter: none;
    box-shadow: none;
}

.popular-track-card .track-play:hover img {
    transform: scale(1.06);
    filter: saturate(1.08);
}

.popular-track-card .track-play:hover .track-play-symbol {
    transform: scale(1.07);
    filter: brightness(1.05);
}

.popular-track-card .track-play:disabled {
    cursor: default;
    opacity: .62;
}

.popular-track-card .track-play:disabled .track-play-symbol {
    display: none;
}

.popular-track-card .track-info {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.popular-track-card .track-title-link {
    min-width: 0;
}

.popular-track-card .track-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    color: #f4f5f8;
    font-size: 13px;
    font-weight: 840;
    letter-spacing: -.018em;
}

.popular-track-card .track-title-link:hover .track-title {
    color: #ffe16c;
}

.popular-track-card .track-explicit {
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 5px;
    font-size: 8px;
    line-height: 17px;
}

.popular-track-card .track-subtitle {
    min-width: 0;
    overflow: hidden;
    color: #9da4b3;
    font-size: 10px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.track-meta-line {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    margin-top: 2px;
}

.track-album {
    min-width: 0;
    overflow: hidden;
    color: #687080;
    font-size: 8px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.popular-track-card .track-duration {
    flex: 0 0 auto;
    min-height: 18px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, .075);
    border-radius: 999px;
    color: #9aa1b0;
    background: rgba(255, 255, 255, .025);
    font-size: 8px;
    font-weight: 780;
}

.popular-track-card .track-open {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    color: #9299a8;
    background: rgba(255, 255, 255, .025);
    font-size: 13px;
}

.popular-track-card .track-open:hover {
    color: #171717;
    border-color: var(--accent);
    background: var(--accent);
}

.popular-tracks-grid .music-player {
    grid-column: 1 / -1;
    margin: 2px 0 6px;
    border-radius: 17px;
}

.popular-tracks-empty {
    position: relative;
    z-index: 2;
}

@media (max-width: 1120px) {
    .track-list.popular-tracks-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .popular-tracks-section {
        padding: 18px;
    }

    .popular-tracks-section::before {
        left: 24px;
        right: 24px;
    }

    .popular-tracks-heading {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 11px;
        margin-bottom: 15px;
    }

    .popular-tracks-heading-icon {
        width: 44px;
        height: 44px;
        border-radius: 14px;
    }

    .popular-tracks-heading-icon svg {
        width: 22px;
        height: 22px;
    }

    .popular-tracks-title-line {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }

    .popular-tracks-title-line h2 {
        font-size: 22px;
    }

    .popular-tracks-heading p {
        font-size: 9px;
    }

    .popular-track-card.track {
        grid-template-columns: 23px 52px minmax(0, 1fr) 32px;
        gap: 8px;
        min-height: 72px;
        padding: 8px;
        border-radius: 15px;
    }

    .track-rank {
        width: 23px;
        font-size: 8px;
    }

    .popular-track-card .track-play {
        width: 52px;
        height: 52px;
        border-radius: 12px;
    }

    .popular-track-card .track-title {
        font-size: 12px;
    }

    .popular-track-card .track-subtitle {
        font-size: 9px;
    }

    .track-album {
        display: none;
    }

    .popular-track-card .track-open {
        width: 32px;
        height: 32px;
        border-radius: 10px;
    }
}

@media (max-width: 430px) {
    .popular-tracks-section {
        padding: 15px;
    }

    .popular-track-card.track {
        grid-template-columns: 20px 48px minmax(0, 1fr) 30px;
        gap: 7px;
        padding: 7px;
    }

    .popular-track-card .track-play {
        width: 48px;
        height: 48px;
    }

    .popular-track-card .track-play-symbol {
        width: 25px;
        height: 25px;
        border-radius: 8px;
        font-size: 9px;
    }

    .popular-track-card .track-open {
        width: 30px;
        height: 30px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .popular-track-card.track,
    .popular-track-card .track-play img,
    .popular-track-card .track-play-symbol {
        transition: none;
    }
}