/* ---------------------------------------------------------------------
   فونت‌های زیرنویس
   ---------------------------------------------------------------------
   نکته مهم: هر @font-face بدون تعیین وزن، به صورت پیش‌فرض وزن ۴۰۰ در نظر
   گرفته می‌شود. چون عنصر زیرنویس با font-weight: bold رسم می‌شد، مرورگر
   «بولدِ ساختگی» تولید می‌کرد و حروف را تا ۲۰٪ پهن‌تر می‌کشید — در حالی که
   سرور همان فایل TTF را بدون ضخیم‌سازی رسم می‌کند. نتیجه‌اش این بود که عرض
   جمله در پیش‌نمایش با خروجی فرق می‌کرد.
   با اعلام بازه وزن (100 تا 900)، مرورگر دیگر وزن نمی‌سازد و دقیقاً همان
   شکلی را می‌کشد که سرور می‌کشد.
   --------------------------------------------------------------------- */
@font-face { font-family: 'Sarbaz'; src: url('/static/fonts/Sarbaz.ttf'); font-weight: 100 900; font-style: normal; }
@font-face { font-family: 'IranNastaliq'; src: url('/static/fonts/IranNastaliq.ttf'); font-weight: 100 900; font-style: normal; }
@font-face { font-family: 'VazirThin'; src: url('/static/fonts/Vazirmatn-Thin.ttf'); font-weight: 100 900; font-style: normal; }
@font-face { font-family: 'MadaThin'; src: url('/static/fonts/Mada-ExtraLight.ttf'); font-weight: 100 900; font-style: normal; }
@font-face { font-family: 'ArefBold'; src: url('/static/fonts/ArefRuqaa-Bold.ttf'); font-weight: 100 900; font-style: normal; }
@font-face { font-family: 'Dastnevis'; src: url('/static/fonts/Dastnevis.ttf'); font-weight: 100 900; font-style: normal; }
@font-face { font-family: 'Entazar'; src: url('/static/fonts/Entazar.ttf'); font-weight: 100 900; font-style: normal; }
@font-face { font-family: 'Kamran'; src: url('/static/fonts/Kamran.ttf'); font-weight: 100 900; font-style: normal; }
@font-face { font-family: 'Gharib'; src: url('/static/fonts/Gharib.ttf'); font-weight: 100 900; font-style: normal; }
@font-face { font-family: 'Pinar'; src: url('/static/fonts/Pinar-Bold.ttf'); font-weight: 100 900; font-style: normal; }
@font-face { font-family: 'Hasti'; src: url('/static/fonts/Hasti.ttf'); font-weight: 100 900; font-style: normal; }

/* سه فونت زیر در رابط کاربری از گوگل‌فونت می‌آیند، ولی سرور نسخه محلی خودش را
   رسم می‌کند. برای اینکه پیش‌نمایش زیرنویس دقیقاً با خروجی یکی شود، همان
   فایل‌های محلی را زیر نام جداگانه معرفی می‌کنیم و فقط برای زیرنویس به کار
   می‌بریم (فونت بقیه رابط دست‌نخورده می‌ماند). */
