.cs{position:relative;max-width:230px}.cs,.cs__pill{min-width:0;width:100%}.cs__pill{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--border-color);background:hsla(0,0%,100%,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:var(--radius-full);padding:8px 14px;box-shadow:var(--shadow-sm);cursor:pointer;transition:border-color var(--transition-fast),box-shadow var(--transition-fast),background var(--transition-fast)}.cs__pill:hover{border-color:var(--teal-400);box-shadow:var(--shadow-md)}.cs__pill.is-loading{opacity:.85}.cs__city{font-weight:800;font-size:12px;letter-spacing:.06em;color:var(--teal-900);flex:0 0 auto}.cs__sep{width:1px;height:16px;background:rgba(18,59,131,.1);flex:0 0 auto}.cs__wx{gap:6px;min-width:0}.cs__wx,.cs__wxIcon{display:inline-flex;align-items:center}.cs__wxIcon{color:var(--teal-700);justify-content:center;flex:0 0 auto}.cs__icon,.cs__wxIcon{width:16px;height:16px}.cs__temp{font-weight:800;font-size:12px;color:var(--teal-800);white-space:nowrap}.cs__aqi{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto}.cs__dot{width:8px;height:8px;border-radius:var(--radius-full);background:var(--slate-400);box-shadow:0 0 0 3px rgba(14,50,61,.04);transition:background var(--transition-fast)}.cs__dot--good{background:var(--green-600)}.cs__dot--moderate{background:#eab308}.cs__dot--sensitive{background:#f97316}.cs__dot--unhealthy{background:#ef4444}.cs__dot--very-unhealthy{background:#9333ea}.cs__dot--hazard{background:#111827}.cs__aqiLabel{font-weight:800;font-size:10.5px;color:var(--text-muted);letter-spacing:.06em}.cs__aqiValue{font-weight:800;font-size:12px;color:var(--teal-900);white-space:nowrap}.cs__menu{position:absolute;top:calc(100% + 8px);left:0;z-index:60;width:220px;border-radius:var(--radius-lg);border:1px solid var(--border-color);background:hsla(0,0%,100%,.97);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:var(--shadow-xl);padding:6px;display:grid;grid-gap:4px;gap:4px;animation:fadeInUp .2s var(--ease-out) both}.cs--right .cs__menu{left:auto;right:0}.cs__item{width:100%;text-align:left;border:1px solid transparent;background:transparent;border-radius:var(--radius-sm);padding:10px 12px;font-weight:700;font-size:13px;color:var(--text-primary);cursor:pointer;transition:background var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast)}.cs__item:hover{border-color:rgba(18,59,131,.1);background:var(--teal-50);color:var(--teal-800)}.cs__item.is-active{border-color:var(--teal-400);background:var(--teal-100);color:var(--teal-900);font-weight:800}@media (max-width:520px){.cs{max-width:100%}.cs__pill{padding:6px 10px;gap:8px}.cs__aqiValue,.cs__city,.cs__temp{font-size:11px}.cs__icon{width:14px;height:14px}.cs__menu{width:100%}.cs__aqiLabel{display:none}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}