<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SynNova - Biblioteca Oficial de Logos</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
            background: #f5f7fa;
            line-height: 1.6;
            color: #333;
            overflow-x: hidden;
            -webkit-text-size-adjust: 100%;
            -webkit-tap-highlight-color: rgba(8, 82, 99, 0.2);
            touch-action: manipulation;
        }

        /* Animação de Loading */
        .loading-screen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #085263 0%, #5F5F5F 100%);
            z-index: 9999;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            transition: opacity 0.5s ease, visibility 0.5s ease;
        }

        .loading-screen.fade-out {
            opacity: 0;
            visibility: hidden;
        }

        .loading-logo {
            width: 200px;
            height: auto;
            margin-bottom: 30px;
            animation: pulse 2s infinite;
        }

        .loading-text {
            color: white;
            font-size: 1.2rem;
            font-weight: 600;
            margin-bottom: 20px;
            animation: fadeInOut 1.5s infinite;
        }

        .loading-bar {
            width: 300px;
            height: 4px;
            background: rgba(255,255,255,0.2);
            border-radius: 2px;
            overflow: hidden;
        }

        .loading-progress {
            width: 0%;
            height: 100%;
            background: white;
            border-radius: 2px;
            animation: loadProgress 2s ease-in-out;
        }

        @keyframes pulse {
            0%, 100% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.05); opacity: 0.9; }
        }

        @keyframes fadeInOut {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }

        @keyframes loadProgress {
            0% { width: 0%; }
            50% { width: 75%; }
            100% { width: 100%; }
        }

        .header {
            background: linear-gradient(135deg, #085263 0%, #5F5F5F 100%);
            color: white;
            padding: 15px 20px;
            box-shadow: 0 2px 15px rgba(8, 82, 99, 0.2);
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .header-content {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 20px;
        }

        .header-brand {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .header-logo {
            height: 40px;
            width: auto;
        }

        .header-title {
            font-size: 1.6rem;
            font-weight: 700;
            margin: 0;
        }

        .header-actions {
            display: flex;
            align-items: center;
            gap: 25px;
            flex-wrap: wrap;
        }

        .header-stats {
            display: flex;
            gap: 15px;
            font-size: 0.9rem;
            font-weight: 500;
        }

        .portfolio-link {
            display: flex;
            align-items: center;
            gap: 8px;
            color: white;
            text-decoration: none;
            background: rgba(255,255,255,0.15);
            padding: 8px 16px;
            border-radius: 8px;
            font-weight: 600;
            font-size: 0.9rem;
            transition: all 0.3s ease;
            border: 1px solid rgba(255,255,255,0.2);
        }

        .portfolio-link:hover {
            background: rgba(255,255,255,0.25);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        }

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

        .controls-section {
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #f0f0f0;
        }

        .controls-section:last-child {
            margin-bottom: 0;
            padding-bottom: 0;
            border-bottom: none;
        }

        .section-title {
            font-size: 0.9rem;
            font-weight: 700;
            color: #085263;
            margin-bottom: 12px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .controls-row {
            display: flex;
            gap: 15px;
            align-items: center;
            flex-wrap: wrap;
        }

        .filter-group {
            display: flex;
            gap: 8px;
            align-items: center;
            flex-wrap: wrap;
        }

        .filter-group-inline {
            display: flex;
            gap: 20px;
            align-items: center;
            flex-wrap: wrap;
        }

        .search-box {
            flex: 1;
            min-width: 250px;
            position: relative;
        }

        .search-input {
            width: 100%;
            padding: 12px 40px 12px 16px;
            border: 2px solid #e1e8ed;
            border-radius: 8px;
            font-size: 14px;
            transition: border-color 0.2s;
        }

        .search-input:focus {
            outline: none;
            border-color: #085263;
            box-shadow: 0 0 0 3px rgba(8, 82, 99, 0.1);
        }

        .search-icon {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: #80BFD4;
        }

        .filter-btn {
            padding: 6px 14px;
            border: 2px solid #e1e8ed;
            background: white;
            border-radius: 20px;
            cursor: pointer;
            font-size: 12px;
            font-weight: 600;
            transition: all 0.2s;
            text-transform: uppercase;
            letter-spacing: 0.3px;
            white-space: nowrap;
        }

        .filter-btn:hover {
            background: #f8f9fa;
            border-color: #085263;
            color: #085263;
        }

        .filter-btn.active {
            background: #085263;
            color: white;
            border-color: #085263;
            box-shadow: 0 2px 8px rgba(8, 82, 99, 0.3);
        }

        .view-actions {
            display: flex;
            gap: 10px;
            align-items: center;
        }

        .view-toggle {
            display: flex;
            background: #f8f9fa;
            border-radius: 8px;
            padding: 4px;
            border: 1px solid #e1e8ed;
        }

        .view-btn {
            padding: 8px 12px;
            border: none;
            background: transparent;
            cursor: pointer;
            border-radius: 6px;
            transition: all 0.2s;
            font-size: 16px;
        }

        .view-btn.active {
            background: white;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            color: #085263;
        }

        .bulk-actions {
            display: flex;
            gap: 10px;
            align-items: center;
        }

        .select-btn {
            padding: 8px 16px;
            border: 2px solid #085263;
            background: transparent;
            color: #085263;
            border-radius: 6px;
            cursor: pointer;
            font-size: 12px;
            font-weight: 600;
            transition: all 0.2s;
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }

        .select-btn:hover {
            background: #085263;
            color: white;
        }

        /* Barra de Ações Dinâmica */
        .action-bar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background: linear-gradient(135deg, #085263, #80BFD4);
            color: white;
            z-index: 1001;
            box-shadow: 0 4px 20px rgba(8, 82, 99, 0.3);
            transform: translateY(-100%);
            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .action-bar:not(.hidden) {
            transform: translateY(0);
        }

        /* Ajuste para quando action bar está visível */
        body.action-bar-open {
            padding-top: 70px;
        }

        @media (max-width: 480px) {
            body.action-bar-open {
                padding-top: 90px;
            }
        }

        .action-bar-content {
            max-width: 1200px;
            margin: 0 auto;
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 20px;
        }

        .action-bar-info {
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 500;
        }

        .action-bar-info span#action-count {
            background: rgba(255, 255, 255, 0.2);
            padding: 4px 12px;
            border-radius: 20px;
            font-weight: 600;
            font-size: 14px;
        }

        .action-bar-buttons {
            display: flex;
            gap: 12px;
            align-items: center;
        }

        .action-btn {
            padding: 10px 20px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-weight: 600;
            font-size: 14px;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .action-btn.primary {
            background: rgba(255, 255, 255, 0.95);
            color: #085263;
        }

        .action-btn.primary:hover {
            background: white;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        .action-btn.secondary {
            background: rgba(255, 255, 255, 0.15);
            color: white;
            border: 1px solid rgba(255, 255, 255, 0.3);
        }

        .action-btn.secondary:hover {
            background: rgba(255, 255, 255, 0.25);
            transform: translateY(-1px);
        }

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

        .results-info {
            margin-bottom: 20px;
            color: #5F5F5F;
            font-size: 14px;
        }

        .logo-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 20px;
        }

        .logo-grid.list-view {
            grid-template-columns: 1fr;
        }

        .logo-card {
            background: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
            border: 2px solid transparent;
            position: relative;
            overflow: visible;
        }

        .logo-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(8, 82, 99, 0.15);
            border-color: #085263;
        }

        .logo-card.selected {
            border-color: #085263;
            background: rgba(8, 82, 99, 0.05);
            box-shadow: 0 4px 15px rgba(8, 82, 99, 0.2);
        }

        .logo-card.list-view {
            display: flex;
            align-items: center;
            gap: 20px;
            padding: 15px 20px;
        }

        .logo-preview-container {
            position: relative;
            margin-bottom: 15px;
            overflow: visible;
        }

        .logo-card.list-view .logo-preview-container {
            margin-bottom: 0;
            flex-shrink: 0;
            width: 80px;
            height: 60px;
            overflow: visible;
        }

        .logo-preview {
            width: 100%;
            height: 120px;
            object-fit: contain;
            border-radius: 8px;
            background: #f8f9fa;
            padding: 10px;
            cursor: pointer;
        }

        .logo-card.list-view .logo-preview {
            width: 80px;
            height: 60px;
        }

        .logo-info {
            flex: 1;
        }

        .logo-card.list-view .logo-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
        }

        .logo-title {
            font-size: 1rem;
            font-weight: 600;
            color: #393939;
            margin-bottom: 8px;
        }

        .logo-meta {
            display: flex;
            gap: 10px;
            align-items: center;
            margin-bottom: 12px;
        }

        .logo-format {
            background: #e74c3c;
            color: white;
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
        }

        .logo-format.svg { background: #2ecc71; }
        .logo-format.png { background: #f39c12; }
        .logo-format.psd { background: #9b59b6; }
        .logo-format.ai { background: #e67e22; }
        .logo-format.jpg { background: #1abc9c; }

        .logo-size {
            font-size: 12px;
            color: #80BFD4;
            background: #ecf0f1;
            padding: 3px 8px;
            border-radius: 4px;
        }

        .logo-actions {
            display: flex;
            gap: 8px;
            align-items: center;
        }

        .download-btn {
            background: #085263;
            color: white;
            border: none;
            padding: 10px 16px;
            border-radius: 6px;
            cursor: pointer;
            font-weight: 500;
            font-size: 13px;
            transition: all 0.2s;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }

        .download-btn:hover {
            background: #5F5F5F;
            transform: translateY(-1px);
        }

        .preview-btn {
            background: #80BFD4;
            color: white;
            border: none;
            padding: 10px;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .preview-btn:hover {
            background: #085263;
        }

        .select-checkbox {
            position: absolute;
            top: 12px;
            left: 12px;
            width: 20px;
            height: 20px;
            cursor: pointer;
            z-index: 10;
            appearance: none;
            -webkit-appearance: none;
            background: rgba(255, 255, 255, 0.95);
            border: 2px solid #085263;
            border-radius: 4px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
            transition: all 0.2s ease;
        }

        .select-checkbox:checked {
            background: #085263;
            border-color: #085263;
        }

        .select-checkbox:checked::after {
            content: '✓';
            display: block;
            color: white;
            font-size: 14px;
            font-weight: bold;
            text-align: center;
            line-height: 16px;
        }

        .select-checkbox:hover {
            transform: scale(1.1);
            box-shadow: 0 3px 8px rgba(8, 82, 99, 0.3);
        }

        .logo-card.list-view .select-checkbox {
            position: relative;
            top: auto;
            left: auto;
            margin-right: 10px;
            background: rgba(255, 255, 255, 0.95);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.8);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }

        .modal-content {
            background: white;
            padding: 20px;
            border-radius: 12px;
            max-width: 80%;
            max-height: 80%;
            text-align: center;
        }

        .modal-image {
            max-width: 100%;
            max-height: 60vh;
            object-fit: contain;
        }

        .close-modal {
            position: absolute;
            top: 20px;
            right: 30px;
            background: none;
            border: none;
            font-size: 30px;
            color: white;
            cursor: pointer;
        }

        .hidden {
            display: none !important;
        }

        .no-results {
            text-align: center;
            padding: 60px 20px;
            color: #5F5F5F;
        }

        .loading {
            text-align: center;
            padding: 40px;
            color: #5F5F5F;
        }

        /* Mobile First - Smartphones (até 480px) */
        @media (max-width: 480px) {
            .container {
                padding: 15px;
            }

            .header {
                padding: 15px 0;
            }

            .header-content {
                flex-direction: column;
                gap: 12px;
                padding: 0 15px;
            }

            .header-brand {
                text-align: center;
            }

            .header-logo {
                height: 35px;
            }

            .header-title {
                font-size: 1.2rem;
                margin-left: 8px;
            }

            .header-actions {
                flex-direction: column;
                gap: 8px;
                align-items: center;
            }

            .header-stats {
                font-size: 0.8rem;
                text-align: center;
            }

            .portfolio-link {
                font-size: 0.75rem;
                padding: 6px 12px;
            }

                         /* Controles em mobile - Ocultar controles originais */
             .controls {
                 display: none;
             }

             /* Exibir botão de filtro mobile */
             .filter-mobile-btn {
                 display: flex !important;
             }

            .controls-section {
                margin-bottom: 15px;
                padding-bottom: 12px;
            }

            .section-title {
                font-size: 0.8rem;
                margin-bottom: 8px;
            }

            .controls-row {
                flex-direction: column;
                gap: 10px;
                align-items: stretch;
            }

            .search-box {
                min-width: auto;
                order: -1;
            }

            .search-input {
                padding: 12px 35px 12px 12px;
                font-size: 16px; /* Evita zoom no iOS */
            }

            .view-actions {
                align-self: center;
                order: 1;
            }

            .filter-group-inline {
                flex-direction: column;
                gap: 12px;
            }

            .filter-group {
                flex-direction: column;
                gap: 8px;
                align-items: stretch;
            }

            .filter-group > span {
                font-size: 10px;
                margin-bottom: 5px;
                text-align: center;
                padding: 5px;
                background: #f8f9fa;
                border-radius: 4px;
            }

            .filter-btn {
                padding: 10px 15px;
                font-size: 12px;
                text-align: center;
                min-height: 44px; /* Touch target */
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .bulk-actions {
                flex-direction: column;
                gap: 8px;
            }

            .select-btn {
                padding: 12px 20px;
                font-size: 13px;
                min-height: 44px;
            }

            /* Grid de logos responsivo */
            .logo-grid {
                grid-template-columns: 1fr;
                gap: 15px;
            }

            .logo-card {
                padding: 15px;
                position: relative;
            }

            .logo-preview {
                height: 100px;
                margin-bottom: 10px;
            }

            .logo-title {
                font-size: 0.9rem;
                margin-bottom: 6px;
            }

            .logo-meta {
                flex-wrap: wrap;
                gap: 6px;
                justify-content: center;
                margin-bottom: 10px;
            }

            .logo-meta span {
                font-size: 10px;
            }

            .logo-actions {
                justify-content: space-between;
                gap: 10px;
            }

            .download-btn, .preview-btn {
                flex: 1;
                padding: 12px 8px;
                font-size: 12px;
                min-height: 44px;
                text-align: center;
            }

                         .select-checkbox {
                 width: 24px;
                 height: 24px;
                 top: 8px;
                 left: 8px;
                 -webkit-tap-highlight-color: transparent;
                 touch-action: manipulation;
             }

             /* Área de toque maior para checkbox */
             .select-checkbox::before {
                 content: '';
                 position: absolute;
                 top: -10px;
                 left: -10px;
                 right: -10px;
                 bottom: -10px;
                 z-index: -1;
             }

            /* Paleta de cores mobile */
            .color-palette-section {
                padding: 20px 15px;
                margin-bottom: 20px;
            }

            .color-palette {
                grid-template-columns: 1fr;
                gap: 12px;
            }

            .color-item {
                padding: 12px;
                gap: 12px;
            }

            .color-swatch {
                width: 40px;
                height: 40px;
            }

            .color-hex {
                font-size: 13px;
            }

            .color-name {
                font-size: 12px;
            }

            .color-usage {
                font-size: 11px;
            }

            .color-rgb {
                font-size: 10px;
            }

            /* Action Bar mobile */
            .action-bar-content {
                flex-direction: column;
                gap: 10px;
                padding: 12px 15px;
                text-align: center;
            }

            .action-bar-info {
                justify-content: center;
            }

            .action-bar-buttons {
                flex-direction: column;
                gap: 8px;
                width: 100%;
            }

            .action-btn {
                width: 100%;
                padding: 12px 20px;
                font-size: 14px;
                min-height: 44px;
                justify-content: center;
            }

            /* Loading screen mobile */
            .loading-logo {
                width: 120px;
            }

            .loading-text {
                font-size: 0.9rem;
            }

            .loading-bar {
                width: 200px;
            }

            /* Modal mobile */
            .modal-content {
                margin: 20px;
                padding: 15px;
                max-width: calc(100% - 40px);
                max-height: calc(100% - 40px);
            }

            .close-modal {
                top: 10px;
                                 right: 15px;
                 font-size: 25px;
             }

             /* Scroll suave para listas longas */
             .logo-grid {
                 scroll-behavior: smooth;
             }

             /* Otimizações de touch */
             .filter-btn, .action-btn, .download-btn, .preview-btn, .select-btn {
                 -webkit-tap-highlight-color: transparent;
                 touch-action: manipulation;
             }
         }

        /* Bottom Sheet Styles */
        .filter-mobile-btn {
            display: none;
            align-items: center;
            gap: 8px;
            background: rgba(255,255,255,0.15);
            border: 1px solid rgba(255,255,255,0.2);
            color: white;
            padding: 8px 12px;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            -webkit-tap-highlight-color: transparent;
        }

        .filter-mobile-btn:hover {
            background: rgba(255,255,255,0.25);
            transform: translateY(-1px);
        }

        .filter-mobile-btn svg {
            width: 16px;
            height: 16px;
        }

        .filter-badge {
            background: #ff4757;
            color: white;
            border-radius: 10px;
            padding: 2px 6px;
            font-size: 10px;
            font-weight: 700;
            min-width: 16px;
            height: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 5px;
            opacity: 0;
            transform: scale(0);
            transition: all 0.2s ease;
        }

        .filter-badge.show {
            opacity: 1;
            transform: scale(1);
        }

        .bottom-sheet-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 2000;
            display: none;
            opacity: 0;
            transition: all 0.3s ease;
        }

        .bottom-sheet-overlay.show {
            display: flex;
            opacity: 1;
        }

        .bottom-sheet {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            border-radius: 20px 20px 0 0;
            max-height: 85vh;
            display: flex;
            flex-direction: column;
            transform: translateY(100%);
            transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.3);
        }

        .bottom-sheet-overlay.show .bottom-sheet {
            transform: translateY(0);
        }

        .sheet-handle {
            width: 40px;
            height: 4px;
            background: #ddd;
            border-radius: 2px;
            margin: 15px auto 5px;
            cursor: pointer;
        }

        .sheet-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
            border-bottom: 1px solid #f0f0f0;
        }

        .sheet-header h3 {
            margin: 0;
            color: #085263;
            font-size: 1.2rem;
            font-weight: 700;
        }

        .close-sheet {
            background: none;
            border: none;
            font-size: 24px;
            color: #999;
            cursor: pointer;
            padding: 5px;
            border-radius: 50%;
            transition: all 0.2s ease;
            -webkit-tap-highlight-color: transparent;
        }

        .close-sheet:hover {
            background: #f0f0f0;
            color: #085263;
        }

        .sheet-content {
            flex: 1;
            overflow-y: auto;
            padding: 0 20px 20px;
            -webkit-overflow-scrolling: touch;
        }

        .sheet-section {
            margin-bottom: 25px;
        }

        .sheet-section-title {
            font-size: 14px;
            font-weight: 700;
            color: #085263;
            margin-bottom: 12px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .search-box-mobile {
            position: relative;
            margin-bottom: 20px;
        }

        .search-input-mobile {
            width: 100%;
            padding: 12px 40px 12px 16px;
            border: 2px solid #e1e8ed;
            border-radius: 12px;
            font-size: 16px;
            transition: border-color 0.2s;
            -webkit-appearance: none;
        }

        .search-input-mobile:focus {
            outline: none;
            border-color: #085263;
            box-shadow: 0 0 0 3px rgba(8, 82, 99, 0.1);
        }

        .search-icon-mobile {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: #80BFD4;
            font-size: 16px;
        }

        .filter-group-mobile {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            gap: 10px;
        }

        .filter-btn-mobile {
            padding: 12px 16px;
            border: 2px solid #e1e8ed;
            background: white;
            border-radius: 12px;
            cursor: pointer;
            font-size: 13px;
            font-weight: 600;
            transition: all 0.2s;
            text-transform: uppercase;
            letter-spacing: 0.3px;
            min-height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            -webkit-tap-highlight-color: transparent;
            touch-action: manipulation;
        }

        .filter-btn-mobile:hover {
            background: #f8f9fa;
            border-color: #085263;
            color: #085263;
        }

        .filter-btn-mobile.active {
            background: #085263;
            color: white;
            border-color: #085263;
            box-shadow: 0 2px 8px rgba(8, 82, 99, 0.3);
        }

        .bulk-actions-mobile {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }

        .select-btn-mobile {
            padding: 12px 16px;
            border: 2px solid #085263;
            background: transparent;
            color: #085263;
            border-radius: 12px;
            cursor: pointer;
            font-size: 13px;
            font-weight: 600;
            transition: all 0.2s;
            text-transform: uppercase;
            letter-spacing: 0.3px;
            min-height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            -webkit-tap-highlight-color: transparent;
            touch-action: manipulation;
        }

        .select-btn-mobile:hover {
            background: #085263;
            color: white;
        }

        .sheet-footer {
            padding: 20px;
            border-top: 1px solid #f0f0f0;
            background: #f8f9fa;
        }

        .apply-filters-btn {
            width: 100%;
            padding: 15px 20px;
            background: linear-gradient(135deg, #085263, #80BFD4);
            color: white;
            border: none;
            border-radius: 12px;
            font-size: 16px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            box-shadow: 0 4px 15px rgba(8, 82, 99, 0.3);
            -webkit-tap-highlight-color: transparent;
            touch-action: manipulation;
        }

        .apply-filters-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(8, 82, 99, 0.4);
        }

        .apply-filters-btn:active {
            transform: translateY(0);
        }

                 /* Tablets (481px - 768px) */
         @media (min-width: 481px) and (max-width: 768px) {
             .container {
                 padding: 20px;
             }

             .header-content {
                 flex-direction: row;
                 justify-content: space-between;
                 align-items: center;
             }

             .header-logo {
                 height: 38px;
             }

             .header-title {
                 font-size: 1.3rem;
             }

             .header-actions {
                 flex-direction: row;
                 gap: 15px;
             }

             /* Mostrar controles normais em tablets */
             .controls {
                 display: block;
                 padding: 20px;
             }

             /* Ocultar botão mobile em tablets */
             .filter-mobile-btn {
                 display: none !important;
             }

            .filter-group-inline {
                flex-direction: row;
                gap: 15px;
                flex-wrap: wrap;
            }

            .filter-group {
                flex-direction: row;
                flex-wrap: wrap;
                gap: 8px;
            }

            .filter-btn {
                padding: 8px 14px;
                font-size: 11px;
                min-height: 40px;
            }

            .logo-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 18px;
            }

            .color-palette {
                grid-template-columns: repeat(2, 1fr);
                gap: 16px;
            }

            .action-bar-content {
                flex-direction: row;
                justify-content: space-between;
                padding: 15px 20px;
            }

            .action-bar-buttons {
                flex-direction: row;
                gap: 10px;
            }
        }

                 /* Tablets grandes e laptops pequenos (769px - 1024px) */
         @media (min-width: 769px) and (max-width: 1024px) {
             .logo-grid {
                 grid-template-columns: repeat(3, 1fr);
             }

             .color-palette {
                 grid-template-columns: repeat(3, 1fr);
             }

             .filter-group-inline {
                 gap: 20px;
             }

             /* Garantir que controles estejam visíveis */
             .controls {
                 display: block;
             }

             /* Ocultar botão mobile */
             .filter-mobile-btn {
                 display: none !important;
             }
         }

        /* Desktop (1025px+) */
        @media (min-width: 1025px) {
            .controls {
                display: block;
            }

            .filter-mobile-btn {
                display: none !important;
            }
        }

        /* Utilitários */
        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }

        /* Color Palette Section */
        .color-palette-section {
            background: white;
            border-radius: 12px;
            padding: 30px;
            margin-bottom: 30px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
            border: 1px solid #e9ecef;
        }

        .color-palette {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
        }

        .color-item {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 15px;
            border-radius: 8px;
            border: 1px solid #e9ecef;
            background: #fafafa;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .color-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(8, 82, 99, 0.15);
            border-color: #085263;
        }

        .color-swatch {
            width: 50px;
            height: 50px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            flex-shrink: 0;
        }

        .color-info {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .color-hex {
            font-weight: 600;
            font-size: 14px;
            color: #085263;
            font-family: 'Courier New', monospace;
        }

        .color-name {
            font-weight: 500;
            font-size: 13px;
            color: #393939;
        }

        .color-rgb {
            font-size: 11px;
            color: #5F5F5F;
            font-family: 'Courier New', monospace;
        }

        .color-usage {
            font-size: 12px;
            color: #085263;
            font-weight: 500;
            margin: 3px 0;
        }

        /* Tags nos cards - melhor organização */
        .logo-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin: 8px 0;
            max-width: 100%;
            align-items: center;
        }

        .logo-meta span {
            flex-shrink: 0;
            white-space: nowrap;
            margin-bottom: 2px;
        }

        /* Responsive para paleta de cores */
        @media (max-width: 768px) {
            .color-palette {
                grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
                gap: 15px;
            }
            
            .color-item {
                padding: 10px;
                gap: 10px;
            }
            
            .color-swatch {
                width: 40px;
                height: 40px;
            }
            
            .color-hex {
                font-size: 13px;
            }
            
            .color-name {
                font-size: 12px;
            }
            
            .color-rgb {
                font-size: 10px;
            }
        }

        .toast {
            position: fixed;
            top: 20px;
            right: 20px;
            background: #085263;
            color: white;
            padding: 12px 20px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
            z-index: 1000;
            font-weight: 500;
            animation: slideIn 0.3s ease;
            max-width: 350px;
        }

        @media (max-width: 480px) {
            .toast {
                top: auto;
                bottom: 20px;
                left: 15px;
                right: 15px;
                max-width: none;
                text-align: center;
                animation: slideUp 0.3s ease;
            }
        }

        @keyframes slideUp {
            from {
                transform: translateY(100%);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        @keyframes slideIn {
            from { transform: translateX(100%); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }
    </style>
</head>
<body>
    <!-- Tela de Loading -->
    <div class="loading-screen" id="loadingScreen">
        <img src="svg/Logo-SynNova-Horizontal-horizontal-Branca.svg" 
             alt="SynNova Logo" 
             class="loading-logo"
             onerror="this.style.display='none';">
        <div class="loading-text">Carregando biblioteca de logos...</div>
        <div class="loading-bar">
            <div class="loading-progress"></div>
        </div>
    </div>

    <header class="header">
        <div class="header-content">
            <div class="header-brand">
                <img src="svg/Logo-SynNova-Horizontal-horizontal-Branca.svg" 
                     alt="SynNova Logo" 
                     class="header-logo"
                     onerror="this.style.display='none';">
                <h1 class="header-title">Biblioteca de Logos</h1>
            </div>
            <div class="header-actions">
                <div class="header-stats">
                    <span id="total-count">0 arquivos</span>
                    <span id="filtered-count"></span>
                </div>
                <button class="filter-mobile-btn" id="filterMobileBtn">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M10,18V16H14V18H10M6,14V12H18V14H6M3,10V8H21V10H3Z"/>
                    </svg>
                    Filtros
                    <span class="filter-badge" id="filterBadge">0</span>
                </button>
                <a href="https://portfolio.synnova.com.br" 
                   target="_blank" 
                   rel="noopener noreferrer" 
                   class="portfolio-link">
                    🌐 Nosso Portfólio
                </a>
            </div>
        </div>
    </header>

    <div class="controls">
        <!-- Seção de Busca -->
        <div class="controls-section">
            <div class="section-title">🔍 Busca</div>
            <div class="controls-row">
                <div class="search-box">
                    <input type="text" id="search-input" class="search-input" placeholder="Buscar por nome, formato ou descrição...">
                    <span class="search-icon">🔍</span>
                </div>
                <div class="view-actions">
                    <div class="view-toggle">
                        <button class="view-btn active" data-view="grid" title="Visualização em grade">⊞</button>
                        <button class="view-btn" data-view="list" title="Visualização em lista">☰</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Seção de Filtros -->
        <div class="controls-section">
            <div class="section-title">🎯 Filtros</div>
            
            <!-- Orientação -->
            <div class="controls-row" style="margin-bottom: 12px;">
                <div class="filter-group">
                    <span style="font-size: 11px; font-weight: 600; color: #5F5F5F; margin-right: 8px;">ORIENTAÇÃO:</span>
                    <button class="filter-btn active" data-filter="all" data-type="orientation">Todos</button>
                    <button class="filter-btn" data-filter="ícone" data-type="orientation">🔲 Ícone</button>
                    <button class="filter-btn" data-filter="horizontal" data-type="orientation">📐 Horizontal</button>
                    <button class="filter-btn" data-filter="vertical" data-type="orientation">📄 Vertical</button>
                </div>
            </div>
            
            <!-- Formato -->
            <div class="controls-row" style="margin-bottom: 12px;">
                <div class="filter-group">
                    <span style="font-size: 11px; font-weight: 600; color: #5F5F5F; margin-right: 8px;">FORMATO:</span>
                    <button class="filter-btn active" data-filter="all" data-type="format">Todos</button>
                    <button class="filter-btn" data-filter="svg" data-type="format">SVG</button>
                    <button class="filter-btn" data-filter="png" data-type="format">PNG</button>
                    <button class="filter-btn" data-filter="psd" data-type="format">PSD</button>
                    <button class="filter-btn" data-filter="ai" data-type="format">AI</button>
                    <button class="filter-btn" data-filter="jpg" data-type="format">JPG</button>
                </div>
            </div>

            <!-- Dimensões e Cor -->
            <div class="filter-group-inline">
                <div class="filter-group">
                    <span style="font-size: 11px; font-weight: 600; color: #5F5F5F; margin-right: 8px;">DIMENSÕES:</span>
                    <button class="filter-btn active" data-filter="all" data-type="size">Todos</button>
                    <button class="filter-btn" data-filter="pequeno" data-type="size">📱 Pequeno</button>
                    <button class="filter-btn" data-filter="médio" data-type="size">💻 Médio</button>
                    <button class="filter-btn" data-filter="grande" data-type="size">🖥️ Grande</button>
                </div>

                <div class="filter-group">
                    <span style="font-size: 11px; font-weight: 600; color: #5F5F5F; margin-right: 8px;">COR:</span>
                    <button class="filter-btn active" data-filter="all" data-type="color">Todas</button>
                    <button class="filter-btn" data-filter="colorido" data-type="color">🎨 Colorido</button>
                    <button class="filter-btn" data-filter="branco" data-type="color">⚪ Branco</button>
                    <button class="filter-btn" data-filter="referência" data-type="color">📋 Referência</button>
                </div>
            </div>
        </div>

        <!-- Seção de Seleção -->
        <div class="controls-section">
            <div class="section-title">☑️ Seleção</div>
            <div class="controls-row">
                <div class="bulk-actions">
                    <button id="select-all" class="select-btn">☑️ Selecionar Todos</button>
                    <button id="clear-selection" class="select-btn">❌ Limpar Seleção</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Barra de Ações Dinâmica -->
    <div id="action-bar" class="action-bar hidden">
        <div class="action-bar-content">
            <div class="action-bar-info">
                <span id="action-count">0</span> <span id="action-text">arquivos selecionados</span>
            </div>
            <div class="action-bar-buttons">
                <button id="action-download" class="action-btn primary">
                    📥 Baixar Selecionados
                </button>
                <button id="action-clear" class="action-btn secondary">
                    ❌ Limpar
                </button>
            </div>
        </div>
    </div>

    <!-- Paleta de Cores SynNova -->
    <div class="container">
        <div class="color-palette-section">
            <h2 style="color: #085263; margin-bottom: 20px; display: flex; align-items: center; gap: 10px;">
                🎨 <span>Paleta de Cores Oficial</span>
            </h2>
            
            <div class="color-palette">
                <div class="color-item" onclick="copyColor('#085263')">
                    <div class="color-swatch" style="background: #085263;"></div>
                    <div class="color-info">
                        <span class="color-hex">#085263</span>
                        <span class="color-name">Azul Corporativo</span>
                        <span class="color-usage">Logotipos • Headers • Botões</span>
                        <span class="color-rgb">RGB 8, 82, 99</span>
                    </div>
                </div>
                
                <div class="color-item" onclick="copyColor('#80BFD4')">
                    <div class="color-swatch" style="background: #80BFD4;"></div>
                    <div class="color-info">
                        <span class="color-hex">#80BFD4</span>
                        <span class="color-name">Azul Suporte</span>
                        <span class="color-usage">Ícones • Links • Detalhes</span>
                        <span class="color-rgb">RGB 128, 191, 212</span>
                    </div>
                </div>

                <div class="color-item" onclick="copyColor('#FFFFFF')">
                    <div class="color-swatch" style="background: #FFFFFF; border: 1px solid #ddd;"></div>
                    <div class="color-info">
                        <span class="color-hex">#FFFFFF</span>
                        <span class="color-name">Branco Base</span>
                        <span class="color-usage">Fundos • Cards • Espaços</span>
                        <span class="color-rgb">RGB 255, 255, 255</span>
                    </div>
                </div>

                <div class="color-item" onclick="copyColor('#DAE5EB')">
                    <div class="color-swatch" style="background: #DAE5EB;"></div>
                    <div class="color-info">
                        <span class="color-hex">#DAE5EB</span>
                        <span class="color-name">Cinza Suave</span>
                        <span class="color-usage">Bordas • Divisores • Fundos</span>
                        <span class="color-rgb">RGB 218, 229, 235</span>
                    </div>
                </div>

                <div class="color-item" onclick="copyColor('#5F5F5F')">
                    <div class="color-swatch" style="background: #5F5F5F;"></div>
                    <div class="color-info">
                        <span class="color-hex">#5F5F5F</span>
                        <span class="color-name">Texto Corpo</span>
                        <span class="color-usage">Parágrafos • Descrições</span>
                        <span class="color-rgb">RGB 95, 95, 95</span>
                    </div>
                </div>

                <div class="color-item" onclick="copyColor('#393939')">
                    <div class="color-swatch" style="background: #393939;"></div>
                    <div class="color-info">
                        <span class="color-hex">#393939</span>
                        <span class="color-name">Texto Títulos</span>
                        <span class="color-usage">Headings • Navegação</span>
                        <span class="color-rgb">RGB 57, 57, 57</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="results-info">
            <span id="results-text">Carregando arquivos...</span>
        </div>

        <div id="logo-grid" class="logo-grid">
            <!-- Logos will be populated by JavaScript -->
        </div>

        <div id="no-results" class="no-results hidden">
            <h3>Nenhum arquivo encontrado</h3>
            <p>Tente ajustar os filtros ou termo de busca.</p>
        </div>
    </div>

    <!-- Modal for preview -->
    <div id="preview-modal" class="modal">
        <button class="close-modal">&times;</button>
        <div class="modal-content">
            <img id="modal-image" class="modal-image" alt="Preview">
            <h3 id="modal-title"></h3>
        </div>
    </div>

    <!-- Bottom Sheet para Filtros Mobile -->
    <div id="filter-bottom-sheet" class="bottom-sheet-overlay">
        <div class="bottom-sheet">
            <div class="sheet-handle"></div>
            <div class="sheet-header">
                <h3>🎯 Filtros</h3>
                <button class="close-sheet" id="closeSheetBtn">&times;</button>
            </div>
            <div class="sheet-content">
                <!-- Seção de Busca -->
                <div class="sheet-section">
                    <div class="sheet-section-title">🔍 Busca</div>
                    <div class="search-box-mobile">
                        <input type="text" id="search-input-mobile" class="search-input-mobile" placeholder="Buscar por nome, formato ou descrição...">
                        <span class="search-icon-mobile">🔍</span>
                    </div>
                </div>

                <!-- Orientação -->
                <div class="sheet-section">
                    <div class="sheet-section-title">📐 Orientação</div>
                    <div class="filter-group-mobile">
                        <button class="filter-btn-mobile active" data-filter="all" data-type="orientation">Todos</button>
                        <button class="filter-btn-mobile" data-filter="ícone" data-type="orientation">🔲 Ícone</button>
                        <button class="filter-btn-mobile" data-filter="horizontal" data-type="orientation">📐 Horizontal</button>
                        <button class="filter-btn-mobile" data-filter="vertical" data-type="orientation">📄 Vertical</button>
                    </div>
                </div>
                
                <!-- Formato -->
                <div class="sheet-section">
                    <div class="sheet-section-title">📋 Formato</div>
                    <div class="filter-group-mobile">
                        <button class="filter-btn-mobile active" data-filter="all" data-type="format">Todos</button>
                        <button class="filter-btn-mobile" data-filter="svg" data-type="format">SVG</button>
                        <button class="filter-btn-mobile" data-filter="png" data-type="format">PNG</button>
                        <button class="filter-btn-mobile" data-filter="psd" data-type="format">PSD</button>
                        <button class="filter-btn-mobile" data-filter="ai" data-type="format">AI</button>
                        <button class="filter-btn-mobile" data-filter="jpg" data-type="format">JPG</button>
                    </div>
                </div>

                <!-- Dimensões -->
                <div class="sheet-section">
                    <div class="sheet-section-title">📏 Dimensões</div>
                    <div class="filter-group-mobile">
                        <button class="filter-btn-mobile active" data-filter="all" data-type="size">Todos</button>
                        <button class="filter-btn-mobile" data-filter="pequeno" data-type="size">📱 Pequeno</button>
                        <button class="filter-btn-mobile" data-filter="médio" data-type="size">💻 Médio</button>
                        <button class="filter-btn-mobile" data-filter="grande" data-type="size">🖥️ Grande</button>
                    </div>
                </div>

                <!-- Cor -->
                <div class="sheet-section">
                    <div class="sheet-section-title">🎨 Cor</div>
                    <div class="filter-group-mobile">
                        <button class="filter-btn-mobile active" data-filter="all" data-type="color">Todas</button>
                        <button class="filter-btn-mobile" data-filter="colorido" data-type="color">🎨 Colorido</button>
                        <button class="filter-btn-mobile" data-filter="branco" data-type="color">⚪ Branco</button>
                        <button class="filter-btn-mobile" data-filter="referência" data-type="color">📋 Referência</button>
                    </div>
                </div>

                <!-- Seleção -->
                <div class="sheet-section">
                    <div class="sheet-section-title">☑️ Seleção</div>
                    <div class="bulk-actions-mobile">
                        <button id="select-all-mobile" class="select-btn-mobile">☑️ Selecionar Todos</button>
                        <button id="clear-selection-mobile" class="select-btn-mobile">❌ Limpar Seleção</button>
                    </div>
                </div>
            </div>
            <div class="sheet-footer">
                <button class="apply-filters-btn" id="applyFiltersBtn">✅ Aplicar Filtros</button>
            </div>
        </div>
    </div>


    <script>
        // Dados dos logos organizados
        const logoData = [
            // SVG Files
            { name: 'Logo Horizontal', file: 'svg/Logo-SynNova-Horizontal.svg', format: 'svg', size: '2.5KB', pixelSize: '300×120px', sizeCategory: 'médio', colorCategory: 'colorido', orientationCategory: 'horizontal', description: 'Logo horizontal principal', folder: 'svg' },
            { name: 'Logo Horizontal Branco', file: 'svg/Logo-SynNova-Horizontal-horizontal-Branca.svg', format: 'svg', size: '2.5KB', pixelSize: '300×120px', sizeCategory: 'médio', colorCategory: 'branco', orientationCategory: 'horizontal', description: 'Logo horizontal versão branca', folder: 'svg' },
            { name: 'SynNova Logo', file: 'svg/synnova-logo.svg', format: 'svg', size: '1.3KB', pixelSize: '200×200px', sizeCategory: 'médio', colorCategory: 'colorido', orientationCategory: 'ícone', description: 'Logo principal simplificado', folder: 'svg' },
            { name: 'Ícone Branco', file: 'svg/Logo-SynNova-Icone_Branco.svg', format: 'svg', size: '1.3KB', pixelSize: '128×128px', sizeCategory: 'pequeno', colorCategory: 'branco', orientationCategory: 'ícone', description: 'Ícone da marca versão branca', folder: 'svg' },
            { name: 'Favicon', file: 'svg/Logo-SynNova-Favicon.svg', format: 'svg', size: '1.1KB', pixelSize: '32×32px', sizeCategory: 'pequeno', colorCategory: 'colorido', orientationCategory: 'ícone', description: 'Favicon principal da marca', folder: 'svg' },

            // PNG Files  
            { name: 'Logo Branco Transparente', file: 'png/LOGO BRANCA VAZADA FUNDO TRANSPARENTE.png', format: 'png', size: '276KB', pixelSize: '1200×800px', sizeCategory: 'grande', colorCategory: 'branco', orientationCategory: 'horizontal', description: 'Logo branco com transparência', folder: 'png' },
            { name: 'Logo Colorido Transparente', file: 'png/LOGO COLORIDA VAZADA FUNDO TRANSPARENTE.png', format: 'png', size: '276KB', pixelSize: '1200×800px', sizeCategory: 'grande', colorCategory: 'colorido', orientationCategory: 'horizontal', description: 'Logo colorido com transparência', folder: 'png' },
            { name: 'Logo Fundo Branco', file: 'png/FUNDO BRANCO.png', format: 'png', size: '56KB', pixelSize: '600×400px', sizeCategory: 'médio', colorCategory: 'colorido', orientationCategory: 'horizontal', description: 'Logo com fundo branco sólido', folder: 'png' },
            { name: 'Logo Tela Login', file: 'png/Logo-SynNova-TelaLogin.png', format: 'png', size: '8.6KB', pixelSize: '250×100px', sizeCategory: 'médio', colorCategory: 'colorido', orientationCategory: 'horizontal', description: 'Logo otimizado para login', folder: 'png' },
            { name: 'Logo Footer', file: 'png/Logo-SynNova-Footer.png', format: 'png', size: '11KB', pixelSize: '200×80px', sizeCategory: 'médio', colorCategory: 'colorido', orientationCategory: 'horizontal', description: 'Logo para rodapé', folder: 'png' },
            { name: 'Logo Header Branco', file: 'png/Logo-SynNova-Header-Branca.png', format: 'png', size: '12KB', pixelSize: '180×60px', sizeCategory: 'médio', colorCategory: 'branco', orientationCategory: 'horizontal', description: 'Logo branco para header', folder: 'png' },
            { name: 'Logo Header', file: 'png/Logo-SynNova-Header.png', format: 'png', size: '23KB', pixelSize: '180×60px', sizeCategory: 'médio', colorCategory: 'colorido', orientationCategory: 'horizontal', description: 'Logo para header', folder: 'png' },
            { name: 'Favicon PNG', file: 'png/Logo-SynNova-Favicon.png', format: 'png', size: '768B', pixelSize: '32×32px', sizeCategory: 'pequeno', colorCategory: 'colorido', orientationCategory: 'ícone', description: 'Favicon em formato PNG', folder: 'png' },

            // PSD Files
            { name: 'Logo Horizontal Branco PSD', file: 'psd/Logo-SynNova-Horizontal-Branca.psd', format: 'psd', size: '110KB', pixelSize: '800×320px', sizeCategory: 'grande', colorCategory: 'branco', orientationCategory: 'horizontal', description: 'Arquivo editável horizontal branco', folder: 'psd' },
            { name: 'Logo Colorido PSD', file: 'psd/Logo-SynNova-colorida.psd', format: 'psd', size: '102KB', pixelSize: '600×600px', sizeCategory: 'médio', colorCategory: 'colorido', orientationCategory: 'ícone', description: 'Arquivo editável colorido', folder: 'psd' },
            { name: 'Logo Horizontal Colorido PSD', file: 'psd/LOGO HORIZONTAL COLORIDA VAZADA FUNDO TRANSPARENTE.psd', format: 'psd', size: '161KB', pixelSize: '1000×400px', sizeCategory: 'grande', colorCategory: 'colorido', orientationCategory: 'horizontal', description: 'Horizontal colorido transparente', folder: 'psd' },
            { name: 'Logo Colorido Transparente PSD', file: 'psd/LOGO COLORIDA VAZADA FUNDO TRANSPARENTE.psd', format: 'psd', size: '108KB', pixelSize: '800×800px', sizeCategory: 'grande', colorCategory: 'colorido', orientationCategory: 'ícone', description: 'Colorido com transparência', folder: 'psd' },
            { name: 'Logo Branco Transparente PSD', file: 'psd/LOGO BRANCA VAZADA FUNDO TRANSPARENTE.psd', format: 'psd', size: '83KB', pixelSize: '800×800px', sizeCategory: 'grande', colorCategory: 'branco', orientationCategory: 'ícone', description: 'Branco com transparência', folder: 'psd' },
            { name: 'Logo Header PSD', file: 'psd/Logo-SynNova-Header.psd', format: 'psd', size: '72KB', pixelSize: '300×120px', sizeCategory: 'médio', colorCategory: 'colorido', orientationCategory: 'horizontal', description: 'Arquivo editável para header', folder: 'psd' },

            // AI Files
            { name: 'Logo Principal AI', file: 'ai/Logo-SynNova.ai', format: 'ai', size: '245KB', pixelSize: 'Vetorial', sizeCategory: 'grande', colorCategory: 'colorido', orientationCategory: 'horizontal', description: 'Arquivo vetorial principal', folder: 'ai' },
            { name: 'Logo Tela Login AI', file: 'ai/Logo-SynNova-TelaLogin.ai', format: 'ai', size: '241KB', pixelSize: 'Vetorial', sizeCategory: 'grande', colorCategory: 'colorido', orientationCategory: 'horizontal', description: 'Arquivo AI para tela de login', folder: 'ai' },
            { name: 'Logo Header AI', file: 'ai/Logo-SynNova-Header.ai', format: 'ai', size: '241KB', pixelSize: 'Vetorial', sizeCategory: 'grande', colorCategory: 'colorido', orientationCategory: 'horizontal', description: 'Arquivo AI para header', folder: 'ai' },
            { name: 'Favicon AI', file: 'ai/Logo-SynNova-Favicon.ai', format: 'ai', size: '239KB', pixelSize: 'Vetorial', sizeCategory: 'pequeno', colorCategory: 'colorido', orientationCategory: 'ícone', description: 'Arquivo AI do favicon', folder: 'ai' },

            // JPG Files
            { name: 'Preview Horizontal', file: 'jpg/Logo-SynNova-Horizontal-preview.jpg', format: 'jpg', size: '202KB', pixelSize: '1920×1080px', sizeCategory: 'grande', colorCategory: 'referência', orientationCategory: 'horizontal', description: 'Preview do logo horizontal', folder: 'jpg' }
        ];

        // Estado da aplicação
        let filteredLogos = [...logoData];
        let currentFilters = {
            format: 'all',
            size: 'all',
            color: 'all',
            orientation: 'all'
        };
        let currentView = 'grid';
        let selectedLogos = new Set();
        let searchTerm = '';

        // Elementos DOM
        const searchInput = document.getElementById('search-input');
        const logoGrid = document.getElementById('logo-grid');
        const filterButtons = document.querySelectorAll('.filter-btn[data-filter]');
        const viewButtons = document.querySelectorAll('.view-btn');
        const selectAllBtn = document.getElementById('select-all');
        const clearSelectionBtn = document.getElementById('clear-selection');
        const actionBar = document.getElementById('action-bar');
        const actionDownloadBtn = document.getElementById('action-download');
        const actionClearBtn = document.getElementById('action-clear');
        const actionCount = document.getElementById('action-count');
        const actionText = document.getElementById('action-text');
        const resultsText = document.getElementById('results-text');
        const noResults = document.getElementById('no-results');
        const modal = document.getElementById('preview-modal');
        const modalImage = document.getElementById('modal-image');
        const modalTitle = document.getElementById('modal-title');
        const closeModal = document.querySelector('.close-modal');

        // Bottom Sheet Elements
        const filterMobileBtn = document.getElementById('filterMobileBtn');
        const filterBadge = document.getElementById('filterBadge');
        const bottomSheetOverlay = document.getElementById('filter-bottom-sheet');
        const closeSheetBtn = document.getElementById('closeSheetBtn');
        const applyFiltersBtn = document.getElementById('applyFiltersBtn');
        const searchInputMobile = document.getElementById('search-input-mobile');
        const filterButtonsMobile = document.querySelectorAll('.filter-btn-mobile[data-filter]');
        const selectAllMobile = document.getElementById('select-all-mobile');
        const clearSelectionMobile = document.getElementById('clear-selection-mobile');
        const sheetHandle = document.querySelector('.sheet-handle');

        // Inicialização
        document.addEventListener('DOMContentLoaded', function() {
            // Simula carregamento e remove tela de loading
            setTimeout(() => {
                const loadingScreen = document.getElementById('loadingScreen');
                loadingScreen.classList.add('fade-out');
                
                // Remove completamente após animação
                setTimeout(() => {
                    loadingScreen.style.display = 'none';
                }, 500);
            }, 2000); // 2 segundos de loading

            updateStats();
            renderLogos();
            setupEventListeners();
            updateFilterBadge();
        });

        function setupEventListeners() {
            // Busca
            searchInput.addEventListener('input', handleSearch);

            // Filtros
            filterButtons.forEach(btn => {
                btn.addEventListener('click', () => handleFilter(btn.dataset.filter, btn.dataset.type));
            });

            // Visualização
            viewButtons.forEach(btn => {
                btn.addEventListener('click', () => handleViewChange(btn.dataset.view));
            });

            // Seleção em lote
            selectAllBtn.addEventListener('click', selectAll);
            clearSelectionBtn.addEventListener('click', clearSelection);
            actionDownloadBtn.addEventListener('click', bulkDownload);
            actionClearBtn.addEventListener('click', clearSelection);

            // Modal
            closeModal.addEventListener('click', closePreviewModal);
            modal.addEventListener('click', (e) => {
                if (e.target === modal) closePreviewModal();
            });

            // Atalhos de teclado
            document.addEventListener('keydown', handleKeyboard);

            // Bottom Sheet Mobile
            filterMobileBtn.addEventListener('click', openBottomSheet);
            closeSheetBtn.addEventListener('click', closeBottomSheet);
            applyFiltersBtn.addEventListener('click', closeBottomSheet);
            sheetHandle.addEventListener('click', closeBottomSheet);
            
            // Close ao clicar no overlay
            bottomSheetOverlay.addEventListener('click', (e) => {
                if (e.target === bottomSheetOverlay) closeBottomSheet();
            });

            // Busca mobile sincronizada
            searchInputMobile.addEventListener('input', handleSearchMobile);

            // Filtros mobile
            filterButtonsMobile.forEach(btn => {
                btn.addEventListener('click', () => handleFilterMobile(btn.dataset.filter, btn.dataset.type));
            });

            // Seleção mobile
            selectAllMobile.addEventListener('click', selectAll);
            clearSelectionMobile.addEventListener('click', clearSelection);

            // Gestos de swipe para fechar (opcional)
            setupSwipeGestures();
        }

        function handleSearch() {
            searchTerm = searchInput.value.toLowerCase();
            applyFilters();
        }

        function handleFilter(filter, type) {
            currentFilters[type] = filter;
            
            // Atualizar botões ativos por tipo
            document.querySelectorAll(`.filter-btn[data-type="${type}"]`).forEach(btn => {
                btn.classList.toggle('active', btn.dataset.filter === filter);
            });

            applyFilters();
        }

        function handleViewChange(view) {
            currentView = view;
            
            // Atualizar botões ativos
            viewButtons.forEach(btn => {
                btn.classList.toggle('active', btn.dataset.view === view);
            });

            logoGrid.classList.toggle('list-view', view === 'list');
            renderLogos();
        }

        function applyFilters() {
            filteredLogos = logoData.filter(logo => {
                const matchesSearch = logo.name.toLowerCase().includes(searchTerm) || 
                                    logo.file.toLowerCase().includes(searchTerm) ||
                                    logo.description.toLowerCase().includes(searchTerm);
                
                // Filtro de orientação
                const matchesOrientation = currentFilters.orientation === 'all' || logo.orientationCategory === currentFilters.orientation;
                
                // Filtro de formato
                const matchesFormat = currentFilters.format === 'all' || logo.format === currentFilters.format;
                
                // Filtro de tamanho
                const matchesSize = currentFilters.size === 'all' || logo.sizeCategory === currentFilters.size;
                
                // Filtro de cor
                const matchesColor = currentFilters.color === 'all' || logo.colorCategory === currentFilters.color;
                
                return matchesSearch && matchesOrientation && matchesFormat && matchesSize && matchesColor;
            });

            updateStats();
            renderLogos();
            updateFilterBadge();
        }

        function updateStats() {
            document.getElementById('total-count').textContent = `${logoData.length} arquivos`;
            document.getElementById('filtered-count').textContent = 
                filteredLogos.length !== logoData.length ? `(${filteredLogos.length} filtrados)` : '';
            
            const selectedCount = selectedLogos.size;
            
            // Atualizar Action Bar
            if (selectedCount > 0) {
                actionBar.classList.remove('hidden');
                document.body.classList.add('action-bar-open');
                actionCount.textContent = selectedCount;
                actionText.textContent = selectedCount === 1 ? 'arquivo selecionado' : 'arquivos selecionados';
            } else {
                actionBar.classList.add('hidden');
                document.body.classList.remove('action-bar-open');
            }
            
            resultsText.textContent = filteredLogos.length === 0 ? 
                'Nenhum arquivo encontrado' : 
                `${filteredLogos.length} arquivo${filteredLogos.length !== 1 ? 's' : ''} encontrado${filteredLogos.length !== 1 ? 's' : ''}`;
        }

        function renderLogos() {
            if (filteredLogos.length === 0) {
                logoGrid.innerHTML = '';
                noResults.classList.remove('hidden');
                return;
            }

            noResults.classList.add('hidden');
            
            logoGrid.innerHTML = filteredLogos.map(logo => createLogoCard(logo)).join('');
            
            // Replicar checkboxes selecionados e aplicar classe selected
            selectedLogos.forEach(logoFile => {
                const checkbox = document.querySelector(`[data-logo="${logoFile}"]`);
                if (checkbox) {
                    checkbox.checked = true;
                    const logoCard = checkbox.closest('.logo-card');
                    if (logoCard) {
                        logoCard.classList.add('selected');
                    }
                }
            });
        }

        function createLogoCard(logo) {
            const isSelected = selectedLogos.has(logo.file);
            const listClass = currentView === 'list' ? 'list-view' : '';
            const isWhiteLogo = logo.name.toLowerCase().includes('branco') || logo.name.toLowerCase().includes('branca');
            const contrastBackground = isWhiteLogo ? '#085263' : '#f8f9fa';
            
            return `
                <div class="logo-card ${listClass}">
                    <input type="checkbox" class="select-checkbox" data-logo="${logo.file}" ${isSelected ? 'checked' : ''}>
                    
                    <div class="logo-preview-container">
                        ${logo.format === 'psd' || logo.format === 'ai' ? 
                            `<div class="logo-preview" style="display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, ${getFormatColor(logo.format)}, ${getFormatColor(logo.format)}dd); color: white; font-size: 1.5rem; font-weight: bold;">${logo.format.toUpperCase()}</div>` :
                            `<img src="${logo.file}" alt="${logo.name}" class="logo-preview" style="background: ${contrastBackground};" onclick="openPreview('${logo.file}', '${logo.name}')" onerror="this.style.display='flex'; this.style.alignItems='center'; this.style.justifyContent='center'; this.innerHTML='${logo.format.toUpperCase()}'; this.style.background='${getFormatColor(logo.format)}'; this.style.color='white'; this.style.fontWeight='bold';">`
                        }
                    </div>
                    
                    <div class="logo-info">
                        <div>
                            <div class="logo-title">${logo.name}</div>
                            <div class="logo-meta">
                                <span class="logo-format ${logo.format}">${logo.format.toUpperCase()}</span>
                                <span class="logo-size">${logo.pixelSize}</span>
                                <span style="font-size: 10px; background: ${getSizeColor(logo.sizeCategory)}; color: white; padding: 2px 6px; border-radius: 3px; font-weight: 600;">${getSizeIcon(logo.sizeCategory)} ${logo.sizeCategory.toUpperCase()}</span>
                                <span style="font-size: 10px; background: ${getColorColor(logo.colorCategory)}; color: ${logo.colorCategory === 'branco' ? '#085263' : 'white'}; padding: 2px 6px; border-radius: 3px; font-weight: 600;">${getColorIcon(logo.colorCategory)} ${logo.colorCategory.toUpperCase()}</span>
                                <span style="font-size: 10px; background: ${getOrientationColor(logo.orientationCategory)}; color: white; padding: 2px 6px; border-radius: 3px; font-weight: 600;">${getOrientationIcon(logo.orientationCategory)} ${logo.orientationCategory.toUpperCase()}</span>
                                ${isWhiteLogo ? '<span style="font-size: 10px; background: #DAE5EB; color: #085263; padding: 2px 6px; border-radius: 3px; font-weight: 600; margin-left: 5px;">CONTRASTE</span>' : ''}
                            </div>
                            ${currentView === 'grid' ? `<p style="font-size: 12px; color: #5F5F5F; margin-bottom: 15px;">${logo.description}</p>` : ''}
                        </div>
                        
                        <div class="logo-actions">
                            ${logo.format !== 'psd' && logo.format !== 'ai' ? 
                                `<button class="preview-btn" onclick="openPreview('${logo.file}', '${logo.name}')" title="Visualizar">👁</button>` : ''
                            }
                            <button onclick="downloadFile('${logo.file}', '${logo.file.split('/').pop()}')" class="download-btn">
                                📥 ${currentView === 'list' ? 'Baixar' : 'Download'}
                            </button>
                        </div>
                    </div>
                </div>
            `;
        }

        function getFormatColor(format) {
            const colors = {
                'svg': '#2ecc71',
                'png': '#f39c12', 
                'psd': '#9b59b6',
                'ai': '#e67e22',
                'jpg': '#1abc9c'
            };
            return colors[format] || '#95a5a6';
        }

        function getSizeColor(size) {
            const colors = { pequeno: '#3498db', médio: '#f39c12', grande: '#e74c3c' };
            return colors[size] || '#95a5a6';
        }

        function getSizeIcon(size) {
            const icons = { pequeno: '📱', médio: '💻', grande: '🖥️' };
            return icons[size] || '📄';
        }

        function getColorColor(color) {
            const colors = { colorido: '#085263', branco: '#DAE5EB', referência: '#5F5F5F' };
            return colors[color] || '#95a5a6';
        }

        function getColorIcon(color) {
            const icons = { colorido: '🎨', branco: '⚪', referência: '📋' };
            return icons[color] || '🔘';
        }

        function getOrientationColor(orientation) {
            const colors = { ícone: '#16a085', horizontal: '#2980b9', vertical: '#8e44ad' };
            return colors[orientation] || '#95a5a6';
        }

        function getOrientationIcon(orientation) {
            const icons = { ícone: '🔲', horizontal: '📐', vertical: '📄' };
            return icons[orientation] || '📏';
        }

        function openPreview(file, name) {
            modalImage.src = file;
            modalTitle.textContent = name;
            modal.style.display = 'flex';
        }

        function closePreviewModal() {
            modal.style.display = 'none';
        }

        function selectAll() {
            filteredLogos.forEach(logo => selectedLogos.add(logo.file));
            updateStats();
            updateCheckboxes();
        }

        function clearSelection() {
            selectedLogos.clear();
            updateStats();
            updateCheckboxes();
        }

        function updateCheckboxes() {
            document.querySelectorAll('.select-checkbox').forEach(checkbox => {
                const isSelected = selectedLogos.has(checkbox.dataset.logo);
                const logoCard = checkbox.closest('.logo-card');
                
                checkbox.checked = isSelected;
                
                if (isSelected) {
                    logoCard.classList.add('selected');
                } else {
                    logoCard.classList.remove('selected');
                }
            });
        }

        function downloadFile(url, filename) {
            try {
                // Cria elemento temporário para download
                const a = document.createElement('a');
                a.style.display = 'none';
                a.href = url;
                a.download = filename || url.split('/').pop() || 'arquivo';
                
                // Força download em vez de navegação
                a.target = '_blank';
                a.rel = 'noopener noreferrer';
                
                // Adiciona ao DOM, clica e remove
                document.body.appendChild(a);
                a.click();
                
                // Remove após um delay para garantir compatibilidade
                setTimeout(() => {
                    if (document.body.contains(a)) {
                        document.body.removeChild(a);
                    }
                }, 100);
                
                console.log(`✅ Download iniciado: ${filename}`);
                showToast(`📥 Download iniciado: ${filename}`, 'success');
                
            } catch (error) {
                console.error('❌ Erro no download:', error);
                showToast(`❌ Erro ao baixar ${filename}`, 'error');
            }
        }

        function showToast(message, type = 'info') {
            const toast = document.createElement('div');
            toast.className = 'toast';
            toast.textContent = message;
            
            // Cores por tipo
            switch(type) {
                case 'error':
                    toast.style.background = '#e74c3c';
                    break;
                case 'success':
                    toast.style.background = '#27ae60';
                    break;
                case 'warning':
                    toast.style.background = '#f39c12';
                    break;
                default:
                    toast.style.background = '#085263';
            }
            
            document.body.appendChild(toast);
            
            setTimeout(() => {
                toast.style.animation = 'slideIn 0.3s ease reverse';
                setTimeout(() => {
                    if (document.body.contains(toast)) {
                        document.body.removeChild(toast);
                    }
                }, 300);
            }, type === 'success' ? 2000 : 2500);
        }

        function bulkDownload() {
            if (selectedLogos.size === 0) {
                showToast('❌ Selecione pelo menos um arquivo para download', 'error');
                return;
            }
            
            // Animação de confirmação
            actionDownloadBtn.style.transform = 'scale(0.95)';
            setTimeout(() => {
                actionDownloadBtn.style.transform = '';
            }, 100);

            const zip = confirm(`📥 Deseja baixar ${selectedLogos.size} arquivo${selectedLogos.size !== 1 ? 's' : ''} selecionado${selectedLogos.size !== 1 ? 's' : ''}?\n\nOs downloads serão iniciados automaticamente.`);
            
            if (zip) {
                // Feedback visual na Action Bar
                const originalText = actionDownloadBtn.innerHTML;
                actionDownloadBtn.innerHTML = '⏳ Baixando...';
                actionDownloadBtn.disabled = true;
                
                showToast(`🚀 Iniciando download de ${selectedLogos.size} arquivo${selectedLogos.size !== 1 ? 's' : ''}...`);
                
                // Downloads múltiplos com intervalo
                Array.from(selectedLogos).forEach((file, i) => {
                    setTimeout(() => {
                        downloadFile(file, file.split('/').pop());
                    }, i * 300);
                });

                // Resetar Action Bar após downloads
                setTimeout(() => {
                    actionDownloadBtn.innerHTML = originalText;
                    actionDownloadBtn.disabled = false;
                    clearSelection();
                    showToast('✅ Downloads concluídos!', 'success');
                }, selectedLogos.size * 300 + 1000);
            }
        }

        function handleKeyboard(e) {
            if (e.ctrlKey || e.metaKey) {
                switch(e.key) {
                    case 'f':
                        e.preventDefault();
                        searchInput.focus();
                        break;
                    case 'a':
                        e.preventDefault();
                        selectAll();
                        break;
                }
            } else if (e.key === 'Escape') {
                if (modal.style.display === 'flex') {
                    closePreviewModal();
                }
            }
        }

        // Event delegation para checkboxes
        logoGrid.addEventListener('change', function(e) {
            if (e.target.classList.contains('select-checkbox')) {
                const logoFile = e.target.dataset.logo;
                const logoCard = e.target.closest('.logo-card');
                
                if (e.target.checked) {
                    selectedLogos.add(logoFile);
                    logoCard.classList.add('selected');
                } else {
                    selectedLogos.delete(logoFile);
                    logoCard.classList.remove('selected');
                }
                updateStats();
            }
        });

        // Função para copiar cor para área de transferência
        function copyColor(colorHex) {
            navigator.clipboard.writeText(colorHex).then(() => {
                showToast(`🎨 Cor ${colorHex} copiada!`, 'success');
            }).catch(() => {
                // Fallback para navegadores mais antigos
                const textArea = document.createElement('textarea');
                textArea.value = colorHex;
                document.body.appendChild(textArea);
                textArea.select();
                document.execCommand('copy');
                document.body.removeChild(textArea);
                showToast(`🎨 Cor ${colorHex} copiada!`, 'success');
            });
        }

        // Bottom Sheet Functions
        function openBottomSheet() {
            // Sincronizar valores antes de abrir
            syncFiltersToMobile();
            
            bottomSheetOverlay.classList.add('show');
            document.body.style.overflow = 'hidden';
            
            // Feedback visual
            filterMobileBtn.style.transform = 'scale(0.95)';
            setTimeout(() => {
                filterMobileBtn.style.transform = '';
            }, 150);
        }

        function closeBottomSheet() {
            bottomSheetOverlay.classList.remove('show');
            document.body.style.overflow = '';
            
            // Aplicar filtros se houver mudanças
            applyFilters();
        }

        function syncFiltersToMobile() {
            // Sincronizar busca
            searchInputMobile.value = searchInput.value;
            
            // Sincronizar filtros ativos
            filterButtonsMobile.forEach(btn => {
                const type = btn.dataset.type;
                const filter = btn.dataset.filter;
                btn.classList.toggle('active', currentFilters[type] === filter);
            });
        }

        function handleSearchMobile() {
            const value = searchInputMobile.value;
            searchInput.value = value;
            handleSearch();
        }

        function handleFilterMobile(filter, type) {
            // Atualizar filtros
            currentFilters[type] = filter;
            
            // Atualizar botões ativos no mobile
            document.querySelectorAll(`.filter-btn-mobile[data-type="${type}"]`).forEach(btn => {
                btn.classList.toggle('active', btn.dataset.filter === filter);
            });

            // Sincronizar com filtros desktop
            document.querySelectorAll(`.filter-btn[data-type="${type}"]`).forEach(btn => {
                btn.classList.toggle('active', btn.dataset.filter === filter);
            });

            // Aplicar filtros imediatamente para feedback
            applyFilters();
        }

        function setupSwipeGestures() {
            let startY = 0;
            let currentY = 0;
            let isTracking = false;

            const sheet = document.querySelector('.bottom-sheet');

            sheet.addEventListener('touchstart', (e) => {
                startY = e.touches[0].clientY;
                isTracking = true;
            });

            sheet.addEventListener('touchmove', (e) => {
                if (!isTracking) return;
                
                currentY = e.touches[0].clientY;
                const diffY = currentY - startY;
                
                // Só permite arrastar para baixo
                if (diffY > 0) {
                    sheet.style.transform = `translateY(${diffY}px)`;
                }
            });

            sheet.addEventListener('touchend', (e) => {
                if (!isTracking) return;
                
                const diffY = currentY - startY;
                
                // Se arrastou mais de 100px para baixo, fecha
                if (diffY > 100) {
                    closeBottomSheet();
                } else {
                    // Volta para posição original
                    sheet.style.transform = 'translateY(0)';
                }
                
                isTracking = false;
                sheet.style.transform = '';
            });
        }

        function updateFilterBadge() {
            if (!filterBadge) return;
            
            // Contar filtros ativos (não incluindo busca)
            let activeCount = 0;
            if (currentFilters.orientation !== 'all') activeCount++;
            if (currentFilters.format !== 'all') activeCount++;
            if (currentFilters.size !== 'all') activeCount++;
            if (currentFilters.color !== 'all') activeCount++;
            if (searchTerm.length > 0) activeCount++;
            
            filterBadge.textContent = activeCount;
            
            if (activeCount > 0) {
                filterBadge.classList.add('show');
            } else {
                filterBadge.classList.remove('show');
            }
        }
    </script>
</body>
</html>