:root {
    --blue-500: #3b82f6;
    --blue-200: #bfdbfe;
    --amber-400: #fbbf24;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.font-geist-mono {
    font-family: 'SF Mono', SFMono-Regular, ui-monospace, 'Liberation Mono', Menlo, Courier, monospace;
    letter-spacing: -0.02em;
}

table {
    border-collapse: separate;
    border-spacing: 0;
}

th, td {
    white-space: normal;
    word-wrap: break-word;
    vertical-align: top;
}

@media (max-width: 768px) {
    th, td {
        font-size: 12px;
        padding: 8px 4px;
    }
}

.progress-circle {
    transform: rotate(-90deg);
}

.progress-circle__bg {
    fill: none;
    stroke: #f3f4f6;
    stroke-width: 8;
}

.progress-circle__progress {
    fill: none;
    stroke: var(--blue-500);
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 314.16;
    transition: stroke-dashoffset 1s ease-in-out;
}

.progress-circle__text {
    font-size: 2.5rem;
    font-weight: 700;
    transform: rotate(90deg);
    text-anchor: middle;
    dominant-baseline: middle;
    fill: #111827;
}

.progress-circle__subtext {
    font-size: 0.875rem;
    font-weight: 400;
    transform: rotate(90deg) translateY(22px);
    text-anchor: middle;
    dominant-baseline: middle;
    fill: #6b7280;
}