/* ================================
   RADIAL GAUGE (CORE UI)
================================ */

.ff-radial {
    --size: 42px;
    --thickness: 5px;
    --value: 0;
    --color: #28a745;

    width: var(--size);
    height: var(--size);
    border-radius: 50%;

    background:
        conic-gradient(
            var(--color) calc(var(--value) * 1%),
            #e9ecef 0
        );

    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;
}

.ff-radial::before {
    content: "";
    position: absolute;
    width: calc(var(--size) - var(--thickness) * 2);
    height: calc(var(--size) - var(--thickness) * 2);
    background: #fff;
    border-radius: 50%;
}

.ff-radial span {
    position: relative;
    z-index: 1;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    transform: translateY(0.5px);
    color: var(--color);
}