{% extends "base.html" %}
{% import "/components/header.html" as header %}

{% import "/components/footer.html" as footer %}


{% block title %}Добавление картины{% endblock %}


{% block content %}
{{ header.section(user) }}
  <form class="c_sbrxk" id="postForm">
    <div class="c_dtjoh">
        <div class="c_aihm6 floating-group">
            <input name="author" id="author" placeholder="{{user.username}}" class="c_xhd5k" />
            <label for="author" class="c_z3ybu floating-label">Автор</label>
        </div>
        {% if user.get('grade') is none %}
        <div class="c_aihm6 floating-group">
            <input readonly name="grade" id="grade" class="c_xhd5k" required data-toast="Поле Звание должно быть заполнено" data-select="1" data-radio="0" data-list="['Без звания', 'Заслуженный художник Российской федерации', 'Народный художник Российской федерации', 'Академик Российской академии художеств', 'Почетный член Российской академии художеств', 'Действительный член Российской Академии художеств', 'Член-корреспондент Российской академии художеств', 'Член Союза художников России', 'Член творческого союза художников России', 'Член Московского союза художников', 'Член Подмосковного союза художников', 'Член Союза русских художников', 'Творческий союз профессиональных художников', 'Евразийский союз художников', 'Международный художественный фонд', 'Творческое объединение женщин-художников']" data-label="Сохранить" data-custom_placeholder="Напишите свой вариант" data-custom="1" data-title="Выберите звание из списка">
            <label for="grade" class="c_z3ybu floating-label">Звание</label>
        </div>
        <script>
            document.addEventListener('DOMContentLoaded', () => {
            showToast({message: 'Выберите из списка актуальное звание', status: 'info', duration:3000});
            });
        </script>
        {% endif %}
        <div class="c_aihm6 floating-group">
            <input name="title" id="title"  class="c_xhd5k" required data-toast="Поле Название должно быть заполнено"/>
            <label for="title" class="c_z3ybu floating-label">Название</label>
        </div>
        {% if 'user' not in user.roles %}
        <div class="c_aihm6 floating-group">
            <input name="city" id="city" class="c_xhd5k" required data-toast="Поле Город должно быть заполнено"/>
            <label for="city" class="c_z3ybu floating-label">Город</label>
        </div>
        {% endif %}
        <div class="c_aihm6 floating-group">
            <input name="size" id="size"  class="c_xhd5k" required data-toast="Поле Размер должно быть заполнено"/>
            <label for="size" class="c_z3ybu floating-label">Размер</label>
        </div>
        <div class="c_aihm6 floating-group">
            <input name="material" id="material"  class="c_xhd5k" required data-toast="Поле Материал должно быть заполнено"/>
            <label for="material" class="c_z3ybu floating-label">Материал</label>
        </div>
        <div class="c_aihm6 floating-group">
            <input readonly name="genre" id="genre"  class="c_xhd5k" required data-toast="Поле Жанр должно быть заполнено" data-select="1" data-radio="0" data-label="Сохранить" data-custom_placeholder="Напишите свой вариант" data-custom="1" data-title="Выберите жанр из списка">
            <label for="genre" class="c_z3ybu floating-label">Жанр</label>
        </div>
        <div class="c_aihm6 floating-group">
            <input name="price" id="price" class="c_xhd5k" required data-toast="Поле Цена должно быть заполнено" />
            <label for="price" class="c_z3ybu floating-label">Цена</label>
        </div>
        <div class="c_nb6gy floating-group">
            <textarea type="text" id="description" name="description" class="c_4ykpn"></textarea>
            <label for="description" class="c_z3ybu floating-label">Описание</label>
        </div>
        <div class="c_fzick b_mfuba">
            <button class="c_7d3qb b_dc4rx" type="button" 
                onclick="const p=this.nextElementSibling;  p.style.maxHeight=(getComputedStyle(p).maxHeight==='0px')?'max-content':'0px';">
                <span class="c_v3bsp b_xj1br">Список где будет опубликован Ваш пост</span>
            </button>
            <div class="b"">
                <div class="c_4rzkr b_wahs6">
                    <button class="c_m4qn3 b_5rck0" type="button" 
                    onclick="const p=this.nextElementSibling;  p.style.maxHeight=(getComputedStyle(p).maxHeight==='0px')?'max-content':'0px';">
                        <span class="b_6e4lx">Внешние соцсети</span>
                    </button>
                    <div class="b">
                        {% for doc in service_social %}
                        <div class="b_le4se">
                            <div class="b_aspvt">
                                <img class="b_aafot" src="/b/social/{{doc.img}}">
                                <img class="b_84c5q" src="/static/icons/{{doc.type}}.svg">
                            </div>
                            <span class="b_6e4lx">{{doc.name}}</span>
                        </div>
                        {% endfor %}
                    </div>
                </div>
                <div class="c_4rzkr b_wahs6">
                    <button class="c_m4qn3 b_5rck0" type="button" 
                    onclick="const p=this.nextElementSibling;  p.style.maxHeight=(getComputedStyle(p).maxHeight==='0px')?'max-content':'0px';">
                        <span class="b_6e4lx">Личные соцсети</span>
                    </button>
                    <div class="b">
                        {% if user_social|length>0 %}
                        {% for doc in user_social %}
                        <div class="b_le4se">
                            <div class="b_aspvt">
                                <img class="b_aafot" src="/b/social/{{doc.img}}">
                                <img class="b_84c5q" src="/static/icons/{{doc.type}}.svg">
                            </div>
                            <span class="b_6e4lx">{{doc.name}}</span>
                        </div>
                        {% endfor %}
                        {% else %}
                        <a class="c_7d3qb b_dc4rx ba" type="button" href="/profile/social">
                            <span class="c_v3bsp b_xj1br">Добавить личную соцсеть</span>
                        </a>
                        {% endif %}
                    </div>
                </div>
                <div class="c_4rzkr b_wahs6">
                    <button class="c_m4qn3 b_5rck0" type="button" 
                    onclick="const p=this.nextElementSibling;  p.style.maxHeight=(getComputedStyle(p).maxHeight==='0px')?'max-content':'0px';">
                        <span class="b_6e4lx">Галереи и музеи</span>
                    </button>
                    <div class="b">
                        {% for doc in partner %}
                        <div class="b_le4s">
                            <div class="b_aspvt">
                                <img class="c_o0nwu" src="/a/{{doc._id}}" crossorigin="anonymous" fetchpriority="high" loading="eager">
                            </div>
                            <span class="b_6e4lx">{{ doc.username }}</span>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
{{ header.section(user) }}
  <form class="c_sbrxk" id="postForm">
    <div class="c_dtjoh">
        <button class="c_aq9et ba" id="createBtn" type="button">
            <span class="c_som9s">Опубликовать</span>
        </button>
    </div>
    <div class="c_rtopc">
        <label class="c_aq9et ba" for="fileInput">
            <span class="c_som9s">Добавить фото</span>
        </label>
        <input class="c_1gai0" id="fileInput" type="file" multiple accept="image/*" style="display: none;"/>
        <div class="preview" id="preview"></div>
    </div>
  </form>
