/* ==========================================================================
   h3-gallery.css
   --------------------------------------------------------------------------
   استایلِ بخشِ «نمونه ویدیوهای ساخته‌شده با این مدل» + «صفحه‌ی نیمه‌بازشونده»
   (bottom sheet) که با کلیک روی هر نمونه باز می‌شود.

   این فایل عیناً در هر دو صفحه‌ی h3.html و h3avatar.html لود می‌شود. عمداً
   همه‌ی رنگ‌ها از همان متغیرهای CSS خودِ صفحه (--accent-gold و ...) خوانده
   می‌شوند تا ظاهرِ گالری دقیقاً با ظاهرِ صفحه یکی باشد؛ برای مواردی هم که
   ممکن است آن متغیر تعریف نشده باشد، مقدارِ جایگزین (fallback) گذاشته شده.
   همه‌ی کلاس‌ها با پیشوندِ h3g- شروع می‌شوند تا با هیچ استایلی از صفحه
   تداخل نکنند.

   نکته‌ی مهمِ طراحی: صفحه‌ی نیمه‌بازشونده عمداً «کپیِ ظاهریِ خودِ صفحه» است
   -- همان برچسب‌ها، همان کادرِ آپلود، همان کادرِ دستور و حتی همان دکمه‌ی
   ساخت (فقط کم‌رنگ و غیرفعال) -- تا کاربر با یک نگاه بفهمد این نمونه دقیقاً
   با همین صفحه ساخته شده. هیچ‌کدام از کنترل‌های داخلِ شیت واقعی نیستند و
   هیچ id تکراری با صفحه ندارند.
   ========================================================================== */

/* ---------- فاصله‌ی خالیِ همیشگیِ زیرِ دکمه‌ی ساخت ----------
   جای انیمیشنِ «در حال ساخت» حتی وقتی کاربر هنوز کلیک نکرده هم خالی
   می‌ماند، تا صفحه با شروعِ ساخت ناگهان نپرد و بینِ دکمه و گالریِ نمونه‌ها
   هم یک نفسِ بصری وجود داشته باشد. */
