/* فونت فارسی: یکان‌بخ (Yekan Bakh) */
@font-face{font-family:"YekanBakh";font-weight:100;font-display:swap;src:url("/vendor/fonts/YekanBakh-Thin.woff2") format("woff2")}
@font-face{font-family:"YekanBakh";font-weight:300;font-display:swap;src:url("/vendor/fonts/YekanBakh-Light.woff2") format("woff2")}
@font-face{font-family:"YekanBakh";font-weight:400;font-display:swap;src:url("/vendor/fonts/YekanBakh-Regular.woff2") format("woff2")}
@font-face{font-family:"YekanBakh";font-weight:600;font-display:swap;src:url("/vendor/fonts/YekanBakh-SemiBold.woff2") format("woff2")}
@font-face{font-family:"YekanBakh";font-weight:700;font-display:swap;src:url("/vendor/fonts/YekanBakh-Bold.woff2") format("woff2")}
@font-face{font-family:"YekanBakh";font-weight:800;font-display:swap;src:url("/vendor/fonts/YekanBakh-ExtraBold.woff2") format("woff2")}
@font-face{font-family:"YekanBakh";font-weight:900;font-display:swap;src:url("/vendor/fonts/YekanBakh-Black.woff2") format("woff2")}
/* فونت فارسی با اعداد فارسی: یکان‌بخ فانوم (Yekan Bakh FaNum) — فقط وزن‌های استفاده‌شده (۴۰۰–۹۰۰)
   وزن‌های ۱۰۰/۳۰۰/۹۵۰ حذف شدند چون در استایل‌ها استفاده نمی‌شوند. */
@font-face{font-family:"YekanBakhFaNum";font-weight:400;font-display:swap;src:url("/landing-assets/YekanBakhFaNum-400.woff2") format("woff2")}
@font-face{font-family:"YekanBakhFaNum";font-weight:600;font-display:swap;src:url("/landing-assets/YekanBakhFaNum-600.woff2") format("woff2")}
@font-face{font-family:"YekanBakhFaNum";font-weight:700;font-display:swap;src:url("/landing-assets/YekanBakhFaNum-700.woff2") format("woff2")}
@font-face{font-family:"YekanBakhFaNum";font-weight:800;font-display:swap;src:url("/landing-assets/YekanBakhFaNum-800.woff2") format("woff2")}
@font-face{font-family:"YekanBakhFaNum";font-weight:900;font-display:swap;src:url("/landing-assets/YekanBakhFaNum-900.woff2") format("woff2")}
/* اعداد لاتین بمانند (برند/قیمت/اعتبار) — فقط بازه‌ی ۰-۹ از یکان‌بخِ غیرFaNum */
@font-face{font-family:"YekanBakhFaNum";font-weight:400;font-display:swap;src:url("/vendor/fonts/YekanBakh-Regular.woff2") format("woff2");unicode-range:U+0030-0039}
@font-face{font-family:"YekanBakhFaNum";font-weight:600;font-display:swap;src:url("/vendor/fonts/YekanBakh-SemiBold.woff2") format("woff2");unicode-range:U+0030-0039}
@font-face{font-family:"YekanBakhFaNum";font-weight:700;font-display:swap;src:url("/vendor/fonts/YekanBakh-Bold.woff2") format("woff2");unicode-range:U+0030-0039}
@font-face{font-family:"YekanBakhFaNum";font-weight:800;font-display:swap;src:url("/vendor/fonts/YekanBakh-ExtraBold.woff2") format("woff2");unicode-range:U+0030-0039}
@font-face{font-family:"YekanBakhFaNum";font-weight:900;font-display:swap;src:url("/vendor/fonts/YekanBakh-Black.woff2") format("woff2");unicode-range:U+0030-0039}
:root {
  --bg: #070910;
  --bg-2: #0a0d18;
  --surface: #10141f;
  --surface-2: #161b29;
  --surface-3: #1f2638;
  --border: #222a40;
  --border-soft: #1a2032;
  --text: #eef1fb;
  --text-2: #9aa3c4;
  --text-3: #636c8c;
  --accent: #4d8bff;
  --accent-2: #82b4ff;
  --accent-grad: linear-gradient(135deg,#3b6dff,#5b8cff 55%,#74b6ff);
  --accent-glow: rgba(77,139,255,.40);
  --glass: rgba(20,26,42,.55);
  --glass-2: rgba(26,33,52,.66);
  --glass-border: rgba(150,178,255,.14);
  --glass-hi: rgba(180,205,255,.28);
  --success: #34d399;
  --danger: #fb7185;
  --gem: #34e0d8;
  --mono: ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  --r-sm: 10px; --r: 14px; --r-lg: 20px;
  --shadow: 0 10px 34px rgba(2,6,20,.5);
  --shadow-lg: 0 24px 70px rgba(2,6,20,.66);
  /* ── سیستمِ موشن (یکدست در کلِ محصول) ── */
  --ease: cubic-bezier(.16,1,.3,1);       /* خروجِ نرم — سبکِ Apple/Linear */
  --ease-io: cubic-bezier(.65,0,.35,1);
  --dur-1: .14s; --dur-2: .22s; --dur-3: .38s;
  /* ── مقیاسِ فاصله‌ی 8pt ── */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  /* ── حداقلِ تارگتِ لمسی ── */
  --tap: 44px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  font-family: "YekanBakhFaNum", "YekanBakh", "Vazirmatn", system-ui, sans-serif;
  background: var(--bg); color: var(--text);
  overflow-x: hidden; overflow-y: hidden; line-height: 1.6;
  max-width: 100%;
  -webkit-font-smoothing: antialiased;
  background-image: none;
}
b { font-weight: 700; }
small { color: var(--text-3); font-size: .76rem; }
::selection { background: var(--accent-glow); }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 8px; }
*::-webkit-scrollbar-track { background: transparent; }

/* ===== TOPBAR ===== */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  height: 60px; padding: 0 22px;
  border-bottom: 1px solid var(--border-soft);
  background: rgba(8,11,20,.62); backdrop-filter: blur(20px); box-shadow: 0 1px 0 var(--glass-hi) inset;
  position: relative; z-index: 30;
}
.brand { display: flex; align-items: center; gap: 9px; font-size: 1.08rem; font-weight: 500; letter-spacing: .2px; }
.brand-mark {
  color: #fff; font-size: .85rem; width: 30px; height: 30px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-radius: 9px;
  box-shadow: 0 4px 14px var(--accent-glow);
}
.brand b { color: var(--accent-2); font-weight: 700; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }

.lang-toggle { display: flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 3px; }
.lang { background: transparent; border: none; color: var(--text-3); font-family: inherit; font-size: .76rem; font-weight: 600; padding: 5px 11px; border-radius: 999px; cursor: pointer; transition: .18s; }
.lang.active { background: var(--accent); color: #fff; }

.credit-pill {
  display: flex; align-items: center; gap: 7px;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); padding: 7px 9px 7px 13px; border-radius: 999px;
  font-family: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; transition: .18s;
}
.credit-pill:hover { border-color: var(--accent); background: var(--surface-3); }
.credit-pill .gem { font-size: .82rem; filter: drop-shadow(0 0 6px rgba(52,224,216,.5)); }
.credit-pill .credit-num { color: var(--text); }
.credit-pill .plus {
  width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: .95rem; line-height: 1; font-weight: 400;
}

.avatar-btn { position: relative; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-2); cursor: pointer; overflow: hidden; padding: 0; display: grid; place-items: center; color: var(--accent-2); transition: .18s; }
.avatar-btn:hover { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.avatar-btn img { width: 100%; height: 100%; object-fit: cover; }

/* ===== BUTTONS ===== */
.btn {
  font-family: inherit; font-size: .9rem; font-weight: 600;
  padding: 9px 16px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  cursor: pointer; transition: .18s; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
}
.btn:hover { border-color: var(--accent); background: var(--surface-3); }
.btn.primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border: 1px solid transparent; color: #fff; box-shadow: 0 4px 16px var(--accent-glow); }
.btn.primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn.ghost { background: transparent; }
.btn.ghost:hover { background: var(--surface-2); }
.btn.block { width: 100%; padding: 12px; }
.btn.small { padding: 7px 13px; font-size: .82rem; }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; filter: none; }
.icon-btn { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); font-size: 1.2rem; cursor: pointer; display: grid; place-items: center; transition: .18s; }
.icon-btn:hover { border-color: var(--accent); color: var(--accent-2); }

/* ===== LAYOUT ===== */
.app { display: grid; grid-template-columns: 256px 1fr 340px; height: calc(100vh - 60px); }
/* صفحه همیشه سه‌ستونه می‌ماند؛ در حالت ساخت پنل راست = createPanel، در حالت ویرایش = editPanel */
body[data-mode="create"] #editPanel { display: none; }
body[data-mode="view"]   #createPanel { display: none; }
/* در حالت ساخت، پلیس‌هولدر نمایشگر («◇ مدل اینجا نمایش داده می‌شود») نباید با ناحیه‌ی ساخت روی هم بیفتد */
body[data-mode="create"] .viewer-placeholder { display: none; }
/* ناحیه‌ی ساخت وسط */
.creator { position: absolute; inset: 0; overflow-y: auto; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 40px 24px; }
body[data-mode="view"] .creator { display: none; }
.creator-step { width: 100%; max-width: 720px; }
.creator-title { font-size: 1.6rem; font-weight: 800; text-align: center; margin-bottom: 8px; }
.creator-sub { color: var(--text-2); text-align: center; font-size: .92rem; line-height: 1.7; margin-bottom: 24px; }
.big-dropzone { border: 2px dashed var(--border); border-radius: 20px; background: var(--surface-2); aspect-ratio: 16/11; max-height: 360px; display: grid; place-items: center; cursor: pointer; transition: .18s; position: relative; overflow: hidden; margin: 0 auto; max-width: 480px; }
.big-dropzone:hover, .big-dropzone.drag { border-color: var(--accent); background: rgba(77,139,255,.06); }
.big-dropzone img { width: 100%; height: 100%; object-fit: contain; }
.big-dropzone .dropzone-empty { text-align: center; color: var(--text-2); padding: 20px; }
.big-dropzone .drop-icon { color: var(--accent-2); margin-bottom: 12px; }
.big-dropzone .dropzone-empty p { font-size: 1rem; margin-bottom: 4px; }
.big-dropzone .hint { font-size: .8rem; color: var(--text-3); }

/* کارت‌های انجین */
.engine-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 920px) { .engine-cards { grid-template-columns: 1fr 1fr; } }
.ecard { text-align: start; background: var(--surface-2); border: 1.5px solid var(--border); border-radius: 18px; overflow: hidden; cursor: pointer; transition: .16s; font-family: inherit; color: var(--text); display: flex; flex-direction: column; }
.ecard:hover { border-color: var(--accent); transform: translateY(-2px); }
.ecard.active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow), 0 8px 24px rgba(0,0,0,.3); }
.ecard.active { animation: ecardPop .28s ease; }
@keyframes ecardPop { 0% { transform: scale(.97); } 60% { transform: scale(1.02); } 100% { transform: scale(1); } }
/* پنل تنظیمات پیشرفته با باز/بسته‌شدنِ انیمیشنی */
.tripo-adv { overflow: hidden; max-height: 0; opacity: 0; margin-top: 0; padding-top: 0; border-top: 0 solid transparent; transition: max-height .38s cubic-bezier(.4,0,.2,1), opacity .3s ease, margin-top .3s, padding-top .3s; }
.tripo-adv.open { max-height: 720px; opacity: 1; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.ecard-img { aspect-ratio: 16/10; background: #0c0c14; overflow: hidden; position: relative; }
.ecard-img img { width: 100%; height: 100%; object-fit: cover; }
.ecard-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 7px; }
.ecard-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ecard-name { font-weight: 700; font-size: 1.05rem; }
.ecard-badge { font-size: .66rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--surface-3); color: var(--text-2); }
.ecard-badge.pro { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; }
.ecard-desc { font-size: .82rem; color: var(--text-2); line-height: 1.6; margin: 0; }
.ecard-cost { font-size: .92rem; font-weight: 700; color: var(--accent-2); }
/* کارت انجین قفل‌شده (به‌زودی) */
.ecard.frozen { cursor: not-allowed; }
.ecard.frozen:hover { border-color: var(--border); transform: none; box-shadow: none; }
.ecard.frozen .ecard-body { opacity: .55; }
.ecard-lock { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: rgba(8,8,14,.62); backdrop-filter: blur(2px); color: var(--text); font-weight: 700; font-size: .9rem; letter-spacing: .3px; }
.ecard-lock svg { color: var(--text-2); }

/* پنل ساخت سمت راست: عکس آپلودشده + اسم + تولید */
.src-box { margin-bottom: 18px; }
.src-preview { position: relative; aspect-ratio: 1/1; border-radius: var(--r-sm); overflow: hidden; background: var(--surface-2); border: 1px solid var(--border); }
.src-preview img { width: 100%; height: 100%; object-fit: contain; display: block; }
.src-empty { aspect-ratio: 1/1; border: 2px dashed var(--border); border-radius: var(--r-sm); background: var(--surface-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--text-3); text-align: center; padding: 16px; }
.src-empty-icon { color: var(--accent-2); opacity: .7; }
.src-empty p { font-size: .86rem; color: var(--text-2); }
.create-name { margin-top: 0; margin-bottom: 16px; }
#createPanel .cost-btn { margin-top: 4px; }
@media (max-width: 560px) { .engine-cards { grid-template-columns: 1fr; } .creator-title { font-size: 1.3rem; } }
.history-sidebar { border-inline-end: 1px solid var(--border-soft); display: flex; flex-direction: column; min-height: 0; overflow: hidden; background: var(--bg-2); }
.viewer-col { padding: 18px; overflow: hidden; }
.controls-panel { border-inline-start: 1px solid var(--border-soft); padding: 20px; overflow-y: auto; background: var(--bg-2); }

