/**
 * ترانه‌سراها - Theme Home 2026
 * Layout tokens + Component styles
 *
 * ⚠️ رنگ‌ها (primary, secondary, gray, shadows) از سیستم قالب (themes/<theme>/variables.css) می‌آیند
 * این فایل فقط توکن‌های لایه‌آوت + استایل کامپوننت‌ها رو داره
 */


/* ==================== LAYOUT TOKENS (theme-independent) ==================== */
/*
 * ⚠️ این متغیرها مستقل از تم هستند و نباید توسط themes/<theme>/variables.css Override بشن
 * از initial-value برای محافظت استفاده شده
 */
:root {
    --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
    --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
    --space-12: 3rem; --space-16: 4rem; --space-20: 5rem;
    --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem;
    --radius-xl: 1rem; --radius-2xl: 1.5rem; --radius-3xl: 2rem; --radius-full: 9999px;
    --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem;
    --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem; --font-size-4xl: 2.25rem; --font-size-5xl: 3rem;
    --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700;
    --line-height-tight: 1.25; --line-height-normal: 1.5; --line-height-relaxed: 1.625;
    --transition-fast: 150ms ease; --transition-normal: 300ms ease;
    --header-height: 4rem; --container-max-width: 1200px;
    --z-dropdown: 1000; --z-sticky: 1020; --z-fixed: 1030; --z-modal: 1050;
}

/* ==================== DARK MODE — فقط استایل‌های لایه‌آوت ==================== */
/* متغیرهای رنگی تاریک از themes/<theme>/dark.css می‌آیند */
body.dark-mode { background-color: var(--gray-50) !important; color: var(--gray-700); }

