.video-container {
      position: relative;
      width: 800px;
      max-width: 100%;
      background: #000;
      overflow: hidden;
      display: inline-block;
    }
    video { width: 100%; display: block; }
    .controls {
      position: absolute;
      bottom: 0;
      width: 100%;
      background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
      display: flex;
      flex-direction: column;
      padding: 10px;
      transition: opacity 0.3s;
      opacity: 1;
    }
    .controls.hide { opacity: 0; pointer-events: none; }
    .buttons {
      display: flex;
      align-items: center;
      gap: 15px;
      flex-wrap: wrap;
    }
    button {
      background: none;
      border: none;
      color: white;
      font-size: 22px;
      cursor: pointer;
    }
    button:hover { color: #e50914; }
    #quality-display, #data-estimate {
      color: white;
      font-size: 14px;
    }
    #data-estimate {
      color: lightgray;
      font-size: 13px;
      margin-left: 10px;
    }
    .loading-spinner {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 50px;
      height: 50px;
      margin-top: -25px;
      margin-left: -25px;
      border: 6px solid rgba(255, 255, 255, 0.3);
      border-top-color: #fff;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      z-index: 2;
      display: none;
    }
    @keyframes spin {
      to { transform: rotate(360deg); }
    }
    .quality-buttons {
      display: flex;
      gap: 8px;
      margin-top: 5px;
      flex-wrap: wrap;
    }
    .quality-buttons button {
      font-size: 13px;
      padding: 4px 6px;
      border-radius: 4px;
      border: 1px solid white;
      background: rgba(255,255,255,0.1);
    }
    .quality-buttons button.active {
      background-color: #e50914;
      color: #fff;
      border-color: #e50914;
    }