/* ════════════════════════════════════════════════════════════════
   چنلیست — دیزاین سیستم v2 (بدون فریمورک؛ CSS خالص)
   امضای بصری: «رصدخانه داده» — شب سرمه‌ای + کاشی فیروزه + داده زنده

   صفحات عمومی فقط از همین فایل استایل می‌گیرند. پنل ادمین جداست
   (bootstrap + admin.css) چون داخلی و noindex است.
   دارایی‌ها همه محلی‌اند — سرور ایران است، CDN خارجی اضافه نشود.
   ════════════════════════════════════════════════════════════════ */

/* ---------- فونت‌ها: استعداد برای تیترها (شخصیت)، وزیرمتن برای متن ---------- */
@font-face {
    font-family: 'Vazirmatn';
    src: url('../fonts/Vazirmatn-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('../fonts/Vazirmatn-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('../fonts/Vazirmatn-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Estedad';
    src: url('../fonts/Estedad-Bold.woff2') format('woff2');
    font-weight: 700 800;
    font-display: swap;
}

@font-face {
    font-family: 'Estedad';
    src: url('../fonts/Estedad-Black.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}

:root {
    color-scheme: light;
    --teal: #0D9488;
    --teal-bright: #2DD4BF;
    --teal-soft: #CCFBF1;
    --teal-dark: #0B7A70;
    --navy: #0F172A;
    --navy-deep: #0B1120;
    --navy-2: #1E293B;
    --amber: #F59E0B;
    --amber-soft: #FEF3C7;
    --ink: #0F172A;
    --muted: #64748B;
    --line: #E2E8F0;
    --bg: #F8FAFC;
    --card: #FFFFFF;
    --up: #10B981;
    --down: #F43F5E;
    --r: 18px;
    --r-lg: 26px;
    --shadow: 0 10px 30px -12px rgba(15,23,42,.18);
    --shadow-lg: 0 30px 60px -20px rgba(11,17,32,.45);
    --display: 'Estedad', Vazirmatn, Tahoma, sans-serif;
    --body: Vazirmatn, Tahoma, sans-serif;
    /* ایموجی‌ها به فونت رنگی مقید می‌شوند وگرنه ویندوز از گلیف‌های تک‌رنگ Tahoma استفاده می‌کند */
    --emoji: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;

    /* ---- توکن‌های نیمه‌معنایی — حالت تاریک فقط همین‌ها را بازتعریف می‌کند ---- */
    --line-accent: #BAE6E0;              /* حاشیه hover کارت‌ها */
    --track: #EEF2F7;                    /* پس‌زمینه نوار پیشرفت، تب و صفحه‌بندی */
    --ghost: #F1F5F9;                    /* عدد رتبه بزرگ پشت کارت */
    --pos: #CBD5E1;                      /* شماره ردیف فهرست */
    --text-2: #334155;                   /* متن بدنه ثانویه (متن SEO، پست‌ها) */
    --teal-line: #99F6E4;
    --teal-ink: var(--teal-dark);
    --amber-line: #FDE68A;
    --amber-ink: #92400E;
    --sky-soft: #E0F2FE;
    --sky-ink: #0369A1;
    --violet-soft: #EDE9FE;
    --violet-ink: #6D28D9;
    --danger-soft: #FEF2F2;
    --danger-line: #FECACA;
    --danger-ink: #B91C1C;
    --ok-soft: #ECFDF5;
    --ok-line: #A7F3D0;
    --ok-ink: #065F46;
    --ico-grad: linear-gradient(135deg, #F0FDFA, #CCFBF1);
    --mirror-grad: linear-gradient(160deg, #F0FDFA, #CCFBF1);
    --amber-grad: linear-gradient(160deg, #FFFBEB, #FEF3C7);
    --pill-active-bg: var(--navy);
    --pill-active-ink: #fff;
    --chart-grid: #EDF1F6;
    --mob-bar-bg: rgba(255,255,255,.92);

    /* ---- جان‌بخشی (شهریور ۱۴۰۵) ---- */
    /* سایه استراحت: کارت‌ها در حالت عادی هم عمق دارند، نه فقط hover —
       بدون آن، صفحه‌های روشن شبیه وایرفریم به نظر می‌رسیدند */
    --shadow-rest: 0 1px 2px rgba(15,23,42,.04), 0 8px 22px -12px rgba(15,23,42,.10);
    /* هاله‌های محیطی خیلی ملایم پشت بخش‌های روشن — سفیدِ مطلق، مرده است */
    --ambient:
        radial-gradient(52rem 30rem at 88% 12rem, rgba(13,148,136,.055), transparent 60%),
        radial-gradient(46rem 30rem at 4% 60rem, rgba(139,92,246,.045), transparent 60%),
        radial-gradient(40rem 26rem at 92% 130rem, rgba(245,158,11,.04), transparent 60%);
    /* نوار تمام‌عرض بخش «چرا چنلیست» */
    --band-tint: linear-gradient(180deg, rgba(13,148,136,.05), rgba(13,148,136,.015));
    --band-line: rgba(13,148,136,.14);

    /* ---- جان‌بخشی ۲ (شهریور ۱۴۰۵) ---- */
    /* رنگ خط نمودار و اسپارک‌ها — در تاریک روشن‌تر می‌شود تا بدرخشد؛
       stop های areaGrad در _Layout هم از همین می‌خوانند */
    --chart-line: #0D9488;
    /* هاله خط نمودار — در روشن نامحسوس، در تاریک درخشش واقعی */
    --chart-glow: drop-shadow(0 0 5px rgba(13,148,136,.25));
    /* منحنی حرکت مشترک همه تعامل‌ها — حس «یک دست» بودن */
    --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- حالت تاریک ----------
   بخش‌های همیشه‌تیره (هدر، هیرو، فوتر، CTA، تیکر) دست نمی‌خورند؛
   فقط سطح‌های روشن با توکن برمی‌گردند. انتخاب کاربر در localStorage است
   و اسکریپت درون‌خطی head پیش از اولین رندر data-theme را می‌گذارد. */
[data-theme="dark"] {
    color-scheme: dark;
    --ink: #E4ECF8;
    --muted: #93A4BD;
    --line: #22304A;
    --bg: #0B1120;
    --card: #121C30;
    --line-accent: #1F5D57;
    --track: #1B2842;
    --ghost: #1C2A45;
    --pos: #33456B;
    --text-2: #B9C6DA;
    --teal-soft: rgba(45,212,191,.14);
    --teal-line: rgba(45,212,191,.32);
    --teal-ink: #5EEAD4;
    --amber-soft: rgba(245,158,11,.15);
    --amber-line: rgba(245,158,11,.32);
    --amber-ink: #FCD34D;
    --sky-soft: rgba(14,165,233,.15);
    --sky-ink: #7DD3FC;
    --violet-soft: rgba(139,92,246,.16);
    --violet-ink: #C4B5FD;
    --danger-soft: rgba(244,63,94,.13);
    --danger-line: rgba(244,63,94,.35);
    --danger-ink: #FDA4AF;
    --ok-soft: rgba(16,185,129,.13);
    --ok-line: rgba(16,185,129,.35);
    --ok-ink: #6EE7B7;
    --ico-grad: linear-gradient(135deg, rgba(45,212,191,.18), rgba(45,212,191,.05));
    --mirror-grad: linear-gradient(160deg, rgba(45,212,191,.16), rgba(45,212,191,.05));
    --amber-grad: linear-gradient(160deg, rgba(245,158,11,.14), rgba(245,158,11,.04));
    --pill-active-bg: var(--teal);
    --pill-active-ink: #06302B;
    --chart-grid: #20304C;
    --mob-bar-bg: rgba(11,17,32,.92);
    --shadow: 0 10px 30px -12px rgba(0,0,0,.55);
    --shadow-lg: 0 30px 60px -18px rgba(0,0,0,.7);
    --shadow-rest: 0 1px 2px rgba(0,0,0,.35), 0 8px 22px -12px rgba(0,0,0,.45);
    --ambient:
        radial-gradient(52rem 30rem at 88% 12rem, rgba(45,212,191,.06), transparent 60%),
        radial-gradient(46rem 30rem at 4% 60rem, rgba(139,92,246,.05), transparent 60%),
        radial-gradient(40rem 26rem at 92% 130rem, rgba(245,158,11,.04), transparent 60%);
    --band-tint: linear-gradient(180deg, rgba(45,212,191,.05), rgba(45,212,191,.015));
    --band-line: rgba(45,212,191,.16);
    --chart-line: #2DD4BF;
    --chart-glow: drop-shadow(0 0 8px rgba(45,212,191,.5));
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* اسکرول‌بار هم‌خانواده تم — پیش‌فرض خاکستری ویندوز کنار هدر سرمه‌ای خام می‌زد */
html {
    scrollbar-color: var(--pos) var(--bg);
}

::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--bg);
}

::-webkit-scrollbar-thumb {
    background: var(--pos);
    border-radius: 8px;
    border: 3px solid var(--bg);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--muted);
}

::selection {
    background: rgba(45,212,191,.3);
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--body);
    background: var(--bg);
    color: var(--ink);
    line-height: 1.9;
    /* clip (نه hidden): نوار تمام‌عرض sec-band یک عرض ویوپورت است و لبه‌اش باید
       بریده شود؛ hidden روی body، position:sticky ناوبری را می‌شکست، clip نه */
    overflow-x: clip;
}

/* هاله‌های رنگی ثابت پشت کل صفحه — آن‌قدر ملایم که فقط «سفیدِ مرده» را بشکند.
   fixed است تا با اسکرول ندود و ارزان بماند؛ pointer-events ندارد. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: var(--ambient);
    pointer-events: none;
}

img, svg {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

.container {
    width: min(1140px,92%);
    margin-inline: auto;
}

/* عدد لاتین‌جهت با ارقام هم‌عرض — ارقام فارسی از سمت سرور (کلاس Fa) می‌آیند */
.num {
    font-feature-settings: "tnum";
    direction: ltr;
    unicode-bidi: embed;
}

h1, h2, h3 {
    font-family: var(--display);
    line-height: 1.5;
}

::selection {
    background: var(--teal);
    color: #fff;
}

/* ---------- دسترس‌پذیری ---------- */
.skip-link {
    position: fixed;
    top: -60px;
    right: 12px;
    z-index: 999;
    background: var(--teal);
    color: #fff;
    padding: .6rem 1.1rem;
    border-radius: 12px;
    transition: top .2s;
}

.skip-link:focus {
    top: 12px;
}

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
    outline: 3px solid var(--amber);
    outline-offset: 2px;
    border-radius: 6px;
}

@media (prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto;
    }

    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* اسکرول‌ریویل — عمدا به کلاس js روی <html> مقید است.
   بدون جاوااسکریپت این قاعده اصلا اعمال نمی‌شود و محتوا کامل دیده می‌شود؛
   وگرنه یک خطای کوچک در JS کل صفحه را نامرئی می‌کرد. */
.js .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s ease, transform .6s ease;
}

.js .reveal.in {
    opacity: 1;
    transform: none;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---------- ناوبری شیشه‌ای ---------- */
.nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(11,17,32,.75);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.nav-in {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    padding: .8rem 0;
}

.brand {
    font-family: var(--display);
    font-weight: 900;
    font-size: 1.45rem;
    color: #fff;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.brand .mark {
    /* لوگوی واقعی (C + نمودار) — دیگر کاشی پس‌زمینه ندارد؛ فقط هاله فیروزه‌ای ملایم */
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    filter: drop-shadow(0 0 10px rgba(45,212,191,.35));
}

.brand .mark svg {
    width: 36px;
    height: 36px;
}

.nav-links {
    display: flex;
    gap: 1.2rem;
    margin-inline-start: auto;
}

.nav-links a {
    color: #B9C4D6;
    font-size: .95rem;
    font-weight: 500;
    transition: color .15s;
}

.nav-links a:hover, .nav-links a[aria-current] {
    color: #fff;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    font-weight: 700;
    border-radius: 14px;
    padding: .65rem 1.3rem;
    border: 0;
    cursor: pointer;
    font-family: var(--body);
    font-size: .95rem;
    transition: transform .15s, box-shadow .15s, background .15s;
}

.btn:active {
    transform: translateY(1px);
}

.btn-primary {
    background: linear-gradient(135deg,var(--teal),var(--teal-bright));
    color: #06302B;
    box-shadow: 0 6px 20px -6px rgba(45,212,191,.55);
}

.btn-primary:hover {
    box-shadow: 0 10px 26px -6px rgba(45,212,191,.75);
    color: #06302B;
}

.btn-ghost {
    background: rgba(255,255,255,.06);
    color: #fff;
    border: 1px solid rgba(255,255,255,.14);
}

.btn-ghost:hover {
    background: rgba(255,255,255,.12);
}

.btn-outline {
    background: var(--card);
    color: var(--teal-ink);
    border: 1.5px solid var(--teal);
}

.btn-outline:hover {
    background: var(--teal);
    color: #fff;
}

.nav-toggle {
    display: none;
    margin-inline-start: auto;
    background: none;
    border: 0;
    color: #fff;
    font-size: 1.6rem;
    cursor: pointer;
}

/* ---------- هیرو: رصدخانه ---------- */
.hero {
    position: relative;
    background: radial-gradient(70rem 30rem at 80% -10%,rgba(13,148,136,.35),transparent 60%),radial-gradient(50rem 24rem at 0% 110%,rgba(245,158,11,.10),transparent 55%),linear-gradient(180deg,var(--navy-deep),var(--navy) 70%);
    color: #fff;
    overflow: hidden;
}

.hero .girih {
    position: absolute;
    inset: 0;
    opacity: .55;
    pointer-events: none;
    /* گره فقط دور صحنه اصلی دیده شود و به لبه‌ها محو شود — نورپردازی، نه کاغذدیواری */
    -webkit-mask-image: radial-gradient(60rem 34rem at 62% 30%, #000 20%, transparent 74%);
    mask-image: radial-gradient(60rem 34rem at 62% 30%, #000 20%, transparent 74%);
}

/* هاله تنفسی پشت ستون کارت‌ها — تنها حرکت پس‌زمینه؛ فقط transform (ارزان و composited) */
.hero::after {
    content: "";
    position: absolute;
    width: 46rem;
    height: 46rem;
    top: -14rem;
    inset-inline-end: -12rem;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(45,212,191,.2), transparent 70%);
    pointer-events: none;
    animation: hero-breathe 16s ease-in-out infinite alternate;
}

@keyframes hero-breathe {
    from { transform: translate3d(0,0,0) scale(1); }
    to { transform: translate3d(-5rem,3rem,0) scale(1.15); }
}

.hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 2.5rem;
    align-items: center;
    padding: 4.2rem 0 5.2rem;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--teal-bright);
    background: rgba(45,212,191,.08);
    border: 1px solid rgba(45,212,191,.25);
    padding: .35rem .9rem;
    border-radius: 999px;
    margin-bottom: 1.1rem;
}

.pulse {
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: var(--teal-bright);
    position: relative;
}

.pulse::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid var(--teal-bright);
    animation: ping 1.6s ease-out infinite;
}

@keyframes ping {
    0% {
        transform: scale(.6);
        opacity: .9;
    }

    100% {
        transform: scale(1.8);
        opacity: 0;
    }
}

.hero h1 {
    position: relative;
    font-weight: 900;
    font-size: clamp(2rem,4.6vw,3.6rem);
    line-height: 1.4;
    margin-bottom: 1rem;
}

/* هاله نور پشت تیتر — نقطه کانونی صفحه. روی خود متنِ gradient-clip فیلتر نمی‌زنیم
   (در موتورهای قدیمی clip را می‌شکند)؛ نور جداگانه پشتش می‌نشیند. */
.hero h1::before {
    content: "";
    position: absolute;
    width: 24rem;
    height: 9rem;
    top: 18%;
    inset-inline-start: 6%;
    background: radial-gradient(closest-side, rgba(45,212,191,.22), transparent 70%);
    z-index: -1;
    pointer-events: none;
}

.hero h1 .grad {
    background: linear-gradient(90deg,var(--teal-bright),#8EF5E5);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero p.sub {
    color: #9FB0C7;
    max-width: 34rem;
    margin-bottom: 1.6rem;
}

.search {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 20px;
    padding: .5rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: var(--shadow-lg);
    max-width: 36rem;
}

.search .s-ico {
    flex: none;
    margin-inline-start: .7rem;
    color: #7C8CA5;
}

/* قاب گرادیانی دور اکشن شماره یک سایت. ترفند mask-composite در موتورهای قدیمی
   ناقص است و بدون آن، لایه گرادیان کل فرم را می‌پوشاند — پس فقط با @supports. */
@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
    .search::before {
        content: "";
        position: absolute;
        inset: -1px;
        border-radius: 21px;
        padding: 1.2px;
        background: linear-gradient(120deg, rgba(45,212,191,.65), rgba(255,255,255,.08) 45%, rgba(139,92,246,.45));
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        mask-composite: exclude;
        pointer-events: none;
    }
}

.search input {
    flex: 1;
    background: none;
    border: 0;
    color: #fff;
    font-family: var(--body);
    font-size: 1.08rem;
    padding: .7rem .9rem;
    min-width: 0;
}

.search .btn {
    padding: .7rem 1.5rem;
    font-size: 1rem;
}

.search input::placeholder {
    color: #7C8CA5;
}

.search input:focus {
    outline: none;
}

.search:focus-within {
    border-color: rgba(45,212,191,.55);
    box-shadow: 0 0 0 4px rgba(45,212,191,.14), var(--shadow-lg);
}

/* ردیف اعداد زنده هیرو — اثبات «رصدخانه» جلوی چشم. داخل هیرو literal-تیره است. */
.hero-stats {
    display: flex;
    gap: 1.8rem;
    margin-top: 1.7rem;
}

.hero-stats .hs b {
    display: block;
    font-family: var(--display);
    font-weight: 900;
    font-size: 1.65rem;
    color: var(--teal-bright);
    line-height: 1.4;
}

.hero-stats .hs span {
    font-size: .78rem;
    color: #8FA1BC;
}

.hero-stats .hs + .hs {
    border-inline-start: 1px solid rgba(255,255,255,.12);
    padding-inline-start: 1.8rem;
}

.quick {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1rem;
}

.quick a {
    font-size: .8rem;
    color: #B9C4D6;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    padding: .28rem .8rem;
    transition: .15s;
}

.quick a:hover {
    border-color: var(--teal-bright);
    color: var(--teal-bright);
}

/* دموی زنده — پشته کارت‌های شناور */
.demo {
    position: relative;
    min-height: 340px;
}

.demo .glow-chart {
    position: absolute;
    inset-inline: -8%;
    bottom: -12%;
    opacity: .5;
    filter: drop-shadow(0 0 24px rgba(45,212,191,.35));
}

.float-card {
    position: absolute;
    background: rgba(255,255,255,.96);
    /* کارت شناور روی هیرو در هر دو حالت سفید می‌ماند، پس متنش literal تیره است نه توکن */
    color: #0F172A;
    border-radius: var(--r);
    box-shadow: var(--shadow-lg);
    padding: 1rem 1.1rem;
    width: min(300px,86%);
    border: 1px solid rgba(255,255,255,.6);
}

.float-card.c1 {
    top: 6%;
    inset-inline-start: 4%;
    transform: rotate(2.5deg);
    z-index: 2;
    animation: float1 7s ease-in-out infinite;
}

.float-card.c2 {
    bottom: 4%;
    inset-inline-end: 2%;
    transform: rotate(-3deg);
    animation: float2 8s ease-in-out infinite;
}

@keyframes float1 {
    0%,100% {
        transform: rotate(2.5deg) translateY(0);
    }

    50% {
        transform: rotate(2.5deg) translateY(-10px);
    }
}

@keyframes float2 {
    0%,100% {
        transform: rotate(-3deg) translateY(0);
    }

    50% {
        transform: rotate(-3deg) translateY(-14px);
    }
}

.fc-head {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: .55rem;
}

.fc-name {
    font-weight: 800;
    font-size: .95rem;
}

.fc-user {
    color: #64748B;
    font-size: .78rem;
}

.fc-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .82rem;
    color: #64748B;
}

.fc-row b {
    color: #0F172A;
    font-size: 1rem;
}

/* فقط داخل کارت شناور سفید استفاده می‌شود — رنگ‌ها literal تا حالت تاریک خرابش نکند */
.badge-live {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .68rem;
    font-weight: 700;
    color: #0B7A70;
    background: #CCFBF1;
    border-radius: 999px;
    padding: .15rem .55rem;
    margin-inline-start: auto;
}

.up {
    color: var(--up);
    font-weight: 800;
}

.down {
    color: var(--down);
    font-weight: 800;
}

.spark {
    width: 100%;
    height: 34px;
    color: var(--chart-line);
}

/* ---------- آواتار ---------- */
.avatar {
    border-radius: 13px;
    background: linear-gradient(135deg,var(--teal),var(--navy-2));
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 800;
    flex-shrink: 0;
    overflow: hidden;
}

/* تصویر واقعی کانال — همان قاب حرف اول را پر می‌کند. cover چون تصویر پروفایل
   همیشه مربع نیست و کشیده‌شدنش بدتر از بریده‌شدنش است. */
img.avatar {
    object-fit: cover;
    background: var(--line);
}

.av-ring {
    padding: 2.5px;
    border-radius: 16px;
    background: linear-gradient(135deg,var(--teal-bright),var(--teal),var(--navy-2));
    flex-shrink: 0;
}

.av-44 {
    width: 44px;
    height: 44px;
    font-size: 1.15rem;
}

.av-48 {
    width: 48px;
    height: 48px;
    font-size: 1.2rem;
    border-radius: 13px;
}

.av-80 {
    width: 80px;
    height: 80px;
    font-size: 2rem;
    border-radius: 18px;
}

/* ---------- تیکر آمار زنده ---------- */
.ticker {
    background: var(--navy-deep);
    border-block: 1px solid rgba(255,255,255,.07);
    overflow: hidden;
    direction: ltr;
}

.ticker-track {
    display: flex;
    width: max-content;
    animation: tick 38s linear infinite;
}

.ticker:hover .ticker-track {
    animation-play-state: paused;
}

@keyframes tick {
    to {
        transform: translateX(-50%);
    }
}

.tick-item {
    direction: rtl;
    display: flex;
    align-items: center;
    gap: .5rem;
    color: #8FA1BC;
    font-size: .84rem;
    padding: .65rem 1.4rem;
    white-space: nowrap;
    border-inline-start: 1px solid rgba(255,255,255,.06);
}

.tick-item b {
    color: #fff;
    font-weight: 600;
}

/* لبه‌های تیکر محو می‌شوند تا آیتم‌ها ناگهانی بریده نشوند؛ hover مکث می‌کند
   تا کاربر بتواند بخواند و کلیک کند */
.ticker {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.ticker:hover .ticker-track {
    animation-play-state: paused;
}

/* ---------- بخش‌های روشن ---------- */
.section {
    padding: 4.2rem 0;
}

.sec-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.sec-title {
    font-weight: 900;
    font-size: clamp(1.25rem,2.4vw,1.7rem);
    display: flex;
    align-items: center;
    gap: .6rem;
}

/* گلیف ■ داخل span می‌ماند (برای صفحه‌خوان و کپی متن) ولی نمایشش یک کاشی گرهِ
   چرخیده است — همان موتیف girih هیرو، این بار در بخش‌های روشن */
.sec-title .tick-mark {
    font-size: 0;
    flex: none;
    width: .85em;
    height: .85em;
    border-radius: .26em;
    background: linear-gradient(135deg, var(--teal), var(--teal-bright));
    transform: rotate(45deg);
    position: relative;
    box-shadow: 0 4px 12px -3px rgba(13,148,136,.45);
}

.sec-title .tick-mark::after {
    content: "";
    position: absolute;
    inset: -.3em;
    border: 1px solid var(--teal-line);
    border-radius: .36em;
}

.sec-sub {
    color: var(--muted);
    font-size: .95rem;
    max-width: 34rem;
}

/* دسته‌ها — کاشی‌های تعاملی */
.cats {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: .9rem;
}

.cat {
    position: relative;
    /* رنگ مایه در استراحت هم دیده شود — موزاییک، نه دیوار سفید که فقط با hover جان بگیرد */
    background: linear-gradient(180deg, color-mix(in srgb, var(--hue) 4.5%, var(--card)), var(--card) 60%);
    border: 1px solid color-mix(in srgb, var(--hue) 14%, var(--line));
    border-radius: var(--r);
    padding: 1.1rem 1rem 1rem;
    overflow: hidden;
    box-shadow: var(--shadow-rest);
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
    /* رنگ مایه پیش‌فرض؛ کلاس th-* آن را عوض می‌کند (TileHue از روی slug) */
    --hue: #0D9488;
}

/* پالت کاشی‌ها — هشت مایه هم‌خانواده با برند. فقط --hue عوض می‌شود؛
   ترکیب با سطح‌ها از قواعد مشترک زیر می‌آید تا حالت تاریک خودکار درست باشد. */
.th-0 { --hue: #0D9488; }
.th-1 { --hue: #0EA5E9; }
.th-2 { --hue: #8B5CF6; }
.th-3 { --hue: #F59E0B; }
.th-4 { --hue: #10B981; }
.th-5 { --hue: #F43F5E; }
.th-6 { --hue: #6366F1; }
.th-7 { --hue: #D97706; }

.cat::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    opacity: .5;
    background: linear-gradient(180deg, var(--hue), color-mix(in srgb, var(--hue) 55%, var(--card)));
    transition: width .2s var(--ease), opacity .2s var(--ease);
}

.cat:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--hue) 45%, transparent);
    box-shadow: 0 16px 36px -16px color-mix(in srgb, var(--hue) 38%, transparent), var(--shadow-rest);
}

.cat:hover::before {
    width: 4px;
    opacity: 1;
}

.cat .ico {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    font-family: var(--emoji);
    background: color-mix(in srgb, var(--hue) 13%, var(--card));
    border: 1px solid color-mix(in srgb, var(--hue) 30%, transparent);
    margin-bottom: .6rem;
    transition: transform .2s;
}

.cat:hover .ico {
    transform: scale(1.07) rotate(-3deg);
}

.cat .name {
    font-weight: 700;
    font-size: .95rem;
}

.cat .cnt {
    color: var(--muted);
    font-size: .78rem;
}

.cat .cnt {
    color: color-mix(in srgb, var(--hue) 45%, var(--muted));
    font-weight: 700;
}

.cat .go {
    position: absolute;
    top: 1rem;
    inset-inline-end: 1rem;
    color: var(--hue);
    opacity: 0;
    transform: translateX(6px);
    transition: .2s;
}

.cat:hover .go {
    opacity: 1;
    transform: none;
}

/* برترین‌ها — تب + کارت‌های رتبه‌دار */
.tabs {
    display: inline-flex;
    background: var(--track);
    border-radius: 999px;
    padding: .28rem;
    gap: .2rem;
}

.tabs button {
    border: 0;
    background: none;
    font-family: var(--body);
    font-weight: 700;
    font-size: .86rem;
    color: var(--muted);
    padding: .42rem 1.1rem;
    border-radius: 999px;
    cursor: pointer;
    transition: .15s;
}

/* ورود نرم کارت‌ها بعد از فیلتر تب — به‌جای پرش خشک display:none */
.tcard.enter {
    animation: card-in .32s var(--ease) both;
}

@keyframes card-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.tabs button[aria-selected="true"] {
    background: var(--pill-active-bg);
    color: var(--pill-active-ink);
    box-shadow: var(--shadow);
}

.top-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1rem;
}

.tcard {
    position: relative;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 1.15rem;
    overflow: hidden;
    box-shadow: var(--shadow-rest);
    transition: transform .2s, box-shadow .2s, border-color .2s;
    display: block;
}

/* خط مویی گرادیان لبه بالا — سکوی سه‌تایی رنگ مدالش را می‌گیرد */
.tcard::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 8%, var(--teal-bright), transparent 92%);
    opacity: .5;
}

.tcard[data-rank="1"]::after { background: linear-gradient(90deg, transparent 8%, #F59E0B, transparent 92%); opacity: .8; }
.tcard[data-rank="2"]::after { background: linear-gradient(90deg, transparent 8%, #94A3B8, transparent 92%); opacity: .8; }
.tcard[data-rank="3"]::after { background: linear-gradient(90deg, transparent 8%, #B45309, transparent 92%); opacity: .7; }

.tcard:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--line-accent);
}

/* فشار لمسی — کارت زیر انگشت «جواب» می‌دهد */
.cat:active, .tcard:active, .row-card:active, .b:active {
    transform: translateY(-1px) scale(.99);
    transition-duration: .08s;
}

.tcard .rank {
    position: absolute;
    top: -1.4rem;
    inset-inline-end: .3rem;
    font-family: var(--display);
    font-weight: 900;
    font-size: 5.2rem;
    color: var(--ghost);
    z-index: 0;
    line-height: 1;
}

/* سکوی سه‌تایی — رتبه‌های طلا/نقره/برنز رنگ کم‌رمقی از مدالشان می‌گیرند */
.tcard[data-rank="1"] .rank {
    color: rgba(245,158,11,.30);
}

.tcard[data-rank="2"] .rank {
    color: rgba(100,116,139,.30);
}

.tcard[data-rank="3"] .rank {
    color: rgba(180,83,9,.26);
}

.tcard > * {
    position: relative;
    z-index: 1;
}

.tcard .head {
    display: flex;
    gap: .75rem;
    align-items: center;
    margin-bottom: .7rem;
}

.tname {
    font-weight: 800;
    font-size: .98rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tuser {
    color: var(--muted);
    font-size: .78rem;
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-bottom: .7rem;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: .32rem;
    font-size: .72rem;
    font-weight: 700;
    padding: .16rem .6rem;
    border-radius: 999px;
    background: var(--bg);
    border: 1px solid var(--line);
    color: var(--muted);
}

.pdot {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
}

.pdot-tg {
    background: #2AABEE;
}

.pdot-ei {
    background: #EF7F1A;
}

.chip-rank {
    background: var(--teal-soft);
    border-color: var(--teal-line);
    color: var(--teal-ink);
}

.chip-new {
    background: var(--amber-soft);
    border-color: var(--amber-line);
    color: var(--amber-ink);
}

.chip-warn {
    background: var(--amber-soft);
    border-color: var(--amber-line);
    color: var(--amber-ink);
}

.trow {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: .84rem;
    color: var(--muted);
    margin-bottom: .35rem;
}

.trow b {
    color: var(--ink);
    font-size: 1.05rem;
}

.eng {
    height: 5px;
    border-radius: 99px;
    background: var(--track);
    overflow: hidden;
    margin-top: .55rem;
}

.eng i {
    display: block;
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg,var(--teal),var(--teal-bright));
}

.eng-lbl {
    font-size: .7rem;
    color: var(--muted);
    margin-top: .25rem;
}

/* نوار تمام‌عرض پشت یک بخش — ریتم تیره/روشن صفحه را می‌سازد:
   هیرو (تیره) ← دسته‌ها (روشن) ← برترین‌ها (روشن) ← چرا (نوار رنگی) ← CTA (تیره).
   عرضش یک ویوپورت است و body با overflow-x:clip لبه اسکرول‌بار را می‌بُرد. */
.sec-band {
    position: relative;
    z-index: 0;
    padding-top: 3.4rem;
    padding-bottom: 3.4rem;
}

.sec-band::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline: calc(50% - 50vw);
    z-index: -1;
    background: var(--band-tint);
    border-top: 1px solid var(--band-line);
    border-bottom: 1px solid var(--band-line);
}

/* بنتو: چرا چنلیست */
.bento {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-auto-rows: 150px;
    gap: 1rem;
}

.b {
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    background: var(--card);
    padding: 1.3rem;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-rest);
    transition: transform .2s, box-shadow .2s;
}

.b:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

.b h3 {
    font-weight: 800;
    font-size: 1.02rem;
    margin-bottom: .3rem;
}

.b p {
    color: var(--muted);
    font-size: .85rem;
    max-width: 26rem;
}

.b-dark {
    grid-column: span 2;
    grid-row: span 2;
    background: radial-gradient(28rem 16rem at 85% 0%,rgba(45,212,191,.25),transparent 60%),var(--navy);
    border-color: var(--navy-2);
    color: #fff;
}

.b-dark p {
    color: #9FB0C7;
}

.b-dark .bignum {
    font-family: var(--display);
    font-weight: 900;
    font-size: 2.4rem;
    color: var(--teal-bright);
}

.b-dark .bchart {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    opacity: .9;
}

.b-amber {
    background: var(--amber-grad);
    border-color: var(--amber-line);
}

.b-tall {
    grid-row: span 2;
}

.warn-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: var(--danger-soft);
    color: var(--danger-ink);
    border: 1px solid var(--danger-line);
    font-size: .72rem;
    font-weight: 800;
    padding: .18rem .6rem;
    border-radius: 999px;
    margin-top: .5rem;
}

.mini-jump {
    width: 100%;
    height: 60px;
    color: var(--down);
    margin-top: .4rem;
}

/* CTA */
.cta {
    position: relative;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: linear-gradient(120deg,var(--navy-deep),var(--navy) 55%,#123),radial-gradient(30rem 14rem at 90% 10%,rgba(45,212,191,.4),transparent);
    color: #fff;
    padding: 2.6rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.cta .girih {
    position: absolute;
    inset: 0;
    opacity: .35;
    pointer-events: none;
}

.cta h2 {
    font-weight: 900;
    font-size: clamp(1.2rem,2.4vw,1.6rem);
    position: relative;
}

.cta p {
    color: #9FB0C7;
    position: relative;
    max-width: 30rem;
}

.cta .btn {
    position: relative;
}

/* ════════ صفحه کانال ════════ */
.p-hero {
    position: relative;
    background: radial-gradient(55rem 22rem at 85% -20%,rgba(13,148,136,.35),transparent 60%),linear-gradient(180deg,var(--navy-deep),var(--navy));
    color: #fff;
    padding: 1.6rem 0 6.5rem;
    overflow: hidden;
}

.p-hero .girih {
    position: absolute;
    inset: 0;
    opacity: .4;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(50rem 26rem at 70% 20%, #000 15%, transparent 72%);
    mask-image: radial-gradient(50rem 26rem at 70% 20%, #000 15%, transparent 72%);
}

/* جلد زنده: منحنی رشد خود کانال، محو در پایین هدر — داده واقعی به‌جای تزیین.
   نمودار زمانی همیشه چپ‌به‌راست است (همان قرارداد chart-wrap). */
.p-hero .p-cover {
    position: absolute;
    inset-inline: 0;
    bottom: -2px;
    height: 82%;
    width: 100%;
    direction: ltr;
    pointer-events: none;
    opacity: .5;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 45%);
    mask-image: linear-gradient(180deg, transparent, #000 45%);
}

.crumbs {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    font-size: .84rem;
    color: #8FA1BC;
}

.crumbs a:hover {
    color: #fff;
}

.crumbs .sep {
    opacity: .5;
}

.crumbs [aria-current] {
    color: #fff;
}

.p-card {
    position: relative;
    margin-top: -4rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    padding: 1.5rem;
    overflow: hidden;
    /* رنگ مایه دسته — کلاس th-* از TileHue می‌آید؛ بدون دسته فیروزه پیش‌فرض */
    --hue: #0D9488;
}

/* رگه رنگ دسته در لبه بالای کارت پروفایل + هاله خیلی ملایم همان رنگ در گوشه.
   ترکیب‌ها با color-mix از توکن سطح ساخته می‌شوند تا حالت تاریک خودکار درست باشد. */
.p-card::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--hue), color-mix(in srgb, var(--hue) 25%, transparent));
}

.p-card::after {
    content: "";
    position: absolute;
    width: 22rem;
    height: 12rem;
    top: -5rem;
    inset-inline-start: -5rem;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--hue) 9%, transparent), transparent 70%);
    pointer-events: none;
}

.p-card > * {
    position: relative;
    z-index: 1;
}

.p-card .av-ring {
    background: linear-gradient(135deg, color-mix(in srgb, var(--hue) 65%, #fff), var(--hue));
}

.p-top {
    display: flex;
    gap: 1.1rem;
    align-items: center;
    flex-wrap: wrap;
}

.p-hero .av-ring {
    padding: 3px;
    border-radius: 22px;
    box-shadow: 0 8px 24px -8px rgba(13,148,136,.6);
}

.p-card .avatar.av-80,
.p-card span.avatar.av-80 {
    width: 96px;
    height: 96px;
    font-size: 2.2rem;
}

.p-name {
    font-weight: 900;
    font-size: clamp(1.45rem, 2.4vw, 1.8rem);
}

/* عدد قهرمان: تعداد عضو جلوی چشم، کنار نام — الگوی صفحات پروفایل داده‌محور */
.p-metric {
    text-align: center;
    padding-inline: 1.4rem;
    border-inline-start: 1px solid var(--line);
}

.p-metric > b {
    display: block;
    font-family: var(--display);
    font-weight: 900;
    font-size: 2rem;
    line-height: 1.3;
    color: var(--ink);
}

.p-metric .pm-l {
    display: block;
    font-size: .78rem;
    color: var(--muted);
    margin-top: -.2rem;
}

.p-metric .pm-delta {
    display: inline-block;
    font-size: .75rem;
    font-weight: 800;
    border-radius: 999px;
    padding: .12rem .6rem;
    margin-top: .35rem;
}

.p-metric .pm-delta.d-up {
    background: var(--ok-soft);
    color: var(--ok-ink);
}

.p-metric .pm-delta.d-down {
    background: var(--danger-soft);
    color: var(--danger-ink);
}

.p-user {
    color: var(--muted);
    font-size: .9rem;
}

.p-actions {
    display: flex;
    gap: .6rem;
    margin-inline-start: auto;
    flex-wrap: wrap;
}

.p-bio {
    color: var(--muted);
    margin-top: 1rem;
    font-size: .95rem;
    max-width: 52rem;
}

.stats {
    display: grid;
    /* auto-fit: تعداد کاشی به قابلیت پلتفرم بستگی دارد (ایتا بازدید ندارد)
       و کاشی عضو هم به کارت پروفایل منتقل شده — ستون خالی نماند */
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: .9rem;
    margin-top: 1rem;
}

.stat {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 1rem;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-rest);
    transition: transform .2s, box-shadow .2s;
}

.stat:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

/* آیکن SVG داخل کاشی رنگی — جایگزین ایموجی که در ویندوز با گلیف تک‌رنگ Tahoma می‌شکست */
.stat .ic {
    position: absolute;
    inset-inline-end: .8rem;
    top: .8rem;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
}

.stat .ic svg {
    width: 19px;
    height: 19px;
}

.ic-teal {
    background: var(--teal-soft);
    color: var(--teal-ink);
}

.ic-sky {
    background: var(--sky-soft);
    color: var(--sky-ink);
}

.ic-violet {
    background: var(--violet-soft);
    color: var(--violet-ink);
}

.ic-amber {
    background: var(--amber-soft);
    color: var(--amber-ink);
}

.stat .v {
    font-family: var(--display);
    font-weight: 900;
    font-size: 1.5rem;
    /* کاشی آیکن در گوشه چپ کارت مطلق است؛ خود .v به‌خاطر کلاس num جهت LTR دارد
       (عدد از چپ شروع می‌شود، درست زیر آیکن) پس رزرو باید فیزیکی و چپ باشد،
       نه inline-end که در LTR به سمت راست حل می‌شود. */
    padding-left: 3.3rem;
}

.stat .l {
    color: var(--muted);
    font-size: .8rem;
}

.stat .d {
    font-size: .76rem;
    margin-top: .2rem;
    color: var(--muted);
}

.stat::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg,var(--teal),var(--teal-bright));
    opacity: 0;
    transition: .2s;
}

.stat:hover::after {
    opacity: 1;
}

.layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 1rem;
    margin-top: 1rem;
    align-items: start;
}

