` هستند.
⚠️ دامِ AS — این قاعدهها **پس از** `.feat .fi{...}` نوشته شدهاند.
اگر بالاتر بودند، `width:48px` و `font-size:22px`ِ خطِ ۱۰۲ روی
آنها میچربید (همویژگی ⇒ دیرتر میبرد) و هیچ خطایی هم دیده
نمیشد. اندازه را در همان جعبهی ۴۸ نگذاشتم چون تصویرِ معنایی
در ۲۴ پیکسل ناخوانا میشود.
⚠️ دامِ AH — `font-size:22px` از دورانِ ایموجی مانده و روی `برچسبمقدار
`.
پنج جا در چهار صفحه (calendar ۱۶۴ و ۲۵۵، dashboard ۲۱۲، referral، strategies)
این شکل را میسازند، ولی قاعدهها فقط برای `.kpi-t`/`.kpi-v` نوشته شده بود.
نتیجه: `small` و `b` هر دو inline میماندند و **صفر پیکسل** فاصله
میگرفتند، یعنی کاربر «تعداد معامله۲۲» سرهم میدید. اندازهگیریشده:
`gapX=0` و هر دو روی یک خط، در هر چهار کارت.
درمان را اینجا و یکبار میگذارم تا هر پنج جا و صفحههای آینده با هم
حل شوند؛ سراغ تکتک قالبها رفتن هم پرخطاست و هم تکرارشدنی. */
.kpi>small{display:block;font-size:12.5px;color:var(--tx-3);margin-bottom:9px}
.kpi>b{display:block;font-size:25px;font-weight:900;line-height:1.2}
.kpi>b.up{color:var(--up)} .kpi>b.down{color:var(--down)}
.kpi::after{content:'';position:absolute;inset-block-start:0;inset-inline-start:0;width:3px;height:100%;background:var(--brand-1);opacity:.7}
.kpi.up::after{background:var(--up)} .kpi.down::after{background:var(--down)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid-2-1{display:grid;grid-template-columns:2fr 1fr;gap:16px}
@media(max-width:980px){.grid-2,.grid-3,.grid-2-1{grid-template-columns:1fr}}
/* ============ صفحهبندی ============ */
.pager{display:flex;align-items:center;gap:6px;margin-top:16px;flex-wrap:wrap}
/* ⚠️ درسِ ۲۴۱ — ارقامِ همعرض برای شمارهی صفحهها.
`vnumfont` گرفت: این دکمهها `font-variant-numeric:normal` داشتند و
«۱» و «۲» پهنای متفاوت میگرفتند، پس با هر تغییرِ صفحه دکمهها کمی
میلرزیدند. چرا دیرتر گرفته شد؟ چون تا جلسهها به بیش از یک صفحه
نرسیده بودند، صفحهبند رندر نمیشد و ادعا به آن نمیرسید — پوششِ
سنجهای که روی دادهی زنده میگردد، خودش زنده است. */
.pg{min-width:34px;height:34px;padding:0 9px;border-radius:var(--r-md);border:1px solid var(--ln-1);
background:var(--bg-2);color:var(--tx-2);cursor:pointer;font-size:13px;font-weight:600;
font-variant-numeric:tabular-nums lining-nums;font-feature-settings:'tnum' 1}
.pg:hover:not(:disabled){border-color:var(--brand-1);color:var(--brand-1)}
.pg.act{background:var(--brand-1);color:#fff;border-color:var(--brand-1)}
.pg:disabled{opacity:.4;cursor:not-allowed}
.pg-info{margin-inline-start:auto;color:var(--tx-4);font-size:12.5px}
/* ============ ابزارکها ============ */
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.toolbar .grow{flex:1}
.chip{padding:5px 12px;border-radius:var(--r-full);border:1px solid var(--ln-1);background:var(--bg-2);
font-size:12.5px;color:var(--tx-2);cursor:pointer;transition:all var(--t-fast)}
.chip:hover{border-color:var(--ln-2)}
.chip.act{background:var(--brand-1);color:#fff;border-color:var(--brand-1)}
/* ============ توست/مودال تکمیلی ============ */
.t-ic{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:12px;
font-weight:800;flex-shrink:0;background:rgba(255,255,255,.18)}
.t-msg{flex:1;line-height:1.8}
.t-x{background:none;border:0;color:inherit;opacity:.7;cursor:pointer;font-size:17px;line-height:1}
.t-x:hover{opacity:1}
.cm-msg{line-height:2.1;color:var(--tx-2);font-size:14.5px}
.modal-x{background:none;border:0;color:var(--tx-3);font-size:23px;cursor:pointer;line-height:1}
.modal-x:hover{color:var(--tx-1)}
/* ============ کمکی ============ */
.up{color:var(--up)!important} .down{color:var(--down)!important} .flat{color:var(--tx-3)!important}
.muted{color:var(--tx-3)}
.center{text-align:center}
.nowrap{white-space:nowrap}
.hidden,[hidden]{display:none!important}
.mt-0{margin-top:0} .mb-0{margin-bottom:0}
.sp-8{height:8px} .sp-16{height:16px} .sp-24{height:24px} .sp-40{height:40px}
/* --- اصلاحات تکمیلی --- */
.plan .p-price small{margin-inline-start:7px;display:inline-block}
.plan{position:relative;display:flex;flex-direction:column}
.lnk{color:var(--brand-1);cursor:pointer;font-weight:600;text-decoration:none}
.lnk:hover{text-decoration:underline}
/* ═══ بندِ ۳ — آیکونِ متناسب داخلِ ۸ باکسِ شاخصِ داشبورد ═══
چرا `position:absolute` و نه یک ردیفِ flex در بالای کارت؟
دو دلیلِ اندازهگیریشده:
۱) مقدارِ کارت (`.kpi-v`) ۲۵px و درشت است؛ اگر آیکون همردیفِ عنوان
در جریانِ عادی بنشیند، ارتفاعِ کارت ۳۸px بلندتر میشود و چون
`.kpis` از `flex-wrap` استفاده میکند، ردیفها ناهمقد میشوند.
۲) عنوانها طولِ متفاوت دارند («انتظار ریاضی» تا «طولانیترین زنجیره باخت»)؛
در جریانِ عادی آیکون هر کارت جای دیگری میافتاد. absolute همه را
روی یک مختصاتِ ثابت قفل میکند.
`inset-inline-end` است نه `right` تا در LTR هم درست بماند. */
/* ⚠️ درسِ ۲۴۰ — عددِ این فاصله را با خطکش تعیین کن، نه با احتیاطِ کلی.
۶۸px بودم و آیکن فقط ۵۶px میخواهد (عرضِ ۴۲ + فاصلهی ۱۴ از لبه)؛
آن ۱۲px هرز، عرضِ سطرِ عنوان را میخورد و «سود/زیان خالص» — که با
نشانِ روند همسطر است — دقیقاً ۵px کم میآورد و «سود/زیان خال..»
دیده میشد. هیچیک از ۶۵ سنجه این را نگرفت چون همهشان «یکخطی
ماندن» و «همقدی» را میسنجیدند، و متنِ بریده هر دو شرط را برمیآورد.
۶۰px میگذارم: ۴px فاصلهی امن تا آیکن، و ۸px بازگشته به عنوان. */
/* ۱۴۰۵/۰۶/۱۶ — تنها کارتی که آیکون دارد جای آیکون را نگه میدارد.
در استراتژیها و تقویم کارتها بیآیکوناند و این ۶۰px لبهی چپِ
هر کارت را خالی میگذاشت؛ کارفرما همین را «فاصلهی نامنظم» دید. */
.kpi:has(>.kpi-ic){padding-inline-end:60px}
.kpi-ic{position:absolute;top:14px;inset-inline-end:14px;pointer-events:none}
.kpi-ic .ic-box{width:42px;height:42px;border-radius:12px}
.kpi-ic .ic-box svg.ic{width:21px;height:21px}
/* رنگِ آیکون از وضعیتِ کارت پیروی میکند تا سود/زیان با یک نگاه خوانده شود */
.kpi.up .kpi-ic .ic-box{color:var(--up);
background:color-mix(in srgb,var(--up) 14%,transparent);
border-color:color-mix(in srgb,var(--up) 30%,transparent)}
.kpi.down .kpi-ic .ic-box{color:var(--down);
background:color-mix(in srgb,var(--down) 14%,transparent);
border-color:color-mix(in srgb,var(--down) 30%,transparent)}
@media (max-width:560px){
.kpi:has(>.kpi-ic){padding-inline-end:60px}
.kpi-ic .ic-box{width:36px;height:36px}
.kpi-ic .ic-box svg.ic{width:18px;height:18px}
}
/* ══════════ خواستهی ۱۳ — فشردگیِ کارت تا «۴+۴» بیبریدگی برسد ══════════
عکسِ کارفرما (پهنای ۱۰۲۴) شبکه را دوستونی نشان داد چون نقطهشکن
روی ۱۱۰۰px بود. با آوردنش به ۱۰۷۹، شبکه از ۱۰۸۰px چهارستونی شد —
ولی ستون ۱۸۵px میشود و عددِ «+$۲۸,۲۳۴» (پنج رقم + جداکننده +
نشانه + دلار) در آن جا نمیشود.
⚠️ این قاعدهها **باید اینجا باشند، نه بالاتر.** نخست کنارِ
`.kpis` نوشتمشان و بیاثر ماندند: `.kpi-v{font-size:25px}` و
`.kpi{padding-inline-end:60px}` پایینترند و در CSS با ویژگیِ
یکسان، قاعدهی پسین میبرد (media query ویژگی را بالا نمیبرد).
سنجه گرفتش — عنصر همچنان ۲۵px و ۶۰px داشت، هرچند من ۱۸px و ۳۴px
نوشته بودم. خواهرِ درسِ ۲۴۵، با سرچشمهی «ترتیبِ نوشتار» نه
«محلِ نوشتار».
دو پله، هر دو با اندازهگیری:
۱۲۴۱..۱۰۸۰ ⇒ کارتِ فشرده (ستونِ ۱۸۵..۲۲۵px)
۱۱۲۰..۱۰۸۰ ⇒ یک پله تنگتر، چون ستونِ ۱۸۵px حتی با پلهی یکم
عددِ پنجرقمیِ علامتدار را میبُرید. */
@media(max-width:1240px) and (min-width:1080px){
.kpi{padding:14px}
.kpi:has(>.kpi-ic){padding-inline-end:44px}
.kpi-t{font-size:11.6px;margin-bottom:7px}
.kpi-v{font-size:20px}
.kpi-ic{top:11px;inset-inline-end:11px}
.kpi-ic .ic-box{width:34px;height:34px;border-radius:10px}
.kpi-ic .ic-box svg.ic{width:17px;height:17px}
}
@media(max-width:1120px) and (min-width:1080px){
.kpi{padding:12px}
.kpi:has(>.kpi-ic){padding-inline-end:34px}
.kpi-t{font-size:10.8px}
.kpi-v{font-size:17px}
.kpi-ic{top:9px;inset-inline-end:9px}
.kpi-ic .ic-box{width:28px;height:28px;border-radius:9px}
.kpi-ic .ic-box svg.ic{width:15px;height:15px}
}
/* بندِ ۳ (پیوست) — عنوانِ کارت باید **همیشه یک خط** بماند.
سنجهی vkpiic اندازه گرفت: با افزودنِ آیکون، عنوانِ دو کارتِ نخست
(که `trendTag` هم دارند) میشکست — ارتفاعِ عنوان ۴۶px و ۳۱px شد در
برابر ۲۳px بقیه — و چون `.kpis` از flex-wrap استفاده میکند، ردیفِ
اول ۱۵۱px و ردیفِ دوم ۱۲۸px درآمد. راهِ درست «رزروِ دو خط» نیست
(فضای هرز)، بلکه جلوگیری از شکستن است: عنوان در `.kpi-tl` بسته شد
تا ellipsis بگیرد و نشانِ روند هرگز به خطِ دوم نرود. */
/* ⚠️ درسِ ۲۴۰ — `nowrap` مسئله را از «شکستنِ سطر» به «بریدنِ متن» جابهجا
کرد، نه حل. اندازهگیری در ۱۴۴۰/۱۴۶۰/۱۵۰۰/۱۶۰۰/۱۹۲۰ نشان داد در
عرضهای پهنتر کارتها **باریکتر** میشوند (چون `flex:1 1 190px` است و
ردیف کارتهای بیشتری میگیرد)، پس سطرِ ۱۱۱پیکسلی باید ۸۰px عنوان و
۶۰px نشان را با هم جا کند — نشدنی. اجازه میدهم نشان به خطِ دوم برود:
عنوان کامل خوانده میشود و همقدیِ کارتها با `min-height` و کشیدگیِ
flex حفظ میشود. خوانایی بر فشردگی مقدم است. */
/* ⚠️ درسِ ۲۴۰ (پایانی) — ۳۸px = رزروِ دو خط، آگاهانه.
`.kpis` یک flex-wrap است و در flex-wrap کشیدگیِ stretch تنها درونِ
هر خط عمل میکند؛ پس عنوانِ دوخطی، ردیفِ خودش را ۱۴px بلندتر میکرد
([۱۲۸, ۱۴۲]) و سنجهی «ارتفاعِ همهی کارتها یکسان» گرفتش. با رزروِ
ثابتِ دو خط، ارتفاعِ سطرِ عنوان از طولِ متن مستقل میشود و همهی
کارتها — در هر ردیف و هر عرضِ دید — همقد میمانند. */
.kpi-t{flex-wrap:wrap;overflow:hidden;min-height:38px;row-gap:2px;
align-content:flex-start}
.kpi-tl{overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1 1 100%;
/* درسِ ۲۴۰ — عنوانِ بلند در کارتِ باریک باید بشکند، نه بریده شود؛
همقدیِ کارتها را `min-height` و stretch نگه میدارد و سنجهی
«ارتفاعِ همهی کارتها یکسان» نگهبانِ همین گمان است. */
overflow-wrap:anywhere}
.kpi-t > span:not(.kpi-tl){flex:none}
/* بندِ ۲۴ — آیکونِ درونِ نشانِ توست و نشانهای شبکهی اجتماعی */
.t-ic svg.ic{width:13px;height:13px;vertical-align:0}
.soc svg.ic{width:18px;height:18px;vertical-align:0}
/* دکمهی بستنِ توست: نویسهی «×» بود، حالا SVG */
.t-x svg.ic{width:13px;height:13px;vertical-align:0}
/* بندِ ۳ — نشانِ روند در عنوانِ کارت. `nowrap` و `line-height:1` واجباند:
بدونشان این span درونِ عنوان میشکست و ارتفاعِ عنوان از ۲۳ به ۳۱px
میرفت، و چون `.kpis` از flex-wrap استفاده میکند، ردیفِ اولِ کارتها
۸px بلندتر از ردیفِ دوم درمیآمد. */
.kpi-tr{font-size:11.5px;font-weight:700;white-space:nowrap;line-height:1;
display:inline-flex;align-items:center;gap:3px;flex:none}
.kpi-tr svg.ic{vertical-align:0}
/* ══════════ خواستهی ۱۸ — نوارِ بنرِ سربرگِ صفحههای عمومی ══════════
کلاسِ نو است (شمارشِ ۰ پیش از نوشتن)، پس چیزی را بازنویسی نمیکند.
`aspect-ratio` بهجای `height` تا در هر پهنایی نسبت حفظ شود و
جهشِ چیدمان (CLS) پیش نیاید؛ `width`/`height` روی خودِ `` هیچ اثری نداشت و
تصویر با ابعادِ خامِ ۱۶۰۰ پیکسل بیرون میزد. همان دامِ «نامِ
ساختگی خاموش است».
`aspect-ratio` را از ابعادِ توصیهشدهی همین رسانه میگیرم تا حتی
پیش از بارگذاریِ تصویر، جای آن رزرو شود و صفحه نپرد (CLS صفر). */
.pg-hero{margin:26px auto 0;max-width:1000px;border-radius:var(--r-lg);
overflow:hidden;border:1px solid var(--ln-1);background:var(--bg-2);
aspect-ratio:1600/700}
.pg-hero img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:720px){.pg-hero{margin-top:18px;border-radius:var(--r-md)}}
/* ══════════ خواستهی ۲ + ۱۸ — نشانِ تصویریِ بخشهای صفحهی امکانات ══════════
چهار بخشِ اصلی (بازپخش، ژورنال، پراپفرم، مربیِ هوشمند) نشانِ
تصویریِ خودشان را میگیرند. این «آیکونِ صفحهای» است — تصویرِ
معناییِ بزرگ — نه آیکونِ رابط؛ پس تصویر بودنش درست است و از
داشبورد هم تغییرپذیر میماند.
⚠️ کلاسِ `.sec-ic` پیش از این ۰ تعریف داشت (سنجیدم). `aspect-ratio`
مربع است تا پیش از بارگذاری هم جای تصویر رزرو شود. */
.sec-ic{width:56px;height:56px;border-radius:15px;padding:8px;margin-bottom:13px;
background:color-mix(in srgb,var(--brand-1) 13%,transparent);aspect-ratio:1}
.sec-ic img{width:100%;height:100%;object-fit:contain;display:block}