@font-face { font-family: 'VazirSub'; src: url('/static/fonts/Vazirmatn.ttf'); font-weight: 100 900; font-style: normal; }
@font-face { font-family: 'LalezarSub'; src: url('/static/fonts/Lalezar.ttf'); font-weight: 100 900; font-style: normal; }
@font-face { font-family: 'AmiriSub'; src: url('/static/fonts/Amiri-Bold.ttf'); font-weight: 100 900; font-style: normal; }
:root { --bg: #0f0f0f; --surface: #1e1e1e; --primary: #7C4DFF; --text: #fff; --highlight: #2a2a2a; --panel-bg: #151515; --static-color: #A020F0; --accent-orange: #FF7043; --danger-red: #ff5252; --chip-bg: #2c2c2c; --input-bg: #2a2a2a; }

* { box-sizing: border-box; user-select: none; -webkit-tap-highlight-color: transparent; outline: none; }

body { margin: 0; background: var(--bg); color: var(--text); font-family: 'Vazirmatn'; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; min-height: 100vh; padding-bottom: 50px;}

/* --- صفحه خانه (پروژه‌ها) --- */
#homeScreen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #121212; z-index: 5000; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; }
.home-header { font-size: 1.5rem; font-weight: 900; margin-bottom: 20px; text-align: right; color: #eee; }

.projects-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; padding-bottom: 80px; }

.project-card {
background: #252525; border-radius: 20px; overflow: hidden; position: relative;
box-shadow: 0 4px 10px rgba(0,0,0,0.3); transition: 0.2s; cursor: pointer; aspect-ratio: 1 / 1.1; display: flex; flex-direction: column;
}
.project-card:active { transform: scale(0.97); }

.card-thumb { width: 100%; height: 70%; background: #333; background-size: cover; background-position: center; position: relative; }
.card-overlay { position: absolute; bottom: 0; width: 100%; height: 50%; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); }
.card-duration { position: absolute; bottom: 10px; right: 10px; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); padding: 2px 8px; border-radius: 10px; font-size: 0.75rem; color: #fff; font-weight: bold; }
.card-menu { position: absolute; top: 10px; left: 10px; width: 35px; height: 35px; background: rgba(0,0,0,0.4); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1rem; backdrop-filter: blur(4px); transition: 0.2s; z-index: 10; }
.card-menu:active { background: var(--primary); transform: scale(0.9); }

.card-details { padding: 10px; flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.card-title { font-weight: bold; font-size: 1.1rem; color: #fff; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.card-date { font-size: 0.75rem; color: #888; }

#noProjectsPlaceholder { display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #666; position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); width: 100%; }
.placeholder-icon { width: 100px; height: 100px; border: 3px solid var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; color: var(--primary); margin-bottom: 20px; animation: pulse 2.5s infinite ease-in-out; background: rgba(124, 77, 255, 0.05); }
.placeholder-text { font-size: 1.1rem; font-weight: bold; color: #ddd; }
@keyframes pulse { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(124, 77, 255, 0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 15px rgba(124, 77, 255, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(124, 77, 255, 0); } }

.fab-add { position: fixed; bottom: 50px; left: 50%; transform: translateX(-50%); background: var(--accent-orange); color: #fff; padding: 15px 40px; border-radius: 30px; font-size: 1.1rem; font-weight: bold; box-shadow: 0 5px 20px rgba(255, 112, 67, 0.4); border: none; cursor: pointer; display: flex; align-items: center; gap: 10px; z-index: 5001; transition: 0.2s; font-family: inherit; width: 90%; max-width: 400px; justify-content: center; }
.fab-add:active { transform: translateX(-50%) scale(0.95); }

.action-sheet-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 6000; display: none; align-items: flex-end; justify-content: center; animation: fadeInOverlay 0.2s forwards; padding-bottom: 20px; }
.action-sheet { background: #222; width: 90%; max-width: 500px; border-radius: 20px; padding: 25px; display: flex; flex-direction: column; gap: 15px; transform: translateY(100%); animation: slideUp 0.3s forwards; }
.sheet-title-main { color: #888; font-size: 0.9rem; text-align: center; margin-bottom: 10px; }
.sheet-btn { background: #333; color: #fff; border: none; padding: 15px; border-radius: 15px; font-size: 1rem; font-family: inherit; display: flex; align-items: center; gap: 15px; cursor: pointer; }
.sheet-btn:active { background: #444; }
.sheet-btn.delete-btn { color: #ff5252; }
.sheet-btn i { width: 25px; text-align: center; }

.input-field { width: 100%; background: #111; border: 1px solid #444; color: #fff; padding: 12px; border-radius: 10px; font-family: inherit; font-size: 1rem; margin-bottom: 20px; text-align: center; }
@keyframes slideUp { to { transform: translateY(0); } }
@keyframes fadeInOverlay { from { opacity: 0; } to { opacity: 1; } }

.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); backdrop-filter: blur(5px); z-index: 7000; display: none; align-items: center; justify-content: center; opacity: 0; transition: opacity: 0.3s; }
.modal-overlay.show { opacity: 1; }
.modal-box { background: #222; border: 1px solid #444; width: 90%; max-width: 350px; border-radius: 20px; padding: 25px; text-align: center; transform: scale(0.8); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); box-shadow: 0 10px 40px rgba(0,0,0,0.5); }
.modal-overlay.show .modal-box { transform: scale(1); }
.modal-icon { font-size: 3rem; color: var(--primary); margin-bottom: 15px; }
.modal-title { font-size: 1.2rem; font-weight: bold; margin-bottom: 10px; color: #fff; }
.modal-desc { font-size: 0.9rem; color: #aaa; margin-bottom: 25px; line-height: 1.5; }
.modal-actions { display: flex; gap: 10px; justify-content: center; }
.modal-btn { flex: 1; padding: 12px; border-radius: 12px; border: none; font-family: inherit; font-weight: bold; cursor: pointer; transition: 0.2s; }
.btn-confirm { background: var(--primary); color: #fff; }
.btn-cancel { background: #333; color: #fff; }
.btn-confirm-action.split { background: #00C853; }
.btn-confirm-action.delete { background: #d32f2f; }

#editorScreen { display: none; width: 100%; flex-direction: column; min-height: 100vh; }
.top-bar { position: sticky; top: 0; height: 60px; background: rgba(30,30,30,0.95); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: space-between; padding: 0 20px; z-index: 100; border-bottom: 1px solid #333; box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
.btn-home { background: transparent; color: #ccc; border: none; font-size: 1.2rem; cursor: pointer; padding: 10px; }

#workspace {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background: #000;
padding: 20px 0 10px;
min-height: 300px;
flex-shrink: 0;
overflow: hidden; 
}
#scaler {
transition: transform 0.1s ease-out;
display: flex;
justify-content: center;
align-items: center;
}
#videoContainer { position: relative; background: #000; overflow: hidden; cursor: pointer; box-shadow: 0 0 30px rgba(124, 77, 255, 0.1); border-radius: 8px;}
video { width: 100%; height: 100%; object-fit: contain; display: block; }
#playOverlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: rgba(0,0,0,0.2); z-index: 10; transition: opacity 0.2s; }
#playOverlay.playing { opacity: 0; pointer-events: none; }
#playOverlay i { font-size: 4rem; color: rgba(255,255,255,0.8); filter: drop-shadow(0 0 5px rgba(0,0,0,0.8)); pointer-events: none; }
#subtitleLayer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; display: flex; justify-content: center; z-index: 20; }
#activeText { position: absolute; white-space: pre; pointer-events: auto; cursor: move; padding: 0 0 8px 0; line-height: 1; font-weight: bold; transition: background-color 0.2s, text-shadow 0.2s, -webkit-text-stroke 0.2s; transform-origin: center center; text-align: center; left: 50%; transform: translateX(-50%); }
.word-active { background-color: var(--static-color); color: #fff; border-radius: 8px; padding: 0 8px; margin: 0 2px; box-shadow: 0 2px 8px rgba(160, 32, 240, 0.5); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.word-highlight { color: #00D7FF !important; transform: scale(1.2); display:inline-block; text-shadow: 0 0 10px rgba(0, 215, 255, 0.5); }

.magic-bar { padding: 15px 20px 5px 20px; background: var(--bg); display: flex; justify-content: center; position: sticky; top: 60px; z-index: 95; }
.btn-ai-magic { background: linear-gradient(90deg, #FF0080 0%, #7928CA 50%, #FF0080 100%); background-size: 200% auto; color: white; border: none; width: 100%; max-width: 600px; padding: 12px 20px; border-radius: 16px; font-weight: 900; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; gap: 12px; cursor: pointer; box-shadow: 0 4px 20px rgba(121, 40, 202, 0.5); transition: all 0.3s; animation: gradientMove 3s linear infinite; font-family: 'Vazirmatn', sans-serif; }
.btn-ai-magic:active { transform: scale(0.98); }
@keyframes gradientMove { to { background-position: 200% center; } }

.controls-bar { display: flex; justify-content: center; gap: 10px; padding: 10px 10px; background: var(--bg); border-bottom: 1px solid #222; position: sticky; top: 115px; z-index: 90; flex-wrap: wrap; }
.tool-btn { display: flex; flex-direction: column; align-items: center; gap: 5px; background: var(--surface); border: 1px solid #333; color: #aaa; cursor: pointer; transition: 0.2s; padding: 8px 10px; border-radius: 12px; min-width: 70px; flex: 1; max-width: 100px; }
.tool-btn i { font-size: 1.2rem; margin-bottom: 2px; }
.tool-btn span { font-size: 0.75rem; font-weight: bold; }
.tool-btn:hover { color: #fff; background: #2a2a2a; }
.tool-btn.active-tool { color: #fff; background: var(--primary); border-color: var(--primary); }

#toolsContainer { width: 100%; background: var(--panel-bg); overflow: hidden; min-height: 0; transition: none; border-bottom: 1px solid #333; }
.tool-section { display: none; padding: 20px; animation: fadeIn 0.3s ease; max-width: 800px; margin: 0 auto; }
.tool-section.active-section { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

.btn-exp { background: var(--primary); color: #fff; border: none; padding: 10px 25px; border-radius: 12px; font-weight: bold; cursor: pointer; transition: 0.2s; font-family: inherit; }
.btn-magic-action { background: linear-gradient(135deg, #FF4081, #7C4DFF); width: 100%; border: none; padding: 12px; border-radius: 12px; color: white; font-weight: bold; font-family: inherit; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; }

.row { margin-bottom: 20px; }
label { display: block; margin-bottom: 8px; color: #ccc; font-size: 0.9rem; }
textarea { width: 100%; background: #222; color: #fff; border: 1px solid #444; padding: 15px; border-radius: 12px; font-family: inherit; font-size: 1rem; margin-bottom: 15px; resize: vertical; min-height: 80px; }

/* --- تغییرات اصلی این بخش: گرید و ابعاد کارت --- */
.style-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }

.style-grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.style-card { 
    background: #333; 
    border: 2px solid transparent; 
    border-radius: 15px; 
    padding: 5px; 
    cursor: pointer; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    min-height: 0; /* تغییر: حذف حداقل ارتفاع */
    width: 100%; 
    position: relative; 
    transition: all 0.2s; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.2); 
    aspect-ratio: 1.4 / 1; /* تغییر: اضافه شدن نسبت ابعاد */
}

.style-grid-2col .style-card { min-height: 100px; height: auto; gap: 8px; padding: 10px; aspect-ratio: auto; } /* ریست کردن aspect ratio برای بخش بالایی */

.style-card:active { transform: scale(0.98); }
.style-card.selected { border-color: var(--primary); background: #2a2a2a; }
.style-card.selected::after { content: '\f00c'; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; top: 8px; left: 8px; font-size: 0.7rem; color: #fff; background: var(--primary); width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 5px rgba(0,0,0,0.3); }

.card-info { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 100%; margin-top: 6px; padding-top: 4px; border-top: 1px solid rgba(255,255,255,0.1); text-align: center; }
.card-title-style { font-weight: bold; font-size: 0.8rem; color: #fff; white-space: nowrap; }
.card-desc { color: #aaa; font-size: 0.65rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.anim-box { font-family: 'Lalezar'; font-size: 0.9rem; direction: rtl; display: flex; gap: 3px; margin-bottom: 5px; }
.anim-word { color: white; transition: 0.2s; padding: 0 2px; border-radius: 4px;}
.anim-word.active { color: #fff; background-color: #A020F0; transform: scale(1.05); padding: 0 4px; }
.static-anim.active { background-color: var(--static-color) !important; color: #fff; }

.card-settings { position: absolute; bottom: 5px; left: 5px; width: 25px; height: 25px; background: rgba(255,255,255,0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.8rem; transition: 0.2s; z-index: 5; border: 1px solid rgba(255,255,255,0.1); }

.mode-btn { flex: 1; padding: 12px; border-radius: 8px; background: #333; color: #aaa; border: 2px solid transparent; cursor: pointer; }
.mode-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.font-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.font-btn { padding: 15px; background: #333; border-radius: 8px; cursor: pointer; border: 2px solid transparent; position: relative; color: #fff; }
.font-btn.ticked { border-color: var(--primary); }
.font-btn.ticked::after { content: '\f00c'; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; top: 10px; left: 10px; color: var(--primary); }

.custom-style-container { width: 100%; background: linear-gradient(90deg, #252525, #1e1e1e); border: 1px solid #444; border-right: 6px solid var(--primary); border-radius: 12px; margin-bottom: 25px; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s; max-height: 60px; cursor: pointer; position: relative; box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
.custom-style-container.open { max-height: 600px; box-shadow: 0 10px 25px rgba(0,0,0,0.5); border-color: #666; }
.custom-header { height: 60px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; font-family: 'Lalezar'; font-size: 1.2rem; color: #fff; }
.custom-header-title { display: flex; align-items: center; gap: 10px; }
.custom-header-title i { color: var(--primary); font-size: 1.4rem; }
.toggle-icon { transition: transform 0.3s; font-size: 0.9rem; color: #888; }
.custom-style-container.open .toggle-icon { transform: rotate(180deg); color: #fff; }
.custom-content { padding: 20px; opacity: 0; transition: opacity 0.3s ease 0.1s; border-top: 1px solid #333; background: #202020; }
.custom-style-container.open .custom-content { opacity: 1; }

.text-editor-ui { display: flex; flex-direction: column; width: 100%; height: 100%; background-color: var(--surface); padding-bottom: 10px; }

.toolbar-area {
height: 60px; display: flex; align-items: center; justify-content: center; gap: 20px;
opacity: 0; transform: translateY(20px); transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
pointer-events: none; margin-top: 10px;
}
.toolbar-area.show { opacity: 1; transform: translateY(0); pointer-events: all; }

.tool-circle {
width: 45px; height: 45px; border-radius: 50%; background: #252525;
border: 1px solid #444; color: #ccc; display: flex; align-items: center; justify-content: center;
font-size: 1.1rem; cursor: pointer; transition: 0.2s;
}
.tool-circle:active { transform: scale(0.9); border-color: var(--primary); color: var(--primary); }
.tool-circle.active-state { background: rgba(124, 77, 255, 0.15); border-color: var(--primary); color: var(--primary); }

.fixed-info-bar { width: 100%; height: 30px; display: flex; align-items: center; justify-content: flex-start; padding: 0 20px; border-bottom: 1px solid #222; background-color: var(--surface); }
.global-time-text { color: #888; font-size: 0.8rem; font-family: monospace; direction: ltr; }

.timeline-scroll-area {
flex: 1; width: 100%; overflow-x: auto; white-space: nowrap; padding: 15px 0;
display: flex; align-items: center; scrollbar-width: none;
}
.timeline-scroll-area::-webkit-scrollbar { display: none; }
.spacer { min-width: 50vw; }

.word-chip {
background-color: var(--chip-bg); color: #aaa; padding: 8px 18px;
border-radius: 12px; margin: 0 4px; font-size: 0.95rem; cursor: pointer;
transition: 0.2s; display: inline-flex; align-items: center; justify-content: center;
border: 1px solid transparent;
}
.word-chip.active { background-color: var(--primary); color: #fff; font-weight: bold; transform: scale(1.1); }
.newline-indicator { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; color: #555; margin: 0 10px; }

.bottom-sheet-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 6000; display: none; align-items: flex-end; justify-content: center; }
.bottom-sheet-overlay.show { display: flex; }

.bottom-sheet {
width: 100%; background: var(--surface); border-top-left-radius: 30px; border-top-right-radius: 30px;
padding: 25px 25px 80px 25px; transform: translateY(100%);
transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
display: none; flex-direction: column; gap: 20px;
box-shadow: 0 -10px 40px rgba(0,0,0,0.6);
}
.bottom-sheet.active { display: flex; transform: translateY(0); }

.sheet-handle { width: 50px; height: 5px; background: #333; border-radius: 3px; margin: 0 auto 5px auto; }
.sheet-title { text-align: center; color: #888; font-size: 0.9rem; margin-bottom: 5px; }

.sheet-actions { display: flex; gap: 12px; margin-top: 10px; }
.action-btn { flex: 1; padding: 15px; border-radius: 18px; border: none; font-family: inherit; font-size: 1rem; font-weight: bold; cursor: pointer; }
.btn-cancel-sheet { background: #333; color: #ccc; }
.btn-apply-sheet { background: var(--primary); color: #fff; }
.btn-delete-sheet { background: var(--danger-red); color: #fff; }

.sheet-input { width: 100%; background: var(--input-bg); border: none; border-radius: 18px; padding: 18px; color: white; font-family: inherit; font-size: 1.1rem; text-align: center; }

.sheet-meta-row { display: flex; align-items: center; justify-content: center; gap: 15px; background: #252525; padding: 10px; border-radius: 15px; }
.time-display-text { color: #bbb; font-family: monospace; font-size: 1rem; letter-spacing: 1px; direction: ltr; }

.mini-play-btn { width: 35px; height: 35px; border-radius: 50%; background: #333; color: #fff; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; }

.time-control-row { display: flex; align-items: center; justify-content: space-between; background: var(--input-bg); padding: 10px 15px; border-radius: 18px; }
.time-label { color: #aaa; font-size: 0.9rem; width: 50px; }
.time-adjuster { display: flex; align-items: center; gap: 15px; }
.time-btn { width: 40px; height: 40px; background: #333; border: none; border-radius: 12px; color: #fff; font-size: 1.2rem; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.time-value { font-family: monospace; font-size: 1.1rem; letter-spacing: 1px; width: 60px; text-align: center; direction: ltr; }

.delete-icon-wrap { width: 70px; height: 70px; border-radius: 50%; background: rgba(255, 82, 82, 0.1); color: var(--danger-red); display: flex; align-items: center; justify-content: center; font-size: 2rem; margin: 0 auto; }
.delete-msg { text-align: center; color: #fff; font-size: 1.1rem; margin-bottom: 10px; line-height: 1.6; }
.highlight-word { color: var(--primary); font-weight: bold; padding: 0 5px; }

/* --- استایل‌های لودینگ نئونی جدید --- */
#loader {
--color-1: #b000ff;
--color-2: #0077ff;
--color-3: #00eeff;
--bg-dark: #090909;
--bg-light: #1a1a2e;

position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 6000;
display: none;
justify-content: center;
align-items: center;
background: radial-gradient(circle at center, var(--bg-light) 0%, var(--bg-dark) 100%);
font-family: 'Tahoma', sans-serif;
overflow: hidden;

}

/* استایل صفحه نتیجه */
#resultScreen {
position: fixed; top:0; left:0; width:100%; height:100%; background: var(--bg); z-index: 6000; display: none; flex-direction: column; justify-content: center; align-items: center;
}

.loader-wrapper {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}

/* هاله نور پشت کل لودر */
.loader-wrapper::before {
content: '';
position: absolute;
top: 20%;
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(124, 77, 255, 0.15) 0%, transparent 70%);
border-radius: 50%;
z-index: -1;
filter: blur(20px);
}

.modern-loader {
position: relative;
width: 160px;
height: 160px;
margin-bottom: 50px;
display: flex;
justify-content: center;
align-items: center;
}

.loader-ring {
position: absolute;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: var(--ring-color);
animation: spin var(--dur) cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

/* اضافه کردن نقطه نورانی به سر حلقه‌ها */
.loader-ring::before {
content: '';
position: absolute;
border-radius: 50%;
width: 8px;
height: 8px;
background: var(--ring-color);
box-shadow: 0 0 15px 2px var(--ring-color);
top: -5px;
right: 50%;
transform: translateX(50%);
}

/* حلقه اول */
.loader-ring:nth-child(1) {
width: 100%;
height: 100%;
--ring-color: var(--color-1);
--dur: 2.5s;
filter: drop-shadow(0 0 10px rgba(176, 0, 255, 0.5));
}

/* حلقه دوم */
.loader-ring:nth-child(2) {
width: 75%;
height: 75%;
--ring-color: var(--color-2);
--dur: 2s;
animation-direction: reverse;
filter: drop-shadow(0 0 10px rgba(0, 119, 255, 0.5));
}

/* حلقه سوم */
.loader-ring:nth-child(3) {
width: 50%;
height: 50%;
--ring-color: var(--color-3);
--dur: 1.5s;
filter: drop-shadow(0 0 10px rgba(0, 238, 255, 0.5));
}

.loader-icon {
font-size: 3rem;
color: #fff;
animation: float-pulse 3s ease-in-out infinite;
filter: drop-shadow(0 0 20px var(--color-1));
z-index: 10;
}

.text-container {
text-align: center;
position: relative;
z-index: 2;
}

.loading-title {
font-size: 1.5rem;
font-weight: 800;
margin-bottom: 12px;
letter-spacing: -0.5px;
background: linear-gradient(135deg, #fff 30%, var(--color-2), var(--color-1));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 0 30px rgba(124, 77, 255, 0.3);
animation: text-glow 3s ease-in-out infinite alternate;
}

.loading-sub {
font-size: 1rem;
color: #a0a0a0;
font-weight: 300;
letter-spacing: 1px;
opacity: 0.8;
animation: fade-text 2s infinite alternate;
}

/* انیمیشن‌ها */
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

@keyframes float-pulse {
0%, 100% {
transform: scale(1) translateY(0);
opacity: 0.8;
filter: drop-shadow(0 0 10px var(--color-1));
}
50% {
transform: scale(1.1) translateY(-5px);
opacity: 1;
filter: drop-shadow(0 0 25px var(--color-3));
}
}

@keyframes text-glow {
from { text-shadow: 0 0 10px rgba(124, 77, 255, 0.2); }
to { text-shadow: 0 0 20px rgba(124, 77, 255, 0.6); }
}

@keyframes fade-text {
from { opacity: 0.5; }
to { opacity: 1; }
}

/* ========================================= */
/* === استایل‌های بخش ظاهر (نئونی) === */
/* ========================================= */
#section-appearance {
--track-off: #27272a;
--neon-primary: #8b5cf6;
--neon-secondary: #ec4899;
}

.controls-panel {
width: 100%;
background: #18181b;
border-radius: 24px;
padding: 25px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
border: 1px solid #333;
margin-top: 10px;
}

.control-group {
margin-bottom: 30px;
}
.control-group:last-child { margin-bottom: 0; }

.header-neon {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}

.title-neon {
display: flex;
align-items: center;
gap: 10px;
font-weight: 700;
font-size: 0.95rem;
color: #e4e4e7;
}

.title-neon i {
color: var(--neon-primary);
font-size: 1.1rem;
text-shadow: 0 0 10px rgba(139, 92, 246, 0.5);
}

.percent-badge {
font-family: monospace;
font-size: 1rem;
font-weight: bold;
color: #fff;
background: rgba(139, 92, 246, 0.15);
padding: 4px 12px;
border-radius: 8px;
border: 1px solid rgba(139, 92, 246, 0.3);
min-width: 60px;
text-align: center;
}

.range-container {
position: relative;
width: 100%;
height: 30px;
display: flex;
align-items: center;
}

.range-container input[type=range] {
-webkit-appearance: none;
width: 100%;
background: transparent;
cursor: pointer;
z-index: 2;
margin: 0;
}

.range-container input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 8px;
background: var(--track-off);
border-radius: 20px;
border: none;
background-image: linear-gradient(90deg, var(--neon-primary), var(--neon-secondary));
background-size: 0% 100%;
background-repeat: no-repeat;
}

.range-container input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 24px;
width: 24px;
border-radius: 50%;
background: #fff;
margin-top: -8px;
border: 4px solid #18181b;
box-shadow: 0 0 0 2px var(--neon-primary), 0 0 15px rgba(139, 92, 246, 0.8);
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.range-container input[type=range]:active::-webkit-slider-thumb {
transform: scale(1.3);
background: var(--neon-primary);
border-color: #fff;
box-shadow: 0 0 0 0 transparent, 0 0 25px rgba(236, 72, 153, 0.9);
}

.center-marker {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 2px;
height: 12px;
background: rgba(255,255,255,0.2);
z-index: 1;
pointer-events: none;
}

/* ========================================= */
/* === PRO COLOR PICKER STYLES (iOS/Luxury) === */
/* ========================================= */
:root {
--glass: rgba(28,28,30,.72);
--glass2: rgba(44,44,46,.80);
--stroke: rgba(255,255,255,.10);
--shadow-lg: 0 22px 60px rgba(0,0,0,.62);
--shadow-md: 0 12px 30px rgba(0,0,0,.46);
--shadow-sm: 0 8px 18px rgba(0,0,0,.36);
--separator: rgba(84,84,88,.38);
--ok: #34C759;
}

/* پیام‌ها پایین صفحه ظاهر می‌شوند؛ بالای صفحه روی خودِ ویدیو و کادر
   پیش‌نمایش می‌افتادند و همان چیزی را می‌پوشاندند که کاربر می‌خواست ببیند. */
.toast-notification{ position: fixed; bottom: calc(20px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%) translateY(18px); background: rgba(28,28,30,.78); -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%); border: 1px solid rgba(255,255,255,.12); box-shadow: var(--shadow-md); color: #fff; padding: 12px 18px; border-radius: 999px; z-index: 20000; font-size: .9rem; font-weight: 900; opacity: 0; visibility: hidden; transition: opacity .25s ease, transform .25s ease, visibility .25s ease; display:flex; align-items:center; gap: 10px; pointer-events:none; }
.toast-notification i{ color: var(--ok); }
/* اعلان به اندازه متنش پهن شود (تا عرض صفحه)، نه نصف صفحه؛ وگرنه پیام‌های کوتاه هم دوخطی می‌شدند */
.toast-notification{ width: max-content; max-width: calc(100vw - 32px); }
.toast-notification.show{ opacity:1; visibility: visible; transform: translateX(-50%) translateY(0); }

.picker-backdrop{ position: fixed; inset: 0; background: rgba(0,0,0,.46); opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility .22s ease; z-index: 9998; }
.picker-backdrop.active{ opacity: 1; visibility: visible; }

/* انتخابگر رنگ وسط صفحه باز می‌شود، نه پایین صفحه.
   قبلاً پایین صفحه بود و روی موبایل زیر دست کاربر می‌ماند؛ کسی که روشنایی را
   صفر کرده بود فکر می‌کرد رنگ اصلاً عوض نمی‌شود چون نمونه رنگ دیده نمی‌شد. */
.picker-modal{ position: fixed; top: 50%; left: 50%; width: min(94%, 560px); transform: translate(-50%, -50%) scale(.92); opacity: 0; visibility: hidden; transition: transform .26s cubic-bezier(0.2,0.8,0.2,1), opacity .2s ease, visibility .2s ease; background: rgba(28,28,30,.86); -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%); border: 1px solid rgba(255,255,255,.12); box-shadow: var(--shadow-lg); border-radius: 26px; z-index: 9999; display:flex; flex-direction:column; max-height: 86vh; padding-bottom: 14px; }
.picker-modal.active{ transform: translate(-50%, -50%) scale(1); opacity: 1; visibility: visible; }

.picker-header{ display:flex; align-items:center; justify-content:space-between; padding: 14px 16px; border-bottom: 1px solid var(--separator); flex-shrink: 0; }
.picker-icon{ width: 42px; height: 42px; border-radius: 999px; background: rgba(120,120,128,.22); border: 1px solid rgba(255,255,255,.10); display:flex; align-items:center; justify-content:center; color:#fff; cursor:pointer; transition: transform .12s ease; }
.picker-icon:active{ transform: scale(.96); }

.picker-tabs{ margin: 12px 16px 10px 16px; padding: 4px; border-radius: 14px; background: rgba(120,120,128,.18); border: 1px solid rgba(255,255,255,.10); display:flex; gap: 4px; flex-shrink: 0; }
.picker-tab{ flex:1; text-align:center; padding: 10px 0; border-radius: 10px; cursor:pointer; color: rgba(235,235,245,.62); font-weight: 900; transition: background .2s ease, color .2s ease; user-select:none; }
.picker-tab.active{ background: rgba(255,255,255,.14); color:#fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.10); }

.view-section{ display:none; overflow-y:auto; padding-bottom: 10px; }
.view-section.active-view{ display:block; }

/* Spectrum */
.spectrum-container{ margin: 0 16px 6px 16px; height: 220px; border-radius: 18px; border: 1px solid rgba(255,255,255,.10); background: linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); overflow:hidden; position:relative; cursor: crosshair; direction:ltr; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.spectrum-container::after{ content:""; position:absolute; inset:0; background: radial-gradient(900px 260px at 15% 0%, rgba(255,255,255,.14), transparent 55%); pointer-events:none; }
.spectrum-overlay{ position:absolute; inset:0; background: linear-gradient(to bottom, transparent 0%, #ffffff 100%); mix-blend-mode: normal; }
.spectrum-handle{ position:absolute; width: 28px; height: 28px; border-radius: 999px; border: 3px solid rgba(255,255,255,.95); box-shadow: 0 10px 18px rgba(0,0,0,.45); transform: translate(-50%, -50%); pointer-events:none; background: rgba(0,0,0,.06); }

/* GRID */
.grid-view-container{ margin: 0 16px 0 16px; padding: 12px; background: rgba(120,120,128,.10); border: 1px solid rgba(255,255,255,.10); border-radius: 18px; -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); display:grid; grid-template-columns: repeat(auto-fill, minmax(28px, 1fr)); gap: 8px; max-height: 320px; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth; }
.grid-view-container::-webkit-scrollbar{ width: 10px; }
.grid-view-container::-webkit-scrollbar-track{ background: rgba(255,255,255,.04); border-radius: 999px; }
.grid-view-container::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.12); border-radius: 999px; border: 2px solid rgba(0,0,0,.0); background-clip: padding-box; }
.grid-item{ aspect-ratio: 1; border-radius: 10px; cursor:pointer; border: 1px solid rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 8px 14px rgba(0,0,0,.12); transition: transform .12s ease, box-shadow .18s ease, border-color .18s ease; position: relative; overflow: hidden; }
.grid-item::after{ content:""; position:absolute; inset:0; background: radial-gradient(120% 120% at 20% 15%, rgba(255,255,255,.18), transparent 55%); pointer-events:none; opacity: .55; }
.grid-item:active{ transform: scale(.94); }
.grid-item.selected{ border-color: rgba(255,255,255,.90); box-shadow: 0 0 0 3px rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.12), 0 12px 22px rgba(0,0,0,.18); transform: scale(1.02); }
.grid-item.selected::before{ content:"\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; position:absolute; right: 6px; top: 6px; width: 16px; height: 16px; border-radius: 999px; display:flex; align-items:center; justify-content:center; font-size: 10px; color: rgba(0,0,0,.80); background: rgba(255,255,255,.92); box-shadow: 0 6px 12px rgba(0,0,0,.22); z-index: 2; }

/* Manual View */
.manual-view-container{ padding: 10px 16px; display:flex; flex-direction:column; gap: 10px; }
.manual-control-row{ display:flex; align-items:center; gap: 10px; justify-content:space-between; }
.manual-num-input{ width: 64px; border-radius: 14px; padding: 10px 0; text-align:center; font-weight: 900; font-size: 1.05rem; color:#fff; background: rgba(120,120,128,.22); border: 1px solid rgba(255,255,255,.10); }
.manual-slider-group{ flex:1; display:flex; flex-direction:column; gap: 6px; }
.manual-label-text{ font-size:.82rem; color: rgba(235,235,245,.62); font-weight:900; padding-right: 6px; }
.rgb-slider{ -webkit-appearance:none; appearance:none; width: 100%; height: 40px; background: transparent; border-radius: 999px; --track-bg: rgba(255,255,255,.10); }
.rgb-slider::-webkit-slider-runnable-track{ height: 14px; border-radius: 999px; background: var(--track-bg); box-shadow: inset 0 1px 0 rgba(255,255,255,.10); }
.rgb-slider::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width: 28px; height: 28px; border-radius: 999px; background: rgba(255,255,255,.95); border: 2px solid rgba(255,255,255,.85); margin-top: -7px; box-shadow: 0 12px 20px rgba(0,0,0,.35); cursor:pointer; }
.hex-row{ margin-top: 6px; display:flex; align-items:center; gap: 10px; }
.hex-input{ width: 120px; border-radius: 14px; padding: 12px 10px; text-align:center; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-weight: 900; color:#fff; background: rgba(120,120,128,.22); border: 1px solid rgba(255,255,255,.10); letter-spacing: .5px; }
.hex-label{ color: rgba(235,235,245,.56); font-weight: 900; font-size: .9rem; }

/* Global Sliders (Bright/Alpha) */
.sliders-global-wrapper{ margin-top: 10px; padding: 14px 16px 6px 16px; border-top: 1px solid var(--separator); flex-shrink: 0; }
.global-slider-row{ display:flex; align-items:center; gap: 10px; margin-bottom: 22px; position:relative; }
.global-slider-row:last-child{ margin-bottom: 8px; }
.global-slider-container{ flex:1; position:relative; height: 42px; border-radius: 18px; background: rgba(120,120,128,.12); border: 1px solid rgba(255,255,255,.10); padding: 0 12px; display:flex; align-items:center; -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.global-label-top{ position:absolute; right: 2px; top: -22px; font-size: .82rem; font-weight: 900; color: rgba(235,235,245,.62); }
.value-pill{ min-width: 84px; height: 42px; border-radius: 999px; background: rgba(120,120,128,.22); border: 1px solid rgba(255,255,255,.10); display:flex; align-items:center; justify-content:center; gap: 8px; font-weight: 900; color:#fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.value-pill i{ font-size: .95rem; color: rgba(235,235,245,.72); }
.common-slider{ -webkit-appearance:none; appearance:none; width: 100%; height: 40px; background: transparent; border-radius: 999px; --track-bg: rgba(255,255,255,.10); direction: ltr !important; }
.common-slider::-webkit-slider-runnable-track{ height: 14px; border-radius: 999px; background: var(--track-bg); box-shadow: inset 0 1px 0 rgba(255,255,255,.10); }
.common-slider::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width: 30px; height: 30px; border-radius: 999px; background: rgba(255,255,255,.95); border: 2px solid rgba(255,255,255,.85); margin-top: -8px; box-shadow: 0 12px 20px rgba(0,0,0,.35); cursor:pointer; }

/* FIX: Photoshop Checkered Pattern for Alpha Container & Preview */
.alpha-checkered {
width: 100%;
height: 42px;
border-radius: 16px;
background-image: conic-gradient(#dedede 0.25turn, #ffffff 0.25turn 0.5turn, #dedede 0.5turn 0.75turn, #ffffff 0.75turn);
background-size: 14px 14px;
background-position: top left;
overflow: hidden;
display: flex;
align-items: center;
padding: 0 12px;
border: 1px solid rgba(255,255,255,.10);
}

/* Footer & Large Preview Fix */
.picker-footer{ margin-top: auto; padding: 12px 16px 0 16px; display:flex; align-items:center; justify-content:space-between; gap: 12px; border-top: 1px solid var(--separator); flex-shrink: 0; background: transparent; }

/* FIX: Photoshop Checkered Pattern for Large Preview */
.large-preview {
width: 64px;
height: 64px;
border-radius: 18px;
border: 1px solid rgba(255,255,255,.12);
box-shadow: 0 14px 24px rgba(0,0,0,.24);
flex-shrink: 0;
/* الگوی شطرنجی دقیق فتوشاپ */
background-image: conic-gradient(#dedede 0.25turn, #ffffff 0.25turn 0.5turn, #dedede 0.5turn 0.75turn, #ffffff 0.75turn);
background-size: 16px 16px;
background-position: center;
}

.saved-colors-container{ display:flex; gap: 10px; align-items:center; flex-wrap: wrap; flex:1; justify-content:flex-end; max-height: 90px; overflow-y:auto; padding-right: 4px; }
.btn-save-text{ height: 38px; border-radius: 999px; padding: 0 14px; display:flex; align-items:center; justify-content:center; gap: 8px; font-weight: 900; font-size: .82rem; color: rgba(255,255,255,.92); background: rgba(120,120,128,.18); border: 1px solid rgba(255,255,255,.10); cursor:pointer; user-select:none; transition: transform .12s ease, background .18s ease; flex-shrink:0; }
.btn-save-text:active{ transform: scale(.98); background: rgba(10,132,255,.22); border-color: rgba(10,132,255,.35); }
.saved-color-wrapper{ position:relative; width: 42px; height: 42px; flex-shrink:0; }
.saved-circle{ width:100%; height:100%; border-radius: 14px; border: 1px solid rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 12px 18px rgba(0,0,0,.18); cursor:pointer; transition: transform .12s ease; }
.saved-circle:active{ transform: scale(.94); }
.mini-delete-btn{ position:absolute; top:-6px; right:-6px; width: 20px; height: 20px; border-radius: 999px; background: rgba(255,69,58,.95); border: 2px solid rgba(28,28,30,.88); display:flex; align-items:center; justify-content:center; color:#fff; cursor:pointer; box-shadow: 0 10px 16px rgba(0,0,0,.30); transition: transform .12s ease; z-index:2; }
.mini-delete-btn i{ font-size: 10px; }
.mini-delete-btn:active{ transform: scale(.92); }

/* Color Triggers inside accordion */
.color-trigger-row{ display:flex; gap: 12px; margin: 14px 0 16px 0; }
.color-trigger{ flex:1; border-radius: 16px; background: rgba(44,44,46,.55); border: 1px solid rgba(255,255,255,.10); padding: 12px 12px; display:flex; align-items:center; justify-content:space-between; cursor:pointer; position:relative; transition: transform .12s ease; }
.color-trigger:active{ transform: scale(.992); }
.color-trigger::before{ content:"\f054"; font-family: "Font Awesome 6 Free"; font-weight: 900; position:absolute; left: 12px; color: rgba(235,235,245,.42); font-size: .85rem; }
.color-label{ color: rgba(235,235,245,.80); font-weight: 900; font-size: .92rem; padding-left: 18px; }
.color-preview-circle{ width: 34px; height: 34px; border-radius: 12px; border: 1px solid rgba(255,255,255,.55); box-shadow: 0 10px 18px rgba(0,0,0,.28); }

/* Delete modal specific */
.delete-overlay{ position: fixed; inset: 0; background: rgba(0,0,0,.58); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); z-index: 10000; display:none; align-items:center; justify-content:center; opacity:0; transition: opacity .22s ease; padding: 18px; }
.delete-overlay.active{ display:flex; opacity:1; }
.delete-box{ width: min(340px, 92vw); border-radius: 22px; background: rgba(28,28,30,.88); border: 1px solid rgba(255,255,255,.12); box-shadow: var(--shadow-lg); padding: 22px 18px; text-align:center; transform: scale(.92); opacity:0; transition: transform .22s cubic-bezier(0.2,0.8,0.2,1), opacity .22s ease; }
.delete-overlay.active .delete-box{ transform: scale(1); opacity:1; }
.del-preview{ width: 64px; height: 64px; border-radius: 18px; margin: 0 auto 14px auto; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 14px 22px rgba(0,0,0,.22); }
.del-title{ color:#fff; font-weight: 900; font-size: 1.02rem; margin: 8px 0 16px 0; }
.del-actions{ display:flex; gap: 10px; }
.del-btn{ flex:1; border:none; border-radius: 16px; padding: 12px 0; font-weight: 900; font-size: 1rem; cursor:pointer; transition: transform .12s ease, filter .12s ease; }
.del-btn:active{ transform: scale(.99); filter: brightness(1.05); }
.del-btn-confirm{ background: rgba(255,69,58,.95); color:#fff; }
.del-btn-cancel{ background: rgba(120,120,128,.22); color:#fff; border: 1px solid rgba(255,255,255,.10); }

/* ================================================== */
/* === استایل‌های جدید برای بخش ظاهر (Appearance) === */
/* ================================================== */
#section-appearance .controls-panel {
padding: 15px; 
}

/* پنل‌های داخلی برای گروه‌بندی کنترل‌ها */
.control-group-panel {
background-color: #1f1f23;
border: 1px solid #3a3a3e;
border-radius: 18px;
padding: 20px;
margin-bottom: 20px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.control-group-panel:last-child {
margin-bottom: 0;
}

/* بخش پیش‌نمایش زنده برای کادر */
.box-preview-area {
width: 100%;
min-height: 90px;
margin-bottom: 25px;
padding: 15px;
/* --- تغییر اصلی اینجاست --- */
background-image: conic-gradient(#444 0.25turn, #333 0.25turn 0.5turn, #444 0.5turn 0.75turn, #333 0.75turn);
background-size: 20px 20px;
/* -------------------------- */
border-radius: 12px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #555;
}

.box-preview-element {
color: #fff;
font-size: 1.2rem;
font-weight: bold;
display: inline-block;
white-space: nowrap;
/* اینجا line-height وجود نداشت */
transition: all 0.15s ease-out;
}

/* ======================================== */
/* === استایل‌های انیمیشن بازتولید زیرنویس (جدید) === */
/* ======================================== */

.sheet-spinner-ring {
width: 60px;
height: 60px;
border-radius: 50%;
border: 4px solid #333;
border-top-color: var(--primary);
border-right-color: var(--primary);
animation: ringSpin 1s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

@keyframes ringSpin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

.success-checkmark-anim {
width: 80px;
height: 80px;
border-radius: 50%;
background: rgba(0, 230, 118, 0.15);
display: flex;
align-items: center;
justify-content: center;
animation: successPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.success-checkmark-anim i {
font-size: 3rem;
color: #00e676;
animation: checkScale 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.1s both;
}

@keyframes successPop {
from { transform: scale(0); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}

@keyframes checkScale {
from { transform: scale(0); }
to { transform: scale(1); }
}

/* ======================================== */
/* === استایل‌های دکمه‌های تعداد کلمات === */
/* ======================================== */

.word-count-grid {
display: flex;
overflow-x: auto;
padding: 10px 0;
gap: 10px;
width: 100%;
scrollbar-width: none;
-ms-overflow-style: none;
justify-content: space-between;
}
.word-count-grid::-webkit-scrollbar {
display: none;
}

.wc-btn {
flex: 0 0 auto;
width: 50px;
height: 50px;
border-radius: 14px;
background: #333;
color: #fff;
border: 1px solid #444;
font-size: 1.2rem;
font-weight: bold;
cursor: pointer;
transition: 0.2s;
display: flex;
align-items: center;
justify-content: center;
}
.wc-btn:active {
background: var(--primary);
border-color: var(--primary);
transform: scale(0.9);
}

/* ======================================== */
/* === استایل‌های جدید Trimmer (ویرایش زمان) === */
/* ======================================== */

.trimmer-header {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
margin-bottom: 25px;
width: 100%;
}

.trimmer-play-btn {
width: 50px;
height: 50px;
border-radius: 50%;
border: 2px solid var(--accent-orange);
background: transparent;
color: var(--accent-orange);
font-size: 1.4rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.2s;
}
.trimmer-play-btn:active {
transform: scale(0.9);
}

.trimmer-time-display {
font-family: monospace;
font-size: 1.2rem;
color: #fff;
font-weight: bold;
direction: ltr;
}

.trimmer-body {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
gap: 10px;
margin-bottom: 20px;
}

.word-preview-side {
width: 60px;
height: 60px;
background: #222;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #777;
font-size: 0.9rem;
font-weight: bold;
text-align: center;
flex-shrink: 0;
}

.trimmer-container {
flex: 1;
position: relative;
height: 60px;
background: #000;
border-radius: 10px;
overflow: hidden;
/* اگر بخواهیم هندل‌ها بیرون نزنند */
}

/* نوار کلی (ترک) */
.timeline-strip {
position: absolute;
top: 50%;
left: 10px; /* مارجین برای هندل‌ها */
right: 10px;
height: 40px;
transform: translateY(-50%);
background: linear-gradient(90deg, #333 0%, #444 50%, #333 100%);
background-size: 20px 100%;
border-radius: 4px;
}

/* بخش فعال (بین دو هندل) */
.trim-track-active {
position: absolute;
top: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.15);
border-top: 2px solid #FDD835;
border-bottom: 2px solid #FDD835;
left: 0;   /* این مقادیر با JS تغییر میکنن */
right: 0;  /* این مقادیر با JS تغییر میکنن */
}

/* هندل‌های زرد رنگ */
.trim-handle {
position: absolute;
top: 0;
bottom: 0;
width: 20px;
background: #FDD835;
cursor: col-resize;
display: flex;
align-items: center;
justify-content: center;
color: #000;
font-size: 0.8rem;
z-index: 10;
border-radius: 4px;
}

.trim-handle.left {
left: 0; /* JS کنترل میکنه */
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}

.trim-handle.right {
right: 0; /* JS کنترل میکنه (right: 0 یعنی چسبیده به ته) */
/* اما برای پوزیشن ابسولوت نسبت به پرنت، ما از style.left استفاده میکنیم */
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}

.trimmer-current-word {
text-align: center;
background: #333;
padding: 10px 20px;
border-radius: 16px;
color: #fff;
font-size: 1.1rem;
font-weight: bold;
align-self: center;
margin-bottom: 10px;
min-width: 100px;
}
/* --- استایل‌های جدید بخش فونت و تنظیمات --- */
.sub-nav-container { display: flex; background: #252525; padding: 5px; border-radius: 14px; margin-bottom: 20px; }
.sub-nav-btn { flex: 1; text-align: center; padding: 10px; border-radius: 10px; color: #aaa; font-weight: 900; font-size: 0.9rem; cursor: pointer; transition: 0.2s; }
.sub-nav-btn.active { background: var(--primary); color: #fff; box-shadow: 0 4px 10px rgba(124, 77, 255, 0.3); }
.sub-section-content { display: none; }
.sub-section-content.active { display: block; animation: fadeIn 0.2s ease; }

.settings-row { display: flex; align-items: center; justify-content: space-between; background: #252525; padding: 12px 16px; border-radius: 18px; margin-bottom: 12px; border: 1px solid #333; transition: transform 0.2s, background 0.2s; cursor: pointer; }
.settings-row:active { transform: scale(0.98); background: #2a2a2a; }
.settings-left-part { display: flex; align-items: center; gap: 14px; }
.settings-icon-box { width: 38px; height: 38px; border-radius: 12px; background: rgba(124, 77, 255, 0.1); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 8px rgba(0,0,0,0.2); }
.settings-icon-box svg { width: 20px; height: 20px; fill: var(--primary); filter: drop-shadow(0 0 5px rgba(124,77,255,0.5)); }
.settings-label { font-weight: 900; color: #eee; font-size: 0.95rem; }
.color-ring-container { width: 42px; height: 42px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.15); padding: 3px; display: flex; align-items: center; justify-content: center; transition: border-color 0.2s; }
.settings-row:hover .color-ring-container { border-color: var(--primary); }
.color-circle-inner { width: 100%; height: 100%; border-radius: 50%; box-shadow: inset 0 0 10px rgba(0,0,0,0.2); border: 1px solid rgba(0,0,0,0.1); }
/* --- استایل‌های جدید سوییچ و کشو برای رنگ کلمه فعال --- */
.settings-row-toggle { background: #252525; border-radius: 18px; margin-bottom: 12px; border: 1px solid #333; overflow: hidden; transition: 0.3s; }
.setting-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.premium-toggle { width: 48px; height: 28px; background: #3a3a3c; border-radius: 30px; position: relative; transition: 0.3s ease; box-shadow: inset 0 2px 5px rgba(0,0,0,0.3); }
.premium-toggle::after { content: ''; position: absolute; top: 2px; right: 2px; width: 24px; height: 24px; background: #ffffff; border-radius: 50%; box-shadow: 0 2px 8px rgba(0,0,0,0.4); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.settings-row-toggle.active .premium-toggle { background: var(--primary); box-shadow: inset 0 2px 5px rgba(0,0,0,0.2), 0 0 15px rgba(124, 77, 255, 0.4); }
.settings-row-toggle.active .premium-toggle::after { transform: translateX(-20px); }
.settings-row-toggle.active .settings-icon-box { background: rgba(124, 77, 255, 0.15); }
.settings-row-toggle.active .settings-icon-box svg { fill: var(--primary); filter: drop-shadow(0 0 5px rgba(124,77,255,0.5)); }
.settings-row-toggle.active .settings-label { color: #ffffff; }
.dropdown-wrapper { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.settings-row-toggle.active .dropdown-wrapper { grid-template-rows: 1fr; }
.dropdown-inner { overflow: hidden; }
.dropdown-content { background: #1e1e1e; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #333; opacity: 0; transform: translateY(-10px); transition: 0.3s; }
.settings-row-toggle.active .dropdown-content { opacity: 1; transform: translateY(0); }
/* ==================== قابلیت چندزبانه (Multi-language) ==================== */

/* --- شیت انتخاب زبان --- */
#languageSheetOverlay { z-index: 7000; }
.lang-sheet { max-height: 75vh; overflow-y: auto; }
.lang-sheet-hint { text-align: center; color: #666; font-size: 0.8rem; margin-top: -10px; margin-bottom: 5px; }
.lang-list { display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow-y: auto; }
.lang-row { display: flex; align-items: center; gap: 12px; background: #2a2a2a; border-radius: 14px; padding: 14px 16px; cursor: pointer; transition: 0.15s; border: 1.5px solid transparent; }
.lang-row:active { transform: scale(0.98); }
.lang-row.active { border-color: var(--primary); background: rgba(124, 77, 255, 0.12); }
.lang-row .lang-flag { font-size: 1.4rem; }
.lang-row .lang-name { flex: 1; font-size: 1rem; font-weight: 500; }
.lang-row .lang-check { color: var(--primary); font-size: 1.1rem; }

/* --- کارت تایید پیش از آپلود --- */
.pre-upload-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 6500; display: none; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.25s; padding: 20px; }
.pre-upload-overlay.show { opacity: 1; }
.pre-upload-card { position: relative; background: linear-gradient(160deg, #232323, #1a1a1a); border: 1px solid #333; width: 100%; max-width: 380px; border-radius: 24px; padding: 35px 25px 25px; display: flex; flex-direction: column; align-items: center; text-align: center; transform: scale(0.9) translateY(20px); transition: transform 0.25s; box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
.pre-upload-overlay.show .pre-upload-card { transform: scale(1) translateY(0); }
.pre-upload-close { position: absolute; top: 14px; left: 14px; background: #2c2c2c; border: none; color: #aaa; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 0.9rem; }
.pre-upload-icon { width: 70px; height: 70px; border-radius: 50%; background: rgba(124, 77, 255, 0.12); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; margin-bottom: 15px; }
.pre-upload-filename { font-size: 1.05rem; font-weight: bold; color: #fff; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pre-upload-filesize { font-size: 0.8rem; color: #777; margin-top: 4px; margin-bottom: 22px; }
.pre-upload-lang-row { width: 100%; display: flex; align-items: center; justify-content: space-between; background: #2a2a2a; border-radius: 14px; padding: 12px 16px; margin-bottom: 22px; }
.pre-upload-lang-label { font-size: 0.9rem; color: #ccc; display: flex; align-items: center; gap: 8px; }
.lang-pill { background: #383838; border: none; color: #fff; padding: 8px 14px; border-radius: 12px; display: flex; align-items: center; gap: 8px; font-family: inherit; font-size: 0.9rem; cursor: pointer; }
.lang-pill:active { background: #444; }
.btn-start-upload { width: 100%; background: var(--accent-orange); color: #fff; border: none; padding: 16px; border-radius: 16px; font-size: 1rem; font-weight: bold; font-family: inherit; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 8px 20px rgba(255, 112, 67, 0.35); }
.btn-start-upload:active { transform: scale(0.97); }

/* =======================================================================
   صفحه «در حال خروجی گرفتن»
   کاملاً جدا از لودینگ آپلود، با انیمیشن و مراحل مخصوص ساخت ویدیو
   ======================================================================= */

#exportOverlay {
    display: none;
    position: fixed;
    inset: 0;
    /* بالاتر از صفحه خانه (۵۰۰۰) و هم‌رده صفحه نتیجه (۶۰۰۰) تا واقعاً روی
       همه‌چیز بنشیند؛ ولی پایین‌تر از انتخابگر رنگ و توست‌ها. */
    z-index: 6100;
    background: radial-gradient(circle at 50% 32%, #131a2e 0%, #080a12 55%, #05060a 100%);
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow: hidden;
    direction: rtl;
    font-family: 'Vazirmatn', sans-serif;
}
#exportOverlay.show { display: flex; }

/* لکه‌های نور پس‌زمینه که آرام جابه‌جا می‌شوند */
.exp-aurora {
    position: absolute;
    inset: -25%;
    pointer-events: none;
    background:
        radial-gradient(circle at 22% 28%, rgba(124, 77, 255, 0.30) 0%, transparent 42%),
        radial-gradient(circle at 78% 22%, rgba(0, 215, 255, 0.24) 0%, transparent 44%),
        radial-gradient(circle at 62% 82%, rgba(255, 61, 154, 0.20) 0%, transparent 46%);
    filter: blur(38px);
    animation: expAurora 15s ease-in-out infinite alternate;
}
@keyframes expAurora {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(3%, -3%) scale(1.10); }
    100% { transform: translate(-3%, 3%) scale(1.05); }
}

.exp-card {
    position: relative;
    width: 100%;
    max-width: 420px;
    text-align: center;
    animation: expCardIn 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes expCardIn {
    from { opacity: 0; transform: translateY(26px) scale(0.94); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- انیمیشن مرکزی ---------- */
.exp-stage {
    position: relative;
    width: 220px;
    height: 220px;
    margin: 0 auto 6px auto;
}
.exp-svg { width: 100%; height: 100%; display: block; overflow: visible; }

.exp-core       { animation: expBreathe 2.8s ease-in-out infinite; transform-origin: 120px 120px; }
.exp-ring-out   { animation: expSpin 14s linear infinite;          transform-origin: 120px 120px; }
.exp-ring-mid   { animation: expSpinBack 8s linear infinite;       transform-origin: 120px 120px; }
.exp-film       { animation: expFilm 5s ease-in-out infinite;      transform-origin: 120px 120px; }
.exp-orbit      { transform-origin: 120px 120px; }
.exp-orbit-1    { animation: expSpin 4.2s linear infinite; }
.exp-orbit-2    { animation: expSpinBack 6.4s linear infinite; }
.exp-orbit-3    { animation: expSpin 9s linear infinite; }

@keyframes expBreathe {
    0%, 100% { transform: scale(0.92); opacity: 0.75; }
    50%      { transform: scale(1.10); opacity: 1; }
}
@keyframes expSpin     { to { transform: rotate(360deg); } }
@keyframes expSpinBack { to { transform: rotate(-360deg); } }
@keyframes expFilm {
    0%, 100% { transform: rotate(0deg)   scale(1); }
    50%      { transform: rotate(180deg) scale(1.07); }
}

/* ویژوالایزر کوچک زیر هسته */
.exp-bar { transform-origin: center 205px; }
.exp-bars .b1 { animation: expBar 0.9s ease-in-out infinite;        }
.exp-bars .b2 { animation: expBar 0.9s ease-in-out infinite 0.12s;  }
.exp-bars .b3 { animation: expBar 0.9s ease-in-out infinite 0.24s;  }
.exp-bars .b4 { animation: expBar 0.9s ease-in-out infinite 0.36s;  }
.exp-bars .b5 { animation: expBar 0.9s ease-in-out infinite 0.48s;  }
@keyframes expBar {
    0%, 100% { transform: scaleY(0.35); opacity: 0.55; }
    50%      { transform: scaleY(1.35); opacity: 1; }
}

#expProgressRing { transition: stroke-dashoffset 0.55s cubic-bezier(0.3, 1, 0.4, 1); }

/* درصد بزرگ وسط */
.exp-percent {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1px;
    pointer-events: none;
}
.exp-percent-num {
    font-size: 2.5rem;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 0 22px rgba(0, 215, 255, 0.65);
    line-height: 1;
}
.exp-percent-sign { font-size: 1.1rem; font-weight: 700; color: #8fdcff; margin-top: 10px; }

/* شماره نوبت در صف */
.exp-queue-num {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.exp-queue-pos {
    font-size: 3.1rem;
    font-weight: 900;
    color: #fff;
    line-height: 1;
    text-shadow: 0 0 26px rgba(124, 77, 255, 0.8);
    animation: expPulseNum 2s ease-in-out infinite;
}
.exp-queue-cap { font-size: 0.72rem; color: #a9b6d6; margin-top: 6px; letter-spacing: 0.4px; }
@keyframes expPulseNum {
    0%, 100% { transform: scale(1);    opacity: 0.9; }
    50%      { transform: scale(1.07); opacity: 1; }
}

/* ---------- متن‌ها ---------- */
.exp-title {
    font-size: 1.16rem;
    font-weight: 800;
    color: #fff;
    margin-top: 4px;
    letter-spacing: 0.2px;
}
.exp-sub {
    font-size: 0.86rem;
    color: #9fb0d0;
    margin-top: 7px;
    line-height: 1.85;
    min-height: 24px;
}
.exp-sub b { color: #00D7FF; font-weight: 800; }

/* ---------- کارت صف ---------- */
.exp-queue-card {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: right;
    margin: 16px auto 0 auto;
    padding: 13px 15px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(124, 77, 255, 0.16), rgba(0, 215, 255, 0.10));
    border: 1px solid rgba(124, 77, 255, 0.35);
    animation: expQueueIn 0.4s ease;
}
@keyframes expQueueIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.exp-queue-icon {
    flex-shrink: 0;
    width: 40px; height: 40px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(124, 77, 255, 0.25);
    color: #cbb2ff;
    font-size: 1rem;
}
.exp-queue-main { font-size: 0.9rem; font-weight: 800; color: #fff; }
.exp-queue-main span { color: #00E676; font-size: 1.25em; }
.exp-queue-hint { font-size: 0.72rem; color: #93a3c4; margin-top: 5px; line-height: 1.85; }

/* ---------- مراحل ---------- */
.exp-steps {
    display: flex;
    justify-content: space-between;
    gap: 4px;
    margin: 20px 4px 14px 4px;
    overflow: hidden;   /* هیچ خط رابطی از کادر بیرون نزند */
}
.exp-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; position: relative; min-width: 0; }
/* خط رابط هر مرحله به مرحله قبلی خودش وصل می‌شود. چیدمان راست‌به‌چپ است، پس
   «قبلی» سمت راست قرار دارد و خط باید از مرکز به راست کشیده شود. اگر برعکس
   باشد، خط مرحله آخر از لبه چپ صفحه بیرون می‌زند. */
.exp-step::before {
    content: '';
    position: absolute;
    top: 11px;
    left: 50%;
    right: -50%;
    height: 2px;
    background: rgba(255, 255, 255, 0.09);
}
.exp-step:first-child::before { display: none; }
.exp-step.done::before, .exp-step.active::before { background: linear-gradient(90deg, #00D7FF, #7C4DFF); }

.exp-step-dot {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
    border: 2px solid rgba(255, 255, 255, 0.14);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.6rem;
    color: transparent;
    transition: all 0.3s ease;
    z-index: 1;
}
.exp-step-label {
    font-size: 0.66rem;
    color: #7d8aa8;
    transition: color 0.3s ease;
    text-align: center;
    line-height: 1.4;
}
.exp-step.active .exp-step-dot {
    background: rgba(0, 215, 255, 0.18);
    border-color: #00D7FF;
    box-shadow: 0 0 14px rgba(0, 215, 255, 0.55);
    animation: expDotPulse 1.4s ease-in-out infinite;
}
.exp-step.active .exp-step-label { color: #fff; font-weight: 700; }
.exp-step.done .exp-step-dot {
    background: #00E676;
    border-color: #00E676;
    color: #06210f;
}
.exp-step.done .exp-step-label { color: #b9c6e0; }
@keyframes expDotPulse {
    0%, 100% { box-shadow: 0 0 10px rgba(0, 215, 255, 0.45); }
    50%      { box-shadow: 0 0 20px rgba(0, 215, 255, 0.85); }
}

/* ---------- نوار پیشرفت افقی ---------- */
.exp-bar-wrap {
    position: relative;
    width: 100%;
    height: 9px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.07);
    overflow: hidden;
}
.exp-bar-fill {
    width: 0%;
    height: 100%;
    border-radius: 20px;
    background: linear-gradient(90deg, #7C4DFF, #00D7FF, #00FFC2);
    box-shadow: 0 0 14px rgba(0, 215, 255, 0.55);
    transition: width 0.55s cubic-bezier(0.3, 1, 0.4, 1);
}
.exp-bar-shine {
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.38), transparent);
    animation: expShine 1.7s linear infinite;
}
@keyframes expShine {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.exp-meta {
    display: flex;
    justify-content: space-between;
    margin-top: 9px;
    font-size: 0.73rem;
    color: #8493b2;
}
/* ---- ثانیه‌شمار نوبت در حال ساخت (فقط در حالت «در صف») ---- */
.exp-turn {
    margin-top: 12px;
    padding: 10px 13px;
    border-radius: 14px;
    background: rgba(124, 77, 255, 0.09);
    border: 1px solid rgba(124, 77, 255, 0.24);
}
.exp-turn-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.exp-turn-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.75rem;
    color: #a9b6d4;
}
.exp-turn-label i { color: #00D7FF; font-size: 0.8rem; }
.exp-turn-time {
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: #fff;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 12px rgba(0, 215, 255, 0.45);
}
/* نبض ملایم روی عدد، تا معلوم باشد شمارش زنده است و شماره نوبت واقعاً جلو رفت */
.exp-turn-time.tick,
.exp-queue-pos.tick { animation: expTick 0.5s ease; }
@keyframes expTick {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.07); }
    100% { transform: scale(1); }
}
.exp-turn-sub {
    margin-top: 5px;
    font-size: 0.69rem;
    color: #7f8dab;
    line-height: 1.7;
}

.exp-footer {
    margin-top: 20px;
    font-size: 0.71rem;
    color: #66748f;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

@media (max-width: 400px) {
    .exp-stage { width: 180px; height: 180px; }
    .exp-percent-num { font-size: 2.1rem; }
    .exp-queue-pos { font-size: 2.6rem; }
    .exp-step-label { font-size: 0.58rem; }
    .exp-steps { gap: 2px; margin-left: 0; margin-right: 0; }
    .exp-step-label { padding: 0 1px; }
}

/* =======================================================================
   لایه‌های پیش‌نمایش زنده قالب‌های حرفه‌ای (static/js/alpha_styles.js)
   -----------------------------------------------------------------------
   بدون این کلاس‌ها، کلمات به صورت inline رندر می‌شوند و در آن حالت
   transform اصلاً اعمال نمی‌شود و کادرِ absolute هم مرجع موقعیت درستی
   ندارد. پس این بخش برای درست کار کردن انیمیشن‌ها ضروری است.
   ترتیب لایه‌ها (z-index) دقیقاً ترتیب رسم موتور پایتون است:
   کادر ← موج حلقه‌ای ← متن پایه (دورخط و سایه) ← گرادیان ← کارائوکه ← برق
   ======================================================================= */

/* هر کلمه: مرجع موقعیت کادر و خط زیرین، و پذیرای transform */
.ap-w {
    position: relative;
    display: inline-block;
    z-index: 1;
    vertical-align: baseline;
    will-change: transform, opacity;
}

/* متن پایه کلمه — دورخط، سایه و هاله روی همین است */
.ap-t {
    position: relative;
    display: inline-block;
    z-index: 2;
    white-space: nowrap;
}

/* لایه‌های رویی متن (گرادیان، کارائوکه، برق): همان متن، دقیقاً روی متن پایه */
.ap-ov {
    position: absolute;
    left: 0;
    top: 0;
    white-space: nowrap;
    pointer-events: none;
    -webkit-text-stroke: 0;
    text-shadow: none;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: none;
}
.ap-f { z-index: 3; }
.ap-k {
    z-index: 4;
    box-sizing: content-box;
    background-origin: content-box;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.ap-s { z-index: 5; background-repeat: no-repeat; }

/* کادر پشت کلمه: پشت متن، بدون اثر روی چیدمان */
.ap-box {
    position: absolute;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    overflow: hidden;
    transition: opacity 0.12s linear;
}
.ap-bsh, .ap-glsh, .ap-lsh {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: block;
}
.ap-bfill { position: absolute; pointer-events: none; display: block; }

/* موج حلقه‌ای دور کلمه فعال */
.ap-r {
    position: absolute;
    z-index: 0;
    display: none;
    box-sizing: border-box;
    pointer-events: none;
}

/* خط زیر کلمه: در متن راست‌به‌چپ از سمت راست باز می‌شود */
.ap-u {
    position: absolute;
    inset-inline-start: 0;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s linear;
}

/* جرقه‌های دور کلمه فعال (ستاره چهارپر، همان شکل خروجی) */
.ap-sps {
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
    display: none;
}
.ap-sp {
    position: absolute;
    display: block;
    pointer-events: none;
    clip-path: polygon(50% 0%, 64% 36%, 100% 50%, 64% 64%, 50% 100%, 36% 64%, 0% 50%, 36% 36%);
}

/* ذرات انفجاری */
.ap-bs {
    position: absolute;
    inset: 0;
    z-index: 7;
    pointer-events: none;
    display: none;
}
.ap-b {
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    pointer-events: none;
}

/* تزئینات سطح جمله: برق پنل، حاشیه نورانی چرخان، خط پیشرفت، گوشه‌ها و
   نشانگر لغزان — همه زیر کلمات (z-index صفر) */
.ap-lsh, .ap-cb, .ap-cbg, .ap-pg, .ap-cn, .ap-gl {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    display: block;
}
.ap-cb, .ap-cbg {
    box-sizing: border-box;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}
.ap-pg { overflow: hidden; }
.ap-pg > i { position: absolute; top: 0; bottom: 0; display: block; }
.ap-cn { box-sizing: border-box; }
.ap-gl { overflow: hidden; }

/* نسخه ۳: کادرهای جدا (کادر هر خط / نوار تمام‌عرض / کارت آیکن‌دار) — زیر کلمات */
.ap-pnls {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    z-index: 0;
    overflow: visible;
    pointer-events: none;
}
.ap-pnl {
    position: absolute;
    display: block;
    box-sizing: border-box;
    pointer-events: none;
}
.ap-pnl-ic { position: absolute; overflow: visible; pointer-events: none; }

/* پلیر زیر متن (نوار زمان ویدیو، موج صدا، دکمه‌ها) — SVG زنده */
.ap-plr {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    z-index: 0;
    line-height: 0;
    pointer-events: none;
}
.ap-plr svg { display: block; overflow: visible; }

/* ---- لینک مستقیم بله: دو دکمه‌ی زیرِ «دانلود با کیفیت اصلی» (هم‌رنگ تمِ برنامه) ---- */
#resultScreen {
    --abl-radius: 12px;
    --abl-dl-1: #00C853; --abl-dl-2: #00A844;
    --abl-dl-shadow: 0 6px 16px -6px rgba(0,200,83,.6);
    --abl-dl-shadow-active: 0 2px 6px -3px rgba(0,200,83,.6);
    --abl-direct-1: #8E6BFF; --abl-direct-2: #7C4DFF;
    --abl-direct-shadow: 0 6px 16px -6px rgba(124,77,255,.65);
    --abl-direct-shadow-active: 0 2px 6px -3px rgba(124,77,255,.6);
    --abl-text: #fff; --abl-msg-bg: rgba(255,255,255,.06); --abl-msg-border: rgba(255,255,255,.14);
    --abl-link: #B39DFF; --abl-bar-track: rgba(255,255,255,.12);
}
#resultScreen .abl-panel { width: 90%; max-width: 360px; margin: 10px auto 0; }
#resultScreen .abl-row { gap: 8px; }
#resultScreen .abl-btn { padding: 8px 12px; font-size: .86em; gap: 7px; border-radius: 10px; }
#resultScreen .abl-btn svg { width: 17px; height: 17px; }
#resultScreen .abl-dot { width: 7px; height: 7px; }
#resultScreen .abl-msg { margin-top: 9px; padding: 7px 10px; font-size: .78em; line-height: 1.9; }
#resultScreen .abl-bar { margin-top: 9px; }