/* ========== 底部悬浮控制区 - 精确匹配小程序样式 ========== */
/* 小程序 rpx → H5 px 换算（750rpx = 375px，1rpx ≈ 0.5px） */

.floating-features {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(12, 25, 50, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 0.5px solid rgba(255, 255, 255, 0.1);
  border-radius: 15px 15px 0 0;
  padding: 10px 7.5px;
  padding-bottom: 10px;
}

/* ========== 功能切换行（整首循环/口型示范/单句播放/单句发音） ========== */
.feature-toggles {
  display: flex;
  justify-content: space-between;
  margin-bottom: 7.5px;
  gap: 5px;
}

.toggle-btn {
  flex: 1;
  text-align: center;
  padding: 4px 6px 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 0.5px solid rgba(255, 255, 255, 0.1);
  border-radius: 17.5px;
  cursor: pointer;
  outline: none;
  -webkit-touch-callout: none;
}

.toggle-btn:active {
  transform: scale(0.95);
}

.toggle-btn.active {
  background: rgba(30, 144, 255, 0.3);
  border-color: rgba(30, 144, 255, 0.5);
}

.toggle-text {
  font-size: 3.73vw;
  color: #B8B8D1;
  font-weight: 500;
}

.toggle-btn.active .toggle-text {
  color: #FFFFFF;
}

/* ========== 主按钮行（上一句/播放/下一句/新版） ========== */
.main-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12.5px;
  margin-bottom: 10px;
}

.control-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  outline: none;
  -webkit-touch-callout: none;
}

.control-btn:active {
  transform: scale(0.9);
}

.control-btn.secondary {
  width: 50px;
  height: 30px;
  background: rgba(255, 255, 255, 0.05);
}

.control-btn.primary {
  width: 42.5px;
  height: 42.5px;
  background: rgba(255, 255, 255, 0.05);
}

.control-btn.primary.playing {
  background: rgba(30, 144, 255, 0.3);
  border: 1px solid rgba(30, 144, 255, 0.5);
}

.control-text {
  font-size: 3.47vw;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  line-height: 1;
  text-align: center;
}

.control-text.large {
  font-size: 4.27vw;
  font-weight: bold;
}

/* Beta 新版按钮 */
.control-btn.beta-btn {
  background: linear-gradient(135deg, #e94560, #ff6b6b) !important;
  color: #fff !important;
  border-color: #e94560 !important;
  box-shadow: 0 2px 6px rgba(233, 69, 96, 0.3);
  width: 50px;
  height: 30px;
}

/* ========== 辅助按钮行（自动/语速/伴奏/设置/收藏） ========== */
.auxiliary-controls {
  display: flex;
  justify-content: space-around;
  padding-top: 10px;
  border-top: 0.5px solid rgba(255, 255, 255, 0.1);
}

.aux-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5px 7.5px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  min-width: 32.5px;
  border: 0.5px solid transparent;
  cursor: pointer;
  outline: none;
  -webkit-touch-callout: none;
}

.aux-btn:active {
  transform: scale(0.95);
  background: rgba(233, 69, 96, 0.15);
}

.aux-btn.active {
  background: rgba(30, 144, 255, 0.3);
  border: 0.5px solid rgba(30, 144, 255, 0.5);
  box-shadow: 0 0 5px rgba(30, 144, 255, 0.3);
}

.aux-icon-image {
  width: 12px;
  height: 12px;
  margin-bottom: 2.5px;
}

.aux-label {
  font-size: 3.2vw;
  color: #8888A9;
}

.aux-btn.active .aux-label {
  color: #FFFFFF;
}

/* 收藏图标特殊样式 */
.aux-icon-favorite {
  width: 14px;
  height: 14px;
  margin-bottom: 1.5px;
}