body {  
    font-family: Arial, sans-serif;  
    margin: 0;  
    padding: 20px;  
    background-color: #f5f5f5;  
}  

.container {  
    max-width: 1200px;  
    margin: 0 auto;  
    background-color: white;  
    padding: 20px;  
    border-radius: 8px;  
    box-shadow: 0 0 10px rgba(0,0,0,0.1);  
}  

h1 {  
    text-align: center;  
    color: #333;  
    margin-bottom: 30px;  
}  

h3 {  
    color: #444;  
    margin-bottom: 10px;  
}  

.row {  
    display: flex;  
    gap: 20px;  
    margin-bottom: 30px;  
}  

.column {  
    flex: 1;  
    position: relative;  
}  

textarea {  
    width: 100%;  
    height: 300px;  
    padding: 10px;  
    border: 1px solid #ddd;  
    border-radius: 4px;  
    resize: vertical;  
    font-family: monospace;  
    font-size: 14px;  
}  

textarea[readonly] {  
    background-color: #f8f8f8;  
}  

.process-btn {  
    display: block;  
    width: 200px;  
    margin: 20px auto;  
    padding: 12px 24px;  
    background-color: #4CAF50;  
    color: white;  
    border: none;  
    border-radius: 4px;  
    cursor: pointer;  
    font-size: 16px;  
}  

.clear-btn {  
    position: absolute;  
    bottom: -30px;  
    left: 0;  
    padding: 6px 12px;  
    background-color: #ff4444;  
    color: white;  
    border: none;  
    border-radius: 4px;  
    cursor: pointer;  
    font-size: 14px;  
}  

.process-btn:hover {  
    background-color: #45a049;  
}  

.clear-btn:hover {  
    background-color: #ff3333;  
}  

.warning {  
    color: #ff4444;  
    margin-top: 10px;  
    padding: 10px;  
    background-color: #fff0f0;  
    border-radius: 4px;  
}  

.info {  
    color: #666;  
    margin-top: 5px;  
    font-size: 14px;  
}

.copy-btn {  
    position: absolute;  
    bottom: -30px;  
    right: 0;  
    padding: 6px 12px;  
    background-color: #2196F3;  
    color: white;  
    border: none;  
    border-radius: 4px;  
    cursor: pointer;  
    font-size: 14px;  
    transition: background-color 0.3s;  
}  

.copy-btn:hover {  
    background-color: #1976D2;  
}  

.copy-message {  
    position: absolute;  
    bottom: -55px;  
    right: 0;  
    font-size: 14px;  
    padding: 5px 10px;  
    border-radius: 4px;  
    animation: fadeIn 0.3s;  
}  

.copy-message.success {  
    color: #4CAF50;  
    background-color: #E8F5E9;  
}  

.copy-message.error {  
    color: #f44336;  
    background-color: #FFEBEE;  
}  

@keyframes fadeIn {  
    from {  
        opacity: 0;  
        transform: translateY(-10px);  
    }  
    to {  
        opacity: 1;  
        transform: translateY(0);  
    }  
}  
.clear-btn {  
    position: absolute;  
    bottom: -30px;  
    left: 0;  
    padding: 6px 12px;  
    background-color: #ff4444;  
    color: white;  
    border: none;  
    border-radius: 4px;  
    cursor: pointer;  
    font-size: 14px;  
    transition: background-color 0.3s;  
}  

.clear-btn:hover {  
    background-color: #ff3333;  
}  

/* 为每个列调整按钮位置 */  
.column {  
    flex: 1;  
    position: relative;  
    margin-bottom: 40px; /* 增加底部空间以容纳按钮 */  
}  

/* 确保所有按钮不会重叠 */  
.column .clear-btn,  
.column .copy-btn {  
    position: absolute;  
    bottom: -30px;  
}  

.column .clear-btn {  
    left: 0;  
}  

.column .copy-btn {  
    right: 0;  
}  

/* 确保消息显示在正确位置 */  
.copy-message {  
    position: absolute;  
    bottom: -55px;  
    right: 0;  
}