.av-activity-card {
            background: var(--av-color-white);
            border: 1px solid #e6e8eb;
            border-radius: 12px;
            padding: 20px;
            margin: 8px 0 20px;
        }

        .av-activity-card__heading {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 16px;
            margin-bottom: 16px;
        }

        .av-activity-card__heading h3 {
            font-size: 1rem;
            font-weight: 700;
            margin: 0;
            color: #202124;
        }

        .av-activity-card__heading p {
            margin: 3px 0 0;
            color: #6c757d;
            font-size: .84rem;
        }

        .av-activity-scroll {
            overflow-x: auto;
            padding-bottom: 4px;
            scrollbar-width: thin;
        }

        .av-activity-chart {
            min-width: 830px;
            width: max-content;
            margin-left: auto;
            margin-right: auto;
        }

        .av-activity-months {
            display: grid;
            grid-template-rows: 18px;
            gap: 3px;
            margin-left: 34px;
            margin-bottom: 5px;
            color: #555b61;
            font-size: .72rem;
            line-height: 18px;
            height: 18px;
        }

        .av-activity-month {
            grid-row: 1;
            white-space: nowrap;
            overflow: visible;
        }

        .av-activity-months--53 { grid-template-columns: repeat(53, 12px); }
        .av-activity-months--54 { grid-template-columns: repeat(54, 12px); }

        .av-activity-month--week-1 { grid-column: 1 / span 4; }
        .av-activity-month--week-2 { grid-column: 2 / span 4; }
        .av-activity-month--week-3 { grid-column: 3 / span 4; }
        .av-activity-month--week-4 { grid-column: 4 / span 4; }
        .av-activity-month--week-5 { grid-column: 5 / span 4; }
        .av-activity-month--week-6 { grid-column: 6 / span 4; }
        .av-activity-month--week-7 { grid-column: 7 / span 4; }
        .av-activity-month--week-8 { grid-column: 8 / span 4; }
        .av-activity-month--week-9 { grid-column: 9 / span 4; }
        .av-activity-month--week-10 { grid-column: 10 / span 4; }
        .av-activity-month--week-11 { grid-column: 11 / span 4; }
        .av-activity-month--week-12 { grid-column: 12 / span 4; }
        .av-activity-month--week-13 { grid-column: 13 / span 4; }
        .av-activity-month--week-14 { grid-column: 14 / span 4; }
        .av-activity-month--week-15 { grid-column: 15 / span 4; }
        .av-activity-month--week-16 { grid-column: 16 / span 4; }
        .av-activity-month--week-17 { grid-column: 17 / span 4; }
        .av-activity-month--week-18 { grid-column: 18 / span 4; }
        .av-activity-month--week-19 { grid-column: 19 / span 4; }
        .av-activity-month--week-20 { grid-column: 20 / span 4; }
        .av-activity-month--week-21 { grid-column: 21 / span 4; }
        .av-activity-month--week-22 { grid-column: 22 / span 4; }
        .av-activity-month--week-23 { grid-column: 23 / span 4; }
        .av-activity-month--week-24 { grid-column: 24 / span 4; }
        .av-activity-month--week-25 { grid-column: 25 / span 4; }
        .av-activity-month--week-26 { grid-column: 26 / span 4; }
        .av-activity-month--week-27 { grid-column: 27 / span 4; }
        .av-activity-month--week-28 { grid-column: 28 / span 4; }
        .av-activity-month--week-29 { grid-column: 29 / span 4; }
        .av-activity-month--week-30 { grid-column: 30 / span 4; }
        .av-activity-month--week-31 { grid-column: 31 / span 4; }
        .av-activity-month--week-32 { grid-column: 32 / span 4; }
        .av-activity-month--week-33 { grid-column: 33 / span 4; }
        .av-activity-month--week-34 { grid-column: 34 / span 4; }
        .av-activity-month--week-35 { grid-column: 35 / span 4; }
        .av-activity-month--week-36 { grid-column: 36 / span 4; }
        .av-activity-month--week-37 { grid-column: 37 / span 4; }
        .av-activity-month--week-38 { grid-column: 38 / span 4; }
        .av-activity-month--week-39 { grid-column: 39 / span 4; }
        .av-activity-month--week-40 { grid-column: 40 / span 4; }
        .av-activity-month--week-41 { grid-column: 41 / span 4; }
        .av-activity-month--week-42 { grid-column: 42 / span 4; }
        .av-activity-month--week-43 { grid-column: 43 / span 4; }
        .av-activity-month--week-44 { grid-column: 44 / span 4; }
        .av-activity-month--week-45 { grid-column: 45 / span 4; }
        .av-activity-month--week-46 { grid-column: 46 / span 4; }
        .av-activity-month--week-47 { grid-column: 47 / span 4; }
        .av-activity-month--week-48 { grid-column: 48 / span 4; }
        .av-activity-month--week-49 { grid-column: 49 / span 4; }
        .av-activity-month--week-50 { grid-column: 50 / span 4; }
        .av-activity-month--week-51 { grid-column: 51 / span 4; }
        .av-activity-month--week-52 { grid-column: 52 / span 4; }
        .av-activity-month--week-53 { grid-column: 53 / span 4; }
        .av-activity-month--week-54 { grid-column: 54 / span 4; }

        .av-activity-month:first-child {
            transform: translateX(-18px);
        }

        .av-activity-month:nth-child(2) {
            transform: translateX(12px);
        }

        .av-activity-body {
            display: flex;
            align-items: flex-start;
        }

        .av-activity-days-labels {
            display: grid;
            grid-template-rows: repeat(7, 12px);
            gap: 3px;
            width: 31px;
            flex: 0 0 31px;
            margin-right: 3px;
            color: #7b8086;
            font-size: .65rem;
            line-height: 12px;
            text-align: right;
            padding-right: 4px;
        }

        .av-activity-days-labels span:nth-child(1) { grid-row: 2; }
        .av-activity-days-labels span:nth-child(2) { grid-row: 4; }
        .av-activity-days-labels span:nth-child(3) { grid-row: 6; }

        .av-activity-grid {
            display: grid;
            grid-template-rows: repeat(7, 12px);
            grid-auto-flow: column;
            grid-auto-columns: 12px;
            gap: 3px;
        }

        .av-activity-cell {
            width: 12px;
            height: 12px;
            border-radius: 3px;
            background: #edf0f2;
            border: 1px solid rgba(27, 31, 36, .04);
        }

        .av-activity-cell--outside { visibility: hidden; }
        .av-activity-cell--1 { background: #fde2e2; }
        .av-activity-cell--2 { background: #f5aaaa; }
        .av-activity-cell--3 { background: #e84b4b; }
        .av-activity-cell--4 { background: #b30000; }

        .av-activity-cell:not(.av-activity-cell--outside):hover {
            outline: 2px solid rgba(179, 0, 0, .2);
            outline-offset: 1px;
        }

        .av-activity-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            margin-top: 14px;
            color: #6c757d;
            font-size: .75rem;
        }

        .av-activity-summary {
            display: flex;
            flex-wrap: wrap;
            gap: 5px 12px;
        }

        .av-activity-summary span { white-space: nowrap; }

        .av-activity-legend {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            white-space: nowrap;
        }

        .av-activity-legend i {
            display: inline-block;
            width: 11px;
            height: 11px;
            border-radius: 3px;
            background: #edf0f2;
        }

        .av-activity-legend i:nth-of-type(2) { background: #fde2e2; }
        .av-activity-legend i:nth-of-type(3) { background: #f5aaaa; }
        .av-activity-legend i:nth-of-type(4) { background: #e84b4b; }
        .av-activity-legend i:nth-of-type(5) { background: #b30000; }

        @media (max-width: 767.98px) {
            .av-activity-card { padding: 16px; }
            .av-activity-card__heading { display: block; }
            .av-activity-footer { align-items: flex-start; flex-direction: column; }
            .av-activity-chart { margin-left: 0; margin-right: 0; }
        }