/* 药丸式切换按钮 */ .switcher-pills { display: inline-flex; align-items: center; gap: 12px; background: rgba(255, 255, 255, 0.08); padding: 6px 8px; border-radius: 50px; backdrop-filter: blur(10px); } .switcher-pill { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 16px; background: transparent; border: none; border-radius: 50px; color: rgba(255, 255, 255, 0.6); font-size: 14px; font-weight: 600; cursor: pointer; transition: all 200ms ease; min-width: 120px; } .switcher-pill:hover:not(.active) { color: rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.05); } .switcher-pill.active { background: rgba(255, 255, 255, 0.15); color: white; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1); } .pill-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: 0.4; transition: all 200ms ease; } .switcher-pill.active .pill-dot { opacity: 1; box-shadow: 0 0 8px currentColor; animation: pulse 2s infinite; } .pills-divider { width: 1px; height: 20px; background: rgba(255, 255, 255, 0.2); } @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.2); opacity: 0.8; } }