/* AUTO-GENERATED — do not edit by hand.
 * Regenerate: python scripts/build_app_shell_bundle.py
 * Sources: assets/css/settings/components/chip-bar.css
 */
/*
   设置中心 · 同组胶囊条导航
   所有选择器以 related-chip-bar__ 为前缀，避免与全局 .active / .chip 等通用类冲突
*/

.related-chip-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding: 8px 12px;
    background: #f7f8fb;
    border: 1px solid #e8ecf5;
    border-radius: 10px;
}

.related-chip-bar__group {
    font-size: 12px;
    font-weight: 600;
    color: #9aa3b5;
    white-space: nowrap;
    padding-right: 10px;
    border-right: 1px solid #e4e8f0;
}

.related-chip-bar__row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.related-chip-bar__item {
    display: inline-flex;
    align-items: center;
}

.related-chip-bar__link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 13px;
    color: #5a6478;
    border: 1px solid transparent;
    background: transparent;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background-color 0.12s ease,
                color 0.12s ease,
                border-color 0.12s ease;
}

.related-chip-bar__link:hover {
    background: #eef1f8;
    color: #3b6ef5;
}

.related-chip-bar__item--active .related-chip-bar__link {
    background: #3b6ef5;
    border-color: #3b6ef5;
    color: #fff;
    font-weight: 600;
}

.related-chip-bar__item--active .related-chip-bar__link:hover {
    background: #325dd8;
    color: #fff;
}

.related-chip-bar__icon {
    font-size: 11px;
    line-height: 1;
}

.related-chip-bar__label {
    line-height: 1;
}