/* ============================================================================
   MOOV SHELL — پوسته‌ی واحد
   نوار کناری در یک سمت، محتوا در باقیِ عرض. تمام‌عرض، بدون ستونِ وسط‌چین.
   ========================================================================== */
.moov-app.shellmode{
  --sh-bg:#020C26;
  --sh-side:#01081F;
  --sh-line:rgba(148,163,214,.13);
  --sh-ink:#FFFFFF;
  --sh-dim:#93A4CE;
  --sh-active:#0C124D;
  --sh-accent:#7D60F0;

  display:grid;grid-template-columns:236px minmax(0,1fr);
  height:100vh;width:100%;max-width:none;padding:0;
  background:var(--sh-bg);color:var(--sh-ink);
  font-family:Inter,Vazirmatn,system-ui,sans-serif;
  direction:ltr;overflow:hidden;
}
@media(max-width:900px){.moov-app.shellmode{grid-template-columns:1fr}
  .moov-app.shellmode .moov-side{display:none}}

/* ---------- نوار کناری ---------- */
.moov-app.shellmode .moov-side{background:var(--sh-side);border-inline-end:1px solid var(--sh-line);
  padding:18px 12px 14px;display:flex;flex-direction:column;gap:16px;overflow-y:auto}
.moov-app.shellmode .ms-brand{display:flex;align-items:center;gap:10px;padding:0 6px}
.moov-app.shellmode .ms-mark{width:34px;height:28px;flex:0 0 auto}
.moov-app.shellmode .ms-brandname{display:block;font-size:20px;font-weight:700;line-height:1}
.moov-app.shellmode .ms-brandsub{display:block;font-size:9.5px;color:var(--sh-dim);margin-top:3px}