.panel {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 1.4rem;
    box-shadow: var(--shadow-rest);
}

.panel h2 {
    font-weight: 800;
    font-size: 1.05rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.panel h2 .sq {
    width: .55rem;
    height: .55rem;
    border-radius: 3px;
    background: var(--teal);
    flex-shrink: 0;
}

/* نمودار */
.range {
    display: inline-flex;
    background: var(--track);
    border-radius: 999px;
    padding: .24rem;
    gap: .15rem;
    margin-inline-start: auto;
}

.range a {
    font-size: .78rem;
    font-weight: 700;
    color: var(--muted);
    padding: .3rem .85rem;
    border-radius: 999px;
}

.range a[aria-current] {
    background: var(--pill-active-bg);
    color: var(--pill-active-ink);
}

.chart-wrap {
    direction: ltr;
}

.chart-svg {
    width: 100%;
    height: auto;
}

.chart-svg .dot {
    opacity: 0;
    transition: opacity .15s;
}

.chart-svg .hit:hover .dot, .chart-svg .hit:focus .dot {
    opacity: 1;
}

.chart-foot {
    display: flex;
    justify-content: space-between;
    color: var(--muted);
    font-size: .78rem;
    margin-top: .4rem;
}

.chart-empty {
    color: var(--muted);
    font-size: .9rem;
    text-align: center;
    padding: 2.4rem 0;
}

/* پست‌ها با نوار بازدید نسبی */
.post {
    padding: 1rem 0;
    border-bottom: 1px solid var(--line);
}

.post:last-child {
    border-bottom: 0;
    padding-bottom: .2rem;
}

.post p {
    font-size: .93rem;
    margin-bottom: .45rem;
}

.post .meta {
    display: flex;
    align-items: center;
    gap: .8rem;
    font-size: .78rem;
    color: var(--muted);
    flex-wrap: wrap;
}

.vbar {
    flex: 1;
    max-width: 180px;
    height: 5px;
    border-radius: 99px;
    background: var(--track);
    overflow: hidden;
}

.vbar i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg,var(--teal),var(--teal-bright));
    border-radius: 99px;
}

