audience-counter { display: block; width: 100%; }
.audience-panel { display: flex; justify-content: center; align-items: baseline; flex-wrap: wrap; gap: 6px 20px; color: var(--muted, #536178); text-align: left; font: 12px/1.8 system-ui, sans-serif; overflow-wrap: anywhere; }
.audience-line { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; }
.audience-counts { display: inline-flex; align-items: baseline; gap: 8px; }
.audience-counts b { color: var(--ink, #15223a); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.audience-line small { font-size: 10px; color: var(--faint, #64748b); }
.audience-panel details { max-width: 720px; min-width: 0; }
.audience-panel details[open] { flex-basis: 100%; }
.audience-panel summary { cursor: pointer; font-size: 11px; color: var(--muted, #536178); }
.audience-panel details[open] summary { text-align: center; }
.audience-details { padding: 12px 16px; margin-top: 8px; border: 1px solid var(--line, #dce3ef); border-radius: 6px; }
.audience-panel p { margin: 8px 0; font-size: 11px; line-height: 1.8; }
.audience-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 10px; }
.audience-actions button { border: 1px solid var(--line, #dce3ef); color: var(--cyan, #2563eb); background: var(--control-bg, #f5f7ff); border-radius: 6px; padding: 8px 12px; min-height: 40px; font: inherit; cursor: pointer; }
.audience-panel a { color: var(--cyan, #2563eb); }
.audience-panel :is(button,a,summary):focus-visible { outline: 2px solid var(--cyan, #2563eb); outline-offset: 3px; }
.audience-actions button:disabled { opacity: .6; cursor: default; }