.media { display: flex; justify-content: center; align-items: center; padding: 20px; }
.player-container { background-color: rgba(0, 0, 0, 0.85); border-radius: 15px; box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4); width: 100%; max-width: 800px; overflow: hidden; }
.video-container { position: relative; width: 100%; padding-top: 56.25%; /* 16:9 宽高比 */ }
#videoPlayer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; }
.controls-container { padding: 10px 10px; color: white; }
.video-title { font-size: 16px; color: #fff; margin-bottom: 10px; text-align: center; opacity: 0.8; }
.progress-container { margin-bottom: 15px; }
.progress-bar { width: 100%; height: 6px; background-color: #444; border-radius: 3px; cursor: pointer; margin-bottom: 5px; position: relative; }
.progress { height: 100%; background: linear-gradient(to right, #fdbb2d, #b21f1f); border-radius: 3px; width: 0%; transition: width 0.1s; }
.time-info { display: flex; justify-content: space-between; font-size: 14px; color: #ccc; }
.controls { display: flex; justify-content: center; align-items: center; margin-bottom: 10px; }
.control-btn { background: none; border: none; color: white; font-size: 16px; cursor: pointer; margin: 0 15px; width: 30px; height: 30px; border-radius: 50%; display: flex; justify-content: center; align-items: center; transition: all 0.3s; }
.control-btn:hover { background-color: rgba(255, 255, 255, 0.1); }
.play-btn { background-color: #fdbb2d; color: #000; width: 30px; height: 30px; font-size: 16px; }
.play-btn:hover { transform: scale(1.05); }
.bottom-controls { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.status { font-size: 14px; color: #fdbb2d; padding: 5px 10px; background: rgba(253, 187, 45, 0.1); border-radius: 4px; }
.right-controls { display: flex; align-items: center; gap: 15px; }
.speed-controls { display: flex; align-items: center; }
.speed-label { font-size: 14px; color: #ccc; margin-right: 10px; }
.speed-select { background: rgba(255, 255, 255, 0.1); border: 1px solid #555; color: white; padding: 6px 10px; border-radius: 4px; font-size: 14px; cursor: pointer; outline: none; }
.speed-select option { background: #333; color: white; }
.speed-select:focus { border-color: #fdbb2d; }
.fullscreen-btn { background: rgba(255, 255, 255, 0.1); border: 1px solid #555; color: white; padding: 6px 12px; border-radius: 4px; font-size: 14px; cursor: pointer; display: flex; align-items: center; gap: 5px; transition: all 0.3s; }
.fullscreen-btn:hover { background: rgba(255, 255, 255, 0.2); border-color: #fdbb2d; }
.loading { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 18px; background: rgba(0, 0, 0, 0.7); padding: 10px 20px; border-radius: 5px; }

/* 全屏样式 */
.player-container:fullscreen { width: 100%; height: 100%; border-radius: 0; max-width: none; }
.player-container:-webkit-full-screen { width: 100%; height: 100%; border-radius: 0; max-width: none; }
.player-container:-moz-full-screen { width: 100%; height: 100%; border-radius: 0; max-width: none; }
.player-container:-ms-fullscreen { width: 100%; height: 100%; border-radius: 0; max-width: none; }

@media (max-width: 600px) {
  .player-container { border-radius: 10px; }
  .controls-container { padding: 10px 15px; }
  .control-btn { margin: 0 10px; width: 40px; height: 40px; font-size: 18px; }
  .play-btn { width: 50px; height: 50px; }
  .speed-select { padding: 4px 8px; font-size: 12px; }
  .speed-label { font-size: 12px; }
  .status { font-size: 12px; }
  .bottom-controls { flex-direction: column; gap: 10px; }
  .right-controls { width: 100%; justify-content: center; }
  .fullscreen-btn { padding: 4px 8px; font-size: 12px; }
}