/* نوارها هنگام نمایان‌شدن پر می‌شوند — عدد «اتفاق می‌افتد» نه اینکه از قبل آنجا باشد.
   مقید به .js (افت امن: بدون جاوااسکریپت نوار از اول پر است). */
.js .reveal .vbar i {
    transform: scaleX(0);
    transform-origin: 0 50%;   /* ظرف .num جهت LTR دارد — از چپ پر می‌شود */
    transition: transform .8s var(--ease) .15s;
}

.js .reveal.in .vbar i {
    transform: scaleX(1);
}

.js .reveal .eng i {
    transform: scaleX(0);
    transform-origin: 100% 50%;   /* کارت RTL است — از راست پر می‌شود */
    transition: transform .8s var(--ease) .25s;
}

.js .reveal.in .eng i {
    transform: scaleX(1);
}

.vhot .vbar i {
    background: linear-gradient(90deg,var(--amber),#FBBF24);
}

.vhot .hot {
    color: var(--amber);
    font-weight: 800;
}

/* سایدبار */
.mirror {
    background: var(--mirror-grad);
    border: 1px solid var(--teal-line);
    border-radius: var(--r-lg);
    padding: 1.2rem;
    margin-bottom: 1rem;
}

.mirror h2 {
    font-weight: 800;
    font-size: 1rem;
    margin-bottom: .7rem;
}

.rel {
    display: flex;
    gap: .7rem;
    align-items: center;
    padding: .65rem 0;
    border-bottom: 1px solid var(--line);
}

.rel:last-of-type {
    border-bottom: 0;
}

.rel .avatar {
    width: 42px;
    height: 42px;
    font-size: 1.05rem;
    border-radius: 12px;
}

.rel .n {
    font-weight: 700;
    font-size: .9rem;
}

.rel .m {
    font-size: .76rem;
    color: var(--muted);
}

.rel .spark-s {
    width: 56px;
    height: 26px;
    color: var(--chart-line);
    margin-inline-start: auto;
    flex-shrink: 0;
}

.trust {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 1.2rem;
    margin-top: 1rem;
}

.trust p {
    font-size: .82rem;
    color: var(--muted);
}

.trust a {
    color: var(--teal);
    font-weight: 700;
}

/* اکشن‌بار چسبان موبایل */
.mob-bar {
    display: none;
    position: fixed;
    bottom: 0;
    inset-inline: 0;
    z-index: 60;
    background: var(--mob-bar-bg);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
    padding: .6rem 4% calc(.6rem + env(safe-area-inset-bottom));
    gap: .6rem;
}

.mob-bar .btn {
    flex: 1;
}

/* ════════ اجزای مشترک صفحات فهرست (دسته، هاب، جستجو) ════════ */

/* هدر تیره — همان امضای بصری صفحه کانال، برای صفحات فهرست */
.list-hero {
    position: relative;
    background: radial-gradient(55rem 22rem at 85% -20%,rgba(13,148,136,.35),transparent 60%),linear-gradient(180deg,var(--navy-deep),var(--navy));
    color: #fff;
    padding: 1.6rem 0 5rem;
    overflow: hidden;
}

.list-hero .girih {
    position: absolute;
    inset: 0;
    opacity: .45;
    pointer-events: none;
}

.list-hero .inner {
    position: relative;
}

.list-hero h1 {
    font-weight: 900;
    font-size: clamp(1.35rem,2.8vw,2rem);
    margin: .9rem 0 .5rem;
    display: flex;
    align-items: center;
    gap: .55rem;
    flex-wrap: wrap;
}

.list-hero .lead {
    color: #9FB0C7;
    font-size: .95rem;
    max-width: 46rem;
}

.hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: 1rem;
    align-items: center;
}