/* ==================== RESET & BASE ==================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Vazirmatn','Vazir',sans-serif;font-size:var(--font-size-base);line-height:var(--line-height-relaxed);color:var(--gray-800);background:var(--gray-50);direction:rtl;-webkit-font-smoothing:antialiased;overflow-y:auto!important;overflow-x:hidden!important}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
.container{max-width:var(--container-max-width);margin:0 auto;padding:0 var(--space-4)}
.site-footer{text-align:center;padding:var(--space-8) var(--space-4);color:var(--gray-500);font-size:14px;border-top:1px solid rgba(0,0,0,0.06);margin-top:auto}
.site-footer p{margin:0}
body.dark-mode .site-footer{border-top-color:rgba(255,255,255,0.06)}
.hidden{display:none!important}
.inline-form{display:inline}

/* ==================== HEADER ==================== */
.modern-header{background:var(--gray-50);backdrop-filter:blur(28px);border-bottom:1px solid var(--gray-200);position:sticky;top:0;z-index:9999;height:4rem;/*[T60]*/box-shadow:var(--shadow-sm);transition:transform .3s ease}
.modern-header.hide{transform:translateY(-100%)}
body.dark-mode .modern-header{background:var(--gray-100);border-bottom:1px solid var(--gray-300)}
html{scroll-padding-top:calc(var(--ts-header-h,64px) + 10px)}/*[T60]*/
.header-container{max-width:1400px;margin:0 auto;height:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 1.5rem;gap:1rem}
.header-left{display:flex;align-items:center;justify-content:flex-start}
.modern-logo{display:flex;align-items:center;gap:.75rem;transition:opacity .2s;text-decoration:none}
.modern-logo:hover{opacity:.8}
.logo-image{max-height:36px;max-width:120px;object-fit:contain;border-radius:6px;flex-shrink:0}
.logo-icon{width:2.5rem;height:2.5rem;background:linear-gradient(135deg,var(--primary-500),var(--secondary-500));border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.1rem;box-shadow:0 4px 12px color-mix(in srgb, var(--primary-500) 30%, transparent)}
.logo-text{display:flex;flex-direction:column;gap:2px}
.logo-main{font-size:1.2rem;font-weight:800;color:var(--gray-900);line-height:1}
body.dark-mode .logo-main{color:var(--gray-800)}
.logo-subtitle{font-size:.65rem;color:var(--gray-500);font-weight:500}
body.dark-mode .logo-subtitle{color:var(--gray-600)}
.modern-nav{display:flex;align-items:center;justify-content:center;gap:.25rem;transition:all .3s ease}
.nav-link{display:flex;align-items:center;gap:.5rem;padding:.5rem .85rem;color:var(--gray-600);font-weight:600;font-size:.9rem;border-radius:10px;transition:all .2s;position:relative}
body.dark-mode .nav-link{color:var(--gray-600)}
.nav-link:hover{color:var(--gray-900);background:rgba(0,0,0,.04)}
body.dark-mode .nav-link:hover{color:var(--gray-800);background:rgba(255,255,255,.06)}
.nav-link.active{color:var(--primary-500);background:color-mix(in srgb, var(--primary-500) 8%, transparent)}
.nav-link.active::after{content:'';position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);width:24px;height:2px;background:var(--primary-500);border-radius:var(--radius-full)}
.nav-link i{font-size:1rem}
.header-right{display:flex;align-items:center;justify-content:flex-end;gap:.5rem}
.user-menu{position:relative}
.user-trigger{display:flex;align-items:center;gap:.5rem;padding:.35rem .75rem .35rem .5rem;background:var(--gray-50);border:1px solid var(--gray-200);border-radius:12px;cursor:pointer;transition:all .2s}
body.dark-mode .user-trigger{background:var(--gray-200);border-color:var(--gray-300)}
.user-trigger:hover{border-color:var(--primary-500)}
.user-avatar{width:2rem;height:2rem;border-radius:8px;object-fit:cover}
.user-name{font-size:.85rem;font-weight:600;color:var(--gray-900)}
body.dark-mode .user-name{color:var(--gray-800)}
.user-trigger .fa-chevron-down{font-size:.65rem;color:var(--gray-400)}
.user-dropdown{position:absolute;top:calc(100% + 8px);left:0;min-width:200px;background:var(--gray-50);border:1px solid var(--gray-200);border-radius:14px;box-shadow:var(--shadow-xl);opacity:0;visibility:hidden;transform:translateY(-10px);transition:all .2s;z-index:1000;overflow:hidden}
body.dark-mode .user-dropdown{background:var(--gray-200);border-color:var(--gray-300)}
.user-dropdown.show{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown-item{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;color:var(--gray-600);font-size:.9rem;transition:all .15s}
body.dark-mode .dropdown-item{color:var(--gray-600)}
.dropdown-item:hover{background:color-mix(in srgb, var(--primary-500) 8%, transparent);color:var(--primary-500)}
.dropdown-item.logout{color:var(--danger)}
.dropdown-divider{height:1px;background:var(--gray-200)}
body.dark-mode .dropdown-divider{background:var(--gray-300)}
.auth-buttons{display:flex;gap:.5rem}
.auth-btn{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:10px;font-size:.85rem;font-weight:600;transition:all .2s}
.auth-login{background:var(--gray-50);color:var(--gray-600);border:1px solid var(--gray-200)}
.auth-register{background:var(--primary-500);color:#fff}
.auth-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}
.theme-toggle{width:2.5rem;height:2.5rem;background:var(--gray-50);border:1px solid var(--gray-200);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--gray-500);cursor:pointer;transition:all .2s}
body.dark-mode .theme-toggle{background:var(--gray-200);border-color:var(--gray-300);color:var(--gray-600)}
.theme-toggle:hover{background:var(--primary-500);color:#fff;border-color:var(--primary-500)}
/* ═══ Language Switcher — سوییچر زبان (i18n v1.5) ═══ */
.lang-switcher{position:relative}
.lang-switcher__btn{height:2.5rem;min-width:2.5rem;padding:0 .6rem;background:var(--gray-50);border:1px solid var(--gray-200);border-radius:10px;display:flex;align-items:center;gap:.4rem;color:var(--gray-500);cursor:pointer;transition:all .2s;font-size:.8rem;font-weight:600}
body.dark-mode .lang-switcher__btn{background:var(--gray-200);border-color:var(--gray-300);color:var(--gray-600)}
.lang-switcher__btn:hover{background:var(--primary-500);color:#fff;border-color:var(--primary-500)}
.lang-switcher__chevron{font-size:.6rem;transition:transform .2s}
.lang-switcher.open .lang-switcher__chevron{transform:rotate(180deg)}
.lang-switcher__menu{position:absolute;top:calc(100% + .5rem);inset-inline-end:0;min-width:170px;background:var(--gray-50);border:1px solid var(--gray-200);border-radius:14px;box-shadow:var(--shadow-lg);padding:.4rem;display:none;z-index:10001}
body.dark-mode .lang-switcher__menu{background:var(--gray-100);border-color:var(--gray-300)}
.lang-switcher.open .lang-switcher__menu{display:block;animation:msCmsFadeIn .18s ease}
.lang-switcher__option{display:flex;align-items:center;gap:.6rem;padding:.55rem .7rem;border-radius:9px;font-size:.85rem;color:var(--gray-600);text-decoration:none;transition:all .15s}
body.dark-mode .lang-switcher__option{color:var(--gray-500)}
.lang-switcher__option:hover{background:var(--primary-50,#eef2ff);color:var(--primary-600)}
.lang-switcher__option.is-active{font-weight:700;color:var(--primary-600)}
.lang-switcher__option.is-active .fa-check{margin-inline-start:auto;font-size:.75rem}
.lang-switcher__flag{font-size:1rem;line-height:1}
.lang-switcher--inline{display:inline-flex;gap:.25rem;align-items:center}
.lang-switcher--inline .lang-switcher__item{display:inline-flex;align-items:center;justify-content:center;min-width:2.1rem;padding:.25rem .5rem;border-radius:8px;font-size:.72rem;font-weight:700;color:var(--gray-500);text-decoration:none;border:1px solid var(--gray-200);background:var(--gray-50);transition:all .2s}
.lang-switcher--inline .lang-switcher__item:hover{border-color:var(--primary-500);color:var(--primary-600)}
.lang-switcher--inline .lang-switcher__item.is-active{background:var(--primary-500);border-color:var(--primary-500);color:#fff}
body.dark-mode .lang-switcher--inline .lang-switcher__item{background:var(--gray-200);border-color:var(--gray-300);color:var(--gray-600)}
@keyframes msCmsFadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.mobile-menu-toggle{display:none;width:2.5rem;height:2.5rem;background:var(--gray-50);border:1px solid var(--gray-200);border-radius:10px;align-items:center;justify-content:center;color:var(--gray-500);cursor:pointer}
body.dark-mode .mobile-menu-toggle{background:var(--gray-200);border-color:var(--gray-300);color:var(--gray-600)}
.menu-overlay{position:fixed!important;inset:0!important;background:rgba(0,0,0,.5)!important;z-index:9998!important;opacity:0!important;visibility:hidden!important;transition:opacity .3s,visibility .3s!important;pointer-events:none!important}
.menu-overlay.show{opacity:1!important;visibility:visible!important;pointer-events:auto!important}
.mobile-nav-header{display:none;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid var(--gray-200);margin-bottom:.5rem;position:sticky;top:0;background:var(--gray-50);z-index:2}
body.dark-mode .mobile-nav-header{background:var(--gray-100);border-color:var(--gray-300)}
.mobile-nav-title{font-weight:700;font-size:1.1rem;color:var(--gray-900)}
.mobile-nav-close{width:40px;height:40px;border-radius:50%;background:rgba(0,0,0,.05);border:1px solid var(--gray-200);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--gray-500);transition:all .2s}
.mobile-nav-close:hover{background:var(--danger);color:#fff;border-color:var(--danger)}

/* ==================== HERO ==================== */
.hero-section{background:var(--gray-50);color:var(--gray-800);padding:0;position:relative;overflow:hidden}
body.dark-mode .hero-section{background:var(--gray-100);color:var(--gray-800)}
.hero-section::before{content:'';position:absolute;top:-40%;right:-20%;width:60%;height:140%;background:radial-gradient(ellipse at center,color-mix(in srgb,var(--primary-500) 18%,transparent) 0%,transparent 70%);pointer-events:none;animation:meshPulse 8s ease-in-out infinite}
.hero-section::after{content:'';position:absolute;bottom:-30%;left:-15%;width:50%;height:120%;background:radial-gradient(ellipse at center,color-mix(in srgb,var(--secondary-500) 12%,transparent) 0%,transparent 70%);pointer-events:none;animation:meshPulse 10s ease-in-out infinite reverse}
@keyframes meshPulse{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}}
.hero-container{max-width:var(--container-max-width);margin:0 auto;padding:var(--space-10) var(--space-4) var(--space-8);display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;z-index:1}
.hero-content{animation:fadeInUp .8s ease-out;max-width:700px}
.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 20px;background:color-mix(in srgb,var(--primary-500) 8%,var(--gray-50));border:1px solid color-mix(in srgb,var(--primary-500) 15%,var(--gray-200));border-radius:var(--radius-full);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--primary-500);margin-bottom:var(--space-5);animation:fadeInUp .8s ease-out .1s both}
body.dark-mode .hero-badge{background:color-mix(in srgb,var(--primary-500) 12%,var(--gray-200));border-color:color-mix(in srgb,var(--primary-500) 25%,var(--gray-400));color:var(--primary-400)}
.hero-badge i{font-size:.75rem;width:22px;height:22px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--primary-500),var(--primary-600));color:#fff;border-radius:7px;box-shadow:0 2px 8px rgba(99,102,241,.3)}
.hero-title{font-size:clamp(var(--font-size-2xl),5vw,var(--font-size-4xl));font-weight:var(--font-weight-bold);line-height:var(--line-height-tight);margin-bottom:var(--space-4);letter-spacing:-0.02em;color:var(--gray-900)}
body.dark-mode .hero-title{color:var(--gray-800)}
.hero-highlight{background:linear-gradient(135deg,var(--primary-500),var(--secondary-500));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-subtitle{font-size:clamp(var(--font-size-sm),2vw,var(--font-size-lg));color:var(--gray-500);margin-bottom:var(--space-8);line-height:1.8}
body.dark-mode .hero-subtitle{color:var(--gray-600)}
.hero-stats{display:flex;gap:var(--space-4);flex-wrap:wrap;justify-content:center}
.stat-item{background:color-mix(in srgb,var(--primary-500) 4%,#fff);backdrop-filter:blur(20px);border:1px solid color-mix(in srgb,var(--primary-500) 10%,var(--gray-200));border-radius:16px;padding:1rem 1.5rem;text-align:center;min-width:110px;transition:all .3s ease;position:relative;overflow:hidden}
body.dark-mode .stat-item{background:color-mix(in srgb,var(--primary-500) 8%,var(--gray-200));border-color:color-mix(in srgb,var(--primary-500) 15%,var(--gray-400))}
.stat-item:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--primary-500) 30%,var(--gray-200));box-shadow:0 8px 24px rgba(99,102,241,.12)}
.stat-item i{display:block;font-size:1.4rem;color:var(--primary-500);margin-bottom:.35rem}
body.dark-mode .stat-item i{color:var(--primary-400)}
.stat-number{display:block;font-size:1.6rem;font-weight:700;line-height:1.2;margin-bottom:.15rem;color:var(--gray-900);letter-spacing:-0.02em}
body.dark-mode .stat-number{color:var(--gray-800)}
.stat-label{font-size:.75rem;color:var(--gray-500);font-weight:500}
body.dark-mode .stat-label{color:var(--gray-600)}
.hero-visual{display:none}
.floating-elements,.floating-card{display:none}

/* ==================== FILTERS ==================== */
.filters-section{background:linear-gradient(180deg,color-mix(in srgb,var(--primary-500) 3%,var(--gray-50)) 0%,var(--gray-50) 100%);backdrop-filter:blur(20px);border-bottom:1px solid color-mix(in srgb,var(--primary-500) 10%,var(--gray-200));padding:var(--space-6) 0;position:relative}
.filters-section::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:60%;height:1px;background:linear-gradient(90deg,transparent,var(--primary-500),transparent);opacity:.3}
body.dark-mode .filters-section{background:linear-gradient(180deg,color-mix(in srgb,var(--primary-500) 6%,var(--gray-100)) 0%,var(--gray-100) 100%);border-color:color-mix(in srgb,var(--primary-500) 15%,var(--gray-300))}
body.dark-mode .filters-section::before{background:linear-gradient(90deg,transparent,var(--primary-400),transparent);opacity:.4}
.filters-grid{display:flex;gap:var(--space-2);flex-wrap:wrap;justify-content:center;overflow-x:auto;padding:var(--space-2) 0;scrollbar-width:none}
.filters-grid::-webkit-scrollbar{display:none}
.filter-chip{display:inline-flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:8px;padding:8px 16px;background:color-mix(in srgb,var(--primary-500) 5%,var(--gray-50));border:1px solid color-mix(in srgb,var(--primary-500) 15%,var(--gray-200));border-radius:12px;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--gray-700);transition:all .3s cubic-bezier(.4,0,.2,1);cursor:pointer;white-space:nowrap;font-family:inherit;box-shadow:0 2px 8px rgba(99,102,241,.06);position:relative;overflow:hidden}
.filter-chip::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,color-mix(in srgb,var(--primary-500) 8%,transparent),transparent);opacity:0;transition:opacity .3s ease}
.filter-chip:hover::before{opacity:1}
.filter-chip i{font-size:.85rem;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:9px;background:linear-gradient(135deg,var(--primary-500),var(--primary-600));color:#fff;transition:all .3s cubic-bezier(.4,0,.2,1);flex-shrink:0;box-shadow:0 2px 8px rgba(99,102,241,.3)}
.filter-chip span{position:relative;z-index:1}
.filter-chip:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(99,102,241,.15),0 2px 4px rgba(0,0,0,.04);border-color:color-mix(in srgb,var(--primary-500) 35%,var(--gray-200));color:var(--primary-600);background:color-mix(in srgb,var(--primary-500) 8%,var(--gray-50))}
.filter-chip:hover i{transform:scale(1.12);box-shadow:0 4px 14px rgba(99,102,241,.4)}
.filter-chip.active{background:linear-gradient(135deg,var(--primary-500),var(--primary-600));color:#fff;border-color:var(--primary-500);box-shadow:0 6px 20px rgba(99,102,241,.35),0 2px 6px rgba(99,102,241,.15);transform:translateY(-1px)}
.filter-chip.active::before{opacity:0}
.filter-chip.active i{background:rgba(255,255,255,.22);color:#fff;transform:scale(1.05);box-shadow:0 2px 8px rgba(0,0,0,.15)}
.filter-chip.active span{font-weight:var(--font-weight-bold)}
.filter-chip:active{transform:translateY(0) scale(.97);transition-duration:.1s}
body.dark-mode .filter-chip{background:color-mix(in srgb,var(--primary-500) 8%,var(--gray-200));border-color:color-mix(in srgb,var(--primary-500) 18%,var(--gray-400));color:var(--gray-700);box-shadow:0 2px 8px rgba(0,0,0,.15)}
body.dark-mode .filter-chip i{background:linear-gradient(135deg,var(--primary-500),var(--primary-600));color:#fff;box-shadow:0 2px 8px rgba(99,102,241,.25)}
body.dark-mode .filter-chip:hover{background:color-mix(in srgb,var(--primary-500) 15%,var(--gray-200));border-color:color-mix(in srgb,var(--primary-500) 45%,var(--gray-400));color:var(--primary-300);box-shadow:0 6px 20px rgba(99,102,241,.2)}
body.dark-mode .filter-chip:hover i{transform:scale(1.12);box-shadow:0 4px 14px rgba(99,102,241,.4)}
body.dark-mode .filter-chip.active{background:linear-gradient(135deg,var(--primary-500),var(--primary-600));color:#fff;border-color:var(--primary-500);box-shadow:0 6px 20px rgba(99,102,241,.4)}
body.dark-mode .filter-chip.active i{background:rgba(255,255,255,.22);color:#fff;transform:scale(1.05)}
.category-filter{background:color-mix(in srgb,var(--primary-500) 4%,#fff);border-color:color-mix(in srgb,var(--primary-500) 12%,var(--gray-200));color:var(--gray-700)}
.category-filter:hover{border-color:color-mix(in srgb,var(--primary-500) 35%,var(--gray-200));color:var(--primary-600);box-shadow:0 8px 24px rgba(99,102,241,.15)}
.category-filter:hover i{transform:scale(1.12);box-shadow:0 4px 14px rgba(99,102,241,.4)}
.category-filter.active{background:linear-gradient(135deg,var(--primary-500),var(--primary-600));color:#fff;border-color:var(--primary-500)}
.category-filter.active i{background:rgba(255,255,255,.22);color:#fff;transform:scale(1.05)}
body.dark-mode .category-filter{background:color-mix(in srgb,var(--primary-500) 8%,var(--gray-200));border-color:color-mix(in srgb,var(--primary-500) 18%,var(--gray-400));color:var(--gray-700)}
body.dark-mode .category-filter:hover{background:color-mix(in srgb,var(--primary-500) 15%,var(--gray-200));color:var(--primary-300);border-color:color-mix(in srgb,var(--primary-500) 45%,var(--gray-400))}
body.dark-mode .category-filter:hover i{transform:scale(1.12);box-shadow:0 4px 14px rgba(99,102,241,.4)}
body.dark-mode .category-filter.active{background:linear-gradient(135deg,var(--primary-500),var(--primary-600));color:#fff;border-color:var(--primary-500)}

/* ==================== MAIN CONTENT ==================== */
.main-content{padding:var(--space-12)0;background:var(--gray-50)}
body.dark-mode .main-content{background:transparent}

/* ==================== POSTS GRID ==================== */
.posts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem;margin-top:1.5rem}

/* ==================== LOADER ==================== */
.loader{display:none;text-align:center;padding:var(--space-12)}
.loader.active{display:block}
.loader p{color:var(--gray-500);font-size:var(--font-size-lg);margin-top:1rem}
.loader-spinner{display:flex;justify-content:center;align-items:center;gap:var(--space-1);margin-bottom:var(--space-4)}
.spinner-ring{width:32px;height:32px;border:3px solid var(--gray-200);border-top:3px solid var(--primary-500);border-radius:50%;animation:spin 1s linear infinite}
.spinner-ring:nth-child(2){animation-delay:0.2s}
.spinner-ring:nth-child(3){animation-delay:0.4s}
.spinner-ring:nth-child(4){animation-delay:0.6s}
@keyframes spin{to{transform:rotate(360deg)}}

/* ==================== SLIDER ==================== */
.slider-wrapper{position:relative;margin:2rem 0;padding:0 1.5rem}
.slider-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;padding:.75rem 1.25rem;background:linear-gradient(135deg,color-mix(in srgb,var(--primary-500) 6%,var(--gray-50)),color-mix(in srgb,var(--primary-500) 2%,var(--gray-50)));border:1px solid color-mix(in srgb,var(--primary-500) 15%,var(--gray-200));border-radius:16px;box-shadow:0 2px 8px rgba(99,102,241,.06);position:relative;overflow:hidden}
.slider-header::before{content:'';position:absolute;top:0;right:0;width:4px;height:100%;background:linear-gradient(180deg,var(--primary-500),var(--primary-600));border-radius:4px 0 0 4px}
body.dark-mode .slider-header{background:linear-gradient(135deg,color-mix(in srgb,var(--primary-500) 10%,var(--gray-200)),color-mix(in srgb,var(--primary-500) 4%,var(--gray-200)));border-color:color-mix(in srgb,var(--primary-500) 25%,var(--gray-400))}
.slider-header h3{margin:0;font-size:1.1rem;font-weight:700;color:var(--gray-800);display:flex;align-items:center;gap:.6rem;position:relative;z-index:1}
.slider-header h3 i{color:var(--primary-500);font-size:1rem;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--primary-500),var(--primary-600));color:#fff;border-radius:10px;box-shadow:0 2px 8px rgba(99,102,241,.3)}
.slider-header h3 a{color:inherit;text-decoration:none;transition:color .2s}
.slider-header h3 a:hover{color:var(--primary-500)}
.slider-arrows{display:flex;gap:6px;position:relative;z-index:1}
.slider-arrows .arrow{width:36px;height:36px;border-radius:12px;border:1px solid color-mix(in srgb,var(--primary-500) 20%,var(--gray-300));background:var(--gray-50);color:var(--gray-600);cursor:pointer;font-size:1.1rem;display:flex;align-items:center;justify-content:center;transition:all .25s ease;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.slider-arrows .arrow:hover{background:linear-gradient(135deg,var(--primary-500),var(--primary-600));border-color:var(--primary-500);color:#fff;transform:scale(1.08);box-shadow:0 4px 12px rgba(99,102,241,.3)}
body.dark-mode .slider-arrows .arrow{background:var(--gray-300);border-color:var(--gray-400);color:var(--gray-600)}
body.dark-mode .slider-arrows .arrow:hover{background:linear-gradient(135deg,var(--primary-500),var(--primary-600));color:#fff}
.slider{display:flex;gap:1rem;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;padding:.5rem .5rem 1rem;scroll-snap-type:x mandatory}
.slider::-webkit-scrollbar{display:none}
.slide{flex:0 0 auto;width:280px;min-width:280px;max-width:280px;scroll-snap-align:start}
.slide .post-card{width:100%;height:100%;border-radius:16px;overflow:hidden;background:var(--gray-50)!important;border:1px solid var(--gray-200)!important;box-shadow:var(--shadow-sm)!important;position:relative!important;display:flex!important;flex-direction:column!important;padding:0!important}
.slide .post-media{position:relative!important;width:100%!important;height:200px!important;min-height:200px!important;max-height:200px!important;flex-shrink:0!important;overflow:hidden!important}
.slide .post-media img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important}
.slide .post-content{position:relative!important;padding:.75rem 1rem!important;flex:1!important}
.slide .post-title{color:var(--gray-800)!important;font-size:.9rem!important;font-weight:600!important;margin-bottom:.25rem!important}
.slide .post-content p{color:var(--gray-500)!important;font-size:.78rem!important}
.slide .post-header,.slide .post-footer{display:none!important}
.slider-meta{display:flex;gap:.75rem;font-size:.72rem;color:var(--gray-400);margin-top:.5rem;padding-top:.4rem;border-top:1px solid var(--gray-200)}
.slider-meta span{display:flex;align-items:center;gap:3px}
.slider-badge{display:inline-flex;padding:2px 10px;border-radius:14px;font-size:.7rem;font-weight:600;color:#fff;margin-bottom:.4rem}
.slider-dots{display:flex;justify-content:center;margin-top:.25rem;gap:8px}
.slider-dots .dot{width:8px;height:8px;border-radius:50%;background:var(--gray-300);transition:all .3s ease;cursor:pointer}
.slider-dots .dot.active{background:var(--primary-500);transform:scale(1.4);width:24px;border-radius:12px}
.mask-left,.mask-right{display:none}

/* ==================== FEATURED BADGE ==================== */
.featured-badge{position:absolute;top:10px;right:10px;background:linear-gradient(135deg,var(--warning),color-mix(in srgb, var(--warning) 80%, #000));color:#fff;padding:4px 10px;border-radius:20px;font-size:.7rem;font-weight:600;display:flex;align-items:center;gap:4px;z-index:10;box-shadow:0 2px 8px color-mix(in srgb, var(--warning) 30%, transparent)}

/* ==================== BACK TO TOP ==================== */
.back-to-top{position:fixed;bottom:80px;left:var(--space-6);width:52px;height:52px;background:linear-gradient(135deg,var(--primary-500),var(--primary-600));border:1px solid rgba(255,255,255,.2);border-radius:16px;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 8px 24px rgba(99,102,241,.35),0 2px 6px rgba(0,0,0,.1);opacity:0;visibility:hidden;transform:translateY(20px) scale(.8);transition:all .35s cubic-bezier(.4,0,.2,1);z-index:200;cursor:pointer}
.back-to-top.show{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.back-to-top:hover{transform:translateY(-4px) scale(1.08);box-shadow:0 12px 32px rgba(99,102,241,.45),0 4px 10px rgba(0,0,0,.12)}
.back-to-top:active{transform:translateY(-1px) scale(.95);transition-duration:.1s}
.back-to-top-content{display:flex;flex-direction:column;align-items:center;gap:1px;font-size:var(--font-size-xs)}
.back-to-top-content i{font-size:1.1rem}
body.dark-mode .back-to-top{background:linear-gradient(135deg,var(--primary-500),var(--primary-600));box-shadow:0 8px 24px rgba(99,102,241,.4),0 2px 6px rgba(0,0,0,.3)}

/* ==================== END MESSAGE ==================== */
.end-message{display:none;max-width:440px;margin:3rem auto 5rem;padding:2.5rem 2rem;text-align:center;background:color-mix(in srgb,var(--primary-500) 4%,var(--gray-50));border:1px solid color-mix(in srgb,var(--primary-500) 12%,var(--gray-200));border-radius:20px;box-shadow:0 4px 16px rgba(99,102,241,.08)}
.end-message.show{display:block;animation:fadeInUp .5s ease-out}
.end-message .end-icon{width:64px;height:64px;margin:0 auto 1.25rem;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,color-mix(in srgb,var(--primary-500) 10%,transparent),color-mix(in srgb,var(--secondary-500) 8%,transparent));border-radius:50%;color:var(--primary-500);font-size:1.75rem}
.end-message h3{color:var(--gray-800);font-size:1.15rem;font-weight:600}
.end-message p{color:var(--gray-500);font-size:0.9rem;margin-top:.5rem}
body.dark-mode .end-message{background:color-mix(in srgb,var(--primary-500) 6%,var(--gray-200));border-color:color-mix(in srgb,var(--primary-500) 15%,var(--gray-400))}
body.dark-mode .end-message h3{color:var(--gray-800)}

/* ==================== MODAL ==================== */
.modern-modal{position:fixed;inset:0;z-index:var(--z-modal);opacity:0;visibility:hidden;transition:var(--transition-normal)}
.modern-modal.show{opacity:1;visibility:visible}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(8px)}
.modal-container{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:var(--space-4)}
.modal-content-wrapper{background:var(--gray-50);backdrop-filter:blur(20px);border-radius:var(--radius-3xl);width:100%;max-width:900px;max-height:90vh;overflow:hidden;box-shadow:var(--shadow-2xl);display:grid;grid-template-columns:1fr 400px;animation:modalSlideIn 0.4s ease-out}
body.dark-mode .modal-content-wrapper{background:var(--gray-100)}
.modal-header{position:absolute;top:0;left:0;right:0;z-index:10;padding:var(--space-4);display:flex;justify-content:flex-end}
.modal-close-btn{width:40px;height:40px;background:var(--gray-50);border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;color:var(--gray-600);transition:var(--transition-fast);box-shadow:var(--shadow-md)}
.modal-close-btn:hover{background:var(--gray-50);transform:scale(1.1)}
.modal-media-section{background:var(--gray-900);position:relative}
.modal-media-container{height:100%;display:flex;align-items:center;justify-content:center}
.modal-info-section{padding:var(--space-6);overflow-y:auto}
@keyframes modalSlideIn{from{opacity:0;transform:scale(.9)translateY(20px)}to{opacity:1;transform:scale(1)translateY(0)}}

/* ==================== SINGLE POST ==================== */
.single-post-wrapper{width:100%;margin:0 auto;padding:var(--space-6)var(--space-4)}
@media(min-width:992px){.single-post-wrapper{width:80%;max-width:80%}}
.single-post{background:var(--gray-50);backdrop-filter:blur(20px);border:1px solid var(--gray-200);border-radius:var(--radius-2xl);padding:var(--space-8);box-shadow:var(--shadow-xl);margin-bottom:var(--space-8)}
body.dark-mode .single-post{background:var(--gray-200);border-color:var(--gray-400)}

/* ==================== COMMENTS ==================== */
.comment-item{display:flex;gap:var(--space-4);background:var(--gray-50);padding:var(--space-4);border-radius:var(--radius-xl);border:1px solid var(--gray-200);margin-bottom:var(--space-4)}
body.dark-mode .comment-item{background:var(--gray-300);border-color:var(--gray-400)}
.comment-avatar{width:48px;height:48px;border-radius:50%;overflow:hidden;flex-shrink:0}
.comment-avatar img{width:100%;height:100%;object-fit:cover}
.comment-content{flex:1}
.comment-author{font-weight:var(--font-weight-semibold);color:var(--gray-800);font-size:var(--font-size-sm)}
.comment-text{color:var(--gray-600);line-height:var(--line-height-relaxed);font-size:var(--font-size-sm);margin-top:var(--space-2)}
.comment-form input,.comment-form textarea{width:100%;padding:var(--space-3);border:1px solid var(--gray-300);border-radius:var(--radius-lg);font-family:inherit;font-size:var(--font-size-sm);background:var(--gray-50);color:var(--gray-800)}
body.dark-mode .comment-form input,body.dark-mode .comment-form textarea{background:var(--gray-700);border-color:var(--gray-600);color:var(--gray-200)}
.comment-form textarea{min-height:100px;resize:vertical}

/* ==================== RESPONSIVE ==================== */
@media(max-width:1024px){
    .hero-container{grid-template-columns:1fr;text-align:center}
    .hero-visual{height:300px}
    .floating-card{width:60px;height:60px;font-size:var(--font-size-xl)}
    .hero-stats{justify-content:center}
}
@media(max-width:900px){
    .header-container{grid-template-columns:1fr auto;padding:0 1rem}
    .modern-nav{display:none;position:fixed!important;top:4rem!important;left:0!important;right:0!important;bottom:0!important;height:calc(100vh - 4rem)!important;background:var(--gray-50)!important;flex-direction:column;padding:0;gap:.25rem;z-index:9999!important;overflow-y:auto!important;justify-content:flex-start;animation:slideInRight .3s ease}
    body.dark-mode .modern-nav{background:var(--gray-100)!important}
    .modern-nav.show,.modern-nav.mobile-open{display:flex!important}
    .mobile-nav-header{display:flex}
    .mobile-menu-toggle{display:flex}
    @keyframes slideInRight{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
    .nav-link{width:100%;justify-content:flex-start;padding:.75rem 1rem}
    .header-right .user-name{display:none}
    .auth-buttons .auth-btn span{display:none}
}
@media(max-width:768px){
    .hero-section{padding:var(--space-8)0 var(--space-6)}
    .hero-visual{display:none}
    .hero-title{font-size:var(--font-size-2xl)}
    .hero-stats{gap:var(--space-4)}
    .posts-grid{grid-template-columns:1fr;gap:1rem}
    .slide{width:80%;min-width:80%;max-width:80%}
    .slide .post-media{height:170px}
    .slider{gap:.5rem}
    .slider-wrapper{padding:0 .75rem}
}
@media(max-width:480px){
    .logo-subtitle{display:none}
    .header-container{padding:0 .75rem}
    .hero-title{font-size:var(--font-size-xl)}
    .filter-chip{padding:8px 14px;font-size:var(--font-size-xs);border-radius:12px;gap:6px}
    .filter-chip i{width:24px;height:24px;font-size:.8rem;border-radius:8px}
    .filters-grid{gap:6px}
    .back-to-top{bottom:75px;left:var(--space-4);width:46px;height:46px;border-radius:14px}
}
@media(min-width:768px)and(max-width:1023px){
    .slide{width:320px;min-width:320px;max-width:320px}
    .slide .post-media{height:200px}
    .mask-left,.mask-right{display:block;position:absolute;top:50px;bottom:0;width:60px;pointer-events:none;z-index:2}
    .mask-right{right:1.5rem;background:linear-gradient(to right,transparent,var(--gray-50))}
    .mask-left{left:1.5rem;background:linear-gradient(to left,transparent,var(--gray-50))}
}
@media(min-width:1024px){
    .slide{width:340px;min-width:340px;max-width:340px}
    .slide .post-media{height:210px}
    .slider{gap:1.25rem}
    .mask-left,.mask-right{display:block;position:absolute;top:50px;bottom:0;width:60px;pointer-events:none;z-index:2}
    .mask-right{right:1.5rem;background:linear-gradient(to right,transparent,var(--gray-50))}
    .mask-left{left:1.5rem;background:linear-gradient(to left,transparent,var(--gray-50))}
}

/* ==================== BOTTOM NAV ==================== */
.bottom-nav{
    position:fixed;bottom:0;left:0;right:0;
    background:#fff;border-top:1px solid var(--gray-200);
    display:flex;justify-content:space-around;align-items:center;
    padding:0.4rem 0;z-index:100;
    box-shadow:0 -4px 16px rgba(0,0,0,0.06);
}
body.dark-mode .bottom-nav{
    background:var(--gray-100);border-color:var(--gray-300);
    box-shadow:0 -4px 16px rgba(0,0,0,0.2);
}
.bottom-nav-item{
    display:flex;flex-direction:column;align-items:center;gap:0.2rem;
    padding:0.35rem 0.75rem;border-radius:12px;text-decoration:none;
    color:var(--gray-500);font-size:0.65rem;font-weight:600;
    transition:all 0.25s ease;cursor:pointer;position:relative;
}
.bottom-nav-item i{font-size:1.2rem;transition:all 0.25s ease}
.bottom-nav-item:hover{color:var(--primary-500);background:color-mix(in srgb,var(--primary-500) 6%,transparent)}
.bottom-nav-item.active{color:var(--primary-500)}
.bottom-nav-item.active i{transform:scale(1.15)}
.bottom-nav-item.active::after{
    content:'';position:absolute;top:-4px;left:50%;transform:translateX(-50%);
    width:20px;height:3px;border-radius:0 0 3px 3px;background:var(--primary-500);
}
@media(min-width:1024px){.bottom-nav{display:none}}

/* ═══ [T33] هدر در نمایشگرهای باریک — هیچ عنصری از کادر 320px بیرون نمی‌زند ═══ */
@media (max-width: 400px) {
    .header-container{gap:.35rem;padding:0 .6rem}
    .header-left{gap:.45rem}
    .logo-image{max-height:30px;max-width:104px}
    .logo-text .logo-main{font-size:1rem}
    .header-right{gap:.3rem}
    .auth-buttons{gap:.3rem}
    .auth-btn{padding:.45rem .55rem;gap:.35rem}
    .theme-toggle,.mobile-menu-toggle{width:2.25rem;height:2.25rem}
}

/* ==================== [T40] استاندارد موبایل سراسری (اندازهٔ توییتر) ==================== */
@media (max-width: 640px) {
  body { font-size: 15px; }
  body .btn { min-height: 40px; padding: 0.6rem 1.05rem; font-size: 0.9rem; }
  body .btn i { font-size: 0.98rem; }
  body .btn-sm { min-height: 36px; padding: 0.45rem 0.8rem; font-size: 0.82rem; }
  body input[type="text"], body input[type="search"], body input[type="email"],
  body input[type="password"], body input[type="url"], body input[type="tel"],
  body select { font-size: 16px; min-height: 44px; }
  body textarea { font-size: 16px; }
  body .bottom-nav-item { padding: 0.5rem 0.55rem; min-width: 52px; font-size: 0.72rem; }
  body .bottom-nav-item i { font-size: 1.35rem; }
  body .nav-link { font-size: 0.95rem; padding: 0.65rem 0.95rem; }
  body .nav-link i { font-size: 1.15rem; }
  body .logo-main { font-size: 1.25rem; }
  body .logo-icon { width: 2.7rem; height: 2.7rem; font-size: 1.2rem; }
  body .modal-close-btn { width: 40px; height: 40px; font-size: 1.05rem; }
  body .filter-chip { min-height: 38px; font-size: 0.82rem; padding: 0.4rem 0.85rem; }
}
/* پایان [T40] سراسری */