.state-menu { position: relative; display: inline-flex; align-items: center; gap: 8px; }
.state-trigger { min-height: 42px; display: inline-flex; align-items: center; gap: 7px; border: 0; padding: 0; color: var(--muted, #c9b8d6); background: transparent; font: inherit; font-weight: 800; cursor: pointer; white-space: nowrap; }
.state-trigger svg { width: 15px; height: 15px; }
.state-trigger .state-chevron { transition: transform .18s ease; }
.state-menu.is-open .state-trigger { color: #fff; }
.state-menu.is-open .state-chevron { transform: rotate(180deg); }
.state-clear { min-height: 38px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(248,215,120,.24); border-radius: 8px; padding: 0 10px; color: #fff4bd; background: rgba(248,215,120,.07); font-size: .8rem; font-weight: 800; white-space: nowrap; text-decoration: none; }
.state-clear svg { width: 13px; height: 13px; }
.state-options { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; width: 230px; max-height: min(430px, calc(100vh - 110px)); display: grid; gap: 6px; padding: 10px; overflow-y: auto; border: 1px solid rgba(255,79,173,.22); border-radius: 8px; background: rgba(0,0,0,.96); box-shadow: 0 22px 46px rgba(0,0,0,.86), 0 0 36px rgba(255,79,173,.22); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px); transition: opacity .18s ease, transform .18s ease, visibility 0s linear .2s; }
.state-menu.is-open .state-options { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition-delay: 0s; }
.state-options a { min-height: 38px; display: flex; align-items: center; border-radius: 8px; padding: 0 10px; color: var(--muted, #c9b8d6); font-size: .88rem; font-weight: 800; text-decoration: none; }
.state-options a:hover, .state-options a:focus-visible, .state-options a.is-active { color: #fff; background: rgba(255,79,173,.14); outline: none; }
.state-mobile-controls { display: none; }
.mobile-state-toggle { min-height: 44px; width: 100%; display: flex; align-items: center; gap: 8px; border: 1px solid rgba(255,79,173,.2); border-radius: 8px; padding: 0 12px; color: #fff; background: rgba(255,79,173,.08); font: inherit; font-weight: 800; text-align: left; }
.mobile-state-toggle [data-state-current] { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mobile-state-toggle .toggle-chevron { margin-left: auto; transition: transform .18s ease; }
.mobile-state-toggle[aria-expanded="true"] .toggle-chevron { transform: rotate(180deg); }
.state-mobile-clear { min-height: 42px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(248,215,120,.24); border-radius: 8px; padding: 0 12px; color: #fff4bd; background: rgba(248,215,120,.07); font-size: .82rem; font-weight: 800; text-decoration: none; }
.mobile-state-list { display: none; max-height: min(34vh, 280px); overflow-y: auto; overscroll-behavior: contain; border: 1px solid rgba(255,79,173,.18); border-radius: 8px; padding: 8px; background: rgba(0,0,0,.96); }
.state-mobile-controls.is-open .mobile-state-list { display: grid; }
.mobile-state-list .city-option { min-height: 44px; display: flex; align-items: center; border-radius: 7px; padding: 0 10px; color: var(--muted, #c9b8d6); font-weight: 800; text-decoration: none; }
.mobile-state-list .city-option.is-active, .mobile-state-list .city-option:focus-visible { color: #fff; background: rgba(255,79,173,.16); outline: none; }
@media (max-width: 760px) {
    .nav-inline .state-menu { display: none; }
    .state-mobile-controls { display: grid; gap: 8px; }
}