.moov-app.shellmode .ms-nav{display:flex;flex-direction:column;gap:3px;flex:1 1 auto}
.moov-app.shellmode .ms-sep{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#5E6C93;margin:14px 10px 6px}
.moov-app.shellmode .ms-item{display:flex;align-items:center;gap:11px;padding:10px 11px;
  border-radius:11px;border:1px solid transparent;background:none;cursor:pointer;
  color:var(--sh-dim);font:inherit;font-size:12.5px;text-align:start;width:100%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.moov-app.shellmode .ms-item:hover{background:rgba(148,163,214,.08);color:#DCE5FA}
.moov-app.shellmode .ms-item.on{background:var(--sh-active);border-color:rgba(125,96,240,.45);color:#fff}
.moov-app.shellmode .ms-ico{width:18px;height:18px;flex:0 0 auto;display:grid;place-items:center}
.moov-app.shellmode .ms-ico svg{width:18px;height:18px}
.moov-app.shellmode .ms-caret{margin-inline-start:auto;display:grid;place-items:center}
.moov-app.shellmode .ms-caret svg{width:14px;height:14px}

.moov-app.shellmode .ms-foot{display:flex;flex-direction:column;gap:4px}
.moov-app.shellmode .ms-lang{position:relative}
.moov-app.shellmode .ms-langmenu{display:none;position:absolute;bottom:calc(100% + 6px);left:0;right:0;
  background:#0B1130;border:1px solid var(--sh-line);border-radius:12px;padding:5px;
  box-shadow:0 16px 40px rgba(0,0,0,.5);z-index:20}
.moov-app.shellmode .ms-lang.open .ms-langmenu{display:block}
.moov-app.shellmode .ms-langitem{display:block;width:100%;padding:9px 11px;border-radius:9px;
  border:none;background:none;cursor:pointer;color:var(--sh-dim);font:inherit;
  font-size:12.5px;text-align:start}
.moov-app.shellmode .ms-langitem:hover{background:rgba(148,163,214,.10);color:#fff}
.moov-app.shellmode .ms-langitem.on{color:#fff;background:var(--sh-active)}

.moov-app.shellmode .ms-user{display:flex;align-items:center;gap:10px;margin-top:6px;padding:10px;
  border-radius:12px;cursor:pointer;font:inherit;text-align:start;
  background:rgba(148,163,214,.06);border:1px solid var(--sh-line);color:inherit}
.moov-app.shellmode .ms-user:hover{background:rgba(148,163,214,.12)}
.moov-app.shellmode .ms-av{width:32px;height:32px;border-radius:50%;flex:0 0 auto;overflow:hidden;
  display:grid;place-items:center;font-size:13px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,#3812C6,#7D60F0)}
.moov-app.shellmode .ms-av img{width:100%;height:100%;object-fit:cover}
.moov-app.shellmode .ms-usertext{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.moov-app.shellmode .ms-usertext b{font-size:12px;font-weight:600;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.moov-app.shellmode .ms-usertext span{font-size:10px;color:var(--sh-dim);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

/* ---------- ناحیه‌ی محتوا ---------- */
.moov-app.shellmode .moov-body{min-width:0;overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch}

/* پوسته‌های درونیِ صفحه‌ها دیگر زمینه و قاب خودشان را نمی‌سازند:
   قاب، خودِ پوسته است. */
.moov-app.shellmode .moov-body .wrap > .moov-dash{border-radius:0;grid-template-columns:1fr}
.moov-app.shellmode .moov-body .wrap > .moov-dash > .md-side{display:none}
.moov-app.shellmode .moov-body .wrap > .moov-page{border-radius:0;background:transparent}
.moov-app.shellmode .moov-body .wrap > .moov-page > .mv-top{display:none}

/* ---------- ناحیه‌ی محتوا ---------- */
.moov-app.shellmode .moov-body{min-width:0;height:100vh;display:flex;flex-direction:column;overflow:hidden}
.moov-app.shellmode .moov-stream{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;
  padding:0;-webkit-overflow-scrolling:touch}
.moov-app.shellmode .wrap{max-width:none;width:100%;margin:0;padding:0;display:block}

/* پوسته‌های درونیِ صفحه‌ها دیگر قاب خودشان را نمی‌سازند: قاب، خودِ پوسته است. */
.moov-app.shellmode .wrap > .moov-dash{border-radius:0;grid-template-columns:1fr;min-height:100%}
.moov-app.shellmode .wrap .moov-dash > .md-side{display:none}
.moov-app.shellmode .wrap > .moov-page{border-radius:0;background:transparent}
.moov-app.shellmode .wrap .mv-top{display:none}

/* چیزهایی که دیگر لازم نیستند */
.moov-app.shellmode .moov-nav,
.moov-app.shellmode .moov-scrim,
.moov-app.shellmode .moov-topbar,
.moov-app.shellmode .moov-shellbar,
.moov-app.shellmode .moov-navtoggle{display:none !important}

/* نوار پیام فقط در بخش گفت‌وگو */
.moov-app.shellmode #composer{display:none !important}
.moov-app.shellmode.chatview #composer{display:block !important;flex:0 0 auto}
.moov-app.shellmode.chatview .moov-stream{padding:18px 22px}

/* صفحه‌ی ساخت پست داخل پوسته: دو ستون، چون ستون سومِ نوار حذف شده */
.moov-app.shellmode .moov-post .sp-grid{grid-template-columns:236px minmax(0,1fr) 300px;
  padding:16px 18px 24px}
@media(max-width:1250px){.moov-app.shellmode .moov-post .sp-grid{grid-template-columns:minmax(0,1fr) 300px}
  .moov-app.shellmode .moov-post .sp-side{display:none}}
@media(max-width:900px){.moov-app.shellmode .moov-post .sp-grid{grid-template-columns:1fr}}

/* ============================================================================
   موبایل
   ----------------------------------------------------------------------------
   نوار کناری روی صفحه‌ی باریک جا نمی‌شود. پنهان کردنش بدون جایگزین یعنی
   کاربرِ گوشی هیچ راهی برای رفتن به بخش دیگر ندارد — نوار پایینی همان
   نقش را بازی می‌کند.
   ========================================================================== */
.moov-app.shellmode .ms-tabs{display:none}

@media(max-width:900px){
  .moov-app.shellmode{grid-template-columns:1fr;height:100dvh}
  .moov-app.shellmode .moov-side{display:none}
  .moov-app.shellmode .moov-body{height:auto;min-height:0}

  .moov-app.shellmode .ms-tabs{
    display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
    position:fixed;left:0;right:0;bottom:0;z-index:50;
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    background:rgba(1,8,31,.94);border-top:1px solid var(--sh-line);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
  .moov-app.shellmode .ms-tab{display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:7px 2px;border:none;background:none;cursor:pointer;
    color:var(--sh-dim);font:inherit;font-size:9.5px;line-height:1.2;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .moov-app.shellmode .ms-tab.on{color:#fff}
  .moov-app.shellmode .ms-tabicon{width:20px;height:20px;display:grid;place-items:center}
  .moov-app.shellmode .ms-tabicon svg{width:20px;height:20px}

  /* جا برای نوار پایین، تا محتوا زیرش گم نشود */
  /* نوار پیام بالای نوار پایینی می‌نشیند، نه زیرش. با position:fixed
     و bottom ثابت، روی گوشی‌هایی که نوار مرورگر بالا و پایین می‌رود
     جابه‌جا می‌شد؛ در جریانِ عادیِ صفحه این مشکل نیست. */
  .moov-app.shellmode .moov-stream{padding-bottom:12px}
  .moov-app.shellmode.chatview .moov-body{
    display:flex;flex-direction:column;height:calc(100dvh - 64px)}
  .moov-app.shellmode.chatview .moov-stream{flex:1 1 auto;min-height:0}
  .moov-app.shellmode.chatview #composer{position:static;flex:0 0 auto;
    padding:8px 10px calc(8px + env(safe-area-inset-bottom))}
  .moov-app.shellmode:not(.chatview) .moov-stream{padding-bottom:78px}

  /* صفحه‌ها روی موبایل تک‌ستونی می‌شوند */
  .moov-app.shellmode .moov-post .sp-grid{grid-template-columns:1fr;padding:12px}
  .moov-app.shellmode .moov-post .sp-side{display:none}
  .moov-app.shellmode .moov-post .sp-body{grid-template-columns:1fr}
  .moov-app.shellmode .moov-d3{padding:12px 12px 24px}
  .moov-app.shellmode .moov-d3 .d3-grid{grid-template-columns:1fr}
  .moov-app.shellmode .moov-dash .md-main{padding:12px}
  .moov-app.shellmode .moov-dash .md-kpis{grid-template-columns:repeat(2,1fr)}
  .moov-app.shellmode .moov-dash .md-row-growth,
  .moov-app.shellmode .moov-dash .md-row-2,
  .moov-app.shellmode .moov-dash .md-row-4{grid-template-columns:1fr}
  .moov-app.shellmode .moov-dash .md-growth-body{grid-template-columns:1fr}
  .moov-app.shellmode .moov-dash .md-whofacts{gap:14px}
  .moov-app.shellmode .moov-projects,
  .moov-app.shellmode .moov-settings{padding:14px 14px 30px}
}

@media(max-width:560px){
  .moov-app.shellmode .moov-dash .md-kpis{grid-template-columns:1fr}
  .moov-app.shellmode .moov-dash .md-stats.md-4{grid-template-columns:repeat(2,1fr)}
  .moov-app.shellmode .moov-d3 .d3-addgrid{grid-template-columns:repeat(3,1fr)}
  .moov-app.shellmode .ms-tab span:last-child{font-size:9px}
}

/* ============================================================================
   اسکرول‌بار
   ----------------------------------------------------------------------------
   اسکرول‌بارِ پیش‌فرضِ ویندوز روی زمینه‌ی تیره، یک نوار خاکستریِ روشن است
   که کنار کل طرح می‌نشیند و تنها چیزی است که سیستم‌عامل را لو می‌دهد.
   ========================================================================== */
.moov-app.shellmode *{scrollbar-width:thin;scrollbar-color:rgba(148,163,214,.28) transparent}
.moov-app.shellmode ::-webkit-scrollbar{width:10px;height:10px}
.moov-app.shellmode ::-webkit-scrollbar-track{background:transparent}
.moov-app.shellmode ::-webkit-scrollbar-thumb{
  background:rgba(148,163,214,.24);border-radius:99px;
  /* حاشیه‌ی شفاف، دسته را باریک‌تر نشان می‌دهد بدون اینکه ناحیه‌ی
     گرفتنش کوچک شود — کشیدنش با ماوس همچنان راحت است. */
  border:3px solid transparent;background-clip:content-box}
.moov-app.shellmode ::-webkit-scrollbar-thumb:hover{background:rgba(148,163,214,.42);
  background-clip:content-box}
.moov-app.shellmode ::-webkit-scrollbar-corner{background:transparent}

/* نوار کناری باریک‌تر، چون ستونش تنگ است */
.moov-app.shellmode .moov-side::-webkit-scrollbar{width:6px}
.moov-app.shellmode .moov-side::-webkit-scrollbar-thumb{border-width:2px}

/* ============================================================================
   جهت
   ----------------------------------------------------------------------------
   جهتِ چیدمان از زبان می‌آید. برای انگلیسی و فرانسوی چپ‌به‌راست، برای
   فارسی و عربی راست‌به‌چپ. قواعد راست‌به‌چپ همه با [dir="rtl"] محدود
   شده‌اند تا روی زبان‌های لاتین اعمال نشوند.
   ========================================================================== */
.moov-app[dir="rtl"]{direction:rtl}
.moov-app[dir="ltr"]{direction:ltr}

/* نوار کناری و ناحیه‌ی محتوا جای خود را با جهت عوض می‌کنند */
.moov-app.shellmode[dir="rtl"]{grid-template-columns:minmax(0,1fr) 236px}
.moov-app.shellmode[dir="rtl"] .moov-side{grid-column:2;border-inline-end:none;
  border-inline-start:1px solid var(--sh-line)}
.moov-app.shellmode[dir="rtl"] .moov-body{grid-column:1;grid-row:1}
@media(max-width:900px){
  .moov-app.shellmode[dir="rtl"]{grid-template-columns:1fr}
}

/* متن‌های فارسی و عربی راست‌چین، بقیه چپ‌چین */
.moov-app[dir="ltr"] .sp-head,.moov-app[dir="ltr"] .sp-card-title,
.moov-app[dir="ltr"] .sp-label,.moov-app[dir="ltr"] .sp-group,
.moov-app[dir="ltr"] .sp-design-title,.moov-app[dir="ltr"] .sp-feat-text,
.moov-app[dir="ltr"] .sp-project-text,.moov-app[dir="ltr"] .sp-side-title,
.moov-app[dir="ltr"] .sp-step-label,.moov-app[dir="ltr"] .sp-textarea,
.moov-app[dir="ltr"] .sp-placeholder,.moov-app[dir="ltr"] .sp-usage-title,
.moov-app[dir="ltr"] .d3-headtext p,.moov-app[dir="ltr"] .d3-rowlabel,
.moov-app[dir="ltr"] .d3-item,.moov-app[dir="ltr"] .d3-chip,
.moov-app[dir="ltr"] .d3-add,.moov-app[dir="ltr"] .d3-slidertop,
.moov-app[dir="ltr"] .d3-hint,.moov-app[dir="ltr"] .d3-stat,
.moov-app[dir="ltr"] .d3-empty,.moov-app[dir="ltr"] .d3-ghost,
.moov-app[dir="ltr"] .md-empty{direction:ltr;text-align:left}

/* انتخابگرها هم همین‌طور */
.moov-app[dir="ltr"] .sp-select select{direction:ltr;text-align:left;
  padding-left:12px;padding-right:32px}
.moov-app[dir="ltr"] .sp-caret{left:auto;right:11px}
.moov-app[dir="rtl"] .sp-caret{left:11px;right:auto}

/* ============================================================================
   رفع سرریز افقی — با پیشوند پوسته
   ----------------------------------------------------------------------------
   همین قواعد در moov-page.css هم بودند ولی آن فایل زودتر بار می‌شود و
   قواعدِ پوسته رویشان می‌افتاد. جای درستشان اینجاست.
   ========================================================================== */
.moov-app.shellmode .sp-stage-foot{flex-wrap:wrap}
.moov-app.shellmode .sp-who{min-width:0;flex:1 1 140px}
.moov-app.shellmode .sp-who-text{min-width:0}
.moov-app.shellmode .sp-who-text b,
.moov-app.shellmode .sp-who-text span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.moov-app.shellmode .sp-tplsets{flex-wrap:wrap}
.moov-app.shellmode .sp-tplset{flex:1 1 88px;min-width:0}
.moov-app.shellmode .sp-grid > *,
.moov-app.shellmode .sp-body > *,
.moov-app.shellmode .sp-block,
.moov-app.shellmode .sp-main,
.moov-app.shellmode .sp-preview{min-width:0}

@media(max-width:900px){
  .moov-app.shellmode .moov-post .sp-grid{grid-template-columns:1fr;padding:12px}
  .moov-app.shellmode .moov-post .sp-body{grid-template-columns:1fr}
  .moov-app.shellmode .moov-post .sp-two{grid-template-columns:1fr}
  .moov-app.shellmode .moov-post .sp-below{padding:0 12px 20px}
  .moov-app.shellmode .moov-post .sp-below .sp-design{padding:14px;gap:14px}
  .moov-app.shellmode .moov-post .sp-steps{overflow-x:auto;padding-bottom:14px}
  .moov-app.shellmode .moov-post .sp-step-line{min-width:18px}
  .moov-app.shellmode .moov-post .sp-feats{grid-template-columns:1fr}
}
@media(max-width:420px){
  .moov-app.shellmode .moov-post .sp-below .sp-tpls{grid-template-columns:repeat(3,1fr)}
  .moov-app.shellmode .moov-post .sp-below .sp-sizes,
  .moov-app.shellmode .moov-post .sp-below .sp-backs{grid-template-columns:repeat(3,1fr)}
}

/* گزینه‌های سایز در ستونِ باریکِ لپ‌تاپ ده پیکسل بیرون می‌زدند */
@media(max-width:1250px){
  .moov-app.shellmode .moov-post .sp-below .sp-sizes{grid-template-columns:repeat(2,1fr)}
  .moov-app.shellmode .moov-post .sp-below .sp-backs{grid-template-columns:repeat(3,1fr)}
}

/* بلوک اندازه‌ی پست در عرض لپ‌تاپ ده پیکسل بیرون می‌زد:
   چهار خانه‌ی ثابت در ستونی که تنگ‌تر از مجموعشان بود. */
.moov-app.shellmode .sp-below .sp-sizes,
.moov-app.shellmode .sp-below .sp-backs{gap:6px}
.moov-app.shellmode .sp-size,
.moov-app.shellmode .sp-back{padding-inline:2px;min-width:0}
.moov-app.shellmode .sp-size-label,
.moov-app.shellmode .sp-size-note{white-space:nowrap}
@media(max-width:1280px){
  .moov-app.shellmode .sp-below .sp-design{grid-template-columns:minmax(0,2fr) repeat(2,minmax(0,1fr))}
}

/* ---------- داشبورد: سرریزهای اندازه‌گیری‌شده ---------- */
/* برچسب‌های قیف در ستون تنگ بیرون می‌زدند */
.moov-app.shellmode .md-funnel-wrap{grid-template-columns:minmax(0,1fr) minmax(80px,110px) auto}
.moov-app.shellmode .md-funnel-labels{min-width:0}
.moov-app.shellmode .md-funnel-labels span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.moov-app.shellmode .md-funnel{width:100%;max-width:118px}
.moov-app.shellmode .md-biz-body{min-width:0}

/* نام و ایمیل کاربر روی گوشی */
.moov-app.shellmode .md-whotext{min-width:0;flex:1 1 auto}
.moov-app.shellmode .md-whotext b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.moov-app.shellmode .md-whobar{flex-wrap:wrap;row-gap:10px}

@media(max-width:560px){
  .moov-app.shellmode .md-whofacts{width:100%;margin-inline-start:0;justify-content:space-between}
  .moov-app.shellmode .md-whobtn{width:100%}
  .moov-app.shellmode .md-biz-body{grid-template-columns:1fr}
  .moov-app.shellmode .md-funnel-wrap{grid-template-columns:minmax(0,1fr) 100px auto}
}

/* کارت سهم کانال‌ها: دونات ثابت + فهرست، در ستون تنگ جا نمی‌شد */
.moov-app.shellmode .md-channel,
.moov-app.shellmode .md-channel-body,
.moov-app.shellmode .md-channel-list{min-width:0}
.moov-app.shellmode .md-channel-body{flex-wrap:wrap;row-gap:10px}
.moov-app.shellmode .md-donut-wrap{flex:0 0 auto}
.moov-app.shellmode .md-channel-list li{min-width:0}
.moov-app.shellmode .md-channel-list span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* نمای رشد روی گوشیِ باریک */
.moov-app.shellmode .md-row,
.moov-app.shellmode .md-growth-body,
.moov-app.shellmode .md-growth-left,
.moov-app.shellmode .md-note{min-width:0}
@media(max-width:420px){
  .moov-app.shellmode .md-legend{flex-wrap:wrap;justify-content:flex-start}
  .moov-app.shellmode .md-plot{grid-template-columns:30px minmax(0,1fr)}
}

/* پنل‌ها روی گوشیِ باریک: زبانه‌های نمای رشد در یک خط جا نمی‌شدند و
   کل ردیف را پهن می‌کردند. */
.moov-app.shellmode .md-panel{min-width:0}
.moov-app.shellmode .md-panel-head{min-width:0}
@media(max-width:420px){
  .moov-app.shellmode .md-tabs{flex-wrap:wrap;width:100%}
  .moov-app.shellmode .md-tab{flex:1 1 auto;padding-inline:9px}
  .moov-app.shellmode .md-panel-title{flex:1 1 100%}
}

/* در فارسی و عربی برچسب‌ها بلندترند و ردیف‌ها را پهن می‌کنند */
.moov-app.shellmode .sp-chips{min-width:0}
.moov-app.shellmode .sp-chip{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:420px){
  .moov-app.shellmode .sp-below .sp-tpls{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .moov-app.shellmode .sp-tpl-label{font-size:9.5px;overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap;max-width:100%}
  .moov-app.shellmode .sp-chip{padding-inline:9px;font-size:11px}
}

/* قاعده‌ی «حداکثر ۱۲۸۰» روی گوشی هم صدق می‌کرد و پنل را سه‌ستونی نگه
   می‌داشت؛ ستونی به عرض ۱۴۰ پیکسل برای دوازده قالب. زیر ۹۰۰، تک‌ستون. */
@media(max-width:900px){
  .moov-app.shellmode .sp-below .sp-design{grid-template-columns:1fr}
  .moov-app.shellmode .sp-below .sp-tpls{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:420px){
  .moov-app.shellmode .sp-below .sp-tpls{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* «Faites défiler» در فرانسوی از «Swipe» بلندتر است و پاورقی را پهن می‌کرد */
.moov-app.shellmode .sp-next{max-width:100%;min-width:0}
.moov-app.shellmode .sp-next span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ============================================================================
   ساخت پست — یک کانتینر، سه ردیف
   ----------------------------------------------------------------------------
   ردیف یک: پروژه‌ها و مصرف. ردیف دو: کارگاه. ردیف سه: تنظیمات طراحی.
   همه تمام‌عرض، و رسپانسیو یک بار تعریف می‌شود نه برای سه قطعه‌ی جدا.
   ========================================================================== */
.moov-app.shellmode .moov-post .sp-wrap{
  display:flex;flex-direction:column;gap:12px;padding:16px 18px 28px;width:100%}
.moov-app.shellmode .moov-post .sp-row{min-width:0}

/* ردیف پروژه‌ها: افقی، با اسکرول اگر جا نشد */
.moov-app.shellmode .moov-post .sp-toprow{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;
  background:var(--pg-panel);border:1px solid var(--pg-line);border-radius:16px;padding:12px 14px}
.moov-app.shellmode .moov-post .sp-toprow .sp-new{flex:0 0 auto;padding:11px 18px;white-space:nowrap}
.moov-app.shellmode .moov-post .sp-toprow .sp-side-title{display:none}
.moov-app.shellmode .moov-post .sp-toprow .sp-projects{
  flex-direction:row;overflow-x:auto;gap:8px;padding-bottom:2px;min-width:0}
.moov-app.shellmode .moov-post .sp-toprow .sp-project{flex:0 0 auto;width:186px}
.moov-app.shellmode .moov-post .sp-toprow .sp-usage{
  flex:0 0 auto;display:flex;align-items:center;gap:12px;margin:0;padding:8px 12px}
.moov-app.shellmode .moov-post .sp-toprow .sp-usage-title{display:none}
.moov-app.shellmode .moov-post .sp-toprow .sp-usage-body{margin:0;gap:9px}
.moov-app.shellmode .moov-post .sp-toprow .sp-usage-ring{width:46px;height:46px}

/* کارگاه و پنل طراحی، تمام‌عرض */
.moov-app.shellmode .moov-post .sp-row-main .sp-main{width:100%}
.moov-app.shellmode .moov-post .sp-row-design .sp-design{
  background:var(--pg-panel);border:1px solid var(--pg-line);border-radius:16px;
  padding:16px 18px 20px;width:100%;
  /* خودش دیگر شبکه نیست؛ شبکه درونش است (.sp-dgrid) */
  display:block}

@media(max-width:1280px){
  .moov-app.shellmode .moov-post .sp-row-design .sp-dgrid{grid-template-columns:1fr}
}
@media(max-width:900px){
  .moov-app.shellmode .moov-post .sp-wrap{padding:12px;gap:10px}
  .moov-app.shellmode .moov-post .sp-row-design .sp-dgrid{grid-template-columns:1fr}
  .moov-app.shellmode .moov-post .sp-toprow{grid-template-columns:1fr;gap:10px}
  .moov-app.shellmode .moov-post .sp-toprow .sp-usage{width:100%;justify-content:space-between}
  .moov-app.shellmode .moov-post .sp-toprow .sp-project{width:160px}
}

/* عنوان پنل تمام‌عرض، و بلوک قالب‌ها دو ستون — بقیه یک ستون.
   قاعده‌ی قبلی به بلوک اول «دو ردیف» می‌داد و کنارش یک ستون خالی
   می‌ماند. */
.moov-app.shellmode .sp-row-design .sp-design-title{grid-column:1/-1;margin-bottom:4px}
.moov-app.shellmode .sp-row-design .sp-block:first-of-type{grid-column:span 2;grid-row:auto}
.moov-app.shellmode .sp-row-design .sp-block{align-self:start}
.moov-app.shellmode .sp-row-design .sp-tpls{grid-template-columns:repeat(6,minmax(0,1fr))}
@media(max-width:1280px){
  .moov-app.shellmode .sp-row-design .sp-block:first-of-type{grid-column:span 2}
  .moov-app.shellmode .sp-row-design .sp-tpls{grid-template-columns:repeat(6,minmax(0,1fr))}
}
@media(max-width:900px){
  .moov-app.shellmode .sp-row-design .sp-block:first-of-type{grid-column:span 1}
  .moov-app.shellmode .sp-row-design .sp-tpls{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:420px){
  .moov-app.shellmode .sp-row-design .sp-tpls{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ============================================================================
   ساخت پست — چیدمان طرح
   ----------------------------------------------------------------------------
   کارگاه سه ستون: متن، پیش‌نمایش، تنظیمات. پنل طراحی دو ستون: قالب‌ها
   در یک کارت بلند، و بقیه در کارت‌های کوچک‌تر کنارش.
   روی موبایل همه ردیفی می‌شوند.
   ========================================================================== */
.moov-app.shellmode .sp-headicon{width:40px;height:40px;border-radius:12px;flex:0 0 auto;
  display:grid;place-items:center;color:#fff;
  background:linear-gradient(140deg,#6E45DF,#A855F7)}
.moov-app.shellmode .sp-headicon svg{width:20px;height:20px}
.moov-app.shellmode .sp-headicon.violet{background:linear-gradient(140deg,#8B5CF6,#6E45DF)}
.moov-app.shellmode .sp-head{display:flex;align-items:flex-start;gap:13px}
.moov-app.shellmode .sp-headtext{min-width:0;flex:1 1 auto}
.moov-app.shellmode .sp-headtext h1{margin:0 0 4px;font-size:20px;font-weight:700}
.moov-app.shellmode .sp-headtext h2{margin:0 0 4px;font-size:18px;font-weight:700}
.moov-app.shellmode .sp-headtext p{margin:0;font-size:12.5px;color:var(--pg-dim)}

/* کارگاه: سه ستون */
.moov-app.shellmode .moov-post .sp-body{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:12px}
.moov-app.shellmode .sp-options{display:flex;flex-direction:column;gap:0}
.moov-app.shellmode .sp-options .sp-go{margin-top:auto}
.moov-app.shellmode .sp-form .sp-textarea{min-height:230px}

/* پنل طراحی: دو ستون، کارت قالب بلند */
.moov-app.shellmode .sp-dhead{display:flex;align-items:flex-start;gap:13px;margin-bottom:16px}
.moov-app.shellmode .sp-dgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:12px;align-items:start}
.moov-app.shellmode .sp-dcard{background:var(--pg-card);border:1px solid var(--pg-line);
  border-radius:14px;padding:14px;min-width:0}
.moov-app.shellmode .sp-d-tpl{grid-row:span 2}
.moov-app.shellmode .sp-d-col{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px}
.moov-app.shellmode .sp-d-size{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.moov-app.shellmode .sp-dcol{min-width:0}
.moov-app.shellmode .sp-d-typo .sp-group{margin-top:12px}
.moov-app.shellmode .sp-d-typo .sp-group:first-child{margin-top:0}
.moov-app.shellmode .sp-d-out{display:flex;flex-direction:column}
.moov-app.shellmode .sp-d-out .sp-download{margin-top:auto}
.moov-app.shellmode .sp-addcolor{position:relative;overflow:hidden;margin-top:9px;width:100%}
.moov-app.shellmode .sp-tpls{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.moov-app.shellmode .sp-tpl-thumb{width:100%;height:auto;aspect-ratio:4/5;border-radius:9px;
  display:block;object-fit:cover;border:1.5px solid var(--pg-line-2)}
.moov-app.shellmode .sp-tpl.on .sp-tpl-thumb{border-color:var(--pg-violet);
  box-shadow:0 0 0 2px rgba(139,92,246,.28)}

/* ---------- تبلت ---------- */
@media(max-width:1180px){
  .moov-app.shellmode .moov-post .sp-body{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .moov-app.shellmode .sp-options{grid-column:1/-1}
  .moov-app.shellmode .sp-dgrid{grid-template-columns:1fr}
  .moov-app.shellmode .sp-d-tpl{grid-row:auto}
  .moov-app.shellmode .sp-tpls{grid-template-columns:repeat(6,minmax(0,1fr))}
}
/* ---------- موبایل: همه ردیفی ---------- */
@media(max-width:820px){
  .moov-app.shellmode .moov-post .sp-body{grid-template-columns:1fr}
  .moov-app.shellmode .sp-options{grid-column:auto}
  .moov-app.shellmode .sp-d-col,
  .moov-app.shellmode .sp-d-size{grid-template-columns:1fr;gap:14px}
  .moov-app.shellmode .sp-tpls{grid-template-columns:repeat(4,minmax(0,1fr))}
  .moov-app.shellmode .sp-form .sp-textarea{min-height:150px}
}
@media(max-width:420px){
  .moov-app.shellmode .sp-tpls{grid-template-columns:repeat(3,minmax(0,1fr))}
  .moov-app.shellmode .sp-sizes,.moov-app.shellmode .sp-backs{grid-template-columns:repeat(3,1fr)}
}

/* پنل طراحی دیگر خودش شبکه نیست — شبکه درونش است (.sp-dgrid).
   قاعده‌ی قبلی سربرگ و شبکه را دو خانه‌ی یک گرید چهارستونی می‌کرد و
   همه‌چیز را به ستون‌های باریک می‌فشرد. */
.moov-app.shellmode .sp-row-design .sp-design{
  display:block;grid-template-columns:none;
  background:var(--pg-panel);border:1px solid var(--pg-line);border-radius:16px;
  padding:16px 18px 20px;width:100%}
.moov-app.shellmode .sp-row-design .sp-design-title{grid-column:auto}
.moov-app.shellmode .sp-row-design .sp-block:first-of-type{grid-column:auto}

/* ---------- دکتر کسب‌وکار ---------- */
.moov-app.shellmode .moov-doctor{padding:28px 20px 40px;display:flex;justify-content:center}
.moov-app.shellmode .dc-card{max-width:720px;width:100%;text-align:center;
  background:var(--sh-side);border:1px solid var(--sh-line);border-radius:20px;
  padding:34px 30px 30px}
.moov-app.shellmode .dc-icon{width:56px;height:56px;border-radius:17px;margin:0 auto 18px;
  display:grid;place-items:center;color:#fff;
  background:linear-gradient(140deg,#3812C6,#7D60F0)}
.moov-app.shellmode .dc-icon svg{width:28px;height:28px}
.moov-app.shellmode .dc-card h1{margin:0 0 14px;font-size:24px;font-weight:700}
.moov-app.shellmode .dc-card p{margin:0 0 26px;font-size:14.5px;line-height:2;
  color:#C2CEEB;max-width:620px;margin-inline:auto}
.moov-app.shellmode .dc-cta{display:inline-flex;align-items:center;gap:9px;
  padding:14px 28px;border-radius:13px;text-decoration:none;
  font-size:14.5px;font-weight:600;color:#fff;
  background:linear-gradient(90deg,#3812C6,#7D60F0);
  box-shadow:0 10px 28px rgba(56,18,198,.4)}
.moov-app.shellmode .dc-cta:hover{filter:brightness(1.12)}
@media(max-width:560px){
  .moov-app.shellmode .moov-doctor{padding:18px 14px 30px}
  .moov-app.shellmode .dc-card{padding:26px 18px 22px}
  .moov-app.shellmode .dc-card h1{font-size:20px}
  .moov-app.shellmode .dc-card p{font-size:13.5px}
}

/* دکمه‌ی رنگ دلخواه — جای پنج دایره‌ی آماده */
.moov-app.shellmode .sp-colorbtn{position:relative;overflow:hidden;display:flex;
  align-items:center;gap:9px;width:100%;padding:10px 12px;border-radius:11px;cursor:pointer;
  font-size:12.5px;color:#C8D4F0;background:var(--pg-card);border:1px solid var(--pg-line-2)}
.moov-app.shellmode .sp-colorbtn:hover{border-color:var(--pg-violet);color:#fff}
.moov-app.shellmode .sp-colordot{width:20px;height:20px;border-radius:50%;flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(255,255,255,.28) inset}

/* «Personnalisé» در فرانسوی از «Custom» بلندتر است و سه‌خانه‌ی
   پس‌زمینه را پهن می‌کرد. */
.moov-app.shellmode .sp-back{min-width:0;padding-inline:4px}
.moov-app.shellmode .sp-back span{max-width:100%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;font-size:10.5px}
.moov-app.shellmode .sp-backs{gap:6px}

/* ============================================================================
   پنل ورود — هم‌رنگ با پوسته
   ========================================================================== */
.moov-studio.moov-auth{max-width:430px;background:#01081F;
  border:1px solid rgba(148,163,214,.16);border-radius:20px}
.moov-studio.moov-auth .st-head{border-bottom:1px solid rgba(148,163,214,.13);padding:16px 18px}
.moov-studio.moov-auth .st-body{padding:18px}

.moov-auth .au-google{width:100%;display:flex;align-items:center;justify-content:center;gap:11px;
  padding:13px;border-radius:12px;cursor:pointer;font:inherit;font-size:14px;font-weight:500;
  color:#1f2430;background:#fff;border:none}
.moov-auth .au-google:hover{filter:brightness(.96)}
.moov-auth .au-google:disabled{opacity:.7;cursor:default}
.moov-auth .au-gicon{width:19px;height:19px;flex:0 0 auto;display:grid;place-items:center}
.moov-auth .au-gicon svg{width:19px;height:19px}

.moov-auth .au-or{display:flex;align-items:center;gap:12px;margin:16px 0;
  font-size:11.5px;color:#6F85C2}
.moov-auth .au-or::before,.moov-auth .au-or::after{content:'';flex:1 1 auto;height:1px;
  background:rgba(148,163,214,.18)}

.moov-auth .au-tabs{display:flex;gap:4px;padding:4px;border-radius:12px;
  background:rgba(148,163,214,.08);margin-bottom:14px}
.moov-auth .au-tab{flex:1 1 0;padding:9px;border-radius:9px;border:none;background:none;
  cursor:pointer;color:#93A4CE;font:inherit;font-size:13px}
.moov-auth .au-tab.on{background:#3812C6;color:#fff}

.moov-auth .au-field{display:block;margin-bottom:12px}
.moov-auth .au-field span{display:block;font-size:12px;color:#C2CEEB;margin-bottom:6px}
.moov-auth .au-input{width:100%;padding:12px 13px;border-radius:11px;font:inherit;font-size:13.5px;
  color:#fff;background:rgba(148,163,214,.07);border:1px solid rgba(148,163,214,.18);
  direction:ltr;text-align:left}
.moov-auth .au-input:focus{outline:none;border-color:#7D60F0;background:rgba(148,163,214,.12)}
.moov-auth .au-err{min-height:18px;color:#F4526B;font-size:12.5px;margin:2px 0 8px}

.moov-auth .au-actions{display:flex;gap:8px;margin-top:4px}
.moov-auth .au-btn{flex:1 1 auto;padding:13px;border-radius:12px;cursor:pointer;font:inherit;
  font-size:13.5px;color:#C2CEEB;background:rgba(148,163,214,.07);
  border:1px solid rgba(148,163,214,.18)}
.moov-auth .au-btn:hover{background:rgba(148,163,214,.14);color:#fff}
.moov-auth .au-btn.primary{color:#fff;border-color:transparent;font-weight:600;
  background:linear-gradient(90deg,#3812C6,#7D60F0)}
.moov-auth .au-btn.primary:hover{filter:brightness(1.1)}

.moov-auth .au-who{display:flex;align-items:center;gap:13px;padding:14px;border-radius:14px;
  background:rgba(148,163,214,.07);border:1px solid rgba(148,163,214,.14)}
.moov-auth .au-avatar{width:48px;height:48px;border-radius:50%;flex:0 0 auto;overflow:hidden;
  display:grid;place-items:center;font-size:19px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,#3812C6,#7D60F0)}
.moov-auth .au-avatar img{width:100%;height:100%;object-fit:cover}
.moov-auth .au-whotext{display:flex;flex-direction:column;gap:3px;min-width:0}
.moov-auth .au-whotext b{font-size:14.5px}
.moov-auth .au-whotext span{font-size:12px;color:#93A4CE;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.moov-auth .au-note{margin:14px 0 0;font-size:12px;line-height:1.9;color:#6F85C2}
.moov-auth .au-gerr{min-height:16px;font-size:12px;color:#F4526B;margin:8px 0 0;line-height:1.7}
.moov-auth .au-gwrap{margin-bottom:4px}
.moov-auth .au-gslot{display:flex;justify-content:center;min-height:44px}
.moov-auth .au-gload{font-size:12.5px;color:#6F85C2;padding:13px}