/* ============================================
   ConvoAll - Shared Tool Styles
   Version: 1.0 - Professional Design System
   ============================================ */

:root {
    --primary: #4f46e5;
    --primary-dark: #4338ca;
    --primary-light: #818cf8;
    --primary-lighter: #c7d2fe;
    --secondary: #7c3aed;
    --success: #10b981;
    --success-dark: #059669;
    --danger: #ef4444;
    --danger-dark: #dc2626;
    --warning: #f59e0b;
    --info: #3b82f6;
    --dark: #1f2937;
    --gray-900: #111827;
    --gray-800: #1f2937;
    --gray-700: #374151;
    --gray-600: #4b5563;
    --gray-500: #6b7280;
    --gray-400: #9ca3af;
    --gray-300: #d1d5db;
    --gray-200: #e5e7eb;
    --gray-100: #f3f4f6;
    --gray-50: #f9fafb;
    --white: #ffffff;
    --border-radius-sm: 8px;
    --border-radius: 12px;
    --border-radius-lg: 16px;
    --border-radius-xl: 24px;
    --border-radius-full: 9999px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
    --shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
    --shadow-primary: 0 4px 14px rgba(79,70,229,0.3);
    --transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
    --transition-slow: all 0.3s cubic-bezier(0.4,0,0.2,1);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size:16px; line-height:1.6; color:var(--gray-800);
    background:linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    min-height:100vh;
}

.container { max-width:1200px; margin:0 auto; padding:0 20px; }

/* Header */
.header {
    background:linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color:white; padding:0; position:sticky; top:0; z-index:100;
    box-shadow:0 4px 20px rgba(79,70,229,0.3);
}
.header-content {
    display:flex; justify-content:space-between; align-items:center;
    padding:12px 0; max-width:1200px; margin:0 auto;
}
.logo {
    display:flex; align-items:center; gap:12px; text-decoration:none; color:white;
    font-size:1.4rem; font-weight:700;
}
.logo-icon {
    width:42px; height:42px; background:rgba(255,255,255,0.2);
    border-radius:var(--border-radius); display:flex;
    align-items:center; justify-content:center; font-size:1.2rem;
    backdrop-filter:blur(10px);
}
.nav-links { display:flex; gap:8px; align-items:center; }
.nav-link {
    color:rgba(255,255,255,0.9); text-decoration:none; padding:8px 16px;
    border-radius:var(--border-radius-sm); font-weight:500; font-size:0.9rem;
    transition:var(--transition); display:flex; align-items:center; gap:6px;
}
.nav-link:hover { background:rgba(255,255,255,0.15); color:white; }
.mobile-menu-btn {
    display:none; background:none; border:none; color:white; font-size:1.5rem;
    cursor:pointer; padding:8px;
}
.mobile-nav {
    display:none; background:var(--gray-900); padding:16px;
    flex-direction:column; gap:8px;
}
.mobile-nav-link {
    color:white; text-decoration:none; padding:12px 16px;
    border-radius:var(--border-radius-sm); transition:var(--transition);
    display:flex; align-items:center; gap:8px;
}
.mobile-nav-link:hover { background:rgba(255,255,255,0.1); }

/* Main Content */
.main-content { padding:40px 0 60px; }

/* Hero */
.hero-section { text-align:center; margin-bottom:40px; }
.hero-title {
    font-size:2.5rem; font-weight:800; color:var(--gray-900);
    margin-bottom:12px; line-height:1.2;
}
.hero-subtitle {
    font-size:1.15rem; color:var(--gray-600); max-width:700px;
    margin:0 auto 20px;
}
.info-message {
    display:inline-flex; align-items:center; gap:10px;
    background:linear-gradient(135deg, #ecfdf5, #d1fae5);
    border:1px solid #a7f3d0; color:var(--success-dark);
    padding:12px 24px; border-radius:var(--border-radius-full);
    font-size:0.9rem; font-weight:500;
}

/* Converter Card */
.converter-card {
    background:white; border-radius:var(--border-radius-xl);
    box-shadow:var(--shadow-xl); overflow:hidden;
    max-width:700px; margin:0 auto;
    border:1px solid var(--gray-200);
    padding:24px;
}
.card-header {
    background:linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color:white; padding:24px 32px; text-align:center;
    margin:-24px -24px 24px -24px;
    border-radius:var(--border-radius-xl) var(--border-radius-xl) 0 0;
}
.card-header h2 { font-size:1.5rem; font-weight:700; display:flex; align-items:center; justify-content:center; gap:10px; }
.card-subtitle { font-size:0.9rem; opacity:0.9; margin-top:6px; }
.card-body { padding:24px; }

/* Upload Area */
.upload-section { margin-bottom:24px; }
.upload-area {
    border:3px dashed var(--gray-300); border-radius:var(--border-radius-lg);
    padding:48px 24px; text-align:center; cursor:pointer;
    transition:var(--transition-slow); background:var(--gray-50);
    position:relative;
}
.upload-area:hover, .upload-area.drag-over {
    border-color:var(--primary); background:rgba(79,70,229,0.03);
    transform:translateY(-2px);
}
.upload-area.has-file {
    border-color:var(--success); border-style:solid;
    background:linear-gradient(135deg, #ecfdf5, #f0fdf4);
}
.upload-icon {
    font-size:3.5rem; color:var(--primary); margin-bottom:16px;
    transition:var(--transition);
}
.upload-area:hover .upload-icon { transform:scale(1.1); }
.upload-area h3 { font-size:1.2rem; font-weight:600; color:var(--gray-800); margin-bottom:8px; }
.upload-text { color:var(--gray-500); font-size:0.9rem; }
.file-input { display:none; }

/* Buttons */
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:12px 28px; border-radius:var(--border-radius); font-weight:600;
    font-size:0.95rem; cursor:pointer; transition:var(--transition);
    border:none; text-decoration:none; font-family:inherit;
}
.btn-primary {
    background:linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color:white; box-shadow:var(--shadow-primary);
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(79,70,229,0.4); }
.btn-primary:disabled { opacity:0.6; cursor:not-allowed; transform:none; }
.btn-success {
    background:linear-gradient(135deg, var(--success) 0%, var(--success-dark) 100%);
    color:white; box-shadow:0 4px 14px rgba(16,185,129,0.3);
}
.btn-success:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(16,185,129,0.4); }
.btn-outline {
    background:white; color:var(--gray-700); border:2px solid var(--gray-300);
}
.btn-outline:hover { border-color:var(--primary); color:var(--primary); }
.btn-danger {
    background:linear-gradient(135deg, var(--danger) 0%, var(--danger-dark) 100%);
    color:white;
}
.btn-lg { padding:16px 36px; font-size:1.1rem; border-radius:var(--border-radius-lg); }
.btn-sm { padding:8px 16px; font-size:0.85rem; }
.btn-block { width:100%; }

