body {
    font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.glass {
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(16px);
}

table th,
table td {
    vertical-align: top;
}

[data-chart="bar"] {
    position: relative;
    height: 20px;
    border-radius: 9999px;
    background: #e2e8f0;
    overflow: hidden;
}

[data-chart="bar"]::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--chart-width, 0%);
    border-radius: 9999px;
    background: linear-gradient(90deg, #17315a, #2d5ea9);
}

[data-chart="bar"]::after {
    content: attr(data-value) "%";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #081225;
    font-size: 12px;
    font-weight: 700;
}