/* =====================================================
   VIDEO TO THUMBNAIL GENERATOR
   Modern Compact UI 2026-2036
   ===================================================== */

#video-to-thumbnail-app {

    --primary: #4f46e5;
    --primary-hover: #4338ca;

    --bg: #f5f7fb;
    --card: #ffffff;

    --border: #dbe3ef;
    --border-hover: #b8c3d8;

    --text: #0f172a;
    --muted: #64748b;

    --radius: 14px;

    --shadow: 0 4px 12px rgba(15,23,42,.05);
    --shadow-hover: 0 8px 24px rgba(15,23,42,.08);

    --transition: all .25s ease;

    font-family: Inter,"Segoe UI",Roboto,sans-serif;
    color: var(--text);

    max-width: 1200px;
    margin: 0 auto;
}


/* =====================================================
   RESET
   ===================================================== */

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

#video-to-thumbnail-app html {
    scroll-behavior: smooth;
}

#video-to-thumbnail-app body {

    margin: 0;
    padding: 18px;

    background: var(--bg);

    color: var(--text);

    font-family:
        Inter,
        "Segoe UI",
        Roboto,
        sans-serif;

    line-height: 1.4;
}


/* =====================================================
   TITLES
   ===================================================== */

#video-to-thumbnail-app h1 {

    margin: 0 0 6px 0;

    font-size: clamp(2rem, 3vw, 2.8rem);

    font-weight: 800;

    letter-spacing: -0.04em;

    color: var(--text);

}

#video-to-thumbnail-app h3 {

    margin-top: 0 !important;
    margin-bottom: 18px !important;

    color: var(--muted);

    font-weight: 500;

}


/* =====================================================
   DROP ZONE
   ===================================================== */

#video-to-thumbnail-app #drop-zone {

    width: 100%;

    min-height: 90px;

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;

    border: 2px dashed #c5d1e6;

    border-radius: 18px;

    background: white;

    color: var(--muted);

    margin-bottom: 14px;

    transition: var(--transition);

    box-shadow: var(--shadow);

}

#video-to-thumbnail-app #drop-zone:hover {

    border-color: var(--primary);

    transform: translateY(-1px);

    box-shadow: var(--shadow-hover);

}


/* =====================================================
   FILE BUTTON
   ===================================================== */

#video-to-thumbnail-app #file-controls {
    margin-bottom: 14px !important;
}

#video-to-thumbnail-app button {

    border: none;

    border-radius: 12px;

    background: var(--primary);

    color: white;

    font-size: .95rem;

    font-weight: 600;

    padding: 10px 18px;

    cursor: pointer;

    transition: var(--transition);

}

#video-to-thumbnail-app button:hover {

    background: var(--primary-hover);

    transform: translateY(-1px);

}

#video-to-thumbnail-app button:disabled {

    opacity: .45;

    cursor: not-allowed;

}


/* =====================================================
   MODE SELECTOR
   ===================================================== */

#video-to-thumbnail-app .mode-group {

    display: inline-flex;

    gap: 18px;

    padding: 10px 14px;

    margin-bottom: 14px;

    background: white;

    border: 1px solid var(--border);

    border-radius: 999px;

    box-shadow: var(--shadow);

}

#video-to-thumbnail-app .mode-group label {

    cursor: pointer;

    font-weight: 500;

}

#video-to-thumbnail-app input[type="radio"] {
    accent-color: var(--primary);
}


/* =====================================================
   MAIN CARD
   ===================================================== */

#video-to-thumbnail-app #controls {

    background: var(--card);

    border: 1px solid var(--border);

    border-radius: 18px;

    padding: 18px;

    box-shadow: var(--shadow);

    margin-bottom: 16px;

}


/* =====================================================
   MANUAL / AUTO
   ===================================================== */

#video-to-thumbnail-app #manual-controls,
#video-to-thumbnail-app #auto-controls {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-bottom: 14px;

}

#video-to-thumbnail-app #manual-controls label,
#video-to-thumbnail-app #auto-controls label {

    display: flex;

    align-items: center;

    gap: 8px;

}


/* =====================================================
   GRID
   ===================================================== */

#video-to-thumbnail-app .container {

    display: flex;

    gap: 18px;

    flex-wrap: wrap;

}

#video-to-thumbnail-app .pane {

    flex: 1;

    min-width: 260px;

}


/* =====================================================
   FORM GROUP
   ===================================================== */

#video-to-thumbnail-app .form-group {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 10px;

}

#video-to-thumbnail-app .form-group label {

    font-weight: 500;

    color: var(--text);

}


/* =====================================================
   INPUTS
   ===================================================== */

#video-to-thumbnail-app input[type="number"],
#video-to-thumbnail-app select {

    height: 40px;

    min-width: 80px;

    padding: 0 12px;

    border: 1px solid var(--border);

    border-radius: 10px;

    background: white;

    color: var(--text);

    transition: var(--transition);

}

#video-to-thumbnail-app input[type="number"]:focus,
#video-to-thumbnail-app select:focus {

    outline: none;

    border-color: var(--primary);

    box-shadow:
        0 0 0 3px rgba(79, 70, 229, .15);

}