<script>
    const fileInput = document.getElementById('fileInput');
    const preview = document.getElementById('preview');
    const createBtn = document.getElementById('createBtn');
    const form = document.getElementById('postForm');

    let filesOrdered = [];
    const existingMedias = [];
    let isSubmitting = false;

    const CHUNK_SIZE = 2 * 1024 * 1024; // 2 MB

    // ========== Chunked upload ==========
    async function uploadFileInChunks(file, onProgress) {
        const totalChunks = Math.ceil(file.size / CHUNK_SIZE);
        const fileId = crypto.randomUUID();

        for (let i = 0; i < totalChunks; i++) {
            const start = i * CHUNK_SIZE;
            const end = Math.min(start + CHUNK_SIZE, file.size);
            const chunk = file.slice(start, end);

            const formData = new FormData();
            formData.append('chunk', chunk, file.name);
            formData.append('file_id', fileId);
            formData.append('chunk_index', i);
            formData.append('total_chunks', totalChunks);
            formData.append('filename', file.name);
            formData.append('content_type', file.type || 'application/octet-stream');

            const res = await fetch('/api/posts/media/chunk', {
                method: 'POST',
                body: formData
            });

            if (!res.ok) throw new Error(`Chunk ${i} failed`);

            onProgress((i + 1) / totalChunks);
        }

        const finalRes = await fetch('/api/posts/media/finalize', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ file_id: fileId })
        });

        if (!finalRes.ok) throw new Error('Finalize failed');
        const data = await finalRes.json();
        return data.post_medias[0];
    }

    function createProgressBar(fileName) {
        const wrapper = document.createElement('div');
        wrapper.className = 'upload-item';
        wrapper.innerHTML = `
            <div class="upload-name">${fileName}</div>
            <div class="progress-bar"><div class="progress-fill"></div></div>
            <div class="progress-text">0%</div>
        `;
        return wrapper;
    }

    async function uploadMediaFiles(files) {
        if (!files || files.length === 0) return { post_medias: [] };

        let progressContainer = document.getElementById('uploadProgress');
        if (!progressContainer) {
            progressContainer = document.createElement('div');
            progressContainer.id = 'uploadProgress';
            progressContainer.className = 'upload-progress-container';
            preview.parentNode.insertBefore(progressContainer, preview);
        }
        progressContainer.innerHTML = '';

        const results = [];

        for (const file of files) {
            const progressEl = createProgressBar(file.name);
            progressContainer.appendChild(progressEl);
            const fill = progressEl.querySelector('.progress-fill');
            const text = progressEl.querySelector('.progress-text');

            try {
                const name = await uploadFileInChunks(file, (p) => {
                    const pct = Math.round(p * 100);
                    fill.style.width = pct + '%';
                    text.textContent = pct + '%';
                });
                results.push(name);
                progressEl.classList.add('done');
                text.textContent = '✓';
            } catch (err) {
                progressEl.classList.add('error');
                text.textContent = 'Ошибка';
                throw err;
            }
        }

        setTimeout(() => progressContainer.remove(), 1200);
        return { post_medias: results };
    }

    // ========== Preview helpers ==========
    function createObjectURLSafe(item) {
        if (item.isExisting || !item.file) return item.url;
        if (!item.previewURL) item.previewURL = URL.createObjectURL(item.file);
        return item.previewURL;
    }

    function revokeObjectURLSafe(item) {
        if (item.previewURL) {
            URL.revokeObjectURL(item.previewURL);
            item.previewURL = null;
        }
    }

    function renderPreviews() {
        preview.innerHTML = '';
        filesOrdered.forEach((item, idx) => {
            const div = document.createElement('div');
            div.className = 'item';
            div.draggable = true;
            div.dataset.index = idx;

            const title = document.createElement('div');
            title.className = 'title';
            title.textContent = idx === 0 ? 'Титульная' : `${idx + 1}`;

            const isImage = item.type && item.type.startsWith('image');
            const mediaEl = document.createElement(isImage ? 'img' : 'video');
            mediaEl.className = 'thumb';
            mediaEl.src = createObjectURLSafe(item);
            if (!isImage) mediaEl.controls = true;

            const controls = document.createElement('div');
            controls.className = 'controls';

            const makeFirstBtn = document.createElement('button');
            makeFirstBtn.textContent = 'Титульная';
            makeFirstBtn.title = 'Сделать титульной';
            makeFirstBtn.disabled = idx === 0;
            makeFirstBtn.addEventListener('click', () => moveFile(idx, 0));

            const leftBtn = document.createElement('button');
            leftBtn.textContent = '←';
            leftBtn.disabled = idx === 0;
            leftBtn.addEventListener('click', () => moveFile(idx, idx - 1));

            const rightBtn = document.createElement('button');
            rightBtn.textContent = '→';
            rightBtn.disabled = idx === filesOrdered.length - 1;
            rightBtn.addEventListener('click', () => moveFile(idx, idx + 1));

            const removeBtn = document.createElement('button');
            removeBtn.textContent = '✖';
            removeBtn.addEventListener('click', () => removeFile(idx));

            if (idx > 0) controls.append(makeFirstBtn, leftBtn);
            if (idx < filesOrdered.length - 1) controls.append(rightBtn);
            controls.append(removeBtn);

            div.append(mediaEl, title, controls);
            preview.appendChild(div);

            // Drag & Drop
            div.addEventListener('dragstart', (e) => {
                e.dataTransfer.setData('text/plain', idx.toString());
                div.classList.add('dragging');
            });
            div.addEventListener('dragend', () => {
                div.classList.remove('dragging');
                document.querySelectorAll('.item').forEach(el => el.classList.remove('drag-over'));
            });
            div.addEventListener('dragover', (e) => {
                e.preventDefault();
                div.classList.add('drag-over');
            });
            div.addEventListener('dragleave', () => div.classList.remove('drag-over'));
            div.addEventListener('drop', (e) => {
                e.preventDefault();
                div.classList.remove('drag-over');
                const from = parseInt(e.dataTransfer.getData('text/plain'));
                const to = parseInt(div.dataset.index);
                if (from !== to) moveFile(from, to);
            });
        });
    }

    function moveFile(from, to) {
        if (to < 0 || to >= filesOrdered.length || from === to) return;
        const [moved] = filesOrdered.splice(from, 1);
        filesOrdered.splice(to, 0, moved);
        renderPreviews();
    }

    function removeFile(index) {
        const item = filesOrdered[index];
        revokeObjectURLSafe(item);
        filesOrdered.splice(index, 1);
        renderPreviews();
    }

    function loadExistingMedias() {
        existingMedias.forEach(media => {
            filesOrdered.push({
                name: media.name,
                url: media.url,
                isExisting: true,
                type: media.type
            });
        });
        renderPreviews();
    }

    // ========== File select → upload → show blob only after success ==========
    fileInput.addEventListener('change', async (e) => {
        const newFiles = Array.from(e.target.files);
        if (newFiles.length === 0) return;

        createBtn.disabled = true;

        try {
            const uploaded = await uploadMediaFiles(newFiles);

            newFiles.forEach((file, i) => {
                filesOrdered.push({
                    name: uploaded.post_medias[i],
                    url: `/b/posts/${uploaded.post_medias[i]}`,
                    file: file,
                    type: file.type,
                    isExisting: false
                });
            });

            renderPreviews(); // ← blob appears only here
        } catch (err) {
            console.error('Ошибка загрузки фото:', err);
            alert('Не удалось загрузить фото. Попробуйте ещё раз.');
        } finally {
            createBtn.disabled = false;
            fileInput.value = '';
        }
    });

    // ========== Publish button – only one request ==========
    document.addEventListener('DOMContentLoaded', () => {
        const author = '{{ user.username }}';
        const grade = '{{ user.grade }}';

        createBtn.addEventListener('click', async (e) => {
            e.preventDefault();
            if (isSubmitting) return;

            const requiredFields = [
                ...document.querySelectorAll('input[required]'),
                ...document.querySelectorAll('textarea[required]')
            ];
            let hasError = false;

            requiredFields.forEach(field => {
                const group = field.closest('.floating-group');
                const isEmpty = field.type === 'file'
                    ? !field.files || field.files.length === 0
                    : !field.value.trim();

                if (isEmpty) {
                    group?.classList.add('error');
                    hasError = true;
                    showToast({ message: field.dataset.toast, duration: 2500 });
                } else {
                    group?.classList.remove('error');
                }
            });

            if (hasError) return;

            if (filesOrdered.length === 0) {
                showToast({ message: 'Поле фото должно быть заполнено', duration: 2500 });
                return;
            }

            // Lock
            isSubmitting = true;
            createBtn.disabled = true;
            createBtn.classList.add('disabled');

            const data = new FormData(form);

            if (document.querySelector('#author')?.value === '') {
                data.set('author', author);
            }

            {% if 'user' in user.get('roles') and user.get('grade') is not none %}
            data.set('grade', grade);
            {% endif %}

            filesOrdered.forEach(f => data.append('post_medias', f.name));

            try {
                const res = await fetch('/api/post', {
                    method: 'POST',
                    body: data
                });

                if (res.ok) {
                    const params = new URLSearchParams(window.location.search);
                    const next = params.get('next') || '/profile/posts';
                    window.location.href = next;
                } else {
                    showToast({ message: 'Ошибка при создании поста', status: 'error', duration: 2500 });
                    isSubmitting = false;
                    createBtn.disabled = false;
                    createBtn.classList.remove('disabled');
                }
            } catch (err) {
                console.error(err);
                showToast({ message: 'Ошибка соединения', status: 'error', duration: 2500 });
                isSubmitting = false;
                createBtn.disabled = false;
                createBtn.classList.remove('disabled');
            }
        });

        document.querySelectorAll('.floating-group input, .floating-group textarea').forEach(input => {
            input.addEventListener('input', () => {
                input.closest('.floating-group')?.classList.remove('error');
            });
        });
    });

    window.addEventListener('load', loadExistingMedias);
    window.addEventListener('beforeunload', () => {
        filesOrdered.forEach(revokeObjectURLSafe);
    });
