.iv-group {
    display: inline-flex;
    align-items: center;
    padding: 0.3125rem 0.875rem;
    margin: 1.25rem 0 0.5rem;
    background: var(--app-green);
    border-radius: 0.375rem;
    color: var(--white);
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.iv-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 1.25rem;
}

.iv-tab {
    padding: 0.3125rem 0.875rem;
    background: var(--white);
    border: 0;
    border-radius: 0.375rem;
    color: var(--small-text);
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    cursor: pointer;
}

.iv-tab.is-active {
    background: var(--app-green);
    color: var(--white);
}

.iv-panel.iv-hidden {
    display: none;
}

.iv-note {
    margin: 0 0 1rem;
    color: var(--black);
    font-size: 1rem;
}

.iv-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9375rem;
}

.iv-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 6.875rem;
    height: 8.75rem;
    background: linear-gradient(90deg, #FFFFFF 0%, #F8FBFF 100%);
    border-radius: 0.25rem;
    box-shadow: 0 0.125rem 0.5rem rgba(210, 219, 226, 0.4);
}

.iv-card.iv-timed {
    width: 8.75rem;
    border-radius: 50%;
}

.iv-pie {
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: 50%;
    opacity: 0.8;
    pointer-events: none;
}

.iv-count {
    position: absolute;
    top: 0.375rem;
    left: 0.625rem;
    z-index: 3;
    color: var(--black);
    font-weight: 700;
    font-size: 0.8125rem;
}

.iv-percent {
    position: absolute;
    top: 0.75rem;
    right: 0.9375rem;
    color: var(--app-green);
    font-weight: 700;
    font-size: 1.125rem;
}

.iv-seal {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
}

.iv-card.iv-timed .iv-seal {
    width: 3.75rem;
    height: 3.75rem;
}

.iv-seal svg {
    width: 100%;
    height: 100%;
    fill: var(--app-green);
}

.iv-value {
    position: absolute;
    color: var(--white);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1;
}

.iv-card.iv-timed .iv-value {
    font-size: 1.125rem;
}

.iv-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 12rem;
    padding: 1.5rem;
    background: var(--white);
    border-radius: 0.25rem;
    color: var(--black);
    font-weight: 700;
    font-size: 1.5rem;
    text-align: center;
}

@media (max-width: 37.5rem) {
    .iv-empty {
        min-height: 9rem;
        font-size: 1.125rem;
    }
}