/* Public panel helpers: layout/utility only, defer final surface styling to design-system.css */
.card {
    border-radius: 18px;
}

.card .icon-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(44, 142, 62, 0.14);
    color: var(--rfc-heading-green, #2c8e3e);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 1rem 0 0.5rem;
}

.section-header h2,
.section-header h3 {
    margin: 0;
}

.nav-pills .nav-link {
    border-radius: 999px;
}

.nav-pills .nav-link.active {
    background: linear-gradient(
        145deg,
        var(--rfc-button-top, rgba(46, 204, 113, 0.92)),
        var(--rfc-button-bottom, rgba(8, 123, 62, 0.96))
    );
    color: #ffffff;
    border: 1px solid var(--rfc-button-border, rgba(255, 255, 255, 0.22));
    box-shadow: var(--rfc-button-shadow, 0 10px 22px rgba(0, 70, 38, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.32));
}

.list-unstyled.compact > li {
    margin-bottom: 0.5rem;
}