.district-gender { width: 250px; }
    .district-gender-values { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: .35rem; }
    .district-gender-values span { display: inline-flex; align-items: center; gap: .25rem; color: var(--cm-muted); font-size: .52rem; }
    .district-gender-values span:first-child i { color: var(--cm-blue); }
    .district-gender-values span:last-child i { color: #ec4899; }
    .district-gender-values b { color: var(--cm-text); font-size: .58rem; }
    .district-gender-bar { height: 8px; border-radius: 99px; display: flex; overflow: hidden; background: var(--cm-line); }
    .district-gender-bar i { display: block; width: var(--male-size); height: 100%; background: linear-gradient(90deg, #168cff, #5f7cff); }
    .district-gender-bar em { display: block; flex: 1; height: 100%; background: linear-gradient(90deg, #d946ef, #ec4899); }