#h3GenSpacer {
  min-height: 250px;
  margin-top: 1.6rem;
  border-radius: var(--radius-card, 22px);
  border: 1px dashed var(--input-border, #E1E7EF);
  background:
    radial-gradient(ellipse 260px 120px at 50% 0%, rgba(74, 108, 250, .05), transparent 70%),
    var(--input-bg, #F6F8FB);
  opacity: .55;
}
#h3GenSpacer.h3g-hidden { display: none; }

/* ================= بلوکِ گالری ================= */
.h3g-block {
  margin-top: 2.4rem;
  animation: h3gFadeUp .6s ease-out both;
}

@keyframes h3gFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.h3g-head { text-align: center; margin-bottom: 1.1rem; }

.h3g-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  padding: .3rem .8rem; border-radius: 999px;
  color: var(--accent-gold-soft, #3553D6);
  background: rgba(74, 108, 250, .09);
  border: 1px solid rgba(74, 108, 250, .18);
}
.h3g-badge svg { width: 14px; height: 14px; }

.h3g-title {
  margin: .7rem 0 .35rem;
  font-size: 1.22rem; font-weight: 800; line-height: 1.6;
  background: linear-gradient(105deg, var(--accent-gold, #4A6CFA), var(--accent-violet, #7C5CFF) 48%, var(--accent-cyan, #0FD4A8));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.h3g-sub {
  margin: 0; font-size: .84rem; line-height: 1.9;
  color: var(--text-secondary, #626F86);
}

/* ---------- فلشِ رو به پایین ---------- */
.h3g-arrow {
  display: block; margin: .55rem auto .2rem;
  width: 64px; height: 62px;
  animation: h3gArrowBob 2.4s ease-in-out infinite;
}
@keyframes h3gArrowBob {
  0%, 100% { transform: translateY(0); opacity: .9; }
  50%      { transform: translateY(9px); opacity: 1; }
}
.h3g-arrow .h3g-arrow-glow { animation: h3gGlow 2.4s ease-in-out infinite; transform-origin: center; }
@keyframes h3gGlow {
  0%, 100% { opacity: .18; transform: scale(.9); }
  50%      { opacity: .42; transform: scale(1.08); }
}

/* ================= شبکه‌ی نمونه‌ها — همیشه سه‌تا در هر ردیف =================
   حاشیه‌ی منفیِ کوچک، فقط برای همین شبکه: بخشی از padding خودِ main را پس
   می‌گیرد تا نمونه‌ها بزرگ‌تر دیده شوند، بدون اینکه چیدمانِ بقیه‌ی صفحه یا
   تیترِ بالای گالری تکان بخورد. */
.h3g-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .6rem;
  margin-inline: -.4rem;
}

.h3g-card {
  position: relative; display: block;
  padding: 0; border: 0; background: transparent;
  font-family: inherit; color: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  animation: h3gPop .45s ease-out both;
}
@keyframes h3gPop {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* قابِ نازکِ گرادیانیِ دورِ هر نمونه */
.h3g-frame {
  padding: 2px; border-radius: 21px;
  background: linear-gradient(150deg,
    rgba(74, 108, 250, .45),
    rgba(124, 92, 255, .28) 45%,
    rgba(15, 212, 168, .42));
  box-shadow: 0 14px 30px -20px rgba(24, 40, 90, .6);
  transition: transform .35s cubic-bezier(.4, 0, .2, 1), box-shadow .35s cubic-bezier(.4, 0, .2, 1);
}
.h3g-card:hover .h3g-frame,
.h3g-card:focus-visible .h3g-frame {
  transform: translateY(-5px);
  box-shadow: 0 24px 42px -22px rgba(24, 40, 90, .7);
}
.h3g-card:active .h3g-frame { transform: translateY(-1px) scale(.985); }

.h3g-thumb {
  position: relative; width: 100%; aspect-ratio: 3 / 4; overflow: hidden;
  border-radius: 19px;
  background: linear-gradient(160deg, #EEF3FD, #E3EBFA);
}

.h3g-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}
.h3g-card:hover .h3g-thumb img { transform: scale(1.07); }

/* پرده‌ی نرمِ پایینِ بندانگشتی، تا برچسبِ مدل همیشه خوانا باشد */
.h3g-thumb::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 42%;
  background: linear-gradient(180deg, transparent, rgba(14, 20, 38, .34));
  pointer-events: none;
}

/* دکمه‌ی پخش — بدونِ هیچ قاب و پس‌زمینه‌ای، تا جلوی صورتِ آدمِ داخل عکس
   را نگیرد. فقط خودِ مثلثِ سفید، با یک سایه‌ی نرم که روی عکسِ روشن هم
   دیده شود. */
.h3g-play {
  position: absolute; inset: 0; margin: auto;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  z-index: 2; transition: transform .3s ease, opacity .3s ease;
  opacity: .92; pointer-events: none;
}
.h3g-play svg {
  width: 30px; height: 30px; margin-inline-start: 2px;
  fill: #fff;
  filter: drop-shadow(0 2px 6px rgba(10, 16, 32, .7)) drop-shadow(0 0 1px rgba(10, 16, 32, .5));
}
.h3g-card:hover .h3g-play { transform: scale(1.1); opacity: 1; }

/* برچسبِ مدل روی هر نمونه — خیلی ریز، پایینِ قاب */
.h3g-kind {
  position: absolute; bottom: 7px; inset-inline: 0; z-index: 2;
  width: -moz-fit-content; width: fit-content; margin-inline: auto;
  padding: 2px 7px; border-radius: 999px;
  font-family: var(--mono-font, monospace);
  font-size: .52rem; font-weight: 700; letter-spacing: .03em; line-height: 1.5;
  color: rgba(255, 255, 255, .94);
  background: rgba(16, 22, 40, .42);
  border: 1px solid rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  white-space: nowrap;
}

/* ---------- حالت‌های خالی / در حال بارگذاری ---------- */
.h3g-state {
  padding: 2rem 1rem; text-align: center;
  font-size: .85rem; color: var(--text-tertiary, #8A94A6);
  border: 1px dashed var(--input-border, #E1E7EF);
  border-radius: var(--radius-card, 22px);
  background: var(--input-bg, #F6F8FB);
}

.h3g-skeleton {
  width: 100%; aspect-ratio: 3 / 4; border-radius: 21px;
  background: linear-gradient(100deg, #EDF1F9 30%, #F7FAFF 50%, #EDF1F9 70%);
  background-size: 200% 100%; animation: h3gShimmer 1.3s linear infinite;
}
@keyframes h3gShimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ================= صفحه‌ی نیمه‌بازشونده (Bottom Sheet) ================= */
/* ---- نکته‌ی z-index ----
   شیتِ نمونه‌ها باید بالاتر از همه‌ی محتوای عادیِ صفحه بنشیند (کراپرِ عکس
   روی ۱۱۰۰ است)، ولی پایین‌تر از دو چیز بماند: پیامِ هشدارِ تمام‌صفحه
   (#alertOverlay روی ۹۹۹۹) و مودال‌های کیف پول (۱۰۰۵۰ و ۱۰۰۶۰ در
   wallet.css). پس ۹۰۰۰/۹۰۰۱ دقیقاً همان‌جای درست است. */
.h3g-backdrop {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(14, 20, 38, .5);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.h3g-backdrop.open { opacity: 1; pointer-events: auto; }

.h3g-sheet {
  position: fixed; z-index: 9001;
  inset-inline: 0; bottom: 0;
  margin: 0 auto; width: 100%; max-width: 600px;
  max-height: 80vh; max-height: 80dvh; display: flex; flex-direction: column;
  background: linear-gradient(180deg, #FFFFFF 0%, #FDFEFF 55%, #FAFCFF 100%);
  background-color: var(--panel-bg, #fff);
  border-radius: 30px 30px 0 0;
  border: 1px solid var(--panel-border, #EAEFF7); border-bottom: 0;
  box-shadow: 0 -28px 66px -26px rgba(20, 32, 70, .5);
  transform: translateY(102%);
  transition: transform .42s cubic-bezier(.22, 1, .36, 1);
  overscroll-behavior: contain;
}
.h3g-sheet.open { transform: translateY(0); }

.h3g-grip {
  width: 46px; height: 5px; border-radius: 999px; margin: 10px auto 0;
  background: var(--input-border, #E1E7EF); flex-shrink: 0;
}

.h3g-sheet-head {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .65rem 1.15rem .6rem; flex-shrink: 0;
  border-bottom: 1px solid var(--panel-border, #EAEFF7);
}
.h3g-modeltag {
  font-family: var(--mono-font, monospace);
  font-size: .66rem; font-weight: 700; letter-spacing: .06em;
  color: var(--text-tertiary, #8A94A6);
  display: inline-flex; align-items: center; gap: .4rem;
}
.h3g-modeltag i {
  width: 6px; height: 6px; border-radius: 50%; display: inline-block;
  background: var(--accent-cyan, #0FD4A8);
  box-shadow: 0 0 0 3px rgba(15, 212, 168, .16);
}
.h3g-x {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--input-border, #E1E7EF);
  background: var(--input-bg, #F6F8FB); color: var(--text-secondary, #626F86);
  font-size: 1.25rem; line-height: 1; cursor: pointer; transition: .2s;
}
.h3g-x:hover { color: var(--danger-color, #e53e3e); border-color: rgba(229, 62, 62, .35); }

.h3g-sheet-body {
  padding: 1.1rem 1.2rem 1.4rem;
  overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1;
}

/* ================= سربرگِ داخلِ شیت (جایگزینِ تیترِ خودِ صفحه) ================= */
.h3g-hero {
  position: relative; overflow: hidden; text-align: center;
  padding: 1.7rem 1.2rem 1.5rem; margin-bottom: 1.5rem;
  border-radius: 24px; border: 1px solid var(--panel-border, #EAEFF7);
  background:
    radial-gradient(ellipse 340px 150px at 50% 0%, rgba(74, 108, 250, .10), transparent 70%),
    linear-gradient(180deg, var(--panel-bg-alt, #F6F8FB) 0%, var(--app-bg-alt, #EFF3FB) 100%);
  box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(26, 32, 44, .06));
}
.h3g-hero-corner { position: absolute; width: 22px; height: 22px; opacity: .7; }
.h3g-hero-corner.tl { top: 12px; right: 12px; border-top: 2px solid var(--accent-gold, #4A6CFA); border-right: 2px solid var(--accent-gold, #4A6CFA); border-radius: 4px 7px 0 0; }
.h3g-hero-corner.tr { top: 12px; left: 12px; border-top: 2px solid var(--accent-cyan, #0FD4A8); border-left: 2px solid var(--accent-cyan, #0FD4A8); border-radius: 7px 4px 0 0; }
.h3g-hero-corner.bl { bottom: 12px; right: 12px; border-bottom: 2px solid var(--accent-cyan, #0FD4A8); border-right: 2px solid var(--accent-cyan, #0FD4A8); border-radius: 0 0 4px 7px; }
.h3g-hero-corner.br { bottom: 12px; left: 12px; border-bottom: 2px solid var(--accent-gold, #4A6CFA); border-left: 2px solid var(--accent-gold, #4A6CFA); border-radius: 0 0 7px 4px; }

.h3g-hero-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .7rem; font-weight: 700;
  padding: .3rem .8rem; border-radius: 999px;
  color: var(--accent-gold-soft, #3553D6);
  background: rgba(255, 255, 255, .75);
  border: 1px solid rgba(74, 108, 250, .2);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.h3g-hero-chip svg { width: 13px; height: 13px; }

.h3g-hero-title {
  margin: .75rem 0 0; font-size: 1.32rem; font-weight: 800; line-height: 1.65;
  letter-spacing: -.3px;
  background: linear-gradient(100deg, var(--accent-gold-soft, #3553D6), var(--accent-violet, #7C5CFF) 50%, var(--accent-cyan, #0FD4A8));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.h3g-hero-title .h3g-model {
  font-family: var(--mono-font, monospace); font-weight: 700;
  letter-spacing: .01em; direction: ltr; display: inline-block;
}
.h3g-hero-sub {
  margin: .6rem auto 0; max-width: 42ch;
  font-size: .84rem; line-height: 1.95; font-weight: 500;
  color: var(--text-secondary, #626F86);
}

/* نوارِ کوچکِ «این فقط یک نمونه است» */
.h3g-note {
  display: flex; align-items: center; gap: .55rem;
  margin-bottom: 1.4rem; padding: .6rem .85rem;
  border-radius: 999px;
  font-size: .74rem; font-weight: 600; line-height: 1.7;
  color: var(--text-secondary, #626F86);
  background: rgba(74, 108, 250, .06);
  border: 1px solid rgba(74, 108, 250, .14);
}
.h3g-note svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--accent-gold, #4A6CFA); }

/* ================= بازسازیِ فرمِ خودِ صفحه، به‌صورت غیرفعال ================= */
.h3g-fg {
  padding-bottom: 1.3rem; margin-bottom: 1.3rem;
  border-bottom: 1px dashed #EEF2F8;
}
.h3g-fg.last { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }

.h3g-lbl {
  display: flex; align-items: center; gap: .65rem;
  font-weight: 700; font-size: .95rem; color: var(--text-primary, #1A202C);
  margin-bottom: .85rem;
}
.h3g-lbl > svg {
  width: 34px; height: 34px; padding: 7px; box-sizing: border-box;
  border-radius: 11px; flex-shrink: 0;
  background: linear-gradient(150deg, rgba(74, 108, 250, .10), rgba(15, 212, 168, .08));
  border: 1px solid rgba(74, 108, 250, .16);
  color: var(--accent-gold-soft, #3553D6);
  box-shadow: inset 0 1px 0 #fff;
}
.h3g-lbl em { font-style: normal; font-weight: 600; color: var(--text-tertiary, #8A94A6); }
.h3g-tag {
  margin-inline-start: auto; flex-shrink: 0;
  font-size: .66rem; font-weight: 700; letter-spacing: .02em;
  color: var(--text-tertiary, #8A94A6);
  background: var(--panel-bg-alt, #F6F8FB);
  border: 1px solid var(--panel-border, #EAEFF7);
  padding: .22rem .6rem; border-radius: 999px;
}

/* --- کادرِ آپلود، در حالتِ «پرشده» (دقیقاً مثل خودِ صفحه) --- */
.h3g-drop {
  position: relative; overflow: hidden;
  border: 2px solid var(--success-color, #38A169);
  border-radius: var(--radius-input, 12px);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(56, 161, 105, .10);
  display: flex; align-items: center; justify-content: center;
}
/* مهم: کادر خودش را به اندازه‌ی عکس جمع می‌کند و عکس با نسبتِ ذاتی‌اش
   نمایش داده می‌شود، پس عکسِ عمودیِ موبایل نه مربع می‌شود و نه دو طرفش
   نوارِ خالی می‌ماند. */
.h3g-drop:not(.audio) {
  width: -moz-fit-content; width: fit-content; max-width: 100%;
  margin-inline: auto;
}
.h3g-drop img {
  display: block; background: #fff;
  width: auto; height: auto;
  max-width: 100%; max-height: 40vh;
}
.h3g-drop.audio { padding: 2.9rem 1.15rem 3.3rem; display: block; }
.h3g-drop.audio audio { width: 100%; display: block; }

/* ویدیوی نمونه‌ی ورودی — فقط در صفحه‌ی مرجع (h3reference) دیده می‌شود */
.h3g-drop.video { padding: 0; display: block; overflow: hidden; }
.h3g-drop.video video { width: 100%; display: block; border-radius: inherit; background: #000; }

/* دکمه‌های تزئینیِ روی کادر — دیده می‌شوند ولی کاری نمی‌کنند */
.h3g-fake-x {
  position: absolute; top: 10px; inset-inline-start: 10px;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(26, 32, 44, .7); color: #fff;
  border: 1px solid rgba(255, 255, 255, .15);
  font-size: 17px; font-weight: 700; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 6; transition: .2s;
}
.h3g-fake-x:hover { background: rgba(26, 32, 44, .88); }

.h3g-fake-badge {
  position: absolute; bottom: 10px; inset-inline-end: 10px;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(26, 32, 44, .7); color: #fff;
  padding: 5px 11px; border-radius: 20px;
  font-family: inherit; font-size: .74rem; font-weight: 700;
  border: 1px solid rgba(255, 255, 255, .15);
  cursor: pointer; z-index: 6; transition: .2s;
}
.h3g-fake-badge:hover { background: rgba(26, 32, 44, .88); }
.h3g-fake-badge svg { width: 13px; height: 13px; }

/* --- کادرِ دستور --- */
.h3g-pbox {
  position: relative; border-radius: 18px; padding: 1.5px;
  background: linear-gradient(135deg,
    var(--accent-gold-glow, rgba(74, 108, 250, .25)),
    var(--input-border, #E1E7EF) 35%,
    var(--accent-cyan-glow, rgba(15, 212, 168, .2)));
  box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(26, 32, 44, .05));
}
.h3g-pbox-in {
  border-radius: 16.5px; overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, var(--input-bg, #F6F8FB) 100%);
  padding: 1.05rem 1.15rem;
}
.h3g-ptext {
  font-size: .92rem; line-height: 1.95; white-space: pre-wrap; word-break: break-word;
  color: var(--text-primary, #1A202C); max-height: 240px; overflow-y: auto;
}
.h3g-ptext[dir="ltr"] { text-align: left; font-family: var(--mono-font, monospace); font-size: .84rem; }

.h3g-copy {
  margin-top: .75rem; width: 100%; padding: .65rem;
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  border: 1px solid var(--input-border, #E1E7EF); border-radius: var(--radius-input, 12px);
  background: var(--panel-bg, #fff); color: var(--accent-gold-soft, #3553D6);
  font-family: inherit; font-size: .84rem; font-weight: 700; cursor: pointer; transition: .2s;
}
.h3g-copy svg { width: 15px; height: 15px; }
.h3g-copy:hover { border-color: var(--accent-gold, #4A6CFA); background: rgba(74, 108, 250, .05); }
.h3g-copy.done { color: var(--success-color, #38A169); border-color: rgba(56, 161, 105, .4); background: rgba(56, 161, 105, .07); }

/* --- دکمه‌ی ساختِ کم‌رنگ (فقط برای حس‌وحالِ صفحه؛ غیرفعال است) --- */
.h3g-genwrap { margin-top: 1.5rem; }
.h3g-gen {
  display: flex; align-items: center; justify-content: center; gap: .7rem;
  width: 100%; padding: 1.05rem; border: none;
  font-family: inherit; font-size: 1.05rem; font-weight: 700; color: #fff;
  border-radius: var(--radius-btn, 14px);
  background: var(--grad-tri, linear-gradient(90deg, #4A6CFA, #3553D6));
  box-shadow: 0 6px 16px -4px var(--accent-gold-glow, rgba(74, 108, 250, .25));
  opacity: .38; filter: saturate(.9);
  cursor: not-allowed; transition: opacity .25s ease;
}
.h3g-gen:hover { opacity: .5; }
.h3g-gen svg { width: 20px; height: 20px; }
.h3g-gen-hint {
  margin: .6rem 0 0; text-align: center;
  font-size: .73rem; line-height: 1.8; color: var(--text-tertiary, #8A94A6);
}

/* --- ویدیوی نهایی ---
   قابْ خودش را دقیقاً به اندازه‌ی ویدیو جمع می‌کند (width: fit-content) و
   خودِ ویدیو هم با نسبتِ ذاتی‌اش رشد می‌کند (width/height: auto + دو تا
   max). نتیجه: هیچ نوارِ سیاهی کنارِ ویدیوی عمودی نمی‌ماند و پلیر دقیقاً
   هم‌اندازه‌ی خودِ ویدیو است. */
.h3g-result {
  margin-top: 1.5rem; border-radius: 20px; overflow: hidden;
  border: 1px solid var(--panel-border, #EAEFF7);
  background: transparent;
  box-shadow: 0 24px 46px -28px rgba(20, 32, 70, .65);
  display: flex; flex-direction: column; align-items: stretch;
  width: -moz-fit-content; width: fit-content; max-width: 100%;
  margin-inline: auto;
}
.h3g-video {
  display: block; background: #0E1017;
  width: auto; height: auto;
  max-width: 100%; max-height: 52vh;
}
.h3g-dl {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .9rem; text-decoration: none;
  background: var(--grad-tri, linear-gradient(90deg, #4A6CFA, #0FD4A8));
  color: #fff; font-family: inherit; font-size: .9rem; font-weight: 700;
  transition: filter .2s ease;
}
.h3g-dl:hover { filter: brightness(1.06); }
.h3g-dl svg { width: 18px; height: 18px; }

/* --- پیامِ کوچکِ «این نمونه است» هنگام کلیک روی کنترل‌های تزئینی --- */
.h3g-toast {
  position: absolute; z-index: 20;
  bottom: 120px; left: 50%;
  transform: translate(-50%, 14px);
  padding: .55rem 1.05rem; border-radius: 999px;
  background: rgba(20, 28, 50, .93); color: #fff;
  font-family: inherit; font-size: .77rem; font-weight: 600;
  box-shadow: 0 14px 30px -14px rgba(10, 16, 32, .9);
  opacity: 0; pointer-events: none; transition: opacity .28s ease, transform .28s ease;
  white-space: nowrap; max-width: 92%;
}
.h3g-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* پایینِ شیت عمداً فضای اضافه دارد: این صفحه داخلِ اپلیکیشن (آیفریم) هم باز
   می‌شود و آنجا نوارِ پایینِ سیستم/اپ روی چند ده پیکسلِ آخر می‌افتد. این
   فاصله باعث می‌شود دکمه‌ی «بستنِ نمونه» همیشه کامل دیده شود. */
.h3g-sheet-foot {
  flex-shrink: 0;
  padding: .8rem 1.15rem calc(2.4rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--panel-border, #EAEFF7);
  background: var(--panel-bg, #fff);
}
.h3g-close-btn {
  width: 100%; padding: .85rem; border: 0; cursor: pointer;
  border-radius: var(--radius-btn, 14px);
  background: var(--grad-tri, linear-gradient(115deg, #4A6CFA, #0FD4A8));
  color: #fff; font-family: inherit; font-size: .92rem; font-weight: 700;
  box-shadow: 0 14px 28px -16px rgba(74, 108, 250, .9);
  transition: transform .2s ease, filter .2s ease;
}
.h3g-close-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }

body.h3g-locked { overflow: hidden; }

/* ---------- موبایل ---------- */
@media (max-width: 560px) {
  .h3g-grid { gap: .45rem; margin-inline: -.7rem; }
  .h3g-frame { border-radius: 19px; padding: 1.5px; }
  .h3g-thumb { border-radius: 17.5px; }
  .h3g-title { font-size: 1.06rem; }
  .h3g-play { width: 34px; height: 34px; }
  .h3g-play svg { width: 25px; height: 25px; }
  .h3g-kind { font-size: .48rem; padding: 2px 6px; bottom: 6px; }
  .h3g-skeleton { border-radius: 19px; }
  .h3g-sheet { max-height: 84vh; max-height: 84dvh; border-radius: 26px 26px 0 0; }
  .h3g-sheet-body { padding: 1rem .95rem 1.2rem; }
  .h3g-sheet-foot { padding-bottom: calc(3rem + env(safe-area-inset-bottom, 0px)); }
  .h3g-toast { bottom: 132px; }
  .h3g-hero { padding: 1.5rem .9rem 1.35rem; border-radius: 21px; }
  .h3g-hero-title { font-size: 1.14rem; }
  .h3g-lbl { font-size: .9rem; }
  .h3g-lbl > svg { width: 31px; height: 31px; padding: 6px; }
  .h3g-gen { font-size: .98rem; padding: .95rem; }
  #h3GenSpacer { min-height: 210px; }
}

@media (prefers-reduced-motion: reduce) {
  .h3g-block, .h3g-card, .h3g-arrow, .h3g-arrow .h3g-arrow-glow, .h3g-skeleton { animation: none !important; }
  .h3g-sheet { transition: none; }
}

/* ==========================================================================
   دو دکمه‌ی بالای گالری: «نمونه‌های این مدل» / «سوابق رندرهای شما»
   --------------------------------------------------------------------------
   یک کنترلِ قرصی‌شکلِ جمع‌وجور. همیشه در یک ردیف می‌ماند (حتی روی باریک‌ترین
   موبایل) چون هر دو دکمه flex:1 هستند و برچسبِ کوتاه‌ترشان زیرِ ۵۰۰ پیکسل
   جایگزین می‌شود. همه‌ی رنگ‌ها با fallback نوشته شده‌اند تا در هر سه صفحه
   (h3، h3reference و h3avatar) با پالتِ خودِ صفحه هماهنگ باشد.
   ========================================================================== */
.h3switch {
  display: flex; align-items: stretch; gap: 4px; width: 100%; max-width: 430px;
  margin: 2.2rem auto 1.2rem; padding: 4px; box-sizing: border-box;
  border-radius: 999px; background: var(--input-bg, #F6F8FB);
  border: 1px solid var(--panel-border, #E1E7EF);
  box-shadow: inset 0 1px 3px rgba(16, 24, 40, .05);
}
.h3switch-btn {
  flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center;
  gap: 5px; padding: .52rem .45rem; border: none; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--text-secondary, #5A6478);
  font-family: var(--app-font, inherit); font-weight: 700; font-size: .78rem; line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background .25s ease, color .25s ease, box-shadow .25s ease, transform .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.h3switch-btn .h3switch-ico { width: 15px; height: 15px; flex: 0 0 auto; opacity: .8; }
.h3switch-btn:hover:not(.active) { color: var(--text-primary, #101828); background: rgba(127, 137, 160, .08); }
.h3switch-btn.active {
  color: #fff; transform: translateY(-1px);
  background: linear-gradient(95deg,
              var(--accent-gold, var(--accent-primary, #4A6CFA)),
              var(--accent-cyan, var(--accent-secondary, #0FD4A8)));
  box-shadow: 0 6px 14px -6px var(--accent-gold-glow, rgba(74, 108, 250, .45));
}
.h3switch-btn.active .h3switch-ico { opacity: 1; }
.h3switch-count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px;
  padding: 0 5px; border-radius: 9px; font-size: .66rem; font-weight: 800; flex: 0 0 auto;
  background: rgba(127, 137, 160, .16); color: inherit;
}
.h3switch-btn.active .h3switch-count { background: rgba(255, 255, 255, .26); color: #fff; }
.h3switch-short { display: none; }
@media (max-width: 500px) {
  .h3switch { max-width: 100%; }
  .h3switch-btn { font-size: .72rem; gap: 4px; padding: .5rem .3rem; }
  .h3switch-btn .h3switch-ico { width: 13px; height: 13px; }
  .h3switch-full { display: none; }
  .h3switch-short { display: inline; }
}

/* ================= کارت‌های سوابقِ رندرِ کاربر ================= */
.h3hist { width: 100%; display: flex; flex-direction: column; gap: .9rem; animation: h3gFadeUp .45s ease-out both; }
/* ⚠️ بدونِ این خط، display:flex بالا قانونِ پیش‌فرضِ مرورگر برای [hidden] را
   خنثی می‌کند و بخشِ سوابق زیرِ گالریِ نمونه‌ها هم دیده می‌شود. */
.h3hist[hidden] { display: none !important; }
.h3hist-empty {
  text-align: center; color: var(--text-secondary, #5A6478); padding: 2.2rem 1rem;
  font-size: .88rem; line-height: 2; background: var(--panel-bg, #fff);
  border: 1px dashed var(--panel-border, #E1E7EF); border-radius: var(--radius-card, 18px);
}
.h3hist-card {
  background: var(--panel-bg, #fff); border: 1px solid var(--panel-border, #E1E7EF);
  border-radius: var(--radius-card, 18px); padding: .95rem 1rem;
  display: flex; flex-direction: column; gap: .7rem; transition: border-color .25s ease, transform .25s ease;
}
.h3hist-card:hover { border-color: var(--accent-cyan, var(--accent-secondary, #0FD4A8)); transform: translateY(-2px); }
.h3hist-top { display: flex; align-items: flex-start; gap: .7rem; justify-content: space-between; }
.h3hist-prompt {
  font-size: .85rem; font-weight: 600; color: var(--text-primary, #101828); line-height: 1.9;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word;
}
.h3hist-date { font-size: .72rem; color: var(--text-secondary, #5A6478); opacity: .85; margin-top: .3rem; font-family: var(--mono-font, inherit); }
.h3hist-badge { flex-shrink: 0; font-size: .72rem; font-weight: 800; padding: .28rem .7rem; border-radius: 20px; white-space: nowrap; }
.h3hist-badge.ready { background: rgba(15, 212, 168, .14); color: var(--accent-cyan, var(--success-color, #0FD4A8)); }
.h3hist-badge.processing { background: rgba(74, 108, 250, .14); color: var(--accent-primary, #4A6CFA); }
.h3hist-badge.failed { background: rgba(229, 72, 77, .14); color: var(--danger-color, #E5484D); }
.h3hist-bar { height: 6px; border-radius: 6px; background: var(--input-bg, #F6F8FB); overflow: hidden; }
.h3hist-bar i {
  display: block; height: 100%; transition: width .4s ease;
  background: linear-gradient(90deg, var(--accent-gold, var(--accent-primary, #4A6CFA)), var(--accent-cyan, var(--accent-secondary, #0FD4A8)));
}
.h3hist-note { font-size: .78rem; color: var(--text-secondary, #5A6478); line-height: 1.9; }
.h3hist-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.h3hist-btn {
  display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; text-decoration: none;
  font-family: var(--app-font, inherit); font-weight: 700; font-size: .8rem; padding: .48rem 1rem;
  border-radius: 12px; border: 1.5px solid var(--panel-border, #E1E7EF);
  background: var(--input-bg, #F6F8FB); color: var(--text-primary, #101828);
  transition: border-color .25s ease, transform .2s ease;
}
.h3hist-btn:hover { border-color: var(--accent-cyan, var(--accent-secondary, #0FD4A8)); transform: translateY(-1px); }
.h3hist-btn.primary {
  color: #fff; border-color: transparent;
  background: linear-gradient(95deg, var(--accent-gold, var(--accent-primary, #4A6CFA)), var(--accent-cyan, var(--accent-secondary, #0FD4A8)));
}
.h3hist-btn svg { width: 15px; height: 15px; }
.h3hist-video { width: 100%; border-radius: 12px; background: #000; display: block; border: 1px solid var(--panel-border, #E1E7EF); }