#video-to-thumbnail-app input[type="checkbox"] {

    width: 16px;
    height: 16px;

    accent-color: var(--primary);

}

#video-to-thumbnail-app input[type="color"] {

    width: 72px;

    height: 36px;

    border: 1px solid var(--border);

    border-radius: 8px;

    background: white;

    cursor: pointer;

    padding: 2px;

}


/* =====================================================
   GENERATE BUTTON
   ===================================================== */

#video-to-thumbnail-app #generate {

    margin-top: 8px;

}


/* =====================================================
   DOWNLOAD LINKS
   ===================================================== */

#video-to-thumbnail-app #download,
#video-to-thumbnail-app #download2,
#video-to-thumbnail-app #downloadGif {

    text-decoration: none;

    display: inline-block;

    margin-top: 12px;

    margin-right: 8px;

    padding: 10px 16px;

    border-radius: 10px;

    border: 1px solid var(--border);

    background: white;

    color: var(--text);

    font-weight: 600;

    transition: var(--transition);

}

#video-to-thumbnail-app #download:hover,
#download2:hover,
#downloadGif:hover {

    border-color: var(--primary);

    color: var(--primary);

}


/* =====================================================
   PROGRESS
   ===================================================== */

#video-to-thumbnail-app #progress {

    width: 100%;

    height: 10px;

    margin: 12px 0;

    border: none;

}

#video-to-thumbnail-app #progress::-webkit-progress-bar {

    background: #e7edf7;

    border-radius: 999px;

}

#video-to-thumbnail-app #progress::-webkit-progress-value {

    background: var(--primary);

    border-radius: 999px;

}


/* =====================================================
   CANVAS
   ===================================================== */

#video-to-thumbnail-app canvas {

    display: block;

    max-width: 100%;

    margin-top: 18px;

    border: 1px solid var(--border);

    border-radius: 14px;

    background: white;

    box-shadow: var(--shadow);

}


/* =====================================================
   GIF PREVIEW
   ===================================================== */

#video-to-thumbnail-app #gifPreview {

    border-radius: 12px !important;

    border: 1px solid var(--border) !important;

}


/* =====================================================
   HIDDEN
   ===================================================== */

#video-to-thumbnail-app .hidden {
    display: none !important;
}


/* =====================================================
   SCROLLBAR
   ===================================================== */

#video-to-thumbnail-app ::-webkit-scrollbar {
    width: 10px;
}

#video-to-thumbnail-app ::-webkit-scrollbar-track {
    background: #eef2f8;
}

#video-to-thumbnail-app ::-webkit-scrollbar-thumb {

    background: #c7d2e5;

    border-radius: 999px;

}

#video-to-thumbnail-app ::-webkit-scrollbar-thumb:hover {

    background: #94a3b8;

}


/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 768px) {

    #video-to-thumbnail-app body {
        padding: 12px;
    }

    #video-to-thumbnail-app .container {
        flex-direction: column;
    }

    #video-to-thumbnail-app .pane {
        min-width: auto;
    }

    #video-to-thumbnail-app .mode-group {

        width: 100%;

        justify-content: center;

    }

    #video-to-thumbnail-app #manual-controls,
    #auto-controls {

        flex-direction: column;

        align-items: flex-start;

    }

    #video-to-thumbnail-app button {

        width: 100%;

    }

    #video-to-thumbnail-app input[type="number"],
    select {

        width: 100%;

    }

}






/* Upload Video File */
#video-to-thumbnail-app #file-controls {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Manual / Auto */
#video-to-thumbnail-app .mode-group {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
}

/* Generate Contact Sheet */
#video-to-thumbnail-app #generate {
    display: block;
    margin: 20px auto 0 auto;
}

/* Download Contact Sheet PNG + JPG */
#video-to-thumbnail-app #download,
#download2 {
    display: inline-block;
}

/* Contenedor centrado para los enlaces */
#video-to-thumbnail-app #progress+#download {
    margin-left: auto;
}

/* Centrar ambos enlaces */
#video-to-thumbnail-app #download,
#video-to-thumbnail-app #download2 {
    text-align: center;
}

/* Método robusto */
#video-to-thumbnail-app a#download,
#video-to-thumbnail-app a#download2 {
    margin-top: 15px;
}

/* Centrar la fila completa de descargas */
#video-to-thumbnail-app #download,
#video-to-thumbnail-app #download2 {
    position: relative;
}

#video-to-thumbnail-app body:has(#download) {
    text-align: center;
}

/* Restaurar alineación normal del resto */
#video-to-thumbnail-app h1,
#video-to-thumbnail-app h3,
#video-to-thumbnail-app #controls,
#video-to-thumbnail-app #drop-zone,
#video-to-thumbnail-app .container {
    text-align: left;
}


#video-to-thumbnail-app #download {
    display: none;
    margin-top: 10px;
}

#video-to-thumbnail-app #download2 {
    display: none;
    margin-top: 10px;
}


#video-to-thumbnail-app label{
    color: #fe9000 !important;
}


#video-to-thumbnail-app input{
    color: #444444 !important;
}


#video-to-thumbnail-app input:focus{
    color: #95b88b !important;
}