.hero-chips .label {
    color: #7C8CA5;
    font-size: .82rem;
}

/* نسخه چیپ روی زمینه تیره */
.chip-dark {
    background: rgba(255,255,255,.07);
    border-color: rgba(255,255,255,.16);
    color: #B9C4D6;
}

.chip-dark:hover {
    border-color: var(--teal-bright);
    color: var(--teal-bright);
}

.chip-dark[aria-current] {
    background: var(--teal);
    border-color: var(--teal);
    color: #fff;
}

/* نوار آمار شناور روی هدر — همان تکنیک کارت پروفایل صفحه کانال */
.stat-strip {
    position: relative;
    margin-top: -3.4rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    display: grid;
    grid-template-columns: repeat(4,1fr);
    overflow: hidden;
}

.strip-cell {
    padding: 1.1rem 1.2rem;
    border-inline-start: 1px solid var(--line);
}

.strip-cell:first-child {
    border-inline-start: 0;
}

.strip-v {
    font-family: var(--display);
    font-weight: 900;
    font-size: 1.4rem;
    line-height: 1.4;
}

.strip-l {
    color: var(--muted);
    font-size: .78rem;
}

/* سکوی برترین‌ها — سه کارت رتبه‌دار بالای فهرست */
.top-grid.cols-3 {
    grid-template-columns: repeat(3,1fr);
}

