/* ==================================================
   Core Variables & Hardware Acceleration
   ================================================== */
   :root {
    /* رنگ پیش‌فرض سیستم - تغییرات داینامیک باید از طریق JS اعمال شود */
    --dynamic-rgb: 29, 185, 84; 
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* رنگ پس‌زمینه پایه. افکت گرادیان به جای body، در HTML (تگ #bg-blur) مدیریت می‌شود */
    background-color: #050505; 
    
    /* بهینه‌سازی رفتار لمسی */
    overscroll-behavior-y: none;
    -webkit-tap-highlight-color: transparent;
}

/* ==================================================
   Mobile Ergonomics & Safe Areas
   ================================================== */
/* محاسبات دقیق برای Notch و Home Indicator */
.pb-safe { padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 20px)); }
.pt-safe { padding-top: calc(0.5rem + env(safe-area-inset-top, 20px)); }

/* ==================================================
   Typography & Layout Utilities
   ================================================== */
.dir-auto {
    direction: auto;
    text-align: center;
}

/* ==================================================
   Performance-Optimized Lyrics System
   ================================================== */
.lyrics-mask {
    /* ایجاد افکت محو شدگی در بالا و پایین لیست بدون افت فریم */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
}

.lyric-line {
    font-size: 1.15rem; 
    font-weight: 500;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.4);
    /* 🔥 اصلاح: اضافه شدن filter blur به استایل پایه */
    filter: blur(1.5px);
    
    /* استفاده از will-change برای اطلاع به موتور رندرینگ جهت اختصاص لایه GPU جداگانه */
    will-change: transform, color, opacity, filter;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                color 0.4s ease, 
                opacity 0.4s ease,
                filter 0.4s ease;
    cursor: pointer;
    padding: 8px 24px;
    margin: 4px 0;
    transform-origin: center center;
    width: 100%;
    box-sizing: border-box;
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

.lyric-line:hover { 
    color: rgba(255, 255, 255, 0.7); 
    filter: blur(0px); /* رفع تاری هنگام هاور */
}

.lyric-line.active {
    color: rgb(var(--dynamic-rgb));
    font-weight: 800;
    /* انیمیشن مقیاس‌پذیری نرم بدون تغییر در Margin که باعث Reflow شود */
    transform: scale(1.15); 
    opacity: 1;
    filter: blur(0px); /* 🔥 اصلاح: لیریک فعال کاملاً واضح می‌شود */
    text-shadow: 0 0 20px rgba(var(--dynamic-rgb), 0.4);
    z-index: 10;
    position: relative;
}

/* ==================================================
   TV & Remote Control Navigation (Spatial Navigation)
   ================================================== */
/* حذف Outline استاندارد فقط برای دکمه‌های کنترلی خاص، نه کل سیستم */
.tv-button {
    outline: none;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease;
    will-change: transform;
}

.tv-button:focus-visible {
    transform: scale(1.1);
    background-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 0 4px rgba(var(--dynamic-rgb), 0.6);
    border-radius: 9999px; /* شکل دایره‌ای برای Focus Ring */
    z-index: 50;
}

/* ==================================================
   Scrollbars & Micro-Aesthetics
   ================================================== */
.custom-scroll::-webkit-scrollbar { width: 5px; }
.custom-scroll::-webkit-scrollbar-track { background: transparent; }
.custom-scroll::-webkit-scrollbar-thumb { 
    background: rgba(255, 255, 255, 0.2); 
    border-radius: 10px; 
}
.custom-scroll::-webkit-scrollbar-thumb:hover { 
    background: rgba(var(--dynamic-rgb), 0.8); 
}

/* ==================================================
   Dynamic Components
   ================================================== */
.track-item {
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.track-item.active {
    background: linear-gradient(90deg, rgba(var(--dynamic-rgb), 0.15) 0%, transparent 100%);
    border-left: 3px solid rgb(var(--dynamic-rgb));
}
.track-item.active h4 { color: rgb(var(--dynamic-rgb)); }
.track-item.active img { box-shadow: 0 0 15px rgba(var(--dynamic-rgb), 0.4); }