@font-face{font-family:'Vazirmatn';font-weight:400;font-display:swap;src:url('vendor/fonts/Vazirmatn-Regular.woff2') format('woff2')}
@font-face{font-family:'Vazirmatn';font-weight:500;font-display:swap;src:url('vendor/fonts/Vazirmatn-Medium.woff2') format('woff2')}
@font-face{font-family:'Vazirmatn';font-weight:700;font-display:swap;src:url('vendor/fonts/Vazirmatn-Bold.woff2') format('woff2')}
:root{
 --f7-font-family:'Vazirmatn',-apple-system,'SF Pro Text',Tahoma,sans-serif;
 --f7-theme-color:#0A63FF;
 --bg:#F2F2F7;--card:#FFF;--ink:#0B0B0F;--mu:#8E8E93;
 --ln:rgba(60,60,67,.12);--dp:#0B1B4A;
 /* فضای امن بالای صفحه — پیش‌فرض همون env مرورگر؛ در PWA نصب‌شدهٔ iOS که env رو
    اشتباه صفر برمی‌گردونه، `_slResolveSafeTop()` مقدار واقعی رو جایگزین می‌کنه
    (بخش ۹۹.۱۲). هر قاعدهٔ فاصله‌گذاری بالای صفحه باید از این متغیر بخونه، نه env خام. */
 --sl-safe-top:env(safe-area-inset-top,0px);

 /* ═══ زبان طراحی مشترک (بخش ۱۰۶) ═══════════════════════════════════════
    ⚠️ قانون: هر UI تازه‌ای که به مینی‌اپ اضافه می‌شود باید از این توکن‌ها و از
    کامپوننت‌های `.sl-btn*`/`.sl-card`/`.sl-chip` استفاده کند — نه هگز خام و نه
    شعاع/سایه/فونت دلخواه. گارد ساختاری: tests/test_miniapp_design_system.py
    (تعداد هگز خام فایل نباید بیشتر شود). */

 /* شعاع — پله‌های ثابت، به‌جای ۲۵ مقدار پراکندهٔ قبلی */
 --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:20px; --r-xl:26px; --r-pill:999px;

 /* فاصله — مقیاس ۴ پایه */
 --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px;

 /* تایپوگرافی */
 --t-cap:11px; --t-sm:12.5px; --t-base:14px; --t-md:15.5px;
 --t-lg:18px; --t-xl:22px; --t-2xl:28px;

 /* ارتفاع/سایه */
 --e-1:0 1px 2px rgba(0,0,0,.05);
 --e-2:0 1px 3px rgba(0,0,0,.05),0 6px 20px rgba(0,0,0,.05);
 --e-3:0 8px 30px rgba(0,0,0,.10);

 /* رنگ معنایی — تنها منبع رنگ لهجه/وضعیت */
 --acc:#0A63FF; --acc-ink:#FFF; --acc-soft:rgba(10,99,255,.10);
 --ok:#30D158;  --ok-soft:rgba(48,209,88,.12);
 --warn:#FF9F0A;--warn-soft:rgba(255,159,10,.14);
 --err:#FF3B30; --err-soft:rgba(255,59,48,.12);
 --neutral-soft:rgba(120,120,128,.12);

 /* حرکت — یک منحنی و یک مدت برای همهٔ فیدبک‌های لمسی */
 --mo-fast:.14s; --mo-base:.22s; --mo-ease:cubic-bezier(.32,.72,0,1);

 /* سلامت باتری (لیست قیمت آیفون کارکرده) — پله‌های تعریف‌شدهٔ مالک پروژه.
    ⚠️ چرا از --ok/--warn/--err استفاده نشد: آن‌ها رنگ‌های اشباع iOS‌اند و
    روی زمینهٔ سفید برای متن ریزِ بولد کنتراست کافی ندارند (--ok روی سفید
    ≈۱.۹). این‌ها نسخهٔ تیره‌ترشان برای متن‌اند. */
 --batt-ok:#15803D; --batt-mid:#1D4ED8; --batt-low:#B45309; --batt-bad:#B91C1C;

 /* توکن‌های قدیمی حالا فقط نام مستعارِ توکن‌های معنایی بالا هستند — پس صدها
    استفادهٔ موجود (`var(--br)` و…) بدون هیچ تغییر مارک‌آپی، خودکار هم یک‌دست
    می‌شوند و هم در حالت شب درست می‌شوند (قبلاً `--br` هیچ‌وقت برای دارک
    بازتعریف نمی‌شد و آبی روشن روی زمینهٔ مشکی می‌ماند). */
 --br:var(--acc); --lv:var(--ok); --pt:var(--warn);
 --rd:var(--r-lg); --sh:var(--e-2);

 /* ═══ اتصال توکن‌های ما به متغیرهای خودِ Framework7 9 ═══════════════════
    v9 ظاهر iOS 26 آورده (از جمله «شیشهٔ» نیمه‌شفاف پشت لینک‌های navbar —
    `.navbar-inner > .left/.right` حالا خودشان یک pill با backdrop-blur
    می‌گیرند). به‌جای جنگیدن با آن، متغیرهای خودش را به توکن‌های ما وصل
    می‌کنیم تا هر کامپوننت بومی F7 (دیالوگ، شیت، دکمه، لینک نوار) خودکار با
    زبان طراحی اپ یکی شود — بدون نوشتن حتی یک override دستی.
    ⚠️ `--f7-navbar-link-color` عمداً این‌جا نیست: تم iOS خودش آن را از
    `--f7-bars-text-color` می‌گیرد (اندازه‌گیری‌شده: مقدار مؤثر `#000` می‌ماند
    حتی با ست‌کردن `--f7-bars-link-color`)، و رنگ جوهری همان چیزی است که طرح
    iOS 26 برای چیپ شیشه‌ای «بستن/بازگشت» می‌خواهد — پس با آن نمی‌جنگیم. */
 --f7-button-border-radius:var(--r-pill);
 --f7-button-height:44px;
 --f7-button-font-size:var(--t-base);
 --f7-button-font-weight:700;
 --f7-button-text-color:var(--acc);
 --f7-button-fill-bg-color:var(--acc);
 --f7-button-fill-text-color:var(--acc-ink);
 --f7-button-tonal-bg-color:var(--acc-soft);
 --f7-button-tonal-text-color:var(--acc);
 --f7-dialog-border-radius:var(--r-lg);
 --f7-sheet-border-radius:var(--r-xl);
 --f7-popup-border-radius:var(--r-xl);
 --f7-preloader-color:var(--acc);
}
html.dark,:root.dark{
 --bg:#000;--card:#1C1C1E;--ink:#F5F5F7;--mu:#98989E;
 --ln:rgba(84,84,88,.36);--sh:0 1px 3px rgba(0,0,0,.2),0 6px 20px rgba(0,0,0,.25);
 --e-1:0 1px 2px rgba(0,0,0,.3);
 --e-2:0 1px 3px rgba(0,0,0,.2),0 6px 20px rgba(0,0,0,.25);
 --e-3:0 8px 30px rgba(0,0,0,.45);
 --acc:#2F80FF; --acc-soft:rgba(47,128,255,.18);
 --ok:#32D74B;  --ok-soft:rgba(50,215,75,.18);
 --warn:#FFB340;--warn-soft:rgba(255,179,64,.18);
 --err:#FF6961; --err-soft:rgba(255,105,97,.18);
 --neutral-soft:rgba(142,142,147,.20);
 --batt-ok:#4ADE80; --batt-mid:#60A5FA; --batt-low:#FBBF24; --batt-bad:#F87171;
}

/* ═══ کامپوننت‌های مشترک ═════════════════════════════════════════════════
   ⚠️ `width:auto` روی هر سه واریانت اجباری است — Framework7 (هم v8 هم v9.1.2،
   تأیید‌شده روی خودِ فایل vendor) قاعدهٔ سراسری `button{width:100%}` دارد و
   بدون این، هر دکمه داخل یک ردیف فلکس، خواهرهایش را تا صفر فشرده می‌کند
   (بخش ۶۹.۳). */
.sl-btn{
 display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
 width:auto;box-sizing:border-box;
 min-height:44px;padding:0 var(--s-5);
 border:0;border-radius:var(--r-pill);
 font-family:var(--f7-font-family);font-size:var(--t-base);font-weight:700;
 line-height:1;text-decoration:none;cursor:pointer;
 transition:transform var(--mo-fast) var(--mo-ease),
            opacity var(--mo-fast) var(--mo-ease),
            background var(--mo-fast) var(--mo-ease);
}
.sl-btn:active{transform:scale(.96)}
.sl-btn[disabled],.sl-btn.is-disabled{opacity:.45;pointer-events:none}
.sl-btn-primary{background:var(--acc);color:var(--acc-ink)}
.sl-btn-tonal{background:var(--acc-soft);color:var(--acc)}
.sl-btn-ghost{background:transparent;color:var(--acc)}
.sl-btn-neutral{background:var(--neutral-soft);color:var(--ink)}
.sl-btn-danger{background:var(--err-soft);color:var(--err)}
.sl-btn-block{display:flex;width:100%}
.sl-btn-sm{min-height:36px;padding:0 var(--s-4);font-size:var(--t-sm)}
.sl-btn-lg{min-height:52px;padding:0 var(--s-6);font-size:var(--t-md)}
.sl-btn svg{width:18px;height:18px;flex:none}

.sl-card{
 background:var(--card);border-radius:var(--r-lg);box-shadow:var(--e-2);
 box-sizing:border-box;overflow:hidden;
}
.sl-chip{
 display:inline-flex;align-items:center;gap:var(--s-1);
 min-height:34px;padding:0 var(--s-4);border-radius:var(--r-pill);
 background:var(--neutral-soft);color:var(--ink);
 font-size:var(--t-sm);font-weight:700;white-space:nowrap;
 transition:background var(--mo-fast) var(--mo-ease),
            transform var(--mo-fast) var(--mo-ease);
}
.sl-chip:active{transform:scale(.96)}
.sl-chip.is-active{background:var(--acc);color:var(--acc-ink)}
*{-webkit-tap-highlight-color:transparent}
.page-content{background:var(--bg)}
.tabbar-label{font-family:var(--f7-font-family);font-size:10.5px;font-weight:600;margin-top:3px;letter-spacing:0}
.tabbar .icon svg{width:24px;height:24px;display:block}
.tabbar .icon{position:relative}
.tabbar .tab-link{padding:6px 2px 3px;min-height:52px;transition:opacity .15s ease}
.tabbar .tab-link:not(.tab-link-active){opacity:.62}
.tabbar .tab-link.tab-link-active{opacity:1}
.sl-tab-badge{position:absolute;top:-2px;left:-3px;width:9px;height:9px;border-radius:50%;
 background:#FF453A;border:2px solid var(--bg,#F2F2F7);box-shadow:0 0 0 .5px rgba(0,0,0,.05)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* ═══ هیرو (Mira-style) ═══ */
.sl-hero{
 position:relative;z-index:1;overflow:hidden;
 /* لوگو absolute روی hero = فضای بالا برابر navbar + logo + وردمارک + gap.
    (۲۰۲۶-۰۸-۲۴: طبق دستور نهایی مالک پروژه همه‌چیز به حالت اصلی برگشت؛ از آن
    دور فقط وردمارک STOCK LAND زیر لوگو ماند و «استوک‌لند» فارسی حذف شد —
    68px = جای وردمارک به‌جای ردیف برند قبلی، سرچ دقیقاً سر جای قبل.) */
 padding-top:calc(var(--sl-safe-top) + 44px + 76px + 68px);
 padding-bottom:22px;padding-left:20px;padding-right:20px;
 background:
  /* base — طبق اندازه‌گیری پیکسلی از میرا: صاف تا ~۵۲٪ ارتفاع (هدر+لوگو+عنوان)،
     بعد محو تدریجی که اول به آبی روشن/فیروزه‌ای می‌ره (نه مستقیم خاکستری) درست مثل میرا.
     بدون هیچ گرادیان کناری/گوشه‌ای — کاملاً یک‌دست تا نقطهٔ شروع محو */
  linear-gradient(180deg,
    #4255FF 0%,
    #4255FF 52%,
    #4A66F8 62%,
    #5C82F8 70%,
    #7CA2F8 78%,
    #A6C2F9 86%,
    #CCDCF8 93%,
    #E6EDF8 97%,
    var(--bg) 100%);
}
html.dark .sl-hero{
 background:
  linear-gradient(180deg,
    #2838D8 0%,
    #2838D8 52%,
    #2230B8 64%,
    #182282 74%,
    #101656 84%,
    #090C30 92%,
    #040616 97%,
    var(--bg) 100%);
}
/* نویز ظریف */
.sl-hero::before{
 content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
 opacity:.028;mix-blend-mode:overlay;
 -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 84%);
 mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 84%);
}
/* لوگو: absolute، زیر navbar، وسط (+ وردمارک زیر لوگو) */
.sl-hero-logo-abs{
 position:absolute;
 top:calc(var(--sl-safe-top) + 44px + 12px);
 left:50%;transform:translateX(-50%);
 z-index:3;
 text-align:center;
}
/* وردمارک STOCK LAND — زیر لوگو، لاتین، فاصلهٔ متعادل از لوگو */
.sl-hero-wordmark{
 direction:ltr;
 margin-top:12px;
 color:#fff;font-size:15px;font-weight:800;
 letter-spacing:.42em;text-indent:.42em;/* جبران letter-spacing حرف آخر برای وسط‌چین واقعی */
 white-space:nowrap;
 text-shadow:0 2px 12px rgba(8,8,80,.30);
}
.sl-hero-logo-c{
 width:76px;height:76px;
 border-radius:0;/* لوگو جدید بدون پس‌زمینه — corner-radius لازم نیست */
 display:block;
 /* ⚠️ wrapper حالا به‌خاطر وردمارک عریض‌تر از لوگوئه؛ img بلاکی به text-align
    جواب نمی‌ده و در RTL به راست می‌چسبید (اندازه‌گیری‌شده: center=241 به‌جای
    195). margin-inline:auto وسط واقعی نگهش می‌داره. */
 margin-inline:auto;
 filter:drop-shadow(0 6px 24px rgba(20,80,255,.38)) drop-shadow(0 0 40px rgba(80,200,255,.28));
}
/* محتوا: بعد از لوگو */
.sl-hero-inner{
 position:relative;z-index:2;
 display:flex;flex-direction:column;align-items:flex-start;width:100%;
}
/* .sl-hero-brand حذف شد (۲۰۲۶-۰۸-۲۴) — نوشتهٔ «استوک‌لند» پایین هیرو طبق
   درخواست مالک پروژه برداشته شد؛ برندینگ حالا وردمارک STOCK LAND زیر لوگوست. */