</script>
<script>
    document.addEventListener('DOMContentLoaded', () => {
    document.getElementById('genre').dataset.list=JSON.stringify([
  {
    "name": "Абстрактное искусство",
    "tooltip": "В нём не используются реальные объекты или изображения, а создаются абстрактные формы и композиции."
  },
  {
    "name": "Авангардизм",
    "tooltip": "Включает в себя экспрессионизм, абстракционизм и другие разновидности модернистского искусства."
  },
  {
    "name": "Анималистика",
    "tooltip": "Посвящена изображению зверей и птиц."
  },
  {
    "name": "Барокко",
    "tooltip": "Торжественность и вычурность, яркие краски и динамичные сюжеты. Сочетает иллюзию и реальность, духовное и материальное."
  },
  {
    "name": "Батальная живопись",
    "tooltip": "Изображение сцен сражений и военных действий"
  },
  {
    "name": "Бытовая живопись",
    "tooltip": "Посвящён повседневной жизни людей."
  },
  {
    "name": "ДПИ – декоративно прикладное искусство",
    "tooltip": "Вид художественного искусства, который охватывает многие разновидности  профессиональной и самодеятельной  творческой деятельности, которые люди используют в повседневной жизни."
  },
  {
    "name": "Импрессионизм",
    "tooltip": "Работа на пленэрах. Запечатление реального мира в его мимолётности и воздушности. художественное эмоциональное состояние автора."
  },
  {
    "name": "Интерьерная живопись",
    "tooltip": "Изображение внутренних помещений"
  },
  {
    "name": "Историческая живопись",
    "tooltip": "Изображение событий прошлого, исторических личностей и мифологических сцен."
  },
  {
    "name": "Классицизм",
    "tooltip": "Строгость и гармония. Обращение к античности. Основными элементами являются линия и светотень."
  },
  {
    "name": "Концептуальное искусство",
    "tooltip": "Для создания произведений используются концепции и идеи."
  },
  {
    "name": "Кубизм",
    "tooltip": "декомпозиция объектов на геометрические формы, такие как кубы, призмы и конусы, а затем их абстрактное пересложение."
  },
  {
    "name": "Марина",
    "tooltip": "Изображение морских пейзажей и кораблей"
  },
  {
    "name": "Минимализм",
    "tooltip": "Стремится к простоте и минимализму в своих произведениях."
  },
  {
    "name": "Модернизм",
    "tooltip": "Отрыв от реализма. Показ эмоций и переживаний автора, общее название для художественных направлений ХХ века, отвергающих традиционные формы."
  },
  {
    "name": "Монументальное искусство",
    "tooltip": "Живопись на архитектурных сооружениях и других стационарных основаниях, архитектурные и скульптурные композиции, выражающие значимые идеи. Включает в себя живопись (фрески, мозаики, витражи и т д)"
  },
  {
    "name": "Натюрморт",
    "tooltip": "Изображение неодушевленных предметов. Часто скомпонованных в декоративные композиции"
  },
  {
    "name": "Ню",
    "tooltip": "Показывает красоту обнажённого человеческого тела."
  },
  {
    "name": "Оп-арт",
    "tooltip": "Создание оптических иллюзий с помощью различных геометрических узоров, сочетания цветов и форм."
  },
  {
    "name": "Пейзаж",
    "tooltip": "Изображение природы отражающее ее красоту и разнообразие"
  },
  {
    "name": "Поп-арт",
    "tooltip": "Яркие краски, броские сюжеты, плакатность."
  },
  {
    "name": "Портрет",
    "tooltip": "Показывает индивидуальные черты конкретного человека"
  },
  {
    "name": "Реализм",
    "tooltip": "Изображение жизни как она есть. натуралистичность, правдивость образов."
  },
  {
    "name": "Романтизм",
    "tooltip": "Направление, подчеркивающее эмоциональность, индивидуальность и красоту"
  },
  {
    "name": "Скульптура",
    "tooltip": "Вид изобразительного искусства, произведения которого имеют объемную форму и выполняются из твёрдых материалов."
  },
  {
    "name": "Соцреализм",
    "tooltip": "Отражает социальную реальность через произведения искусства."
  },
  {
    "name": "Сюрреализм",
    "tooltip": "Искажает реальность и создаёт необычные образы."
  },
  {
    "name": "Цифровое искусство",
    "tooltip": "Использует компьютерные технологии для создания произведений."
  }
])
    })