/* File Info */
.file-info {
    background:var(--gray-50); border-radius:var(--border-radius);
    padding:16px 20px; margin-bottom:20px; display:flex;
    align-items:center; justify-content:space-between;
    border:1px solid var(--gray-200);
}
.file-info-details { display:flex; align-items:center; gap:12px; }
.file-info-icon {
    width:44px; height:44px; background:linear-gradient(135deg, var(--danger), #dc2626);
    border-radius:var(--border-radius-sm); display:flex;
    align-items:center; justify-content:center; color:white; font-size:1.2rem;
}
.file-info-name { font-weight:600; color:var(--gray-800); }
.file-info-size { font-size:0.85rem; color:var(--gray-500); }
.file-remove-btn {
    background:none; border:none; color:var(--gray-400); cursor:pointer;
    font-size:1.2rem; padding:8px; transition:var(--transition);
}
.file-remove-btn:hover { color:var(--danger); }

/* Options */
.options-section { margin-bottom:24px; }
.option-group { margin-bottom:20px; }
.option-label {
    display:block; font-weight:600; color:var(--gray-700);
    margin-bottom:8px; font-size:0.9rem;
}
.option-hint { font-size:0.8rem; color:var(--gray-500); margin-top:4px; }

/* Format Grid */
.format-grid {
    display:grid; grid-template-columns:repeat(auto-fill, minmax(100px, 1fr));
    gap:10px;
}
.format-option {
    padding:12px; border:2px solid var(--gray-200); border-radius:var(--border-radius);
    text-align:center; cursor:pointer; transition:var(--transition);
    font-weight:500; font-size:0.9rem; background:white;
}
.format-option:hover { border-color:var(--primary-light); }
.format-option.active {
    border-color:var(--primary); background:rgba(79,70,229,0.05);
    color:var(--primary); font-weight:600;
}

/* Range Slider */
.range-container { position:relative; padding:10px 0; }
.range-slider {
    width:100%; height:8px; -webkit-appearance:none; appearance:none;
    background:linear-gradient(to right, var(--success), var(--warning), var(--danger));
    border-radius:4px; outline:none; cursor:pointer;
}
.range-slider::-webkit-slider-thumb {
    -webkit-appearance:none; width:24px; height:24px;
    background:white; border:3px solid var(--primary);
    border-radius:50%; cursor:pointer; box-shadow:var(--shadow);
}
.range-labels { display:flex; justify-content:space-between; font-size:0.8rem; color:var(--gray-500); margin-top:6px; }

/* Progress */
.progress-section { margin:24px 0; }
.progress-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.progress-title { font-weight:600; color:var(--gray-800); }
.progress-percent { font-weight:700; color:var(--primary); font-size:1.1rem; }
.progress-bar {
    width:100%; height:12px; background:var(--gray-200);
    border-radius:6px; overflow:hidden;
}
.progress-fill {
    height:100%; background:linear-gradient(90deg, var(--primary), var(--secondary));
    border-radius:6px; transition:width 0.3s ease; width:0%;
}
.progress-status { font-size:0.85rem; color:var(--gray-500); margin-top:8px; text-align:center; }

/* Results */
.results-section { margin:24px 0; }
.result-card {
    background:linear-gradient(135deg, #ecfdf5, #f0fdf4);
    border:1px solid #a7f3d0; border-radius:var(--border-radius-lg);
    padding:24px; text-align:center;
}
.result-icon { font-size:3rem; margin-bottom:12px; }
.result-title { font-size:1.3rem; font-weight:700; color:var(--success-dark); margin-bottom:8px; }
.result-stats { display:flex; justify-content:center; gap:32px; margin:16px 0; }
.result-stat { text-align:center; }
.result-stat-value { font-size:1.5rem; font-weight:700; color:var(--gray-900); }
.result-stat-label { font-size:0.8rem; color:var(--gray-500); }
.result-actions { display:flex; gap:12px; justify-content:center; margin-top:20px; flex-wrap:wrap; }

/* Multi-file list */
.file-list { margin-bottom:16px; }
.file-list-item {
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 16px; background:var(--gray-50); border-radius:var(--border-radius-sm);
    margin-bottom:8px; border:1px solid var(--gray-200);
}
.file-list-item-name { font-weight:500; font-size:0.9rem; display:flex; align-items:center; gap:8px; }
.file-list-item-size { font-size:0.8rem; color:var(--gray-500); }
.file-list-item-remove {
    background:none; border:none; color:var(--gray-400); cursor:pointer;
    font-size:1rem; padding:4px 8px; transition:var(--transition);
}
.file-list-item-remove:hover { color:var(--danger); }

/* Tabs */
.tabs { display:flex; gap:4px; margin-bottom:20px; background:var(--gray-100); padding:4px; border-radius:var(--border-radius); }
.tab {
    flex:1; padding:10px 16px; text-align:center; cursor:pointer;
    border-radius:var(--border-radius-sm); font-weight:500; font-size:0.9rem;
    transition:var(--transition); color:var(--gray-600);
}
.tab.active { background:white; color:var(--primary); box-shadow:var(--shadow-sm); }
.tab:hover:not(.active) { color:var(--gray-800); }

/* Input fields */
.input-group { margin-bottom:16px; }
.input-label { display:block; font-weight:600; color:var(--gray-700); margin-bottom:6px; font-size:0.9rem; }
.input-field {
    width:100%; padding:12px 16px; border:2px solid var(--gray-300);
    border-radius:var(--border-radius); font-size:0.95rem; font-family:inherit;
    transition:var(--transition); background:white;
}
.input-field:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(79,70,229,0.1); }
.input-field:disabled { background:var(--gray-100); cursor:not-allowed; }
textarea.input-field { resize:vertical; min-height:100px; }
select.input-field { cursor:pointer; }

/* Checkbox & Radio */
.checkbox-group, .radio-group { display:flex; flex-wrap:wrap; gap:12px; }
.checkbox-label, .radio-label {
    display:flex; align-items:center; gap:8px; cursor:pointer;
    padding:8px 16px; border:2px solid var(--gray-200); border-radius:var(--border-radius-sm);
    transition:var(--transition); font-size:0.9rem;
}
.checkbox-label:hover, .radio-label:hover { border-color:var(--primary-light); }
.checkbox-label input:checked + span, .radio-label input:checked + span { color:var(--primary); font-weight:600; }

/* How it works */
.how-it-works { margin:60px 0; }
.how-title { text-align:center; font-size:1.8rem; font-weight:700; color:var(--gray-900); margin-bottom:40px; }
.steps-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:24px; }
.step-card {
    background:white; border-radius:var(--border-radius-lg); padding:28px 24px;
    text-align:center; box-shadow:var(--shadow); border:1px solid var(--gray-200);
    transition:var(--transition-slow);
}
.step-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.step-number {
    width:48px; height:48px; background:linear-gradient(135deg, var(--primary), var(--secondary));
    color:white; border-radius:50%; display:flex; align-items:center;
    justify-content:center; font-size:1.3rem; font-weight:700; margin:0 auto 16px;
}
.step-title { font-weight:700; color:var(--gray-800); margin-bottom:8px; }
.step-desc { font-size:0.9rem; color:var(--gray-500); line-height:1.5; }

