.ap-section { margin: 1.25rem 0; }
.ap-search { display: flex; flex-wrap: wrap; gap: .8rem; align-items: end; }
.ap-search label { display: flex; flex-direction: column; gap: .3rem; font-size: .8rem; max-width: 100%; }
.ap-search input, .ap-search select, .ap-search button { padding: .6rem .8rem; border: 1px solid var(--border-color); border-radius: 5px; background: var(--bg-surface-secondary); color: var(--text); max-width: 100%; }
.ap-search button { background: var(--primary); color: var(--body-bg); cursor: pointer; }
.ap-search input { width: 290px; }
.ap-races { display: grid; grid-template-columns: minmax(130px, 1fr) minmax(120px, 1fr); gap: 1rem; align-items: center; }
#ap-donut svg { width: 100%; height: auto; max-height: 280px; display: block; }
.ap-race-item { display: flex; gap: .5rem; align-items: center; margin: 1rem 0; font-size: .85rem; }
.ap-swatch { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
#ap-regions { max-height: 340px; overflow: auto; }
.ap-region { margin: .8rem 0; font-size: .8rem; }
.ap-region .dash-heading { margin-bottom: .3rem; }
.ap-region-track { background: var(--bg-surface-secondary); border-radius: 4px; height: 8px; }
.ap-region-fill { background: var(--primary); height: 100%; border-radius: inherit; }
.ap-section h2 { font-size: 1.1rem; }
.ap-relationship { display: inline-flex; align-items: center; column-gap: .625rem; vertical-align: middle; line-height: 1.5; }
.ap-relationship-icon { display: block; width: 18px; height: 18px; flex: 0 0 18px; }
.ap-relationship-war { color: #bc3449; }
.ap-relationship-nap { color: #986000; }
.ap-relationship-confederation { color: #137b70; }
.ap-relationship-unknown { color: var(--text-secondary); }
[data-theme=dark] .ap-relationship-war { color: #ff8193; }
[data-theme=dark] .ap-relationship-nap { color: #f3bd50; }
[data-theme=dark] .ap-relationship-confederation { color: #4dd4bd; }
@media (max-width: 480px) { .ap-races { grid-template-columns: 1fr; } .ap-search { align-items: stretch; } }