.container {
        border-radius: 20px;
        background-image: linear-gradient(0deg, #fbfbfb, #ffffff);
        border: 2px solid #ffffff;
        box-shadow: 0 0px 8px rgb(0 0 0 / 10%);
        padding: 20px;
        max-width: 1800px;
        margin: 20px auto;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .section {
        flex: 1;
        margin: 10px;
        min-width: 300px; /* 确保在小屏幕上有最小宽度 */
        padding: 20px;
        background: #f8f9fa;
        border-radius: 10px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    #output, #video-output {
        border: 1px solid #ced4da;
        padding: 10px;
        margin-top: 20px;
        min-height: 150px;
        font-size: 18px;
        background-color: #ffffff;
        border-radius: 5px;
        white-space: pre-wrap; /* 保持文本格式 */
    }

    button {
        margin: 5px;
        padding: 10px 20px;
        font-size: 16px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    .btn-primary {
        background-color: #007bff;
        color: white;
    }

    .btn-primary:hover {
        background-color: #0056b3;
    }

    .btn-danger {
        background-color: #dc3545;
        color: white;
    }

    .btn-danger:hover {
        background-color: #c82333;
    }

    video {
        width: 100%; /* 视频自适应宽度 */
        border-radius: 15px;
    }

    @media (max-width: 576px) {
        .container {
            flex-direction: column; /* 手机端垂直布局 */
        }
    }