body {
    font-family: "Inter", sans-serif;
    line-height: 1.5;
    letter-spacing: 0.01em;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.spinner {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.progress-bar {
    transition: width 0.25s ease-in-out;
}

.metric-card-title {
    letter-spacing: 0.08em;
}

.metric-value {
    line-height: 1.15;
}

.trend-chart {
    height: 64px;
    border: 1px solid #e5e7eb;
    border-radius: 0.875rem;
    padding: 0.625rem;
    display: flex;
    align-items: flex-end;
    gap: 4px;
    background: linear-gradient(to top, #f8fafc 0%, #ffffff 100%);
}

.trend-bar {
    flex: 1;
    min-width: 5px;
    border-radius: 6px;
    background-color: #5a95df;
    transition: height 0.2s ease-out, background-color 0.2s ease-out;
}

.trend-bar.high {
    background-color: #f07a24;
}

#copy-report-btn {
    min-height: 44px;
}

#copy-report-feedback {
    min-height: 1.25rem;
}

@media (max-width: 768px) {
    #status-title {
        line-height: 0.95;
    }

    #copy-report-btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .spinner {
        animation-duration: 1.6s;
    }

    .trend-bar {
        transition: none;
    }
}