in the markup instead (see renderLogin). */
.r-boteh-mark{
position:absolute; z-index:-1; pointer-events:none; width:230px; height:375px;
top:50%; left:15px; transform:translateY(-50%); background-image:var(--motif-boteh);
background-repeat:no-repeat; background-size:contain; opacity:.20;
}
/* فاز ۴۶ — کاربر با تست واقعی رو موبایل پیدا کرد: همین دو نقش پس‌زمینه (مدالیون +
بته‌جقه)، رو یه صفحه‌ی باریک موبایل، اونقدر بزرگ/پررنگ بودن که مستقیم رو لوگو و
متن می‌افتادن و «قاطی» به‌نظر می‌رسیدن. اولین رفع خیلی محتاطانه بود («خوبه ولی
جسورانه‌تر» — فاز ۴۷)؛ این‌ها اندازه‌ی نهایی‌ان: به‌اندازه‌ای بزرگ که واقعاً دیده
بشن، ولی نه اونقدر که رو لوگو/متن بیفتن (فاصله‌شون از مرکز صفحه بیشتر شده، نه
فقط سایزشون کمتر). */
@media (max-width:480px){
.r-medallion-watermark::after{ width:420px; height:420px; opacity:.17; right:-160px; }
.r-boteh-mark{ width:170px; height:280px; opacity:.16; left:-10px; }
}
.r-ornament-corner{ position:absolute; top:10px; left:10px; width:32px; height:32px; color:var(--gold-line); opacity:.8; pointer-events:none; }
.r-ornament-corner path, .r-ornament-corner circle{ stroke-dasharray:60; stroke-dashoffset:60; transition:stroke-dashoffset .7s var(--ease-ornament); }
.r-group-card:hover .r-ornament-corner path, .r-group-card:hover .r-ornament-corner circle,
.r-service-grid-card:hover .r-ornament-corner path, .r-service-grid-card:hover .r-ornament-corner circle,
.r-package-card:hover .r-ornament-corner path, .r-package-card:hover .r-ornament-corner circle,
.r-card:hover .r-ornament-corner path, .r-card:hover .r-ornament-corner circle{ stroke-dashoffset:0; }
/* login box and the wallet balance card aren't hover targets themselves, so their
corner ornament draws itself in once, shortly after the card's own entrance —
same stroke-drawing technique. Both are also key "first look" trust moments, so
it's drawn by default rather than waiting for an interaction that may never come. */
.r-login-box .r-ornament-corner path, .r-login-box .r-ornament-corner circle,
.r-balance-card .r-ornament-corner path, .r-balance-card .r-ornament-corner circle{ animation:ornamentDraw 1s .35s var(--ease-ornament) both; }
@keyframes ornamentDraw{ to{ stroke-dashoffset:0; } }
/* ---- Kashi/تخت‌جمشید/قالی escalation — richer, more colorful pass on top of the
quieter system above (کاربر خواست «رنگ و لعاب بیشتر»). Turquoise+cobalt kashi tile
pattern, a Persepolis crenellation border strip, and a two-color (gold+turquoise)
carpet corner spandrel on all four corners instead of one thin gold line. ---- */
.r-kashi-bg{ position:relative; isolation:isolate; }
.r-kashi-bg::before{
content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
background-image:var(--pattern-kashi); background-repeat:repeat; opacity:.10;
}
.r-kashi-bg.bold::before{ opacity:.15; }
/* Crenellation border is unused for now (read as a hard "toy castle" edge in
practice) — class kept, defined, harmless; nothing currently applies it. */
.r-crenel-top, .r-crenel-bottom{ position:relative; }
.r-crenel-top::before, .r-crenel-bottom::after{
content:''; position:absolute; right:0; left:0; height:12px; pointer-events:none;
background-image:var(--pattern-crenel); background-repeat:repeat-x; background-size:32px 12px; opacity:.85;
}
.r-crenel-top::before{ top:-1px; }
.r-crenel-bottom::after{ bottom:-1px; transform:scaleY(-1); }
.r-spandrel{ position:relative; }
.r-spandrel-corner{
position:absolute; width:34px; height:34px; pointer-events:none; opacity:.8;
background-image:var(--motif-spandrel); background-repeat:no-repeat; background-size:contain;
}
.r-spandrel-corner.tl{ top:10px; left:10px; }
.r-spandrel-corner.tr{ top:10px; right:10px; transform:scaleX(-1); }
.r-spandrel-corner.bl{ bottom:10px; left:10px; transform:scaleY(-1); }
.r-spandrel-corner.br{ bottom:10px; right:10px; transform:scale(-1,-1); }
/* S1 — فقط در اولین رندرِ هر صفحه (#rama-root.r-enter، index.html: pageKey)، نه با هر render؛ و backwards نه both —
fill-modeِ both بعد از پایان transform:none را نگه می‌داشت و بالاآمدن/چرخشِ هاورِ همین کارت‌ها را خاموش می‌کرد. */
#rama-root.r-enter .r-stagger > *{ animation:staggerFadeUp .5s var(--ease-out) backwards; }
#rama-root.r-enter .r-stagger > *:nth-child(1){ animation-delay:.02s; } #rama-root.r-enter .r-stagger > *:nth-child(2){ animation-delay:.07s; }
#rama-root.r-enter .r-stagger > *:nth-child(3){ animation-delay:.12s; } #rama-root.r-enter .r-stagger > *:nth-child(4){ animation-delay:.17s; }
#rama-root.r-enter .r-stagger > *:nth-child(5){ animation-delay:.22s; } #rama-root.r-enter .r-stagger > *:nth-child(6){ animation-delay:.27s; }
#rama-root.r-enter .r-stagger > *:nth-child(n+7){ animation-delay:.32s; }
.r-sheen-sweep{ position:relative; overflow:hidden; }
.r-sheen-sweep::after{
content:''; position:absolute; inset:0; pointer-events:none;
background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.22) 50%, transparent 60%);
background-size:220% 100%; background-position:120% 0; transition:background-position .6s var(--ease-out);
}
.r-sheen-sweep:hover::after{ background-position:-20% 0; }
@keyframes staggerFadeUp{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }
@keyframes patternPulse{ 0%,100%{ opacity:.035; } 50%{ opacity:.06; } }
@keyframes medallionFloat{ 0%,100%{ transform:translateY(-50%) rotate(0deg); } 50%{ transform:translateY(-52%) rotate(1.2deg); } }
/* ============ APP FRAME ============ */
.r-app{ max-width:480px; margin:0 auto; position:relative; padding-bottom:84px; }
@media (min-width:1024px){
.r-app{ max-width:none; margin:0; padding-bottom:0; display:flex; min-height:100vh; }
}
/* ============ SIDEBAR (desktop only) ============ */
.r-sidebar{ display:none; }
@media (min-width:1024px){
/* تاریخچه‌ی این بخش: نسخه‌ی اول (فاز ۱۵/۱۶) سایدبار flex-item واقعیِ .r-app بود، پس
باز/بسته‌شدنش کل .r-col-main رو reflow می‌کرد — کاربر گفت «یک‌دفعه شیفت می‌شه».
نسخه‌ی دوم (فاز ۱۷) سایدبار رو position:fixed کرد تا محتوا اصلاً reflow نشه — ولی
نتیجه‌ش این بود که حالت بازشده روی محتوا می‌نشست/می‌پوشوندش، که کاربر بازم دوست
نداشت. این نسخه (فاز ۱۹) دقیقاً چیزی‌ه که کاربر خواست: برگشت به flex-item واقعی
(محتوا واقعاً reflow می‌شه، نه پوشونده می‌شه) ولی با transition روی همون عرض —
چون .r-col-main کنارش flex:1 داره، فلکس‌باکس اندازه‌ش رو هر فریم از انیمیشن‌عرض
سایدبار دوباره حساب می‌کنه، پس محتوا هم‌زمان و نرم «کوچک/بزرگ» می‌شه، نه یک‌دفعه. */
.r-sidebar{
display:flex; flex-direction:column; flex:0 0 72px; width:72px; height:100vh; position:sticky; top:0;
background:var(--surface); border-left:1px solid var(--border); padding:20px 16px; box-shadow:4px 0 20px rgba(0,0,0,.25);
/* باگ واقعی دیگه: قبلاً هیچ overflow نداشت — با تعداد آیتم‌های نوار کناری که این
نشست بهش اضافه شد (تا ۱۱ آیتم برای نقش معرف)، محتوا رو صفحه‌های با ارتفاع معمولی
از ۱۰۰vh رد می‌شد و هیچ راهی برای اسکرول/دیدن بقیه‌ش نبود. */
overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
/* هم flex-basis هم width رو transition می‌دیم — کاربر تأیید کرد hover ساده‌ی
رنگی (رو آواتار) درست کار می‌کنه ولی این عرض هیچ‌وقت عوض نمی‌شد؛ یعنی مشکل
خودِ :hover/mouseenter نبود (که تو فاز ۲۲ به mouseenter واقعی سوییچ شد)، بلکه
چیزی خاصِ خودِ سایز فلکس این المانه. flex-basis رو یه فلکس‌آیتم مستقیم‌تر و
قابل‌اعتمادتر از width (که باید اول به flex-basis ترجمه بشه) رعایت می‌شه. */
transition:flex-basis .3s var(--ease-out), width .3s var(--ease-out);
}
/* جمع‌شدن/بازشدن خودکار با هاور — نه دستی. جمع‌شده (فقط آیکون) پیش‌فرضه تا بیشترین
فضا به محتوا بدیم؛ با بردن موس روی سایدبار خودش باز می‌شه.
باگ واقعی پیدا‌شده (فاز ۲۲): با CSS خالص `:hover` رو خودِ `.r-sidebar`، تو مرورگر
واقعی کاربر عرض اصلاً تغییر نمی‌کرد — نه فقط «حس بد»، بلکه هیچ تغییری، حتی بعد از
رفع کامل مشکل cache سرویس‌ورکر. به‌جای گشتن دنبال یه علت مبهم CSS/مرورگر که نمی‌شد
از راه دور تشخیصش داد، رفتیم سراغ یه مکانیزم قابل‌اعتمادتر: به‌جای `:hover` روی
این المان، یه کلاس `.expanded` با mouseenter/mouseleave واقعی (JS) روش می‌شینه —
این با DOM event واقعی کار می‌کنه، نه cascade خزنده‌ی CSS، پس دیگه به هیچ رفتار
خاص مرورگر/موقعیت (sticky و...) وابسته نیست. */
.r-sidebar.expanded{ flex-basis:var(--sidebar-w); width:var(--sidebar-w); }
}
/* اسکرول‌بار نازک و هم‌رنگ پالت تیره‌ی اپ — اولین اسکرول‌بار سفارشی این فایل،
چون سایدبار اولین جایی‌ه که واقعاً اسکرول واقعی لازم داره. */
.r-sidebar::-webkit-scrollbar{ width:6px; }
.r-sidebar::-webkit-scrollbar-track{ background:transparent; }
.r-sidebar::-webkit-scrollbar-thumb{ background:var(--surface-3); border-radius:99px; }
.r-sidebar::-webkit-scrollbar-thumb:hover{ background:var(--border-strong); }
.r-sb-logo{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; padding:10px 6px 16px; }
.r-sb-logo img{ width:44px;height:44px;border-radius:12px;flex-shrink:0;object-fit:cover;background:#000; margin-bottom:6px; box-shadow:var(--shadow-sm); }
.r-sb-logo b{ font-size:16px; font-weight:700; }
.r-sb-logo-tagline{ font-size:10.5px; color:var(--text-tertiary); }
.r-wordmark{ font-family:var(--font-display); font-weight:900; letter-spacing:2px; font-size:16px !important; background:linear-gradient(120deg, var(--text-primary) 35%, var(--gold-text-soft)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; position:relative; }
/* باگ واقعی پیدا‌شده (فاز ۲۵): این المان‌ها خودشون padding/border/margin ثابت داشتن
(خط قبلی)، و یه رول جدای دیگه هم padding/margin/border-width رو با max-height هم‌زمان
انیمیشن می‌داد — با اسکرین‌شات واقعی کاربر تأیید شد که نتیجه‌ش یه نوار «نصفه» بود
(ارتفاع نهایی درست به محتوای واقعی نمی‌رسید)، برخلاف لیبل آیتم‌های منو (که فقط
opacity+max-width ساده دارن و کاملاً درست کار می‌کنن). رفعش: به‌جای انیمیشن‌دادن
۵ پراپرتی هم‌زمان رو خودِ این باکس، یه wrapper خنثی دورش می‌ذاریم که فقط
opacity+max-height داره (دقیقاً همون الگوی ساده‌ی logo-b/logo-tagline که ثابت‌شده
درسته) — خودِ باکس (padding/border/margin/background) دیگه هیچ‌وقت شرطی نیست. */
.r-sb-slogan{ font-size:10.5px; color:var(--gold-text-soft); background:var(--gold-soft); border:1px solid var(--border-strong); border-radius:var(--r-sm); padding:7px 10px; margin-bottom:16px; line-height:1.6; text-align:center; }
.r-logo-img{ width:32px; height:32px; border-radius:9px; flex-shrink:0; object-fit:cover; background:#000; }
.r-sb-nav{ display:flex; flex-direction:column; gap:2px; flex:1; }
.r-sb-item{ display:flex; align-items:center; justify-content:center; gap:11px; padding:11px 0; border-radius:var(--r-sm); background:none; border:none; color:var(--text-secondary); font-size:13.5px; font-weight:500; text-align:right; }
.r-sidebar.expanded .r-sb-item{ justify-content:flex-start; padding:11px 12px; }
.r-sb-item svg{ width:18px; height:18px; flex-shrink:0; }
.r-sb-item{ position:relative; transition:background .18s var(--ease-out), color .18s var(--ease-out); }
.r-sb-item:hover{ background:var(--surface-2); color:var(--text-primary); }
.r-sb-item.active{ background:var(--red-soft); color:var(--red-text-soft); font-weight:700; box-shadow:inset 2px 0 0 0 var(--gold-text-soft); }
.r-sb-badge{ position:absolute; top:4px; left:4px; margin:0; background:var(--surface-3); color:var(--text-secondary); font-size:10.5px; padding:2px 7px; border-radius:var(--r-lg); font-weight:700; }
.r-sidebar.expanded .r-sb-badge{ position:static; margin-right:auto; }
.r-sb-item.active .r-sb-badge{ background:var(--red-hover); color:var(--on-accent); }
/* فاز ۹۰ — کاربر خواست به‌جای باکس متنی، یه آیکون جذاب برای ورود به گفتگوی زنده.
همون الگوی .r-sb-item (آیکون همیشه دیده می‌شه، برچسب فقط موقع باز شدن سایدبار
با opacity/max-width ظاهر می‌شه) + گرادیان برند (--gradient-brand) + یه هاله‌ی
پالسی ملایم رو خودِ آیکون تا واقعاً چشم‌گیر باشه، نه فقط یه دکمه‌ی ساده‌ی دیگه. */
.r-sb-chat-btn{ display:flex; align-items:center; justify-content:center; gap:11px; width:100%; background:none; border:none; padding:10px 0; margin-top:6px; border-radius:var(--r-sm); transition:background .18s var(--ease-out); }
.r-sidebar.expanded .r-sb-chat-btn{ justify-content:flex-start; padding:10px 12px; }
.r-sb-chat-btn:hover{ background:var(--surface-2); }
/* فاز ۹۱ — کاربر گفت گرادیانِ قرمز→طلایی فاز ۹۰ کافی نیست؛ خواست دقیقاً «قرمز
سلطنتی» (رنگ اصلی برند --red، نه ترکیب با طلایی) با یه هایلایتِ سایه‌ی رنگی پشتش
(halo) و زنده (پالس) باشه. */
.r-sb-chat-icon{
width:38px; height:38px; border-radius:50%; flex-shrink:0; background:linear-gradient(150deg, var(--red-hover), var(--red-deep)); color:var(--on-accent);
display:flex; align-items:center; justify-content:center;
box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 4px 12px rgba(0,0,0,.32), 0 0 18px rgba(239,43,53,.45);
animation:sbChatPulse 2.6s ease-in-out infinite;
}
.r-sb-chat-icon svg{ width:19px; height:19px; }
@keyframes sbChatPulse{
0%,100%{ box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 4px 12px rgba(0,0,0,.32), 0 0 18px rgba(239,43,53,.45), 0 0 0 0 var(--red-soft); }
50%{ box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 4px 12px rgba(0,0,0,.32), 0 0 24px rgba(239,43,53,.55), 0 0 0 8px transparent; }
}
.r-sb-chat-btn span{ display:inline-block; opacity:0; max-width:0; overflow:hidden; white-space:nowrap; font-size:13px; font-weight:600; color:var(--text-primary); transition:opacity .3s var(--ease-out), max-width .3s var(--ease-out); }
.r-sidebar.expanded .r-sb-chat-btn span{ opacity:1; max-width:160px; }
/* جمع‌شده پیش‌فرضه — متن/تگ‌لاین/شعار/کارت پشتیبانی مخفی، فقط با هاور رو سایدبار
(کلاً، نه تک‌تک آیتم) دوباره ظاهر می‌شن؛ هر آیتم title (تول‌تیپ بومی مرورگر) داره
برای وقتی که جمع‌شده و جای متن نیست. */
/* «زوم»/رشد هماهنگ به‌جای پاپ‌آپ ناگهانی — display:none نمی‌شه transition داد، پس
به‌جاش opacity+max-height با overflow:hidden، هم‌زمان با عرض خودِ سایدبار (۰.۳s)
رشد/جمع می‌شن. لیبل آیتم‌های منو (max-width) و لوگو (max-height) با همین الگوی
ساده‌ی دوپراپرتی درست کار می‌کنن (تأیید‌شده با اسکرین‌شات واقعی کاربر). */
.r-sb-logo b, .r-sb-logo-tagline{
opacity:0; max-height:0; overflow:hidden; transition:opacity .3s var(--ease-out), max-height .3s var(--ease-out);
}
.r-sidebar.expanded .r-sb-logo b, .r-sidebar.expanded .r-sb-logo-tagline{ opacity:1; max-height:60px; }
/* باگ واقعی دیگه پیدا‌شده (فاز ۲۶): wrapper شعار/کارت پشتیبانی با همین الگوی
max-height باز هم با اسکرین‌شات واقعی کاربر «کاملاً غایب»/بریده دیده شد — یعنی
خودِ max-height (که یه عدد سقفِ حدسی‌ه، نه ارتفاع واقعی محتوا) به‌نوعی قابل‌اعتماد
نبود رو این دو باکس مشخص (که برخلاف لوگو/تگ‌لاین، محتوای چندخطی/متغیر دارن).
رفعش: به‌جای max-height (عدد ثابتِ حدسی)، از grid-template-rows: 0fr→1fr استفاده
می‌کنیم — تکنیک استاندارد و مقاوم‌تر مدرن CSS برای «جمع‌شدن به ارتفاع صفر / بازشدن
به ارتفاع واقعی محتوا» که اصلاً نیازی به حدس‌زدن یه عدد سقف نداره، پس دیگه محدود
به مقدار محتوای واقعی نمی‌مونه، صرف‌نظر از اینکه متن چقدر بلند/کوتاهه. */
.r-sb-fade{
display:grid; grid-template-rows:0fr; opacity:0;
transition:grid-template-rows .3s var(--ease-out), opacity .3s var(--ease-out);
}
.r-sb-fade > *{ overflow:hidden; min-height:0; }
.r-sidebar.expanded .r-sb-fade{ grid-template-rows:1fr; opacity:1; }
.r-sb-item span{
display:inline-block; opacity:0; max-width:0; overflow:hidden; white-space:nowrap;
transition:opacity .3s var(--ease-out), max-width .3s var(--ease-out);
}
.r-sidebar.expanded .r-sb-item span{ opacity:1; max-width:160px; }
/* ============ MAIN COLUMN ============ */
.r-col-main{ flex:1; min-width:0; }
/* ============ TOPBAR (desktop) ============ */
.r-topbar{ display:none; }
@media (min-width:1024px){
.r-topbar{
/* فاز ۷۸ — قبلاً space-between بود چون دو فرزند داشت (.r-search بی‌فایده‌ی
حذف‌شده + .r-topbar-actions)؛ حالا که فقط یه فرزند مونده، flex-end همون
موضع بصری قبلی (چسبیده به لبه‌ی دور از شروع، تو RTL یعنی چپ) رو حفظ می‌کنه. */
display:flex; align-items:center; justify-content:flex-end; gap:20px;
padding:16px 28px; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:20; box-shadow:0 4px 16px rgba(0,0,0,.2); isolation:isolate;
}
}
/* فاز ۶۵ — باکس سرچ بالای داشبورد. مستقل و خودکفاست: هم رو موبایل هم دسکتاپ
داخل خودِ r-main (که پدینگ ریسپانسیوش رو از قبل داره) رندر می‌شه، و نتیجه‌ها
رو مستقیم DOM patch می‌کنه نه render() کامل — چون render() کامل رو یه input
متنی وسط تایپ فوکوس/مکان‌نما رو گم می‌کنه (تله‌ی مستندشده‌ی این فایل، فاز
۱۲/۵۰/۶۴). فاز ۷۸ — یه باکس سرچ قدیمی‌تر و بی‌فایده تو r-topbar دسکتاپ
(.r-search، به state.searchQuery/تب کاتالوگ وابسته، بدون هیچ فیدبک زنده‌ای
موقع تایپ) کنار همین باکس وجود داشت؛ کاربر گزارش داد «دو باکس سرچ» می‌بینه —
اون یکی کامل حذف شد، اینجا تنها باکس سرچ باقی‌مونده‌ست. */
.r-dash-search{ position:relative; margin-bottom:16px; }
.r-dash-search-box{ position:relative; }
.r-dash-search-box input{ width:100%; background:var(--surface-2); border:1px solid var(--border-strong); border-radius:var(--r-lg); padding:13px 44px 13px 40px; color:var(--text-primary); font-size:14px; transition:border-color .15s; }
.r-dash-search-box input:focus{ border-color:var(--red); outline:none; }
.r-dash-search-box > svg{ position:absolute; right:15px; top:50%; transform:translateY(-50%); width:17px; height:17px; color:var(--text-tertiary); pointer-events:none; }
.r-dash-search-clear{ position:absolute; left:8px; top:50%; transform:translateY(-50%); width:26px; height:26px; border-radius:50%; background:var(--surface-3,var(--surface)); border:none; align-items:center; justify-content:center; color:var(--text-tertiary); }
.r-dash-search-clear svg{ width:12px; height:12px; }
.r-dash-search-results{ display:none; position:absolute; top:calc(100% + 6px); right:0; left:0; z-index:5; background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--r-md); box-shadow:var(--shadow-md); max-height:340px; overflow-y:auto; padding:6px; }
.r-dash-search-results.open{ display:block; }
.r-dash-search-item{ display:flex; align-items:center; gap:10px; width:100%; background:none; border:none; border-radius:var(--r-sm); padding:9px 8px; text-align:right; }
.r-dash-search-item:hover{ background:var(--surface-2); }
.r-dash-search-item-icon{ width:34px; height:34px; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.r-dash-search-item-icon svg{ width:17px; height:17px; }
.r-dash-search-item-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.r-dash-search-item-text b{ font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.r-dash-search-item-text span{ font-size:11px; color:var(--text-tertiary); }
.r-dash-search-item-price{ font-size:11.5px; color:var(--text-secondary); white-space:nowrap; flex-shrink:0; }
.r-dash-search-empty{ padding:16px 10px; text-align:center; font-size:12.5px; color:var(--text-tertiary); }
/* فاز ۱۶۱ — دکمه‌ی ورودیِ «اگه نمی‌دونی از کجا شروع کنی»، زیرِ باکسِ سرچ. */
.r-service-finder-entry{ display:flex; align-items:center; gap:11px; width:100%; background:var(--surface-2); border:1px solid var(--border-strong); border-radius:var(--r-lg); padding:13px 15px; margin-bottom:16px; text-align:right; transition:.18s var(--ease-out); }
.r-service-finder-entry:hover{ border-color:var(--gold-line); background:var(--surface-3); }
.r-service-finder-entry:active{ transform:scale(.98); }
.r-service-finder-entry-icon{ width:34px; height:34px; border-radius:50%; background:var(--gradient-brand); color:var(--on-accent); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.r-service-finder-entry-icon svg{ width:17px; height:17px; }
.r-service-finder-entry-text{ flex:1; font-size:13.5px; font-weight:600; }
/* گامِ درخت‌تصمیمِ سرویس‌فایندر — هر گام یه رندرِ عمدیِ کاربرمحرکه (نه اتفاقی مثلِ
باگِ فازِ ۱۶۰)، پس ری‌پلی‌شدنِ این انیمیشن هر بار درسته، نه باگ. */
.r-finder-step{ animation:staggerFadeUp .32s var(--ease-out) both; }
/* همیشه ۲ستونه — چه موبایل چه دسکتاپ، عمداً برای صفرکردنِ ریسکِ نامتقارنی؛ حداکثر
۴ گزینه داریم که همیشه دقیقاً ۲×۲ جفت می‌شه. */
.r-finder-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.r-finder-option{ display:flex; flex-direction:column; align-items:center; gap:9px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-md); padding:18px 10px; transition:.18s var(--ease-out); text-align:center; }
.r-finder-option:hover{ border-color:var(--gold-line); background:var(--surface-3); transform:translateY(-2px); }
.r-finder-option:active{ transform:scale(.96); }
.r-finder-option-icon{ width:56px; height:56px; border-radius:50%; background:var(--gradient-brand); color:var(--on-accent); display:flex; align-items:center; justify-content:center; animation:iconFloat 5s ease-in-out infinite; }
.r-finder-option-icon svg{ width:24px; height:24px; }
.r-finder-option-label{ font-size:12.5px; font-weight:600; line-height:1.4; }
.r-finder-suggestion{ display:flex; align-items:center; gap:12px; width:100%; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-md); padding:13px 14px; margin-bottom:9px; text-align:right; transition:.18s var(--ease-out); }
.r-finder-suggestion:hover{ border-color:var(--gold-line); background:var(--surface-3); }
.r-finder-suggestion:active{ transform:scale(.98); }
.r-finder-suggestion-icon{ width:42px; height:42px; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.r-finder-suggestion-icon svg{ width:20px; height:20px; }
.r-finder-suggestion-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.r-finder-suggestion-text b{ font-size:13.5px; }
.r-finder-suggestion-text span{ font-size:11.5px; color:var(--text-tertiary); }
.r-topbar-actions{ display:flex; align-items:center; gap:14px; }
.r-bell{ position:relative; width:36px; height:36px; border-radius:50%; background:var(--surface-2); border:1px solid var(--border-strong); display:flex; align-items:center; justify-content:center; color:var(--text-secondary); }
.r-bell svg{ width:16px; height:16px; }
.r-bell .dot{ position:absolute; top:6px; left:8px; width:8px; height:8px; border-radius:50%; background:var(--red); border:2px solid var(--surface); }
/* ============ Mobile header (mobile only) ============ */
/* فاز ۴۳ — کاربر با تست واقعی رو گوشی پیدا کرد: چون viewport-fit=cover تنظیم شده
(برای PWA لبه‌به‌لبه)، بدون این padding، نوار بالا زیر ساعت/باتری/بریدگی گوشی
می‌رفت. env(safe-area-inset-top) صفر می‌شه رو مرورگرهایی که ازش پشتیبانی
نمی‌کنن، پس بی‌خطره. */
.r-header{ position:sticky; top:0; z-index:30; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; padding:calc(14px + env(safe-area-inset-top)) 18px 14px; box-shadow:0 4px 16px rgba(0,0,0,.24); isolation:isolate; }
/* فاز ۵۰ — کاربر گفت به‌جای بته‌جقه، طرح تذهیب (--pattern-girih موجود، همون گره‌چینی
هندسی طلایی که .r-motif-bg هم استفاده می‌کنه) رو نوار بالا بذار — پشت محتوا
(z-index:-1 + isolation:isolate بالا، هم‌الگو با .r-motif-bg).
فاز ۱۵۴ (ادامه) — background/backdrop-filter هم از خودِ .r-header/.r-topbar
به یه لایه‌ی جدا (::after) منتقل شد: کاربر گزارش داد translateZ(0) رو خودِ
آواتار (فازِ ۱۵۴ی قبلی) کافی نبود، دایره‌ی آواتار هنوز رو گوشیِ خودش ناقص
می‌موند. رفعِ ریشه‌ای‌تر: اگه آواتار اصلاً «فرزندِ مستقیمِ عنصری که خودش
backdrop-filter داره» نباشه، این کلاس باگ (کلیپِ گوشه‌ی گرد زیرِ والدِ
blur-دار) از پایه رخ نمی‌ده — پس بلور به یه لایه‌ی جدا (همیشه پشتِ محتوا)
منتقل شد؛ خودِ .r-header/.r-topbar دیگه هیچ backdrop-filterی روی خودشون
ندارن. عمداً ::after جدا از ::before (نه ترکیبِ توی همون یکی) — چون
opacity:.14ی پترنِ تذهیب اگه روی همین لایه هم اعمال بشه، پس‌زمینه/بلور هم
۸۶٪ محو می‌شد و هدر تقریباً شیشه‌ای/ناپیدا می‌شد. */
.r-header::before, .r-topbar::before{
content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
background-image:var(--pattern-girih); background-repeat:repeat; opacity:.14;
}
.r-header::after, .r-topbar::after{
content:''; position:absolute; inset:0; z-index:-2; pointer-events:none;
background-color:var(--glass-bg); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
#rama-rotate-lock{ display:none; }
/* فاز ۴۳ (اصلاح‌شده بعد از تست واقعی): pointer:coarse/hover:none اضافه شد تا فقط
صفحه‌ی لمسی واقعی (موبایل/تبلت) رو بگیره — یه پنجره‌ی دسکتاپ باریک با ماوس نباید
قفل بشه، حتی اگه عرضش زیر ۱۰۲۴ و شکلش افقی باشه. */
@media (max-width:1023px) and (orientation:landscape) and (hover:none) and (pointer:coarse){
#rama-root{ display:none; }
#rama-rotate-lock{ display:flex; position:fixed; inset:0; z-index:999; background:var(--bg); flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:24px; text-align:center; }
#rama-rotate-lock .r-rotate-icon{ font-size:48px; animation:ramaRotateHint 1.8s ease-in-out infinite; }
#rama-rotate-lock .r-rotate-text{ color:var(--text-primary); font-size:15px; font-weight:600; max-width:280px; }
@keyframes ramaRotateHint{ 0%,100%{ transform:rotate(0deg); } 50%{ transform:rotate(-90deg); } }
}
@media (min-width:1024px){ .r-header{ display:none; } }
.r-brand{ display:flex; align-items:center; gap:10px; }
.r-logo{ width:32px; height:32px; border-radius:9px; background:var(--red); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; color:var(--on-accent); }
.r-brand-text{ display:flex; flex-direction:column; line-height:1.25; }
.r-brand-text b{ font-size:14.5px; font-weight:700; }
.r-brand-text span{ font-size:10px; color:var(--text-tertiary); }
.r-header-actions{ display:flex; align-items:center; gap:8px; }
.r-wallet-chip{ display:flex; align-items:center; gap:6px; color:var(--text-secondary); padding:6px 10px; font-size:12px; border:1px solid var(--gold-line); border-radius:var(--r-lg); background:var(--gold-soft); }
.r-wallet-chip b{ color:var(--gold-text-soft); font-size:12.5px; font-weight:700; font-variant-numeric:tabular-nums; }
/* فاز ۹۱ — ساعت زنده‌ی تهران (فاز ۷، .r-clock-chip/.r-brand-clock) از بالای
نرم‌افزار حذف شد؛ CSS مرده‌ش هم همین‌جا حذف شد. */
.r-admin-toggle{ border:1px solid var(--border-strong); background:transparent; color:var(--text-secondary); border-radius:var(--r-lg); padding:6px 12px; font-size:11.5px; }
.r-admin-toggle.on{ background:var(--red-hover); border-color:var(--red-hover); color:var(--on-accent); }
/* فاز ۲۷ — کاربر گفت رنگ مکمل (فیروزه‌ای فاز ۱۸، بعد سبز سلطنتی فاز ۲۰) روی کار
ننشسته؛ برگشت به قرمز اصلی برند (همون چیزی که پیش از فاز ۱۸ بود) — قرمز زبان
اصلی این اپ‌ه، همه‌جای دیگه هم همینه، پس آواتار/دستیار هوشمند دیگه هویت بصری
مجزا و آزمایش‌نشده ندارن. */
.r-avatar-btn{ width:34px; height:34px; padding:0; border-radius:50%; background:linear-gradient(155deg, var(--red-hover), var(--red-deep)); border:none; color:var(--on-accent); font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:var(--shadow-sm); overflow:hidden; }
.r-avatar-btn:hover{ box-shadow:0 0 0 2px var(--red-soft); }
/* فاز ۱۵۱ — عکسِ پروفایل، وقتی کاربر آپلود کرده باشه؛ گرادیانِ پس‌زمینه به‌عنوانِ
پلیس‌هولدرِ لحظه‌ی لودِ عکس زیرش می‌مونه (overflow:hidden بالا گرد نگهش می‌داره). */
.r-avatar-btn img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }
/* علتِ واقعیِ باگِ چندین‌فازیِ «دایره‌ی ناقصِ آواتارِ هدر» — بالاخره با اندازه‌گیریِ
مستقیمِ getComputedStyle پیدا شد (نه حدس): آواتارِ هدر یه `