:root {
    --primary: #2563eb;
    --success: #16a34a;
    --danger: #dc2626;
    --dark: #1e293b;
    --light: #f8fafc;
}

body { font-family: 'Segoe UI', sans-serif; margin: 0; background: var(--light); color: var(--dark); }
.container { max-width: 1000px; margin: 0 auto; padding: 20px; }

nav { background: white; border-bottom: 1px solid #ddd; padding: 15px 0; }
.nav-flex { display: flex; justify-content: space-between; align-items: center; }
nav ul { list-style: none; display: flex; gap: 20px; margin: 0; }
nav a { text-decoration: none; color: var(--dark); font-weight: 600; }

.hero { text-align: center; padding: 50px 20px; background: white; }

.converter-box { 
    background: white; border: 2px dashed #cbd5e1; border-radius: 12px; 
    padding: 40px; text-align: center; transition: 0.3s;
}
.upload-area { margin-bottom: 20px; }

.preview-grid { 
    display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); 
    gap: 15px; margin-top: 20px; 
}
.preview-item { background: #eee; padding: 10px; border-radius: 8px; font-size: 12px; }
.preview-item canvas { width: 100%; height: auto; border: 1px solid #ccc; }

.progress-container { background: #e2e8f0; border-radius: 10px; height: 10px; margin: 20px 0; overflow: hidden; }
#progress-bar { width: 0%; height: 100%; background: var(--success); transition: 0.3s; }

.btn-primary { background: var(--primary); color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; }
.btn-success { background: var(--success); color: white; border: none; padding: 12px 25px; border-radius: 5px; cursor: pointer; }
.btn-danger { background: var(--danger); color: white; border: none; padding: 12px 25px; border-radius: 5px; cursor: pointer; }

.seo-content { margin-top: 50px; line-height: 1.6; }
footer { text-align: center; padding: 40px; background: var(--dark); color: white; margin-top: 50px; }
footer a { color: #94a3b8; text-decoration: none; }