/* ===== АНИМИРОВАННЫЙ ФОН И УЛУЧШЕНИЯ ===== */

/* Анимированный градиентный фон */
body {
    background: linear-gradient(-45deg, #667eea 0%, #764ba2 25%, #667eea 50%, #f093fb 75%, #667eea 100%);
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
    position: relative;
    overflow-x: hidden;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Плавающие частицы на фоне */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 40% 20%, rgba(255, 255, 255, 0.06) 0%, transparent 50%);
    animation: particlesFloat 20s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes particlesFloat {
    0%, 100% { transform: translate(0, 0); }
    33% { transform: translate(30px, -30px); }
    66% { transform: translate(-20px, 20px); }
}

/* Футер прижат к низу */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.main-content {
    flex: 1;
    padding-bottom: 3rem;
    position: relative;
    z-index: 1;
}

.footer {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    padding: 2rem 0;
    text-align: center;
    color: #7f8c8d;
    margin-top: auto;
    border-top: 1px solid rgba(74, 144, 226, 0.1);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 10;
}

/* Улучшенная форма с отступами */
.form-group {
    margin-bottom: 2rem !important;
}

.form-group label {
    display: block;
    margin-bottom: 0.75rem;
    font-weight: 600;
    color: #2c3e50;
    font-size: 1.05rem;
}

.form-group label i {
    margin-right: 0.5rem;
    color: #4a90e2;
}

/* Select с улучшенным отступом */
.form-control {
    margin-bottom: 0 !important;
}

/* Кнопка с отступом сверху */
.btn-primary.btn-lg,
.btn-primary {
    margin-top: 1.5rem !important;
}

/* Контейнер секции редактора */
.editor-section {
    position: relative;
    z-index: 1;
}

/* Navbar с прозрачностью */
.navbar {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(74, 144, 226, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 100;
}

/* Карточки с небольшой прозрачностью */
.editor-section,
.upload-section,
.settings-section,
.tokens-section {
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(20px);
}

/* Результаты */
.result-card,
.success-card {
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(10px);
}

/* Процесс обработки */
.processing,
.processing-editor {
    background: linear-gradient(135deg, rgba(240, 247, 255, 0.98) 0%, rgba(232, 245, 233, 0.98) 100%) !important;
    backdrop-filter: blur(10px);
}

/* Адаптивность */
@media (max-width: 768px) {
    .form-group {
        margin-bottom: 1.5rem !important;
    }
    
    .btn-primary {
        margin-top: 1rem !important;
    }
}

/* Анимация появления секций */
.editor-section,
.upload-section {
    animation: fadeInScale 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Плавное появление контента */
.container > * {
    animation: fadeInUp 0.5s ease-out backwards;
}

.container > *:nth-child(1) { animation-delay: 0.1s; }
.container > *:nth-child(2) { animation-delay: 0.2s; }
.container > *:nth-child(3) { animation-delay: 0.3s; }

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