.sl-search-wrap{position:relative;margin-top:0;width:100%;box-sizing:border-box}
.sl-search{
 background:rgba(255,255,255,.94);border-radius:14px;padding:12px 14px;
 color:#8E8E93;font-size:14px;display:flex;gap:8px;align-items:center;
 box-shadow:0 4px 16px rgba(10,14,80,.16);
 width:100%;box-sizing:border-box;
}
html.dark .sl-search{background:rgba(255,255,255,.12);color:#98989E}
.sl-search svg{width:18px;height:18px;flex:none;opacity:.5}
.sl-search-input{
 flex:1;min-width:0;border:none;outline:none;background:transparent;
 font-family:inherit;font-size:14px;color:var(--ink);padding:0;
}
.sl-search-input::placeholder{color:#8E8E93}
html.dark .sl-search-input{color:#F5F5F7}
html.dark .sl-search-input::placeholder{color:#98989E}
.sl-search-clear{flex:none;font-size:13px;color:var(--mu);cursor:pointer;padding:2px 4px}
/* ═══ نتایج جستجو — پنل شناور زیر جعبه ═══
   در HTML بیرون از .sl-hero (که overflow:hidden داره) قرار داره، مستقیم زیر #tab-home
   (که خودش position:absolute هست) — پس با position:absolute اینجا، مختصاتش نسبت به
   کل محتوای قابل‌اسکرول #tab-home حساب می‌شه و طبیعی با اسکرول صفحه بالا/پایین می‌ره،
   نه اینکه (مثل position:fixed) رو صفحه ثابت بمونه. */
.sl-search-results{
 position:absolute;z-index:50;
 background:var(--card);border-radius:16px;box-shadow:0 12px 32px rgba(0,0,0,.24);
 max-height:60vh;overflow-y:auto;padding:8px;
}
.sl-search-results .sl-prod{margin-bottom:6px}
.sl-search-results .sl-prod:last-child{margin-bottom:0}
.sl-search-empty{padding:20px 8px;text-align:center;color:var(--mu);font-size:13px}
.sl-search-loading{padding:20px 8px;text-align:center;color:var(--mu);font-size:13px}
/* بک‌کامپت */
.sl-hero-logo-wrap{display:none}
.sl-hero-logo{display:none}
/* ═══ نوار ناوبری شناور ═══ */
.sl-nav{
 position:fixed;top:0;left:0;right:0;z-index:100;
 height:calc(44px + var(--sl-safe-top));
 background:transparent;pointer-events:none;
 transition:background .18s ease,backdrop-filter .18s ease,-webkit-backdrop-filter .18s ease,box-shadow .18s ease;
}
.sl-nav-inner{
 height:100%;display:flex;align-items:flex-end;justify-content:center;padding-bottom:10px;
}
.sl-nav-title{
 font-size:17px;font-weight:700;color:#fff;opacity:0;
 transition:opacity .18s ease;
}
.sl-nav.sl-nav--solid{
 pointer-events:auto;
 background:var(--bg);
}
.sl-nav.sl-nav--solid .sl-nav-title{opacity:1;color:var(--ink)}
.sl-search span{flex:1}
.sl-head{padding:4px 20px 2px}
.sl-eyebrow{font-size:12px;color:var(--mu);font-weight:500}
.sl-big{font-size:32px;font-weight:800;letter-spacing:-.5px;line-height:1.35}
/* تب «ابزار مفید» — زبان طراحی کارت‌های Browse اپ‌استور (بازطراحی ششم، طبق مرجع
   تصویری مالک پروژه): فقط عنوان کوتاه (بدون توضیح)، آیکون کوچک گوشهٔ بالا، عنوان
   پایین، پس‌زمینهٔ رنگی اشباع با متن سفید. کارت‌ها عمداً مستقل از تم روشن/تاریک‌ان —
   دقیقاً مثل خودِ اپ‌استور که کارت‌های رنگی‌اش در دارک‌مود هم عین هم می‌مونن. */
.sl-tools-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:14px 18px 0;box-sizing:border-box}
.sl-tool-card{position:relative;aspect-ratio:1/1;display:flex;flex-direction:column;
 justify-content:flex-end;border-radius:17px;padding:13px;box-sizing:border-box;
 text-decoration:none;overflow:hidden;-webkit-tap-highlight-color:transparent;
 transition:transform .12s ease}
.sl-tool-card:active{transform:scale(.965)}
/* پس‌زمینهٔ اشباع هویت‌دار — یکسان در هر دو تم (الگوی اپ‌استور) */
.sl-tool-b{background:linear-gradient(165deg,#6BA6F2 0%,#3F7FDD 100%)}
.sl-tool-c{background:linear-gradient(165deg,#4FC3B0 0%,#2AA08D 100%)}
.sl-tool-a{background:linear-gradient(165deg,#A784E8 0%,#8259D4 100%)}
.sl-tool-wheel{background:linear-gradient(165deg,#F5A64B 0%,#E2822A 100%);cursor:pointer}
.sl-tool-p{background:linear-gradient(165deg,#4FB6E0 0%,#2287B4 100%);cursor:pointer}
/* آیکون گوشهٔ بالا-چپ — قرینهٔ RTL الگوی اپ‌استور (که در LTR بالا-راسته).
   SVG سفید تک‌رنگ با لایه‌بندی شفافیت برای عمق — هماهنگ با عنوان سفید کارت. */
.sl-tool-ic{position:absolute;top:11px;left:11px;width:31%;height:auto;display:block;
 filter:drop-shadow(0 2px 5px rgba(0,0,0,.22));pointer-events:none}
/* scrim تیرهٔ ملایم پایین — گرادیان‌ها زنده می‌مونن ولی کنتراست متن سفید تضمین می‌شه
   (اندازه‌گیری‌شده: بدون این، نارنجی/فیروزه‌ای زیر آستانهٔ ۳.۰ بودن) */
.sl-tool-card::after{content:'';position:absolute;inset:auto 0 0 0;height:55%;
 background:linear-gradient(to top,rgba(0,0,0,.38) 0%,rgba(0,0,0,.16) 45%,rgba(0,0,0,0) 100%);
 pointer-events:none;z-index:1}
/* عنوان پایین — طبیعتاً راست‌چین از dir=rtl والد */
.sl-tool-t{position:relative;z-index:2;display:block;color:#fff;font-size:14px;
 font-weight:800;line-height:1.35;text-shadow:0 1px 3px rgba(0,0,0,.25)}
.sl-tool-soon{cursor:default}
.sl-tool-soon .sl-tool-ic{opacity:.45}
.sl-tool-soon .sl-tool-t{opacity:.75}
.sl-tool-badge{position:absolute;top:10px;right:10px;z-index:5;background:rgba(255,255,255,.9);
 backdrop-filter:blur(4px);color:#57504f;font-size:9px;font-weight:700;padding:3px 8px;border-radius:999px}
.sl-tools-more{margin:14px 20px 0;font-size:11.5px;color:var(--mu);text-align:center}
.sl-sec{padding:18px 20px 2px;display:flex;align-items:baseline;justify-content:space-between}
.sl-sec b{font-size:18.5px;font-weight:800}
.sl-link{font-size:13px;color:var(--br);font-weight:600;cursor:pointer}
.sl-livebadge{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--mu);font-weight:600}
.sl-dot{width:7px;height:7px;border-radius:50%;background:var(--lv);
 box-shadow:0 0 0 0 rgba(48,209,88,.5);animation:slp 1.6s infinite}
@keyframes slp{70%{box-shadow:0 0 0 8px rgba(48,209,88,0)}100%{box-shadow:0 0 0 0 rgba(48,209,88,0)}}
.sl-ticker{display:flex;gap:10px;overflow-x:auto;padding:12px 20px 6px;scrollbar-width:none}
.sl-ticker::-webkit-scrollbar{display:none}
.sl-tick{flex:none;width:158px;background:var(--card);border-radius:16px;padding:13px 14px;
 box-shadow:var(--sh);cursor:pointer;transition:transform .12s}
.sl-tick:active{transform:scale(.97)}
.sl-tick-n{font-size:12.5px;color:var(--mu);font-weight:600;line-height:1.7;height:42px;overflow:hidden}
.sl-tick-p{font-size:16.5px;font-weight:800;margin-top:6px}
.sl-tick-p small{font-size:11px;color:var(--mu);font-weight:500}
.sl-chips{display:flex;gap:8px;overflow-x:auto;padding:8px 20px 2px;scrollbar-width:none}
.sl-chips::-webkit-scrollbar{display:none}
.sl-chip{flex:none;padding:8px 15px;border-radius:999px;background:var(--card);
 font-size:13px;font-weight:600;color:var(--mu);border:1px solid var(--ln);cursor:pointer;transition:.15s}
.sl-chip.on{background:var(--ink);color:var(--bg);border-color:transparent}
/* دسته‌بندی — دکمهٔ مستطیلی افقی، آیکون + نوشتهٔ کامل (بدون سه‌نقطه)، هم‌سبک با .sl-seg */
.sl-cat-c{flex:none;display:flex;align-items:center;gap:6px;cursor:pointer;
 background:var(--card);border:1px solid var(--ln);border-radius:var(--r-pill);
 min-height:38px;padding:0 var(--s-4);white-space:nowrap;
 transition:background var(--mo-fast) var(--mo-ease),transform var(--mo-fast) var(--mo-ease)}
.sl-cat-c:active{transform:scale(.96)}
.sl-cat-c-icon{font-size:16px;line-height:1;flex:none}
.sl-cat-c-icon:empty{display:none}
.sl-cat-c-name{font-size:var(--t-sm);font-weight:600;color:var(--mu)}
/* ⚠️ قبلاً `var(--ink)` بود — یعنی چیپ فعال کاملاً مشکی می‌شد، تنها جای اپ که
   لهجه‌اش مشکی بود. حالا همان لهجهٔ آبی مشترک. */
.sl-cat-c.on{background:var(--acc);border-color:transparent}
.sl-cat-c.on .sl-cat-c-name{color:var(--acc-ink)}
.sl-hrow{display:flex;gap:10px;overflow-x:auto;padding:12px 20px 6px;scrollbar-width:none}
.sl-hrow::-webkit-scrollbar{display:none}
.sl-mini{flex:none;width:220px;background:var(--card);border-radius:16px;overflow:hidden;
 box-shadow:var(--sh);cursor:pointer;transition:transform .12s}
.sl-mini:active{transform:scale(.97)}
.sl-mini-cv{height:92px;display:grid;place-items:center;font-size:34px;overflow:hidden;position:relative}
.sl-mini-cv img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.sl-mini-b{padding:10px 13px 13px}
.sl-mini-t{font-size:13px;font-weight:700;line-height:1.7}
.sl-mini-m{font-size:10.5px;color:var(--mu);margin-top:5px}
.sl-plist{margin:12px 20px 0;display:flex;flex-direction:column;gap:10px}
.sl-prod{background:var(--card);border-radius:18px;padding:13px 14px;display:flex;gap:12px;align-items:center;
 box-shadow:var(--sh);transition:transform .12s;cursor:pointer}
.sl-prod:active{transform:scale(.98)}
.sl-pic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:22px;flex:none;
 background:linear-gradient(135deg,#EEF3FF,#DCE7FF);overflow:hidden}
html.dark .sl-pic{background:linear-gradient(135deg,#14213D,#1E3A8A)}
.sl-pic img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.sl-pinfo{flex:1;min-width:0}
.sl-pt{font-size:14px;font-weight:700;line-height:1.65;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sl-pg{font-size:11.5px;color:var(--mu);margin-top:2px}
.sl-pp{text-align:left;flex:none}
.sl-price{font-size:15px;font-weight:800;white-space:nowrap}
.sl-price small{font-size:10.5px;color:var(--mu);font-weight:500}
.sl-buy{margin-top:6px;display:inline-flex;align-items:center;justify-content:center;
 background:var(--acc);color:var(--acc-ink);font-size:var(--t-sm);
 font-weight:700;border-radius:var(--r-pill);min-height:34px;padding:0 var(--s-4);
 transition:transform var(--mo-fast) var(--mo-ease)}
.sl-buy:active{transform:scale(.96)}
.sl-flash{color:#FF453A;font-size:10.5px;font-weight:800}
.sl-old{font-size:11.5px;color:var(--mu);text-decoration:line-through;white-space:nowrap}
.sl-seg{margin:8px 20px 0;background:rgba(120,120,128,.14);border-radius:11px;padding:2.5px;display:flex}
.sl-seg button{flex:1;border:0;background:transparent;font-family:inherit;font-size:13.5px;font-weight:700;
 color:var(--mu);padding:7px 0;border-radius:9px;cursor:pointer}
.sl-seg button.on{background:var(--card);color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.12)}
.sl-post{margin:14px 20px 0;background:var(--card);border-radius:var(--rd);overflow:hidden;
 box-shadow:var(--sh);cursor:pointer;transition:transform .12s}
.sl-post:active{transform:scale(.98)}
.sl-post-cv{height:150px;position:relative;display:grid;place-items:center;font-size:52px;overflow:hidden}
.sl-post-cv img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.sl-post-tag{position:absolute;top:12px;right:12px;background:rgba(255,255,255,.92);color:#0B1B4A;
 font-size:11px;font-weight:800;border-radius:999px;padding:5px 11px;z-index:2}
.sl-post-bd{padding:13px 16px 15px}
.sl-post-t{font-weight:800;font-size:15.5px;line-height:1.7}
.sl-post-x{color:var(--mu);font-size:13px;line-height:1.9;margin-top:3px;
 display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sl-post-m{color:var(--mu);font-size:11px;margin-top:9px}
.sl-me{padding:16px 20px 4px}
.sl-me-c{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;
 /* دقیقاً مثل .sl-hero: خودش فضای نوار شناور+safe-area رو رزرو می‌کنه چون parent (#tab-me)
    دیگه padding-top نداره — تا زیر نوار شفاف قرار بگیره و رنگ با هدر بومی تلگرام یکی بشه */
 padding:calc(var(--sl-safe-top) + 44px + 28px) 20px 28px;
 position:relative;overflow:hidden;
 background:linear-gradient(180deg,
   #4255FF 0%,#4255FF 55%,#4A66F8 65%,#5C82F8 73%,#7CA2F8 80%,#A6C2F9 87%,#CCDCF8 93%,#E6EDF8 97%,var(--bg) 100%)}
html.dark .sl-me-c{
 background:linear-gradient(180deg,
   #2838D8 0%,#2838D8 55%,#2230B8 66%,#182282 75%,#101656 83%,#090C30 90%,#040616 96%,var(--bg) 100%)}
.sl-me-c::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
 opacity:.028;mix-blend-mode:overlay;
 -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 84%);
 mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 84%)}
.sl-ava-wrap{display:block;position:relative;width:96px;height:96px;margin-bottom:12px;z-index:1;cursor:pointer}
.sl-ava{width:96px;height:96px;border-radius:50%;background:linear-gradient(135deg,#C88A4A,#8B5A2B);
 display:grid;place-items:center;color:#fff;font-weight:800;font-size:38px;
 box-shadow:0 8px 22px rgba(0,0,0,.25);border:3px solid rgba(255,255,255,.85)}
.sl-ava-img{position:absolute;inset:0;width:96px;height:96px;border-radius:50%;object-fit:cover;
 box-shadow:0 8px 22px rgba(0,0,0,.25);border:3px solid rgba(255,255,255,.85)}
.sl-ava-spin{position:absolute;inset:0;border-radius:50%;background:rgba(0,0,0,.45);display:none;place-items:center}
.sl-spin{width:22px;height:22px;border-radius:50%;border:2.5px solid rgba(255,255,255,.35);
 border-top-color:#fff;animation:sl-spin .7s linear infinite}
@keyframes sl-spin{to{transform:rotate(360deg)}}
.sl-ava-edit{position:absolute;bottom:0;right:0;width:30px;height:30px;border-radius:50%;
 background:#fff;color:var(--br);border:3px solid rgba(255,255,255,.85);display:grid;place-items:center;
 font-size:13px;cursor:pointer;padding:0;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.sl-me-n{font-size:19px;font-weight:800;z-index:1;position:relative;color:#fff;
 text-shadow:0 2px 10px rgba(8,8,80,.25)}
.sl-me-u{font-size:12.5px;color:rgba(255,255,255,.82);direction:ltr;text-align:center;z-index:1;position:relative;margin-top:2px}
.sl-wallet{margin:14px 20px 0;border-radius:22px;padding:18px;
 background:linear-gradient(140deg,#0B1B4A,#12318F 55%,var(--br));color:#fff;position:relative;overflow:hidden}
.sl-wallet-glow{position:absolute;width:190px;height:190px;border-radius:50%;
 background:radial-gradient(circle,rgba(255,255,255,.16),transparent 70%);top:-70px;left:-40px}
.sl-wallet-l{font-size:12px;opacity:.75;font-weight:600}
.sl-wallet-b{font-size:30px;font-weight:800;margin-top:4px;text-align:center}
.sl-wallet-b small{font-size:13px;font-weight:500;opacity:.75}
.sl-wallet-acts{display:flex;gap:9px;margin-top:16px}
/* کیف‌پول پاداش (دوم) — فقط برای همکاران؛ داخل همون کادر آبی کیف‌پول اصلی، بالای
   اون، با جداکنندهٔ کم‌رنگ تا با اعداد کیف‌پول اصلی قاطی نشه. اعداد سبز طبق درخواست
   صریح مالک پروژه تا در نگاه اول از کیف‌پول اصلی متمایز باشه. */
.sl-wallet-reward{margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.18);position:relative;z-index:1}
.sl-wallet-reward-l{font-size:11px;opacity:.75;font-weight:600}
.sl-wallet-reward-b{font-size:17px;font-weight:800;margin-top:3px;color:#4ADE80;text-align:center}
.sl-wallet-reward-b small{font-size:10.5px;font-weight:500;opacity:.8;color:#fff}
/* ─── واحد پول («تومان») سمت چپ عدد — رفع باگ واقعی (بخش «اصلاحات مینی‌اپ»،
   ۲۰۲۶-۰۸-۰۹): قبلاً این نمایش‌ها فقط با direction:ltr روی یک بلوک متن مختلط
   (رقم فارسی fmt() + کلمهٔ «تومان») ساخته می‌شدن. تست مستقیم Playwright ثابت کرد
   این روش کاملاً غیرقابل‌اعتماده — رقم‌های فارسی/عربی (کلاس Bidi یونیکد "AN") برخلاف
   رقم لاتین ("EN")، وقتی کنار یه کلمهٔ قوی‌RTL مثل «تومان» میان، مستقل از
   direction/ترتیب DOM همیشه «تومان» رو به‌جای اصلیش (راست) برمی‌گردونن — یعنی
   direction:ltr *هیچ‌وقت* واقعاً «تومان» رو سمت چپ نمی‌برد. راه‌حل واقعاً
   قابل‌اعتماد: flexbox (ترتیب جعبه‌ها، نه چیدمان کاراکتری) — دو <span> جدا
   (عدد اول در DOM، «تومان» دوم)، بدون هیچ override دستی جهت. */
.sl-money{display:inline-flex;align-items:baseline;gap:5px}
.sl-wallet-a{flex:1;text-align:center;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);
 border-radius:13px;padding:9px 0;font-size:12.5px;font-weight:700;cursor:pointer;color:#fff;text-decoration:none}
.sl-checkin-card{margin:10px 20px 0;border-radius:14px;padding:9px 12px;display:flex;align-items:center;gap:8px;
 background:linear-gradient(135deg,#FFF4E5,#FFE8CC);border:1px solid rgba(245,158,11,.25)}
html.dark .sl-checkin-card{background:linear-gradient(135deg,#3A2A0E,#2E210A);border-color:rgba(245,158,11,.3)}
.sl-checkin-card.sl-checkin-done{background:linear-gradient(135deg,#E7F6EE,#D6F1E4);border-color:rgba(34,197,94,.25)}
html.dark .sl-checkin-card.sl-checkin-done{background:linear-gradient(135deg,#0E2A1C,#0A2216);border-color:rgba(34,197,94,.3)}
.sl-checkin-card.sl-checkin-mini{background:var(--card);border-color:var(--ln)}
.sl-checkin-e{font-size:18px;flex:none;line-height:1}
.sl-checkin-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;overflow:hidden}
.sl-checkin-txt b{font-size:12px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sl-checkin-txt span{font-size:10.5px;color:var(--mu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sl-checkin-btn{flex:none;width:auto;background:#F59E0B;color:#fff;border:none;border-radius:9px;
 padding:6px 12px;font-size:11px;font-weight:800;cursor:pointer;font-family:inherit;white-space:nowrap}
.sl-group{margin:16px 20px 0;background:var(--card);border-radius:18px;overflow:hidden;box-shadow:var(--sh)}
.sl-row{display:flex;align-items:center;gap:12px;padding:13px 15px;border-bottom:.5px solid var(--ln);
 font-size:14.5px;font-weight:600;cursor:pointer;color:var(--ink);text-decoration:none}
.sl-row:last-child{border-bottom:0}
.sl-ric{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:15px;flex:none;color:#fff}
.sl-row-grow{flex:1}
.sl-chev{color:var(--mu);font-size:15px;transform:scaleX(-1)}
.sl-badge{background:var(--pt);color:#fff;font-size:10px;font-weight:800;border-radius:999px;padding:3px 9px}
.sl-foot{text-align:center;color:var(--mu);font-size:11px;padding:20px 0 6px}
.sl-login{margin:16px 20px 0;text-align:center;padding:32px 20px;background:var(--card);border-radius:var(--rd);box-shadow:var(--sh)}
.sl-login-e{font-size:48px;margin-bottom:10px}
.sl-login-t{font-size:15px;font-weight:700;margin-bottom:4px}
.sl-login-s{font-size:13px;color:var(--mu);line-height:1.9}
/* ⚠️ قبلاً `#54A9EB` بود — یک آبی سوم که با هیچ‌جای دیگر اپ نمی‌خواند و در حالت
   شب هم بازتعریف نمی‌شد. حالا همان لهجهٔ مشترک. */
.sl-login-btn{display:inline-flex;align-items:center;justify-content:center;
 width:auto;box-sizing:border-box;margin-top:var(--s-4);
 background:var(--acc);color:var(--acc-ink);font-size:var(--t-base);font-weight:700;
 border:0;border-radius:var(--r-pill);min-height:48px;padding:0 var(--s-6);
 text-decoration:none;cursor:pointer;
 transition:transform var(--mo-fast) var(--mo-ease)}
.sl-login-btn:active{transform:scale(.96)}
/* ── ورود با شمارهٔ موبایل ──────────────────────────────────────────────
   ⚠️ `width:auto` روی هر دکمهٔ داخل این بلوک عمدی است: Framework7 قاعدهٔ
   سراسری `button{width:100%}` دارد و بدون آن، دکمه ردیف را می‌بلعد. */
.sl-otp{display:flex;flex-direction:column;align-items:center;gap:var(--s-2)}
.sl-otp-in{width:100%;max-width:260px;box-sizing:border-box;
 background:var(--bg);color:var(--ink);border:1px solid var(--ln);
 border-radius:var(--r-md);min-height:46px;padding:0 var(--s-3);
 font-size:var(--t-base);font-family:inherit;text-align:center;letter-spacing:.5px}
.sl-otp-in:focus{outline:none;border-color:var(--acc)}
.sl-otp-code{letter-spacing:6px;font-weight:700;font-size:var(--t-lg)}
.sl-otp-btn{width:100%;max-width:260px;margin-top:var(--s-1)}
.sl-otp-to{font-size:var(--t-sm);color:var(--mu)}
.sl-otp-msg{font-size:var(--t-sm);color:var(--mu);min-height:18px}
.sl-otp-again,.sl-otp-back,.sl-otp-alt{width:auto;background:none;border:0;
 font-family:inherit;font-size:var(--t-sm);color:var(--acc);cursor:pointer;
 padding:var(--s-1) var(--s-2)}
.sl-otp-again:disabled{color:var(--mu);cursor:default}
.sl-otp-alt{margin-top:var(--s-3);color:var(--mu);text-decoration:underline}
/* هدر پاپ‌آپ محصول: عنوان ثابت «محصول» باید کاملاً وسط‌چین بمونه و هیچ‌وقت با دکمهٔ
   بستن (سمت راست در RTL) تداخل نکنه — position:absolute مستقل از عرض .right،
   نه فقط centering پیش‌فرض F7 که با متن بلند/RTL می‌تونست جابه‌جا بشه. */
#prod-popup .navbar-inner{position:relative}
#prod-popup .navbar-inner .title{
 position:absolute;left:0;right:0;margin:0 auto;text-align:center;
 pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#prod-popup .navbar-inner .right{position:relative;z-index:1}
/* ⚠️ همون باگ #prod-popup بالا، این‌بار روی #post-popup (آموزش‌ها + تاریخچهٔ
   کیف‌پول/پنل همکاری که از همین پاپ‌آپ مشترک استفاده می‌کنن، بخش‌های ۱۰/۱۱
   گزارش مالک پروژه): عنوان دینامیک (`#post-title`، مثلاً عنوان بلند یه مقالهٔ
   آموزشی) بدون overflow:hidden به چند خط می‌شکست و روی دکمهٔ «بستن» می‌افتاد —
   هم ظاهر بهم‌ریخته می‌داد هم عملاً دکمهٔ بستن رو غیرقابل‌کلیک می‌کرد. */
#post-popup .navbar-inner{position:relative}
#post-popup .navbar-inner .title{
 position:absolute;left:0;right:0;margin:0 auto;text-align:center;
 pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#post-popup .navbar-inner .right{position:relative;z-index:1}
.sl-pp-hero{padding:24px 20px 18px;text-align:center;position:relative}
.sl-pp-emoji{font-size:54px;margin-bottom:8px}
.sl-pp-emoji img{width:96px;height:96px;object-fit:cover;border-radius:20px;display:block;margin:0 auto;
 box-shadow:var(--sh)}
.sl-pp-title{font-size:20px;font-weight:800;line-height:1.6}
.sl-pp-fav{position:absolute;top:16px;left:16px;width:38px;height:38px;border-radius:50%;
 border:none;background:var(--card);box-shadow:var(--sh);font-size:19px;color:var(--mu);
 cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:inherit}
.sl-pp-fav.on{color:#EF4444}
.sl-pp-share{position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:50%;
 border:none;background:var(--card);box-shadow:var(--sh);font-size:17px;color:var(--mu);
 cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:inherit}
.sl-pp-related-title{padding:0 20px 8px;font-size:13px;font-weight:800;color:var(--mu)}
.sl-pp-related{padding:0 20px 20px;display:flex;gap:10px;overflow-x:auto;scrollbar-width:none}
.sl-pp-related::-webkit-scrollbar{display:none}
.sl-rp-card{flex:none;width:130px;background:var(--card);border-radius:14px;padding:12px;box-shadow:var(--sh);cursor:pointer}
.sl-rp-t{font-size:12.5px;font-weight:700;line-height:1.5;overflow:hidden;text-overflow:ellipsis;
 display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:2.9em}
.sl-rp-p{font-size:12.5px;font-weight:800;margin-top:6px}
.sl-rp-p small{font-size:10px;color:var(--mu);font-weight:500}
.sl-pp-price{font-size:24px;font-weight:800;margin-top:8px;color:var(--br)}
.sl-pp-price small{font-size:13px;color:var(--mu);font-weight:500}
.sl-pp-flash{font-size:13px;margin-top:4px}
.sl-pp-flash .old{text-decoration:line-through;color:var(--mu)}
.sl-pp-flash .tag{color:#FF453A;font-weight:800}
/* دو قیمت (اصلی + همکاری) در صفحهٔ محصول — بخش ۲ */
.sl-pp-dualprice{margin-top:6px}
.sl-pp-price-orig{font-size:12.5px;color:var(--mu)}
.sl-pp-price-orig s{text-decoration:line-through}
.sl-pp-partner-badge{display:inline-block;margin-inline-start:8px;vertical-align:middle;background:linear-gradient(145deg,#0EA5A6,#34D399);
 color:#fff;font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:999px}
.sl-partner-badge{display:inline-block;background:linear-gradient(145deg,#0EA5A6,#34D399);color:#fff;
 font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:999px;vertical-align:middle}
.sl-pp-desc{padding:0 20px 20px;font-size:14.5px;line-height:2;color:var(--mu)}
.sl-pp-stock{padding:0 20px 12px;font-size:13px;font-weight:600}
.sl-pp-divider{height:1px;background:var(--ln);margin:0 20px 16px}
.sl-stars{color:var(--mu);font-size:12.5px;white-space:nowrap;direction:ltr}
.sl-stars-ico{color:var(--pt);letter-spacing:1px;direction:ltr;unicode-bidi:isolate}
.sl-stars b{color:var(--ink);font-weight:800}
.sl-stars-sm{font-size:11px}
.sl-pp-rating{margin-top:4px}
.sl-pp-rating .sl-stars-ico{font-size:14px}
.sl-pp-reviews-title{padding:0 20px 8px;font-size:13px;font-weight:800;color:var(--mu)}
.sl-pp-reviews{padding:0 20px 20px;display:flex;flex-direction:column;gap:10px}
.sl-review{background:var(--card);border-radius:14px;padding:11px 14px;box-shadow:var(--sh)}
.sl-review-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sl-review-top b{font-size:13px;font-weight:700}
.sl-review-st{color:var(--pt);font-size:12px;letter-spacing:1px;direction:ltr;unicode-bidi:isolate}
.sl-review-txt{font-size:13.5px;color:var(--mu);margin-top:5px;line-height:1.8}
.sl-pp-btn{margin:0 20px 24px;display:flex;align-items:center;justify-content:center;
 background:var(--acc);color:var(--acc-ink);text-align:center;
 font-size:var(--t-md);font-weight:700;border-radius:var(--r-pill);min-height:52px;
 border:none;width:calc(100% - 40px);box-sizing:border-box;cursor:pointer;text-decoration:none;
 transition:transform var(--mo-fast) var(--mo-ease)}
.sl-pp-btn:active{transform:scale(.97)}
.sl-pp-btn svg{width:18px;height:18px;flex:none;margin-inline-end:var(--s-2)}
.sl-pp-btn-off{background:var(--mu)!important}
.sl-post-body{padding-left:18px;padding-right:18px;padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
.sl-post-body img{width:100%;border-radius:16px;margin:12px 0 4px;display:block}
.sl-postf-title{font-size:20px;font-weight:700;line-height:1.6;margin:14px 0 2px}
.sl-postf-date{color:var(--mu);font-size:12px;margin-bottom:10px}
.sl-postf-text{font-size:15.5px;line-height:2;white-space:pre-line;overflow-wrap:break-word;word-break:break-word}
.sl-postf-text img,.sl-postf-text video,.sl-postf-text iframe,.sl-postf-text table{max-width:100%}
.sl-postf-text pre{white-space:pre-wrap;word-break:break-word;overflow-x:auto;max-width:100%}
.sl-video-wrap{position:relative;padding-top:56.25%;border-radius:14px;overflow:hidden;margin:14px 0}
.sl-video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.sl-tut-video{width:100%;border-radius:14px;margin:14px 0;display:block}
.sl-tut-gallery{display:flex;gap:8px;overflow-x:auto;margin:14px 0;scrollbar-width:none}
.sl-tut-gallery::-webkit-scrollbar{display:none}
.sl-tut-gallery img{width:110px;height:110px;border-radius:12px;object-fit:cover;flex:none}
.sl-tut-tags{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}
.sl-tut-tag{background:var(--card);border:1px solid var(--ln);border-radius:999px;padding:4px 11px;font-size:11.5px;color:var(--mu)}
.sl-skel{background:var(--card);border-radius:18px;margin:14px 20px 0;padding:16px}
.sl-skel .b{height:14px;border-radius:7px;margin:10px 0;
 background:linear-gradient(90deg,rgba(120,120,128,.12) 25%,rgba(120,120,128,.22) 50%,rgba(120,120,128,.12) 75%);
 background-size:400% 100%;animation:slsh 1.3s infinite}
.sl-skel .b.w60{width:60%}.sl-skel .b.w90{width:90%}.sl-skel .b.w40{width:40%}
@keyframes slsh{0%{background-position:100% 0}100%{background-position:-100% 0}}
.sl-empty{text-align:center;color:var(--mu);padding:56px 24px}
.sl-empty-e{font-size:44px;display:block;margin-bottom:12px}
.sl-retry{margin-top:12px;background:var(--br);color:#fff;border:none;border-radius:10px;
 padding:8px 20px;font-size:13px;font-family:inherit;font-weight:700;cursor:pointer}
.sl-install-hint{position:fixed;z-index:6000;left:12px;right:12px;
 bottom:calc(64px + env(safe-area-inset-bottom,0px));
 background:var(--card);border-radius:16px;box-shadow:0 8px 30px rgba(0,0,0,.18);
 padding:12px 14px;display:flex;align-items:center;gap:10px}
.sl-install-text{flex:1;font-size:12.5px;line-height:1.7}
.sl-install-text b{display:block;font-size:13.5px}
.sl-install-text span{color:var(--mu)}
/* 🔴 `width:auto;flex:none` اجباری است — قاعدهٔ ۲.۱ هارنس UI (تلهٔ سراسری
   `button{width:100%}` فریم‌ورک ۷). بدون این، دکمه ۲۴۷px از ۳۳۸px ردیف را
   می‌گیرد و ستون متن به ۴۵px می‌رسد: نوار پیشنهاد نصب به ارتفاع ۱۹۹px با
   متنِ تقریباً یک‌کلمه‌در‌هر‌خط رندر می‌شود (اندازه‌گیری‌شده روی اندروید ۳۹۰px).
   چهارمین تکرار همین کلاس در این مخزن. */
.sl-install-btn{background:var(--br);color:#fff;border:0;border-radius:10px;padding:8px 16px;
 font-size:13px;font-family:inherit;width:auto;flex:none;white-space:nowrap}
.sl-install-close{background:rgba(120,120,128,.14);color:var(--mu);border:0;border-radius:50%;width:26px;height:26px;font-size:12px;flex:none}
html.in-telegram .sl-install-hint{display:none!important}

/* ═══ پاپ‌آپ خرید ═══ */
.sl-checkout-prod{padding:20px 20px 4px;display:flex;gap:14px;align-items:center;border-bottom:.5px solid var(--ln)}
.sl-checkout-emoji{width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,#EEF3FF,#DCE7FF);display:grid;place-items:center;font-size:24px;flex:none}
html.dark .sl-checkout-emoji{background:linear-gradient(135deg,#14213D,#1E3A8A)}
.sl-checkout-title{font-size:15px;font-weight:800;line-height:1.5}
.sl-checkout-price{font-size:13px;color:var(--mu);margin-top:3px}
.sl-checkout-price b{color:var(--br);font-size:16px}
.sl-checkout-sec{padding:18px 20px 6px;font-size:13px;font-weight:700;color:var(--mu)}
.sl-rate-box{margin-top:10px;padding-top:10px;border-top:1px solid var(--ln)}
.sl-rate-label{font-size:12.5px;font-weight:700;color:var(--mu);margin-bottom:6px}
.sl-rate-stars{display:flex;gap:4px;font-size:24px;color:var(--pt);line-height:1;cursor:pointer;user-select:none;direction:ltr}
.sl-rate-comment{width:100%;box-sizing:border-box;margin-top:8px;border:1px solid var(--ln);border-radius:12px;
 padding:9px 12px;font-size:13px;font-family:inherit;resize:none;background:var(--card);color:var(--ink)}
.sl-checkout-wallet{margin:0 20px;background:var(--card);border-radius:14px;padding:14px 16px;
 display:flex;align-items:center;justify-content:space-between;box-shadow:var(--sh)}
.sl-tier-progress{margin:0 20px 14px;background:var(--card);border-radius:14px;padding:14px 16px;box-shadow:var(--sh)}
.sl-tier-progress-top{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;color:var(--mu);margin-bottom:8px}
.sl-tier-progress-top b{color:var(--ink);font-weight:800}
/* عمداً direction:ltr — طبق درخواست صریح مالک پروژه، نوار پیشرفت پنل همکار برخلاف
   بقیهٔ اپ (که RTL‌ه) باید از چپ به راست پر بشه، نه راست‌به‌چپ پیش‌فرض RTL */
.sl-tier-progress-bar{height:8px;border-radius:999px;background:var(--ln);overflow:hidden;direction:ltr}
.sl-tier-progress-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#F59E0B,#FBBF24);transition:width .4s ease}
.sl-checkout-wallet-info{font-size:13px;color:var(--mu)}
.sl-checkout-wallet-bal{font-size:18px;font-weight:800;color:var(--br);margin-top:2px}
.sl-checkout-btns{margin:16px 20px 0;display:flex;flex-direction:column;gap:10px}
.sl-checkout-btn{display:flex;align-items:center;justify-content:center;gap:var(--s-2);
 width:100%;box-sizing:border-box;min-height:52px;padding:0 var(--s-4);border:none;
 border-radius:var(--r-pill);
 font-family:inherit;font-size:var(--t-md);font-weight:700;cursor:pointer;text-align:center;
 transition:transform var(--mo-fast) var(--mo-ease),opacity var(--mo-fast) var(--mo-ease)}
.sl-checkout-btn:active{opacity:.85;transform:scale(.97)}
.sl-checkout-btn svg{width:18px;height:18px;flex:none}
.sl-checkout-btn-wallet{background:var(--ok);color:#fff}
.sl-checkout-btn-combined{background:var(--acc);color:var(--acc-ink)}
.sl-checkout-btn-gateway{background:var(--card);color:var(--ink);border:2px solid var(--ln)}
.sl-checkout-btn:disabled{opacity:.4;cursor:not-allowed}
.sl-checkout-note{margin:14px 20px 24px;font-size:12px;color:var(--mu);text-align:center;line-height:1.8}
/* صفحات حقوقی — پای چک‌اوت و ته تب حساب */
.sl-checkout-legal{margin:0 20px 26px;font-size:11.5px;color:var(--mu);text-align:center;line-height:2}
.sl-checkout-legal a{color:var(--acc);text-decoration:none}
.sl-legal{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;
  margin:18px 16px 26px;font-size:11.5px;color:var(--mu)}
.sl-legal a{color:var(--mu);text-decoration:none}
.sl-legal-sep{color:var(--ln)}
.sl-terms-box{margin:14px 20px 0;background:var(--card);border-radius:14px;padding:14px 16px;box-shadow:var(--sh);box-sizing:border-box}
.sl-terms-text{font-size:12.5px;color:var(--mu);line-height:1.9;max-height:120px;overflow-y:auto;padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--ln)}
.sl-terms-chk{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer}
.sl-terms-chk input{width:18px;height:18px;min-width:18px;cursor:pointer;accent-color:var(--br)}
/* جعبهٔ عمودی (برخلاف .sl-checkout-wallet که ردیفی/space-between است) — برای فرم‌های پرداخت */
.sl-pay-box{margin:0 20px;background:var(--card);border-radius:14px;padding:14px 16px;box-shadow:var(--sh)}
.sl-amount-input{width:100%;border:none;outline:none;background:transparent;box-sizing:border-box;
 font-family:inherit;font-size:16px;font-weight:700;color:var(--ink);padding:4px 0;direction:ltr;text-align:right}
.sl-amount-input::placeholder{color:var(--mu);font-weight:500;font-size:13px}
.sl-cc-num{font-size:18px;font-weight:800;color:var(--br);direction:ltr;text-align:center;
 letter-spacing:1px;margin:8px 0;word-break:break-all}
.sl-file-btn{display:block;text-align:center;padding:10px;border-radius:10px;
 border:1.5px dashed var(--ln);color:var(--mu);font-size:13px;font-weight:600;cursor:pointer}
/* ═══ چت پشتیبانی — چیدمان استاندارد سه‌بخشی ═══════════════════════════
   هدر ثابت / لیست پیام اسکرول‌دار که تمام فضای باقی‌مانده را می‌گیرد /
   نوار نوشتن چسبیده به کف. تا پیش از این، لیست `max-height:50vh` بود و
   نوار نوشتن وسط صفحه شناور می‌ماند با نصف صفحهٔ خالی زیرش. */
.sl-sp-host{display:flex;flex-direction:column;overflow:hidden!important;
 padding:var(--sl-nav-top,calc(var(--sl-safe-top) + 44px)) 0 0!important;background:var(--bg)}
.sl-sp-host .sl-acc-page{flex:1;min-height:0;display:flex;flex-direction:column;padding:0}
.sl-sp{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--bg);position:relative}

/* ── هدر: هویت پشتیبان (استاندارد هر ویجت پشتیبانی) ── */
.sl-sp-head{flex:none;display:flex;align-items:center;gap:var(--s-3);
 padding:var(--s-3) var(--s-4);background:var(--card);border-bottom:1px solid var(--ln)}
.sl-sp-ava{flex:none;width:38px;height:38px;border-radius:var(--r-pill);
 background:var(--acc-soft);color:var(--acc);display:flex;align-items:center;justify-content:center}
.sl-sp-ava svg{width:20px;height:20px}
.sl-sp-hd{min-width:0;flex:1}
.sl-sp-hn{font-size:var(--t-base);font-weight:800;color:var(--ink)}
.sl-sp-hs{font-size:var(--t-sm);color:var(--mu);display:flex;align-items:center;gap:5px;margin-top:2px}
.sl-sp-dot{width:7px;height:7px;border-radius:var(--r-pill);background:var(--ok);flex:none}
.sl-sp-dot.off{background:var(--mu)}

/* ── لیست پیام ── */
.sl-sp-body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
 padding:var(--s-4) var(--s-4) var(--s-2);display:flex;flex-direction:column;gap:var(--s-1)}
.sl-sp-day{align-self:center;margin:var(--s-2) 0;padding:3px 12px;border-radius:var(--r-pill);
 background:var(--neutral-soft);color:var(--mu);font-size:var(--t-cap);font-weight:700}
/* ⚠️ در فلکس ستونی داخل dir=rtl، `flex-end` فیزیکی سمت چپ می‌نشیند و `flex-start`
   سمت راست (برخلاف تصور طبیعی) — پس پیام «خودم» که باید راست باشد (قرارداد
   چت‌های فارسی) `flex-start` می‌گیرد. این یک‌بار با اندازه‌گیری واقعی تأیید شد. */
.sl-sp-row{display:flex;align-items:flex-end;gap:var(--s-2);max-width:86%}
.sl-sp-row.mine{align-self:flex-start}
/* آواتار پشتیبان باید لبهٔ **بیرونی** حباب بنشیند (سمت چپ در RTL)، نه سمت مرکز */
.sl-sp-row.theirs{align-self:flex-end;flex-direction:row-reverse}
.sl-sp-row+.sl-sp-row{margin-top:var(--s-1)}
.sl-sp-row.gap-new{margin-top:var(--s-3)}
.sl-sp-mini{flex:none;width:26px;height:26px;border-radius:var(--r-pill);background:var(--acc-soft);
 color:var(--acc);display:flex;align-items:center;justify-content:center;margin-bottom:2px}
.sl-sp-mini svg{width:14px;height:14px}
.sl-sp-mini.blank{background:transparent}
.sl-sp-msg{min-width:0;padding:9px 13px 7px;border-radius:var(--r-md);font-size:var(--t-base);
 line-height:1.75;word-break:break-word;position:relative}
.sl-sp-row.mine .sl-sp-msg{background:var(--acc);color:var(--acc-ink)}
.sl-sp-row.theirs .sl-sp-msg{background:var(--card);color:var(--ink);box-shadow:var(--e-1)}
.sl-sp-row.mine.tail .sl-sp-msg{border-bottom-right-radius:var(--r-xs)}
.sl-sp-row.theirs.tail .sl-sp-msg{border-bottom-left-radius:var(--r-xs)}
.sl-sp-meta{display:flex;align-items:center;justify-content:flex-end;gap:4px;
 font-size:var(--t-cap);margin-top:3px;opacity:.7;direction:ltr}
.sl-sp-row.mine .sl-sp-meta{color:var(--acc-ink)}
.sl-sp-row.theirs .sl-sp-meta{color:var(--mu)}
.sl-sp-meta svg{width:13px;height:13px}
.sl-sp-img{max-width:210px;width:100%;border-radius:var(--r-sm);display:block;margin-bottom:5px;cursor:pointer}
.sl-sp-row.pending{opacity:.6}

/* ── حالت خالی ── */
.sl-sp-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
 gap:var(--s-3);padding:var(--s-6) var(--s-5);text-align:center}
.sl-sp-empty-ic{width:56px;height:56px;border-radius:var(--r-pill);background:var(--acc-soft);
 color:var(--acc);display:flex;align-items:center;justify-content:center}
.sl-sp-empty-ic svg{width:28px;height:28px}
.sl-sp-empty-t{font-size:var(--t-md);font-weight:800;color:var(--ink)}
.sl-sp-empty-s{font-size:var(--t-sm);color:var(--mu);line-height:1.9;max-width:260px}
.sl-sp-sugs{display:flex;flex-wrap:wrap;gap:var(--s-2);justify-content:center;margin-top:var(--s-2)}
.sl-sp-sug{border:1px solid var(--ln);background:var(--card);color:var(--ink);width:auto;
 border-radius:var(--r-pill);padding:7px 14px;font-family:inherit;font-size:var(--t-sm);
 font-weight:600;cursor:pointer}

/* ── کف صفحه: اعلان وضعیت + نوار نوشتن ── */
.sl-sp-foot{flex:none;background:var(--card);border-top:1px solid var(--ln);
 padding-bottom:env(safe-area-inset-bottom,0px)}
.sl-sp-note{padding:8px var(--s-4);font-size:var(--t-sm);color:var(--mu);text-align:center;line-height:1.8}
.sl-sp-note.warn{color:var(--warn)}
.sl-sp-attach{margin:var(--s-2) var(--s-4) 0;padding:6px 10px;background:var(--neutral-soft);
 border-radius:var(--r-xs);font-size:var(--t-sm);color:var(--mu);display:flex;align-items:center;gap:6px}
/* ⚠️ `display:flex` روی کلاس، قاعدهٔ پیش‌فرض مرورگر `[hidden]{display:none}` را
   می‌برد (اسپسیفیسیتی بالاتر) — بدون این خط، نوار پیوست همیشه به‌شکل یک باکس
   خاکستری خالی بالای نوار نوشتن دیده می‌شد. */
.sl-sp-attach[hidden]{display:none}
.sl-sp-attach-x{cursor:pointer;color:var(--mu);padding:0 4px;font-weight:700;margin-inline-start:auto}
.sl-sp-input-row{display:flex;gap:var(--s-2);padding:var(--s-2) var(--s-4) var(--s-3);align-items:flex-end}
/* ⚠️ سلکتور با نام تگ (نه فقط کلاس) لازم است: قاعدهٔ پایهٔ F7 روی `textarea`
   اسپسیفیسیتی بالاتری از کلاس تنها دارد و border را برمی‌گرداند. */
textarea.sl-sp-input{flex:1;min-width:0;box-sizing:border-box;border:1.5px solid var(--ln);
 border-radius:var(--r-lg);padding:10px 14px;font-family:inherit;font-size:var(--t-base);
 line-height:1.6;background:var(--bg);color:var(--ink);outline:none;resize:none;
 max-height:110px;overflow-y:auto;transition:border-color var(--mo-fast),box-shadow var(--mo-fast)}
textarea.sl-sp-input:focus{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)}
textarea.sl-sp-input:disabled{opacity:.6}
/* ⚠️ width:auto صریح — F7 قاعدهٔ پایهٔ button{width:100%} دارد که این دکمه‌های
   کنار textarea را کل ردیف می‌کرد (همان تلهٔ تکرارشوندهٔ بخش ۶۹.۳). */
.sl-sp-send,.sl-sp-attach-btn{flex:none;width:38px;height:38px;border-radius:var(--r-pill);
 display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;padding:0}
.sl-sp-send{background:var(--acc);color:var(--acc-ink)}
.sl-sp-send svg{width:18px;height:18px}
.sl-sp-attach-btn{background:var(--neutral-soft);color:var(--mu)}
.sl-sp-attach-btn svg{width:18px;height:18px}
.sl-sp-send:disabled,.sl-sp-attach-btn.sl-sp-disabled{opacity:.45;cursor:default}
.sl-sp-spin{width:16px;height:16px;border:2px solid var(--acc-ink);border-top-color:transparent;
 border-radius:var(--r-pill);animation:slSpSpin .7s linear infinite}
@keyframes slSpSpin{to{transform:rotate(360deg)}}

/* ── دکمهٔ «برو به آخر» وقتی کاربر بالا اسکرول کرده ── */
.sl-sp-jump{position:absolute;inset-inline-start:var(--s-4);bottom:calc(var(--s-4) + 62px);
 width:36px;height:36px;border-radius:var(--r-pill);background:var(--card);color:var(--ink);
 box-shadow:var(--e-2);border:1px solid var(--ln);display:none;align-items:center;
 justify-content:center;cursor:pointer;z-index:3;padding:0}
.sl-sp-jump.on{display:flex}
.sl-sp-jump svg{width:16px;height:16px}
.sl-sp-jump-b{background:var(--err);color:var(--acc-ink);border-radius:var(--r-pill);
 font-size:var(--t-cap);font-weight:800;padding:0 5px;min-width:16px;height:16px;
 position:absolute;top:-4px;inset-inline-end:-4px;display:flex;align-items:center;justify-content:center}

/* ── نمای بزرگ عکس پیوست ── */
.sl-sp-lb{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:13500;display:flex;
 align-items:center;justify-content:center;padding:var(--s-5)}
.sl-sp-lb img{max-width:100%;max-height:100%;border-radius:var(--r-sm)}
.sl-checkout-result{padding:40px 24px;text-align:center}
.sl-checkout-result-e{font-size:56px;margin-bottom:16px}
.sl-checkout-result-t{font-size:19px;font-weight:800;margin-bottom:8px}
.sl-checkout-result-s{font-size:14px;color:var(--mu);line-height:1.9}
.sl-checkout-close-btn{margin-top:20px;background:var(--br);color:#fff;border:none;
 border-radius:14px;padding:14px 32px;font-size:15px;font-weight:700;font-family:inherit;cursor:pointer}

/* ═══ ویژه امروز ═══ */
/* `align-items:stretch` تا کارت‌های یک ردیف هم‌ارتفاع شوند — بدون آن، کارتی که
   عنوانش دو خط می‌شود بلندتر می‌ماند و دکمه‌هایش با کارت کناری هم‌تراز نیست. */
.sl-feat-row{display:flex;align-items:stretch;gap:12px;overflow-x:auto;
 padding:10px 20px 8px;scrollbar-width:none}
.sl-feat-row::-webkit-scrollbar{display:none}
.sl-feat{
 flex:none;width:175px;background:var(--card);border-radius:var(--r-md);overflow:hidden;
 box-shadow:var(--sh);cursor:pointer;transition:transform .12s;
 display:flex;flex-direction:column;
}
.sl-feat:active{transform:scale(.97)}
.sl-feat-img{
 height:100px;flex:none;display:grid;place-items:center;font-size:40px;position:relative;overflow:hidden;
 background:linear-gradient(135deg,#EEF3FF,#DBEAFE);
}
html.dark .sl-feat-img{background:linear-gradient(135deg,#172554,#1E3A8A)}
.sl-feat-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sl-feat-badge{
 position:absolute;top:8px;right:8px;
 background:linear-gradient(135deg,#EF4444,#DC2626);
 color:#fff;font-size:10px;font-weight:800;border-radius:999px;padding:3px 9px;
}
.sl-feat-body{padding:11px 13px 14px;flex:1;display:flex;flex-direction:column}
.sl-feat-name{font-size:13px;font-weight:700;line-height:1.55;
 display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sl-feat-price{font-size:15px;font-weight:800;margin-top:6px;color:var(--br)}
.sl-feat-price small{font-size:10px;color:var(--mu);font-weight:500}
.sl-feat-old{font-size:11px;color:var(--mu);text-decoration:line-through;margin-top:2px}
.sl-feat-btn{
 /* `margin-top:auto` تا در کارت‌های هم‌ردیف با عنوان یک‌خطی/دوخطی، دکمه‌ها
    همیشه هم‌تراز ته کارت بنشینند (قبلاً هر کارت جای متفاوتی داشت). */
 margin-top:auto;display:flex;align-items:center;justify-content:center;
 background:var(--acc);color:var(--acc-ink);font-size:var(--t-sm);font-weight:700;
 border-radius:var(--r-pill);min-height:38px;
 transition:transform var(--mo-fast) var(--mo-ease);
}
.sl-feat-btn:active{transform:scale(.96)}

/* ═══ کارت آموزش ═══ */
.sl-learn-card{
 margin:8px 20px 0;border-radius:var(--rd);overflow:hidden;
 background:var(--card);box-shadow:var(--sh);cursor:pointer;
 display:flex;gap:0;transition:transform .12s;
}
.sl-learn-card:active{transform:scale(.98)}
.sl-learn-img{
 width:110px;flex:none;display:grid;place-items:center;font-size:38px;
 background:linear-gradient(145deg,#0B1B4A,var(--br));min-height:110px;
}
.sl-learn-img img{width:100%;height:100%;object-fit:cover}
.sl-learn-body{padding:14px 16px;flex:1;min-width:0;display:flex;flex-direction:column;justify-content:space-between}
.sl-learn-tag{font-size:10px;font-weight:700;color:var(--br);text-transform:uppercase;letter-spacing:.5px}
.sl-learn-title{font-size:14px;font-weight:800;line-height:1.6;margin-top:4px;
 display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sl-learn-meta{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:11px;color:var(--mu)}
.sl-learn-meta span{background:var(--bg);border-radius:999px;padding:3px 9px}

/* ═══ اصلاح اسکرول و لایوت ═══ */
/* ظرف تب‌ها باید کل view رو پر کنه تا ارتفاع ثابت باشه */
.view-main>.tabs{
 position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden;
}
/* هر تب باید ظرف رو پر کنه و مستقل اسکرول کنه */
.tabs>.page-content.tab{
 position:absolute!important;top:0;left:0;right:0;bottom:0;
 height:auto!important;
 overflow-y:auto!important;
 overflow-x:hidden!important;
 -webkit-overflow-scrolling:touch;
 overscroll-behavior-y:contain;
}
/* تب‌های غیرخانه/غیرحساب: فضای بالا دقیقاً به‌اندازهٔ خودِ نوار ناوبری شناور — بدون حتی یک پیکسل اضافه.
   tab-me مثل tab-home هیچ padding-top نداره چون هیرو/کارت‌رنگی‌ش (.sl-me-c) خودش این فضا رو
   با padding-top خودش رزرو می‌کنه تا زیر نوار شناور شفاف قرار بگیره و رنگ پیوسته بشه (دقیقاً مثل خانه) */
/* ⚠️ عمداً با انتخابگر ساختاری (نه فهرست دستی تب‌ها): نسخهٔ قبلی فقط
   #tab-shop و #tab-learn رو اسم برده بود، پس «ابزار مفید» و «اخبار» از روز
   اضافه‌شدنشون هیچ فضای بالایی نداشتن و به سقف می‌چسبیدن (گزارش مالک پروژه،
   بخش ۹۹.۱۴). با این شکل، هر تب تازه‌ای هم خودکار درست می‌شه. */
.page-content.tab:not(#tab-home):not(#tab-me){
 padding-top:calc(var(--sl-safe-top) + 44px);
}
/* فاصله پایین کافی برای تب‌بار — روی همهٔ تب‌ها بدون استثنا */
.page-content.tab{
 padding-bottom:calc(env(safe-area-inset-bottom,0px) + 72px);
}
/* اسکرول در پاپ‌آپ‌ها */
.popup .page-content{
 overflow-y:auto!important;
 overflow-x:hidden!important;
 -webkit-overflow-scrolling:touch;
}

/* ═══ صفحات حساب (کیف‌پول/همکاری/دعوت) ═══ */
.sl-acc-page{padding:20px 16px calc(24px + env(safe-area-inset-bottom,0px))}
.sl-acc-page .sl-checkout-wallet{margin:8px 0}
.sl-acc-page .sl-checkout-sec{padding:16px 0 6px}
.sl-acc-page .sl-checkout-btns{margin:14px 0 0}
.sl-acc-page .sl-checkout-note{margin:12px 0 0;padding:0 0 8px}
.sl-acc-page .sl-group{margin:8px 0 0}
/* لینک «‹ بازگشت» بالای هر زیرصفحهٔ پنل همکاری — ناوبری تودرتو بدون بستن popup */
.sl-pt-back{display:inline-flex;align-items:center;gap:2px;color:var(--br);font-size:13px;
 font-weight:700;margin-bottom:10px;text-decoration:none;padding:4px 0}

/* ═══ صفحهٔ دعوت دوستان (Referral) — طراحی Premium، فقط UI/UX (۲۰۲۶-۰۸-۰۲) ═══ */
.sl-ref-hero{text-align:center;padding:4px 4px 18px}
.sl-ref-hero-ico{width:60px;height:60px;border-radius:50%;margin:0 auto 12px;
 background:linear-gradient(135deg,#0A63FF,#7C3AED);display:flex;align-items:center;justify-content:center;
 font-size:28px;box-shadow:0 8px 20px rgba(10,99,255,.28)}
.sl-ref-hero-t{font-size:19px;font-weight:800;color:var(--ink)}
.sl-ref-hero-s{font-size:12.5px;color:var(--mu);margin-top:6px;line-height:1.8;padding:0 10px}
.sl-ref-card{position:relative;overflow:hidden;border-radius:24px;padding:20px 18px;margin-top:2px;
 background:linear-gradient(135deg,#151B4D 0%,#2B3A8F 55%,#7C3AED 100%);color:#fff;
 box-shadow:0 14px 30px rgba(76,29,220,.22);animation:slRefIn .45s ease both}
@keyframes slRefIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.sl-ref-card::before{content:'';position:absolute;width:220px;height:220px;border-radius:50%;
 background:radial-gradient(circle,rgba(255,255,255,.18),transparent 70%);top:-90px;left:-60px}
.sl-ref-card::after{content:'';position:absolute;width:180px;height:180px;border-radius:50%;
 background:radial-gradient(circle,rgba(255,255,255,.13),transparent 70%);bottom:-70px;right:-50px}
.sl-ref-card-l{position:relative;z-index:1;font-size:12px;font-weight:700;opacity:.82}
.sl-ref-link-box{position:relative;z-index:1;margin-top:8px;background:rgba(255,255,255,.14);
 border:1px solid rgba(255,255,255,.22);border-radius:14px;padding:12px 14px;font-size:12.5px;
 direction:ltr;text-align:center;word-break:break-all;backdrop-filter:blur(6px)}
.sl-ref-card-btns{position:relative;z-index:1;margin-top:14px;display:flex;flex-direction:column;gap:10px}
.sl-ref-btn-primary{display:block;width:100%;box-sizing:border-box;padding:14px;border:none;border-radius:14px;
 background:#fff;color:#151B4D;font-family:inherit;font-size:14.5px;font-weight:800;text-align:center;
 text-decoration:none;cursor:pointer;transition:transform .15s,opacity .15s}
.sl-ref-btn-primary:active{transform:scale(.97);opacity:.9}
.sl-ref-btn-secondary{display:block;width:100%;box-sizing:border-box;padding:12.5px;border-radius:14px;
 border:1.5px solid rgba(255,255,255,.35);background:rgba(255,255,255,.08);color:#fff;
 font-family:inherit;font-size:13.5px;font-weight:700;text-align:center;cursor:pointer;
 transition:transform .15s,opacity .15s}
.sl-ref-btn-secondary:active{transform:scale(.97);opacity:.85}
.sl-ref-stats{display:flex;gap:10px;margin:16px 0 0}
.sl-ref-stat{flex:1;min-width:0;background:var(--card);border-radius:16px;padding:14px 6px;
 text-align:center;box-shadow:var(--sh)}
.sl-ref-stat-ico{font-size:18px;margin-bottom:6px}
.sl-ref-stat-val{font-size:16.5px;font-weight:800;color:var(--ink);direction:ltr}
.sl-ref-stat-label{font-size:10.5px;color:var(--mu);margin-top:3px;font-weight:600}
.sl-ref-how{margin:18px 0 0;background:var(--card);border-radius:18px;padding:15px 16px 4px;box-shadow:var(--sh)}
.sl-ref-how-title{font-size:13.5px;font-weight:800;color:var(--ink);margin-bottom:6px}
.sl-ref-step{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:.5px solid var(--ln)}
.sl-ref-step:last-child{border-bottom:0}
.sl-ref-step-n{width:25px;height:25px;border-radius:50%;flex:none;direction:ltr;
 background:linear-gradient(135deg,#0A63FF,#7C3AED);color:#fff;font-size:12px;font-weight:800;
 display:flex;align-items:center;justify-content:center}
.sl-ref-step-t{font-size:13px;font-weight:600;color:var(--ink)}
.sl-ref-promo-title{margin:18px 0 8px;font-size:13px;font-weight:700;color:var(--mu)}
.sl-ref-promo-box{background:var(--card);border-radius:14px;padding:14px 16px;box-shadow:var(--sh);
 white-space:pre-wrap;font-size:12.5px;line-height:1.9;color:var(--ink)}
/* ═══ برش عکس پروفایل ═══ */
.sl-crop-view{width:240px;height:240px;border-radius:50%;overflow:hidden;position:relative;
 margin:4px auto 0;background:#111;touch-action:none;box-shadow:0 0 0 4000px rgba(0,0,0,.5)}
.sl-crop-img{position:absolute;top:50%;left:50%;transform-origin:center center;
 will-change:transform;-webkit-user-drag:none;user-select:none;pointer-events:none}
.sl-crop-zoom-row{display:flex;align-items:center;gap:10px;margin-top:22px;padding:0 4px}
.sl-crop-zoom-i{font-size:16px;color:var(--mu);flex:none}
.sl-crop-zoom{flex:1;accent-color:var(--br)}
/* دکمه‌های جابه‌جایی دقیق — چیدمان صلیبی (بالا / راست‌وچپ / پایین).
   ⚠️ `width:auto` اجباری است: Framework7 قاعدهٔ سراسری `button{width:100%}`
   دارد و بدون این، هر دکمه کل ردیف را می‌گیرد. */
.sl-crop-nudge{display:grid;grid-template-columns:repeat(3,40px);
 grid-template-rows:repeat(2,40px);gap:var(--s-2);justify-content:center;
 margin-top:var(--s-4)}
.sl-crop-nb{width:auto;box-sizing:border-box;display:flex;align-items:center;
 justify-content:center;border:0;border-radius:var(--r-md);
 background:var(--neutral-soft);color:var(--ink);font-size:13px;font-family:inherit;
 cursor:pointer;transition:transform var(--mo-fast) var(--mo-ease),opacity var(--mo-fast) var(--mo-ease)}
.sl-crop-nb:active{transform:scale(.92)}
.sl-crop-nb[disabled]{opacity:.3;pointer-events:none}
/* ▲ وسط ردیف اول، ▶ و ◀ کنار هم در ردیف دوم، ▼ وسط ردیف اول ستون سوم نیست —
   چیدمان صریح تا در RTL هم جای دکمه‌ها با معنایشان بخواند. */
.sl-crop-nb[data-ny="-1"]{grid-column:2;grid-row:1}
.sl-crop-nb[data-nx="1"]{grid-column:1;grid-row:2}   /* راست → ستون اول در RTL */
.sl-crop-nb[data-ny="1"]{grid-column:2;grid-row:2}
.sl-crop-nb[data-nx="-1"]{grid-column:3;grid-row:2}  /* چپ → ستون سوم در RTL */
.sl-crop-hint{display:none;margin-top:var(--s-3);font-size:var(--t-sm);
 line-height:1.8;color:var(--mu);text-align:center}
/* کنترل‌های زیر دایرهٔ برش باید *بالای* پردهٔ تیره (box-shadow گستردهٔ
   .sl-crop-view) رندر بشن — وگرنه دکمهٔ «تأیید و آپلود» کار می‌کنه ولی دیده
   نمی‌شه (گزارش مالک پروژه، بخش ۹۹.۱۴). */
.sl-crop-ctrls{position:relative;z-index:2;background:var(--bg);
 margin:18px -16px 0;padding:14px 16px 4px;border-radius:18px 18px 0 0}
/* لینک برگشت تب آموزش → ابزار مفید (بخش ۹۹.۱۴) — همون زبان بصری دکمهٔ
   «مرحله قبل» ویزاردها: پیل کوچک، فلش سمت چپِ متن در RTL. */
/* ⚠️ `a.` عمدیه: این لینک کلاس `tab-link` رو لازم داره تا Framework7 تب رو
   عوض کنه، ولی استایل پیش‌فرض `.tab-link` برای آیتم نوار پایین طراحی شده
   (فلکس ستونی و تمام‌عرض) و پیل رو خراب می‌کرد — همون کلاس تلهٔ مستندشدهٔ
   «هر دکمه/لینک تازه در ردیف فلکس باید width صریح داشته باشه». */
a.sl-subback{display:inline-flex;flex:none;flex-direction:row;align-items:center;gap:5px;
 width:auto;margin:2px 20px 0;padding:6px 11px;border-radius:999px;
 font-size:11.5px;font-weight:700;text-decoration:none;
 color:var(--mu);background:var(--card);border:1px solid var(--ln);box-shadow:var(--sh)}
.sl-subback-ic{font-size:14px;line-height:1;font-weight:800;opacity:.75}
.sl-wal-big{font-size:30px;font-weight:800;text-align:center;padding:10px 0 18px;color:var(--br)}
.sl-wal-big small{font-size:13px;color:var(--mu);font-weight:500}
.sl-wal-acts{margin:14px 0}


/* ═══ گردونهٔ شانس — تجربهٔ Premium Gamification (بازطراحی کامل UI) ═══
   منطق سمت‌سرور (core/wheel.py) دست‌نخورده؛ این فقط لایهٔ نمایش/انیمیشنه.
   پالت مستقل از تم (صفحهٔ بازی همیشه دارک‌پریمیوم) — deep navy/purple + طلا/بنفش. */
.sl-wg-host{padding:var(--sl-nav-top,calc(var(--sl-safe-top) + 44px)) 0 0!important;background:#0A0918}
.sl-wg-host .sl-acc-page{padding:0}
.sl-wg{--wg-gold:#F5C451;--wg-gold2:#E29B33;--wg-pur:#8B5CF6;--wg-blu:#38BDF8;
 --wg-ink:#FFFFFF;--wg-mu:rgba(255,255,255,.60);--wg-glass:rgba(255,255,255,.07);
 --wg-line:rgba(255,255,255,.12);
 position:relative;overflow:hidden;color:var(--wg-ink);
 min-height:calc(100vh - var(--sl-nav-top,calc(44px + var(--sl-safe-top))));
 padding:16px 16px calc(28px + env(safe-area-inset-bottom,0px));
 background:
  radial-gradient(120% 60% at 50% -8%, rgba(139,92,246,.38), transparent 60%),
  radial-gradient(90% 50% at 50% 105%, rgba(56,189,248,.16), transparent 60%),
  linear-gradient(180deg,#1B1740 0%,#141230 42%,#0A0918 100%);
 direction:rtl}
.sl-wg::before{content:"";position:absolute;top:-40px;right:-40px;width:200px;height:200px;
 border-radius:50%;background:radial-gradient(circle,rgba(245,196,81,.20),transparent 70%);filter:blur(8px);pointer-events:none}
.sl-wg::after{content:"";position:absolute;bottom:60px;left:-50px;width:220px;height:220px;
 border-radius:50%;background:radial-gradient(circle,rgba(139,92,246,.22),transparent 70%);filter:blur(10px);pointer-events:none}
.sl-wg>*{position:relative;z-index:1}

/* ── کارت کمپین / پاداش روزانه ── */
.sl-wg-hero{display:flex;align-items:center;gap:12px;background:var(--wg-glass);
 border:1px solid var(--wg-line);border-radius:18px;padding:13px 15px;
 -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.sl-wg-hero-ic{width:42px;height:42px;flex:none;border-radius:13px;display:grid;place-items:center;
 background:linear-gradient(145deg,var(--wg-gold),var(--wg-gold2));box-shadow:0 6px 16px rgba(226,155,51,.4)}
.sl-wg-hero-ic svg{width:23px;height:23px}
.sl-wg-hero-tx{flex:1;min-width:0}
.sl-wg-hero-t{font-size:14.5px;font-weight:800;line-height:1.5}
.sl-wg-hero-s{font-size:11.5px;color:var(--wg-mu);margin-top:2px;line-height:1.6}
.sl-wg-hero-badge{flex:none;text-align:center;background:rgba(245,196,81,.14);border:1px solid rgba(245,196,81,.3);
 border-radius:13px;padding:7px 12px}
.sl-wg-hero-badge b{display:block;font-size:19px;font-weight:900;color:var(--wg-gold);line-height:1;direction:ltr}
.sl-wg-hero-badge span{display:block;font-size:9px;color:var(--wg-mu);margin-top:3px}

/* ── صحنهٔ گردونه (چند لایه) ── */
.sl-wg-stage{position:relative;width:min(80vw,320px);aspect-ratio:1;margin:26px auto 30px}
.sl-wg-halo{position:absolute;inset:-16%;border-radius:50%;pointer-events:none;
 background:radial-gradient(circle,rgba(245,196,81,.30),transparent 62%);
 filter:blur(10px);animation:slWgHalo 3s ease-in-out infinite}
@keyframes slWgHalo{0%,100%{opacity:.5;transform:scale(.98)}50%{opacity:1;transform:scale(1.03)}}
/* حلقهٔ فلزی طلایی */
.sl-wg-ring{position:absolute;inset:0;border-radius:50%;padding:14px;
 background:conic-gradient(from 0deg,#7A5A16,#F7D67A,#C9962E,#FBE7A6,#8A6A1E,#F5C451,#7A5A16);
 box-shadow:0 0 0 1px rgba(0,0,0,.4),0 18px 44px rgba(0,0,0,.55),
  inset 0 2px 4px rgba(255,255,255,.5),inset 0 -3px 6px rgba(0,0,0,.4)}
.sl-wg-ring-in{position:absolute;inset:9px;border-radius:50%;
 box-shadow:inset 0 0 0 3px rgba(0,0,0,.35),inset 0 0 0 4px rgba(255,255,255,.06)}
/* لامپ‌های دور حلقه (JS تولید می‌کنه) */
.sl-wg-lights{position:absolute;inset:0;pointer-events:none;z-index:3}
.sl-wg-lamp{position:absolute;top:50%;left:50%;width:7px;height:7px;margin:-3.5px;border-radius:50%;
 background:radial-gradient(circle,#FFF7DA,#F5C451 60%,rgba(245,196,81,.2));
 box-shadow:0 0 6px 1px rgba(245,196,81,.8);animation:slWgLamp 1.4s ease-in-out infinite}
@keyframes slWgLamp{0%,100%{opacity:.35}50%{opacity:1}}
/* دیسک چرخنده */
.sl-wg-disc{position:absolute;inset:14px;border-radius:50%;z-index:2;overflow:hidden;
 box-shadow:inset 0 0 0 2px rgba(0,0,0,.25),inset 0 6px 18px rgba(0,0,0,.35);
 transform:rotate(0deg);transition:none;will-change:transform}
.sl-wg-disc.spinning{filter:saturate(1.05)}
.sl-wg-spokes{position:absolute;inset:0;pointer-events:none;z-index:2}
.sl-wg-spoke{position:absolute;top:50%;left:50%;width:50%;height:1.5px;transform-origin:0 0;
 background:linear-gradient(90deg,rgba(255,255,255,.02),rgba(255,255,255,.28))}
/* برچسب رادیال هر جایزه — بازطراحی Typography (۲۰۲۶-۰۸-۰۹):
   ساختار سه‌لایه: Segment (می‌چرخه) → .sl-wg-lbl-in (Counter-Rotation، محتوا رو
   همیشه افقی/خوانا نگه می‌داره) → آیکون + متن RTL واقعی. عرض/فونت با کلاس‌های
   دانسیتی (sl-wg-lbl-d6/d8/d10 روی خودِ .sl-wg-disc، بسته به تعداد جایزه) کمی
   کوچیک‌تر می‌شن — نه برای جا دادن یه متن خاصِ بلند، بلکه چون هندسهٔ خودِ Segment
   با افزایش تعداد باریک‌تر می‌شه (بدون این، متن‌های مجاور روی هم می‌افتن). متن تا
   ۲ خط با line-clamp مجازه (نه ellipsis تک‌خط قبلی) — برای همین باید ادمین بتونه
   یه «برچسب کوتاه گردونه» جدا از عنوان کامل تنظیم کنه (wheel_label، سمت سرور
   fallback به title می‌شه). */
.sl-wg-lbl{position:absolute;top:50%;left:50%;width:0;height:0;transform-origin:0 0;z-index:2}
.sl-wg-lbl-in{position:absolute;left:0;direction:rtl;
 display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:58px;text-align:center;
 filter:drop-shadow(0 1px 2px rgba(0,0,0,.55))}
.sl-wg-lbl-in svg{width:20px;height:20px;flex:none}
.sl-wg-lbl-in img{width:20px;height:20px;flex:none}
.sl-wg-lbl-t{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
 width:100%;font-size:9.5px;font-weight:800;color:#fff;line-height:1.28;direction:rtl;unicode-bidi:plaintext;
 text-shadow:0 1px 2px rgba(0,0,0,.6);word-break:break-word}
.sl-wg-lbl-pct{font-size:8.5px;font-weight:800;color:#fff;background:rgba(0,0,0,.32);
 border-radius:999px;padding:1px 7px;direction:ltr;white-space:nowrap}
/* دانسیتی بالاتر (۷+‏/۹+‏ جایزهٔ فعال) — Segmentها باریک‌تر، پس محتوا هم کمی جمع‌تر */
.sl-wg-disc.sl-wg-d7 .sl-wg-lbl-in{width:50px}
.sl-wg-disc.sl-wg-d7 .sl-wg-lbl-in svg,.sl-wg-disc.sl-wg-d7 .sl-wg-lbl-in img{width:17px;height:17px}
.sl-wg-disc.sl-wg-d7 .sl-wg-lbl-t{font-size:8.5px}
.sl-wg-disc.sl-wg-d9 .sl-wg-lbl-in{width:44px;gap:2px}
.sl-wg-disc.sl-wg-d9 .sl-wg-lbl-in svg,.sl-wg-disc.sl-wg-d9 .sl-wg-lbl-in img{width:15px;height:15px}
.sl-wg-disc.sl-wg-d9 .sl-wg-lbl-t{font-size:7.8px;line-height:1.2}
.sl-wg-lbl.win .sl-wg-lbl-in{animation:slWgWin .5s ease infinite alternate}
/* rotate(var(--rot)) — رفع باگ واقعی (۲۰۲۶-۰۸-۱۰): این keyframe کل transform رو
   override می‌کرد (فقط translate+scale، بدون rotate) — یعنی دقیقاً روی برچسب
   برنده (تنها جایی که این انیمیشن واقعاً اجرا می‌شه)، Counter-Rotation درست
   بعد از هر Spin از بین می‌رفت. --rot همون مقدار زندهٔ صحیحی است که JS هر بار
   (buildWheel/doWheelSpin) روی خودِ عنصر ست می‌کنه. */
@keyframes slWgWin{from{transform:translate(-50%,-50%) rotate(var(--rot,0deg)) scale(1)}to{transform:translate(-50%,-50%) rotate(var(--rot,0deg)) scale(1.14)}}
/* هاب مرکزی برجسته */
.sl-wg-hub{position:absolute;top:50%;left:50%;width:23%;height:23%;transform:translate(-50%,-50%);
 border-radius:50%;z-index:4;display:grid;place-items:center;
 background:radial-gradient(circle at 38% 32%,#FBE7A6,#F5C451 45%,#C9962E 100%);
 box-shadow:0 0 0 4px #0A0918,0 0 0 6px rgba(245,196,81,.5),0 8px 18px rgba(0,0,0,.5),
  inset 0 2px 3px rgba(255,255,255,.7),inset 0 -3px 5px rgba(148,101,20,.6)}
.sl-wg-hub svg{width:52%;height:52%;filter:drop-shadow(0 1px 1px rgba(148,101,20,.6))}
/* نشانگر بالای گردونه */
.sl-wg-ptr{position:absolute;top:-3%;left:50%;transform:translateX(-50%);z-index:5;
 width:26px;height:34px;filter:drop-shadow(0 3px 4px rgba(0,0,0,.5))}
.sl-wg-ptr svg{width:100%;height:100%}

/* ── CTA اصلی — نصف اندازهٔ قبلی، رنگ طلایی/کهربایی قبلی برگردونده شد (طبق درخواست
   صریح مالک پروژه — لهجهٔ نارنجی رد شد، فقط سایز/شکل جدید موند) ── */
.sl-wg-cta{display:block;width:43%;max-width:150px;margin:0 auto;border:none;border-radius:11px;padding:7px 10px;
 font-family:inherit;font-size:11.5px;font-weight:900;color:#3A2606;cursor:pointer;
 background:linear-gradient(180deg,#FCE08A,#F5C451 45%,#E29B33);
 box-shadow:0 6px 16px rgba(226,155,51,.5),inset 0 2px 2px rgba(255,255,255,.6),inset 0 -3px 4px rgba(148,101,20,.35);
 transition:transform .12s,box-shadow .12s;animation:slWgPulse 2.6s ease-in-out infinite}
@keyframes slWgPulse{0%,100%{box-shadow:0 6px 16px rgba(226,155,51,.45),inset 0 2px 2px rgba(255,255,255,.6),inset 0 -3px 4px rgba(148,101,20,.35)}
 50%{box-shadow:0 8px 22px rgba(245,196,81,.7),inset 0 2px 2px rgba(255,255,255,.6),inset 0 -3px 4px rgba(148,101,20,.35)}}
.sl-wg-cta:active{transform:scale(.97)}
.sl-wg-cta:disabled{background:linear-gradient(180deg,#4A4763,#3A3852);color:rgba(255,255,255,.5);
 box-shadow:none;animation:none;cursor:not-allowed}
.sl-wg-cta-sub{text-align:center;font-size:12px;color:var(--wg-mu);font-weight:600;margin-top:10px}
.sl-wg-cta-sub b{color:var(--wg-gold);font-weight:800}

/* ── بخش‌ها (جوایز من / فعالیت) ── */
.sl-wg-sec{margin-top:24px}
.sl-wg-sec-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px}
.sl-wg-sec-h b{font-size:14.5px;font-weight:800}
.sl-wg-sec-h a{font-size:12px;font-weight:700;color:var(--wg-gold);text-decoration:none}
.sl-wg-reward{display:flex;align-items:center;gap:12px;background:var(--wg-glass);
 border:1px solid var(--wg-line);border-radius:15px;padding:12px 14px;margin-bottom:9px;
 -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.sl-wg-reward-ic{width:38px;height:38px;flex:none;border-radius:11px;display:grid;place-items:center;
 background:rgba(255,255,255,.08)}
.sl-wg-reward-ic svg{width:20px;height:20px}
.sl-wg-reward-tx{flex:1;min-width:0}
.sl-wg-reward-t{font-size:13.5px;font-weight:800}
.sl-wg-reward-s{font-size:11px;color:var(--wg-mu);margin-top:2px}
.sl-wg-reward-code{flex:none;font-size:12px;font-weight:800;letter-spacing:.5px;direction:ltr;
 color:var(--wg-gold);background:rgba(245,196,81,.12);border:1px dashed rgba(245,196,81,.35);
 border-radius:9px;padding:5px 9px}
.sl-wg-act{display:flex;align-items:center;gap:11px;padding:9px 4px;border-bottom:1px solid var(--wg-line)}
.sl-wg-act:last-child{border-bottom:0}
.sl-wg-act-ic{width:32px;height:32px;flex:none;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.06)}
.sl-wg-act-ic svg{width:17px;height:17px}
.sl-wg-act-tx{flex:1;min-width:0}
.sl-wg-act-t{font-size:12.5px;font-weight:700}
.sl-wg-act-d{font-size:10.5px;color:var(--wg-mu);margin-top:1px}
.sl-wg-empty{text-align:center;color:var(--wg-mu);font-size:12.5px;padding:14px}

/* ── مودال برد (شیشه‌ای) ── */
.sl-wm-ov{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;
 padding:24px;background:rgba(6,5,18,.68);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
 animation:slWmFade .28s ease;direction:rtl}
@keyframes slWmFade{from{opacity:0}to{opacity:1}}
.sl-wm{position:relative;width:100%;max-width:330px;border-radius:26px;padding:30px 22px 22px;text-align:center;
 color:#fff;overflow:hidden;
 background:linear-gradient(180deg,rgba(43,37,84,.92),rgba(20,18,48,.94));
 border:1px solid rgba(255,255,255,.16);
 box-shadow:0 24px 70px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.14);
 -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
 animation:slWmPop .42s cubic-bezier(.2,.9,.25,1.2)}
@keyframes slWmPop{from{opacity:0;transform:translateY(18px) scale(.9)}to{opacity:1;transform:none}}
.sl-wm-glow{position:absolute;top:-30%;left:50%;transform:translateX(-50%);width:140%;height:60%;
 background:radial-gradient(circle,rgba(245,196,81,.35),transparent 65%);filter:blur(8px);pointer-events:none}
.sl-wm-ic{position:relative;width:88px;height:88px;margin:0 auto 14px;border-radius:26px;display:grid;place-items:center;
 background:linear-gradient(145deg,var(--wg-gold,#F5C451),var(--wg-gold2,#E29B33));
 box-shadow:0 14px 34px rgba(226,155,51,.5),inset 0 2px 3px rgba(255,255,255,.6)}
.sl-wm-ic svg{width:46px;height:46px}
.sl-wm-ic.nowin{background:linear-gradient(145deg,#4A4763,#33314D);box-shadow:0 14px 30px rgba(0,0,0,.4)}
.sl-wm-eyebrow{font-size:13px;font-weight:800;color:var(--wg-gold);letter-spacing:.5px}
.sl-wm-title{font-size:15px;color:rgba(255,255,255,.72);margin-top:8px;font-weight:600}
.sl-wm-value{font-size:30px;font-weight:900;margin-top:6px;line-height:1.2;
 background:linear-gradient(180deg,#FCE08A,#F5C451);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sl-wm-value.plain{-webkit-text-fill-color:#fff;background:none}
.sl-wm-desc{font-size:12.5px;color:rgba(255,255,255,.6);margin-top:10px;line-height:1.8}
.sl-wm-codewrap{margin-top:18px}
.sl-wm-codelabel{font-size:11px;color:rgba(255,255,255,.55);margin-bottom:7px}
.sl-wm-code{display:flex;align-items:center;justify-content:center;gap:8px;
 background:rgba(255,255,255,.06);border:1.5px dashed rgba(245,196,81,.45);border-radius:14px;padding:12px}
.sl-wm-code code{font-size:19px;font-weight:900;letter-spacing:1.5px;direction:ltr;color:#FCE08A}
/* width:auto — همون تلهٔ سراسری button{width:100%} فریم‌ورک F7 (بالاتر مستند شده). */
.sl-wm-code-copy{width:auto;background:rgba(245,196,81,.16);border:none;border-radius:9px;padding:6px 10px;
 color:#FCE08A;font-size:12px;font-weight:800;cursor:pointer;font-family:inherit;white-space:nowrap}
.sl-wm-exp{font-size:11px;color:rgba(255,255,255,.5);margin-top:9px}
.sl-wm-acts{display:flex;flex-direction:column;gap:9px;margin-top:22px}
.sl-wm-btn{display:block;width:100%;border:none;border-radius:15px;padding:14px;font-family:inherit;
 font-size:14.5px;font-weight:800;cursor:pointer;transition:transform .1s}
.sl-wm-btn:active{transform:scale(.97)}
.sl-wm-btn-p{background:linear-gradient(180deg,#FCE08A,#E29B33);color:#3A2606;
 box-shadow:0 8px 20px rgba(226,155,51,.45)}
.sl-wm-btn-s{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.16)}
.sl-wheel-confetti{position:absolute;inset:0;pointer-events:none;z-index:6}

/* ── نمایش خودکار گردونه (Auto Open) — Modal ظریف، Fade+Scale+Glow، بدون مزاحمت ── */
.sl-ao-ov{position:fixed;inset:0;z-index:99998;display:flex;align-items:center;justify-content:center;
 padding:24px;background:rgba(6,5,18,0);-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);
 transition:background .28s ease,backdrop-filter .28s ease;direction:rtl}
.sl-ao-ov.in{background:rgba(6,5,18,.62);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
.sl-ao{position:relative;width:100%;max-width:300px;border-radius:24px;padding:28px 22px 20px;text-align:center;
 color:#fff;overflow:hidden;background:linear-gradient(180deg,rgba(43,37,84,.94),rgba(20,18,48,.96));
 border:1px solid rgba(255,255,255,.16);box-shadow:0 20px 60px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.14);
 -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
 opacity:0;transform:translateY(14px) scale(.92);transition:opacity .32s cubic-bezier(.2,.9,.25,1.2),transform .32s cubic-bezier(.2,.9,.25,1.2)}
.sl-ao-ov.in .sl-ao{opacity:1;transform:none}
.sl-ao-glow{position:absolute;top:-25%;left:50%;transform:translateX(-50%);width:130%;height:55%;
 background:radial-gradient(circle,rgba(245,196,81,.32),transparent 65%);filter:blur(8px);pointer-events:none}
.sl-ao-ic{position:relative;font-size:46px;line-height:1;margin-bottom:10px}
.sl-ao-t{position:relative;font-size:16px;font-weight:800}
.sl-ao-s{position:relative;font-size:12.5px;color:rgba(255,255,255,.62);margin-top:6px;line-height:1.7}
.sl-ao-acts{position:relative;display:flex;flex-direction:column;gap:8px;margin-top:20px}
.sl-ao-btn{display:block;width:100%;border:none;border-radius:14px;padding:12px;font-family:inherit;
 font-size:13.5px;font-weight:800;cursor:pointer;transition:transform .1s}
.sl-ao-btn:active{transform:scale(.97)}
.sl-ao-btn-p{background:linear-gradient(180deg,#FCE08A,#E29B33);color:#3A2606;box-shadow:0 8px 18px rgba(226,155,51,.4)}
.sl-ao-btn-s{background:rgba(255,255,255,.07);color:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.14)}

/* ── «جوایز من» (صفحهٔ کامل) — کارت‌های پریمیوم ── */
.sl-pz-list{display:flex;flex-direction:column;gap:11px}
.sl-pz{display:flex;gap:13px;background:var(--card);border-radius:17px;padding:14px;box-shadow:var(--sh);
 border:1px solid var(--ln);position:relative;overflow:hidden}
.sl-pz-ic{width:46px;height:46px;flex:none;border-radius:13px;display:grid;place-items:center;color:#fff}
.sl-pz-ic svg{width:24px;height:24px}
.sl-pz-bd{flex:1;min-width:0}
.sl-pz-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sl-pz-val{font-size:15px;font-weight:800;color:var(--ink)}
.sl-pz-badge{font-size:10.5px;font-weight:800;white-space:nowrap;border-radius:999px;padding:3px 9px}
.sl-pz-badge.active{color:#0E9F5E;background:rgba(34,197,94,.14)}
.sl-pz-badge.used,.sl-pz-badge.inactive{color:var(--mu);background:rgba(142,142,147,.14)}
.sl-pz-badge.expired,.sl-pz-badge.failed{color:#EF4444;background:rgba(239,68,68,.13)}
.sl-pz-badge.delivered{color:#0E9F5E;background:rgba(34,197,94,.14)}
.sl-pz-badge.applied{color:#6366F1;background:rgba(99,102,241,.14)}
.sl-pz-badge.pending_shipment{color:#D97706;background:rgba(245,158,11,.15)}
.sl-pz-desc{font-size:12px;color:var(--mu);margin-top:4px;line-height:1.7}
.sl-pz-src{font-size:10.5px;color:var(--mu);margin-top:3px;opacity:.85}
.sl-pz-code{display:flex;align-items:center;gap:8px;margin-top:10px;background:var(--bg);
 border:1px dashed var(--ln);border-radius:11px;padding:8px 11px}
.sl-pz-code code{flex:1;font-size:14px;font-weight:800;letter-spacing:1px;direction:ltr;color:var(--ink)}
/* width:auto — همون تلهٔ سراسری button{width:100%} فریم‌ورک F7 (بالاتر مستند شده):
   بدون این، دکمهٔ کپی کل ردیف رو می‌گرفت و خودِ کد تخفیف به دو خط می‌شکست. */
.sl-pz-code-btn{width:auto;background:var(--br);color:#fff;border:none;border-radius:9px;padding:6px 12px;
 font-size:11.5px;font-weight:800;cursor:pointer;font-family:inherit;white-space:nowrap}
.sl-pz-exp{font-size:11px;color:var(--mu);margin-top:8px}
.sl-pz-scope{font-size:12px;font-weight:700;color:var(--br);margin-top:5px}
.sl-pz-dr{display:flex;align-items:center;justify-content:space-between;font-size:11.5px;
 color:var(--mu);margin-top:5px;padding-top:5px;border-top:1px dashed var(--ln)}
.sl-pz-dr:first-of-type{border-top:none;padding-top:0}
.sl-pz-dr b{color:var(--ink);font-weight:700}
.sl-pz-timer{margin-top:8px;font-size:13px;font-weight:800;color:#D97706;direction:ltr;text-align:right}
.sl-pz-timer-exp{color:#EF4444}
.sl-pz-acts{margin-top:9px}
.sl-pz-scope-btn{background:transparent;border:1.5px solid var(--br);color:var(--br);border-radius:9px;
 padding:6px 12px;font-size:11.5px;font-weight:800;cursor:pointer;font-family:inherit;width:100%}
.sl-pz-code-btn:disabled{opacity:.5;cursor:default}
/* فرم ثبت آدرس هدیهٔ فیزیکی (بخش ۹۹) */
.sl-pz-gift-form{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.sl-pz-gf-in{width:100%;box-sizing:border-box;border:1px solid var(--ln);border-radius:10px;
 background:var(--card);color:var(--ink,inherit);padding:9px 11px;font-size:13px;font-family:inherit;resize:none}
.sl-pz-gf-send{width:100%;box-sizing:border-box;background:linear-gradient(145deg,#F59E0B,#E29B33);color:#fff;
 border:0;border-radius:10px;padding:10px;font-size:13px;font-weight:800;cursor:pointer;font-family:inherit}
.sl-pz-gf-send:disabled{opacity:.6}
.sl-pz-gf-err{font-size:12px;color:#EF4444;font-weight:700}
.sl-pz-gf-ok{font-size:13px;color:#16A34A;font-weight:800;padding:10px 0}
.sl-pz.is-dim{opacity:.62}
.sl-pz-filters{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:14px;scrollbar-width:none}
.sl-pz-filters::-webkit-scrollbar{display:none}
.sl-pz-chip{flex:none;font-size:12.5px;font-weight:700;padding:7px 14px;border-radius:999px;cursor:pointer;
 background:var(--card);border:1px solid var(--ln);color:var(--mu)}
.sl-pz-chip.on{background:var(--br);color:#fff;border-color:var(--br)}

/* ═══ کارشناسی هوشمند قیمت آیفون — Act 1/2/3 (مینی‌اپ) ═══
   موتور مرحله‌ای شرطی سمت کلاینت، دقیقاً منطق bot.py:_iv_step_skip. ⚠️ برخلاف
   گردونه/دعوت دوستان (که عمداً همیشه دارک‌پریمیوم هستن)، این صفحه طبق درخواست صریح
   مالک پروژه باید مثل بقیهٔ صفحات اپ از تم روشن/تاریک دستگاه پیروی کنه — همهٔ
   توکن‌های رنگی از `--bg`/`--card`/`--ink`/`--mu`/`--ln`/`--sh` سراسری (بالای همین
   فایل) می‌خونن، نه رنگ ثابت. فقط `--iv-blu`/`--iv-blu2` (لهجهٔ آبی برای دکمه/گیج)
   مستقل از تمن، چون این‌ها فقط رنگ لهجه‌ان نه پس‌زمینه. */
/* ⚠️ ارتفاع navbar پاپ‌آپ از قبل ۴۴px هاردکد بود — در حالت PWA نصب‌شده
   (standalone) خودِ navbar ناحیهٔ status bar رو هم می‌گیره و بلندتر می‌شه، پس
   محتوا زیرش می‌رفت و «مرحله قبل» دقیقاً روی «بستن» می‌افتاد (باگ گزارش‌شده با
   اسکرین‌شات؛ بازتولیدشده با مرورگر واقعی: ۳۵px همپوشانی). حالا `--sl-nav-top`
   در زمان اجرا از موقعیت واقعی navbar اندازه گرفته می‌شه (app.js:_slSyncPopupTop)
   و این مقادیر فقط fallback‌ان. */
.sl-iv-host{padding:var(--sl-nav-top,calc(var(--sl-safe-top) + 44px)) 0 0!important;background:var(--bg)}
.sl-iv-host .sl-acc-page{padding:0}
.sl-iv{--iv-blu:#0A84FF;--iv-blu2:#0064D6;--iv-ink:var(--ink);--iv-mu:var(--mu);
 --iv-card:var(--card);--iv-line:var(--ln);
 position:relative;color:var(--iv-ink);min-height:calc(100vh - var(--sl-nav-top,calc(44px + var(--sl-safe-top))));
 padding:0 16px calc(28px + env(safe-area-inset-bottom,0px))}
html.dark .sl-iv,:root.dark .sl-iv{--iv-blu2:#38BDF8}
.sl-iv-top{position:sticky;top:0;z-index:5;background:linear-gradient(var(--bg) 78%,rgba(0,0,0,0));
 padding:10px 0 14px;display:flex;align-items:center;gap:10px}
/* ⚠️ width:auto صریح اجباریه — Framework7 یه قاعدهٔ پایهٔ سراسری `button{width:100%}` داره
   (همون چیزی که برای .sl-sp-send هم بالاتر مستند شده). نسخهٔ دایره‌ای قدیمی این دکمه
   `width:34px` صریح داشت پس مصون بود؛ نسخهٔ متنی تازه بدون width، تمام‌عرض می‌شد و چون
   `flex:none` است اصلاً کوچک نمی‌شد — در نتیجه .sl-iv-bar (که flex:1 یعنی flex-basis:0 داره)
   تا صفر فشرده و کاملاً نامرئی می‌شد. بازتولیدشده با مرورگر واقعی: دکمه ۳۶۱px، نوار ۰px. */
/* دکمهٔ «مرحله قبل»: چیپ ته‌رنگ‌دار هم‌رنگ لهجهٔ ویزارد — نسخهٔ قبلی یک پیل
   سفیدِ بی‌رنگ روی زمینهٔ روشن بود که نه دیده می‌شد نه شبیه بقیهٔ اپ بود. */
.sl-iv-back{flex:none;width:auto;display:flex;align-items:center;gap:4px;padding:7px 12px;border-radius:999px;
 border:1px solid color-mix(in srgb,var(--iv-blu) 22%,transparent);
 background:color-mix(in srgb,var(--iv-blu) 10%,transparent);
 color:var(--iv-blu);font-size:11px;
 font-weight:800;line-height:1;cursor:pointer;box-shadow:none;font-family:inherit;white-space:nowrap;
 transition:background .15s ease,transform .12s ease}
.sl-iv-back-ic{font-size:12px;font-weight:800}
.sl-iv-back:active{transform:scale(.95)}
/* 🔴 `display:none`، نه `visibility:hidden`: با visibility دکمه جعبه‌اش را نگه
   می‌دارد و چون `flex:none` است، `.sl-iv-bar` (که `flex:1` دارد) دقیقاً به
   اندازهٔ همان دکمه کوتاه‌تر می‌شود. نتیجه‌اش این بود که نوارِ **واقعاً ۱۰۰٪**
   صفحهٔ گزارش نهایی فقط تا ~۷۵٪ عرض ردیف می‌رسید و کاربر «تموم نشد» می‌دید —
   یعنی یک عنصر مخفی، درصد را دروغ نشان می‌داد. (اندازه‌گیری‌شده با مرورگر
   واقعی، نه چشمی.) */
.sl-iv-back.hide{display:none}
.sl-iv-bar{direction:ltr;flex:1;height:5px;border-radius:99px;background:var(--iv-line);overflow:hidden}
.sl-iv-bar-f{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--iv-blu),var(--iv-blu2));
 transition:width .35s cubic-bezier(.22,1,.36,1)}
.sl-iv-body{animation:slIvIn .32s cubic-bezier(.22,1,.36,1)}
@keyframes slIvIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.sl-iv-h1{font-size:15.5px;font-weight:800;color:var(--iv-mu);margin-bottom:2px}
.sl-iv-sub{font-size:18px;font-weight:800;line-height:1.6;margin:6px 0 16px}
.sl-iv-hint{font-size:11.5px;color:var(--iv-mu);margin:-10px 0 14px}
.sl-iv-empty,.sl-empty{color:var(--iv-mu)}

/* ── شبکهٔ انتخاب (سری/مدل/ظرفیت/رنگ/پارت/ضرایب) ── */
.sl-iv-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sl-iv-grid-3{grid-template-columns:1fr 1fr 1fr}
.sl-iv-opt{background:var(--iv-card);border:1px solid var(--iv-line);border-radius:16px;box-shadow:var(--sh);
 padding:16px 10px;text-align:center;cursor:pointer;transition:transform .12s,border-color .12s,background .12s}
.sl-iv-opt:active{transform:scale(.96)}
.sl-iv-opt.sel{border-color:var(--iv-blu);background:rgba(10,132,255,.12)}
.sl-iv-opt-ic{display:block;font-size:26px;margin-bottom:8px}
.sl-iv-opt-img{display:block;width:100%;height:52px;object-fit:contain;margin-bottom:8px}
.sl-iv-opt-t{font-size:13px;font-weight:700;line-height:1.5}
.sl-iv-opt-w{grid-column:span 1;padding:15px 8px}
.sl-iv-grid .sl-iv-opt-w:only-child,.sl-iv-grid .sl-iv-opt-w:last-child:nth-child(odd){grid-column:1/-1}
.sl-iv-pill{padding:14px 6px;font-size:14px;font-weight:800}
.sl-iv-color{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 6px}
.sl-iv-color-sw{width:34px;height:34px;border-radius:50%;border:2px solid var(--iv-card);
 box-shadow:0 0 0 1.5px var(--iv-line),0 2px 6px rgba(0,0,0,.15)}
.sl-iv-chk{margin-left:2px}

/* ═══ بازطراحی ظاهری Act 1/2 (انتخاب سری/مدل) — کارشناسی قیمت + سلامت آیفون ═══
   کلاس‌های اختصاصی تازه، کاملاً مستقل از .sl-iv-opt/.sl-iv-grid بالا (که بقیهٔ مراحل
   ویزارد — ظرفیت/رنگ/پارت/ضرایب/... — همچنان دقیقاً همون‌طور که بودن ازشون استفاده
   می‌کنن) — طبق دستور صریح، بازطراحی فقط مرحلهٔ انتخاب سری/مدله، نه کل جریان؛ با کلاس
   جدا هیچ اثر جانبی رو بقیهٔ صفحات ویزارد نمی‌ذاره. لهجهٔ رنگ اختصاصی همین کارت‌ها:
   آبی برای کارشناسی قیمت، سبز/فیروزه‌ای برای سلامت آیفون (override زیر .sl-ih) —
   فقط رو همین عناصر تازه، نه سراسر ویزارد (پیشرفت/CTA/نتیجهٔ نهایی دست‌نخورده می‌مونن،
   چون خارج از اسکوپ دو مرحلهٔ درخواستی‌ان). */
.sl-iv-headline{margin:2px 0 18px}
.sl-iv-headline-ctx{display:inline-flex;align-items:center;font-size:11.5px;font-weight:700;
 color:var(--iv-dev-a,var(--iv-blu));background:var(--iv-dev-a-soft,rgba(10,132,255,.10));
 padding:4px 11px;border-radius:999px;margin-bottom:9px}
.sl-iv-headline-t{font-size:20px;font-weight:800;line-height:1.4;color:var(--iv-ink)}
.sl-iv-headline-s{font-size:13px;font-weight:600;color:var(--iv-mu);margin-top:4px;line-height:1.6}

.sl-iv-devgrid{--iv-dev-a:var(--iv-blu);--iv-dev-a2:var(--iv-blu2);--iv-dev-a-soft:rgba(10,132,255,.10);
 display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sl-ih .sl-iv-devgrid,.sl-ih .sl-iv-headline-ctx{--iv-dev-a:#0EA5A6;--iv-dev-a2:#0C8A8B;--iv-dev-a-soft:rgba(14,165,166,.12)}
html.dark .sl-ih .sl-iv-devgrid,:root.dark .sl-ih .sl-iv-devgrid,
html.dark .sl-ih .sl-iv-headline-ctx,:root.dark .sl-ih .sl-iv-headline-ctx{--iv-dev-a:#2DD4CF}

.sl-iv-devcard{position:relative;display:flex;flex-direction:column;background:var(--iv-card);
 border:1px solid var(--iv-line);border-radius:22px;box-shadow:var(--sh);padding:14px 12px 12px;
 text-align:right;cursor:pointer;-webkit-tap-highlight-color:transparent;
 transition:transform .12s,border-color .12s,background .12s,box-shadow .12s}
.sl-iv-devcard:active{transform:scale(.96)}
.sl-iv-devcard.sel{border-color:var(--iv-dev-a);background:var(--iv-dev-a-soft);
 box-shadow:0 0 0 1px var(--iv-dev-a) inset}
.sl-iv-devcard-check{position:absolute;top:9px;left:9px;width:19px;height:19px;border-radius:50%;
 background:var(--iv-dev-a);color:#fff;display:none;align-items:center;justify-content:center}
.sl-iv-devcard.sel .sl-iv-devcard-check{display:flex}
.sl-iv-devcard-check svg{width:11px;height:11px}
.sl-iv-devcard-imgbox{width:100%;height:72px;display:flex;align-items:center;justify-content:center;
 margin-bottom:9px;flex:none}
.sl-iv-devcard-imgbox img{max-width:86%;max-height:100%;object-fit:contain;display:block}
.sl-iv-devcard-ic{width:36px;height:36px;color:var(--iv-mu);opacity:.5}
.sl-iv-devcard-t{font-size:13.5px;font-weight:800;line-height:1.4;color:var(--iv-ink)}
.sl-iv-devcard-y{font-size:11px;color:var(--iv-mu);margin-top:2px;font-weight:600}
/* توجه: در dir=rtl داخل ظرف flex-column، align-self:flex-end فیزیکی سمت چپه — عمداً
   برای نشستن شورون در انتهای مسیر خواندن، طبق همون الگوی مستندشدهٔ تب «ابزار مفید». */
.sl-iv-devcard-arrow{align-self:flex-end;margin-top:auto;padding-top:9px;opacity:.3;
 color:var(--iv-mu);display:flex}
.sl-iv-devcard-arrow svg{width:14px;height:14px}

/* ── بله/خیر (تست امکانات) ── */
.sl-iv-yn{display:flex;flex-direction:column;gap:11px;margin-top:6px}
.sl-iv-yn-btn{padding:16px;border-radius:16px;border:1.5px solid var(--iv-line);background:var(--iv-card);
 box-shadow:var(--sh);color:var(--iv-ink);font-family:inherit;font-size:14.5px;font-weight:800;cursor:pointer}
.sl-iv-yn-btn.yes{border-color:rgba(34,197,94,.5);background:rgba(34,197,94,.12)}
.sl-iv-yn-btn.no{border-color:rgba(239,68,68,.5);background:rgba(239,68,68,.12)}
.sl-iv-yn-btn:active{transform:scale(.98)}

/* ── ورودی متن (شهر) ── */
.sl-iv-input{width:100%;box-sizing:border-box;background:var(--iv-card);border:1.5px solid var(--iv-line);
 border-radius:14px;padding:14px;color:var(--iv-ink);font-family:inherit;font-size:14px;margin-bottom:10px}
.sl-iv-input::placeholder{color:var(--iv-mu)}

/* ── فوتر/دکمهٔ ادامه ── */
.sl-iv-footer{margin-top:18px;display:flex;flex-direction:column;gap:10px}
.sl-iv-cta{display:block;width:100%;box-sizing:border-box;border:none;border-radius:15px;padding:15px;
 font-family:inherit;font-size:14.5px;font-weight:800;color:#fff;cursor:pointer;
 background:linear-gradient(135deg,var(--iv-blu2),var(--iv-blu));
 box-shadow:0 8px 22px rgba(10,132,255,.3);transition:transform .12s}
.sl-iv-cta:active{transform:scale(.97)}
.sl-iv-cta.primary{background:linear-gradient(135deg,#0EA5E9,#34D399)}
.sl-iv-skip{background:transparent;border:none;color:var(--iv-mu);font-family:inherit;font-size:12.5px;
 font-weight:700;text-align:center;cursor:pointer;padding:4px}

/* ── خلاصه (قبل از محاسبه) ── */
.sl-iv-summary-ic{font-size:44px;text-align:center;margin:10px 0 6px}
.sl-iv-summary-t{font-size:17px;font-weight:800;text-align:center}
.sl-iv-summary-s{font-size:12.5px;color:var(--iv-mu);text-align:center;margin-top:6px;line-height:1.8}

/* ── Act 3: کارت نتیجه (Reveal) ── */
.sl-iv-reveal{padding-top:6px}
.sl-iv-cert{position:relative;overflow:hidden;border-radius:26px;padding:22px 18px;
 background:var(--iv-card);border:1px solid var(--iv-line);box-shadow:var(--sh)}
.sl-iv-cert-glow{position:absolute;top:-70px;right:-60px;width:220px;height:220px;border-radius:50%;
 background:radial-gradient(circle,rgba(10,132,255,.16),transparent 65%);filter:blur(10px);pointer-events:none}
.sl-iv-cert-brand{position:relative;font-size:10.5px;font-weight:800;letter-spacing:.6px;color:var(--iv-blu);
 text-align:center}
.sl-iv-cert-model{position:relative;font-size:17px;font-weight:800;text-align:center;margin-top:8px}
.sl-iv-cert-meta{position:relative;font-size:12px;color:var(--iv-mu);text-align:center;margin-top:3px}
.sl-iv-tier{position:relative;margin-top:18px;text-align:center}
.sl-iv-tier-l{font-size:12.5px;font-weight:800;color:var(--iv-mu)}
.sl-iv-tier-s{font-size:10.5px;color:var(--iv-mu);opacity:.75;margin-top:4px;line-height:1.7;padding:0 6px}
.sl-iv-tier-v{font-size:17px;font-weight:800;margin-top:8px;direction:ltr;display:inline-flex;
 align-items:baseline;gap:5px;color:var(--iv-ink)}
.sl-iv-tier-v small{font-size:11px;font-weight:600;opacity:.7}
.sl-iv-tier-v.big{font-size:28px;font-weight:900;color:var(--iv-blu)}
.sl-iv-tier.main{margin-top:16px}
.sl-iv-tier.offer .sl-iv-tier-v{color:#0E9F5E}
.sl-iv-div{position:relative;height:1px;margin:16px 6px;background:repeating-linear-gradient(90deg,
 var(--iv-line) 0 6px,transparent 6px 12px)}
.sl-iv-score-row{position:relative;display:flex;align-items:center;justify-content:center;gap:16px;
 margin-top:20px;padding-top:16px;border-top:1px solid var(--iv-line)}
.sl-iv-gauge{position:relative;width:64px;height:64px}
.sl-iv-gauge-svg{width:100%;height:100%;transform:rotate(-90deg)}
.sl-iv-gauge-bg{fill:none;stroke:var(--iv-line);stroke-width:9}
.sl-iv-gauge-fg{fill:none;stroke-width:9;stroke-linecap:round}
.sl-iv-gauge-num{position:absolute;inset:0;display:grid;place-items:center;font-size:16px;font-weight:900;
 color:var(--iv-ink);direction:ltr}
.sl-iv-verdict{font-size:14px;font-weight:800}
.sl-iv-report{position:relative;font-size:12px;color:var(--iv-mu);line-height:1.9;margin-top:16px;
 padding-top:14px;border-top:1px solid var(--iv-line)}

/* ── تحلیل هوش مصنوعی ── */
.sl-iv-ai{margin-top:14px;background:var(--iv-card);border:1px solid var(--iv-line);border-radius:18px;
 box-shadow:var(--sh);padding:14px 16px}
.sl-iv-ai-h{font-size:13px;font-weight:800;margin-bottom:8px;color:var(--iv-blu)}
.sl-iv-ai-row{font-size:12px;color:var(--iv-ink);opacity:.85;line-height:1.9}
.sl-iv-ai-warn{font-size:11.5px;color:#D97706;margin-top:4px;line-height:1.8}

/* ── دکمه‌های اقدام Act 3 ── */
.sl-iv-cta-col{margin-top:20px;display:flex;flex-direction:column;gap:10px}
.sl-iv-cta-row2{display:flex;gap:10px}
.sl-iv-cta-sm{flex:1;background:var(--iv-card);border:1px solid var(--iv-line);border-radius:13px;
 box-shadow:var(--sh);padding:12px 8px;color:var(--iv-ink);font-family:inherit;font-size:12.5px;
 font-weight:700;cursor:pointer}
.sl-iv-cta-sm:active{transform:scale(.96)}
.sl-iv-cta-ghost{background:transparent;border:none;color:var(--iv-mu);font-family:inherit;font-size:12.5px;
 font-weight:700;text-align:center;cursor:pointer;padding:6px}

/* ════════════════════════════════════════════════════════════════════════
   🩺 سلامت آیفون (مینی‌اپ) — بخش «سلامت آیفون در مینی‌اپ» CLAUDE.md
   پوستهٔ صفحه (host/top/back/bar/body/opt/cta) عمداً از همون کلاس‌های
   `.sl-iv-*` کارشناسی قیمت بازاستفاده می‌شه — یعنی هر دو ابزار دقیقاً یک
   زبان بصری دارن و اصلاح تم فقط یه‌جا لازمه. این‌جا فقط چیزهای مخصوص
   سلامت اضافه می‌شن: شماتیک گوشی و ویجت‌های تست خودکار.
   ════════════════════════════════════════════════════════════════════════ */
.sl-ih{--ih-ok:#30D158;--ih-bad:#FF453A;--ih-idle:rgba(142,142,147,.45);--ih-live:#0A84FF}

/* ─── شماتیک گوشی ─────────────────────────────────────────────────────── */
.sl-ih-phone{display:flex;justify-content:center;padding:4px 0 10px}
.sl-ih-phone svg{width:auto;height:150px;overflow:visible}
.sl-ih-phone.sm svg{height:104px}
.sl-ih-body{fill:var(--iv-card);stroke:var(--iv-line);stroke-width:2}
.sl-ih-screen{fill:rgba(142,142,147,.14)}
/* هر قطعه: حالت پایه خنثی؛ کلاس وضعیت رنگش می‌کنه. transition روی fill
   باعث می‌شه رنگ‌گرفتن تدریجی/نرم باشه، نه پرش ناگهانی. */
.sl-ih-part{fill:var(--ih-idle);stroke:none;transition:fill .3s ease,opacity .3s ease}
.sl-ih-part.ok{fill:var(--ih-ok)}
.sl-ih-part.issue{fill:var(--ih-bad)}
.sl-ih-part.unknown{fill:var(--ih-idle);opacity:.5}
.sl-ih-part.live{fill:var(--ih-live);animation:slIhPulse 1.25s ease-in-out infinite}
@keyframes slIhPulse{0%,100%{opacity:.45}50%{opacity:1}}
.sl-ih-flip{transition:transform .5s cubic-bezier(.22,1,.36,1);transform-origin:center}
.sl-ih-flip.back{transform:rotateY(180deg)}

/* ─── کارت تست ────────────────────────────────────────────────────────── */
.sl-ih-cat{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;
 font-weight:700;color:var(--iv-mu);margin-bottom:4px}
.sl-ih-q{font-size:17.5px;font-weight:800;line-height:1.6;text-align:center;margin:2px 0 8px}
.sl-ih-guide{font-size:13px;line-height:2;color:var(--iv-mu);background:var(--iv-card);
 border:1px solid var(--iv-line);border-radius:14px;padding:12px 14px;margin-bottom:14px;
 box-shadow:var(--sh);overflow-wrap:break-word}
.sl-ih-guide code{direction:ltr;unicode-bidi:bidi-override;display:inline-block;
 background:rgba(142,142,147,.18);border-radius:6px;padding:1px 6px;font-weight:800;
 font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.sl-ih-ans{display:flex;flex-direction:column;gap:10px}
.sl-ih-ans-btn{padding:15px;border-radius:16px;border:1.5px solid var(--iv-line);
 background:var(--iv-card);color:var(--iv-ink);font-family:inherit;font-size:14.5px;
 font-weight:800;cursor:pointer;box-shadow:var(--sh);transition:transform .12s}
.sl-ih-ans-btn:active{transform:scale(.97)}
.sl-ih-ans-btn.ok{border-color:rgba(48,209,88,.5);background:rgba(48,209,88,.12)}
.sl-ih-ans-btn.issue{border-color:rgba(255,69,58,.5);background:rgba(255,69,58,.12)}
.sl-ih-ans-btn.skip{font-size:13px;font-weight:700;color:var(--iv-mu);box-shadow:none;
 background:transparent;border-style:dashed}

/* ─── نشان سطح اعتبار ─────────────────────────────────────────────────── */
.sl-ih-ev{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;
 padding:4px 10px;border-radius:99px;background:rgba(142,142,147,.16);color:var(--iv-mu);
 margin-bottom:10px}
.sl-ih-ev.auto{background:rgba(48,209,88,.16);color:#1F9E45}
html.dark .sl-ih-ev.auto,:root.dark .sl-ih-ev.auto{color:#4ADE80}

/* ─── ویجت مشترک تست خودکار ───────────────────────────────────────────── */
.sl-ih-w{background:var(--iv-card);border:1px solid var(--iv-line);border-radius:16px;
 padding:14px;margin-bottom:12px;box-shadow:var(--sh);box-sizing:border-box}
.sl-ih-w-t{font-size:12.5px;font-weight:800;color:var(--iv-mu);margin-bottom:10px;text-align:center}
.sl-ih-w-run{width:100%;padding:13px;border-radius:14px;border:none;cursor:pointer;
 background:linear-gradient(180deg,var(--iv-blu),var(--iv-blu2));color:#fff;
 font-family:inherit;font-size:14px;font-weight:800;box-sizing:border-box}
.sl-ih-w-run:active{transform:scale(.97)}
.sl-ih-w-run[disabled]{opacity:.5}
.sl-ih-w-res{font-size:12.5px;font-weight:800;text-align:center;margin-top:10px;line-height:1.8}
.sl-ih-w-res.ok{color:var(--ih-ok)}
.sl-ih-w-res.bad{color:var(--ih-bad)}

/* لمسگر: Overlay تمام‌صفحهٔ واقعی (بخش ۹۹.۹) — تست قبلی فقط یه کادر وسط صفحه بود،
   پس نقطهٔ مردهٔ گوشه/لبه اصلاً دیده نمی‌شد. `direction:ltr` عمدیه: ترتیب پرشدن
   خونه‌ها طبیعی (چپ→راست) بمونه؛ خودِ تشخیص خانه با elementFromPoint انجام می‌شه
   پس مستقل از جهت درسته. */
/* ⚠️ رنگ سبز این‌جا عمداً *لیترال* است، نه var(--ih-ok): اون متغیر فقط روی
   `.sl-ih` (ظرف ویزارد) تعریف شده و این Overlay مستقیم به document.body وصل
   می‌شه — یعنی بیرون از اون scope، متغیر resolve نمی‌شد و خونهٔ لمس‌شده به‌جای
   سبز، بی‌رنگ می‌موند (باگ واقعی گزارش‌شده با اسکرین‌شات). */
.sl-ih-tgfs{position:fixed;inset:0;z-index:20000;background:var(--bg);
 touch-action:none;overscroll-behavior:contain;direction:ltr;user-select:none;-webkit-user-select:none}
.sl-ih-tgfs-grid{position:absolute;inset:0;display:grid;gap:2px;padding:2px;box-sizing:border-box}
.sl-ih-tgfs-c{background:rgba(142,142,147,.24);border-radius:5px;transition:background .1s}
.sl-ih-tgfs-c.hit{background:#30D158}
/* HUD یه «قرص» خواناست، نه متن روی خونه‌های سبز (بازخورد اسکرین‌شات: متن قبلی
   روی پس‌زمینهٔ سبز گم می‌شد). pointer-events:none یعنی elementFromPoint هم
   ردش می‌کنه، پس خونه‌های پشتش کاملاً قابل‌لمس می‌مونن. */
.sl-ih-tgfs-hud{position:absolute;left:0;right:0;top:calc(var(--sl-safe-top) + 58px);
 text-align:center;direction:rtl;pointer-events:none;padding:0 16px}
.sl-ih-tgfs-hud-in{display:inline-block;background:var(--card);border:1px solid var(--ln);
 border-radius:18px;padding:10px 18px;box-shadow:0 8px 26px rgba(0,0,0,.18);
 font-size:12.5px;font-weight:800;color:var(--ink);max-width:100%;box-sizing:border-box}
.sl-ih-tgfs-hud b{font-size:24px;display:block;margin-bottom:1px;color:var(--ink);line-height:1.1}
.sl-ih-tgfs-hud small{display:block;margin-top:5px;font-size:11px;font-weight:700;color:var(--mu)}
/* برگهٔ پایان — فقط وقتی کاربر چند لحظه دست نگه داشت ظاهر می‌شه، پس سطح تست
   حین کشیدن انگشت کاملاً خالی می‌مونه (درخواست صریح مالک پروژه). */
.sl-ih-tgfs-sheet{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
 direction:rtl;background:var(--card);border:1px solid var(--ln);border-radius:20px;
 padding:18px 16px;box-shadow:0 18px 50px rgba(0,0,0,.28);text-align:center;
 width:min(300px,86vw);box-sizing:border-box;animation:slTgfsIn .18s ease-out}
@keyframes slTgfsIn{from{opacity:0;transform:translate(-50%,-46%)}to{opacity:1;transform:translate(-50%,-50%)}}
.sl-ih-tgfs-sheet h4{margin:0 0 4px;font-size:15px;font-weight:900;color:var(--ink)}
.sl-ih-tgfs-sheet p{margin:0 0 14px;font-size:12.5px;color:var(--mu);line-height:1.6}
/* width:100% این‌جا عمدیه (دکمهٔ تمام‌عرض داخل برگه)، برخلاف دکمه‌های کنارهم */
.sl-ih-tgfs-sheet button{display:block;width:100%;box-sizing:border-box;margin-top:8px;
 border:0;border-radius:12px;padding:11px;font-size:13px;font-weight:800;font-family:inherit;cursor:pointer}
.sl-ih-tgfs-go{background:#30D158;color:#fff}
.sl-ih-tgfs-end{background:transparent;color:var(--mu);border:1px solid var(--ln)!important}

/* تراز حبابی ژیروسکوپ */
.sl-ih-lvl{position:relative;width:150px;height:150px;margin:0 auto;border-radius:50%;
 border:2px solid var(--iv-line);background:rgba(142,142,147,.08)}
.sl-ih-lvl-b{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;
 border-radius:50%;background:var(--ih-live);box-shadow:0 2px 10px rgba(10,132,255,.5);
 transition:transform .08s linear}
.sl-ih-lvl-x{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;
 border-radius:50%;border:1.5px dashed var(--iv-line)}

/* سطح‌سنج میکروفون */
.sl-ih-mic{display:flex;align-items:flex-end;justify-content:center;gap:3px;height:76px;
 direction:ltr;margin-bottom:6px}
.sl-ih-mic-b{width:7px;border-radius:99px;background:var(--ih-idle);transition:height .07s linear,background .07s}
.sl-ih-mic-b.on{background:var(--ih-live)}

/* پیش‌نمایش دوربین */
.sl-ih-cam{width:100%;max-height:40vh;border-radius:14px;background:#000;display:block;
 object-fit:cover;box-sizing:border-box}

/* پیکسل مرده: پوشش تمام‌صفحهٔ واقعی */
.sl-ih-fs{position:fixed;inset:0;z-index:20000;display:grid;place-items:center;cursor:pointer}
.sl-ih-fs-h{position:absolute;left:0;right:0;bottom:calc(28px + env(safe-area-inset-bottom,0px));
 text-align:center;font-size:13px;font-weight:800;color:rgba(255,255,255,.85);
 text-shadow:0 1px 4px rgba(0,0,0,.6);pointer-events:none;padding:0 20px}
.sl-ih-fs.light .sl-ih-fs-h{color:rgba(0,0,0,.7);text-shadow:0 1px 4px rgba(255,255,255,.6)}

/* ─── شناسنامهٔ نهایی ─────────────────────────────────────────────────── */
.sl-ih-cert{background:var(--iv-card);border:1px solid var(--iv-line);border-radius:22px;
 padding:20px 16px;box-shadow:var(--sh);text-align:center;margin-bottom:14px;box-sizing:border-box}
.sl-ih-scores{display:flex;gap:10px;margin:14px 0 4px}
.sl-ih-score{flex:1;background:rgba(142,142,147,.1);border-radius:16px;padding:12px 6px}
.sl-ih-score-n{font-size:26px;font-weight:800;line-height:1.2;direction:ltr}
.sl-ih-score-l{font-size:11px;font-weight:700;color:var(--iv-mu);margin-top:3px}
.sl-ih-code{display:inline-block;direction:ltr;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
 font-size:13px;font-weight:800;letter-spacing:.5px;background:rgba(142,142,147,.16);
 border-radius:10px;padding:6px 12px;margin-top:12px}
.sl-ih-evrow{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:12px}
/* یادداشت توضیحی زیر دکمه‌های انتخاب حالت + یادداشت پایان گزارش سریع (بخش ۹۹.۱۳) */
.sl-ih-modenote{margin-top:14px;padding:12px 14px;border-radius:14px;font-size:11.5px;
 line-height:2;color:var(--iv-mu);background:var(--iv-card);border:1px solid var(--iv-line)}
.sl-ih-modenote b{color:var(--iv-ink)}
.sl-ih-quicknote{margin-top:12px;padding:12px 14px;border-radius:14px;font-size:12.5px;
 font-weight:700;line-height:2;color:#B45309;background:rgba(245,158,11,.12);
 border:1px solid rgba(245,158,11,.32)}
html.dark .sl-ih-quicknote{color:#FCD34D;background:rgba(245,158,11,.14)}
.sl-ih-alert{border-radius:14px;padding:12px 14px;font-size:12.5px;font-weight:700;line-height:1.9;
 margin-bottom:10px;text-align:right;box-sizing:border-box}
.sl-ih-alert.bad{background:rgba(255,69,58,.12);border:1px solid rgba(255,69,58,.4);color:var(--ih-bad)}
.sl-ih-alert.warn{background:rgba(255,159,10,.12);border:1px solid rgba(255,159,10,.4);color:#C77700}
html.dark .sl-ih-alert.warn,:root.dark .sl-ih-alert.warn{color:#FFB340}
.sl-ih-legend{display:flex;justify-content:center;gap:14px;font-size:11px;font-weight:700;
 color:var(--iv-mu);margin-top:8px}
.sl-ih-legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-left:4px;
 vertical-align:middle}

/* ═══ قاب دسکتاپ — استاندارد نمایش روی صفحهٔ بزرگ (بخش ۹۹.۱۴) ═══
   مینی‌اپ برای موبایل طراحی شده؛ روی مانیتور، گرید دو‌ستونی «ابزار مفید» و
   کارت‌های فروشگاه تا کل عرض پنجره کش می‌اومدن و همه‌چیز غول‌آسا می‌شد.
   راه‌حل: کل اپ داخل یک ستون به عرض یک گوشی وسط صفحه قرار می‌گیره.
   ⚠️ عناصر `position:fixed` خودمون (نوار شناور، هینت نصب، Overlayهای
   تمام‌صفحه) نسبت به viewport پوزیشن می‌گیرن نه #app — پس باید جدا محدود بشن،
   وگرنه از قاب بیرون می‌زنن. */
@media (min-width:700px){
 :root{--sl-frame:480px}
 html,body{background:#0A0C10}
 #app{
  width:var(--sl-frame);max-width:100%;margin:0 auto;position:relative;
  background:var(--bg);
  box-shadow:0 0 0 1px rgba(255,255,255,.06),0 24px 70px rgba(0,0,0,.55);
 }
 /* عناصر ثابتِ خودمان: هم‌عرض قاب و وسط‌چین (بدون transform تا انیمیشن‌ها نشکنن) */
 .sl-nav,.sl-install-hint,.sl-ih-tgfs,.sl-ih-fs,.sl-wm-ov,.sl-ao-ov{
  left:0!important;right:0!important;margin-inline:auto!important;
  width:var(--sl-frame);max-width:100%;
 }
 .sl-install-hint{width:calc(var(--sl-frame) - 24px)}
 /* پاپ‌آپ‌های Framework7 — هم‌عرض قاب؛ عمداً از margin استفاده می‌شه نه transform،
    چون خودِ F7 برای انیمیشن باز/بسته‌شدن از transform استفاده می‌کنه. */
 .popup{left:0!important;right:0!important;margin-inline:auto!important;
  width:var(--sl-frame)!important;max-width:100%}
}

/* ═══ قیمت روز آیفون — Price Board (بخش ۹۹.۱۵.۲) ═══
   «لیست قیمت روزانه» مینیمال/فشرده/گرافیکی — نه فروشگاه. دو تم Accent جدا:
   آک = سبز/فیروزه‌ای، کارکرده = آبی روشن (کلاس m-new / m-used روی همین ظرف). */
.sl-dpb{--dpt:#0D9488;--dpt-ink:#0F2A43;--dpt-mu:#7C8B9A;--dpt-card:#FFFFFF;
 --dpt-ln:#EAF0F2;--dpt-ln2:#CBD8DE;--dpt-soft:rgba(13,148,136,.10)}
.sl-dpb.m-used{--dpt:#0EA5E9;--dpt-soft:rgba(14,165,233,.10)}
html.dark .sl-dpb{--dpt:#2DD4BF;--dpt-ink:#E8EEF4;--dpt-mu:#8B98A5;--dpt-card:#1C2530;
 --dpt-ln:rgba(255,255,255,.07);--dpt-ln2:rgba(255,255,255,.18);--dpt-soft:rgba(45,212,191,.13)}
html.dark .sl-dpb.m-used{--dpt:#38BDF8;--dpt-soft:rgba(56,189,248,.13)}
/* ⚠️ Container عریض‌تر مخصوص همین صفحه: پاپ‌آپ عمومی حساب `padding:20px 16px` داره
   که برای یک جدول ۷/۸ ستونه فضای زیادی از عرض موبایل رو هدر می‌ده. این‌جا (و فقط
   این‌جا) به ۸px کم می‌شه — بقیهٔ صفحات پاپ‌آپ دست‌نخورده می‌مونن. */
.sl-dpb-host .sl-acc-page{padding:14px 4px calc(20px + env(safe-area-inset-bottom,0px))}
/* هدر صفحه — فقط نام برند (عنوان «قیمت روز آیفون» بالای پاپ‌آپ هست، تکرارش حذف شد) */
.sl-dpb-head{text-align:center;margin:4px 0 12px}
.sl-dpb-brand{font-size:14px;font-weight:800;letter-spacing:3.4px;text-transform:uppercase;
 color:var(--dpt);direction:ltr}
/* تب‌ها — تب فعال با رنگ Accent همان بخش (flex:1 ⇒ قاعدهٔ button{width:100%} F7 بی‌اثره) */
.sl-dpb-tabs{display:flex;gap:6px;background:var(--dpt-card);border:1px solid var(--dpt-ln);
 border-radius:13px;padding:4px}
.sl-dpb-tabs button{flex:1;border:0;border-radius:10px;padding:8px 4px;font-family:inherit;
 font-size:12px;font-weight:800;background:transparent;color:var(--dpt-mu);cursor:pointer}
.sl-dpb-tabs button.on{background:var(--dpt);color:#fff}
/* جست‌وجو */
.sl-dpb-search{display:flex;align-items:center;gap:8px;background:var(--dpt-card);
 border:1px solid var(--dpt-ln);border-radius:12px;padding:8px 11px;margin:9px 0 2px}
.sl-dpb-search svg{width:15px;height:15px;color:var(--dpt-mu);flex:none}
.sl-dpb-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;
 font-family:inherit;font-size:12px;color:var(--dpt-ink)}
.sl-dpb-search input::placeholder{color:var(--dpt-mu)}
/* ── هدر گرافیکی هر سری: عدد بزرگ + «سری ۱۷» + بندانگشتی مدل‌ها + فلش ── */
.sl-dps{margin-top:10px;background:var(--dpt-card);border:1px solid var(--dpt-ln);
 border-radius:14px;overflow:hidden}
.sl-dps-h{display:flex;align-items:center;gap:9px;width:100%;box-sizing:border-box;
 background:transparent;border:0;padding:8px 11px;font-family:inherit;cursor:pointer;text-align:right}
.sl-dps-num{flex:none;min-width:36px;height:36px;border-radius:50%;background:var(--dpt);
 color:#fff;font-size:14.5px;font-weight:800;display:flex;align-items:center;
 justify-content:center;padding:0 5px;box-sizing:border-box;direction:ltr}
.sl-dps-t{display:flex;flex-direction:column;gap:1px;min-width:0;align-items:flex-start}
.sl-dps-name{font-size:12.5px;font-weight:800;color:var(--dpt-ink);white-space:nowrap}
.sl-dps-n{display:inline-block;direction:ltr}
.sl-dps-sub{font-size:9.5px;font-weight:600;color:var(--dpt-mu)}
.sl-dps-thumbs{display:flex;margin-inline-start:auto;flex:none}
.sl-dps-thumbs img{width:24px;height:24px;object-fit:contain;border-radius:6px;
 background:var(--dpt-soft);padding:2px;box-sizing:border-box;margin-inline-start:-5px}
.sl-dps-ar{width:15px;height:15px;color:var(--dpt-mu);flex:none;transition:transform .2s}
.sl-dps.closed .sl-dps-ar{transform:rotate(-90deg)}
.sl-dps.closed .sl-dps-body{display:none}
/* ⚠️ بدنهٔ هر سری خودش تنها گرید ردیف‌هاست (هدر ستون‌ها + همهٔ ردیف‌ها با
   display:contents مستقیم فرزند همین گریدن). دلیل: دو گرید خواهر جدا، ستون‌های
   `auto` رو مستقل از محتوای خودشون حساب می‌کنن — هدر با ردیف داده هیچ‌وقت تراز
   نمی‌شه (اندازه‌گیری واقعی: «مدل» روی ستون عکس می‌نشست). یک گرید مشترک = تراز دقیق. */
.sl-dps-body{padding:0 4px 3px;direction:ltr;display:grid;align-items:center;column-gap:0}
/* تعداد ستون هر بخش فرق می‌کنه، پس تمپلیت per-mode (کلاس روی #dp-wrap):
   آک   = IMAGE MODEL STORAGE PART COLOR STATUS PRICE            (۷)
   کارکرده = IMAGE MODEL STORAGE PART COLOR BATTERY CONDITION PRICE (۸) */
.m-new .sl-dps-body{grid-template-columns:auto auto auto auto auto auto minmax(0,1fr)}
.m-used .sl-dps-body{grid-template-columns:auto auto auto auto auto auto auto minmax(0,1fr)}
/* ── ردیف محصول ──
   ⚠️ قانون قطعی: هر محصول فقط **یک ردیف افقی** — هیچ اطلاعاتی به خط دوم نمی‌ره؛
   تنها استثنا ستون قیمت است که عمداً دو خطیه (قیمت، و رجیستری دقیقاً زیرش).
   کل ردیف direction:ltr تا ترتیب IMAGE→MODEL→STORAGE→PART/BATTERY→STATUS/CONDITION→PRICE
   واقعاً از چپ به راست خونده بشه. هر دو بخش دقیقاً ۶ سلول دارن، پس یک گرید مشترک.
   اندازهٔ فونت‌ها از --dp-fs مشتق می‌شن تا با کم‌شدن عرض، ردیف بدون شکستن/قطع‌شدن جا بشه. */
.sl-dpb{--dp-fs:9.4px}
@media (max-width:389px){.sl-dpb{--dp-fs:8.5px}}
@media (max-width:349px){.sl-dpb{--dp-fs:7.7px}}
/* هدر و ردیف‌ها فقط «گروه‌بندی معنایی»‌ان؛ خودِ سلول‌ها فرزند مستقیم گرید بدنه می‌شن */
.sl-dpb-hr,.sl-dpb-row{display:contents}
/* فاصلهٔ ستون‌ها با padding سلول‌هاست نه gap، تا خط جداکنندهٔ ردیف پیوسته بمونه */
.sl-dps-body>*>*:not(.sl-dpb-sep){padding-inline:2px}
@media (max-width:349px){.sl-dps-body>*>*:not(.sl-dpb-sep){padding-inline:1.5px}}
.sl-dps-body>*>*:first-child{padding-inline-start:0}
.sl-dps-body>*>.sl-dpb-pw{padding-inline-end:0}
/* جداکنندهٔ بسیار نازک: یک آیتم گرید تمام‌عرض (نه بردر روی تک‌تک سلول‌ها، که با
   فاصلهٔ ستون‌ها بریده‌بریده می‌شد) */
.sl-dpb-sep{grid-column:1/-1;height:1px;background:var(--dpt-ln)}
.sl-dps-body>.sl-dpb-row:last-child>.sl-dpb-sep{display:none}
/* ⚠️ هر سربرگ دقیقاً وسط‌چینِ ستون خودشه (نه چسبیده به لبهٔ چپ سلول) — قبلاً
   text-align:left باعث می‌شد «مدل» روی ستون عکس بشینه، نه وسط ستون واقعی مدل. */
.sl-dpb-hr>span{font-size:calc(var(--dp-fs) - 1.6px);font-weight:800;color:var(--dpt-mu);
 white-space:nowrap;padding-block:7px 5px;align-self:end;text-align:center}
.sl-dpb-hr>.sl-dpb-hm{grid-column:1/3}
.sl-dpb-hr>span:last-of-type{padding-inline-end:0}
/* ردیف فشرده — فاصلهٔ کم، تا محصولات زیادی در یک نگاه دیده بشن */
.sl-dpb-row>span{padding-block:5px}
.sl-dpb-img{width:calc(var(--dp-fs) * 2.1);height:calc(var(--dp-fs) * 2.1);
 object-fit:contain;flex:none}
.sl-dpb-img-ph{display:flex;align-items:center;justify-content:center;color:var(--dpt-mu);
 opacity:.55}
.sl-dpb-ph{width:100%;height:100%}
/* نام کامل مدل، تک‌خط و بدون قطع‌شدن (فقط فونت با عرض صفحه کوچک‌تر می‌شه) */
.sl-dpb-model{font-size:calc(var(--dp-fs) + 0.5px);font-weight:700;color:var(--dpt-ink);
 white-space:nowrap;line-height:1.35}
.sl-dpb-c{font-size:var(--dp-fs);font-weight:700;color:var(--dpt-ink);white-space:nowrap}
.sl-dpb-part{color:var(--dpt-mu)}
/* نشانگر رنگ محصول — رنگ واقعی از دیتابیس میاد (inline style)، این فقط فرم نقطه است */
.sl-dpb-colc{display:flex;align-items:center;justify-content:center}
.sl-dpb-dot{width:calc(var(--dp-fs) + 1px);height:calc(var(--dp-fs) + 1px);border-radius:50%;
 box-shadow:inset 0 0 0 1px rgba(0,0,0,.16),0 1px 2px rgba(0,0,0,.12);display:block;flex:none}
html.dark .sl-dpb-dot{box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 1px 2px rgba(0,0,0,.4)}
.sl-dpb-dim{color:var(--dpt-mu);opacity:.65;font-size:var(--dp-fs);font-weight:600}
/* وضعیت (فقط آک) — متن ساده، بدون کادر/پس‌زمینه (درخواست صریح مالک پروژه).
   تمایز فقط با رنگ تعریف‌شدهٔ همان وضعیت است. */
.sl-dpb-b{font-size:calc(var(--dp-fs) - 1.4px);font-weight:800;
 white-space:nowrap;justify-self:start;line-height:1.5}
/* ⚠️ معنی وضعیت (تأکید صریح مالک پروژه): Not Active = گوشی نو و هنوز فعال‌نشده
   (برجسته، آبی) — Active = قبلاً روشن/فعال شده (خنثی، خاکستری). */
.sl-dpb-b.act-on{color:#7A8794}
.sl-dpb-b.act-off{color:#1D4ED8}
html.dark .sl-dpb-b.act-on{color:#9AA6B2}
html.dark .sl-dpb-b.act-off{color:#60A5FA}
/* کارکرده: باتری + وضعیت دستگاه (هر دو تک‌خط) */
/* رنگ سلامت باتری — پله‌های تعریف‌شدهٔ مالک پروژه (`_dpBattClass` در app.js).
   رنگ‌ها برای هر تم جدا تنظیم شده‌اند تا روی زمینهٔ تیره هم خوانا بمانند. */
.sl-dpb-batt{font-size:var(--dp-fs);font-weight:800;color:var(--dpt);white-space:nowrap}
.sl-dpb-batt.b-ok  {color:var(--batt-ok)}    /* ۱۰۰ تا ۹۰ — سبز    */
.sl-dpb-batt.b-mid {color:var(--batt-mid)}   /* ۸۹ تا ۸۵  — آبی    */
.sl-dpb-batt.b-low {color:var(--batt-low)}   /* ۸۴ تا ۸۰  — نارنجی */
.sl-dpb-batt.b-bad {color:var(--batt-bad)}   /* ۷۹ و پایین‌تر — قرمز */
.sl-dpb-cond{font-size:var(--dp-fs);font-weight:700;color:var(--dpt-ink);white-space:nowrap}
/* ⚠️ تنها ستون دوخطی: قیمت + رجیستری زیرش */
.sl-dpb-pw{display:flex;flex-direction:column;align-items:flex-end;gap:0;
 justify-self:end;flex:none;min-width:0}
/* ⚠️ direction:rtl اجباریه (تلهٔ bidi بخش ۶۱): داخل ردیف LTR، «تومان» سمت راستِ رقم‌ها
   می‌نشست و خوانندهٔ فارسی اول واحد پول را می‌خواند. با rtl، رقم راست و «تومان» چپش. */
.sl-dpb-price{direction:rtl;font-size:calc(var(--dp-fs) + 1.7px);font-weight:800;color:var(--dpt);
 white-space:nowrap;line-height:1.35}
.sl-dpb-price small{font-size:calc(var(--dp-fs) - 1.5px);font-weight:600;margin-inline-start:2px}
.sl-dpb-reg{direction:rtl;font-size:calc(var(--dp-fs) - 1.3px);font-weight:600;
 color:var(--dpt-mu);white-space:nowrap;line-height:1.25}
.sl-dpb-empty{text-align:center;color:var(--dpt-mu);font-size:12px;padding:30px 10px;line-height:2}
/* راهنما و پشتیبانی — کوچک و غیرتبلیغاتی */
.sl-dpb-leg{display:flex;flex-wrap:wrap;gap:5px 12px;justify-content:center;
 margin-top:12px;font-size:9px;font-weight:600;color:var(--dpt-mu)}
.sl-dpb-leg>span{display:flex;align-items:center;gap:4px}
.sl-dpb-support{font-size:9.5px;color:var(--dpt-mu);text-align:center;margin:8px 0 4px;
 line-height:2}
.sl-dpb-support a{color:var(--dpt);font-weight:700;cursor:pointer}
/* CTA «قیمت گوشی خودت؟» — کوچک و جانبی (نباید از خودِ لیست قیمت مهم‌تر دیده بشه)،
   با Accent همون تب. پل به سیستم مستقل کارشناسی قیمت، نه ادغام دیتا. */
.sl-dpb-cta{display:flex;align-items:center;flex-wrap:wrap;gap:4px 9px;margin-top:12px;
 padding:9px 11px;background:var(--dpt-card);border:1px solid var(--dpt-ln);
 border-radius:14px;cursor:pointer}
.sl-dpb-cta-ic{flex:none;width:32px;height:32px;border-radius:10px;background:var(--dpt-soft);
 color:var(--dpt);display:flex;align-items:center;justify-content:center}
.sl-dpb-cta-ic svg{width:17px;height:17px}
/* ⚠️ flex-basis واقعی لازم است: با flex:1 خام، متن تا ~۹۰px فشرده می‌شد و به‌جای
   این‌که دکمه به خط بعد بره، عنوان/زیرعنوان به ۵ خط می‌شکست (ارتفاع ۹۷px در ۳۲۰px) */
.sl-dpb-cta-t{display:flex;flex-direction:column;gap:0;min-width:0;flex:1 1 150px}
.sl-dpb-cta-t b{font-size:11.5px;font-weight:800;color:var(--dpt-ink);line-height:1.5}
.sl-dpb-cta-t small{font-size:9.5px;font-weight:600;color:var(--dpt-mu);line-height:1.5}
/* دکمه اگر جا نشد به خط بعد می‌ره و به لبهٔ پایانی می‌چسبه (نه تمام‌عرضِ درشت) */
.sl-dpb-cta-b{flex:none;margin-inline-start:auto;font-size:10px;font-weight:800;
 color:var(--dpt);white-space:nowrap}
/* ⚠️ اندازه‌گیری واقعی مرورگر: ردیف تک‌خطیِ ۶ستونه دست‌کم ~۳۱۴px عرضِ *داخلی* لازم
   دارد؛ روی گوشی ۳۹۰px (پرتکرارترین) فقط ~۳۱۰px در دسترس است و آخرین ستون (قیمت)
   بریده می‌شد. پس زیر ۴۰۰px ردیف عمداً به دو خط می‌شکند — خط ۱: عکس + مدل + قیمت،
   خط ۲: مشخصات؛ رجیستری دقیقاً زیر قیمت تراز می‌شود. هیچ اطلاعاتی حذف/قطع نمی‌شود و
   ارتفاع ردیف کنترل‌شده می‌ماند. هدر ستون‌ها در این حالت معنا ندارد و مخفی می‌شود
   (بج‌ها و راهنمای پایین صفحه خودشان گویا هستند). */
@media (max-width:359px){
 /* در باریک‌ترین حالت، دکمهٔ CTA خط خودش رو می‌گیره و زیرعنوان کمی کوچک‌تر می‌شه
    تا کارت تک‌خطی و جمع‌وجور بمونه (CTA نباید از خودِ لیست قیمت مهم‌تر دیده بشه) */
 .sl-dpb-cta-b{flex:0 0 100%;text-align:end}
 .sl-dpb-cta-t small{font-size:8.8px}
}



/* ═══ صفحهٔ «در حال بروزرسانی» (حالت تعمیرات چندکاناله) ═══
   کل اپ را می‌پوشاند. توکن‌محور طبق زبان طراحی مینی‌اپ (بخش ۱۰۶) — هیچ هگز
   خامی، پس در حالت شب هم خودکار درست است. */
.sl-maint{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;
  justify-content:center;padding:var(--s-5);background:var(--bg);
  padding-top:calc(var(--sl-safe-top,0px) + var(--s-5))}
.sl-maint-box{max-width:340px;width:100%;text-align:center;background:var(--card);
  border:1px solid var(--ln);border-radius:var(--r-lg);padding:var(--s-6) var(--s-5);
  box-shadow:var(--e-2)}
.sl-maint-ico{font-size:44px;line-height:1;margin-bottom:var(--s-3)}
.sl-maint-t{font-size:var(--t-lg);font-weight:800;color:var(--ink);margin-bottom:var(--s-2)}
.sl-maint-s{font-size:var(--t-sm);color:var(--muted);line-height:1.9}
.sl-maint-btn{margin-top:var(--s-5);width:auto;padding-inline:var(--s-6)}