.oak-image-converter-container * {
                        box-sizing: border-box;
                        margin: 0;
                        padding: 0;
                    }
                    
                    .oak-image-converter-container {
                        max-width: 1000px;
                        margin: 10px auto;
                        padding: 20px;
                        background: #ffffff;
                        border-radius: 12px;
                        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
                    }
                    
                    .oak-image-converter-header {
                        text-align: center;
                        margin-bottom: 30px;
                    }
                    
                    .oak-image-converter-header h2 {
                        color:#2563eb;
                        font-size: 1.8rem;
                        margin-bottom: 10px;
                    }
                    
                    .oak-image-converter-header p {
                        color: #6b7280;
                        font-size: 1rem;
                    }
                    
                    .oak-image-converter-toolbar {
                        background: #f3f4f6;
                        border-radius: 8px;
                        padding: 15px 20px;
                        margin-bottom: 25px;
                        display: flex;
                        flex-wrap: wrap;
                        gap: 15px;
                        align-items: center;
                        justify-content: space-between;
                    }
                    
                    /* 电脑端保持原有布局 */
                    @media (min-width: 769px) {
                        .oak-image-converter-toolbar {
                            flex-direction: row;
                            align-items: center;
                        }
                        .oak-image-format-selector {
                            flex: 1;
                            max-width: 500px;
                        }
                    }
                    
                    /* 移动端布局调整 */
                    @media (max-width: 768px) {
                        .oak-image-converter-toolbar {
                            flex-direction: column;
                            align-items: stretch;
                        }
                    }
                    
                    .oak-image-custom-file-upload {
                        background:#2563eb;
                        color: white;
                        border-radius: 6px;
                        padding: 10px 16px;
                        cursor: pointer;
                        font-weight: 500;
                        transition: all 0.2s ease;
                        display: flex;
                        align-items: center;
                        gap: 8px;
                    }
                    
                    @media (max-width: 768px) {
                        .oak-image-custom-file-upload {
                            justify-content: center;
                        }
                    }
                    
                    .oak-image-custom-file-upload:hover {
                        background: #1d4ed8;
                        transform: translateY(-1px);
                        box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
                    }
                    
                    .oak-image-custom-file-upload:active {
                        transform: translateY(0);
                        box-shadow: 0 1px 4px rgba(37, 99, 235, 0.25);
                    }
                    
                    .oak-image-converter-toolbar input[type="file"] {
                        display: none;
                    }
                    
                    .oak-image-format-selector {
                        display: flex;
                        gap: 8px;
                    }
                    
                    /* 移动端格式选择器每行显示两个 */
                    @media (max-width: 768px) {
                        .oak-image-format-selector {
                            flex-wrap: wrap;
                        }
                        
                        .oak-image-format-option {
                            flex-basis: calc(50% - 4px); /* 减去一半的gap间距 */
                            justify-content: center;
                        }
                    }
                    
                    /* 电脑端格式选择器保持一行显示四个 */
                    @media (min-width: 769px) {
                        .oak-image-format-selector {
                            flex-wrap: nowrap;
                        }
                        .oak-image-format-option {
                            flex: 1;
                            justify-content: center;
                        }
                    }
                    
                    .oak-image-format-option {
                        background: white;
                        border: 1px solid #d1d5db;
                        border-radius: 6px;
                        padding: 10px 16px;
                        cursor: pointer;
                        font-weight: 500;
                        transition: all 0.2s ease;
                        display: flex;
                        align-items: center;
                        gap: 6px;
                    }
                    
                    .oak-image-format-option:hover {
                        background: #f9fafb;
                        border-color: #9ca3af;
                    }
                    
                    .oak-image-format-option.active {
                        background: #4f46e5;
                        color: white;
                        border-color:#4f46e5;
                    }
                    
                    .oak-image-converter-toolbar button {
                        background:#10b981;
                        color: white;
                        border-radius: 6px;
                        padding: 10px 16px;
                        cursor: pointer;
                        font-weight: 500;
                        transition: all 0.2s ease;
                        display: flex;
                        align-items: center;
                        gap: 8px;
                        border: none;
                    }
                    
                    @media (max-width: 768px) {
                        .oak-image-converter-toolbar button {
                            justify-content: center;
                        }
                    }
                    
                    .oak-image-conversion-options {
                        background: #f9fafb;
                        border-radius: 8px;
                        padding: 15px 20px;
                        margin-bottom: 25px;
                        display: none;
                    }
                    
                    .oak-image-conversion-options label {
                        font-weight: 500;
                        color:#1f2937;
                        margin-right: 10px;
                    }
                    
                    .oak-image-conversion-options input, 
                    .oak-image-conversion-options select {
                        padding: 8px 12px;
                        border: 1px solid #d1d5db;
                        border-radius: 6px;
                        margin-right: 15px;
                        font-size: 1rem;
                    }
                    
                    .oak-image-conversion-options input:focus, 
                    .oak-image-conversion-options select:focus {
                        outline: none;
                        border-color:#2563eb;
                        box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
                    }
                    
                    .oak-image-image-preview {
                        background: #f9fafb;
                        border-radius: 12px;
                        min-height: 350px;
                        margin-bottom: 25px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        border: 2px dashed #e5e7eb;
                        transition: all 0.3s ease;
                    }
                    
                    @media (max-width: 768px) {
                        .oak-image-image-preview {
                            min-height: 250px;
                        }
                    }
                    
                    .oak-image-image-preview:hover {
                        border-color: #d1d5db;
                    }
                    
                    .oak-image-image-preview img {
                        max-width: 100%;
                        max-height: 500px;
                        object-fit: contain;
                        border-radius: 8px;
                        transition: all 0.3s ease;
                    }
                    
                    .oak-image-image-preview img:hover {
                        transform: scale(1.01);
                    }
                    
                    .oak-image-image-actions {
                        display: none;
                        margin-top: 25px;
                        text-align: center;
                        gap: 15px;
                        flex-wrap: wrap;
                        justify-content: center;
                    }
                    
                    .oak-image-image-actions button {
                        background:#2563eb;
                        color: white;
                        border-radius: 6px;
                        padding: 12px 20px;
                        cursor: pointer;
                        font-weight: 500;
                        transition: all 0.2s ease;
                        border: none;
                        margin: 0 8px 10px;
                        display: inline-flex;
                        align-items: center;
                        gap: 8px;
                    }
                    
                    .oak-image-image-actions button:hover {
                        background: #1d4ed8;
                        transform: translateY(-1px);
                        box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
                    }
                    
                    .oak-image-image-actions button:active {
                        transform: translateY(0);
                        box-shadow: 0 1px 4px rgba(37, 99, 235, 0.25);
                    }
                    
                    .oak-image-image-actions button:nth-child(2) {
                        background: #6b7280;
                    }
                    
                    .oak-image-image-actions button:nth-child(2):hover {
                        background: #4b5563;
                    }
                    
                    .oak-image-loading-indicator {
                        display: none;
                        position: fixed;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        background: rgba(255, 255, 255, 0.85);
                        z-index: 1000;
                        justify-content: center;
                        align-items: center;
                        flex-direction: column;
                        gap: 15px;
                    }
                    
                    .oak-image-spinner {
                        border: 5px solid #f3f4f6;
                        border-radius: 50%;
                        border-top: 5px solid #2563eb;
                        width: 40px;
                        height: 40px;
                        animation: oak-image-spin 1s linear infinite;
                    }
                    
                    @keyframes oak-image-spin {
                        0% { transform: rotate(0deg); }
                        100% { transform: rotate(360deg); }
                    }
                    
                    .oak-image-loading-text {
                        color:#1f2937;
                        font-weight: 500;
                    }
                    
                    .oak-image-download-link {
                        margin-top: 25px;
                        text-align: center;
                    }
                    
                    .oak-image-download-link a {
                        background:#10b981;
                        color: white;
                        border-radius: 6px;
                        padding: 12px 20px;
                        text-decoration: none;
                        font-weight: 500;
                        transition: all 0.2s ease;
                        display: inline-flex;
                        align-items: center;
                        gap: 8px;
                    }
                    
                    .oak-image-download-link a:hover {
                        background: #059669;
                        transform: translateY(-1px);
                        box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
                    }
                    
                    .oak-image-error-message {
                        color:#ef4444;
                        margin-top: 15px;
                        text-align: center;
                        font-weight: 500;
                    }
                    
                    .oak-image-empty-state {
                        text-align: center;
                        padding: 40px;
                    }
                    
                    .oak-image-empty-icon {
                        font-size: 48px;
                        color: #9ca3af;
                        margin-bottom: 20px;
                    }
                    
                    .oak-image-small-text {
                        font-size: 0.9rem;
                        color: #6b7280;
                        margin-top: 8px;
                    }