/* ============================================================================
   هویت رنگی ماشینو — «فولاد و نارنجی صنعتی»
   پایهٔ خنثای فولادی (خاکستری-آبی) + سرمه‌ای عمیق برای منو و سرصفحه + نارنجی
   پرقدرت برای کنش‌ها. حس کارخانه و ماشین‌آلات سنگین می‌دهد، برخلاف زرد قبلی که
   بیشتر «طلایی/تبلیغاتی» دیده می‌شد. تمام رنگ‌ها فقط از همین متغیرها می‌آیند،
   پس تغییر بعدی هویت هم با ویرایش همین چند خط ممکن است.
   ============================================================================ */
:root{
  --bg:#eef2f6; --bg2:#ffffff; --card:#ffffff; --border:#d7dee7;
  --txt:#16233a; --txt2:#5b6b82; --accent:#ff6b1a; --accent2:#e2540a;
  --navy:#16233a; --navy2:#1e3050; --navy-soft:#e6ebf2;
  --green:#16a34a; --red:#dc2626; --blue:#0284c7; --yellow:#d97706;
  --radius:16px; --shadow:0 4px 16px rgba(22,35,58,.09);
  /* جفت‌رنگ هر دسته: رنگ پررنگ + پس‌زمینهٔ ملایم هم‌خانواده، تا بخش‌های مختلف
     پنل در یک نگاه از هم تفکیک شوند. */
  --c1:#0e7490; --c1s:#e0f2f7; --c2:#16a34a; --c2s:#e4f7ec; --c3:#ff6b1a; --c3s:#ffefe4;
  --c4:#d97706; --c4s:#fdf3e2; --c5:#0284c7; --c5s:#e2f1fc; --c6:#7c3aed; --c6s:#f0eafc;
  --grad-warm:linear-gradient(130deg,#ff6b1a,#d97706 90%);
  --grad-cool:linear-gradient(135deg,#0284c7,#0e7490 60%,#16a34a);
  --grad-hero:linear-gradient(135deg,#e9eff6,#e0f2f7 55%,#ffefe4);
}
[data-theme="dark"]{
  --bg:#0d1522; --bg2:#131f31; --card:#16233a; --border:#26374f;
  --txt:#e8eef6; --txt2:#93a5bd; --accent:#ff7d33; --accent2:#ff6b1a;
  --navy:#0b1424; --navy2:#16233a; --navy-soft:#1c2b42;
  --shadow:0 4px 18px rgba(0,0,0,.4);
  --c1s:#0b3a45; --c2s:#0d3b25; --c3s:#43230d; --c4s:#3d2a0b; --c5s:#0a2f4a; --c6s:#2b1d47;
  --grad-hero:linear-gradient(135deg,#16233a,#0b3a45 55%,#43230d);
}
/* ---------- Official Persian typeface (self-hosted, works offline) ----------
   Vazirmatn در پنج وزن؛ کل رابط با وزن‌های سنگین‌تر (600/700/800) ست می‌شود تا ظاهر
   اداری و رسمی داشته باشد، نه سبکِ وبلاگی. */
@font-face{font-family:'Vazirmatn'; src:url('/fonts/Vazirmatn-Regular.woff2') format('woff2'); font-weight:400; font-display:swap;}
@font-face{font-family:'Vazirmatn'; src:url('/fonts/Vazirmatn-Medium.woff2') format('woff2'); font-weight:500; font-display:swap;}
@font-face{font-family:'Vazirmatn'; src:url('/fonts/Vazirmatn-SemiBold.woff2') format('woff2'); font-weight:600; font-display:swap;}
@font-face{font-family:'Vazirmatn'; src:url('/fonts/Vazirmatn-Bold.woff2') format('woff2'); font-weight:700; font-display:swap;}
@font-face{font-family:'Vazirmatn'; src:url('/fonts/Vazirmatn-Black.woff2') format('woff2'); font-weight:900; font-display:swap;}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
body{margin:0; font-family:'Vazirmatn',Tahoma,'Segoe UI',sans-serif; font-weight:600; font-feature-settings:"ss01"; background:var(--bg); color:var(--txt); transition:background .2s,color .2s;}
h1,h2,h3,h4,h5,h6{font-weight:900; letter-spacing:-.2px;}
th{font-weight:800;}
label{font-weight:700;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; font-weight:700; cursor:pointer;}
input,select,textarea{font-family:inherit; font-weight:600;}
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:var(--border); border-radius:8px;}

#app{display:flex; min-height:100vh;}

/* ---------- Sidebar — سرمه‌ای عمیق ----------
   منو روی پایهٔ تیره می‌نشیند تا محتوای اصلی (روی پس‌زمینهٔ فولادی روشن) جلو بیاید و
   ساختار صفحه در یک نگاه خوانده شود. رنگ هر گروه روی این پایهٔ تیره درخشان‌تر دیده
   می‌شود، پس به‌جای پس‌زمینهٔ ملایمِ روشن از تینت شفاف همان رنگ استفاده می‌کنیم. */
#sidebar{width:250px; background:var(--navy); color:#c9d6e5; border-left:1px solid rgba(255,255,255,.07); display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto; flex-shrink:0; transition:transform .25s; z-index:50;}
#sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);}
.brand{display:flex; align-items:center; gap:10px; padding:18px 16px; border-bottom:1px solid rgba(255,255,255,.08); color:#fff;}
.brand .logo{width:38px; height:38px; border-radius:10px; background:var(--grad-warm); display:flex; align-items:center; justify-content:center; font-weight:900; color:#fff; font-size:18px; box-shadow:0 4px 12px rgba(255,107,26,.35);}
.brand b{font-size:17px; color:#fff;}
.brand small{display:block; color:#8b9db6; font-size:11px;}
#sidebar .btn{background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.12); color:#dbe4f0;}
#sidebar .btn:hover{background:rgba(255,255,255,.12); border-color:var(--accent);}
#sidebar .btn-primary{background:var(--accent); border-color:var(--accent); color:#fff;}
.nav-group{padding:10px 10px 4px; border-top:1px solid rgba(255,255,255,.07);}
.nav-group:first-child{border-top:none;}
.nav-group .g-title{font-size:11.5px; font-weight:900; color:#8b9db6; padding:10px 10px 4px; letter-spacing:.3px;}

/* ---------- رنگ‌بندی گروه‌های منو ----------
   هر گروه سایدبار رنگ اختصاصی خودش را دارد (عنوان، نوار کناری، آیکون و حالت فعال)
   تا بخش‌های مختلف پنل در یک نگاه از هم تفکیک شوند. */
/* روی پایهٔ سرمه‌ای، رنگ هر گروه روشن‌تر انتخاب شده تا کنتراست کافی داشته باشد،
   و پس‌زمینهٔ حالت‌های hover/باز از تینت شفافِ همان رنگ ساخته می‌شود. */
.nav-group[data-group]{--gc:#38bdf8;}
.nav-group[data-group="marketplace"]{--gc:#38bdf8;}
.nav-group[data-group="ads"]{--gc:#fb923c;}
.nav-group[data-group="tools"]{--gc:#c084fc;}
.nav-group[data-group="role"]{--gc:#4ade80;}
.nav-group[data-group="account"]{--gc:#2dd4bf;}
.nav-group[data-group="assets"]{--gc:#fbbf24;}
.nav-group[data-group] .g-title{color:var(--gc); position:relative; padding-inline-start:16px;}
.nav-group[data-group] .g-title::before{content:""; position:absolute; inset-inline-start:4px; top:50%; transform:translateY(-50%); width:4px; height:15px; border-radius:3px; background:var(--gc);}
.nav-group[data-group].open > .g-title{background:color-mix(in srgb, var(--gc) 14%, transparent);}
.nav-group[data-group] .g-title .chev{color:var(--gc);}
.nav-group[data-group] .nav-item svg{color:var(--gc); opacity:.9;}
.nav-group[data-group] .nav-item:hover{background:color-mix(in srgb, var(--gc) 16%, transparent); color:#fff;}
.nav-group[data-group] .nav-item.active{background:var(--gc); color:#0b1424; box-shadow:0 3px 12px color-mix(in srgb, var(--gc) 45%, transparent);}
.nav-group[data-group] .nav-item.active svg{color:#0b1424; opacity:1;}

/* Collapsible sidebar groups (accordion) */
.nav-group.collapsible .g-title{display:flex; align-items:center; justify-content:space-between; cursor:pointer; user-select:none; padding:10px 10px; border-radius:8px;}
.nav-group.collapsible .g-title:hover{background:var(--card);}
.nav-group.collapsible .g-title .chev{transition:transform .18s; font-size:10px; color:var(--txt2);}
.nav-group.collapsible.open .g-title .chev{transform:rotate(90deg);}
.nav-group.collapsible .g-items{display:grid; grid-template-rows:0fr; transition:grid-template-rows .2s ease;}
.nav-group.collapsible .g-items > div{overflow:hidden;}
.nav-group.collapsible.open .g-items{grid-template-rows:1fr;}

/* Prominent "buy subscription" CTA */
.upgrade-cta{display:flex; align-items:center; gap:8px; background:linear-gradient(135deg, var(--accent), #d99a00); color:#0b1420; font-weight:800; font-size:12.5px; padding:10px 14px; border-radius:12px; margin:0 10px 10px;}
.upgrade-cta:hover{filter:brightness(1.05);}
/* دورهٔ آشنایی: رنگ سبز چون خبر خوب است، نه فراخوانِ فوریِ خرید */
.upgrade-cta.trial{background:linear-gradient(135deg, var(--green), #0f8a3c); color:#fff;}
.nav-item{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; color:var(--txt2); font-size:13.5px; font-weight:700; margin-bottom:2px;}
.nav-item .ic{width:20px; text-align:center; font-size:15px;}
.nav-item:hover{background:var(--card); color:var(--txt);}
.nav-item.active{background:var(--accent); color:#0b1420; font-weight:800;}
#sidebar-foot{margin-top:auto; padding:14px; border-top:1px solid var(--border); font-size:12px; color:var(--txt2);}

/* ---------- خوانایی نوار کناری ----------
   نوار کناری پس‌زمینهٔ سرمه‌ایِ ثابت دارد (‎--navy‎)، ولی قاعده‌های بالا رنگ متن را از
   متغیرهای پوسته می‌گرفتند. در پوستهٔ روشن ‎--txt2‎ یعنی ‎#5b6b82‎ که روی ‎#16233a‎
   نسبت کنتراستی حدود ۱٫۹ به ۱ می‌دهد — کمتر از نصفِ حداقلِ قابل‌قبول. یعنی منو
   عملاً خوانده نمی‌شد، و چون پوستهٔ روشن پیش‌فرض است، این حالتِ اکثر کاربران بود.
   در پوستهٔ تیره اتفاقی درست از آب درمی‌آمد و برای همین دیده نشده بود.

   پس اینجا رنگ‌ها ثابت‌اند، نه وابسته به پوسته: زمینه ثابت است، متن هم باید باشد. */
#sidebar .nav-item{color:#c9d6e5;}
#sidebar .nav-item:hover{background:rgba(255,255,255,.10); color:#fff;}
#sidebar .nav-group.collapsible .g-title:hover{background:rgba(255,255,255,.08);}
#sidebar .nav-group.collapsible .g-title .chev{color:#8b9db6;}
#sidebar-foot{border-top-color:rgba(255,255,255,.10); color:#8b9db6;}

/* ---------- خروج از حساب، داخل خودِ منو ----------
   پیش از این تنها دکمهٔ خروج، آیکنی در نوار بالا بود. روی موبایل آن نوار زیر همین
   کشو می‌رود، پس دقیقاً وقتی کاربر منو را باز کرده تا «خروج» را پیدا کند، دکمه‌اش
   پشت همان منو پنهان است. رنگش همان قرمزی است که آن آیکن از قبل داشت. */
/* نوار تبِ «پیگیری‌های من» — سه صفحه‌ای که از منو یک ردیف می‌گیرند.
   رنگی تعریف نمی‌شود؛ همان متغیرهای موجود. */
.tracking-tabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px;}
.tracking-tabs a{padding:8px 14px; border-radius:10px; font-size:12.5px; font-weight:700;
                 border:1px solid var(--border); color:var(--txt2);}
.tracking-tabs a.active{border-color:var(--accent); color:var(--accent);}

/* انتخاب زبان، ته منو. سه دکمهٔ کوچک کنار هم — رنگی تعریف نمی‌شود و همان رنگ‌های
   موجودِ نوار کناری را به ارث می‌برد. */
#sidebar-lang{display:flex; gap:6px; padding:10px 10px 0; margin-top:auto;}
#sidebar-lang form{flex:1;}
#sidebar-lang button{width:100%; padding:7px 4px; font-size:11.5px; font-weight:700;
                     border-radius:9px; background:transparent; border:1px solid rgba(255,255,255,.12);
                     color:#8b9db6; cursor:pointer; font-family:inherit;}
#sidebar-lang button.active{border-color:var(--accent); color:var(--accent);}

/* دکمهٔ خروج دیگر خودش را به ته نمی‌چسباند — انتخاب زبان بالای آن این کار را می‌کند. */
#sidebar-signout{padding:10px 10px 0;}
#sidebar-lang ~ #sidebar-signout{margin-top:0;}
#sidebar #sidebar-signout .nav-item.signout{color:var(--red); border:1px solid var(--red); justify-content:center;}
#sidebar #sidebar-signout .nav-item.signout svg{color:inherit;}
/* حالتِ hover عمداً تعریف نشده: قاعدهٔ عمومیِ ‎#sidebar .nav-item:hover‎ پس‌زمینه‌اش را
   می‌دهد و رنگ متن از قاعدهٔ بالا (که خاص‌تر است) قرمز می‌ماند. نوشتن یک رنگ تازه
   اینجا یعنی افزودن مقداری به پالت، که قرار نیست. */
/* پابرگ دیگر خودش را به ته نمی‌چسباند؛ حالا دکمهٔ خروج این کار را می‌کند و پابرگ
   باید بلافاصله زیرش بنشیند، نه با یک فاصلهٔ کشیده. */
#sidebar #sidebar-signout ~ #sidebar-foot{margin-top:0;}

/* ---------- منو روی صفحهٔ کوچک ----------
   همان ساختار و همان رنگ‌ها؛ فقط اندازه‌ها. سرگروه‌ها روی موبایل آن‌قدر کم‌ارتفاع
   بودند که نه شبیه دکمه به‌نظر می‌رسیدند و نه راحت زده می‌شدند. */
@media(max-width:900px){
  .nav-group.collapsible .g-title{padding:13px 12px; font-size:13px; border-radius:12px;}
  .nav-group.collapsible .g-title .chev{font-size:12px;}
  .nav-item{padding:12px 12px; font-size:14px; border-radius:12px; margin-bottom:4px;}
  .nav-group{padding:8px 10px 6px;}
}

/* ---------- Main ---------- */
#main{flex:1; min-width:0; display:flex; flex-direction:column;}
#topbar{display:flex; align-items:center; gap:12px; padding:12px 20px; border-bottom:1px solid var(--border); background:var(--bg2); position:sticky; top:0; z-index:30;}

.topbar-ticker{display:flex; align-items:center; gap:10px; font-size:12px; color:var(--txt2); white-space:nowrap; flex-shrink:0;}
.topbar-ticker #liveClock{font-weight:800; color:var(--txt); direction:ltr;}
.topbar-ticker .ticker-sep{color:var(--border);}
.topbar-ticker #goldPrice, .topbar-ticker #usdPrice{color:var(--accent); font-weight:700;}
/* روی صفحهٔ کوچک، دلار و سکه می‌مانند اما جمع‌وجورتر — نه اینکه کل نوار حذف شود.
   min-width:0 لازم است وگرنه flex-shrink بالا اجازهٔ کوچک‌شدن نمی‌دهد و نوار سرریز می‌کند. */
@media(max-width:640px){
    .topbar-ticker{font-size:11px; gap:8px; min-width:0; flex-shrink:1; overflow:hidden;}
}
#menuBtn{display:none; background:none; border:none; color:var(--txt); font-size:20px;}
#searchBox{flex:1; max-width:420px; display:flex; align-items:center; background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:8px 12px; gap:8px;}
#searchBox input{background:none; border:none; outline:none; color:var(--txt); width:100%; font-size:13px;}
.top-actions{display:flex; align-items:center; gap:8px; margin-inline-start:auto;}

.lang-switch{position:relative;}
.lang-menu{position:absolute; top:calc(100% + 8px); left:0; background:var(--card); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); padding:6px; display:none; flex-direction:column; min-width:130px; z-index:80;}
.lang-menu.show{display:flex;}
.lang-menu form{margin:0;}
.lang-menu button{width:100%; text-align:right; padding:9px 12px; border-radius:8px; font-size:13.5px; font-weight:600; color:var(--txt); background:transparent; border:none;}
.lang-menu button:hover{background:var(--bg);}
.lang-menu button.active{background:var(--accent); color:#0b1420; font-weight:800;}
.icon-btn{width:38px; height:38px; border-radius:10px; border:1px solid var(--border); background:var(--bg); color:var(--txt); display:flex; align-items:center; justify-content:center; position:relative;}
.badge{position:absolute; top:-4px; left:-4px; background:var(--red); color:#fff; font-size:10px; border-radius:10px; padding:1px 5px; min-width:16px; text-align:center;}
.user-chip{display:flex; align-items:center; gap:8px; padding:6px 10px 6px 6px; border:1px solid var(--border); border-radius:30px; background:var(--bg); font-size:13px;}
.avatar{width:26px; height:26px; border-radius:50%; background:var(--accent); color:#0b1420; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800;}
/* اکنون یک <button> است (قابل دسترسی با کیبورد)، پس رنگ و فونتِ ارثی دکمه باید خنثی شود
   تا ظاهرش دقیقاً همان نشانِ قبلی بماند. */
.usercode-badge{margin-top:10px; display:inline-flex; align-items:center; gap:6px; background:var(--bg); border:1px dashed var(--border); border-radius:10px; padding:6px 10px; font-size:12px; cursor:pointer; color:var(--txt); font-family:inherit; text-align:inherit;}
.usercode-badge:hover{border-color:var(--accent);}
.usercode-badge:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.usercode-badge .copy-ic{font-size:12px;}

/* هشدار پیش از قفل‌شدن صفحه — پایین صفحه، تا محتوا را نپوشاند */
.idle-warning{position:fixed; z-index:9998; inset-block-end:18px; inset-inline-start:50%;
    transform:translateX(50%); background:var(--card); border:1px solid var(--yellow);
    color:var(--txt); border-radius:12px; padding:12px 16px; font-size:12.5px;
    box-shadow:0 8px 28px rgba(0,0,0,.28); display:flex; align-items:center; gap:12px;
    max-width:min(420px, 92vw);}
.idle-warning b{color:var(--yellow); font-size:14px;}
.idle-warning button{border:1px solid var(--border); background:var(--bg); color:var(--txt);
    border-radius:8px; padding:6px 12px; font-size:12px; cursor:pointer; font-family:inherit; flex:none;}
.idle-warning button:hover{border-color:var(--accent);}

/* دکمهٔ بازگشت سراسری — بالای محتوای هر صفحه */
.back-btn{display:inline-flex; align-items:center; gap:6px; margin-bottom:14px; padding:7px 14px;
    border:1px solid var(--border); border-radius:10px; background:var(--card); color:var(--txt2);
    font-family:inherit; font-size:12.5px; font-weight:700; cursor:pointer;}
.back-btn:hover{border-color:var(--accent); color:var(--accent);}
.back-btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
/* در جهت راست‌به‌چپ فلش باید به راست باشد؛ در چپ‌به‌راست برعکس */
[dir="ltr"] .back-btn span{transform:scaleX(-1);}
@media print{ .back-btn{display:none !important;} }

/* گالری تصاویر آگهی */
.ad-gallery{display:grid; grid-template-columns:repeat(auto-fill, minmax(110px, 1fr)); gap:10px; margin-top:10px;}
.ad-gallery-item{position:relative; border:1px solid var(--border); border-radius:10px; overflow:hidden; background:var(--bg);}
.ad-gallery-item img{width:100%; aspect-ratio:4/3; object-fit:cover; display:block;}
.ad-gallery-item .cover-tag{position:absolute; top:5px; inset-inline-start:5px; background:var(--accent);
    color:#0b1420; font-size:9.5px; font-weight:800; padding:2px 7px; border-radius:6px;}
.ad-gallery-item form{position:absolute; bottom:5px; inset-inline-end:5px; margin:0;}
.ad-gallery-item button{border:none; background:rgba(0,0,0,.62); color:#fff; border-radius:6px;
    padding:3px 8px; font-size:11px; cursor:pointer; font-family:inherit;}
.ad-gallery-item button:hover{background:var(--red);}

/* نوار فیلتر آگهی‌ها */
.ad-filters{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:16px;
    background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:12px 14px;}
.ad-filters input, .ad-filters select{margin:0; height:36px; font-size:12.5px; min-width:0;}
.ad-filter-q{flex:2 1 220px;}
.ad-filters select{flex:1 1 140px;}
.ad-filter-count{margin-inline-start:auto; font-size:11.5px; color:var(--txt2); white-space:nowrap;}
@media(max-width:640px){
    .ad-filters{padding:10px;}
    .ad-filter-q{flex:1 1 100%;}
    .ad-filter-count{margin-inline-start:0;}
}

/* صفحه‌بندی */
.ad-pager{display:flex; gap:5px; justify-content:center; align-items:center; flex-wrap:wrap; margin-top:20px;}
.ad-pager a, .ad-pager .current{min-width:34px; height:34px; display:inline-flex; align-items:center;
    justify-content:center; padding:0 9px; border-radius:9px; font-size:12.5px; font-weight:700;
    border:1px solid var(--border); text-decoration:none; color:var(--txt);}
.ad-pager a:hover{border-color:var(--accent); color:var(--accent);}
.ad-pager .current{background:var(--accent); border-color:var(--accent); color:#0b1420;}
.ad-pager-gap{color:var(--txt2); padding:0 2px;}

/* آگهیِ منقضی/غیرفعال در «آگهی‌های من» — دیده می‌شود ولی از فعال‌ها متمایز است */
.ad-dim{opacity:.62;}
.ad-dim:hover{opacity:1;}

/* نشان «افزودن یادآور» کنار رکوردها — کوچک و کم‌رنگ تا محتوا را شلوغ نکند */
.reminder-btn{display:inline-flex; align-items:center; justify-content:center; vertical-align:middle;
    width:24px; height:24px; margin-inline-start:5px; border-radius:7px; text-decoration:none;
    font-size:13px; line-height:1; opacity:.55; transition:opacity .15s, background .15s;}
.reminder-btn:hover{opacity:1; background:var(--bg);}
.reminder-btn:focus-visible{opacity:1; outline:2px solid var(--accent); outline-offset:1px;}

/* فهرست یادآورها */
.reminder-row{display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-bottom:1px solid var(--border);}
.reminder-row:last-child{border-bottom:none;}
.reminder-row.overdue{background:color-mix(in srgb, var(--red) 6%, transparent);}
.reminder-main{flex:1; min-width:0;}
.reminder-title{display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:13.5px;}
.reminder-meta{font-size:11.5px; color:var(--txt2); margin-top:4px;}
.reminder-note{font-size:12px; color:var(--txt2); margin-top:6px; line-height:1.9;}
.reminder-sms{font-size:11px; opacity:.8;}
.reminder-actions{display:flex; gap:5px; flex:none;}
.reminder-actions form{margin:0;}

/* کارت «مراجعات امروز» در داشبورد مدیریت */
.visit-now{display:flex; gap:26px; margin:6px 0 12px;}
.visit-metric b{display:block; font-size:26px; font-weight:900; color:var(--accent); line-height:1.2;}
.visit-metric span{font-size:11.5px; color:var(--txt2);}
.visit-compare{font-size:11.5px; color:var(--txt2); margin-bottom:12px;}
.visit-compare.up{color:var(--green);}
.visit-compare.down{color:var(--red);}
/* نمودار میله‌ای هفت روز — بدون کتابخانه، چون هفت عدد ارزش یک وابستگی تازه را ندارد */
.visit-week{display:flex; align-items:flex-end; gap:6px; height:56px;}
.visit-bar{flex:1; height:100%; display:flex; align-items:flex-end; background:var(--bg); border-radius:4px; overflow:hidden;}
.visit-bar-fill{width:100%; background:var(--accent); opacity:.75; border-radius:4px; transition:height .25s;}
.visit-week-label{font-size:10.5px; color:var(--txt2); margin-top:6px; text-align:center;}

/* جای نقشه وقتی کلید نشان وارد نشده — به‌جای مستطیل خاکستریِ بی‌توضیح */
.map-unavailable{display:flex; align-items:center; gap:14px; padding:22px 18px; border-radius:12px;
    border:1px dashed var(--border); background:var(--bg); color:var(--txt2); font-size:13px;}
.map-unavailable-icon{font-size:30px; line-height:1; opacity:.7; flex:none;}
.map-unavailable b{color:var(--txt);}
.map-unavailable-hint{margin-top:5px; font-size:11.5px; line-height:1.9;}

/* نسخهٔ بارگذاری‌شده — عمداً کم‌رنگ: اطلاعاتی است که وقتی لازم شود پیدا می‌شود،
   نه چیزی که در نگاه اول با محتوای صفحه رقابت کند. */
.app-version{margin-top:4px; font-size:11px; color:var(--txt2); opacity:.85; direction:rtl;}

/* دکمهٔ کپی کنار شناسه‌ها (کد کاربری، سریال شناسنامه، کد رهگیری، شمارهٔ فاکتور).
   عمداً کوچک و کم‌رنگ است تا خودِ شناسه را در متن گم نکند. */
.copy-btn{display:inline-flex; align-items:center; justify-content:center; vertical-align:middle;
    width:22px; height:22px; padding:0; margin-inline-start:5px; border:none; border-radius:6px;
    background:transparent; color:var(--txt2); font-size:11.5px; line-height:1; cursor:pointer;
    opacity:.55; transition:opacity .15s, background .15s;}
.copy-btn:hover{opacity:1; background:var(--bg);}
/* حلقهٔ فوکوس حذف نمی‌شود: تنها نشانهٔ کاربر کیبورد برای دیدن جای خودش است. */
.copy-btn:focus-visible{opacity:1; outline:2px solid var(--accent); outline-offset:1px;}
.copy-btn .copy-ic{pointer-events:none;}

/* کادر «کپی دستی» — وقتی مرورگر اجازهٔ کپی خودکار نمی‌دهد (بستر ناامن). */
.copy-fallback{position:fixed; z-index:9999; inset-block-end:20px; inset-inline-start:50%;
    transform:translateX(50%); max-width:min(420px, 92vw); background:var(--card);
    border:1px solid var(--accent); border-radius:12px; padding:14px 16px;
    box-shadow:0 8px 28px rgba(0,0,0,.28); display:flex; flex-direction:column; gap:9px;}
.copy-fallback-msg{font-size:12px; color:var(--txt); line-height:1.9;}
.copy-fallback input{width:100%; text-align:left; font-size:13px; padding:8px 10px;
    border:1px solid var(--border); border-radius:8px; background:var(--bg); color:var(--txt);}
.copy-fallback-close{align-self:flex-end; border:1px solid var(--border); background:var(--bg);
    color:var(--txt); border-radius:8px; padding:5px 14px; font-size:12px; cursor:pointer; font-family:inherit;}

/* روی کاغذ، دکمه معنایی ندارد — فاکتور و کارت شناسایی چاپی باید تمیز بمانند. */
@media print{
    .copy-btn, .copy-fallback{display:none !important;}
}

#content{padding:20px; max-width:1400px; width:100%; margin:0 auto;}
.page-head{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:18px;}
.page-head h1{font-size:20px; font-weight:900; margin:0;}
.page-head .sub{color:var(--txt2); font-size:12.5px; font-weight:600;}
.spacer{flex:1;}

.btn{display:inline-flex; align-items:center; gap:6px; padding:9px 16px; border-radius:10px; border:1px solid var(--border); background:var(--card); color:var(--txt); font-size:13px; font-weight:600;}
.btn:hover{border-color:var(--accent);}
.btn-primary{background:var(--accent); border-color:var(--accent); color:#0b1420; font-weight:800;}
.btn-primary:hover{background:#e67e00;}
.btn-green{background:var(--green); border-color:var(--green); color:#fff;}
.btn-red{background:var(--red); border-color:var(--red); color:#fff;}
.btn-sm{padding:6px 10px; font-size:12px;}
.btn-ghost{background:transparent;}

.grid{display:grid; gap:16px;}
.g2{grid-template-columns:repeat(2,1fr);}
.g3{grid-template-columns:repeat(3,1fr);}
.g4{grid-template-columns:repeat(4,1fr);}
@media(max-width:1100px){.g4{grid-template-columns:repeat(2,1fr);} .g3{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr;}}

.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow);}
.stat{display:flex; flex-direction:column; gap:6px;}
.stat .n{font-size:25px; font-weight:900; letter-spacing:-.5px;}
.stat .l{color:var(--txt2); font-size:12px; font-weight:700;}
.stat .ic{width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:17px; margin-bottom:6px;}

/* ---------- کارت‌های آماری رنگی ----------
   کارت‌های KPI داشبوردها به‌ترتیب رنگ می‌گیرند (نوار بالایی + عدد رنگی) تا پنل
   یکنواخت و بی‌روح نباشد؛ بدون نیاز به تغییر ویوها. */
.grid > .card.stat{--sc:var(--c1); overflow:hidden;}
.grid > .card.stat:nth-child(6n+2){--sc:var(--c2);}
.grid > .card.stat:nth-child(6n+3){--sc:var(--c4);}
.grid > .card.stat:nth-child(6n+4){--sc:var(--c6);}
.grid > .card.stat:nth-child(6n+5){--sc:var(--c5);}
.grid > .card.stat:nth-child(6n+6){--sc:var(--c3);}
.grid > .card.stat::before{background:var(--sc);}
.grid > .card.stat .n{color:var(--sc);}
.grid > .card.stat::after{content:""; position:absolute; top:0; inset-inline-end:0; width:74px; height:74px; border-radius:50%; transform:translate(35%,-45%); background:var(--sc); opacity:.09; pointer-events:none;}

table{width:100%; border-collapse:collapse; font-size:13px;}
th,td{padding:10px 12px; text-align:right; border-bottom:1px solid var(--border);}
th{color:var(--txt2); font-weight:900; font-size:11.5px; text-transform:uppercase; letter-spacing:.4px; position:sticky; top:0; background:var(--bg); border-bottom:2px solid var(--border); z-index:1;}
td{font-weight:600;}
tr:hover td{background:rgba(255,138,0,.04);}
.table-wrap{overflow-x:auto; border-radius:var(--radius); border:1px solid var(--border);}
.table-wrap table{border:none;}
.table-wrap.card{padding:0;}
.table-wrap.card table th:first-child, .table-wrap.card table td:first-child{padding-right:16px;}

.stat{display:flex; flex-direction:column; gap:6px; position:relative; padding-top:4px;}
.stat::before{content:""; position:absolute; top:-16px; right:-16px; left:-16px; height:3px; border-radius:3px 3px 0 0; background:var(--accent);}
.stat .n{font-size:26px; font-weight:800; letter-spacing:-.5px;}
.stat .l{color:var(--txt2); font-size:11.5px; font-weight:600;}
.stat .ic{width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:17px; margin-bottom:6px;}

.pill{display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:700;}
.pill-gray{background:#8888881a; color:var(--txt2);}
.pill-blue{background:#3498db22; color:var(--blue);}
.pill-green{background:#2ecc7122; color:var(--green);}
.pill-red{background:#e74c3c22; color:var(--red);}
.pill-yellow{background:#f1c40f22; color:#c9960b;}
.pill-purple{background:#8e44ad22; color:#8e44ad;}

/* ---------- Admin ad-import: card-based review list ---------- */
.import-list{display:flex; flex-direction:column; gap:14px;}
.import-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow);}
.import-card-head{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-bottom:10px;}
.import-source{font-size:11.5px; color:var(--txt2);}
.import-title{font-size:15px; font-weight:800; margin-bottom:6px;}
.import-meta{font-size:12px; color:var(--txt2); margin-bottom:10px;}
.import-translate{background:var(--bg); border:1px solid var(--border); border-radius:12px; padding:14px; margin:10px 0;}
.tiny-label{font-size:11px; color:var(--txt2); font-weight:700; display:block; margin-bottom:6px;}
.text-box{background:var(--card); border:1px solid var(--border); border-radius:8px; padding:10px; font-size:12.5px; line-height:1.8; color:var(--txt); min-height:80px;}
.import-actions{display:flex; gap:8px; margin-top:8px;}
.pill-orange{background:#ff8a0022; color:var(--accent);}

.field{margin-bottom:14px;}
.field label{display:block; font-size:13px; margin-bottom:6px; font-weight:600;}
.field .hint{font-size:11px; color:var(--txt2); margin-top:4px;}
.field input,.field select,.field textarea{width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:var(--bg); color:var(--txt); font-size:13px; outline:none;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);}
.field textarea{resize:vertical; min-height:80px;}
.field.error input,.field.error select,.field.error textarea{border-color:var(--red);}
.field .err-msg{color:var(--red); font-size:11px; margin-top:4px; display:none;}
.field.error .err-msg{display:block;}
.req{color:var(--red);}

.modal-bg{position:fixed; inset:0; background:rgba(0,0,0,.55); display:none; align-items:center; justify-content:center; z-index:200; padding:16px;}
.modal-bg.show{display:flex;}
.modal{background:var(--bg2); border-radius:16px; width:100%; max-width:560px; max-height:88vh; overflow-y:auto; border:1px solid var(--border); box-shadow:var(--shadow);}
.modal-head{display:flex; align-items:center; padding:16px 18px; border-bottom:1px solid var(--border);}
.modal-head h3{margin:0; font-size:16px;}
.modal-body{padding:18px;}
.modal-foot{padding:14px 18px; border-top:1px solid var(--border); display:flex; gap:10px; justify-content:flex-end;}
.close-x{margin-inline-start:auto; background:none; border:none; color:var(--txt2); font-size:20px;}

.toast-wrap{position:fixed; bottom:18px; left:18px; z-index:300; display:flex; flex-direction:column; gap:8px;}
.toast{background:var(--card); border:1px solid var(--border); border-radius:10px; padding:12px 16px; box-shadow:var(--shadow); font-size:13px; display:flex; align-items:center; gap:8px; animation:slideIn .25s;}
@keyframes slideIn{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);}}

.empty{text-align:center; padding:50px 20px; color:var(--txt2);}
.empty .ic{font-size:38px; margin-bottom:10px;}

.steps{display:flex; align-items:center; gap:4px; overflow-x:auto; padding-bottom:6px;}
.step{padding:6px 12px; border-radius:20px; background:var(--bg); border:1px solid var(--border); font-size:11px; white-space:nowrap; color:var(--txt2);}
.step.done{background:var(--green); border-color:var(--green); color:#fff;}
.step.current{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:700;}
.step-arrow{color:var(--border);}

.tabs{display:flex; gap:6px; border-bottom:1px solid var(--border); margin-bottom:16px; overflow-x:auto;}
.tab{padding:10px 14px; font-size:13px; color:var(--txt2); border-bottom:2px solid transparent; white-space:nowrap; font-weight:600;}
.tab.active{color:var(--accent); border-color:var(--accent);}

.chat-wrap{display:flex; height:calc(100vh - 140px); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:var(--card);}
.chat-list{width:280px; border-inline-end:1px solid var(--border); overflow-y:auto; flex-shrink:0;}
.chat-item{display:flex; gap:10px; padding:12px; border-bottom:1px solid var(--border);}
.chat-item.active{background:rgba(255,138,0,.08);}
.chat-main{flex:1; display:flex; flex-direction:column; min-width:0;}
.chat-msgs{flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px;}
.msg{max-width:70%; padding:10px 14px; border-radius:14px; font-size:13px; line-height:1.6;}
.msg.me{align-self:flex-end; background:var(--accent); color:#fff; border-bottom-left-radius:4px;}
.msg.them{align-self:flex-start; background:var(--bg); border:1px solid var(--border); border-bottom-right-radius:4px;}
.chat-input{display:flex; gap:8px; padding:12px; border-top:1px solid var(--border);}
.chat-input input{flex:1; padding:10px 14px; border-radius:20px; border:1px solid var(--border); background:var(--bg); color:var(--txt); outline:none;}

.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; background:radial-gradient(circle at 30% 20%, #ff8a0022, transparent 50%), var(--bg);}
.login-card{width:100%; max-width:420px; background:var(--card); border:1px solid var(--border); border-radius:18px; padding:30px; box-shadow:var(--shadow);}
.login-logo{display:flex; flex-direction:column; align-items:center; gap:8px; margin-bottom:22px;}
.login-logo .logo{width:56px; height:56px; font-size:26px;}
.demo-roles{display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:14px;}
.demo-role-btn{padding:8px; border-radius:10px; border:1px dashed var(--border); background:transparent; color:var(--txt2); font-size:11px; text-align:center;}
.demo-role-btn:hover{border-color:var(--accent); color:var(--accent);}

.kv{display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px dashed var(--border); font-size:13px;}
.kv .k{color:var(--txt2);}

.overlay-close{position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:40; display:none;}
.overlay-close.show{display:block;}

/* ---------- Bottom mobile nav (Divar/Sheypoor style) ---------- */
#bottomNav{display:none; position:fixed; bottom:0; right:0; left:0; height:64px; background:var(--bg2); border-top:1px solid var(--border); z-index:80; align-items:center; justify-content:space-around; padding-bottom:env(safe-area-inset-bottom);}
.bn-item{display:flex; flex-direction:column; align-items:center; gap:2px; color:var(--txt2); font-size:10px; flex:1; padding:6px 0;}
.bn-item.active{color:var(--accent);}
.bn-item .bn-ic{font-size:19px;}
.bn-fab{position:relative; top:-18px; width:52px; height:52px; border-radius:50%; background:linear-gradient(135deg,var(--accent),#d99a00); display:flex; align-items:center; justify-content:center; font-size:24px; color:#0b1420; box-shadow:0 6px 16px rgba(242,180,0,.4); border:4px solid var(--bg2); flex:0 0 auto;}
@media(max-width:900px){
  #bottomNav{display:flex;}
  #content{padding-bottom:84px;}
  #topbar{padding:10px 14px;}
}

/* ---------- Filter bar (city/country) ---------- */
.filter-bar{display:flex; gap:8px; overflow-x:auto; padding-bottom:2px; margin-bottom:14px;}
.filter-select{flex-shrink:0; padding:8px 12px; border-radius:20px; border:1px solid var(--border); background:var(--card); color:var(--txt); font-size:12px;}

/* ---------- List-row card (directory style) ---------- */
.row-card{display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--border); border-radius:14px; padding:12px; margin-bottom:10px; cursor:pointer;}
.row-card .rc-avatar{width:52px; height:52px; border-radius:14px; background:linear-gradient(135deg,#22334a,#182536); display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0;}
.row-card .rc-main{flex:1; min-width:0;}
.row-card .rc-title{display:flex; justify-content:space-between; align-items:center; gap:6px;}
.row-card .rc-name{font-weight:800; font-size:13.5px;}
.row-card .rc-sub{color:var(--txt2); font-size:11.5px; margin-top:3px;}
.row-card .rc-tags{display:flex; gap:5px; margin-top:6px; flex-wrap:wrap;}
.row-card .rc-tag{background:var(--bg); border:1px solid var(--border); color:var(--txt2); font-size:10px; padding:2px 8px; border-radius:8px;}
.row-card .rc-bookmark{color:var(--txt2); font-size:16px; flex-shrink:0;}
.rc-rating{display:flex; align-items:center; gap:3px; font-size:11px; color:var(--accent2); font-weight:700;}

/* ---------- FAB action sheet ---------- */
.sheet-item{display:flex; align-items:center; gap:12px; padding:14px 6px; border-bottom:1px dashed var(--border); font-size:13px; font-weight:700;}
.sheet-item .si-ic{width:40px; height:40px; border-radius:12px; background:var(--bg); display:flex; align-items:center; justify-content:center; font-size:18px;}
.sheet-item:last-child{border-bottom:none;}

@media(max-width:900px){
  #sidebar{position:fixed; right:0; top:0; transform:translateX(100%);}
  #sidebar.open{transform:translateX(0);}
  #menuBtn{display:flex;}
  #searchBox{max-width:none;}
}
.hide-mobile{}
@media(max-width:640px){.hide-mobile{display:none;}}

.product-card{cursor:pointer;}
.product-card img,.product-thumb{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:10px; background:var(--bg);}
.thumb-ph{width:100%; aspect-ratio:4/3; border-radius:10px; background:linear-gradient(135deg,#22293380,#1a1f2680); display:flex; align-items:center; justify-content:center; font-size:30px; color:var(--txt2);}
[data-theme="light"] .thumb-ph{background:linear-gradient(135deg,#eef1f5,#e4e8ee);}

.progress-bar{height:6px; border-radius:6px; background:var(--bg); overflow:hidden; border:1px solid var(--border);}
.progress-bar > div{height:100%; background:var(--accent);}

/* ---------- MVC-specific additions ---------- */
.form-group{margin-bottom:14px;}
.form-group .err-msg{display:none;color:var(--red);font-size:11.5px;margin-top:5px;}
.form-group .err-msg.show{display:block;}
.form-group input.invalid, .form-group select.invalid, .form-group textarea.invalid{border-color:var(--red);}
.form-group label{display:block; font-size:13px; margin-bottom:6px; font-weight:600;}
.form-group input, .form-group select, .form-group textarea{width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:var(--bg); color:var(--txt); font-size:13px; outline:none;}
.form-group textarea{min-height:90px; resize:vertical;}
.alert{padding:12px 16px; border-radius:10px; margin-bottom:14px; font-size:13px;}
table a{color:var(--accent);}

/* ---------- Modernization pass: icons, images, alerts, refined stat cards ---------- */
.icon{display:inline-block; vertical-align:middle; margin-inline-end:8px; flex-shrink:0;}
.nav-item .icon{margin-inline-end:10px; opacity:.85;}
.nav-item.active .icon{opacity:1;}
.btn .icon{margin-inline-end:6px; width:15px; height:15px;}
.icon-btn .icon, #menuBtn .icon{margin:0;}
.bn-ic{display:none;}
.bn-item .icon{width:20px; height:20px; margin:0 0 2px;}
.bn-fab .icon{width:22px; height:22px; color:#0b1420;}
.close-x .icon{margin:0;}

.stat .ic{background:none !important; width:4px; height:28px; border-radius:4px; margin-bottom:10px;}
.avatar-img{background-size:cover; background-position:center;}
.detail-image{width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:12px; background:var(--bg);}
.row-card .rc-avatar{overflow:hidden; padding:0;}
.row-card .rc-avatar img{width:100%; height:100%; object-fit:cover;}
.product-card img.thumb-real{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:10px;}

.alert{display:flex; align-items:center; gap:8px;}
.alert-success{border:1px solid var(--green); color:var(--green); background:color-mix(in srgb, var(--green) 10%, transparent);}
.alert-error{border:1px solid var(--red); color:var(--red); background:color-mix(in srgb, var(--red) 10%, transparent);}
.alert-warning{border:1px solid var(--yellow); color:var(--yellow); background:color-mix(in srgb, var(--yellow) 10%, transparent);}

.sheet-sub{font-weight:400; color:var(--txt2); font-size:11px; margin-top:2px;}

/* Cleaner, flatter card + button language */
.card{box-shadow:none; border-radius:16px;}
.btn{border-radius:10px;}
.btn-primary{box-shadow:0 2px 10px rgba(242,180,0,.25);}
#topbar{box-shadow:0 1px 0 var(--border);}
.row-card{transition:border-color .15s;}
.row-card:hover{border-color:var(--accent);}
.nav-item{transition:background .15s, color .15s;}

/* Location badge used across directory/profile cards */
.loc-badge{display:inline-flex; align-items:center; gap:4px; font-size:11px; color:var(--txt2);}
.loc-badge .icon{margin:0; width:13px; height:13px;}

/* ---------- راهنمای استفاده (پنجرهٔ آموزش ورود + صفحهٔ کامل) ---------- */
.guide-overlay{position:fixed; inset:0; background:rgba(11,20,32,.62); backdrop-filter:blur(3px); z-index:200; display:none; align-items:center; justify-content:center; padding:18px;}
.guide-overlay.open{display:flex;}
.guide-modal{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:0 20px 50px rgba(0,0,0,.3); width:100%; max-width:760px; max-height:92vh; display:flex; flex-direction:column; overflow:hidden;}
.guide-head{display:flex; align-items:flex-start; gap:10px; padding:16px 18px; border-bottom:1px solid var(--border); background:linear-gradient(135deg,var(--c1s),var(--c3s));}
.guide-head h2{margin:0; font-size:17px; font-weight:900;}
.guide-head .guide-sub{color:var(--txt2); font-size:12px; font-weight:600; margin-top:3px;}
.guide-x{margin-inline-start:auto; background:none; border:none; font-size:24px; line-height:1; color:var(--txt2); padding:0 4px;}
.guide-x:hover{color:var(--red);}
.guide-body{padding:16px 18px; overflow-y:auto;}
.guide-foot{display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:12px 18px; border-top:1px solid var(--border); background:var(--bg);}

.guide-video{margin-bottom:16px;}
.guide-video video{width:100%; max-height:380px; border-radius:12px; background:#000; display:block;}
.guide-embed{position:relative; width:100%; padding-top:56.25%; border-radius:12px; overflow:hidden; background:#000;}
.guide-embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.guide-video-empty{display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; padding:26px 16px; border:2px dashed var(--border); border-radius:12px; background:var(--bg);}
.guide-video-empty b{font-size:14px;}
.guide-video-empty span{font-size:12px; color:var(--txt2);}

/* فهرست مطالب صفحهٔ کامل راهنما — پیوند لنگری به هر بخش */
.guide-toc{border:1px solid var(--border); background:var(--bg); border-radius:14px; padding:12px 14px; margin-bottom:18px;}
.guide-toc-title{font-size:13px; font-weight:900; margin-bottom:8px; color:var(--c1);}
.guide-toc-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:6px; counter-reset:guidetoc;}
.guide-toc-list li{counter-increment:guidetoc; min-width:0;}
.guide-toc-list a{display:flex; align-items:center; gap:7px; padding:7px 9px; border-radius:10px; background:var(--card); border:1px solid var(--border); font-size:12.5px; font-weight:800; color:var(--txt); line-height:1.7;}
.guide-toc-list a::before{content:counter(guidetoc,persian); flex-shrink:0; width:20px; height:20px; border-radius:6px; background:var(--c1s); color:var(--c1); font-size:11px; font-weight:900; display:flex; align-items:center; justify-content:center;}
.guide-toc-list a:hover{border-color:var(--c1); background:var(--c1s);}
.guide-toc-emoji{flex-shrink:0;}
.guide-toc-name{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.guide-toc-count{flex-shrink:0; font-size:10.5px; font-weight:700; color:var(--txt2);}

.guide-section{margin-bottom:22px; scroll-margin-top:76px;}
.guide-section-title{display:flex; align-items:center; gap:7px; font-size:14px; font-weight:900; padding-bottom:8px; margin:0 0 12px; border-bottom:2px solid var(--c1); color:var(--c1);}
.guide-section-emoji{font-size:17px; line-height:1;}
.guide-section-name{flex:1; min-width:0; line-height:1.9;}
.guide-section-count{flex-shrink:0; font-size:11px; font-weight:800; color:var(--txt2); background:var(--bg); border:1px solid var(--border); border-radius:999px; padding:2px 9px;}
.guide-section.tone-b .guide-section-title{border-color:var(--c2); color:var(--c2);}
.guide-section.tone-c .guide-section-title{border-color:var(--c4); color:var(--c4);}
.guide-section.tone-b .guide-step-num{background:var(--c2); }
.guide-section.tone-c .guide-step-num{background:var(--c4); }

.guide-steps{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
.guide-step{display:flex; gap:10px; align-items:flex-start; background:var(--bg); border:1px solid var(--border); border-radius:12px; padding:11px 13px;}
.guide-step-num{width:30px; height:30px; flex-shrink:0; border-radius:50%; background:var(--c1); color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:900; margin-top:2px;}
.guide-step-main{flex:1; min-width:0;}
.guide-step-main b{font-size:13px; display:block; margin-bottom:4px; line-height:1.95;}
.guide-step-tag{display:inline-block; font-size:10.5px; font-weight:800; color:var(--txt2); background:var(--card); border:1px solid var(--border); border-radius:999px; padding:1px 8px; margin-inline-end:4px; vertical-align:middle;}
.guide-step-emoji{font-size:15px;}
.guide-step-main p{margin:0; font-size:12.5px; line-height:2.15; color:var(--txt2); font-weight:600;}
.guide-step-link{display:inline-block; margin-top:7px; font-size:12px; font-weight:800; color:var(--accent);}
.guide-page{padding:18px;}

@media(max-width:640px){
  .guide-overlay{padding:0;}
  .guide-modal{max-width:100%; max-height:100vh; border-radius:0; border:none;}
  .guide-head h2{font-size:15px;}
  .guide-foot{gap:6px;}
  .guide-foot .btn{flex:1; justify-content:center;}
  .guide-video video{max-height:230px;}
  .guide-page{padding:12px;}
  .guide-toc-list{grid-template-columns:1fr;}
  .guide-section-count{display:none;}
  .guide-step{gap:8px; padding:10px;}
  .guide-step-num{width:26px; height:26px; font-size:12px;}
  .guide-step-main b{font-size:12.5px;}
  .guide-step-main p{font-size:12px; line-height:2.05;}
}

/* ═══════════════════════════════════════════════════════════════════════════
   داشبورد مدیریت — «برج مراقبت»
   کلاس‌های مخصوص /Admin/Dashboard؛ همه فقط در همان صفحه استفاده می‌شوند و روی
   بقیهٔ پنل اثری ندارند. چیدمان سه‌ستونی در دسکتاپ و تک‌ستونی زیر ۶۴۰ پیکسل، و
   نوار «نیازمند اقدام» تا عرض ۳۶۰ پیکسل هم خوانا می‌ماند.
   ═══════════════════════════════════════════════════════════════════════════ */

/* --- سرتیتر: مجموع کارهای در انتظار --- */
.todo-headline{display:flex; align-items:center; gap:14px; padding:16px 18px; margin-bottom:20px;
  border:1px solid var(--accent); border-radius:var(--radius);
  background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%);}
.todo-headline .th-num{font-size:36px; font-weight:900; line-height:1; color:var(--accent); flex-shrink:0;}
.todo-headline .th-body{display:flex; flex-direction:column; gap:3px; min-width:0;}
.todo-headline .th-body b{font-size:15px;}
.todo-headline .th-body span{font-size:12px; color:var(--txt2); font-weight:600;}
.todo-headline .th-go{margin-inline-start:auto; font-size:20px; color:var(--accent); flex-shrink:0;}
.todo-headline.is-clear{border-color:var(--green);
  background:linear-gradient(135deg, color-mix(in srgb, var(--green) 12%, transparent), transparent 70%);}
.todo-headline.is-clear .th-num, .todo-headline.is-clear .th-go{color:var(--green);}

/* --- نوارهای داشبورد --- */
.dash-band{margin-bottom:26px; scroll-margin-top:80px;}
.dash-band .band-head{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:12px;}
.dash-band .band-head h2{margin:0; font-size:16px;}
.dash-band .band-head h2::before{content:""; display:inline-block; width:5px; height:15px; border-radius:3px;
  background:var(--accent); margin-inline-end:8px; vertical-align:-2px;}
.dash-band .band-note{font-size:11.5px; color:var(--txt2); font-weight:600;}

.card-title{display:flex; align-items:center; gap:8px; font-weight:800; font-size:13.5px; margin-bottom:12px;}
.card-title-link{margin-inline-start:auto; font-size:11.5px; font-weight:700; color:var(--accent);}
.dash-empty{color:var(--txt2); font-size:12.5px; text-align:center; padding:18px 8px;}

/* --- ۱) کارت‌های «نیازمند اقدام شما» --- */
.action-grid{display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(215px,1fr));}
.action-card{position:relative; display:block; padding:14px 14px 14px 14px; border-radius:14px;
  background:var(--card); border:1px solid var(--border); border-inline-start:4px solid var(--ac,var(--accent));
  transition:border-color .15s, transform .12s;}
.action-card:hover{transform:translateY(-2px); border-color:var(--ac,var(--accent));}
.action-card .ac-num{font-size:26px; font-weight:900; line-height:1.1; color:var(--ac,var(--accent));}
.action-card .ac-title{font-size:12.5px; font-weight:800; margin-top:5px; line-height:1.6;}
.action-card .ac-hint{font-size:11px; color:var(--txt2); font-weight:600; margin-top:4px; line-height:1.7;}
.action-card::after{content:"←"; position:absolute; top:12px; inset-inline-end:12px; font-size:13px; color:var(--txt2); opacity:.5;}
.action-card.is-zero{opacity:.45; border-inline-start-color:var(--border);}
.action-card.is-zero .ac-num{color:var(--txt2);}
.action-card.is-zero:hover{opacity:.8;}

/* --- ۲) زیرنویس کارت‌های آماری --- */
.card.stat .stat-sub{font-size:11px; color:var(--txt2); font-weight:600; line-height:1.8; margin-top:2px;}

/* --- ۳) کارت‌های مالی --- */
.money-card{display:flex; flex-direction:column;}
.money-card .mc-label{font-size:12px; color:var(--txt2); font-weight:700;}
.money-card .mc-value{font-size:23px; font-weight:900; margin-top:6px; letter-spacing:-.4px;}
.money-card .mc-split{display:flex; flex-wrap:wrap; gap:6px 16px; font-size:11.5px; color:var(--txt2); margin-top:8px;}
.money-card .mc-split b{color:var(--txt);}
.money-card .mc-foot{font-size:11px; color:var(--txt2); margin-top:auto; padding-top:10px;}
.money-card .mc-foot-link{font-size:11.5px; font-weight:800; color:var(--accent); margin-top:auto; padding-top:10px;}
.money-hero{border-color:var(--accent);}
.mc-compare{display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:12px; padding-top:10px;
  border-top:1px dashed var(--border); font-size:11.5px; color:var(--txt2); font-weight:600;}
.mc-compare .mc-arrow{font-size:13px;}
.mc-compare.trend-up{color:var(--green);}
.mc-compare.trend-down{color:var(--red);}
.mc-compare.trend-flat{color:var(--txt2);}

/* --- نوار وضعیت سفارش‌ها --- */
.bar-row{display:flex; align-items:center; gap:10px; margin-bottom:8px;}
.bar-row .br-label{width:170px; flex-shrink:0; font-size:12px; color:var(--txt2);}
.bar-row .progress-bar{flex:1;}
.bar-row .br-num{width:44px; text-align:left; font-size:12px; font-weight:800;}

/* --- ۴) نمودار میله‌ای ۷ روز اخیر (بدون کتابخانه) --- */
.chart-legend{display:flex; flex-wrap:wrap; gap:14px; font-size:11.5px; color:var(--txt2); font-weight:700; margin-bottom:14px;}
.chart-legend .lg{display:inline-block; width:10px; height:10px; border-radius:3px; margin-inline-end:5px; vertical-align:-1px;}
.chart-legend .lg-u{background:var(--c1);} .chart-legend .lg-p{background:var(--c2);} .chart-legend .lg-a{background:var(--c4);}
.trend-chart{display:flex; align-items:flex-end; gap:6px; height:170px;}
.trend-day{flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; min-width:0;}
.trend-day .td-bars{flex:1; width:100%; display:flex; align-items:flex-end; justify-content:center; gap:3px;}
.trend-day .tb{display:block; width:9px; border-radius:4px 4px 0 0; min-height:3px;}
.trend-day .tb-u{background:var(--c1);} .trend-day .tb-p{background:var(--c2);} .trend-day .tb-a{background:var(--c4);}
.trend-day .td-label{font-size:10.5px; color:var(--txt2); font-weight:700; white-space:nowrap;}
.trend-day .td-sum{font-size:11px; font-weight:900;}

/* --- پربازدیدترین‌ها --- */
.top-list{list-style:none; counter-reset:tv; margin:0; padding:0;}
.top-list li{counter-increment:tv; border-bottom:1px dashed var(--border);}
.top-list li:last-child{border-bottom:none;}
.top-list li a{display:flex; align-items:center; gap:8px; padding:9px 0; font-size:12.5px;}
.top-list li a::before{content:counter(tv); flex-shrink:0; width:20px; height:20px; border-radius:6px;
  background:var(--bg); color:var(--txt2); font-size:11px; font-weight:900; display:flex; align-items:center; justify-content:center;}
.top-list .tl-title{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:700;}
.top-list .tl-views{flex-shrink:0; font-size:11.5px; color:var(--accent);}

/* --- ۵/۶) فید فعالیت‌ها --- */
.feed{list-style:none; margin:0; padding:0;}
.feed li{padding:8px 0; border-bottom:1px dashed var(--border);}
.feed li:last-child{border-bottom:none;}
.feed .feed-top{display:flex; align-items:baseline; gap:8px; font-size:12.5px;}
.feed .feed-top span{margin-inline-start:auto; font-size:10.5px; color:var(--txt2); white-space:nowrap;}
.feed .feed-sub{font-size:11.5px; color:var(--txt2); font-weight:600; line-height:1.8; margin-top:3px;}
.cell-clip{max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

/* --- ۷) نوار سلامت سامانه --- */
.health-strip{display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(240px,1fr));}
.health-item{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px;
  background:var(--bg); border:1px solid var(--border);}
.health-item .h-dot{width:9px; height:9px; border-radius:50%; flex-shrink:0;}
.health-item.is-live .h-dot{background:var(--green); box-shadow:0 0 0 3px color-mix(in srgb, var(--green) 22%, transparent);}
.health-item.is-demo .h-dot{background:var(--txt2); opacity:.6;}
.health-item .h-body{display:flex; flex-direction:column; min-width:0;}
.health-item .h-body b{font-size:12.5px;}
.health-item .h-body span{font-size:10.5px; color:var(--txt2); font-weight:600;}
.health-item .pill{margin-inline-start:auto; flex-shrink:0;}
.health-foot{display:flex; align-items:center; flex-wrap:wrap; gap:10px 22px; margin-top:14px; padding-top:12px; border-top:1px dashed var(--border);}
.health-foot .kv{border-bottom:none; padding:0; gap:8px; font-size:12px;}
.health-foot .btn{margin-inline-start:auto;}

/* --- ۸) میان‌برها و کارت هوش مصنوعی --- */
.shortcut-grid{display:grid; gap:8px; grid-template-columns:repeat(auto-fill,minmax(120px,1fr));}
.shortcut{padding:10px 8px; border-radius:10px; border:1px solid var(--border); background:var(--bg);
  text-align:center; font-size:12px; font-weight:800;}
.shortcut:hover{border-color:var(--accent); color:var(--accent);}
.ai-card{border-color:var(--accent);}
.ai-card .ai-note{font-size:11.5px; color:var(--txt2); line-height:1.9; margin-bottom:10px;}
.ai-card .ai-btn{width:100%; justify-content:center; margin-top:12px;}

/* --- واکنش‌گرایی --- */
@media(max-width:640px){
  .todo-headline{padding:14px;}
  .todo-headline .th-num{font-size:28px;}
  .action-grid{grid-template-columns:1fr;}
  .bar-row .br-label{width:110px; font-size:11px;}
  .trend-chart{height:140px;}
  .trend-day .tb{width:7px;}
  .health-strip{grid-template-columns:1fr;}
  .health-foot .btn{margin-inline-start:0; width:100%; justify-content:center;}
  .cell-clip{max-width:140px;}
}
@media(max-width:380px){
  .action-card{padding:12px;}
  .action-card .ac-num{font-size:22px;}
  .shortcut-grid{grid-template-columns:repeat(2,1fr);}
}

/* سرگروه‌های منوی مدیریت — «کلی» بالای هر دسته، لینک‌های «جزئی» زیرش.
   عمداً کوچک و کم‌رنگ است تا با خودِ لینک‌ها اشتباه گرفته نشود و کلیک‌پذیر به نظر نرسد. */
.nav-subhead{font-size:10.5px; font-weight:800; letter-spacing:.3px; opacity:.55;
    padding:10px 14px 4px; text-transform:none; user-select:none;}

/* ---------- آپلود فوری تصویر (instant-upload.js) ---------- */
/* جعبه فقط وقتی فضا می‌گیرد که چیزی برای نشان دادن باشد؛ فرم‌های بدون عکس دست‌نخورده می‌مانند. */
.iu-box:empty{display:none;}
.iu-box{margin-top:8px;}
.iu-preview{max-width:140px; max-height:140px; border-radius:10px; object-fit:cover;
            border:1px solid var(--line,#e5e7eb); display:block;}
.iu-strip{display:flex; gap:6px; flex-wrap:wrap;}
.iu-strip .iu-preview{max-width:72px; max-height:72px;}
.iu-note{font-size:11.5px; margin-top:5px; color:var(--txt2);}
.iu-note.ok{color:var(--green,#16a085); font-weight:700;}
.iu-note.busy{color:var(--txt2);}
.iu-note.warn{color:var(--orange,#e67e22);}
.iu-note.err{color:var(--red,#e74c3c); font-weight:700;}

/* ---------- انتخاب موقعیت روی نقشه (map-picker.js) ---------- */
.loc-picker{margin-top:6px;}
.loc-row{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.loc-row .loc-link{flex:1; min-width:180px;}
.loc-map{height:290px; border-radius:12px; overflow:hidden; border:1px solid var(--line,#e5e7eb);
         margin-top:10px; background:var(--c1s,#eef2f6);}
@media (max-width:600px){ .loc-map{height:230px;} }
.map-status{font-size:11.5px; color:var(--txt2); margin-top:6px;}
.map-status.ok{color:var(--green,#16a085); font-weight:700;}
.map-status.warn{color:var(--orange,#e67e22);}
.loc-manual{margin-top:8px;}
.loc-manual summary{font-size:12px; color:var(--txt2); cursor:pointer;}
/* کاشی‌ها در پوستهٔ تیره چشم را می‌زنند؛ وارونه‌کردنشان خواناتر است. */
[data-theme="dark"] .loc-map .leaflet-tile-pane{filter:brightness(.75) invert(1) hue-rotate(180deg);}