.page-head {
    padding: 2.2rem 0 1.4rem;
}

.page-head h1 {
    font-weight: 900;
    font-size: clamp(1.3rem,2.6vw,1.85rem);
    margin-bottom: .35rem;
}

.page-head .meta {
    color: var(--muted);
    font-size: .88rem;
}

.crumbs-light {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    font-size: .84rem;
    color: var(--muted);
    margin-bottom: 1rem;
}

.crumbs-light a:hover {
    color: var(--teal-dark);
}

.crumbs-light .sep {
    opacity: .5;
}

/* ردیف کانال در فهرست */
.list {
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.row-card {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .9rem 1.1rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    transition: transform .15s, box-shadow .15s, border-color .15s;
}

.row-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    border-color: var(--line-accent);
}

.row-pos {
    font-family: var(--display);
    font-weight: 900;
    font-size: 1.15rem;
    color: var(--pos);
    width: 2rem;
    text-align: center;
    flex-shrink: 0;
}

.row-body {
    flex: 1;
    min-width: 0;
}

.row-name {
    font-weight: 800;
    font-size: .96rem;
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}

.row-bio {
    /* عنصر inline از overflow:hidden پیروی نمی‌کند و متن بلند بیو کارت را پهن می‌کرد
       تا جایی که صفحه در موبایل سرریز افقی می‌گرفت. باید block باشد. */
    display: block;
    font-size: .8rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.row-stats {
    display: flex;
    gap: 1.4rem;
    flex-shrink: 0;
    text-align: center;
}

.row-stat b {
    display: block;
    font-weight: 800;
    font-size: .95rem;
    line-height: 1.5;
}

.row-stat span {
    font-size: .7rem;
    color: var(--muted);
}

.row-spark {
    width: 62px;
    height: 28px;
    color: var(--chart-line);
    flex-shrink: 0;
}

/* متن SEO */
.seotext {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 1.4rem 1.6rem;
    color: var(--text-2);
    line-height: 2.1;
    text-align: justify;
    font-size: .93rem;
}

.seotext p + p {
    margin-top: .9rem;
}

.seotext strong {
    color: var(--ink);
}

/* حالت خالی */
.empty {
    background: var(--card);
    border: 1px dashed var(--line);
    border-radius: var(--r-lg);
    padding: 2.6rem 1.4rem;
    text-align: center;
    color: var(--muted);
}

/* صفحه‌بندی */
.pager {
    display: flex;
    justify-content: center;
    gap: .35rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.pager a, .pager span {
    min-width: 2.4rem;
    text-align: center;
    padding: .4rem .8rem;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--card);
    font-size: .86rem;
    font-weight: 700;
    color: var(--muted);
}

.pager a:hover {
    border-color: var(--teal);
    color: var(--teal-ink);
}

.pager .is-current {
    background: var(--pill-active-bg);
    border-color: var(--pill-active-bg);
    color: var(--pill-active-ink);
}

.pager .is-disabled {
    opacity: .45;
}

/* فرم‌ها */
.form-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 1.6rem;
    box-shadow: var(--shadow);
}

