:root {
    --activity-blue: #0052d9;
    --activity-green: #00a870;
    --activity-purple: #7a5af8;
    --activity-orange: #ed7b2f;
}

.dashboard-page .page-heading {
    margin-bottom: 16px;
}
.dashboard-filter {
    display: flex;
    align-items: center;
    gap: 8px;
}
.dashboard-filter select {
    height: 32px;
    padding: 0 28px 0 9px;
    color: var(--text-secondary);
    border: 1px solid var(--line);
    border-radius: 5px;
    background: var(--surface);
    cursor: pointer;
}
.dashboard-note {
    color: var(--text-muted);
    font-size: 12px;
}
.dashboard-metrics {
    margin-bottom: 16px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}
.dashboard-metric {
    min-height: 92px;
    padding: 16px 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    gap: 13px;
}
.dashboard-metric > i {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-size: 16px;
}
.dashboard-metric:nth-child(1) > i {
    color: var(--activity-blue);
    background: var(--brand-soft);
}
.dashboard-metric:nth-child(2) > i {
    color: var(--activity-green);
    background: var(--success-soft);
}
.dashboard-metric:nth-child(3) > i {
    color: var(--activity-purple);
    background: var(--purple-soft);
}
.dashboard-metric:nth-child(4) > i {
    color: var(--activity-orange);
    background: var(--warning-soft);
}
.dashboard-metric span,
.dashboard-metric small {
    display: block;
    color: var(--text-muted);
    font-size: 12px;
}
.dashboard-metric strong {
    display: block;
    margin: 3px 0;
    color: var(--text);
    font-size: 24px;
    line-height: 27px;
}
.dashboard-panels {
    display: grid;
    grid-template-columns: minmax(560px, 1.55fr) minmax(350px, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}
.dashboard-panels.bottom {
    grid-template-columns: minmax(560px, 1.45fr) minmax(360px, 1fr);
}
.dashboard-panels .panel {
    min-width: 0;
}
.chart-body {
    height: 235px;
    padding: 16px 20px;
}
.chart-body svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}
.chart-grid-line {
    stroke: #edf0f4;
    stroke-width: 1;
}
.chart-axis-text {
    fill: #9aa1ad;
    font-size: 12px;
}
.chart-line-primary {
    fill: none;
    stroke: var(--activity-blue);
    stroke-width: 3;
}
.chart-dot {
    fill: #fff;
    stroke: var(--activity-blue);
    stroke-width: 2;
}
.chart-legend {
    display: flex;
    align-items: center;
    gap: 18px;
    color: var(--text-muted);
    font-size: 12px;
}
.chart-legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.chart-legend i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--activity-blue);
}
.chart-legend i.green {
    background: var(--activity-green);
}
.chart-panel .panel-header {
    align-items: center;
}
.donut-wrap {
    height: 235px;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 26px;
}
.donut {
    width: 148px;
    height: 148px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: conic-gradient(
        var(--activity-blue) 0 9.4%,
        var(--activity-purple) 9.4% 39.1%,
        var(--activity-green) 39.1% 81.3%,
        var(--activity-orange) 81.3% 100%
    );
    display: grid;
    place-items: center;
}
.donut::after {
    width: 91px;
    height: 91px;
    border-radius: 50%;
    background: var(--surface);
    content: '';
}
.donut-legend {
    min-width: 135px;
    display: grid;
    gap: 11px;
}
.donut-legend p {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    color: var(--text-secondary);
    font-size: 12px;
}
.donut-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.donut-legend i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--activity-blue);
}
.donut-legend i.purple {
    background: var(--activity-purple);
}
.donut-legend i.green {
    background: var(--activity-green);
}
.donut-legend i.orange {
    background: var(--activity-orange);
}
.donut-legend strong {
    color: var(--text);
    font-weight: 500;
}
.ranking-list {
    padding: 8px 20px 14px;
}
.ranking-item {
    min-height: 39px;
    display: grid;
    grid-template-columns: 22px 88px 1fr 52px;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--line-light);
}
.ranking-item:last-child {
    border-bottom: 0;
}
.ranking-number {
    color: var(--text-muted);
    font-size: 12px;
    text-align: center;
}
.ranking-item:nth-child(-n + 3) .ranking-number {
    color: var(--activity-blue);
    font-weight: 600;
}
.ranking-name {
    color: var(--text-secondary);
    font-size: 12px;
}
.ranking-track {
    height: 6px;
    overflow: hidden;
    background: #edf0f4;
    border-radius: 99px;
}
.ranking-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--activity-blue);
}
.ranking-value {
    color: var(--text-muted);
    font-size: 12px;
    text-align: right;
}
.activity-table-wrap {
    overflow-x: auto;
}
.activity-table {
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
}
.activity-table th {
    height: 36px;
    padding: 0 20px;
    color: var(--text-muted);
    background: #fafbfc;
    border-bottom: 1px solid var(--line-light);
    text-align: left;
    font-size: 12px;
    font-weight: 400;
}
.activity-table td {
    height: 45px;
    padding: 0 20px;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--line-light);
    font-size: 12px;
}
.activity-table tbody tr:last-child td {
    border-bottom: 0;
}
.activity-table tbody tr:hover {
    background: #fafcff;
}
.user-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text);
}
.user-avatar {
    width: 24px;
    height: 24px;
    color: #fff;
    border-radius: 50%;
    background: #6d9ce8;
    display: grid;
    place-items: center;
    font-size: 12px;
}
.activity-table td:last-child {
    color: var(--text-muted);
}
.toast {
    z-index: 30;
}
@media (max-width: 1300px) {
    .dashboard-panels,
    .dashboard-panels.bottom {
        grid-template-columns: minmax(520px, 1.45fr) minmax(320px, 1fr);
    }
    .donut-wrap {
        gap: 14px;
        padding-right: 14px;
        padding-left: 14px;
    }
}