</script>
{{ footer.section() }}
{% endblock %}


{% block head %}
{{ header.style() }}
<style>
.upload-progress-container {
    margin: 12px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.upload-item {
    background: #f5f5f5;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
}

.upload-name {
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.progress-bar {
    height: 6px;
    background: #e0e0e0;
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #4f46e5, #7c3aed);
    border-radius: 3px;
    transition: width 0.25s ease;
}

.progress-text {
    margin-top: 4px;
    font-size: 12px;
    color: #666;
}

.upload-item.done .progress-fill {
    background: #16a34a;
}

.upload-item.error .progress-fill {
    background: #dc2626;
}

#createBtn.disabled,
#createBtn:disabled {
    opacity: 0.6;
    pointer-events: none;
    cursor: not-allowed;
}
.b_xj1br { color: #FFF; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.b_dc4rx { align-items: center; align-self: stretch; background: #5F1798; border-radius: 5px; display: flex; justify-content: center; padding: 12px 0; }
.b_5rck0 { align-items: center; align-self: stretch; background: #F39318; border-radius: 5px; display: flex; justify-content: center; padding: 12px 0; }
.b_ua17f { flex-shrink: 0; height: 50px; width: 50px; }
.b_0bazx { flex-shrink: 0; height: 20px; width: 20px; }
.b{ max-height: 0; overflow: hidden; transition: max-height .4s ease; gap: 10px; width: 100%; display: grid; }

.b_aafot { border-radius: 50%;  height: 70px;  min-width: 70px; object-fit: cover;  max-width: 170px;  object-position: top;}
.b_6e4lx { width: 100%; text-align: center; color: #000; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.b_84c5q { background: #fff; border-radius: 50%; align-items: center; aspect-ratio: 1/1; bottom: 0; display: flex; height: 20px; justify-content: center; position: absolute; right: 0; width: 20px; }
.b_aspvt { align-items: center; display: flex; gap: 10px; }
.b_le4se { align-items: center; align-self: stretch; display: flex; gap: 10px; }
.b_le4s { align-items: center;
  align-self: stretch;
  display: flex;
  gap: 10px;
  flex-direction: column;
  box-shadow: 0 0px 8px 0px #00000036;
  padding: 10px;
  margin: 10px;
  border-radius: 5px; }
.b_wahs6 { align-items: flex-start; align-self: stretch; display: flex; flex-direction: column; gap: 10px; }
.b_mfuba { align-items: center; display: flex; flex-direction: column; gap: 10px; width: 324px; }
.c_o0nwu{
    border-radius: 1em;
  height: 100px;
  min-width: 100px;
  object-fit: cover;
  max-width: 270px;
  object-position: top;
}
/* Mobile */
@media (max-width: 699px) {
.c_b5176 { align-items: center; background: #FFF; display: flex; flex-direction: column; width: 375px; }
}

/* Tablet */
@media (min-width: 700px) and (max-width: 900px) {
.c_b5176 { align-items: center; background: #FFF; display: flex; flex-direction: column; width: 597px; }
}

/* Desktop */
@media (min-width: 901px) {
.c_b5176 { align-items: center; background: #FFF; display: flex; flex-direction: column; width: 1136px; }
}</style>
  <style>
    .preview { 
      display: flex; 
      gap: 8px; 
      flex-wrap: wrap; 
      margin-top: 8px; 
    }
    .item { 
      border: 1px solid #ddd; 
      padding: 8px; 
      width: 335px; 
      display: flex; 
      flex-direction: column; 
      align-items: center;
      background: white;
      border-radius: 4px;
      transition: all 0.2s;
    }
    .item.dragging {
      opacity: 0.4;
      border-style: dashed;
      transform: scale(0.95);
    }
    .item.drag-over {
      border-color: #a200ff;
      background: #f9f0ff;
      transform: scale(1.05);
    }
    .thumb { 
      width: 335px; 
      object-fit: cover; 
      background: #f6f6f6;
      border-radius: 4px;
    }
    .controls { 
      margin-top: 6px; 
      display: flex; 
      gap: 4px; 
    }
    .title {
      color: #5f1798;
  font-size: 24px;
      text-align: center;
      margin: 4px 0;
      word-break: break-all;
    }
    .controls>button { 
display: flex;
    padding: 16px 23px;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    border-radius: 5px;
    font-size: 16px;
    background: #5F1798;
    color: white;
    }
  </style>
  <style>
.poster-group {position: relative;}

.file-name-display {width: 100%;padding: 16px 50px 16px 16px;border: 2px solid #ddd;border-radius: 8px;font-size: 16px;color: #555;background: #fff;min-height: 56px;display: flex;align-items: center;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;transition: all 0.3s ease;cursor: pointer;}

/* Hover эффект */
.c_aihm6:hover input, .c_nb6gy:hover textarea, .poster-group:hover .file-name-display {border-color: #5F1798;}

/* Когда файл выбран — делаем текст чуть темнее */
.poster-group.has-file .file-name-display {color: #222;font-weight: 500;}

/* Скрытый input file */
.hidden-file {position: absolute;inset: 0;opacity: 0;cursor: pointer;z-index: 2;}

/* Плавающий лейбл */
.poster-group .floating-label {position: absolute;left: 16px;top: 16px;font-size: 16px;color: #666;background: #fff;padding: 0 6px;z-index: 3;transition: all 0.3s ease;pointer-events: none;}

/* Когда лейбл должен подняться */
.poster-group input:focus + .floating-label,
.poster-group.has-file .floating-label {top: -8px;font-size: 13px;color: #5F1798;}

/* Иконка справа */
.file-icon {position: absolute;right: 16px;top: 50%;transform: translateY(-50%);z-index: 3;pointer-events: none;}

/* Красная ошибка */
.poster-group.error .file-name-display {border-color: #e74c3c !important;box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.15);}

.poster-group.error .floating-label {color: #e74c3c !important;}
/* ====================== FLOATING LABELS ====================== */
.floating-group {position: relative;margin-bottom: 1.5rem;}

.floating-label {position: absolute;left: 16px;top: 16px;font-size: 16px;color: #666;transition: all 0.3s ease;pointer-events: none;background: #fff;padding: 0 6px;z-index: 2;}

/* Плавающий лейбл */
.floating-group input:focus + .floating-label, .floating-group textarea:focus + .floating-label,
.floating-group input:not(:placeholder-shown) + .floating-label, .floating-group textarea:not(:placeholder-shown) + .floating-label {top: -8px;font-size: 15px;color: #5F1798;}

/* Красная подсветка — ТОЛЬКО после попытки отправки */
.floating-group.error input, .floating-group.error textarea,
.floating-group.error input[type="file"] {border-color: #e74c3c !important;box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.38);}

.floating-group.error .floating-label {color: #e74c3c !important;}

/* Основные стили полей */
.c_xhd5k, .c_4ykpn {width: 100%;padding: 16px 16px;border: 2px solid #ddd;border-radius: 8px;font-size: 16px;transition: all 0.3s ease;background: #fff;}

 .c_xhd5k:focus, .c_4ykpn:focus {border-color: #5F1798;outline: none;box-shadow: 0 0 0 3px rgba(95, 23, 152, 0.15);}

/* Файловые поля */
.file-group input[type="file"] {height: 43px;}


.file-group .floating-label {top: 12px;}
/* ====================== СКРЫТЬ СТРЕЛОЧКИ У INPUT TYPE=NUMBER ====================== */

/* Chrome, Edge, Safari, Opera */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0;display: none;}

/* Firefox */
input[type="number"] {-moz-appearance: textfield;}

/* Дополнительно: чтобы стрелочки не появлялись при фокусе (на всякий случай) */
input[type="number"]:hover::-webkit-outer-spin-button,
input[type="number"]:focus::-webkit-outer-spin-button,
input[type="number"]:hover::-webkit-inner-spin-button,
input[type="number"]:focus::-webkit-inner-spin-button {display: none;}
.c_xc07u {white-space: pre;}
.c_5qh93{cursor: pointer;}
.c_965ia{object-fit: cover;}
.c_rtopc{width: 335px;}
.c_z3ybu{top: -8px;
  font-size: 15px;
  color: #5F1798;}
@media (min-width: 901px) {
.c_abq53 { color: #0ED646; font-family: Inter; font-size: 12px; font-style: normal; font-weight: 700; line-height: normal; }
.c_ydot9 { display: flex; padding: 1.5px 10px; justify-content: center; align-items: center; border-radius: 30px; background: rgba(14, 214, 70, 0.20); }
.c_w5koo { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; flex: 1 0 0; overflow: hidden; color: #000; text-overflow: ellipsis; font-family: Inter; font-size: 24px; font-style: normal; font-weight: 700; line-height: normal; }
.c_fudgr { display: flex; justify-content: center; align-items: center; align-self: stretch; }
.c_n5lj4 { align-self: stretch; color: #5F1798; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.c_bffhf { width: 50px; height: 50px; aspect-ratio: 1/1; border-radius: 16px; }
.c_sya8w { align-self: stretch; color: #000; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; }
.c_o5cc2 { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; flex: 1 0 0; }
.c_zxyme { display: flex; height: 50px; align-items: center; gap: 13px; align-self: stretch; }
.c_rq5iq { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; align-self: stretch; overflow: hidden; color: rgba(58, 58, 58, 0.75); text-overflow: ellipsis; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.c_sa311 { align-self: stretch; color: rgba(58, 58, 58, 0.75); text-align: right; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.c_yhst8 { display: flex; padding: 10px 20px; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px; align-self: stretch; border-radius: 10px; background: #FFF; }
.c_jz1u6 { display: flex; width: 335px; height: 418px; padding: 120px 20px 20px 20px; flex-direction: column; align-items: flex-start; border-radius: 5px; border: 1px solid #5F1798; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.30), 0 4px 20px 0 rgba(0, 0, 0, 0.20); }
}

@media (min-width: 700px) and (max-width: 900px) {
.c_abq53 { color: #0ED646; font-family: Inter; font-size: 12px; font-style: normal; font-weight: 700; line-height: normal; }
.c_ydot9 { display: flex; padding: 1.5px 10px; justify-content: center; align-items: center; border-radius: 30px; background: rgba(14, 214, 70, 0.20); }
.c_w5koo { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; flex: 1 0 0; overflow: hidden; color: #000; text-overflow: ellipsis; font-family: Inter; font-size: 24px; font-style: normal; font-weight: 700; line-height: normal; }
.c_fudgr { display: flex; justify-content: center; align-items: center; align-self: stretch; }
.c_n5lj4 { align-self: stretch; color: #5F1798; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.c_bffhf { width: 50px; height: 50px; aspect-ratio: 1/1; border-radius: 16px; }
.c_sya8w { align-self: stretch; color: #000; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; }
.c_o5cc2 { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; flex: 1 0 0; }
.c_zxyme { display: flex; height: 50px; align-items: center; gap: 13px; align-self: stretch; }
.c_rq5iq { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; align-self: stretch; overflow: hidden; color: rgba(58, 58, 58, 0.75); text-overflow: ellipsis; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.c_sa311 { align-self: stretch; color: rgba(58, 58, 58, 0.75); text-align: right; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.c_yhst8 { display: flex; padding: 10px 20px; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px; align-self: stretch; border-radius: 10px; background: #FFF; }
.c_jz1u6 { display: flex; width: calc(50% - 10px); height: 418px; padding: 120px 20px 20px 20px; flex-direction: column; align-items: flex-start; flex-shrink: 0; border-radius: 5px; border: 1px solid #5F1798; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.30), 0 4px 20px 0 rgba(0, 0, 0, 0.20); }
}

@media (max-width: 699px) {
    .item,.thumb{width: 100%;}
    .c_dtjoh{order: 2;} .c_rtopc{order: 1;}
.c_abq53 { color: #0ED646; font-family: Inter; font-size: 12px; font-style: normal; font-weight: 700; line-height: normal; }
.c_ydot9 { display: flex; padding: 1.5px 10px; justify-content: center; align-items: center; border-radius: 30px; background: rgba(14, 214, 70, 0.20); }
.c_w5koo { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; flex: 1 0 0; overflow: hidden; color: #000; text-overflow: ellipsis; font-family: Inter; font-size: 24px; font-style: normal; font-weight: 700; line-height: normal; }
.c_fudgr { display: flex; justify-content: center; align-items: center; align-self: stretch; }
.c_n5lj4 { align-self: stretch; color: #5F1798; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.c_bffhf { width: 50px; height: 50px; aspect-ratio: 1/1; border-radius: 16px; }
.c_sya8w { align-self: stretch; color: #000; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; }
.c_o5cc2 { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; flex: 1 0 0; }
.c_zxyme { display: flex; height: 50px; align-items: center; gap: 13px; align-self: stretch; }
.c_rq5iq { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; align-self: stretch; overflow: hidden; color: rgba(58, 58, 58, 0.75); text-overflow: ellipsis; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.c_sa311 { align-self: stretch; color: rgba(58, 58, 58, 0.75); text-align: right; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.c_yhst8 { display: flex; padding: 10px 20px; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px; align-self: stretch; border-radius: 10px; background: #FFF; }
.c_jz1u6 { display: flex; width: 335px; padding: 120px 20px 20px 20px; flex-direction: column; align-items: flex-start; border-radius: 5px; border: 1px solid #5F1798; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.30), 0 4px 20px 0 rgba(0, 0, 0, 0.20); }
}
@media (min-width: 901px) {
.c_xhd5k { display: flex; height: 42px; padding: 5px 10px; align-items: center; flex: 1 0 0; }
.c_z3ybu { position: absolute; left: 13px; font-family: Inter; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; }
.c_vphtp { width: 18px; height: 18px; fill: #5F1798; }
.c_ffjwp { width: 24px; height: 24px; flex-shrink: 0; }
.c_aihm6 { display: flex; width: 323px;  justify-content: center; align-items: center; border-radius: 5px; background: #FFF; }
.c_4ykpn { display: flex; height: 104px; padding: 10px 10px; align-items: center; flex: 1 0 0; }
.c_nb6gy { display: flex; width: 323px;  justify-content: center; align-items: center; border-radius: 5px; background: #FFF; }
.c_q00x6 { min-width: 230px; flex: 1 0 0; color: #000; font-family: Inter; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; }
.c_mkcow { color: #000; font-family: Inter; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; }
.c_uklyi { width: 20px; color: #000; text-align: center; font-family: Inter; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; }
.c_l8kil {display: flex;padding: 5px 00px;align-items: center;border-radius: 5px;border: 1px solid rgba(95, 23, 152, 0.20);background: #FDFAFF;width: 35px;text-align: center;}
.c_5qh93 { display: flex; height: 7px; justify-content: center; align-items: center; flex: 1 0 0; border-radius: 5px; background: rgba(95, 23, 152, 0.20); }
.c_jups4 { display: flex; width: 323px; padding: 10px; align-items: center; align-content: center; gap: 10px; flex-wrap: wrap; border-radius: 5px; background: #FFF; border: 1px solid #5F1798; }
.c_som9s { color: #FFF; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.c_aq9et { display: flex; padding: 19px 33px; justify-content: center; align-items: center; align-self: stretch; border-radius: 5px; background: #5F1798; }
.c_dtjoh { display: flex; width: 323px; flex-direction: column; align-items: flex-start; gap: 12px; flex-shrink: 0; }
.c_1gai0 { align-self: stretch; color: #000; text-align: center; font-family: Inter; font-size: 24px; font-style: normal; font-weight: 700; line-height: normal; }
.c_med8n { color: #5F1798; font-family: Inter; font-size: 12px; font-style: normal; font-weight: 700; line-height: normal; }
.c_g8o3y { display: flex; padding: 1.5px 10px; justify-content: center; align-items: center; border-radius: 30px; background: rgba(95, 23, 152, 0.20); }
.c_1pdx0 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; flex: 1 0 0; overflow: hidden; color: #000; text-overflow: ellipsis; font-family: Inter; font-size: 24px; font-style: normal; font-weight: 700; line-height: normal; }
.c_r5tzr { display: flex; justify-content: center; align-items: center; align-self: stretch; }
.c_965ia { width: 50px; height: 50px; aspect-ratio: 1/1; border-radius: 50px; }
.c_t9q2z { width: 189px; color: #000; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; }
.c_zruk7 { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.c_k3nyf { display: flex; height: 50px; align-items: center; gap: 13px; align-self: stretch; }
.c_xc07u { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; align-self: stretch; overflow: hidden; color: rgba(58, 58, 58, 0.75); text-overflow: ellipsis; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.c_hni7n { align-self: stretch; color: #5F1798; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.c_qfcvm { align-self: stretch; color: rgba(58, 58, 58, 0.75); text-align: right; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.c_rtopc { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 20px; flex-shrink: 0; }
.c_sbrxk { padding: 50px 0px 100px; display: flex; box-sizing: unset; justify-content: center; align-items: flex-start; align-content: flex-start; gap: 200px; flex-wrap: wrap; background: #FFF; }
}

@media (min-width: 700px) and (max-width: 900px) {
.c_xhd5k { display: flex; height: 42px; padding: 5px 10px; align-items: center; flex: 1 0 0; }
.c_z3ybu { position: absolute; left: 13px; font-family: Inter; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; }
.c_vphtp { width: 18px; height: 18px; fill: #5F1798; }
.c_ffjwp { width: 24px; height: 24px; flex-shrink: 0; }
.c_aihm6 { display: flex; width: 323px;  justify-content: center; align-items: center; border-radius: 5px; background: #FFF; }
.c_4ykpn { display: flex; height: 104px; padding: 10px 10px; align-items: center; flex: 1 0 0; }
.c_nb6gy { display: flex; width: 323px;  justify-content: center; align-items: center; border-radius: 5px; background: #FFF; }
.c_q00x6 { min-width: 230px; flex: 1 0 0; color: #000; font-family: Inter; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; }
.c_mkcow { color: #000; font-family: Inter; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; }
.c_uklyi { width: 20px; color: #000; text-align: center; font-family: Inter; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; }
.c_l8kil {display: flex;padding: 5px 00px;align-items: center;border-radius: 5px;border: 1px solid rgba(95, 23, 152, 0.20);background: #FDFAFF;width: 35px;text-align: center;}
.c_5qh93 { display: flex; height: 7px; justify-content: center; align-items: center; flex: 1 0 0; border-radius: 5px; background: rgba(95, 23, 152, 0.20); }
.c_jups4 { display: flex; width: 323px; padding: 10px; align-items: center; align-content: center; gap: 10px; flex-wrap: wrap; border-radius: 5px; background: #FFF; border: 1px solid #5F1798; }
.c_som9s { color: #FFF; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.c_aq9et { display: flex; padding: 19px 33px; justify-content: center; align-items: center; align-self: stretch; border-radius: 5px; background: #5F1798; }
.c_dtjoh { display: flex; width: 323px; flex-direction: column; align-items: flex-start; gap: 12px; flex-shrink: 0; }
.c_1gai0 { align-self: stretch; color: #000; text-align: center; font-family: Inter; font-size: 24px; font-style: normal; font-weight: 700; line-height: normal; }
.c_med8n { color: #5F1798; font-family: Inter; font-size: 12px; font-style: normal; font-weight: 700; line-height: normal; }
.c_g8o3y { display: flex; padding: 1.5px 10px; justify-content: center; align-items: center; border-radius: 30px; background: rgba(95, 23, 152, 0.20); }
.c_1pdx0 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; flex: 1 0 0; overflow: hidden; color: #000; text-overflow: ellipsis; font-family: Inter; font-size: 24px; font-style: normal; font-weight: 700; line-height: normal; }
.c_r5tzr { display: flex; justify-content: center; align-items: center; align-self: stretch; }
.c_965ia { width: 50px; height: 50px; aspect-ratio: 1/1; border-radius: 50px; }
.c_t9q2z { width: 189px; color: #000; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; }
.c_zruk7 { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.c_k3nyf { display: flex; height: 50px; align-items: center; gap: 13px; align-self: stretch; }
.c_xc07u { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; align-self: stretch; overflow: hidden; color: rgba(58, 58, 58, 0.75); text-overflow: ellipsis; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.c_hni7n { align-self: stretch; color: #5F1798; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.c_qfcvm { align-self: stretch; color: rgba(58, 58, 58, 0.75); text-align: right; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.c_rtopc { display: flex;  flex-direction: column; justify-content: center; align-items: flex-start; gap: 20px; flex-shrink: 0; }
.c_sbrxk { padding: 50px 0px 100px; display: flex; box-sizing: unset; justify-content: center; align-items: flex-start; gap: 50px; background: #FFF; }
}

@media (max-width: 699px) {
.c_xhd5k { display: flex; height: 42px; padding: 5px 10px; align-items: center; flex: 1 0 0; }
.c_z3ybu { position: absolute; left: 13px;  font-family: Inter; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; }
.c_vphtp { width: 18px; height: 18px; fill: #5F1798; }
.c_ffjwp { width: 24px; height: 24px; }
.c_aihm6 { display: flex;  justify-content: center; align-items: center; align-self: stretch; border-radius: 5px; background: #FFF; }
.c_4ykpn { display: flex; height: 104px; padding: 10px 10px; align-items: center; flex: 1 0 0; }
.c_nb6gy { display: flex;  justify-content: center; align-items: center; align-self: stretch; border-radius: 5px; background: #FFF; }
.c_q00x6 { min-width: 230px; flex: 1 0 0; color: #000; font-family: Inter; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; }
.c_mkcow { color: #000; font-family: Inter; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; }
.c_uklyi { width: 20px; color: #000; text-align: center; font-family: Inter; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; }
.c_l8kil {display: flex;padding: 5px 00px;align-items: center;border-radius: 5px;border: 1px solid rgba(95, 23, 152, 0.20);background: #FDFAFF;width: 35px;text-align: center;}
.c_5qh93 { height: 7px; flex: 1 0 0; fill: rgba(95, 23, 152, 0.20); background: rgba(95, 23, 152, 0.20);}
.c_jups4 { display: flex; padding: 10px; align-items: center; align-content: center; gap: 10px; align-self: stretch; flex-wrap: wrap; border-radius: 5px; background: #FFF; border: 1px solid #5F1798; }
.c_som9s { color: #FFF; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.c_aq9et { display: flex; padding: 19px 33px; justify-content: center; align-items: center; align-self: stretch; border-radius: 5px; background: #5F1798; }
.c_dtjoh { display: flex; width: 323px; flex-direction: column; align-items: flex-start; gap: 12px; flex-shrink: 0; }
.c_1gai0 { align-self: stretch; color: #000; text-align: center; font-family: Inter; font-size: 24px; font-style: normal; font-weight: 700; line-height: normal; }
.c_med8n { color: #5F1798; font-family: Inter; font-size: 12px; font-style: normal; font-weight: 700; line-height: normal; }
.c_g8o3y { display: flex; padding: 1.5px 10px; justify-content: center; align-items: center; border-radius: 30px; background: rgba(95, 23, 152, 0.20); }
.c_1pdx0 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; flex: 1 0 0; overflow: hidden; color: #000; text-overflow: ellipsis; font-family: Inter; font-size: 24px; font-style: normal; font-weight: 700; line-height: normal; }
.c_r5tzr { display: flex; justify-content: center; align-items: center; align-self: stretch; }
.c_965ia { width: 50px; height: 50px; aspect-ratio: 1/1; border-radius: 50px; }
.c_t9q2z { width: 189px; color: #000; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; }
.c_zruk7 { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.c_k3nyf { display: flex; height: 50px; align-items: center; gap: 13px; align-self: stretch; }
.c_xc07u { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; align-self: stretch; overflow: hidden; color: rgba(58, 58, 58, 0.75); text-overflow: ellipsis; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.c_hni7n { align-self: stretch; color: #5F1798; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.c_qfcvm { align-self: stretch; color: rgba(58, 58, 58, 0.75); text-align: right; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.c_rtopc { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px; flex-shrink: 0; }
.c_sbrxk { padding: 50px 0px 100px; display: flex; box-sizing: unset; justify-content: center; align-items: flex-start; align-content: flex-start; gap: 50px 0; flex-wrap: wrap; background: #FFF; }
}
.c_sbrxk{z-index: 1000;}
#preview_poster{width: 335px;}
</style>
{{ footer.style() }}
{% endblock %}