.field {
    margin-bottom: 1.1rem;
}

.field label {
    display: block;
    font-weight: 700;
    font-size: .88rem;
    margin-bottom: .35rem;
}

.field .hint {
    color: var(--muted);
    font-size: .78rem;
    margin-top: .3rem;
}

.field .req {
    color: var(--down);
}

.input, .select, .textarea {
    width: 100%;
    font-family: var(--body);
    font-size: .95rem;
    padding: .6rem .9rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--card);
    color: var(--ink);
}

.input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(13,148,136,.12);
}

.textarea {
    resize: vertical;
    line-height: 1.9;
}

.err {
    color: var(--down);
    font-size: .8rem;
    margin-top: .3rem;
    display: block;
}

.notice {
    border-radius: 14px;
    padding: .8rem 1.1rem;
    font-size: .9rem;
    margin-bottom: 1.2rem;
}

.notice-ok {
    background: var(--ok-soft);
    border: 1px solid var(--ok-line);
    color: var(--ok-ink);
}

.notice-info {
    background: var(--track);
    border: 1px solid var(--line);
    color: var(--muted);
}

/* فوتر */
footer {
    background: var(--navy-deep);
    color: #8FA1BC;
    padding: 3.5rem 0 2rem;
    margin-top: 4rem;
    border-top: 1px solid rgba(255,255,255,.06);
}