/* Features */
.features-section { margin:60px 0; }
.features-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:20px; }
.feature-card {
    background:white; border-radius:var(--border-radius); padding:24px;
    box-shadow:var(--shadow-sm); border:1px solid var(--gray-200);
    display:flex; gap:16px; align-items:flex-start; transition:var(--transition);
}
.feature-card:hover { box-shadow:var(--shadow); }
.feature-icon {
    width:44px; height:44px; border-radius:var(--border-radius-sm);
    display:flex; align-items:center; justify-content:center;
    font-size:1.2rem; flex-shrink:0;
}
.feature-icon.blue { background:#dbeafe; color:#2563eb; }
.feature-icon.green { background:#d1fae5; color:#059669; }
.feature-icon.purple { background:#ede9fe; color:#7c3aed; }
.feature-icon.orange { background:#ffedd5; color:#ea580c; }
.feature-icon.red { background:#fee2e2; color:#dc2626; }
.feature-title { font-weight:600; color:var(--gray-800); margin-bottom:4px; }
.feature-desc { font-size:0.85rem; color:var(--gray-500); }

/* FAQ */
.faq-section { margin:60px 0; max-width:800px; margin-left:auto; margin-right:auto; }
.faq-title { text-align:center; font-size:1.8rem; font-weight:700; color:var(--gray-900); margin-bottom:32px; }
.faq-item {
    background:white; border-radius:var(--border-radius); margin-bottom:12px;
    border:1px solid var(--gray-200); overflow:hidden;
}
.faq-question {
    padding:18px 24px; cursor:pointer; display:flex; justify-content:space-between;
    align-items:center; font-weight:600; color:var(--gray-800);
    transition:var(--transition);
}
.faq-question:hover { color:var(--primary); }
.faq-answer { padding:0 24px 18px; color:var(--gray-600); font-size:0.9rem; line-height:1.6; display:none; }
.faq-item.active .faq-answer { display:block; }
.faq-item.active .faq-question { color:var(--primary); }

/* Footer */
.footer {
    background:var(--gray-900); color:white; padding:48px 0 24px; margin-top:60px;
}
.footer-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:32px; margin-bottom:32px; }
.footer-col h4 { font-weight:700; margin-bottom:16px; font-size:1rem; }
.footer-col a {
    display:block; color:var(--gray-400); text-decoration:none;
    padding:4px 0; font-size:0.9rem; transition:var(--transition);
}
.footer-col a:hover { color:white; }
.footer-bottom {
    text-align:center; padding-top:24px; border-top:1px solid var(--gray-700);
    color:var(--gray-500); font-size:0.85rem;
}

/* Toast */
.toast-container { position:fixed; top:20px; right:20px; z-index:1000; display:flex; flex-direction:column; gap:8px; }
.toast {
    padding:14px 20px; border-radius:var(--border-radius); color:white;
    font-weight:500; font-size:0.9rem; box-shadow:var(--shadow-lg);
    animation:slideIn 0.3s ease; display:flex; align-items:center; gap:10px;
    max-width:400px;
}
.toast-success { background:linear-gradient(135deg, var(--success), var(--success-dark)); }
.toast-error { background:linear-gradient(135deg, var(--danger), var(--danger-dark)); }
.toast-info { background:linear-gradient(135deg, var(--info), #1d4ed8); }
@keyframes slideIn { from { transform:translateX(100%); opacity:0; } to { transform:translateX(0); opacity:1; } }

/* Animations */
.fade-in { animation:fadeIn 0.5s ease; }
@keyframes fadeIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }

/* Hidden */
.hidden { display:none !important; }

/* Text helpers */
.text-center { text-align:center; }
.text-sm { font-size:0.85rem; }
.text-xs { font-size:0.75rem; }
.font-bold { font-weight:700; }
.mt-2 { margin-top:8px; }
.mt-4 { margin-top:16px; }
.mb-2 { margin-bottom:8px; }
.mb-4 { margin-bottom:16px; }
.gap-2 { gap:8px; }
.flex { display:flex; }
.flex-wrap { flex-wrap:wrap; }
.items-center { align-items:center; }
.justify-center { justify-content:center; }
.justify-between { justify-content:space-between; }

/* Responsive */
@media (max-width:768px) {
    .hero-title { font-size:1.8rem; }
    .nav-links { display:none; }
    .mobile-menu-btn { display:block; }
    .mobile-nav.active { display:flex; }
    .card-body { padding:20px; }
    .result-stats { flex-direction:column; gap:12px; }
    .steps-grid { grid-template-columns:1fr; }
    .features-grid { grid-template-columns:1fr; }
    .footer-grid { grid-template-columns:1fr 1fr; }
    .format-grid { grid-template-columns:repeat(3, 1fr); }
}

@media (max-width:480px) {
    .hero-title { font-size:1.5rem; }
    .upload-area { padding:32px 16px; }
    .result-actions { flex-direction:column; }
    .footer-grid { grid-template-columns:1fr; }
    .format-grid { grid-template-columns:repeat(2, 1fr); }
}

/* Page size presets */
.size-presets { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.size-preset {
    padding:8px 16px; border:2px solid var(--gray-200); border-radius:var(--border-radius-sm);
    cursor:pointer; font-size:0.85rem; font-weight:500; transition:var(--transition);
    background:white;
}
.size-preset:hover { border-color:var(--primary-light); }
.size-preset.active { border-color:var(--primary); background:rgba(79,70,229,0.05); color:var(--primary); }

/* Color picker */
.color-presets { display:flex; gap:8px; flex-wrap:wrap; }
.color-preset {
    width:32px; height:32px; border-radius:50%; cursor:pointer;
    border:3px solid transparent; transition:var(--transition);
}
.color-preset:hover { transform:scale(1.15); }
.color-preset.active { border-color:var(--primary); box-shadow:0 0 0 3px rgba(79,70,229,0.2); }

/* Comparison */
.comparison-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:16px 0; }
.comparison-item {
    background:var(--gray-50); border-radius:var(--border-radius);
    padding:16px; text-align:center; border:1px solid var(--gray-200);
}
.comparison-label { font-size:0.8rem; color:var(--gray-500); margin-bottom:4px; }
.comparison-value { font-size:1.2rem; font-weight:700; color:var(--gray-900); }

/* Badge */
.badge {
    display:inline-block; padding:4px 12px; border-radius:var(--border-radius-full);
    font-size:0.75rem; font-weight:600;
}
.badge-new { background:#dbeafe; color:#1d4ed8; }
.badge-popular { background:#fef3c7; color:#92400e; }
.badge-pro { background:#ede9fe; color:#6d28d9; }

/* Ad containers */
.ad-container { margin:24px auto; max-width:728px; text-align:center; }
.ad-label { font-size:0.7rem; color:var(--gray-400); text-transform:uppercase; letter-spacing:1px; margin-bottom:4px; }
.ad-placeholder {
    background:var(--gray-100); border:1px dashed var(--gray-300);
    border-radius:var(--border-radius); padding:20px; min-height:90px;
    display:flex; align-items:center; justify-content:center;
    color:var(--gray-400); font-size:0.85rem;
}

/* ============================================
   BREADCRUMB NAVIGATION
   ============================================ */
.breadcrumb {
    display:flex; align-items:center; flex-wrap:wrap; gap:8px;
    padding:12px 0; font-size:0.875rem; color:var(--gray-500);
}
.breadcrumb a {
    color:var(--gray-500); text-decoration:none; transition:color 0.2s;
}
.breadcrumb a:hover { color:var(--primary); }
.breadcrumb .separator { color:var(--gray-300); font-size:0.7rem; }
.breadcrumb .current { color:var(--gray-900); font-weight:600; }

/* ============================================
   SKELETON LOADING
   ============================================ */
.skeleton {
    background:linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 50%, var(--gray-100) 75%);
    background-size:200% 100%; animation:skeletonShimmer 1.5s ease-in-out infinite;
    border-radius:var(--border-radius);
}
.skeleton-text { height:16px; margin-bottom:8px; }
.skeleton-text-sm { height:12px; width:60%; margin-bottom:8px; }
.skeleton-title { height:24px; width:40%; margin-bottom:12px; }
.skeleton-avatar { width:48px; height:48px; border-radius:50%; }
.skeleton-card { height:120px; }
.skeleton-btn { height:44px; width:160px; border-radius:var(--border-radius); }
@keyframes skeletonShimmer {
    0% { background-position:200% 0; }
    100% { background-position:-200% 0; }
}

/* ============================================
   STATS COUNTER SECTION
   ============================================ */
.stats-section {
    background:linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    padding:48px 0; margin:40px 0; border-radius:var(--border-radius-xl);
    color:white;
}
.stats-grid {
    display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
    gap:32px; text-align:center;
}
.stat-item { padding:16px; }
.stat-number {
    font-size:2.5rem; font-weight:800; line-height:1.2;
    background:linear-gradient(180deg, #fff 0%, rgba(255,255,255,0.8) 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text;
}
.stat-label { font-size:0.95rem; opacity:0.85; margin-top:4px; font-weight:500; }

/* ============================================
   TRUST BADGES / SECURITY SEALS
   ============================================ */
.trust-badges {
    display:flex; justify-content:center; flex-wrap:wrap; gap:24px;
    padding:24px 0; margin:24px 0;
}
.trust-badge {
    display:flex; align-items:center; gap:8px;
    padding:10px 20px; background:white; border-radius:var(--border-radius-full);
    box-shadow:var(--shadow-sm); font-size:0.875rem; font-weight:500;
    color:var(--gray-700);
}
.trust-badge i { color:var(--success); font-size:1rem; }

/* ============================================
   TOOLTIP
   ============================================ */
.tooltip-wrapper { position:relative; display:inline-block; }
.tooltip-content {
    position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
    background:var(--gray-900); color:white; padding:6px 12px; border-radius:6px;
    font-size:0.75rem; white-space:nowrap; pointer-events:none; opacity:0;
    transition:opacity 0.2s; z-index:100;
}
.tooltip-content::after {
    content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%);
    border:5px solid transparent; border-top-color:var(--gray-900);
}
.tooltip-wrapper:hover .tooltip-content { opacity:1; }

/* ============================================
   EMPTY STATE
   ============================================ */
.empty-state {
    text-align:center; padding:48px 24px; color:var(--gray-400);
}
.empty-state-icon { font-size:3rem; margin-bottom:16px; opacity:0.5; }
.empty-state-title { font-size:1.1rem; font-weight:600; color:var(--gray-500); margin-bottom:8px; }
.empty-state-text { font-size:0.9rem; max-width:400px; margin:0 auto; }

/* ============================================
   BACK TO TOP BUTTON
   ============================================ */
.back-to-top {
    position:fixed; bottom:30px; right:30px; width:48px; height:48px;
    background:var(--primary); color:white; border:none; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:1.2rem; cursor:pointer; box-shadow:var(--shadow-lg);
    opacity:0; visibility:hidden; transform:translateY(20px);
    transition:all 0.3s ease; z-index:999;
}
.back-to-top.visible { opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover { background:var(--primary-dark); transform:translateY(-3px); }

/* ============================================
   RATING STARS
   ============================================ */
.rating { display:inline-flex; align-items:center; gap:4px; }
.rating-stars { color:#f59e0b; font-size:1rem; letter-spacing:2px; }
.rating-value { font-weight:700; color:var(--gray-900); font-size:0.95rem; }
.rating-count { color:var(--gray-500); font-size:0.85rem; }

/* ============================================
   COPY BUTTON / CLIPBOARD
   ============================================ */
.copy-btn {
    display:inline-flex; align-items:center; gap:6px;
    padding:6px 14px; background:var(--gray-100); border:1px solid var(--gray-200);
    border-radius:var(--border-radius); font-size:0.8rem; color:var(--gray-600);
    cursor:pointer; transition:all 0.2s;
}
.copy-btn:hover { background:var(--gray-200); color:var(--gray-900); }
.copy-btn.copied { background:#dcfce7; border-color:#86efac; color:#166534; }

/* ============================================
   ACCESSIBILITY: FOCUS-VISIBLE & SKIP LINK
   ============================================ */
.skip-link {
    position:absolute; top:-100px; left:16px; background:var(--primary);
    color:white; padding:8px 16px; border-radius:0 0 var(--border-radius) var(--border-radius);
    z-index:10000; font-size:0.875rem; font-weight:500; text-decoration:none;
    transition:top 0.2s;
}
.skip-link:focus { top:0; }

*:focus-visible {
    outline:2px solid var(--primary); outline-offset:2px; border-radius:4px;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration:0.01ms !important; animation-iteration-count:1 !important;
        transition-duration:0.01ms !important;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    .header, .footer, .ad-container, .back-to-top, .mobile-nav, .mobile-menu-btn,
    .skip-link, .toast-container { display:none !important; }
    body { background:white; color:black; }
    .converter-card { box-shadow:none; border:1px solid #ccc; }
}

/* ============================================
   BEM CLASS ALIASES - Pattern B Tools (29 tools)
   Maps BEM classes to existing utility classes
   ============================================ */

/* Header BEM */
.header__container { display:flex; justify-content:space-between; align-items:center; padding:12px 0; max-width:1200px; margin:0 auto; }
.header__logo { display:flex; align-items:center; gap:12px; text-decoration:none; color:white; font-size:1.4rem; font-weight:700; }
.header__logo-icon { width:42px; height:42px; background:rgba(255,255,255,0.2); border-radius:var(--border-radius); display:flex; align-items:center; justify-content:center; font-size:1.2rem; backdrop-filter:blur(10px); }
.header__logo-text { font-weight:700; }
.header__nav { display:flex; gap:8px; align-items:center; }
.header__nav-link { color:rgba(255,255,255,0.9); text-decoration:none; padding:8px 16px; border-radius:var(--border-radius-sm); font-weight:500; font-size:0.9rem; transition:var(--transition); display:flex; align-items:center; gap:6px; }
.header__nav-link:hover { background:rgba(255,255,255,0.15); color:white; }
.header__menu-btn { display:none; background:none; border:none; color:white; font-size:1.5rem; cursor:pointer; padding:8px; flex-direction:column; gap:4px; }
.header__menu-btn span { display:block; width:24px; height:2px; background:white; border-radius:2px; transition:var(--transition); }

/* Hero BEM */
.hero { text-align:center; padding:48px 20px 32px; }
.hero__container { max-width:1200px; margin:0 auto; }
.hero__title { font-size:2.5rem; font-weight:800; color:var(--gray-900); margin-bottom:12px; line-height:1.2; }
.hero__subtitle { font-size:1.15rem; color:var(--gray-600); max-width:700px; margin:0 auto 20px; }

/* Converter BEM */
.converter { padding:0 20px 40px; }
.converter__container { max-width:700px; margin:0 auto; }

/* Upload Area BEM */
.upload-area__icon { font-size:3.5rem; color:var(--primary); margin-bottom:16px; transition:var(--transition); }
.upload-area:hover .upload-area__icon { transform:scale(1.1); }
.upload-area__title { font-size:1.2rem; font-weight:600; color:var(--gray-800); margin-bottom:8px; }
.upload-area__desc { color:var(--gray-500); font-size:0.9rem; }

/* File Info BEM */
.file-info__icon { width:44px; height:44px; background:linear-gradient(135deg, var(--danger), #dc2626); border-radius:var(--border-radius-sm); display:flex; align-items:center; justify-content:center; color:white; font-size:1.2rem; flex-shrink:0; }
.file-info__details { display:flex; flex-direction:column; gap:2px; flex:1; }
.file-info__name { font-weight:600; color:var(--gray-800); }
.file-info__meta { font-size:0.85rem; color:var(--gray-500); }
.file-info__remove { background:none; border:none; color:var(--gray-400); cursor:pointer; font-size:1.2rem; padding:8px; transition:var(--transition); }
.file-info__remove:hover { color:var(--danger); }

/* Progress Bar BEM */
.progress-bar__fill { height:100%; background:linear-gradient(90deg, var(--primary), var(--secondary)); border-radius:6px; transition:width 0.3s ease; width:0%; }

/* Results Card BEM */
.results-card { background:linear-gradient(135deg, #ecfdf5, #f0fdf4); border:1px solid #a7f3d0; border-radius:var(--border-radius-lg); padding:24px; text-align:center; }
.results-card__icon { font-size:3rem; margin-bottom:12px; }
.results-card__info { color:var(--gray-600); font-size:0.9rem; }

/* How It Works BEM */
.how-it-works { margin:60px 0; }
.how-it-works__container { max-width:1200px; margin:0 auto; padding:0 20px; }
.section-title { text-align:center; font-size:1.8rem; font-weight:700; color:var(--gray-900); margin-bottom:40px; }

/* Step Card BEM */
.step-card__number { width:48px; height:48px; background:linear-gradient(135deg, var(--primary), var(--secondary)); color:white; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.3rem; font-weight:700; margin:0 auto 16px; }
.step-card__title { font-weight:700; color:var(--gray-800); margin-bottom:8px; }
.step-card__desc { font-size:0.9rem; color:var(--gray-500); line-height:1.5; }

/* Features BEM */
.features { margin:60px 0; }
.features__container { max-width:1200px; margin:0 auto; padding:0 20px; }
.feature-card__icon { width:44px; height:44px; border-radius:var(--border-radius-sm); display:flex; align-items:center; justify-content:center; font-size:1.5rem; flex-shrink:0; background:#dbeafe; }
.feature-card__title { font-weight:600; color:var(--gray-800); margin-bottom:4px; }
.feature-card__desc { font-size:0.85rem; color:var(--gray-500); }

/* FAQ BEM */
.faq { margin:60px 0; }
.faq__container { max-width:800px; margin:0 auto; padding:0 20px; }
.faq-item__question { padding:18px 24px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; font-weight:600; color:var(--gray-800); transition:var(--transition); width:100%; background:none; border:none; font-size:1rem; font-family:inherit; text-align:left; }
.faq-item__question:hover { color:var(--primary); }
.faq-item__answer { padding:0 24px 18px; color:var(--gray-600); font-size:0.9rem; line-height:1.6; display:none; }
.faq-item.active .faq-item__answer { display:block; }
.faq-item.active .faq-item__question { color:var(--primary); }

/* Footer BEM */
.footer__container { max-width:1200px; margin:0 auto; padding:0 20px; text-align:center; }
.footer__brand { font-weight:700; font-size:1.1rem; margin-bottom:8px; }
.footer__links { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-bottom:16px; }
.footer__links a { color:var(--gray-400); text-decoration:none; font-size:0.9rem; transition:var(--transition); }
.footer__links a:hover { color:white; }
.footer__bottom { text-align:center; padding-top:24px; border-top:1px solid var(--gray-700); color:var(--gray-500); font-size:0.85rem; }

/* ============================================
   TOOL-SPECIFIC BEM CLASSES
   ============================================ */

/* Size Presets (change-page-size) */
.size-preset__name { font-weight:600; font-size:0.85rem; }
.size-preset__dims { font-size:0.75rem; color:var(--gray-500); }

/* Conversion Stats (various tools) */
.conv-stat__value { font-size:1.5rem; font-weight:700; color:var(--primary); }
.conv-stat__label { font-size:0.8rem; color:var(--gray-500); margin-top:4px; }

/* Spellcheck Stats */
.sp-stat__value { font-size:1.5rem; font-weight:700; color:var(--primary); }
.sp-stat__label { font-size:0.8rem; color:var(--gray-500); margin-top:4px; }

/* Text Preview */
.text-preview__content { background:var(--gray-50); border:1px solid var(--gray-200); border-radius:var(--border-radius); padding:16px; max-height:300px; overflow-y:auto; font-size:0.9rem; line-height:1.6; white-space:pre-wrap; }

/* URL Input (webpage-to-pdf) */
.url-input-group { display:flex; gap:8px; }
.url-input-area { flex:1; padding:12px 16px; border:2px solid var(--gray-300); border-radius:var(--border-radius); font-size:0.95rem; font-family:inherit; transition:var(--transition); }
.url-input-area:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(79,70,229,0.1); }

/* Standard Options (validate-pdfa) */
.standard-option { padding:12px 16px; border:2px solid var(--gray-200); border-radius:var(--border-radius); cursor:pointer; transition:var(--transition); }
.standard-option:hover { border-color:var(--primary-light); }
.standard-option.active { border-color:var(--primary); background:rgba(79,70,229,0.05); }
.standard-option__name { font-weight:600; color:var(--gray-800); font-size:0.9rem; }
.standard-option__desc { font-size:0.8rem; color:var(--gray-500); margin-top:4px; }

/* Summary Stats (summarize-pdf) */
.summary-stat { text-align:center; padding:12px; background:var(--gray-50); border-radius:var(--border-radius-sm); }
.summary-stat__value { font-size:1.5rem; font-weight:700; color:var(--primary); }
.summary-stat__label { font-size:0.8rem; color:var(--gray-500); margin-top:4px; }

/* Check Items (spellcheck-pdf) */
.check-item { display:flex; align-items:flex-start; gap:12px; padding:12px; background:var(--gray-50); border-radius:var(--border-radius-sm); margin-bottom:8px; }
.check-item__icon { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.9rem; flex-shrink:0; }
.check-item__content { flex:1; }
.check-item__name { font-weight:600; color:var(--gray-800); font-size:0.9rem; }
.check-item__detail { font-size:0.8rem; color:var(--gray-500); margin-top:2px; }

/* Similarity Bar (compare-pdfs) */
.similarity-bar { width:100%; height:12px; background:var(--gray-200); border-radius:6px; overflow:hidden; }
.similarity-bar__fill { height:100%; background:linear-gradient(90deg, var(--success), var(--primary)); border-radius:6px; transition:width 0.5s ease; }

/* Stat Card (various tools) */
.stat-card { background:var(--gray-50); border-radius:var(--border-radius-sm); padding:14px; text-align:center; }
.stat-card__value { font-size:1.5rem; font-weight:700; color:var(--primary); }
.stat-card__label { font-size:0.8rem; color:var(--gray-500); margin-top:4px; }

/* Upload Box (pdf-creator, jpg-to-pdf, png-to-pdf) */
.upload-box { border:3px dashed var(--gray-300); border-radius:var(--border-radius-lg); padding:48px 24px; text-align:center; cursor:pointer; transition:var(--transition-slow); background:var(--gray-50); }
.upload-box:hover { border-color:var(--primary); background:rgba(79,70,229,0.03); }
.upload-box__label { display:block; cursor:pointer; }
.upload-box__placeholder { pointer-events:none; }
.upload-box__icon { font-size:3.5rem; color:var(--primary); margin-bottom:16px; }
.upload-box__title { font-size:1.2rem; font-weight:600; color:var(--gray-800); margin-bottom:8px; }
.upload-box__desc { color:var(--gray-500); font-size:0.9rem; }
.upload-box__file { display:flex; align-items:center; gap:12px; padding:12px 16px; background:var(--gray-50); border-radius:var(--border-radius-sm); border:1px solid var(--gray-200); }
.upload-box__file-name { font-weight:500; font-size:0.9rem; color:var(--gray-800); }
.upload-box__file-meta { font-size:0.8rem; color:var(--gray-500); }
.upload-box__file-remove { background:none; border:none; color:var(--gray-400); cursor:pointer; font-size:1.1rem; padding:4px 8px; transition:var(--transition); margin-left:auto; }
.upload-box__file-remove:hover { color:var(--danger); }

/* Size Preview (crop-pdf) */
.size-preview { display:flex; gap:16px; align-items:center; justify-content:center; padding:16px; background:var(--gray-50); border-radius:var(--border-radius); }
.size-preview__box { border:2px solid var(--primary); background:rgba(79,70,229,0.05); display:flex; align-items:center; justify-content:center; font-size:0.8rem; color:var(--primary); font-weight:600; }
.size-preview__label { font-size:0.85rem; color:var(--gray-600); }

/* Audio Preview (pdf-to-speech, speech-to-text) */
.audio-preview { display:flex; align-items:center; gap:16px; padding:16px; background:var(--gray-50); border-radius:var(--border-radius); }
.audio-preview__icon { width:48px; height:48px; background:linear-gradient(135deg, var(--primary), var(--secondary)); border-radius:50%; display:flex; align-items:center; justify-content:center; color:white; font-size:1.2rem; flex-shrink:0; }

/* Options Title (used in Pattern B tools) */
.options-title { font-weight:600; color:var(--gray-700); margin-bottom:12px; font-size:0.95rem; }

/* Conversion Options Container (Pattern B tools) */
.conversion-options { margin:20px 0; padding:20px; background:var(--gray-50); border-radius:var(--border-radius); border:1px solid var(--gray-200); }

/* Tab Group (Pattern B tools: orientation, page, unit selectors) */
.tab-group { display:flex; gap:4px; margin-bottom:16px; background:var(--gray-100); padding:4px; border-radius:var(--border-radius); }
.tab-btn { flex:1; padding:10px 16px; text-align:center; cursor:pointer; border-radius:var(--border-radius-sm); font-weight:500; font-size:0.9rem; transition:var(--transition); color:var(--gray-600); background:none; border:none; font-family:inherit; }
.tab-btn.active { background:white; color:var(--primary); box-shadow:var(--shadow-sm); }
.tab-btn:hover:not(.active) { color:var(--gray-800); }

/* BEM Button Modifier: btn--large (Pattern B tools) */
.btn--large { padding:16px 36px; font-size:1.1rem; border-radius:var(--border-radius-lg); }

/* Form elements used in Pattern B tools */
.form-group { margin-bottom:16px; }
.form-label { display:block; font-weight:600; color:var(--gray-700); margin-bottom:6px; font-size:0.9rem; }
.form-select { width:100%; padding:12px 16px; border:2px solid var(--gray-300); border-radius:var(--border-radius); font-size:0.95rem; font-family:inherit; transition:var(--transition); background:white; cursor:pointer; }
.form-select:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(79,70,229,0.1); }

/* Results common BEM */
.results-icon { font-size:3rem; margin-bottom:12px; }
.results-title { font-size:1.3rem; font-weight:700; color:var(--success-dark); margin-bottom:8px; }
.results-details { color:var(--gray-600); font-size:0.9rem; margin-bottom:16px; }
.results-actions { display:flex; gap:12px; justify-content:center; margin-top:20px; flex-wrap:wrap; }

/* Progress text */
.progress-text { font-size:0.85rem; color:var(--gray-500); margin-top:8px; text-align:center; }

/* Range slider labels (quality bar) */
.range-labels { display:flex; justify-content:space-between; font-size:0.75rem; color:var(--gray-500); margin-top:4px; padding:0 2px; }

/* ============================================
   TEXT CONTAINMENT - Prevent overflow in all cards & boxes
   ============================================ */
.converter-card, .card-body, .card-header,
.upload-area, .upload-box,
.file-info, .file-info__details,
.file-list-item, .file-list-item-name,
.step-card, .step-card__title, .step-card__desc,
.feature-card, .feature-card__title, .feature-card__desc,
.faq-item, .faq-item__question, .faq-item__answer,
.result-card, .results-card,
.hero-section, .hero__container,
.conversion-options, .option-group,
.check-item, .check-item__content,
.stat-card, .summary-stat,
.size-preset, .standard-option {
    overflow-wrap: break-word;
}

/* Feature card: wrap flex children so icon + text stack properly */
.feature-card {
    flex-wrap: wrap;
}
.feature-card > h3,
.feature-card > h4,
.feature-card > p {
    flex: 1 1 calc(100% - 60px);
    min-width: 0;
    margin: 0;
}

/* Ensure buttons don't overflow their containers */
.btn, .btn--large, .btn-primary, .btn-outline, .btn-success, .btn-danger,
.btn-lg, .btn-sm, .btn-block {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Responsive overrides for BEM classes */
@media (max-width:768px) {
    .hero__title { font-size:1.8rem; }
    .header__nav { display:none; }
    .header__menu-btn { display:flex; }
    .header__nav.active { display:flex; flex-direction:column; position:absolute; top:100%; left:0; right:0; background:var(--gray-900); padding:16px; gap:4px; }
    .header__nav.active .header__nav-link { padding:12px 16px; border-radius:var(--border-radius-sm); }
    .steps-grid { grid-template-columns:1fr; }
    .features-grid { grid-template-columns:1fr; }
    .footer__links { flex-direction:column; align-items:center; }
    .url-input-group { flex-direction:column; }
}

@media (max-width:480px) {
    .hero__title { font-size:1.5rem; }
    .results-actions { flex-direction:column; }
}