/* ===== HISTORY ===== */
.sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 18px 14px; }
.sidebar-head h3 { font-size: .95rem; font-weight: 600; letter-spacing: .3px; }
.history-list { flex: 1; min-height: 0; overflow-y: auto; padding: 0 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.history-list .empty { color: var(--text-3); font-size: .82rem; text-align: center; margin-top: 30px; line-height: 1.8; }
.hitem { flex: 0 0 auto; background: var(--surface); border: 1px solid var(--border-soft); border-radius: 14px; overflow: hidden; cursor: pointer; transition: transform .18s ease, border-color .18s, box-shadow .18s; }
.hitem:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,.35); }
.hitem.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 8px 24px var(--accent-glow); }
.hitem.disabled { opacity: .6; cursor: default; }
.hthumb { aspect-ratio: 4/3; background: radial-gradient(circle at 50% 30%, #1e1e2e, #0b0b12); display: grid; place-items: center; position: relative; }
.hthumb img { width: 100%; height: 100%; object-fit: cover; }
.no-thumb { font-size: 1.7rem; color: var(--text-3); opacity: .5; }
.hbadge { position: absolute; top: 8px; inset-inline-end: 8px; font-size: .64rem; font-weight: 600; padding: 3px 8px; border-radius: 6px; backdrop-filter: blur(8px); }
.hbadge.prog { background: rgba(77,139,255,.25); color: var(--accent-2); }
.hbadge.fail { background: rgba(251,113,133,.2); color: var(--danger); }
.hmeta { padding: 9px 12px; font-size: .76rem; color: var(--text-2); display: flex; justify-content: space-between; align-items: center; }
.hmeta .hcost { color: var(--text-3); }

/* ===== VIEWER ===== */
.viewer-wrap {
  width: 100%; height: 100%; border-radius: var(--r-lg);
  background:
    radial-gradient(90% 65% at 50% 16%, rgba(77,139,255,.12), transparent 62%),
    radial-gradient(130% 110% at 50% 42%, #1b1c28 0%, #111118 52%, #08080c 100%);
  border: 1px solid var(--border-soft); position: relative; overflow: hidden;
  display: grid; place-items: center;
}
.viewer-toolbar { position: absolute; top: 14px; inset-inline: 14px; display: flex; align-items: center; justify-content: space-between; z-index: 5; pointer-events: none; }
.tune-panel {
  position: absolute; top: 58px; inset-inline-end: 14px; z-index: 6; width: 250px;
  background: rgba(18,18,28,.92); backdrop-filter: blur(16px); border: 1px solid var(--border);
  border-radius: 14px; padding: 14px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 14px; max-height: calc(100% - 80px); overflow-y: auto;
}
.tune-sec { display: flex; flex-direction: column; gap: 8px; }
.tune-title { font-size: .82rem; font-weight: 700; color: var(--text-2); }
.tune-panel select { width: 100%; }
.tune-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .8rem; color: var(--text-2); }
.tune-row input[type=range] { flex: 1; max-width: 130px; }
.tune-chk { display: flex; align-items: center; gap: 8px; font-size: .82rem; cursor: pointer; }
/* پنل تنظیمات پیشرفته‌ی انجین ۲/۳ */
.adv-head { display: flex; align-items: center; justify-content: space-between; font-size: .9rem; font-weight: 800; color: var(--text); margin-bottom: 4px; letter-spacing: .2px; }
.adv-head .adv-total { font-size: .85rem; }
.adv-head .adv-total b { color: var(--accent, #4d8bff); }
.adv-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 2px; border-top: 1px solid var(--border-soft, #20222e); font-size: .9rem; color: var(--text); }
.adv-row.adv-col { flex-direction: column; align-items: stretch; gap: 9px; }
.adv-row.adv-col select, .adv-row.adv-col input[type=range] { width: 100%; }
.adv-lbl { display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.adv-price { color: var(--accent, #4d8bff); font-size: .78rem; font-weight: 800; background: var(--accent-glow, rgba(77,139,255,.14)); padding: 1px 8px; border-radius: 20px; }
.adv-row.dim { opacity: .4; }
.adv-row.dim .sw { pointer-events: none; }
/* دکمه‌ی راهنما */
.help {
  display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  background: var(--surface-2, #222533); color: var(--text-2); font-size: .72rem; font-weight: 800;
  border: 1px solid var(--border-soft); cursor: pointer; padding: 0; line-height: 1; font-family: inherit;
  transition: .15s;
}
.help:hover, .help:focus { background: var(--accent, #4d8bff); color: #fff; border-color: var(--accent); outline: none; transform: scale(1.12); }
/* tooltip شناور */
#tipPop {
  position: fixed; z-index: 9999; max-width: 240px; background: #15151f; color: #f0f0f5;
  border: 1px solid var(--border, #2a2d3a); border-radius: 10px; padding: 9px 12px; font-size: .8rem; line-height: 1.7;
  box-shadow: 0 12px 32px rgba(0,0,0,.5); pointer-events: none; opacity: 0; transform: translateY(4px);
  transition: opacity .15s ease, transform .15s ease; text-align: start;
}
#tipPop.show { opacity: 1; transform: translateY(0); }
/* سوییچ روشن/خاموش */
.sw { position: relative; display: inline-flex; flex: 0 0 auto; }
.sw input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.sw-track { width: 42px; height: 24px; border-radius: 20px; background: var(--surface-2, #2a2d3a); border: 1px solid var(--border-soft); position: relative; transition: background .2s; }
.sw-track::after { content: ''; position: absolute; top: 2px; inset-inline-start: 2px; width: 18px; height: 18px; border-radius: 50%; background: #8b8b9a; transition: transform .2s, background .2s; }
.sw input:checked + .sw-track { background: var(--accent, #4d8bff); border-color: var(--accent); }
.sw input:checked + .sw-track::after { background: #fff; transform: translateX(18px); }
html[dir=rtl] .sw input:checked + .sw-track::after { transform: translateX(-18px); }
.sw input:disabled + .sw-track { opacity: .4; }
.gen-center { margin-top: 18px; }
/* انتخاب حالتِ منبع (تک‌عکس/چندعکس) */
.mode-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 auto 18px; max-width: 480px; }
.mode-card { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 16px 12px; background: var(--surface); border: 1.5px solid var(--border-soft); border-radius: 14px; cursor: pointer; color: var(--text-2); font-family: inherit; transition: .18s; }
.mode-card svg { color: var(--accent, #4d8bff); width: 30px; height: 30px; }
.mode-card .mode-name { font-weight: 800; font-size: .92rem; color: var(--text); }
.mode-card .mode-desc { font-size: .72rem; color: var(--text-3); }
.mode-card:hover { border-color: var(--border); transform: translateY(-2px); }
.mode-card.active { border-color: var(--accent); background: var(--surface-2); box-shadow: 0 0 0 3px var(--accent-glow); }
/* پیش‌نمایش داخل dropzone + حذف */
.dropzone-filled { position: absolute; inset: 0; }
.dropzone-filled img { width: 100%; height: 100%; object-fit: contain; background: #0c0c13; }
.dz-x { position: absolute; top: 10px; inset-inline-end: 10px; width: 30px; height: 30px; border: none; border-radius: 50%; background: rgba(220,38,38,.92); color: #fff; cursor: pointer; font-size: 1.1rem; display: grid; place-items: center; }
#singleContinue, #mvNext { display: block; width: 100%; max-width: 480px; margin: 16px auto 0; }
/* دکمه‌ی بازگشت */
.step-back { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; color: var(--text-2); cursor: pointer; font-family: inherit; font-size: .86rem; font-weight: 600; padding: 6px 4px; margin-bottom: 6px; }
.step-back:hover { color: var(--text); }
/* پیش‌نمایشِ چندنما در پنلِ راست */
.mv-side { display: flex; flex-direction: column; gap: 8px; }
.mv-side-item { position: relative; aspect-ratio: 16/10; border-radius: 10px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--border-soft); display: grid; place-items: center; }
.mv-side-item img { width: 100%; height: 100%; object-fit: cover; }
.mv-side-item .mv-side-ph { color: var(--text-3); font-size: 1.2rem; }
.mv-side-label { position: absolute; top: 5px; inset-inline-start: 5px; font-size: .68rem; font-weight: 700; color: #fff; background: rgba(0,0,0,.6); padding: 1px 7px; border-radius: 20px; z-index: 1; }
.mv-side-item.filled .mv-side-label { background: var(--accent, #4d8bff); }
/* کارتِ ساختِ تکسچر */
.tex-make-card { border: 1px solid var(--accent); background: linear-gradient(180deg, rgba(77,139,255,.06), transparent); }
.tex-make-card .sw-row { display: flex; align-items: center; justify-content: space-between; margin: 10px 0 4px; font-size: .88rem; color: var(--text-2); }
/* شبکه‌ی چندنما */
.mv-wrap { max-width: 480px; margin: 0 auto; }
.mv-note { font-size: .82rem; color: var(--text-2); margin-bottom: 12px; line-height: 1.8; text-align: center; }
.mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.mv-slot { position: relative; aspect-ratio: 1; border: 1.5px dashed var(--border); border-radius: 12px; background: var(--surface); display: grid; place-items: center; cursor: pointer; overflow: hidden; transition: .16s; }
.mv-slot:hover { border-color: var(--accent); }
.mv-slot.filled { border-style: solid; }
.mv-slot img { width: 100%; height: 100%; object-fit: cover; }
.mv-slot .mv-label { position: absolute; top: 7px; inset-inline-start: 7px; font-size: .72rem; font-weight: 700; color: #fff; background: rgba(0,0,0,.6); padding: 2px 8px; border-radius: 20px; }
.mv-slot.req .mv-label { background: var(--accent, #4d8bff); }
.mv-slot .mv-plus { color: var(--text-3); font-size: 1.6rem; }
.mv-slot .mv-x { position: absolute; top: 6px; inset-inline-end: 6px; width: 22px; height: 22px; border: none; border-radius: 50%; background: rgba(220,38,38,.92); color: #fff; cursor: pointer; font-size: .9rem; display: none; }
.mv-slot.filled .mv-x { display: grid; place-items: center; }
/* انجینِ غیرفعال */
.ecard.engine-off { opacity: .55; filter: grayscale(.6); cursor: not-allowed; position: relative; }
.ecard.mv-locked { opacity: .5; filter: grayscale(.5); cursor: not-allowed; }
.ecard.engine-off .ecard-cost { visibility: hidden; }
.ecard .ecard-off {
  position: absolute; inset-inline: 8px; bottom: 8px; text-align: center;
  background: rgba(0,0,0,.72); color: #fff; font-size: .76rem; font-weight: 700;
  padding: 5px 8px; border-radius: 8px; backdrop-filter: blur(3px);
}
.tool-group { display: flex; gap: 4px; padding: 5px; background: rgba(20,20,32,.8); backdrop-filter: blur(16px); border: 1px solid var(--border); border-radius: 12px; pointer-events: auto; box-shadow: var(--shadow); }
.tool { width: 34px; height: 34px; background: transparent; border: none; border-radius: 8px; color: var(--text-2); cursor: pointer; transition: .15s; display: grid; place-items: center; }
.tool:hover { background: var(--surface-3); color: var(--text); }
.tool.on { background: var(--accent); color: #fff; }
.stats { font-size: .76rem; color: var(--text-2); background: rgba(20,20,32,.8); backdrop-filter: blur(16px); border: 1px solid var(--border); border-radius: 9px; padding: 7px 12px; pointer-events: auto; }
.viewer-placeholder, .viewer-loading { text-align: center; color: var(--text-3); }
.ph-cube { font-size: 3.2rem; opacity: .3; margin-bottom: 12px; color: var(--accent-2); }
#viewerCanvas { width: 100%; height: 100%; display: block; }
.spinner { width: 40px; height: 40px; margin: 0 auto 16px; border: 3px solid var(--surface-3); border-top-color: var(--accent); border-radius: 50%; animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.progress { width: 220px; height: 5px; background: var(--surface-2); border-radius: 999px; margin: 16px auto 0; overflow: hidden; }
.progress-bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 999px; transition: width .4s; }

.viewer-dock { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; padding: 8px 10px; background: rgba(20,20,32,.82); backdrop-filter: blur(16px); border: 1px solid var(--border); border-radius: 14px; z-index: 5; box-shadow: var(--shadow); }
/* نوار متریال/شیدر */
.mat-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.mat-sw { width: 34px; height: 34px; border-radius: 50%; padding: 0; border: 2px solid transparent; background: transparent; cursor: pointer; display: grid; place-items: center; transition: transform .12s, border-color .12s; }
.mat-sw:hover { transform: translateY(-2px); }
.mat-sw.active { border-color: var(--accent, #4d8bff); }
.mat-ic { width: 26px; height: 26px; border-radius: 50%; display: block; box-shadow: inset 0 -3px 6px rgba(0,0,0,.35), inset 0 3px 5px rgba(255,255,255,.18); }
.ic-original { background: conic-gradient(from 220deg, #d8d8e0, #6b6b80 130deg, #2c2c3a 250deg, #d8d8e0); }
.ic-clay { background: radial-gradient(circle at 35% 30%, #e7e2d6, #c9c4b6 60%, #9b968a); }
.ic-iri { background: conic-gradient(from 0deg, #ff5f6d, #ffc371, #6ee7b7, #5ec9ff, #b07cff, #ff5f6d); }
.ic-gold { background: radial-gradient(circle at 35% 28%, #fff3c4, #ffd27a 45%, #c8912f 90%); }
.ic-silver { background: radial-gradient(circle at 35% 28%, #ffffff, #d8d8e0 45%, #8a8a9a 95%); }
.ic-mint { background: radial-gradient(circle at 35% 30%, #c8fff0, #8ef0d0 55%, #34b39a); }
.dock-adv { width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); cursor: pointer; display: grid; place-items: center; }
.dock-adv:hover, .dock-adv.on { color: var(--text); border-color: var(--accent, #4d8bff); }
.mat-div { width: 1px; height: 22px; background: var(--border); margin-inline: 2px; }
.dock-exposure { display: flex; align-items: center; gap: 8px; color: var(--text-2); padding-inline: 4px; }
.dock-exposure input[type=range] { width: 90px; }

/* ===== CONTROLS PANEL ===== */
.panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.panel-header h3 { font-size: 1.05rem; font-weight: 600; }
.model-tag { font-size: .72rem; color: var(--accent-2); background: var(--accent-glow); padding: 3px 10px; border-radius: 999px; }

.dropzone { border: 1.5px dashed var(--border); border-radius: var(--r); aspect-ratio: 1/.72; display: grid; place-items: center; cursor: pointer; transition: .18s; overflow: hidden; margin-bottom: 16px; background: var(--surface); position: relative; }
.img-remove { position: absolute; top: 8px; inset-inline-end: 8px; width: 30px; height: 30px; border-radius: 8px; background: rgba(10,10,15,.7); backdrop-filter: blur(8px); border: 1px solid var(--border); color: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer; display: grid; place-items: center; opacity: 0; transition: .18s; z-index: 2; }
.dropzone:hover .img-remove, .src-preview:hover .img-remove { opacity: 1; }
.img-remove:hover { background: var(--danger); border-color: var(--danger); }

.cost-btn { gap: 0; justify-content: center; position: relative; }
.cost-badge { display: inline-flex; align-items: center; gap: 5px; margin-inline-start: 10px; padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.18); font-size: .82rem; }
.cost-badge b { color: #fff; }
.dropzone:hover, .dropzone.drag { border-color: var(--accent); background: rgba(77,139,255,.05); }
.dropzone img { width: 100%; height: 100%; object-fit: contain; }
.dropzone-empty { text-align: center; color: var(--text-3); padding: 20px; }
.drop-icon { width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 14px; background: var(--surface-2); display: grid; place-items: center; color: var(--accent-2); }
.dropzone-empty p { color: var(--text-2); font-size: .9rem; margin-bottom: 3px; }

.opt-list { display: flex; flex-direction: column; gap: 2px; }
.switch-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 4px; cursor: pointer; gap: 12px; border-radius: var(--r-sm); transition: .15s; }
.switch-row:hover { background: var(--surface); }
.switch-row.compact { padding: 8px 4px; }
.switch-row > span:first-child { display: flex; flex-direction: column; gap: 1px; }
.switch-row b { font-weight: 600; font-size: .9rem; }
.switch-row input { display: none; }
.switch { width: 40px; height: 23px; background: var(--surface-3); border-radius: 999px; position: relative; transition: .2s; flex-shrink: 0; }
.switch::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 17px; height: 17px; background: var(--text-3); border-radius: 50%; transition: .2s; }
.switch-row input:checked ~ .switch { background: var(--accent); }
.switch-row input:checked ~ .switch::after { inset-inline-start: 20px; background: #fff; }

.field { margin-top: 14px; }
.field label, .block-label { display: block; margin-bottom: 7px; font-size: .82rem; color: var(--text-2); font-weight: 500; }
.field input[type=text], .field input[type=password], .field input[type=email] { width: 100%; padding: 11px 13px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text); font-family: inherit; font-size: .9rem; outline: none; transition: .15s; }
.field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
select { width: 100%; padding: 11px 13px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text); font-family: inherit; font-size: .88rem; outline: none; cursor: pointer; transition: .15s; }
select:focus { border-color: var(--accent); }
input[type=range] { -webkit-appearance: none; appearance: none; height: 5px; background: var(--surface-3); border-radius: 999px; outline: none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; background: var(--accent); border-radius: 50%; cursor: pointer; box-shadow: 0 0 0 4px rgba(77,139,255,.2); }
input[type=range]::-moz-range-thumb { width: 16px; height: 16px; background: var(--accent); border: none; border-radius: 50%; cursor: pointer; }

.segmented { display: flex; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 4px; }
.seg { flex: 1; background: transparent; border: none; color: var(--text-3); font-family: inherit; font-size: .82rem; font-weight: 600; padding: 8px; border-radius: 7px; cursor: pointer; transition: .15s; white-space: nowrap; }
.seg:hover { color: var(--text-2); }
.seg.active { background: var(--accent); color: #fff; }

.panel-foot { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.cost-tag { align-self: center; display: flex; align-items: center; gap: 6px; font-size: .95rem; font-weight: 700; color: var(--text); background: var(--surface); border: 1px solid var(--border); padding: 7px 16px; border-radius: 999px; }
.cost-tag b { color: var(--gem); }

/* download block */
.download-block { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r); padding: 16px; margin-bottom: 14px; }
.download-row { display: flex; gap: 8px; }
.download-row select { flex: 0 0 110px; }
.download-row .btn { flex: 1; }
.download-block .btn.ghost.block { margin-top: 12px; font-weight: 500; }

/* op cards */
.op-card { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r); padding: 16px; margin-bottom: 14px; }
.op-head { display: flex; align-items: center; justify-content: space-between; }
.op-head h4 { font-size: .95rem; font-weight: 600; }
.op-cost { font-size: .8rem; color: var(--gem); font-weight: 700; }
.op-card .btn.block { margin-top: 16px; }

/* ===== MODALS ===== */
.modal-overlay { position: fixed; inset: 0; background: rgba(6,6,10,.7); backdrop-filter: blur(8px); display: grid; place-items: center; z-index: 50; padding: 24px; animation: fade .2s ease; }
@keyframes fade { from { opacity: 0; } }
.modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 30px; width: 100%; max-width: 400px; position: relative; box-shadow: var(--shadow-lg); animation: pop .25s cubic-bezier(.16,1,.3,1); }
.modal.wide { max-width: 560px; }
.modal.xwide { max-width: 680px; }
@keyframes pop { from { transform: scale(.95) translateY(10px); opacity: 0; } }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.modal h2 { font-size: 1.3rem; font-weight: 700; margin-bottom: 6px; }
.modal-sub { color: var(--text-3); font-size: .88rem; margin-bottom: 20px; }
.buy-note { display: flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 12px; padding: 11px 16px; margin: -8px 0 20px; font-size: .88rem; color: var(--text-2); }
.buy-note b { color: var(--accent-2); font-weight: 700; }
.auth-sub { color: var(--text-3); font-size: .88rem; margin: -4px 0 20px; }
/* دکمه ورود با گوگل */
.btn-google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 48px; border-radius: 12px; cursor: pointer; background: #fff; color: #1f1f1f; font-family: inherit; font-weight: 600; font-size: .94rem; border: 1px solid rgba(0,0,0,.08); text-decoration: none; transition: background .15s, transform .15s, box-shadow .15s; }
.btn-google:hover { background: #f4f5f7; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.btn-google:active { transform: translateY(0); }
.btn-google svg { flex-shrink: 0; }
.auth-divider { display: flex; align-items: center; gap: 14px; margin: 18px 0; color: var(--text-3); font-size: .8rem; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.modal-brand { width: 46px; height: 46px; margin-bottom: 16px; display: grid; place-items: center; background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-radius: 13px; color: #fff; box-shadow: 0 6px 20px var(--accent-glow); }
.modal-close { position: absolute; top: 16px; inset-inline-end: 16px; background: var(--surface-2); border: 1px solid var(--border); width: 30px; height: 30px; border-radius: 8px; color: var(--text-2); font-size: 1.2rem; cursor: pointer; line-height: 1; display: grid; place-items: center; transition: .15s; z-index: 2; }
.modal-close:hover { border-color: var(--danger); color: var(--danger); }
.modal h2 + .field, .modal .field + .field { margin-top: 14px; }
.form-error { background: rgba(251,113,133,.12); color: var(--danger); padding: 10px 13px; border-radius: var(--r-sm); font-size: .85rem; margin: 14px 0 0; }
.modal .btn.block { margin-top: 18px; }
.switch-mode { text-align: center; margin-top: 18px; color: var(--text-3); font-size: .86rem; }
.switch-mode a { color: var(--accent-2); text-decoration: none; font-weight: 600; }
.switch-mode a:hover { text-decoration: underline; }

/* ===== PROFILE ===== */
.profile-top { display: flex; align-items: center; gap: 16px; margin: 6px 0 22px; }
.avatar-large { position: relative; width: 76px; height: 76px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border); overflow: visible; display: grid; place-items: center; font-size: 1.8rem; color: var(--accent-2); flex-shrink: 0; }
.avatar-large img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.avatar-edit { position: absolute; bottom: -2px; inset-inline-end: -2px; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; cursor: pointer; border: 2px solid var(--surface); transition: .15s; }
.avatar-edit:hover { transform: scale(1.1); }
.profile-id { flex: 1; }
.prof-name { font-size: 1.15rem; font-weight: 700; }
.prof-since { color: var(--text-3); font-size: .8rem; margin-top: 2px; }
.buy-more { flex-shrink: 0; }

.stat-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 22px; }
.stat-box { background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--r); padding: 16px 10px; text-align: center; }
.stat-box.accent { background: linear-gradient(135deg, rgba(77,139,255,.15), rgba(130,180,255,.06)); border-color: rgba(77,139,255,.3); }
.stat-num { font-size: 1.5rem; font-weight: 800; color: var(--text); letter-spacing: -.5px; }
.stat-box.accent .stat-num { color: var(--accent-2); }
.stat-lbl { font-size: .72rem; color: var(--text-3); margin-top: 3px; }

.prof-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.prof-section { border-top: 1px solid var(--border-soft); padding-top: 16px; margin-top: 16px; }
.prof-cols .prof-section { border-top: none; padding-top: 0; margin-top: 0; }
.prof-section h4 { font-size: .9rem; font-weight: 600; margin-bottom: 10px; }
.prof-section .btn.small { margin-top: 12px; }
.payment-list { display: flex; flex-direction: column; gap: 8px; max-height: 160px; overflow-y: auto; }
.payment-list .empty { color: var(--text-3); font-size: .84rem; text-align: center; padding: 10px; }
.pay-item { display: flex; justify-content: space-between; gap: 10px; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--r-sm); padding: 9px 13px; font-size: .84rem; }
.pay-item .gemv { color: var(--gem); font-weight: 600; }
.pay-date { color: var(--text-3); }

/* ===== PACKAGES ===== */
.packages { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
.pkg { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); padding: 22px 18px; text-align: center; position: relative; transition: .18s; cursor: default; }
.pkg:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow); }
.pkg.popular { border-color: var(--accent); background: linear-gradient(180deg, rgba(77,139,255,.1), var(--surface-2)); }
.pkg-badge { position: absolute; top: -10px; inset-inline-end: 50%; transform: translateX(50%); background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; font-size: .68rem; font-weight: 600; padding: 4px 13px; border-radius: 999px; box-shadow: 0 4px 12px var(--accent-glow); white-space: nowrap; }
.pkg-title { color: var(--text-3); font-size: .82rem; margin-bottom: 10px; }
.pkg-credits { font-size: 2rem; font-weight: 800; color: var(--accent-2); letter-spacing: -1px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.pkg-credits .pkg-gem { font-size: 1.1rem; }
.pkg-credits small { display: block; font-size: .72rem; color: var(--text-3); font-weight: 400; }
.pkg-price { margin: 12px 0 16px; font-size: 1rem; font-weight: 600; }
.pkg-price small { color: var(--text-3); font-weight: 400; }
.pkg-models { margin-top: 8px; display: inline-flex; align-items: center; gap: 5px; font-size: .82rem; color: var(--text-2);
  background: rgba(59,109,255,.1); border: 1px solid rgba(59,109,255,.22); border-radius: 999px; padding: 4px 12px; }
.pkg-models b { color: var(--accent-2); font-weight: 800; }

/* ===== TOAST ===== */
.toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); background: var(--surface-3); border: 1px solid var(--border); padding: 13px 22px; border-radius: var(--r); z-index: 100; box-shadow: var(--shadow-lg); animation: pop .25s cubic-bezier(.16,1,.3,1); font-size: .9rem; font-weight: 500; }
.toast.success { border-color: var(--success); }
.toast.error { border-color: var(--danger); }

/* ===== RESPONSIVE ===== */
/* ===== تبلت و آیپد (تا ۱۰۲۴px) ===== */
@media (max-width: 1024px) {
  .app { grid-template-columns: 220px 1fr; grid-template-rows: 1fr auto; }
  .controls-panel { grid-column: 1 / -1; grid-row: 2; border-inline-start: none; border-top: 1px solid var(--border-soft); max-height: none; }
  #createPanel, #editPanel { max-width: 680px; margin: 0 auto; width: 100%; }
  /* حالتِ نمایش روی تبلت: صفحه اسکرول شود و نمایشگر کوتاه‌تر تا گزینه‌های دانلود زیرش جا شوند */
  body[data-mode="view"] { overflow-y: auto; }
  body[data-mode="view"] .app { height: auto; min-height: calc(100vh - 60px); }
  body[data-mode="view"] .viewer-col { height: 56vh; min-height: 320px; overflow: hidden; }
  body[data-mode="view"] .controls-panel { overflow: visible; }
}

/* ===========================================================
   طراحی موبایل واقعی (Tab Bar) — تا ۸۲۰px
   =========================================================== */

/* Tab Bar — پیش‌فرض پنهان (فقط موبایل) */
.mobile-tabbar { display: none; }
.mobile-only-logout { display: none; }

@media (max-width: 820px) {
  body { overflow-y: auto; overflow-x: hidden; -webkit-text-size-adjust: 100%; }
  .topbar { height: 54px; padding: 0 14px; position: sticky; top: 0; z-index: 30; }
  .brand span:last-child { font-size: 1rem; }

  /* اپ: تک‌ستونه، هر بخش یک «صفحه‌ی تب» */
  .app { display: block; height: auto; padding-bottom: 76px; /* جای Tab Bar */ }

  /* همه‌ی ستون‌ها به‌صورت پنل تب — پیش‌فرض پنهان، فعال نمایش */
  .history-sidebar, .viewer-col, .controls-panel {
    border: none !important; width: 100%; max-width: 100%;
  }
  .history-sidebar, .controls-panel { display: none; }
  .viewer-col { display: block; }

  /* تب فعال */
  body[data-mtab="viewer"]  .viewer-col       { display: block; }
  body[data-mtab="viewer"]  .history-sidebar  { display: none; }
  /* در تب نمایشگر، پنل ویرایش زیر نمایشگر بیاید (فقط حالت view) */
  body[data-mtab="viewer"][data-mode="view"]  .controls-panel { display: block; }
  body[data-mtab="viewer"][data-mode="create"] .controls-panel { display: none; }

  /* حالتِ نمایشِ مدلِ کامل: نمایشگر کوتاه‌تر تا گزینه‌های دانلود در همان صفحه جا شوند */
  body[data-mtab="viewer"][data-mode="view"] .viewer-col {
    height: 46dvh; min-height: 260px; padding: 10px 12px 0;
  }
  body[data-mtab="viewer"][data-mode="view"] .controls-panel {
    min-height: 0; border-top: none; padding: 14px 14px 92px;
  }
  /* بلوک‌های دانلود/عملیات جمع‌وجورتر روی موبایل */
  body[data-mtab="viewer"][data-mode="view"] .download-block,
  body[data-mtab="viewer"][data-mode="view"] .op-card { padding: 12px; margin-bottom: 10px; }
  body[data-mtab="viewer"][data-mode="view"] .op-card .btn.block,
  body[data-mtab="viewer"][data-mode="view"] .download-block .btn.ghost.block { margin-top: 10px; }
  body[data-mtab="viewer"][data-mode="view"] .panel-header { margin-bottom: 10px; }
  body[data-mtab="viewer"][data-mode="view"] .panel-header h3 { font-size: 1.05rem; }
  body[data-mtab="viewer"][data-mode="view"] .tex-list { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 6px; }
  body[data-mtab="viewer"][data-mode="view"] .tex-chip { padding: 8px 10px; font-size: .78rem; }

  body[data-mtab="history"] .history-sidebar  { display: flex; }
  body[data-mtab="history"] .viewer-col,
  body[data-mtab="history"] .controls-panel   { display: none; }

  /* تب ساخت: جریان عمودی طبیعی و یکپارچه
     (creator به‌جای absolute به حالت عادی می‌رود تا dropzone ارتفاع و قابلیت لمس داشته باشد) */
  body[data-mtab="create"] .viewer-col {
    display: block; height: auto; min-height: 0; padding: 16px 16px 0; overflow: visible;
  }
  body[data-mtab="create"] .viewer-wrap {
    height: auto; min-height: 0; display: block; background: none; border: none; border-radius: 0; overflow: visible;
  }
  body[data-mtab="create"] .creator {
    position: static; height: auto; padding: 4px 0 10px; justify-content: flex-start; overflow: visible;
  }
  body[data-mtab="create"] .big-dropzone { aspect-ratio: 16/11; max-height: 300px; }
  body[data-mtab="create"] .controls-panel {
    display: block; min-height: auto; border-top: 1px solid var(--border-soft); padding: 18px 16px 96px;
  }
  /* تا وقتی عکسی آپلود نشده، پنل عکس/تولید مخفی است تا دو کادر خالی تکراری نشود */
  body[data-mtab="create"]:not(.cimg) .controls-panel { display: none; }
  body.cimg[data-mtab="create"] .controls-panel { display: block; }
  body[data-mtab="create"] .history-sidebar { display: none; }
  /* پیش‌نمایش عکس در حالت ساخت موبایل: جمع‌وجور، نه یک مربع غول‌پیکر */
  body[data-mtab="create"] .src-preview,
  body[data-mtab="create"] .src-empty { aspect-ratio: auto; height: 220px; }
  body[data-mtab="create"] #createPanel .panel-header h3 { font-size: 1.05rem; }

  /* نمایشگر: تمام‌قد و راحت */
  .viewer-col { padding: 12px; height: calc(100dvh - 54px - 76px); min-height: 340px; }
  .viewer-wrap { height: 100%; }

  /* تاریخچه: لیست عمودی تمام‌صفحه */
  .history-sidebar { background: var(--bg); min-height: calc(100dvh - 54px - 76px); }
  .sidebar-head { padding: 16px 16px 12px; }
  .sidebar-head h3 { font-size: 1.1rem; }
  .history-list { flex-direction: column; overflow-y: auto; padding: 0 16px 20px; gap: 12px; }
  .hitem { flex: none; width: 100%; }
  .hitem:hover { transform: none; }
  .hthumb { aspect-ratio: 16/9; }

  /* پنل ساخت/ویرایش: تمام‌صفحه راحت */
  .controls-panel { background: var(--bg); padding: 18px 16px; min-height: calc(100dvh - 54px - 76px); }
  #createPanel, #editPanel { max-width: 560px; margin: 0 auto; width: 100%; }

  /* دکمه‌های لمسی بزرگ‌تر */
  .btn.primary, .btn.lg { padding: 14px 18px; font-size: .98rem; }
  .dropzone { aspect-ratio: 1/.7; }

  /* نوار بالا: ساده و تمیز روی موبایل */
  .topbar-actions { gap: 8px; }
  #authBtn, #logoutBtn { display: none !important; } /* ورود/خروج در تب پروفایل است */
  .avatar-btn { width: 34px; height: 34px; flex-shrink: 0; }
  .credit-pill { flex-shrink: 0; }

  /* دکمه پشتیبانی: بالای نوار پیلِ پایین، گوشه‌ی راست */
  .support-fab { bottom: calc(80px + env(safe-area-inset-bottom,0px)) !important; inset-inline-end: 16px !important; width: 50px; height: 50px; z-index: 39; }
  /* پنل پشتیبانی روی موبایل = شیت پایین تمام‌عرض که جا می‌شود */
  .support-pop {
    inset-inline: 0 !important; bottom: 0 !important; width: auto !important; max-width: 100% !important;
    height: 80dvh !important; max-height: 80dvh !important;
    border-radius: 20px 20px 0 0;
    animation: slideUp .28s cubic-bezier(.16,1,.3,1);
  }
  .mobile-only-logout { display: block; margin-top: 20px; }

  /* پروفایل/خرید (در مودال) */
  .prof-cols { grid-template-columns: 1fr; gap: 16px; }
  .packages { grid-template-columns: 1fr; gap: 12px; }
  .profile-top { flex-wrap: wrap; gap: 12px; align-items: center; }
  .profile-id { min-width: 0; flex: 1; }
  .prof-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .prof-section h4 { font-size: .95rem; }
  .payment-list { max-height: 200px; overflow-y: auto; }
  .field input, .field select { font-size: 16px; } /* جلوگیری از زوم خودکار iOS */
  .card-number { word-break: break-all; }
  /* مودال‌ها روی موبایل: تمام‌عرض، اسکرول‌شونده، از پایین */
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal { padding: 24px 18px; max-width: 100%; width: 100%; border-radius: 20px 20px 0 0; max-height: 92dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; animation: slideUp .28s cubic-bezier(.16,1,.3,1); }
  .modal.wide, .modal.xwide { max-width: 100%; }
  .stat-row { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .stat-num { font-size: 1.25rem; }
  .stat-box { padding: 14px 8px; }

  /* ===== Tab Bar پایینی — پیل شناور دو‌بخشی ===== */
  .mobile-tabbar {
    display: flex; position: fixed; z-index: 40;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%);
    gap: 5px; padding: 5px; width: auto;
    background: rgba(18,18,28,.82); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
    border: 1px solid rgba(255,255,255,.07); border-radius: 999px;
    box-shadow: 0 10px 34px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04);
  }
  .mtab {
    display: flex; align-items: center; gap: 9px;
    padding: 11px 24px; border-radius: 999px; min-width: 0;
    background: none; border: none; color: var(--text-2);
    font-family: inherit; font-size: .92rem; font-weight: 600; letter-spacing: .2px;
    cursor: pointer; transition: color .2s, background .25s, box-shadow .25s;
  }
  .mtab svg { flex-shrink: 0; transition: transform .25s; }
  .mtab span { white-space: nowrap; }
  .mtab:active { transform: scale(.96); }
  .mtab.active {
    color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    box-shadow: 0 4px 16px var(--accent-glow);
  }
  .mtab.active svg { transform: scale(1.06); }
}

/* ===== موبایل کوچک (تا ۴۸۰px) ===== */
@media (max-width: 480px) {
  .topbar-actions { gap: 6px; }
  .lang-toggle .lang { padding: 4px 8px; font-size: .72rem; }
  .credit-pill { padding: 6px 9px 6px 11px; font-size: .85rem; }
  .btn { padding: 8px 12px; font-size: .84rem; }
  .viewer-toolbar { top: 10px; inset-inline: 10px; }
  .tool { width: 32px; height: 32px; }
  .tool-group { gap: 2px; padding: 4px; }
  .viewer-dock { bottom: 12px; gap: 8px; padding: 7px 9px; flex-wrap: wrap; max-width: calc(100% - 24px); }
  .dock-exposure input[type=range] { width: 70px; }
  .stat-row { grid-template-columns: 1fr; }
  .crop-stage { width: 260px; height: 260px; }
  #cropCanvas { width: 260px; height: 260px; }
  .modal h2 { font-size: 1.15rem; }
  .download-row { flex-direction: column; }
  .download-row select { flex: none; width: 100%; }
  /* حالتِ نمایش روی موبایلِ کوچک: نمایشگر کمی کوتاه‌تر تا دانلود راحت دیده شود */
  body[data-mtab="viewer"][data-mode="view"] .viewer-col { height: 42dvh; min-height: 240px; }
}

/* صفحه‌های لمسی: کنترل‌های شناور همیشه دیده شوند */
@media (hover: none) {
  .img-remove, .hdelete { opacity: 1; }
}

/* اجبار ورود: دکمه بستن مودال ورود مخفی شود */
body.gated #authModal .modal-close { display: none; }

/* لینک فراموشی رمز و پیام موفقیت */
.forgot-link { text-align: center; margin-top: 12px; }
.forgot-link a { color: var(--text-3); font-size: .84rem; text-decoration: none; }
.forgot-link a:hover { color: var(--accent-2); }
.form-ok { background: rgba(52,211,153,.12); color: var(--success); padding: 10px 13px; border-radius: var(--r-sm); font-size: .85rem; margin: 14px 0 0; }

.create-note { color: var(--text-3); font-size: .8rem; line-height: 1.8; margin: 14px 2px 0; text-align: center; }

.hdelete { position: absolute; top: 8px; inset-inline-start: 8px; width: 28px; height: 28px; border-radius: 7px; background: rgba(10,10,15,.7); backdrop-filter: blur(8px); border: 1px solid var(--border); color: var(--text-2); cursor: pointer; display: grid; place-items: center; opacity: 0; transition: .18s; z-index: 3; }
.hitem:hover .hdelete { opacity: 1; }
.hdelete:hover { background: var(--danger); border-color: var(--danger); color: #fff; }

/* مودال کراپ آواتار */
.crop-stage { position: relative; width: 320px; height: 320px; margin: 8px auto 0; border-radius: 12px; overflow: hidden; background: #000; touch-action: none; }
#cropCanvas { display: block; cursor: grab; }
#cropCanvas:active { cursor: grabbing; }
.crop-ring { position: absolute; inset: 0; pointer-events: none; box-shadow: 0 0 0 9999px rgba(10,10,15,.55); border-radius: 50%; }
.crop-zoom { display: flex; align-items: center; gap: 10px; margin: 16px 4px 0; color: var(--text-2); }
.crop-zoom input[type=range] { flex: 1; }

/* مودال کراپ باید روی مودال پروفایل بیاید */
#cropModal { z-index: 60; }

/* ===== فاز ۲-۵: اسم مدل، عکس اصلی، کارت جدید، تکسچر HD ===== */
.name-field { margin-top: 4px; }

/* عکس اصلی گوشه‌ی نمایشگر (مثل مرجع) */
.source-thumb { position: absolute; bottom: 16px; inset-inline-start: 16px; width: 84px; height: 84px; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow); z-index: 4; }
.source-thumb { cursor: pointer; background: var(--surface-2); }
.source-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.source-thumb:hover { border-color: var(--accent); }
@media (max-width: 480px) { .source-thumb { width: 60px; height: 60px; bottom: 10px; inset-inline-start: 10px; } }

/* کارت «مدل جدید» در هیستوری */
.hnew { flex: 0 0 auto; width: 100%; border: 1.5px dashed var(--border); background: var(--surface); border-radius: var(--r); padding: 18px; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; transition: .18s; color: var(--text-2); font-family: inherit; margin-bottom: 12px; }
.hnew:hover { border-color: var(--accent); color: var(--accent-2); background: var(--surface-2); }
.hnew-plus { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; display: grid; place-items: center; font-size: 1.5rem; line-height: 1; box-shadow: 0 4px 14px var(--accent-glow); }
.hnew-label { font-size: .86rem; font-weight: 600; }
@media (max-width: 820px) { .hnew { flex: 0 0 120px; margin-bottom: 0; margin-inline-end: 4px; } }

/* بج HD روی تامبنیل */
.hbadge.hd { background: linear-gradient(135deg, var(--gem), #22d3ee); color: #052; font-weight: 800; }

/* یادداشت داخل کارت عملیات */
.op-note { color: var(--text-3); font-size: .78rem; line-height: 1.8; margin: 0 0 12px; }
.hd-card { border-color: rgba(77,139,255,.3); }

/* اسکرول هیستوری (دسکتاپ) */
.history-list { overflow-y: auto; }

/* ===== فاز ۵: آیکون آدمک پروفایل پر و وسط دایره ===== */
#profAvatarFallback, #navAvatarFallback {
  position: absolute; inset: 0; display: block; border-radius: 50%;
  background: var(--surface-3); color: var(--accent-2); overflow: hidden;
}
#profAvatarFallback svg, #navAvatarFallback svg { width: 100%; height: 100%; display: block; }
.avatar-large .avatar-edit { z-index: 3; }

/* ===== فاز ۷: ویجت چت پشتیبانی ===== */
.support-fab { position: fixed; bottom: 22px; inset-inline-end: 22px; width: 56px; height: 56px; border-radius: 50%; border: none; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; cursor: pointer; display: grid; place-items: center; box-shadow: 0 8px 28px var(--accent-glow); z-index: 45; transition: .2s; }
.support-fab:hover { transform: scale(1.07); }
.support-dot { position: absolute; top: 10px; inset-inline-end: 10px; width: 12px; height: 12px; border-radius: 50%; background: var(--danger); border: 2px solid var(--bg); }
.support-pop { position: fixed; bottom: 90px; inset-inline-end: 22px; width: 360px; max-width: calc(100vw - 32px); height: 480px; max-height: calc(100vh - 130px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow); z-index: 46; display: flex; flex-direction: column; overflow: hidden; animation: popIn .18s ease; }
@keyframes popIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.support-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border-soft); background: var(--surface-2); }
.support-title { display: flex; align-items: center; gap: 10px; }
.support-avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; display: grid; place-items: center; flex-shrink: 0; }
.support-title b { font-size: .95rem; display: block; }
.support-title small { color: var(--text-3); font-size: .72rem; }
.support-close { background: none; border: none; color: var(--text-2); font-size: 1.5rem; cursor: pointer; line-height: 1; padding: 0 4px; }
.support-close:hover { color: var(--text); }
.support-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.support-empty { color: var(--text-3); font-size: .85rem; text-align: center; margin: auto; line-height: 1.9; padding: 0 20px; }
.smsg { max-width: 80%; padding: 9px 13px; border-radius: 14px; font-size: .88rem; line-height: 1.6; word-break: break-word; white-space: pre-wrap; }
.smsg.me { align-self: flex-end; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border-bottom-inline-end-radius: 4px; }
.smsg.them { align-self: flex-start; background: var(--surface-3); color: var(--text); border-bottom-inline-start-radius: 4px; }
.support-input { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--border-soft); align-items: center; background: var(--surface-2); }
.support-input input { flex: 1; height: 44px; border-radius: 22px; border: 1px solid var(--border); background: var(--surface); padding: 0 18px; color: var(--text); font-family: inherit; font-size: .9rem; transition: .18s; }
.support-input input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.support-input button { width: 44px; height: 44px; flex-shrink: 0; border: none; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; cursor: pointer; display: grid; place-items: center; transition: .18s; box-shadow: 0 4px 12px var(--accent-glow); }
.support-input button:hover { transform: scale(1.06); }
.support-input button:active { transform: scale(.96); }
[dir=rtl] .support-input button svg { transform: scaleX(-1); }

/* ===== مودال پرداخت کارت‌به‌کارت ===== */
.pay-modal { max-width: 460px; direction: rtl; text-align: right; }
.pay-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.pay-icon { width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; display: grid; place-items: center; flex-shrink: 0; box-shadow: 0 6px 18px var(--accent-glow); }
.pay-head h2 { margin: 0; font-size: 1.25rem; }
.pay-summary { display: flex; justify-content: space-between; align-items: center; background: linear-gradient(135deg, rgba(77,139,255,.14), rgba(77,139,255,.05)); border: 1px solid rgba(77,139,255,.25); border-radius: var(--r); padding: 14px 16px; margin-bottom: 16px; }
.pay-pkg-name { font-weight: 700; font-size: 1.05rem; }
.pay-pkg-cr { color: var(--gem); font-weight: 600; }
.pay-desc { color: var(--text-2); font-size: .85rem; line-height: 2; margin: 0 0 18px; }
.pay-desc b { color: var(--text); }
.pay-field { background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--r-sm); padding: 12px 14px; margin-bottom: 10px; }
.pay-field.highlight { border-color: rgba(52,224,216,.35); background: rgba(52,224,216,.06); }
.pay-label { display: block; font-size: .72rem; color: var(--text-3); margin-bottom: 6px; }
.pay-value-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pay-amount { font-size: 1.5rem; font-weight: 800; color: var(--accent-2); }
.pay-unit { color: var(--text-3); font-size: .85rem; }
.pay-card { font-size: 1.15rem; font-weight: 700; letter-spacing: 2px; font-family: ui-monospace, monospace; }
.pay-name { font-size: 1rem; font-weight: 600; }
.pay-id { font-size: 1.05rem; font-weight: 700; color: var(--gem); }
.pay-copy { background: var(--surface-3); border: 1px solid var(--border); color: var(--text-2); border-radius: 7px; padding: 5px 12px; font-size: .78rem; cursor: pointer; font-family: inherit; flex-shrink: 0; transition: .15s; }
.pay-copy:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.pay-note { color: var(--text-3); font-size: .78rem; line-height: 1.9; margin: 14px 0 18px; text-align: center; }

/* لایت‌باکس عکس اصلی */
.lightbox { position: fixed; inset: 0; z-index: 70; background: rgba(5,5,8,.92); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: 40px; animation: fadeIn .15s ease; }
.lightbox img { max-width: 90vw; max-height: 88vh; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.6); object-fit: contain; }
.lightbox-close { position: absolute; top: 22px; inset-inline-end: 28px; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: #fff; font-size: 1.6rem; cursor: pointer; line-height: 1; transition: .15s; }
.lightbox-close:hover { background: rgba(255,255,255,.2); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* نشانگر شناور ساخت (نمایشگر را قفل نمی‌کند) */
.build-pill { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 44; display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 10px 18px; box-shadow: var(--shadow); font-size: .85rem; font-weight: 500; animation: popIn .2s ease; }
.build-spinner { width: 16px; height: 16px; border: 2px solid var(--border); border-top-color: var(--accent-2); border-radius: 50%; animation: spin .7s linear infinite; flex-shrink: 0; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 480px) { .build-pill { bottom: 84px; } }

/* دانلود تکسچرها */
.tex-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.tex-chip { display: flex; align-items: center; justify-content: center; gap: 7px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: 10px; padding: 10px 12px; font-size: .82rem; font-weight: 500; cursor: pointer; text-decoration: none; transition: .15s; }
.tex-chip svg { opacity: .6; flex-shrink: 0; }
.tex-chip:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.tex-chip:hover svg { opacity: 1; }

/* ===================== صفحه‌ی لندینگ ===================== */
.landing { position: fixed; inset: 0; z-index: 60; display: grid; grid-template-columns: 1.3fr 1fr; background: var(--bg); }
.landing-stage { position: relative; background: radial-gradient(80% 70% at 50% 35%, #16203a, #0a0f1c 60%, #06080f); overflow: hidden; min-height: 0; }
.landing-stage canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; }
.landing-loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-2); font-size: .9rem; font-weight: 500; letter-spacing: .3px; pointer-events: none; }
.landing-source { position: absolute; bottom: 22px; inset-inline-start: 22px; width: 104px; height: 104px; object-fit: contain; background: rgba(0,0,0,.5); border: 1px solid var(--border); border-radius: 12px; padding: 5px; backdrop-filter: blur(6px); }
.landing-caption { position: absolute; top: 22px; inset-inline-start: 22px; background: rgba(0,0,0,.45); color: #fff; padding: 7px 14px; border-radius: 999px; font-size: .85rem; backdrop-filter: blur(8px); border: 1px solid var(--border-soft); }
.landing-panel { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 48px 56px; gap: 14px; position: relative; }
.landing-brand { display: flex; align-items: center; gap: 11px; font-size: 1.25rem; font-weight: 500; margin-bottom: 18px; }
.landing-brand .brand-mark { width: 38px; height: 38px; }
.landing-brand b { color: var(--accent-2); font-weight: 700; }
.landing-title { font-size: 2rem; font-weight: 800; line-height: 1.25; }
.landing-sub { color: var(--text-2); font-size: 1rem; line-height: 1.7; margin-bottom: 12px; }
.landing-cta { align-self: stretch; }
.landing-lang { display: flex; gap: 4px; background: var(--surface-2); border-radius: 999px; padding: 3px; margin-top: 8px; }
.landing-lang .lang { background: none; border: none; color: var(--text-3); padding: 6px 14px; border-radius: 999px; cursor: pointer; font-size: .8rem; font-family: inherit; }
.landing-lang .lang.active { background: var(--accent); color: #fff; }

/* موبایل: مدل بالا، پنل پایین */
@media (max-width: 820px) {
  /* موبایل: ستونی، کل صفحه اسکرول‌شونده */
  .landing { position: fixed; inset: 0; display: block; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .landing-stage { height: 42dvh; min-height: 240px; }
  .landing-panel { padding: 26px 24px 48px; justify-content: flex-start; align-items: stretch; min-height: auto; }
  .landing-brand { margin-bottom: 10px; justify-content: center; }
  .landing-title { font-size: 1.45rem; text-align: center; }
  .landing-sub { font-size: .9rem; text-align: center; margin-bottom: 6px; }
  .landing-form { max-width: 100%; margin: 4px auto 0; }
  .landing-form h2 { text-align: center; }
  .landing-form .field input { font-size: 16px; } /* جلوگیری از زوم iOS */
  .landing-lang { align-self: center; margin-top: 16px; }
  .landing-source { width: 70px; height: 70px; bottom: 12px; inset-inline-start: 12px; }
  .landing-caption { top: 12px; inset-inline-start: 12px; font-size: .78rem; }
}

/* فرم ورود داخل لندینگ */
.landing-form { width: 100%; max-width: 340px; margin-top: 6px; }
.landing-form h2 { font-size: 1.25rem; font-weight: 700; margin-bottom: 16px; }
.landing-form .field { margin-bottom: 13px; }
.landing-form .btn { margin-top: 6px; }
.landing-form .switch-mode { margin-top: 14px; font-size: .88rem; color: var(--text-2); }
.landing-form .switch-mode a { color: var(--accent-2); text-decoration: none; font-weight: 600; }
.landing-form .form-error { color: #ff6b6b; font-size: .85rem; margin: 8px 0 0; }

/* ===== انتخاب کیفیت مدل ===== */
.quality-select { margin: 16px 0; }
.quality-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.qcard { text-align: start; background: var(--surface-2); border: 1.5px solid var(--border); border-radius: 14px; padding: 13px 14px; cursor: pointer; transition: .16s; font-family: inherit; color: var(--text); display: flex; flex-direction: column; gap: 6px; }
.qcard:hover { border-color: var(--accent); }
.qcard.active { border-color: var(--accent); background: linear-gradient(160deg, rgba(77,139,255,.14), rgba(77,139,255,.04)); box-shadow: 0 0 0 3px var(--accent-glow); }
.qcard-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.qcard-name { font-weight: 700; font-size: .95rem; }
.qcard-badge { font-size: .64rem; font-weight: 600; padding: 2px 7px; border-radius: 999px; background: var(--surface-3); color: var(--text-2); }
.qcard-badge.pro { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; }
.qcard-desc { font-size: .76rem; color: var(--text-2); line-height: 1.5; margin: 0; }
.qcard-cost { font-size: .85rem; font-weight: 600; color: var(--accent-2); }
@media (max-width: 480px) { .quality-cards { grid-template-columns: 1fr; } }

/* ===== صفحه‌ی انتخابِ بخش ===== */
.mode-chooser { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: var(--bg, #0e0e15); background-image: radial-gradient(60% 50% at 80% 0%, rgba(77,139,255,.16), transparent 60%), radial-gradient(50% 45% at 5% 105%, rgba(52,224,216,.08), transparent 55%); padding: 24px; }
.mc-inner { width: 100%; max-width: 760px; text-align: center; }
.mc-title { font-size: 2rem; margin: 0 0 6px; }
.mc-sub { color: var(--text-2); margin: 0 0 32px; }
.mc-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.mc-card { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 34px 22px; border-radius: 20px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; transition: transform .15s, border-color .15s, box-shadow .15s; color: var(--text); }
.mc-card:hover { transform: translateY(-4px); border-color: var(--accent, #4d8bff); box-shadow: 0 16px 40px rgba(77,139,255,.18); }
.mc-ic { width: 76px; height: 76px; border-radius: 20px; display: grid; place-items: center; font-size: 38px; }
.mc-ic-img { background: linear-gradient(135deg, #ffe07a, #ffb02e); }
.mc-ic-3d { background: linear-gradient(135deg, #4d8bff, #5ec9ff); color: #fff; }
.mc-card-title { font-size: 1.25rem; font-weight: 700; }
.mc-card-sub { font-size: .86rem; color: var(--text-2); line-height: 1.7; }
.mode-switch { display: inline-flex; align-items: center; gap: 6px; }

/* ===== استودیوی تولید عکس ===== */
.image-studio { position: fixed; inset: 60px 0 0 0; z-index: 20; display: grid; grid-template-columns: 1fr 300px; background: var(--bg, #0e0e15); overflow: hidden; }
body[data-studio="image"] .app { display: none; }
.is-main { padding: 22px 26px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
.is-head { display: flex; align-items: center; gap: 10px; }
.is-head h2 { margin: 0; font-size: 1.4rem; }
.is-badge { font-size: .72rem; padding: 3px 10px; border-radius: 999px; background: linear-gradient(135deg, #ffe07a, #ffb02e); color: #3a2a00; font-weight: 700; }
.is-result { position: relative; flex: 1; min-height: 320px; border-radius: 18px; border: 1px solid var(--border); background: var(--surface-2, #14141f); display: grid; place-items: center; overflow: hidden; }
.is-placeholder { color: var(--text-3); font-size: .95rem; }
.is-img { max-width: 100%; max-height: 60vh; object-fit: contain; border-radius: 10px; }
.is-loading { display: flex; flex-direction: column; align-items: center; gap: 14px; color: var(--text-2); }
.is-spin { width: 42px; height: 42px; border: 3px solid var(--border); border-top-color: var(--accent, #4d8bff); border-radius: 50%; animation: isspin 0.9s linear infinite; }
@keyframes isspin { to { transform: rotate(360deg); } }
.is-actions { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
.is-controls { display: flex; flex-direction: column; gap: 12px; }
.is-prompt { width: 100%; resize: vertical; padding: 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-family: inherit; font-size: .95rem; line-height: 1.8; }
.is-row { display: flex; gap: 12px; flex-wrap: wrap; }
.is-field { flex: 1; min-width: 140px; display: flex; flex-direction: column; gap: 6px; font-size: .82rem; color: var(--text-2); }
.is-field select { padding: 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-family: inherit; }
.is-ratios { display: flex; gap: 8px; flex-wrap: wrap; }
.is-ratio { padding: 8px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); cursor: pointer; font-size: .85rem; }
.is-ratio.active { border-color: var(--accent, #4d8bff); color: var(--text); background: rgba(77,139,255,.12); }
.is-ratio:disabled { opacity: .35; cursor: not-allowed; }
.is-generate { display: flex; align-items: center; justify-content: center; gap: 10px; }
.is-cost { font-size: .82rem; opacity: .9; background: rgba(255,255,255,.18); padding: 2px 10px; border-radius: 999px; }
.is-history { border-inline-start: 1px solid var(--border-soft); padding: 16px; overflow-y: auto; background: var(--surface); }
.is-history-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.is-hist-item { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); cursor: pointer; background: var(--surface-2); }
.is-hist-item img { width: 100%; height: 100%; object-fit: cover; }
.is-hist-item.pending { display: grid; place-items: center; font-size: .7rem; color: var(--text-3); }
.is-hist-del { position: absolute; top: 4px; inset-inline-end: 4px; width: 22px; height: 22px; border-radius: 6px; border: none; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; opacity: 0; transition: opacity .12s; }
.is-hist-item:hover .is-hist-del { opacity: 1; }

@media (max-width: 860px) {
  .mc-cards { grid-template-columns: 1fr; }
  .image-studio { grid-template-columns: 1fr; }
  .is-history { display: none; }
}

/* تطبیقِ ارتفاعِ استودیو با topbar موبایل (۵۴px) */
@media (max-width: 820px) {
  .image-studio { inset: 54px 0 0 0; }
}

/* نسبت‌ها به‌شکلِ گرید/مستطیلِ تصویری */
.is-ratio { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 12px; }
.ratio-box { display: block; border: 2px solid currentColor; border-radius: 3px; opacity: .65; }
.is-ratio.active .ratio-box { opacity: 1; background: rgba(77,139,255,.18); }
.ratio-box.r-16-9 { width: 30px; height: 17px; }
.ratio-box.r-9-16 { width: 17px; height: 30px; }
.ratio-box.r-1-1  { width: 24px; height: 24px; }
.ratio-box.r-4-3  { width: 28px; height: 21px; }
.ratio-box.r-3-4  { width: 21px; height: 28px; }
.is-ratio span { font-size: .78rem; }

/* تب‌های بخش (وسطِ بالای صفحه) */
.section-tabs { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 4px; }
.sec-tab { padding: 6px 18px; border: none; background: transparent; color: var(--text-2); cursor: pointer; border-radius: 999px; font-size: .85rem; font-weight: 600; transition: background .15s, color .15s; }
.sec-tab.active { background: var(--accent, #4d8bff); color: #fff; }
@media (max-width: 600px) {
  .section-tabs { position: static; transform: none; }
  .sec-tab { padding: 5px 12px; font-size: .78rem; }
}

/* هابِ معرفیِ دو بخش روی صفحه‌ی ورود */
.landing-hub { position: absolute; left: 0; right: 0; bottom: 22px; display: flex; gap: 12px; justify-content: center; padding: 0 18px; z-index: 2; pointer-events: none; flex-wrap: wrap; }
.lhub-card { display: flex; align-items: center; gap: 11px; padding: 11px 16px; border-radius: 14px; background: rgba(18,18,28,.72); border: 1px solid var(--border); backdrop-filter: blur(12px); box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.lhub-ic { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; font-size: 22px; flex-shrink: 0; }
.lhub-img { background: linear-gradient(135deg, #ffe07a, #ffb02e); }
.lhub-3d { background: linear-gradient(135deg, #4d8bff, #5ec9ff); color: #fff; }
.lhub-txt { display: flex; flex-direction: column; gap: 1px; }
.lhub-txt b { font-size: .92rem; }
.lhub-txt span { font-size: .76rem; color: var(--text-2); }
@media (max-width: 980px) {
  .landing-hub { position: static; margin-top: 14px; bottom: auto; }
}

/* افزودنِ عکسِ مرجع در استودیوی تولید عکس */
.is-srcrow { display: flex; align-items: center; gap: 10px; }
.is-srcbtn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 12px; border: 1px dashed var(--border); background: var(--surface); color: var(--text-2); cursor: pointer; font-family: inherit; font-size: .86rem; }
.is-srcbtn:hover { border-color: var(--accent, #4d8bff); color: var(--text); }
.is-srcicon { font-size: 1.1rem; line-height: 1; }
.is-srcthumb { position: relative; width: 54px; height: 54px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); flex-shrink: 0; }
.is-srcthumb img { width: 100%; height: 100%; object-fit: cover; }
.is-srcdel { position: absolute; top: 2px; inset-inline-end: 2px; width: 18px; height: 18px; border-radius: 5px; border: none; background: rgba(0,0,0,.65); color: #fff; cursor: pointer; line-height: 1; font-size: .8rem; }

/* حالتِ بدونِ مدلِ نمایشی: هاب وسطِ صفحه و بزرگ‌تر */
body.landing-nomodel .landing-stage { display: grid; place-items: center; }
body.landing-nomodel .landing-hub { position: static; flex-direction: column; gap: 14px; padding: 0; width: min(86%, 360px); }
body.landing-nomodel .lhub-card { padding: 16px 18px; }
body.landing-nomodel .lhub-ic { width: 50px; height: 50px; font-size: 26px; }
body.landing-nomodel .lhub-txt b { font-size: 1.02rem; }


/* ===================== افزوده‌ی ریدیزاین: مشِ آبیِ متحرکِ آرام ===================== */
body::before{
  content:""; position:fixed; inset:-12%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(38vw 38vw at 82% 6%, rgba(43,111,255,.22), transparent 62%),
    radial-gradient(34vw 34vw at 10% 98%, rgba(109,92,255,.16), transparent 62%),
    radial-gradient(28vw 28vw at 60% 52%, rgba(25,199,214,.10), transparent 62%);
  filter:blur(16px);
  animation:meshDrift 42s ease-in-out infinite;
}
@keyframes meshDrift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-2.5%,2%) scale(1.08)}}
@media (prefers-reduced-motion: reduce){ body::before{animation:none} }


/* ============================================================
   ریدیزاینِ کاملِ سایت — لایه‌ی شیشه‌ای/سینمایی
   (روی سلکتورهای موجود؛ منطق و ساختارِ HTML دست‌نخورده)
   ============================================================ */

/* --- پنل‌های اصلی → شیشه‌ی مات روی مشِ آبی --- */
.history-sidebar, .controls-panel, .is-history{
  background: var(--glass-2);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 var(--glass-hi);
}
.history-sidebar{ border-inline-end-color: var(--glass-border); }
.controls-panel{ border-inline-start-color: var(--glass-border); }
.is-history{ border-inline-start-color: var(--glass-border); }
.image-studio{ background: transparent; }
.topbar{ border-bottom-color: var(--glass-border); }

/* --- کارت‌ها → شیشه + خطِ نوریِ بالا + هاورِ بالاآمدن --- */
.ecard, .qcard, .mode-card, .mc-card, .op-card, .download-block,
.pkg, .stat-box, .lhub-card, .buy-note, .pay-field, .pay-summary,
.hitem, .mv-slot, .mv-side-item, .src-preview, .src-empty, .is-result, .hnew{
  background: var(--glass);
  border-color: var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-hi);
}
.ecard, .qcard, .pkg, .mc-card{ position: relative; }
.ecard::before, .qcard::before, .pkg::before, .mc-card::before{
  content:""; position:absolute; top:0; inset-inline:0; height:1px; z-index:2;
  background:linear-gradient(90deg, transparent, var(--glass-hi), transparent);
  pointer-events:none;
}
.mode-card, .mc-card, .pkg, .lhub-card{
  transition: transform .2s cubic-bezier(.16,1,.3,1), border-color .18s, box-shadow .18s, background .18s;
}
.lhub-card:hover{ transform: translateY(-3px); border-color: var(--accent); }

/* --- فیلدها/ورودی‌ها/دراپ‌زون → سطحِ نیمه‌شفاف --- */
.field input[type=text], .field input[type=password], .field input[type=email],
select, .is-prompt, .is-field select, .support-input input,
.dropzone, .big-dropzone, .is-ratio, .is-srcbtn{
  background: rgba(12,16,27,.6);
  border-color: var(--glass-border);
}

/* --- پیل‌ها → شیشه --- */
.credit-pill, .lang-toggle, .segmented, .section-tabs, .landing-lang{
  background: var(--glass-2);
  border-color: var(--glass-border);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}

/* --- شناورهای نمایشگر و سطوحِ معلق → شیشه‌ی یکدست --- */
.tool-group, .stats, .viewer-dock, .tune-panel, .support-pop,
.support-head, .support-input, .toast, .build-pill, .modal, .mobile-tabbar{
  background: var(--glass-2);
  border-color: var(--glass-border);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--shadow);
}
.modal-overlay{ background: rgba(4,6,12,.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* --- دکمه‌ی اصلی: گرادیانِ آبیِ پُرتر --- */
.btn.primary{ background: var(--accent-grad); box-shadow: 0 6px 20px var(--accent-glow); }
.btn.primary:active{ transform: translateY(0); filter: brightness(.96); }

/* --- نمایشگرِ سه‌بعدی: پس‌زمینه‌ی سینمایی‌تر (بدونِ پوشاندنِ مدل) --- */
.viewer-wrap{
  background:
    radial-gradient(90% 60% at 50% 12%, rgba(77,139,255,.16), transparent 60%),
    radial-gradient(130% 110% at 50% 44%, #141b30 0%, #0b1020 55%, #06080f 100%);
  border-color: var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-hi), inset 0 0 120px rgba(2,6,20,.55);
}

/* --- صفحه‌ی ورود: مش پشتِ پنل + وینیتِ سینمایی روی صحنه --- */
.landing{ background: transparent; }
.landing-stage{ background: radial-gradient(80% 72% at 50% 32%, #18233f, #0a0f1c 58%, #05070f); }
.landing-stage::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background: radial-gradient(120% 82% at 50% 4%, transparent 52%, rgba(5,7,14,.6));
  box-shadow: inset 0 0 150px rgba(2,6,20,.6);
}
.landing-panel{
  background: linear-gradient(to var(--lp-dir, left), rgba(7,9,16,.62), rgba(7,9,16,.18));
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
}
.landing-title{ font-weight: 900; letter-spacing: -.4px; }

/* --- چوزرِ بخش: هاورِ نورانی‌تر --- */
.mc-card:hover{ box-shadow: 0 18px 46px rgba(77,139,255,.22), inset 0 1px 0 var(--glass-hi); }

/* --- بهبودِ تضادِ متن روی شیشه --- */
.sidebar-head h3, .panel-header h3{ color: var(--text); }

/* ===================== فونت YekanBakh (برای لندینگِ مارکتینگی) =====================
   حذفِ نسخه‌ی تکراری: وزن‌های 400/600/700/800/900 پیش‌تر از /vendor/fonts/
   تعریف شده‌اند (خطوطِ بالای فایل)؛ نسخه‌ی /landing-assets/ حذف شد تا فونت دوبار دانلود نشود. */

/* ===================== لندینگِ مارکتینگی (مهمان) ===================== */
.site-landing{
  --mk-bg:#05070e; --mk-bg2:#070a14; --mk-surface:#0d111c; --mk-surface2:#121724;
  --mk-glass:rgba(16,22,38,.5); --mk-gborder:rgba(150,178,255,.13); --mk-ghi:rgba(180,205,255,.26);
  --mk-border:#1c2438; --mk-text:#eef2fc; --mk-t2:#98a2c2; --mk-t3:#5e6788;
  --mk-acc:#4d8bff; --mk-acc2:#82b4ff; --mk-ink:#a9c9ff;
  --mk-grad:linear-gradient(135deg,#3b6dff,#5b8cff 55%,#74b6ff); --mk-glow:rgba(77,139,255,.45);
  --mk-mono:ui-monospace,"JetBrains Mono",Menlo,Consolas,monospace;
  position:fixed; inset:0; z-index:50; overflow-y:auto; overflow-x:hidden;
  display:block; grid-template-columns:none;
  background:var(--mk-bg); color:var(--mk-text);
  font-family:"YekanBakhFaNum","YekanBakh","Vazirmatn",system-ui,sans-serif; line-height:1.7;
}
.site-landing a{color:inherit;text-decoration:none}
.mk-wrap{max-width:1200px;margin:0 auto;padding:0 26px}
/* NAV */
.mk-nav{position:sticky;top:0;z-index:40;backdrop-filter:blur(16px);background:linear-gradient(180deg,rgba(5,7,14,.85),rgba(5,7,14,.4));border-bottom:1px solid rgba(150,178,255,.06)}
.mk-nav-in{display:flex;align-items:center;justify-content:space-between;height:66px}
.mk-brand{display:flex;align-items:center;gap:10px;font-size:1.12rem;font-weight:800}
.mk-brand b{color:var(--mk-acc2)}
.mk-mark{width:32px;height:32px;display:grid;place-items:center;color:#fff;background:var(--mk-grad);border-radius:9px;box-shadow:0 6px 18px var(--mk-glow)}
.mk-links{display:flex;gap:30px}
.mk-links a{color:var(--mk-t2);font-size:.92rem;font-weight:600;transition:.16s}
.mk-links a:hover{color:var(--mk-text)}
.mk-right{display:flex;align-items:center;gap:14px}
.mk-lang .lang{color:var(--mk-t2)}
.mk-btn{font-family:inherit;font-weight:700;font-size:.92rem;padding:10px 18px;border-radius:11px;border:1px solid var(--mk-border);background:var(--mk-surface2);color:var(--mk-text);cursor:pointer;transition:.18s;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.mk-btn:hover{border-color:var(--mk-acc);background:var(--mk-surface)}
.mk-btn.primary{background:var(--mk-grad);border:1px solid transparent;color:#fff;box-shadow:0 8px 22px var(--mk-glow)}
.mk-btn.primary:hover{filter:brightness(1.08);transform:translateY(-1px)}
.mk-btn.lg{padding:13px 24px;font-size:1rem}
@media(max-width:860px){.mk-links{display:none}}
/* HERO */
.mk-hero{position:relative;overflow:hidden;isolation:isolate;min-height:88vh;display:flex;align-items:center}
@media(max-width:920px){.mk-hero{min-height:auto;padding:54px 0 64px}}
.mk-hero-media{position:absolute;inset:0;z-index:0}
.mk-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0;background:#070b18}
.mk-hero-fx{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transform:translate(var(--wire-tx,0),var(--wire-ty,0)) scale(var(--wire-sx,1),var(--wire-sy,1));z-index:1;pointer-events:none;mix-blend-mode:plus-lighter;
  --mx:50%;--my:50%;--r:190px;--wire-op:1;--wire-tx:0;--wire-ty:0;--wire-sx:1;--wire-sy:1;opacity:0;transition:opacity .28s ease;
  -webkit-mask-image:radial-gradient(circle var(--r) at var(--mx) var(--my),#000 0%,#000 42%,transparent 72%);
          mask-image:radial-gradient(circle var(--r) at var(--mx) var(--my),#000 0%,#000 42%,transparent 72%)}
/* فقط دستگاه‌هایی که موس/اشاره‌گرِ دقیق دارند: نورافکن زیرِ موس ظاهر می‌شود */
@media(hover:hover) and (pointer:fine){.mk-hero.fx-on .mk-hero-fx{opacity:var(--wire-op,1)}}
/* گوشی/تبلتِ بدون موس: افکتِ شطرنجی کاملاً غیرفعال */
@media(hover:none),(pointer:coarse){.mk-hero-fx{display:none}}
/* خاموش از پنلِ ادمین */
.mk-hero.wire-off .mk-hero-fx{display:none!important}
[dir=rtl] .mk-hero-media{transform:scaleX(-1)}
.mk-hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to right,transparent 26%,rgba(5,7,14,.5) 56%,rgba(5,7,14,.93) 100%),linear-gradient(180deg,rgba(5,7,14,.6) 0%,transparent 22%,transparent 70%,rgba(5,7,14,.5) 86%,var(--mk-bg) 99%)}
[dir=ltr] .mk-hero-scrim{background:linear-gradient(to left,transparent 26%,rgba(5,7,14,.5) 56%,rgba(5,7,14,.93) 100%),linear-gradient(180deg,rgba(5,7,14,.6) 0%,transparent 22%,transparent 70%,rgba(5,7,14,.5) 86%,var(--mk-bg) 99%)}
@media(max-width:920px){.mk-hero-scrim{background:linear-gradient(180deg,rgba(5,7,14,.82),rgba(5,7,14,.6) 50%,var(--mk-bg))}}
.mk-hero-in{position:relative;z-index:2;width:100%}
.mk-hero-text{max-width:560px}
.mk-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.78rem;font-weight:800;letter-spacing:2px;color:var(--mk-ink);margin-bottom:22px}
.mk-eyebrow .dot{width:5px;height:5px;border-radius:50%;background:var(--mk-acc);box-shadow:0 0 10px var(--mk-acc)}
.mk-hero h1{font-size:clamp(2.4rem,5.2vw,4.2rem);font-weight:900;line-height:1.06;letter-spacing:-1px;margin-bottom:20px;text-shadow:0 2px 30px rgba(2,6,20,.6)}
.mk-hero h1 .grad{background:var(--mk-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.mk-hero-sub{color:var(--mk-t2);font-size:1.1rem;max-width:48ch;margin-bottom:30px}
.mk-hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:40px}
.mk-stats{display:flex;gap:34px;flex-wrap:wrap}
.mk-stat .num{font-family:var(--mk-mono);font-size:1.45rem;font-weight:800}
/* اعدادِ آمار: فونتِ جدید Black — فارسی در RTL، لاتین در انگلیسی */
@font-face{font-family:"YekanBakhFaNumPure";font-weight:900;font-display:swap;src:url("/landing-assets/YekanBakhFaNum-900.woff2") format("woff2")}
.mk-stat .numv{font-family:"YekanBakhFaNumPure","YekanBakhFaNum",sans-serif;font-weight:900}
[dir=ltr] .mk-stat .numv{font-family:"YekanBakh",sans-serif;font-weight:900}
.mk-stat .num.fmt{font-family:var(--mk-mono)}
.mk-stat .unit{font-size:.52em;font-weight:700;color:var(--mk-t3);margin-inline-start:.12em}
/* بخشِ خاموش‌شده از پنل ادمین: کارت قفل + بَجِ پیام */
.hero-card.section-off{opacity:.5;filter:grayscale(.45);cursor:not-allowed}
.hero-card.section-off .hero-go{visibility:hidden}
.hero-card.section-off:hover{transform:none}
.section-off-badge{position:absolute;top:14px;inset-inline-start:14px;z-index:6;background:rgba(10,14,26,.86);border:1px solid rgba(150,178,255,.28);color:#dbe4fb;font-size:.74rem;font-weight:700;padding:5px 11px;border-radius:999px;backdrop-filter:blur(6px);pointer-events:none}
.mk-stat .num.g{background:var(--mk-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.mk-stat .lbl{font-size:.76rem;color:var(--mk-t3);margin-top:2px}

/* ============================================================
   هیروِ موبایل — ویدیوی کامل در قابِ ۱۶:۹، متن زیرِ آن
   ============================================================ */
@media(max-width:680px){
  .mk-wrap{padding:0 18px}
  .mk-nav-in{height:58px}
  .mk-nav{background:linear-gradient(180deg,rgba(5,7,14,.94),rgba(5,7,14,.55))}

  .mk-hero{min-height:auto;padding:16px 18px 34px;display:flex;flex-direction:column;overflow:visible}
  .mk-hero-scrim{display:none}
  .mk-hero-in{order:2;display:block;padding:0;max-width:100%;margin-top:24px}
  .mk-hero-text{width:100%;max-width:100%;padding:0}

  /* ویدیو + افکت: کلِ فریم دیده می‌شود (قابِ ۱۶:۹)، با گلوِ نرمِ آبی */
  .mk-hero-media{position:relative;inset:auto;order:1;width:100%;aspect-ratio:16/9;overflow:hidden;
    border-radius:20px;border:1px solid rgba(150,178,255,.2);
    box-shadow:0 20px 56px rgba(28,52,120,.45), 0 0 60px rgba(59,109,255,.14), inset 0 1px 0 rgba(255,255,255,.08)}
  .mk-hero-media .mk-hero-bg{position:absolute;inset:0;height:100%;border:0;border-radius:0;box-shadow:none}

  .mk-eyebrow{margin-bottom:13px;font-size:.66rem;letter-spacing:1.8px}
  .mk-hero h1{font-size:clamp(2.3rem,9.5vw,3.3rem);line-height:1.05;letter-spacing:-1.2px;margin-bottom:14px;text-shadow:none}
  .mk-hero-sub{font-size:1rem;line-height:1.62;margin-bottom:22px;max-width:40ch;color:var(--mk-t2)}
  .mk-hero-cta{flex-direction:column;gap:10px;margin-bottom:24px}
  .mk-hero-cta .mk-btn{width:100%;justify-content:center;padding:15px;font-size:1.02rem;border-radius:15px}
  .mk-stats{gap:8px;justify-content:space-between;padding-top:18px;border-top:1px solid rgba(150,178,255,.14)}
  .mk-stat{flex:1 1 0;min-width:0;text-align:center}
  .mk-stat .num{font-size:1.24rem;white-space:nowrap}
  /* برچسب‌های فارسیِ بلند باید بشکنند تا سرریزِ افقی ندهند (SE/۳۷۵ و باریک‌تر) */
  .mk-stat .lbl{font-size:.64rem;margin-top:4px;white-space:normal;line-height:1.3;word-break:keep-all}
}
@media(max-width:420px){
  .mk-wrap{padding:0 15px}
  .mk-right{gap:9px}
  .mk-btn{padding:9px 14px}
  .mk-stats{gap:6px}
  .mk-stat .num{font-size:1.12rem}
  .mk-stat .lbl{font-size:.6rem}
}
@media(max-width:360px){
  .mk-hero h1{font-size:2.05rem}
  .mk-eyebrow{font-size:.62rem;letter-spacing:1.2px}
  .mk-stat .num{font-size:1.02rem}
  .mk-stat .lbl{font-size:.56rem}
  .mk-btn{padding:8px 12px;font-size:.86rem}
}
/* STRIP */
.mk-strip{border-top:1px solid rgba(150,178,255,.06);border-bottom:1px solid rgba(150,178,255,.06);background:var(--mk-bg2)}
.mk-strip-in{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;padding:20px 0;color:var(--mk-t3);font-size:.86rem}
.mk-strip-in .lead{font-weight:700;letter-spacing:1px;font-size:.72rem;margin-inline-end:8px}
.tchip{color:var(--mk-t2);font-weight:600}
.tdiv{width:1px;height:16px;background:var(--mk-border)}
/* SECTIONS */
.mk-section{padding:80px 0}
.mk-sec-title{text-align:center;margin-bottom:42px}
.mk-sec-title .eb{color:var(--mk-ink);font-size:.74rem;font-weight:800;letter-spacing:3px;margin-bottom:12px}
.mk-sec-title h2{font-size:clamp(1.7rem,3.2vw,2.5rem);font-weight:900;letter-spacing:-.5px}
@media(max-width:680px){.mk-section{padding:56px 0}.mk-sec-title{margin-bottom:30px}}
/* TWO TOOLS */
.mk-tools-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:680px){.mk-tools-grid{grid-template-columns:1fr}}
.mk-tool{text-align:start;background:var(--mk-glass);backdrop-filter:blur(16px);border:1px solid var(--mk-gborder);border-radius:var(--mk-rl,22px);padding:30px 26px;cursor:pointer;transition:transform .22s cubic-bezier(.16,1,.3,1),border-color .22s,box-shadow .22s;color:var(--mk-text);font-family:inherit;position:relative;overflow:hidden}
.mk-tool::before{content:"";position:absolute;top:0;inset-inline:0;height:1px;background:linear-gradient(90deg,transparent,var(--mk-ghi),transparent)}
.mk-tool:hover{transform:translateY(-5px);border-color:rgba(77,139,255,.45);box-shadow:0 22px 50px rgba(2,6,20,.55)}
.mk-tool-ic{width:58px;height:58px;border-radius:15px;display:grid;place-items:center;font-size:28px;margin-bottom:16px}
.mk-tool-img .mk-tool-ic{background:linear-gradient(135deg,#ffe07a,#ffb02e)}
.mk-tool-3d .mk-tool-ic{background:linear-gradient(135deg,#3b6dff,#74b6ff);color:#fff}
.mk-tool h3{font-size:1.3rem;font-weight:800;margin-bottom:8px}
.mk-tool p{color:var(--mk-t2);font-size:.94rem;margin-bottom:14px}
.mk-tool-go{color:var(--mk-acc2);font-weight:700;font-size:.9rem}
/* FEATURES */
.mk-feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:980px){.mk-feat-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.mk-feat-grid{grid-template-columns:1fr}}
.mk-fcard{position:relative;background:var(--mk-glass);backdrop-filter:blur(16px);border:1px solid var(--mk-gborder);border-radius:20px;padding:24px 20px;overflow:hidden;transition:transform .22s,border-color .22s,box-shadow .22s}
.mk-fcard::before{content:"";position:absolute;top:0;inset-inline:0;height:1px;background:linear-gradient(90deg,transparent,var(--mk-ghi),transparent)}
.mk-fcard:hover{transform:translateY(-5px);border-color:rgba(77,139,255,.45);box-shadow:0 22px 50px rgba(2,6,20,.55)}
.mk-ftile{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:22px;background:rgba(77,139,255,.12);border:1px solid rgba(77,139,255,.25);margin-bottom:16px}
.mk-fcard h3{font-size:1.12rem;font-weight:800;margin-bottom:8px}
.mk-fcard p{color:var(--mk-t2);font-size:.9rem}
/* WHY BAND */
.mk-band{background:var(--mk-glass);backdrop-filter:blur(16px);border:1px solid var(--mk-gborder);border-radius:26px;padding:50px 28px;box-shadow:0 1px 0 var(--mk-ghi) inset}
.mk-band-eb{text-align:center;color:var(--mk-ink);font-size:.76rem;font-weight:800;letter-spacing:3px;margin-bottom:40px}
.mk-nodes{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:760px){.mk-nodes{grid-template-columns:1fr 1fr;gap:32px}}
.mk-node{text-align:center}
.mk-node .ic{width:64px;height:64px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;font-size:26px;background:radial-gradient(circle at 50% 35%,rgba(77,139,255,.2),var(--mk-surface));border:1px solid rgba(130,180,255,.3);box-shadow:0 0 28px rgba(77,139,255,.3)}
.mk-node h4{font-size:1.02rem;font-weight:800;margin-bottom:6px}
.mk-node p{color:var(--mk-t3);font-size:.83rem;max-width:24ch;margin:0 auto}
/* بندِ «چرا ما» روی موبایل: پدینگِ جمع‌وجورتر تا خفه نشود */
@media(max-width:560px){
  .mk-band{padding:34px 18px;border-radius:20px}
  .mk-band-eb{margin-bottom:26px}
  .mk-nodes{gap:26px 14px}
  .mk-node .ic{width:56px;height:56px;font-size:23px;margin-bottom:12px}
}
/* CTA + FOOT */
.mk-cta{text-align:center;padding:86px 0}
@media(max-width:680px){.mk-cta{padding:56px 0}.mk-cta p{font-size:.98rem}.mk-cta .mk-btn{width:100%;max-width:340px;justify-content:center}}
.mk-cta h2{font-size:clamp(1.9rem,4vw,2.9rem);font-weight:900;margin-bottom:14px}
.mk-cta h2 .grad{background:var(--mk-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.mk-cta p{color:var(--mk-t2);margin-bottom:28px;font-size:1.04rem}
.mk-foot{border-top:1px solid rgba(150,178,255,.06);padding:28px 0;color:var(--mk-t3);font-size:.86rem}
.mk-foot-in{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}

/* ===== مودالِ ورودِ گلسی (هماهنگ با لندینگ) ===== */
#authModal.modal-overlay{backdrop-filter:blur(10px);background:rgba(4,6,14,.62)}
#authModal .modal.auth-modal{
  background:linear-gradient(180deg,rgba(20,27,46,.82),rgba(13,17,28,.9));
  backdrop-filter:blur(24px);
  border:1px solid rgba(150,178,255,.16);
  box-shadow:0 30px 90px rgba(2,6,20,.72), 0 1px 0 rgba(180,205,255,.18) inset;
}
#authModal .modal.auth-modal::before{content:"";position:absolute;top:0;inset-inline:0;height:1px;background:linear-gradient(90deg,transparent,rgba(180,205,255,.4),transparent)}
#authModal .modal-brand .brand-mark{background:linear-gradient(135deg,#3b6dff,#74b6ff);box-shadow:0 8px 22px rgba(77,139,255,.45)}
#authModal .btn.primary{background:linear-gradient(135deg,#3b6dff,#5b8cff 55%,#74b6ff);border-color:transparent;box-shadow:0 8px 22px rgba(77,139,255,.4)}

/* ===== صفحه‌ی انتخابِ بخش (هماهنگ با لندینگِ آبی-گلسی) ===== */
#modeChooser{background:radial-gradient(60% 50% at 80% 0%,rgba(77,139,255,.16),transparent 60%),radial-gradient(50% 45% at 5% 105%,rgba(52,224,216,.08),transparent 55%),#05070e;backdrop-filter:blur(6px)}
#modeChooser .mc-card{background:rgba(16,22,38,.55);backdrop-filter:blur(18px);border:1px solid rgba(150,178,255,.14);border-radius:22px;overflow:visible;position:relative}
#modeChooser .mc-card::before{content:"";position:absolute;top:0;inset-inline:0;height:1px;background:linear-gradient(90deg,transparent,rgba(180,205,255,.3),transparent)}
#modeChooser .mc-card:hover{transform:translateY(-5px);border-color:rgba(77,139,255,.5);box-shadow:0 24px 60px rgba(2,6,20,.6)}
#modeChooser .mc-ic-3d{background:linear-gradient(135deg,#3b6dff,#74b6ff)}

/* ===================== کارت‌های بخش به سبکِ هیرو (موز/مکعبِ نئونی) ===================== */
.hero-card{
  position:relative; overflow:visible; cursor:pointer; font-family:inherit;
  color:var(--mk-text,#eef2fc); text-align:start;
  display:flex; align-items:center;
  min-height:208px; padding:24px 38px; border-radius:24px;
  background:linear-gradient(180deg,rgba(20,27,46,.55),rgba(13,17,28,.66));
  border:1px solid rgba(150,178,255,.14);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  transition:transform .22s cubic-bezier(.16,1,.3,1),border-color .22s,box-shadow .22s;
}
.hero-card::before{content:"";position:absolute;top:0;inset-inline:0;height:1px;background:linear-gradient(90deg,transparent,rgba(180,205,255,.32),transparent);z-index:4}
.hero-card:hover{transform:translateY(-5px);border-color:rgba(77,139,255,.5);box-shadow:0 26px 64px rgba(2,6,20,.62)}
/* هاله‌ی نوری پشتِ تصویر (سمتِ تصویر) */
.hero-card::after{content:"";position:absolute;inset-block:-10%;inset-inline-end:0;width:52%;z-index:0;pointer-events:none;
  background:radial-gradient(60% 60% at 50% 50%,var(--hero-glow,rgba(77,139,255,.16)),transparent 70%)}
.hc-img{ --hero-glow:rgba(255,176,46,.08) }
.hc-3d{ --hero-glow:rgba(77,139,255,.22) }
/* تصویر — سمتِ چپ (در RTL)، از بالا و پایینِ کادر بیرون می‌زند */
.hero-art{position:absolute;inset-block:0;inset-inline-end:0;width:50%;display:grid;place-items:center;pointer-events:none;z-index:1}
.hero-art img{max-width:100%;max-height:138%;width:auto;height:auto;object-fit:contain;
  filter:drop-shadow(0 26px 48px rgba(0,0,0,.5));transition:transform .45s cubic-bezier(.16,1,.3,1);
  -webkit-mask-image:linear-gradient(to top,transparent 0,#000 13%),linear-gradient(to right,transparent 0,#000 16%);
  -webkit-mask-composite:source-in;-webkit-mask-repeat:no-repeat;
  mask-image:linear-gradient(to top,transparent 0,#000 13%),linear-gradient(to right,transparent 0,#000 16%);
  mask-composite:intersect;mask-repeat:no-repeat}
.hc-img .hero-art img{max-height:110%;transform:translateY(-14%) rotate(-6deg)}
.hc-img:hover .hero-art img{transform:translateY(-18%) rotate(-6deg) scale(1.05)}
.hc-3d:hover  .hero-art img{transform:translateY(-6px) scale(1.05)}
/* متن — سمتِ راست (در RTL) */
.hero-body{position:relative;z-index:3;display:flex;flex-direction:column;gap:8px;max-width:50%;margin-inline-end:auto}
.hero-ic{width:60px;height:60px;border-radius:16px;display:grid;place-items:center;font-size:29px;margin-bottom:8px;color:#fff;box-shadow:0 10px 26px rgba(0,0,0,.4)}
.hc-ic-img{background:linear-gradient(135deg,#ffe07a,#ffb02e)}
.hc-ic-3d{background:linear-gradient(135deg,#3b6dff,#74b6ff)}
.hero-h{font-size:1.6rem;font-weight:900;letter-spacing:-.3px}
.hero-p{color:var(--mk-t2,#98a2c2);font-size:.95rem;line-height:1.7}
.hero-go{color:var(--mk-acc2,#82b4ff);font-weight:800;font-size:1rem;margin-top:6px}
@media(max-width:640px){
  .hero-card{min-height:210px;padding:24px 22px}
  .hero-art{width:46%}
  .hero-body{max-width:54%}
  .hero-h{font-size:1.3rem}
  .hero-ic{width:50px;height:50px;font-size:24px}
}

/* دو ستونه + فضای بالا برای بیرون‌زدنِ تصویر */
.mk-tools-grid{grid-template-columns:1fr 1fr;gap:22px;max-width:1180px;margin:60px auto 0}
#modeChooser .mc-inner{max-width:1080px}
#modeChooser .mc-cards{grid-template-columns:1fr 1fr;gap:22px;margin-top:60px}
@media(max-width:760px){
  .mk-tools-grid,#modeChooser .mc-cards{grid-template-columns:1fr;margin-top:48px}
}

/* ============================================================
   انتخابِ کتگوریِ نانو بنانا
   ============================================================ */
.img-cats{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:var(--bg,#0e0e15);
  background-image:radial-gradient(60% 50% at 80% 0%,rgba(77,139,255,.16),transparent 60%),radial-gradient(50% 45% at 5% 105%,rgba(52,224,216,.08),transparent 55%);padding:24px}
.ic-inner{width:100%;max-width:1080px;text-align:center;position:relative}
.ic-back{position:absolute;inset-inline-start:0;top:-6px;background:rgba(16,22,38,.55);border:1px solid rgba(150,178,255,.16);color:var(--text-2);
  border-radius:12px;padding:8px 14px;font:inherit;cursor:pointer;transition:border-color .15s,color .15s}
.ic-back:hover{border-color:rgba(77,139,255,.5);color:var(--text)}
.ic-title{font-size:2rem;margin:0 0 6px}
.ic-sub{color:var(--text-2);margin:0 0 40px}
.ic-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ic-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:start;
  padding:28px 24px;min-height:200px;border-radius:22px;border:1px solid rgba(150,178,255,.14);
  background:rgba(16,22,38,.55);backdrop-filter:blur(18px);cursor:pointer;color:var(--text);
  transition:transform .15s,border-color .15s,box-shadow .15s;overflow:hidden}
.ic-card::before{content:"";position:absolute;top:0;inset-inline:0;height:1px;background:linear-gradient(90deg,transparent,rgba(180,205,255,.3),transparent)}
.ic-card:hover:not([disabled]){transform:translateY(-5px);border-color:rgba(77,139,255,.5);box-shadow:0 24px 60px rgba(2,6,20,.6)}
.ic-ic{font-size:2.4rem;line-height:1}
.ic-h{font-size:1.35rem;font-weight:900;letter-spacing:-.3px}
.ic-p{color:var(--mk-t2,#98a2c2);font-size:.95rem;line-height:1.7}
.ic-go{color:var(--mk-acc2,#82b4ff);font-weight:800;font-size:1rem;margin-top:auto;padding-top:8px}
.ic-card.cat-off{opacity:.5;filter:grayscale(.4);cursor:not-allowed}
.ic-badge{position:absolute;inset-inline-end:14px;top:14px;background:rgba(77,139,255,.16);color:#82b4ff;
  border:1px solid rgba(77,139,255,.35);border-radius:999px;padding:3px 10px;font-size:.72rem;font-weight:800}
@media(max-width:860px){.ic-cards{grid-template-columns:1fr}}

/* ============================================================
   کتگوریِ «کانسپت ۲بعدی → ۳بعدی» — گالری‌محور + کامپوزرِ وسط‌پایین (سبکِ Higgsfield)
   ============================================================ */
#imageStudio.is-cat-concept3d .is-feed,
#imageStudio.is-cat-concept3d .is-bar{display:none!important}
.c3d{position:absolute;inset:0;z-index:2;}
.c3d[hidden]{display:none;}

/* ── گالریِ خروجی‌ها (بخشِ اصلی، تمام‌صفحه) ── */
.c3d-gallery{position:absolute;inset:0;overflow-y:auto;padding:22px 20px 150px;}
.c3d-renders-grid{column-gap:14px;columns:4 240px;}
.c3d-renders-grid:empty{display:none;}
.c3d-renders-grid .is-hist-item{break-inside:avoid;margin-bottom:14px;}
.c3d-empty{position:absolute;inset:0 0 130px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  color:var(--text-3);text-align:center;padding:24px;pointer-events:none;}
.c3d-empty[hidden]{display:none;}
.c3d-empty-ic{display:grid;place-items:center;width:70px;height:70px;border-radius:20px;color:var(--accent-2,#82b4ff);
  background:rgba(59,109,255,.1);border:1px solid var(--glass-border);}
.c3d-empty-t{font-size:.98rem;max-width:32ch;line-height:1.7;}

/* ── پنلِ راهنمای شیشه‌ای (قابلِ جابه‌جایی) ── */
.c3d-guide{position:absolute;top:18px;inset-inline-start:18px;z-index:8;width:min(300px,78vw);
  border-radius:18px;overflow:hidden;background:var(--glass-2);border:1px solid var(--glass-border);
  -webkit-backdrop-filter:blur(22px) saturate(1.2);backdrop-filter:blur(22px) saturate(1.2);
  box-shadow:inset 0 1px 0 var(--glass-hi),0 18px 50px rgba(0,0,0,.5);}
.c3d-guide[hidden]{display:none;}
.c3d-guide-head{display:flex;align-items:center;gap:8px;padding:10px 12px;cursor:grab;
  border-bottom:1px solid var(--glass-border);background:rgba(255,255,255,.03);user-select:none;touch-action:none;}
.c3d-guide-head:active{cursor:grabbing;}
.c3d-guide-grip{display:grid;place-items:center;color:var(--text-3);flex:0 0 auto;}
.c3d-guide-title{font-size:.82rem;font-weight:800;color:var(--text);flex:1 1 auto;}
.c3d-guide-x{flex:0 0 auto;width:22px;height:22px;border-radius:7px;border:none;background:transparent;color:var(--text-2);
  cursor:pointer;font-size:16px;line-height:1;display:grid;place-items:center;transition:.15s;}
.c3d-guide-x:hover{background:rgba(255,255,255,.08);color:var(--text);}
.c3d-guide-steps{margin:0;padding:14px 14px 16px;list-style:none;counter-reset:c3dstep;display:flex;flex-direction:column;gap:12px;}
.c3d-guide-steps li{position:relative;counter-increment:c3dstep;padding-inline-start:34px;font-size:.86rem;line-height:1.7;color:var(--text-2);}
.c3d-guide-steps li::before{content:counter(c3dstep);position:absolute;inset-inline-start:0;top:0;width:24px;height:24px;border-radius:8px;
  display:grid;place-items:center;font-size:.78rem;font-weight:800;color:#cfe0ff;
  background:rgba(59,109,255,.16);border:1px solid rgba(59,109,255,.34);}

/* ── کامپوزرِ شناورِ وسط‌پایین ── */
.c3d-bar{position:absolute;z-index:6;inset-inline:0;bottom:22px;margin-inline:auto;width:min(860px,calc(100% - 40px));
  display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:22px;
  background:var(--glass-2);border:1px solid var(--glass-border);
  -webkit-backdrop-filter:blur(22px) saturate(1.2);backdrop-filter:blur(22px) saturate(1.2);
  box-shadow:inset 0 1px 0 var(--glass-hi),0 20px 54px rgba(0,0,0,.55);}
/* تایلِ آپلود/پیش‌نمایش — پیش‌نمایش کامل و بدونِ کراپ (contain) */
.c3d-up{position:relative;flex:0 0 auto;width:92px;height:92px;border-radius:15px;cursor:pointer;padding:0;overflow:hidden;
  border:1.5px dashed rgba(150,178,255,.34);background:rgba(12,16,28,.55);color:var(--accent-2,#82b4ff);
  transition:border-color .16s,background .16s,box-shadow .16s,width .18s;font-family:inherit;}
.c3d-up:hover,.c3d-up.dragover{border-color:var(--accent,#3b6dff);background:rgba(16,22,38,.65);box-shadow:0 8px 22px rgba(2,6,20,.4);}
.c3d-up.dragover{border-style:solid;}
.c3d-up.has-img{width:auto;min-width:92px;max-width:200px;border-style:solid;border-color:var(--glass-border);background:#05070e;}
.c3d-up-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%;height:100%;pointer-events:none;}
.c3d-up-t{font-size:.72rem;font-weight:700;}
.c3d-up-preview{position:absolute;inset:0;display:grid;place-items:center;}
.c3d-up-preview[hidden]{display:none;}
.c3d-up-preview img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;}
.c3d-up-del{position:absolute;top:4px;inset-inline-end:4px;width:22px;height:22px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;font-size:14px;line-height:1;color:#fff;background:rgba(8,11,20,.82);
  border:1px solid var(--glass-border);transition:.15s;}
.c3d-up-del:hover{background:#e5484d;border-color:#e5484d;}
/* نسبت‌ها */
.c3d-ratios{flex:1 1 auto;min-width:0;display:flex;flex-wrap:wrap;gap:7px;justify-content:center;}
.c3d-ratio{display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border-radius:12px;
  border:1px solid var(--glass-border);background:rgba(8,11,20,.4);color:var(--text-2);cursor:pointer;font-family:inherit;transition:.15s;}
.c3d-ratio:hover{border-color:var(--accent-2);color:var(--text);}
.c3d-ratio.active{border-color:var(--accent);color:var(--text);background:linear-gradient(180deg,rgba(59,109,255,.22),rgba(59,109,255,.07));box-shadow:0 0 0 1px rgba(59,109,255,.3);}
.c3d-ratio span{font-size:.74rem;font-weight:700;}
.c3d-ratio .ratio-box{border:2px solid currentColor;border-radius:2px;opacity:.7;}
.c3d-ratio.active .ratio-box{opacity:1;background:rgba(59,109,255,.26);}
.ratio-box.r-auto{width:18px;height:18px;border-style:dashed;background:transparent!important;}
/* دکمه‌ی ساخت */
.c3d-gen{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:9px;height:50px;padding:0 22px;border:none;border-radius:14px;cursor:pointer;
  font-family:inherit;font-size:1rem;font-weight:800;color:#fff;
  background:linear-gradient(135deg,#3b6dff,#5b8cff 50%,#74b6ff);
  box-shadow:0 10px 26px rgba(59,109,255,.42),inset 0 1px 0 rgba(255,255,255,.36);
  transition:transform .16s cubic-bezier(.16,1,.3,1),box-shadow .18s,filter .18s;}
.c3d-gen:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 16px 38px rgba(59,109,255,.55),inset 0 1px 0 rgba(255,255,255,.42);}
.c3d-gen:active:not(:disabled){transform:translateY(0);}
.c3d-gen:disabled{opacity:.55;cursor:default;filter:saturate(.7);}
.c3d-gen.is-busy{pointer-events:none;}
.c3d-gen.is-busy .c3d-gen-ic{animation:isspin .8s linear infinite;}
.c3d-gen-ic{display:grid;place-items:center;}
.c3d-cost{font-size:.8rem;font-weight:700;background:rgba(8,11,20,.26);padding:2px 9px;border-radius:999px;border:1px solid rgba(255,255,255,.22);}
.c3d-cost:empty{display:none;}

/* ── کارتِ «در حالِ ساخت» (بدونِ دکمه‌ی حذف) + کارتِ ناموفق ── */
.is-hist-item.gen{aspect-ratio:1;display:grid;place-items:center;border-radius:16px;overflow:hidden;
  border:1px solid var(--glass-border);
  background:linear-gradient(120deg,rgba(20,26,42,.55) 25%,rgba(48,68,120,.5) 45%,rgba(20,26,42,.55) 65%);
  background-size:220% 100%;animation:c3dShimmer 1.5s ease-in-out infinite;}
.gen-inner{display:flex;flex-direction:column;align-items:center;gap:12px;z-index:2;}
.gen-spin{width:34px;height:34px;border:3px solid rgba(150,178,255,.24);border-top-color:var(--accent-2,#82b4ff);border-radius:50%;animation:isspin .85s linear infinite;}
.gen-label{font-size:.86rem;font-weight:800;color:#cfe0ff;letter-spacing:.02em;}
.is-hist-item.failed{aspect-ratio:1;display:grid;place-items:center;border-radius:16px;color:#e5757a;font-size:1.6rem;
  border:1px solid rgba(229,72,77,.35);background:rgba(229,72,77,.08);}
@keyframes c3dShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* واکنش‌گرا */
@media(max-width:1100px){ .c3d-renders-grid{columns:3 200px;} }
@media(max-width:720px){
  .c3d-bar{
    flex-wrap:wrap; gap:10px; width:calc(100% - 16px); padding:10px; border-radius:20px;
    bottom:calc(10px + env(safe-area-inset-bottom, 0px));
  }
  /* ردیفِ اول: تایلِ آپلودِ جمع‌وجور + دکمه‌ی ساخت که بقیه‌ی عرض را پر می‌کند */
  .c3d-up{ order:1; width:52px; height:52px; border-radius:13px; }
  .c3d-up.has-img{ width:auto; min-width:52px; max-width:110px; }
  .c3d-up-t{ display:none; }               /* روی موبایل فقط آیکن (متن جا نمی‌شود) */
  .c3d-gen{ order:2; flex:1 1 auto; height:52px; font-size:.98rem; }
  /* ردیفِ دوم: نسبت‌ها در یک خطِ افقیِ قابلِ اسکرول (به‌جای دو ردیفِ ناهموار) */
  .c3d-ratios{
    order:3; flex:1 1 100%; flex-wrap:nowrap; justify-content:flex-start;
    overflow-x:auto; gap:8px; padding-bottom:2px;
    -webkit-overflow-scrolling:touch; scrollbar-width:none; scroll-snap-type:x proximity;
  }
  .c3d-ratios::-webkit-scrollbar{ display:none; }
  .c3d-ratio{ flex:0 0 auto; padding:9px 13px; scroll-snap-align:start; }
  .c3d-ratio span{ font-size:.78rem; }
  .c3d-guide{ width:min(260px,82vw); }
  .c3d-gallery{ padding:16px 14px 210px; }  /* فضای کافیِ پایین برای کامپوزرِ دوردیفه */
}
/* موبایلِ کوچک: کارت‌ها کمی بزرگ‌تر و خواناتر */
@media(max-width:430px){
  .c3d-gen{ padding:0 14px; }
  .c3d-cost{ font-size:.74rem; padding:2px 7px; }
}
@media(prefers-reduced-motion:reduce){ .is-hist-item.gen{animation:none;} }

/* ============================================================
   استودیوی تولید عکس — چیدمانِ فیدمحور (گالریِ تمام‌صفحه + نوارِ شناورِ پایین)
   IDها/کلاس‌های موردنیازِ JS حفظ شده‌اند.
   ============================================================ */
.image-studio.is-feedmode{ display:block; background:transparent; inset:60px 0 0 0; }
.is-amb{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(50% 40% at 18% -2%, rgba(59,109,255,.14), transparent 70%),
    radial-gradient(44% 48% at 102% 8%, rgba(52,224,216,.08), transparent 72%);}

/* فید: گالریِ مَسونری */
.is-feed{position:absolute;inset:0;z-index:1;overflow-y:auto;padding:22px 22px 132px;}
.is-history-grid{display:block;column-gap:14px;columns:4 250px;}
.is-history-grid .empty{position:absolute;inset:0 0 96px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  color:var(--text-3);font-size:1rem;text-align:center;pointer-events:none;}
.is-history-grid .empty::before{content:"";width:62px;height:62px;border-radius:18px;margin-bottom:6px;
  background:rgba(59,109,255,.1);border:1px solid var(--glass-border);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' fill='none' stroke='%2382b4ff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='22' height='20' rx='3'/%3E%3Ccircle cx='11' cy='12' r='2'/%3E%3Cpath d='M5 21l6-6 4 4 4-4 6 6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;}
.is-hist-item{position:relative;break-inside:avoid;margin-bottom:14px;border-radius:16px;overflow:hidden;cursor:pointer;
  border:1px solid var(--glass-border);background:rgba(8,11,20,.5);
  box-shadow:0 8px 24px rgba(0,0,0,.32);transition:transform .18s cubic-bezier(.16,1,.3,1), border-color .18s, box-shadow .18s;}
.is-hist-item img{display:block;width:100%;height:auto;}
.is-hist-item:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 16px 38px rgba(0,0,0,.5);}
.is-hist-item::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .18s;
  background:linear-gradient(0deg, rgba(5,7,14,.5), transparent 36%);}
.is-hist-item:hover::after{opacity:1;}
.is-hist-item.pending{break-inside:avoid;display:grid;place-items:center;aspect-ratio:1;color:var(--text-3);font-size:1.4rem;
  background:repeating-linear-gradient(135deg,rgba(20,26,42,.5) 0 14px,rgba(14,18,28,.5) 14px 28px);}
.is-hist-acts{position:absolute;top:8px;inset-inline-end:8px;display:flex;gap:6px;z-index:3;opacity:0;transition:opacity .15s;}
.is-hist-item:hover .is-hist-acts{opacity:1;}
.is-hist-act{width:30px;height:30px;border-radius:9px;border:1px solid var(--glass-border);background:rgba(8,11,20,.72);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#dbe4fb;cursor:pointer;display:grid;place-items:center;
  font-size:14px;line-height:1;text-decoration:none;transition:.15s;}
.is-hist-act:hover{background:var(--accent);color:#fff;border-color:var(--accent);}
.is-hist-del{position:static;width:30px;height:30px;}

/* لایت‌باکس */
.is-result{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:5vh 5vw;
  background:rgba(4,6,12,.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);}
.is-result[hidden]{display:none;}
.is-img{max-width:100%;max-height:90vh;object-fit:contain;border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.7);}
.is-lb-close{position:absolute;top:18px;inset-inline-end:18px;width:42px;height:42px;border-radius:50%;cursor:pointer;
  border:1px solid var(--glass-border);background:rgba(16,22,38,.7);color:#fff;display:grid;place-items:center;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:.16s;}
.is-lb-close:hover{background:rgba(40,52,86,.85);transform:rotate(90deg);}
.is-placeholder{display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--text-3);}
.is-ph-ic{display:grid;place-items:center;width:60px;height:60px;border-radius:18px;color:var(--accent-2);background:rgba(59,109,255,.1);border:1px solid var(--glass-border);}
.is-ph-t{color:var(--text);font-weight:700;}
.is-loading{display:flex;flex-direction:column;align-items:center;gap:14px;color:var(--text);}
.is-spin{width:46px;height:46px;border:3px solid rgba(150,178,255,.18);border-top-color:var(--accent);border-radius:50%;animation:isspin .9s linear infinite;}

/* نوارِ شناورِ پایین */
.is-bar{position:absolute;z-index:6;inset-inline:0;bottom:20px;margin-inline:auto;width:min(1080px,calc(100% - 40px));
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:20px;
  background:var(--glass-2);border:1px solid var(--glass-border);
  -webkit-backdrop-filter:blur(22px) saturate(1.2);backdrop-filter:blur(22px) saturate(1.2);
  box-shadow:inset 0 1px 0 var(--glass-hi), 0 18px 50px rgba(0,0,0,.5);}
.is-bar-add{flex:0 0 auto;width:42px;height:42px;border-radius:13px;cursor:pointer;display:grid;place-items:center;
  border:1px solid var(--glass-border);background:rgba(8,11,20,.5);color:var(--text-2);transition:.16s;}
.is-bar-add:hover{border-color:var(--accent);color:var(--text);background:rgba(59,109,255,.1);}
.is-srcthumb{position:relative;width:42px;height:42px;border-radius:12px;overflow:hidden;border:1px solid var(--glass-border);flex:0 0 auto;}
.is-srcthumb img{width:100%;height:100%;object-fit:cover;}
.is-srcdel{position:absolute;top:1px;inset-inline-end:1px;width:17px;height:17px;border-radius:50%;border:none;background:rgba(8,11,20,.85);color:#fff;cursor:pointer;font-size:12px;line-height:1;display:grid;place-items:center;}

.is-bar-prompt{flex:1 1 auto;min-width:120px;resize:none;height:42px;padding:10px 14px;border-radius:13px;
  border:1px solid transparent;background:rgba(8,11,20,.45);color:var(--text);font-family:inherit;font-size:.95rem;line-height:1.5;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:border-color .16s, box-shadow .16s, height .12s;}
.is-bar-prompt::placeholder{color:var(--text-3);}
.is-bar-prompt:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(59,109,255,.16);height:74px;white-space:pre-wrap;overflow:auto;}

.is-bar-ctrls{display:flex;align-items:center;gap:8px;flex:0 0 auto;}

/* ── کنترل‌های یک‌دستِ نوار (مدل/نسبت/کیفیت) ── */
.is-ctrl{position:relative;flex:0 0 auto;}
.is-ctrl-btn{display:flex;align-items:center;gap:8px;height:44px;padding:0 13px;border-radius:13px;cursor:pointer;
  border:1px solid var(--glass-border);background:rgba(8,11,20,.5);color:var(--text);font-family:inherit;font-size:.86rem;font-weight:600;
  transition:border-color .16s, background .16s;white-space:nowrap;}
.is-ctrl-btn:hover{border-color:var(--accent-2);}
.is-ctrl-btn.open,.is-ctrl-btn:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(59,109,255,.16);}
.is-ctrl-ic{display:grid;place-items:center;color:var(--accent-2);flex:0 0 auto;}
.is-ctrl-lbl{max-width:150px;overflow:hidden;text-overflow:ellipsis;}
.is-ctrl .is-caret{color:var(--text-2);flex:0 0 auto;}
.is-ctrl-btn .ratio-box{border:2px solid currentColor;border-radius:2px;opacity:.85;flex:0 0 auto;}

/* پاپ‌اور (یک‌دست برای هر سه) */
.is-pop{position:absolute;bottom:calc(100% + 16px);inset-inline-end:0;z-index:30;padding:10px;border-radius:15px;
  background:var(--glass-2);border:1px solid var(--glass-border);
  -webkit-backdrop-filter:blur(22px) saturate(1.2);backdrop-filter:blur(22px) saturate(1.2);
  box-shadow:inset 0 1px 0 var(--glass-hi), 0 16px 44px rgba(0,0,0,.55);
  animation:isPopIn .14s cubic-bezier(.16,1,.3,1);}
@keyframes isPopIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
.is-pop[hidden]{display:none;}
.is-pop-h{font-size:.7rem;font-weight:700;color:var(--text-2);margin-bottom:8px;padding-inline-start:3px;letter-spacing:.03em;opacity:.85;}
.is-pop-model{min-width:230px;}
.is-pop-sm{min-width:auto;}

/* لیستِ گزینه‌ها (مدل) */
.is-pop-col{display:flex;flex-direction:column;gap:3px;}
.is-opt{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;padding:9px 11px;border-radius:10px;cursor:pointer;
  border:1px solid transparent;background:transparent;color:var(--text);font-family:inherit;text-align:start;transition:background .14s, border-color .14s;}
.is-opt:hover{background:rgba(59,109,255,.1);}
.is-opt.active{background:linear-gradient(180deg,rgba(59,109,255,.2),rgba(59,109,255,.06));border-color:rgba(59,109,255,.4);}
.is-opt-n{font-size:.88rem;font-weight:700;}
.is-opt-d{font-size:.74rem;color:var(--text-3);font-weight:500;}
.is-opt.active .is-opt-d{color:var(--accent-2);}

/* گزینه‌های ردیفی (کیفیت) */
.is-pop-row{display:flex;gap:6px;}
.is-opt-sm{flex:1;justify-content:center;padding:8px 16px;border:1px solid var(--glass-border);}
.is-opt-sm .is-opt-n{font-size:.84rem;}

/* نسبت‌ها → شبکه‌ی ۳ستونه (جمع‌وجور) */
.is-ratios{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
#isRatioPop{min-width:212px;}
.is-ratio{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:8px 4px;min-width:0;border-radius:10px;
  border:1px solid var(--glass-border);background:rgba(8,11,20,.4);color:var(--text-2);cursor:pointer;font-family:inherit;transition:.16s;}
.is-ratio:hover:not(:disabled){border-color:var(--accent-2);color:var(--text);}
.is-ratio.active{border-color:var(--accent);color:var(--text);background:linear-gradient(180deg,rgba(59,109,255,.22),rgba(59,109,255,.07));box-shadow:0 0 0 1px rgba(59,109,255,.3);}
.is-ratio:disabled{opacity:.3;cursor:not-allowed;}
.is-ratio span{font-size:.72rem;font-weight:600;}
.ratio-box{display:block;border:2px solid currentColor;border-radius:3px;opacity:.7;}
.is-ratio.active .ratio-box{opacity:1;background:rgba(59,109,255,.26);}
.ratio-box.r-16-9{width:24px;height:14px;}.ratio-box.r-9-16{width:14px;height:24px;}
.ratio-box.r-1-1{width:19px;height:19px;}.ratio-box.r-4-3{width:22px;height:16px;}.ratio-box.r-3-4{width:16px;height:22px;}

/* دکمه‌ی ساخت */
.is-generate{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:9px;height:46px;padding:0 22px;border:none;border-radius:14px;cursor:pointer;
  font-family:inherit;font-size:.98rem;font-weight:800;color:#fff;
  background:linear-gradient(135deg,#3b6dff,#5b8cff 50%,#74b6ff);
  box-shadow:0 10px 26px rgba(59,109,255,.42), inset 0 1px 0 rgba(255,255,255,.36);
  transition:transform .16s cubic-bezier(.16,1,.3,1), box-shadow .18s, filter .18s;}
.is-generate:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 16px 38px rgba(59,109,255,.55), inset 0 1px 0 rgba(255,255,255,.42);}
.is-generate:active:not(:disabled){transform:translateY(0);}
.is-generate:disabled{opacity:.6;cursor:default;filter:saturate(.7);}
.is-generate.is-busy{pointer-events:none;}
.is-generate.is-busy .is-gen-ic{animation:isspin .8s linear infinite;}
.is-gen-ic{display:grid;place-items:center;}
.is-cost{font-size:.8rem;font-weight:700;background:rgba(8,11,20,.26);padding:2px 9px;border-radius:999px;border:1px solid rgba(255,255,255,.22);}
.is-cost:empty{display:none;}

@media(max-width:1100px){ .is-history-grid{columns:3 200px;} }
@media(max-width:760px){
  .is-feed{padding:14px 12px 150px;}
  .is-history-grid{columns:2 140px;column-gap:10px;}
  .is-bar{flex-wrap:wrap;bottom:12px;width:calc(100% - 20px);padding:10px;}
  .is-bar-prompt{order:-1;flex:1 1 100%;}
  .is-ctrl-lbl{max-width:96px;}
  .is-generate{flex:1 1 auto;}
}
@media (prefers-reduced-motion: reduce){
  .is-hist-item,.is-generate,.is-lb-close{transition:none;}
}

/* ============================================================
   پالایشِ موبایلِ بخش‌های لندینگ (ریتمِ عمودی، فاصله‌ها، فوتر)
   ============================================================ */
@media(max-width:680px){
  .mk-section{padding:52px 0}
  .mk-sec-title{margin-bottom:28px}
  .mk-sec-title .eb{font-size:.66rem;letter-spacing:2.4px;margin-bottom:9px}
  .mk-sec-title h2{font-size:clamp(1.7rem,7vw,2.1rem)}
  .mk-tools-grid{gap:16px}
  .mk-feat-grid{gap:13px}
  .mk-fcard{padding:20px 18px;border-radius:18px;display:flex;align-items:center;gap:16px;text-align:start}
  .mk-fcard .mk-ftile{margin:0;flex:0 0 auto}
  .mk-fcard h3{font-size:1.04rem;margin-bottom:3px}
  .mk-fcard p{font-size:.86rem;line-height:1.5}
  .mk-band{padding:32px 20px;border-radius:22px}
  .mk-band-eb{margin-bottom:26px;letter-spacing:2.4px}
  .mk-nodes{gap:28px 16px}
  .mk-node .ic{width:54px;height:54px;font-size:22px;margin-bottom:11px}
  .mk-foot{padding:24px 0 34px}
  .mk-foot-in{flex-direction:column;text-align:center;gap:12px}
}

/* ============================================================
   ریدیزاینِ موبایلِ استودیوی ۳بعدی + تاپ‌بار  (≤680px)
   ============================================================ */
@media(max-width:680px){
  /* — تاپ‌بار: سطرِ تمیزِ لوگو + اکشن‌ها — */
  .topbar{height:56px;padding:0 16px;gap:10px;background:linear-gradient(180deg,rgba(10,14,24,.96),rgba(10,14,24,.86));backdrop-filter:blur(14px);border-bottom:1px solid rgba(150,178,255,.1)}
  .brand{font-size:1.05rem}
  .brand-mark{width:30px;height:30px}

  /* سوییچِ بخش: از وسطِ شلوغ → نوارِ سگمنتیِ تمام‌عرضِ زیرِ تاپ‌بار */
  .section-tabs{position:fixed;top:56px;left:0;right:0;transform:none;z-index:29;
    display:flex;gap:6px;width:auto;border-radius:0;border:none;
    background:rgba(10,14,24,.92);backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(150,178,255,.1);padding:8px 16px}
  .sec-tab{flex:1;text-align:center;padding:10px 0;font-size:.9rem;font-weight:700;border-radius:12px;
    background:var(--surface-2);color:var(--text-2);border:1px solid var(--border-soft)}
  .sec-tab.active{background:linear-gradient(135deg,#3b6dff,#5b8cff);color:#fff;border-color:transparent;
    box-shadow:0 6px 18px rgba(59,109,255,.4)}

  /* محتوا را پایین‌ترِ نوارِ سگمنتی شروع کن (۵۶ تاپ‌بار + ~۵۲ سگمنت) */
  .app{padding-top:52px}
  .image-studio{top:108px}

  /* — لنگرگاهِ زبان/کریستال جمع‌وجور — */
  .lang-toggle{padding:2px}
  .lang-toggle .lang{padding:5px 10px;font-size:.74rem}
  .credit-pill{padding:6px 8px 6px 12px;font-size:.9rem;gap:5px}

  /* — پنلِ ساخت: ریتمِ تمیز، بدونِ فضای خالیِ مرده — */
  body[data-mtab="create"] .viewer-col{padding:18px 18px 0}
  .creator-title{font-size:1.45rem;margin-bottom:7px}
  .creator-sub{font-size:.9rem;line-height:1.6;margin-bottom:22px;max-width:34ch;margin-inline:auto}

  /* کارت‌های حالت: جمع‌وجورتر و خواناتر */
  .mode-cards{gap:11px;margin-bottom:16px}
  .mode-card{padding:15px 10px;border-radius:15px}
  .mode-card svg{width:26px;height:26px}
  .mode-card .mode-name{font-size:.9rem}
  .mode-card .mode-desc{font-size:.7rem;line-height:1.3}

  /* dropzone: کوتاه‌تر و دعوت‌کننده‌تر (نه یک مستطیلِ خالیِ غول‌پیکر) */
  body[data-mtab="create"] .big-dropzone{aspect-ratio:auto;height:200px;max-height:200px;border-radius:18px;
    border:2px dashed rgba(130,160,230,.3);background:radial-gradient(120% 90% at 50% 0%,rgba(59,109,255,.07),var(--surface-2))}
  .big-dropzone .drop-icon{margin-bottom:8px}
  .big-dropzone .drop-icon svg{width:30px;height:30px}
  .big-dropzone .dropzone-empty p{font-size:.96rem;font-weight:600}
  .big-dropzone .hint{font-size:.76rem}

  /* دکمه‌ی ادامه: لمسی و واضح */
  #singleContinue,#mvNext{margin-top:16px;padding:15px;font-size:1rem;border-radius:14px}
}

/* ============================================================
   ریدیزاینِ موبایلِ استودیوی تولیدِ عکس  (≤680px)
   ============================================================ */
@media(max-width:680px){
  /* تب‌بارِ پایین مخصوصِ استودیوی سه‌بعدی است؛ در استودیوی عکس مزاحم/هم‌پوشانِ کامپوزر می‌شود */
  body[data-studio="image"] .mobile-tabbar{display:none !important}

  /* استودیوی عکس درست زیرِ نوارِ سگمنتیِ بخش شروع شود */
  .image-studio.is-feedmode{inset:108px 0 0 0}

  /* دکمه‌ی پشتیبانی: گوشه‌ی بالا (کنارِ نوارِ بخش) — بالای استودیو تا دیده شود.
     نکته‌ی مهم: .image-studio دارای position:fixed و z-index:20 است و یک استکینگ‌کانتکست می‌سازد؛
     پس این دکمه باید z-index بالاتر از ۲۰ داشته باشد وگرنه پشتِ استودیو پنهان می‌ماند. */
  body[data-studio="image"] .support-fab{
    top:116px !important; bottom:auto !important;
    inset-inline-end:14px !important; width:48px; height:48px; z-index:41 !important;
  }

  /* کامپوزر: چیدمانِ سه‌ردیفه و تمیز — پرامپت / کنترل‌ها / دکمه‌ی ساخت */
  .is-bar{bottom:calc(14px + env(safe-area-inset-bottom,0px));width:calc(100% - 24px);padding:12px;gap:10px;border-radius:20px;
    box-shadow:0 16px 44px rgba(2,6,20,.6),0 0 0 1px rgba(150,178,255,.08)}
  .is-bar-prompt{order:-1;flex:1 1 100%;min-width:0}
  .is-bar-add{order:1}
  .is-bar-ctrls{order:2;flex:1 1 auto;justify-content:flex-start;gap:8px;flex-wrap:wrap}
  .is-bar-ctrls .is-ctrl-btn{padding:9px 11px}
  .is-generate{order:3;flex:1 1 100%;justify-content:center;padding:14px;font-size:1rem;border-radius:14px}

  /* فید: فضای کافیِ پایین تا محتوا پشتِ کامپوزر نرود + پیامِ خالیِ وسط‌چین */
  .is-feed{padding:16px 14px 230px}
  .is-history-grid .empty{position:absolute;inset:0 0 200px 0;display:flex;align-items:center;justify-content:center;flex-direction:column}
}

/* ============================================================
   افکت‌های لندینگ (الهام از پورتفولیوی موشن) — پری‌لودر/ریویل/کرسر
   ============================================================ */
/* ۱) اینترو پری‌لودر */
.intro-loader{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:var(--mk-bg,#05070e);
  transition:opacity .6s cubic-bezier(.16,1,.3,1), visibility .6s;}
.intro-loader.done{opacity:0;visibility:hidden;pointer-events:none;}
.intro-inner{width:min(78vw,320px);text-align:center;animation:introIn .6s cubic-bezier(.16,1,.3,1);}
@keyframes introIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.intro-brand{font-size:1.5rem;font-weight:800;letter-spacing:.16em;color:#eaf0ff;margin-bottom:26px;text-transform:uppercase;}
.intro-brand b{color:var(--accent,#4d8bff);}
.intro-bar{height:2px;width:100%;background:rgba(150,178,255,.16);border-radius:2px;overflow:hidden;}
.intro-bar-fill{display:block;height:100%;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--accent,#4d8bff),var(--accent-2,#82b4ff));
  box-shadow:0 0 14px rgba(77,139,255,.6);transition:width .25s cubic-bezier(.16,1,.3,1);}
.intro-meta{display:flex;justify-content:space-between;margin-top:12px;font-size:.68rem;letter-spacing:.2em;color:var(--text-3,#7d89a8);text-transform:uppercase;}

/* ۲) اسکرول‌ریویل */
@media (prefers-reduced-motion:no-preference){
  [data-reveal],[data-reveal-stagger]>*{opacity:0;transform:translateY(22px);
    transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);will-change:opacity,transform;}
  [data-reveal].reveal-in,[data-reveal-stagger].reveal-in>*{opacity:1;transform:none;}
}

/* ۳) کرسرِ سفارشی */
.mk-cursor,.mk-cursor-dot{position:fixed;top:0;left:0;z-index:9998;pointer-events:none;border-radius:50%;
  mix-blend-mode:difference;will-change:transform;opacity:0;
  transition:opacity .3s ease, width .22s cubic-bezier(.16,1,.3,1), height .22s cubic-bezier(.16,1,.3,1), background .22s ease;}
.mk-cursor{width:34px;height:34px;border:1.5px solid #fff;transform:translate(-50%,-50%);}
.mk-cursor-dot{width:6px;height:6px;background:#fff;transform:translate(-50%,-50%);}
.mk-cursor.is-hover{width:56px;height:56px;background:rgba(255,255,255,.14);border-color:transparent;}
body.mk-cursor-on .mk-cursor,body.mk-cursor-on .mk-cursor-dot{opacity:1;}
@media (pointer:fine){ body.mk-cursor-on, body.mk-cursor-on a, body.mk-cursor-on button{cursor:none;} }
@media (hover:none),(pointer:coarse){ .mk-cursor,.mk-cursor-dot{display:none!important;} }

/* ===== اعلانِ پیش‌نمایشِ پاسخِ پشتیبانی (بالای دکمه) ===== */
.support-toast{
  position:fixed; bottom:88px; inset-inline-end:22px; z-index:46; max-width:300px;
  display:flex; align-items:flex-start; gap:11px; padding:13px 15px; cursor:pointer; text-align:start;
  background:var(--glass-2); border:1px solid var(--glass-border); border-radius:16px;
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  box-shadow:inset 0 1px 0 var(--glass-hi), 0 16px 40px rgba(0,0,0,.5);
  font-family:inherit; color:var(--text); animation:stIn .32s cubic-bezier(.16,1,.3,1);
}
@keyframes stIn{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
.support-toast .st-ic{flex:0 0 auto;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;box-shadow:0 4px 12px var(--accent-glow)}
.support-toast .st-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.support-toast .st-body b{font-size:.86rem;font-weight:700}
.support-toast .st-text{font-size:.82rem;color:var(--text-2);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.support-toast:hover{border-color:var(--accent)}
@media(max-width:820px){
  .support-toast{ bottom:calc(140px + env(safe-area-inset-bottom,0px)) !important; inset-inline-end:16px !important; max-width:calc(100vw - 80px) }
}
body[data-studio="image"] .support-toast{ top:172px; bottom:auto !important; inset-inline-end:14px !important }

/* ============================================================
   لایه‌ی سیستمِ دیزاین — پرداختِ نهایی (دسترس‌پذیری، لمس، موشن، لودِ عکس)
   این لایه عمداً آخرِ فایل است تا بر قواعدِ قبلی غلبه کند.
   ============================================================ */

/* ── حلقه‌ی فوکوسِ سراسری و یکدست (کیبورد) ── */
:where(button, a, input, select, textarea, [role="button"], [tabindex]):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:inherit;
}

/* ── حالتِ فشرده‌شدنِ دکمه‌های اصلی (بازخوردِ لمسی/کلیکی) ── */
.c3d-gen:active:not(:disabled),
.ic-card:active:not([disabled]),
.mc-card:active,
.is-hist-act:active,
.c3d-ratio:active{ transform:scale(.985); }

/* ── لودِ نرمِ عکس‌های گالری: اسکلتِ شیمری (روی ::before) + fade/scale-in ── */
.is-hist-item::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(120deg,rgba(20,26,42,.55) 25%,rgba(40,54,92,.45) 45%,rgba(20,26,42,.55) 65%);
  background-size:220% 100%;
  animation:c3dShimmer 1.6s ease-in-out infinite;
  opacity:1; transition:opacity var(--dur-2) var(--ease);
}
.is-hist-item:has(img.ld)::before, .is-hist-item.gen::before, .is-hist-item.failed::before{ opacity:0; animation:none; }
.is-hist-item img{ position:relative; z-index:1; opacity:0; transform:scale(1.015); transition:opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease); }
.is-hist-item img.ld{ opacity:1; transform:none; }

/* ── ورودِ پلکانیِ کارت‌های گالری (فقط چند تای اول تا سنگین نشود) ── */
.is-history-grid .is-hist-item, .c3d-renders-grid .is-hist-item{ animation:igIn var(--dur-3) var(--ease) backwards; }
.is-history-grid .is-hist-item:nth-child(2), .c3d-renders-grid .is-hist-item:nth-child(2){ animation-delay:.05s; }
.is-history-grid .is-hist-item:nth-child(3), .c3d-renders-grid .is-hist-item:nth-child(3){ animation-delay:.10s; }
.is-history-grid .is-hist-item:nth-child(4), .c3d-renders-grid .is-hist-item:nth-child(4){ animation-delay:.15s; }
.is-history-grid .is-hist-item:nth-child(5), .c3d-renders-grid .is-hist-item:nth-child(5){ animation-delay:.20s; }
.is-history-grid .is-hist-item:nth-child(6), .c3d-renders-grid .is-hist-item:nth-child(6){ animation-delay:.25s; }
/* شیمرِ کارتِ «در حالِ ساخت» جدا و صریح می‌ماند */
.is-history-grid .is-hist-item.gen, .c3d-renders-grid .is-hist-item.gen{
  animation:c3dShimmer 1.5s ease-in-out infinite, igIn var(--dur-3) var(--ease) backwards;
}
@keyframes igIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* ── سلسله‌مراتبِ کتگوری‌ها: کارتِ فعال غالب، «به‌زودی»ها فرعی ── */
.ic-card:not(.cat-off){
  border-color:rgba(77,139,255,.34);
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(59,109,255,.14), transparent 62%),
    rgba(16,22,38,.6);
  box-shadow:0 14px 40px rgba(2,6,20,.45), inset 0 1px 0 var(--glass-hi);
}
.ic-card:not(.cat-off) .ic-h{ color:var(--text); }
.ic-card.cat-off{ opacity:.42; transform:scale(.97); }
.ic-card.cat-off .ic-ic{ filter:grayscale(1); }
.ic-p{ color:var(--text-2); }
.ic-go{ color:var(--accent-2); transition:transform var(--dur-2) var(--ease); }
.ic-card:hover:not([disabled]) .ic-go{ transform:translateX(-4px); } /* RTL: فلش به سمتِ حرکت */

/* ── لایت‌باکس: دکمه‌ی دانلود + چیدمانِ اکشن‌ها ── */
/* نوارِ شیشه‌ایِ اکشن‌های لایت‌باکس — وسط‌پایینِ عکس */
.is-lb-bar{position:fixed;z-index:1001;left:50%;transform:translateX(-50%);
  bottom:calc(20px + env(safe-area-inset-bottom,0px));
  display:inline-flex;align-items:center;gap:4px;padding:6px;border-radius:16px;
  background:var(--glass-2);border:1px solid var(--glass-border);
  -webkit-backdrop-filter:blur(20px) saturate(1.2);backdrop-filter:blur(20px) saturate(1.2);
  box-shadow:inset 0 1px 0 var(--glass-hi),0 16px 40px rgba(0,0,0,.55);}
.is-lb-bar[hidden]{display:none;}
.is-lb-btn{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px;border-radius:12px;cursor:pointer;
  font-family:inherit;font-weight:800;font-size:.9rem;color:#fff;text-decoration:none;background:transparent;border:none;
  transition:background var(--dur-1) var(--ease);}
.is-lb-btn:hover{background:rgba(255,255,255,.08);}
#isEdit.is-lb-btn:hover{background:var(--accent);}
.is-lb-sep{width:1px;height:22px;background:var(--glass-border);}

/* ── لمس: اکشن‌ها همیشه در دسترس + تارگت‌های بزرگ‌تر + ناحیه‌ی امن ── */
@media (hover: none){
  .is-hist-acts{ opacity:1; }                        /* رویِ موبایل مخفی نباشند */
  .is-hist-act{ width:38px; height:38px; font-size:16px; background:rgba(8,11,20,.82); }
  .is-hist-item::after{ opacity:.55; }               /* گرادیانِ خوانایی زیرِ اکشن‌ها */
  .c3d-up-del, .is-srcdel{ width:28px; height:28px; font-size:16px; }
  .is-hist-item:hover{ transform:none; }             /* حذفِ هاورِ بی‌معنا در لمس */
}
/* ناحیه‌ی امنِ iOS (home indicator) برای کامپوزرهای شناور */
.is-bar{ bottom:calc(20px + env(safe-area-inset-bottom, 0px)); }
.c3d-bar{ bottom:calc(22px + env(safe-area-inset-bottom, 0px)); }
@media (max-width:720px){
  .c3d-bar{ bottom:calc(12px + env(safe-area-inset-bottom, 0px)); }
  .c3d-guide{ top:12px; inset-inline-start:12px; }
}

/* ── تایپوگرافی: ریتمِ عنوانِ صفحه‌های انتخاب ── */
.mc-title, .ic-title{ letter-spacing:-.5px; font-weight:900; }
.mc-sub, .ic-sub{ font-size:.98rem; line-height:1.8; }

/* ── کاهشِ حرکت: خاموشیِ سراسریِ انیمیشن‌های تزئینی ── */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ============================================================
   اصلاحِ چیدمانِ گالری: گریدِ منظمِ ردیفی به‌جای ستون‌های مَسونری
   (ترتیبِ چپ‌به‌راست/راست‌به‌چپِ طبیعی، بدونِ ستونِ خالی؛ نسبتِ هر کارت
    از خودِ job می‌آید و عکس cover می‌شود)
   ============================================================ */
.is-history-grid, .c3d-renders-grid{
  display:grid !important;
  columns:auto !important; column-gap:normal !important;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:14px;
  align-items:start;
  grid-auto-flow:dense; /* کارت‌های عمودی حفره نسازند */
}
.is-history-grid .is-hist-item, .c3d-renders-grid .is-hist-item{ margin-bottom:0; width:100%; }
.is-hist-item{ aspect-ratio:1; } /* پیش‌فرض؛ استایلِ inline از job غالب می‌شود */
.is-hist-item img{ width:100%; height:100%; object-fit:cover; }
/* کارت‌های عمودی دو ردیف را اشغال نکنند — ارتفاعِ خودشان را دارند؛
   برای ریتمِ بهتر، پرتره‌ها کمی جمع می‌شوند */
@media (max-width:1100px){ .is-history-grid, .c3d-renders-grid{ grid-template-columns:repeat(auto-fill, minmax(210px,1fr)); } }
@media (max-width:640px){ .is-history-grid, .c3d-renders-grid{ grid-template-columns:repeat(2,1fr); gap:10px; } }

/* ============================================================
   زبانه‌ی دیواریِ راهنما (وقتی پنل در لبه جمع شده)
   ============================================================ */
.c3d-guide-tab{
  position:absolute; z-index:8; top:18px;
  width:30px; height:72px; padding:0; cursor:pointer;
  display:grid; place-items:center; color:var(--accent-2);
  background:var(--glass-2); border:1px solid var(--glass-border);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  box-shadow:inset 0 1px 0 var(--glass-hi), 0 10px 30px rgba(0,0,0,.45);
  transition:color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), transform var(--dur-2) var(--ease);
}
.c3d-guide-tab[hidden]{ display:none; }
.c3d-guide-tab:hover{ color:#fff; background:rgba(59,109,255,.28); }
.c3d-guide-tab.side-left{ left:0; right:auto; border-radius:0 14px 14px 0; border-left:none; }
.c3d-guide-tab.side-left:hover{ transform:translateX(2px); }
.c3d-guide-tab.side-right{ right:0; left:auto; border-radius:14px 0 0 14px; border-right:none; }
.c3d-guide-tab.side-right:hover{ transform:translateX(-2px); }
.c3d-guide-tab.side-right svg{ transform:scaleX(-1); }
/* آیکونِ دکمه‌ی جمع‌کردن در هدرِ پنل */
.c3d-guide-x svg{ display:block; }

/* ورودِ نرمِ پنلِ راهنما هنگامِ باز شدن از زبانه */
.c3d-guide:not([hidden]){ animation:igIn var(--dur-2) var(--ease); }

/* ============================================================
   اصلاحاتِ موبایل و پرداختِ نهایی (اسکرول، انتخابِ بخش، دکمه‌ی حذف)
   ============================================================ */

/* ── ۱) رفعِ باگِ اسکرولِ موبایل در استودیوی عکس ──
   زنجیره‌ی اسکرول به بادی نرود (rubber-band که کل صفحه را پایین می‌کشید)،
   و وقتی استودیو باز است، خودِ صفحه اسکرول نشود. */
.c3d-gallery, .is-feed{
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
}
body[data-studio="image"]{ overflow:hidden; }
body[data-studio="image"], html:has(body[data-studio="image"]){ overscroll-behavior:none; }

/* ── ۲) دکمه‌ی حذفِ تمیز روی کارت‌ها (به‌جای اکشن‌های زشتِ دانلود) ── */
.is-hist-item > .is-hist-del{
  position:absolute; top:8px; inset-inline-end:8px; z-index:3;
  width:32px; height:32px; border-radius:10px; cursor:pointer;
  display:grid; place-items:center; color:#fff;
  border:1px solid var(--glass-border); background:rgba(8,11,20,.6);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; transform:translateY(-4px);
  transition:opacity var(--dur-1) var(--ease), transform var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.is-hist-item:hover > .is-hist-del{ opacity:1; transform:none; }
.is-hist-item > .is-hist-del:hover{ background:#e5484d; border-color:#e5484d; }
.is-hist-item.failed > .is-hist-del{ opacity:1; transform:none; }
/* روی لمس همیشه دیده شود ولی ملایم */
@media (hover:none){
  .is-hist-item > .is-hist-del{ opacity:.9; transform:none; width:34px; height:34px; }
}

/* ── ۳) انتخابِ بخش (نانو بنانا / سه‌بعدی): هم‌خوانی با صفحه ── */
/* اجازه‌ی اسکرول اگر محتوا از ارتفاعِ صفحه بلندتر شد (روی موبایلِ کوتاه) */
.mode-chooser{ overflow-y:auto; align-items:start; }
.mc-inner{ margin:auto; padding-block:max(24px, 6vh); }
/* کارت‌ها روی موبایل تک‌ستونه و ارتفاعِ متناسب */
@media (max-width:720px){
  #modeChooser .mc-cards, .mk-tools-grid{ grid-template-columns:1fr !important; gap:14px; margin-top:32px; }
  .mc-title, .ic-title{ font-size:1.55rem; }
  .hero-card{ min-height:150px; padding:20px 20px; border-radius:20px; }
  .hero-art{ width:42%; }
  .hero-body{ max-width:60%; gap:6px; }
  .hero-ic{ width:44px; height:44px; font-size:22px; margin-bottom:4px; }
  .hero-h{ font-size:1.25rem; }
  .hero-p{ font-size:.86rem; line-height:1.6; }
  .hero-go{ font-size:.92rem; }
}
/* روی صفحه‌های خیلی کوتاه، کارت‌ها جمع‌وجورتر */
@media (max-height:680px) and (max-width:720px){
  .hero-card{ min-height:128px; }
  .hero-art img{ max-height:120% !important; }
}
/* روی دسکتاپ، کارت‌ها بیش از حد عریض/بلند نشوند */
#modeChooser .mc-cards, .mk-tools-grid{ max-width:900px; margin-inline:auto; }
.hero-card{ min-height:clamp(150px, 22vh, 200px); }

/* ============================================================
   گالریِ یکدست (کاشی‌های مربعِ منظم) + پنلِ ادیت
   ============================================================ */
/* کاشی‌های هم‌اندازه: هیچ حفره‌ای نمی‌ماند، کلِ عرض پوشش داده می‌شود */
.is-history-grid, .c3d-renders-grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows:1fr;
  grid-auto-flow:row !important;
  gap:12px;
  align-content:start;
}
.is-history-grid .is-hist-item, .c3d-renders-grid .is-hist-item{
  aspect-ratio:1 !important;   /* بر استایلِ inline هم غلبه می‌کند */
  width:100%; margin:0;
}
.is-history-grid .is-hist-item img, .c3d-renders-grid .is-hist-item img{
  width:100%; height:100%; object-fit:cover; object-position:50% 32%;  /* کمی رو به بالا تا سرِ کاراکترها بریده نشود */
}
@media (max-width:1100px){ .is-history-grid, .c3d-renders-grid{ grid-template-columns:repeat(auto-fill, minmax(170px,1fr)); } }
@media (max-width:640px){ .is-history-grid, .c3d-renders-grid{ grid-template-columns:repeat(2,1fr); gap:10px; } }

/* دکمه‌های لایت‌باکس (دانلود/ادیت) کنارِ هم */
/* دکمه‌های لایت‌باکس در نوارِ پایینی مدیریت می‌شوند (.is-lb-bar) */


/* ── پنلِ ادیت ── */
.edit-overlay{position:fixed;inset:0;z-index:1100;display:grid;place-items:center;padding:20px;
  background:rgba(4,6,14,.66);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  animation:igIn var(--dur-2) var(--ease);}
.edit-overlay[hidden]{display:none;}
.edit-panel{position:relative;width:100%;max-width:480px;border-radius:22px;padding:22px;
  background:linear-gradient(180deg,rgba(20,27,46,.9),rgba(13,17,28,.94));
  border:1px solid var(--glass-border);box-shadow:var(--shadow-lg),inset 0 1px 0 var(--glass-hi);}
.edit-close{position:absolute;top:14px;inset-inline-end:14px;width:34px;height:34px;border-radius:10px;cursor:pointer;
  display:grid;place-items:center;color:var(--text-2);background:transparent;border:1px solid transparent;transition:.15s;}
.edit-close:hover{background:rgba(255,255,255,.06);color:var(--text);}
.edit-head{display:flex;align-items:center;gap:14px;margin-bottom:16px;padding-inline-end:40px;}
.edit-thumb{width:64px;height:64px;border-radius:14px;object-fit:cover;border:1px solid var(--glass-border);flex:0 0 auto;background:#05070e;}
.edit-title{font-size:1.1rem;font-weight:900;letter-spacing:-.2px;margin-bottom:4px;}
.edit-sub{font-size:.84rem;color:var(--text-2);line-height:1.7;}
.edit-input{width:100%;resize:vertical;min-height:96px;border-radius:14px;padding:13px 14px;font-family:inherit;font-size:.96rem;line-height:1.8;
  color:var(--text);background:rgba(8,11,20,.5);border:1px solid var(--glass-border);transition:border-color var(--dur-1) var(--ease);}
.edit-input:focus{outline:none;border-color:var(--accent);}
.edit-input::placeholder{color:var(--text-3);}
.edit-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:16px;}
.edit-cancel{height:46px;padding:0 18px;border-radius:13px;cursor:pointer;font-family:inherit;font-weight:700;font-size:.92rem;
  color:var(--text-2);background:transparent;border:1px solid var(--glass-border);transition:.15s;}
.edit-cancel:hover{color:var(--text);border-color:var(--accent-2);}
.edit-submit{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 20px;border:none;border-radius:13px;cursor:pointer;
  font-family:inherit;font-weight:800;font-size:.96rem;color:#fff;
  background:linear-gradient(135deg,#3b6dff,#5b8cff 55%,#74b6ff);
  box-shadow:0 10px 26px rgba(59,109,255,.42),inset 0 1px 0 rgba(255,255,255,.34);
  transition:transform var(--dur-1) var(--ease),box-shadow var(--dur-2) var(--ease),filter var(--dur-1) var(--ease);}
.edit-submit:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 16px 38px rgba(59,109,255,.55);}
.edit-submit:disabled{opacity:.6;cursor:default;}
.edit-submit.is-busy svg{animation:isspin .8s linear infinite;}
.edit-cost{font-size:.8rem;font-weight:700;background:rgba(8,11,20,.26);padding:2px 9px;border-radius:999px;border:1px solid rgba(255,255,255,.22);}
.edit-cost:empty{display:none;}
@media (max-width:640px){ .edit-panel{max-width:100%;padding:18px;} .edit-actions{flex-direction:column-reverse;} .edit-cancel,.edit-submit{width:100%;justify-content:center;} }

/* ============================================================
   چیدمانِ ریسپانسیوِ نهایی — گریدِ یکدست که سطر‌به‌سطر پر می‌شود
   (بدونِ ستونِ خالیِ سمتِ چپ در حالتِ راست‌به‌چپ؛ در هر اندازه‌ی صفحه درست می‌چیند)
   نکته: column-* را خنثی می‌کنیم تا قواعدِ قدیمیِ multicol غلبه نکند.
   ============================================================ */
.is-history-grid, .c3d-renders-grid{
  display:grid !important;
  columns:auto !important; column-width:auto !important; column-count:auto !important;
  grid-template-columns:repeat(auto-fill, minmax(clamp(150px, 14vw, 220px), 1fr)) !important;
  gap:clamp(8px, .9vw, 14px) !important;
  align-content:start !important;
  grid-auto-flow:row !important;
}
.is-history-grid .is-hist-item, .c3d-renders-grid .is-hist-item{
  aspect-ratio:1 !important;       /* سلولِ مربعِ یکدست → پُرکردنِ تمیز و ریسپانسیو */
  width:100% !important;
  margin:0 !important;
  break-inside:auto;
  display:block;
  border-radius:clamp(10px, 1vw, 14px);
  overflow:hidden;
  background:#0e1320;              /* جای‌گیرِ تیره تا پیش از لودِ عکس */
}
.is-history-grid .is-hist-item img, .c3d-renders-grid .is-hist-item img{
  width:100% !important;
  height:100% !important;
  object-fit:cover;
  object-position:50% 30%;         /* کمی رو به بالا تا سرِ کاراکترها بریده نشود */
  display:block;
  opacity:1 !important;
  transform:none !important;
}
/* کارت‌های «در حالِ ساخت» و «ناموفق» هم مربع و محتوا وسط‌چین */
.is-history-grid .is-hist-item.gen, .is-history-grid .is-hist-item.failed,
.c3d-renders-grid .is-hist-item.gen, .c3d-renders-grid .is-hist-item.failed{
  aspect-ratio:1 !important;
  display:flex !important; align-items:center; justify-content:center;
}
.is-hist-item.gen .gen-inner{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; width:100%; height:100%; }


/* نسبتِ هر کارت از خودِ job می‌آید و فضای درست را رزرو می‌کند، پس نیازی به min-height نیست */



/* کتگوری‌ها فعلاً غیرفعال‌اند → صفحه‌ی انتخابِ کتگوری هرگز نمایش داده نشود */
#imgCatChooser{ display:none !important; }

/* ── عکسِ اصلیِ ورودی، گوشه‌ی لایت‌باکس ── */
.is-src{position:fixed;z-index:1001;left:20px;top:80px;margin:0;
  max-width:min(26vw,220px);border-radius:14px;overflow:hidden;
  background:var(--glass-2);border:1px solid var(--glass-border);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:inset 0 1px 0 var(--glass-hi),0 16px 40px rgba(0,0,0,.55);
  animation:igIn var(--dur-2) var(--ease);}
.is-src[hidden]{display:none;}
.is-src img{display:block;width:100%;height:auto;max-height:44vh;object-fit:contain;background:#05070e;}
.is-src figcaption{padding:7px 10px;font-size:.74rem;font-weight:700;color:var(--text-2);text-align:center;border-top:1px solid var(--glass-border);}
@media (max-width:640px){
  .is-src{left:12px;top:auto;bottom:88px;max-width:38vw;}
  .is-src img{max-height:30vh;}
}

/* ============================================================
   بوتِ پیش از رسم (anti-FOUC): وقتی html[data-boot="image"] است،
   از همان اولین فریم نمای کانسپت دیده می‌شود و UIِ قدیمی هرگز فلاش نمی‌زند.
   این‌ها با !important قواعدِ hidden/پیش‌فرض را می‌شکنند.
   ============================================================ */
html[data-boot="image"] .app{ display:none !important; }
html[data-boot="image"] #modeChooser{ display:none !important; }
html[data-boot="image"] #imgCatChooser{ display:none !important; }
html[data-boot="image"] #imageStudio{ display:block !important; }
html[data-boot="image"] #imageStudio .is-feed,
html[data-boot="image"] #imageStudio .is-bar{ display:none !important; }
html[data-boot="image"] #c3dPanel{ display:block !important; }