.f-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 2rem;
    margin-bottom: 2.2rem;
}

footer h2 {
    font-size: .95rem;
    color: #fff;
    font-weight: 800;
    margin-bottom: .8rem;
}

footer ul {
    list-style: none;
}

footer li {
    margin-bottom: .45rem;
    font-size: .88rem;
}

footer a:hover {
    color: #fff;
}

.f-bottom {
    border-top: 1px solid rgba(255,255,255,.07);
    padding-top: 1.3rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .6rem;
    font-size: .82rem;
}

/* ---------- ریسپانسیو ---------- */
@media (max-width:992px) {
    .cats {
        grid-template-columns: repeat(3,1fr);
    }

    .top-grid {
        grid-template-columns: repeat(2,1fr);
    }

    .bento {
        grid-template-columns: repeat(2,1fr);
    }

    .b-dark {
        grid-column: span 2;
    }

    .f-grid {
        grid-template-columns: 1fr 1fr;
    }

    .layout {
        grid-template-columns: 1fr;
    }

    .stats {
        grid-template-columns: repeat(2,1fr);
    }

    .stat-strip {
        grid-template-columns: repeat(2,1fr);
    }

    .strip-cell:nth-child(3) {
        border-inline-start: 0;
    }

    .strip-cell:nth-child(n+3) {
        border-top: 1px solid var(--line);
    }

    .top-grid.cols-3 {
        grid-template-columns: repeat(2,1fr);
    }
}

