/*
Theme Name: StreamVault Pro
Theme URI: https://flowdl.ir
Author: Amirhosein
Description: &#1602;&#1575;&#1604;&#1576; &#1575;&#1582;&#1578;&#1589;&#1575;&#1589;&#1740; &#1583;&#1575;&#1606;&#1604;&#1608;&#1583;&#1585; &#1576;&#1575; &#1602;&#1575;&#1576;&#1604;&#1740;&#1578; &#1587;&#1575;&#1582;&#1578; &#1604;&#1606;&#1583;&#1740;&#1606;&#1711; &#1662;&#1740;&#1580; &#1606;&#1575;&#1605;&#1581;&#1583;&#1608;&#1583;
Version: 4.0
Text Domain: https://flowdl.ir
*/

#batman-wrapper { width: 100%; max-width: 100%; position: relative; }
.batman-input-group { position: relative; z-index: 20; }
.material-icons-round { vertical-align: middle; }

.q-btn { 
    display: inline-flex; 
    align-items: center; 
    gap: 0.5rem; 
    font-size: 0.875rem; 
    line-height: 1.25rem; 
    cursor: pointer;
    user-select: none;
    outline: none;
}
.q-btn:hover { transform: translateY(-1px); }
.q-btn:active { transform: translateY(0); }

#media-preview-container { 
    margin-bottom: 2rem; 
    border-radius: 1rem; 
    overflow: hidden; 
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); 
    display: none;
}
#media-preview-container img { 
    width: 100%; 
    height: auto; 
    display: block; 
}

#batman-quality-selector { display: none; margin-bottom: 2rem; }

#batman-progress { 
    display: none; 
    margin-bottom: 2rem; 
    background: #fff; 
    border-radius: 1rem; 
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); 
    padding: 1.5rem; 
    border: 1px solid #e2e8f0; 
}
#prog-status { 
    display: flex; 
    align-items: center; 
    gap: 0.5rem; 
    font-size: 0.875rem; 
    font-weight: 500; 
    color: #475569; 
    margin-bottom: 0.75rem; 
}
#prog-percent { 
    float: left; 
    font-size: 0.875rem; 
    font-weight: 500; 
    color: #64748b; 
}
.progress-container { 
    height: 0.75rem; 
    background-color: #f1f5f9; 
    border-radius: 9999px; 
    overflow: hidden; 
}
#prog-bar { 
    height: 100%; 
    background: linear-gradient(to right, var(--c1, #256af4), var(--c2, #7c3aed)); 
    width: 0%; 
    transition: width 0.3s ease; 
    border-radius: 9999px; 
}

#batman-result { 
    display: none; 
    margin-bottom: 2rem; 
    animation: fadeInUp 0.5s ease-out; 
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.animate-spin { animation: spin 1s linear infinite; }
.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .5; }
}
.animate-bounce { animation: bounce 1s infinite; }
@keyframes bounce {
    0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8,0,1,1); }
    50% { transform: none; animation-timing-function: cubic-bezier(0,0,0.2,1); }
}
.animate-fade-in-up { animation: fadeInUp 0.5s ease-out forwards; }

.dark #batman-progress { 
    background: #0f172a; 
    border-color: #1e293b; 
}
.dark #prog-status { color: #cbd5e1; }
.dark .progress-container { background-color: #1e293b; }