/* Responsive Tool Page Styles */
* { box-sizing: border-box; }
body { margin: 0; padding: 0; min-height: 100vh; }
.tool-container { max-width: 700px; width: 95%; margin: 40px auto; padding: 20px; background: white; border-radius: 20px; box-shadow: 0 10px 40px rgba(0,0,0,0.1); }
.tool-header { text-align: center; margin-bottom: 30px; }
.tool-header h1 { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: clamp(24px, 5vw, 36px); margin-bottom: 10px; word-wrap: break-word; }
.upload-box { border: 3px dashed #f5576c; border-radius: 15px; padding: 30px 15px; text-align: center; cursor: pointer; transition: all 0.3s; background: rgba(245, 87, 108, 0.05); }
.upload-box:hover { background: rgba(245, 87, 108, 0.1); border-color: #f093fb; }
.upload-box input { display: none; }
.upload-icon { font-size: clamp(40px, 10vw, 60px); color: #f5576c; margin-bottom: 15px; }
.upload-box h3 { font-size: clamp(16px, 3vw, 20px); word-wrap: break-word; }
.options-panel { margin-top: 25px; display: none; }
.options-panel.active { display: block; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 8px; font-weight: 600; color: #333; font-size: clamp(14px, 2.5vw, 16px); }
.form-group select, .form-group input { width: 100%; padding: 12px; border: 2px solid #e0e0e0; border-radius: 10px; font-size: clamp(14px, 2.5vw, 15px); transition: border 0.3s; }
.form-group select:focus, .form-group input:focus { outline: none; border-color: #f5576c; }
.process-button { width: 100%; padding: 15px; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color: white; border: none; border-radius: 10px; font-size: clamp(16px, 3vw, 18px); font-weight: 600; cursor: pointer; transition: all 0.3s; margin-top: 20px; }
.process-button:hover { transform: translateY(-2px); box-shadow: 0 5px 20px rgba(245, 87, 108, 0.4); }
.process-button:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.status-box { margin-top: 20px; padding: 15px; border-radius: 10px; display: none; word-wrap: break-word; font-size: clamp(14px, 2.5vw, 16px); }
.status-box.active { display: block; }
.status-box.processing { background: #fff3cd; color: #856404; }
.status-box.success { background: #d4edda; color: #155724; }
.status-box.error { background: #f8d7da; color: #721c24; }
.download-btn { display: inline-block; margin-top: 15px; padding: 12px 30px; background: #28a745; color: white; text-decoration: none; border-radius: 10px; font-weight: 600; font-size: clamp(14px, 2.5vw, 16px); cursor: pointer; border: none; }
.download-btn:hover { background: #218838; }
.back-link { display: inline-block; margin-bottom: 20px; color: #f5576c; text-decoration: none; font-weight: 600; font-size: clamp(14px, 2.5vw, 16px); }
@media (max-width: 768px) {
    .tool-container { margin: 20px auto; padding: 15px; }
    .upload-box { padding: 20px 10px; }
    .form-group { margin-bottom: 15px; }
}