@media (max-width:768px) {
    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        inset-inline: 0;
        background: var(--navy-deep);
        flex-direction: column;
        padding: 1rem 4%;
        gap: .9rem;
        border-bottom: 1px solid rgba(255,255,255,.08);
    }

    .nav-links.open {
        display: flex;
    }

    .nav-toggle {
        display: block;
    }

    .nav .btn-primary {
        display: none;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        padding: 2.6rem 0 3rem;
        gap: 2rem;
    }

    .demo {
        min-height: 300px;
    }

    .p-actions {
        display: none;
    }
    /* روی موبایل: اکشن‌بار چسبان جایگزین می‌شود */
    .mob-bar {
        display: flex;
    }

    .av-80 {
        width: 64px;
        height: 64px;
        font-size: 1.5rem;
    }

    /* بازنویسی بزرگ‌نمایی دسکتاپ (۹۶px) — در موبایل همان ۶۴ بماند */
    .p-card .avatar.av-80,
    .p-card span.avatar.av-80 {
        width: 64px;
        height: 64px;
        font-size: 1.5rem;
    }

    .p-name {
        font-size: 1.2rem;
    }

    /* عدد قهرمان: سطر کامل خودش، بدون خط جداکننده عمودی */
    .p-metric {
        flex-basis: 100%;
        border-inline-start: 0;
        border-top: 1px solid var(--line);
        padding: .7rem 0 0;
        text-align: start;
    }

    .hero-stats {
        gap: 1.1rem;
        flex-wrap: wrap;
    }

    .hero-stats .hs b {
        font-size: 1.35rem;
    }

    .hero-stats .hs + .hs {
        padding-inline-start: 1.1rem;
    }

    body.has-mob-bar {
        padding-bottom: 64px;
    }

    .row-stats .hide-sm {
        display: none;
    }

    .row-spark {
        display: none;
    }

    /* ورودی‌های فرم روی موبایل ۱۶px می‌شوند: iOS هر ورودی کوچک‌تر از ۱۶ را هنگام
       فوکوس زوم می‌کند و صفحه می‌پرد. پنل ادمین این را از قبل داشت؛ فرم‌های عمومی
       (تماس و ثبت کانال) نداشتند. */
    .input, .select, .textarea {
        font-size: 16px;
    }
}

@media (max-width:576px) {
    .cats {
        grid-template-columns: repeat(2,1fr);
    }

    /* کارت آماری در دو ستون باریک است؛ عدد بزرگ کنار رزرو آیکن جا نمی‌شود */
    .stat .v {
        font-size: 1.25rem;
        padding-left: 3rem;
    }

    .top-grid {
        grid-template-columns: 1fr;
    }

    .bento {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }

    .b-dark {
        grid-column: span 1;
        min-height: 260px;
    }

    .b-tall {
        grid-row: span 1;
    }

    .cta {
        padding: 1.6rem;
    }

    .row-stats {
        gap: .9rem;
    }

    .top-grid.cols-3 {
        grid-template-columns: 1fr;
    }
}

/* ════════ اجزای پالیش قالب ════════ */

/* ---------- کلید تاریک/روشن در هدر ---------- */
.theme-toggle {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.06);
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s, border-color .15s;
}

.theme-toggle:hover {
    background: rgba(255,255,255,.14);
    border-color: var(--teal-bright);
}

.theme-toggle svg {
    width: 18px;
    height: 18px;
}

.theme-toggle .i-sun {
    display: none;
}

[data-theme="dark"] .theme-toggle .i-sun {
    display: block;
}

[data-theme="dark"] .theme-toggle .i-moon {
    display: none;
}

/* ---------- ایموجی رنگی ----------
   ایموجی داخل متن فارسی به گلیف تک‌رنگ Tahoma می‌افتد؛ این کلاس فونت ایموجی رنگی را تحمیل می‌کند */
.emoji {
    font-family: var(--emoji);
    font-style: normal;
}

/* ---------- گرادیان‌های آواتار ----------
   از hash پایدار username انتخاب می‌شوند (AvatarPalette) — هر کانال همیشه همان رنگ */
.av-g1 {
    background: linear-gradient(135deg,#0EA5E9,#1E40AF);
}

.av-g2 {
    background: linear-gradient(135deg,#8B5CF6,#4C1D95);
}

.av-g3 {
    background: linear-gradient(135deg,#F59E0B,#B45309);
}

.av-g4 {
    background: linear-gradient(135deg,#F43F5E,#9F1239);
}

/* ---------- نوار کهربایی تازه‌واردها ---------- */
.band-amber {
    background: var(--amber-grad);
    border: 1px solid var(--amber-line);
    border-radius: var(--r-lg);
    padding: 1rem;
}

/* ---------- تگ‌ها ---------- */
.p-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    align-items: center;
    margin-top: .9rem;
    padding-top: .9rem;
    border-top: 1px solid var(--line);
}

.p-tags-label {
    color: var(--muted);
    font-size: .8rem;
}

.chip-tag {
    background: var(--sky-soft);
    border-color: transparent;
    color: var(--sky-ink);
}

.chip-tag:hover {
    border-color: currentColor;
    color: var(--sky-ink);
}

/* ---------- صفحه ۴۰۴ ---------- */
.nf-hero {
    padding: 2.6rem 0 3.2rem;
}

.nf-inner {
    text-align: center;
}

.nf-code {
    font-family: var(--display);
    font-weight: 900;
    font-size: clamp(4rem,14vw,7.5rem);
    line-height: 1;
    background: linear-gradient(180deg,var(--teal-bright),rgba(45,212,191,.15));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.nf-inner h1 {
    justify-content: center;
    margin-top: .2rem;
}

.nf-inner .lead {
    margin-inline: auto;
}

.nf-search {
    margin: 1.6rem auto 0;
}

/* شناسه کانال داخل متن فارسی — تک‌عرض و ایزوله تا جهت متن را به هم نریزد */
.cl-mono {
    font-family: Consolas, 'Courier New', monospace;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 8px;
    padding: .05rem .45rem;
    color: var(--teal-bright);
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
}

.nf-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center;
}

/* ---------- رنگ‌های نمودار (توکنی تا حالت تاریک درست باشد) ---------- */
.chart-svg .chart-grid {
    stroke: var(--chart-grid);
    stroke-width: 1;
}

/* خط اصلی: رنگ و درخشش توکنی — «رصدخانه» در تاریک باید واقعا بدرخشد */
.chart-svg .chart-line {
    stroke: var(--chart-line);
    filter: var(--chart-glow);
}

.chart-svg .dot,
.chart-svg .dot-fill {
    fill: var(--chart-line);
}

/* نبض زنده روی آخرین داده — نشان «همین حالا دارد رصد می‌شود».
   transform-box لازم است وگرنه scale حول مبدا SVG انجام می‌شود نه مرکز نقطه. */
.chart-svg .live-ring {
    fill: none;
    stroke: var(--chart-line);
    stroke-width: 2;
    transform-box: fill-box;
    transform-origin: center;
    animation: chart-ping 2.2s ease-out infinite;
}

@keyframes chart-ping {
    0% { transform: scale(.5); opacity: .9; }
    70%, 100% { transform: scale(2.6); opacity: 0; }
}

.chart-svg .chart-lbl {
    fill: var(--muted);
    font-size: 11px;
}

.chart-svg .dot {
    stroke: var(--card);
}

/* ---------- حرکت کمتر ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    .float-card,
    .pulse::after,
    .ticker-track,
    .hero::after,
    .chart-svg .live-ring,
    .tcard.enter {
        animation: none !important;
    }

    .cat, .tcard, .b, .cat .ico, .stat, .row-card {
        transition: none;
    }

    /* نوارها بدون انیمیشن از اول پر باشند */
    .js .reveal .vbar i,
    .js .reveal .eng i {
        transform: scaleX(1);
        transition: none;
    }
}