/* استایل‌های سایت اتومیک شاپ.
   قبلاً داخل head_references.html به‌صورت <style> بود؛ یعنی ۹۶ کیلوبایت
   در هر بازدید هر صفحه دوباره دانلود می‌شد و هیچ‌وقت کش نمی‌شد. اینجا
   یک فایل جداست: یک بار دانلود، بعد از آن از کش مرورگر. */

/* فونت از سرور خودمان می‌آید؛ @import گوگل‌فونت رندر را بلاک می‌کرد و روی
   اینترنت ایران اغلب تایم‌اوت می‌شد. تا امروز این نام به فایل یکان‌بخ اشاره
   می‌کرد؛ حالا واقعاً وزیرمتن است. */
@font-face {
    font-family: 'Vazirmatn';
    src: url("../fonts/Vazirmatn-VF.2322ca0eecac.woff2") format('woff2');
    font-weight: 100 900;
    font-display: swap;
}
html, body, button, input, select, textarea { font-family: 'Vazirmatn', Tahoma, sans-serif; }

@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
@keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
@keyframes marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
@keyframes fadeInUp { 0%{opacity:0;transform:translateY(30px)} 100%{opacity:1;transform:translateY(0)} }
@keyframes pulse-ring { 0%{transform:scale(0.8);opacity:1} 100%{transform:scale(2);opacity:0} }

/* فری‌فایر: افکت آتش */
@keyframes fire-flicker {
    0%,100%{opacity:1;transform:scaleY(1)}
    50%{opacity:0.85;transform:scaleY(1.04)}
}

.animate-float { animation: float 6s ease-in-out infinite; }
.animate-float-delayed { animation: float 6s ease-in-out 2s infinite; }
.animate-shimmer { background-size: 200% 100%; animation: shimmer 3s ease-in-out infinite; }
.animate-marquee { animation: marquee 30s linear infinite; }
.animate-fadeInUp { animation: fadeInUp 0.8s ease-out forwards; }
.animate-pulse-ring { animation: pulse-ring 2s ease-out infinite; }
.animate-fire { animation: fire-flicker 1.5s ease-in-out infinite; }

.card-3d { transform-style: preserve-3d; perspective: 1000px; }
.card-3d:hover { transform: rotateY(-5deg) rotateX(5deg); }

.glass {
    background: rgba(10, 8, 5, 0.65);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* گلو اصلی: نارنجی-قرمز فری‌فایر */
.glow-orange {
    box-shadow:
        0 0 40px rgba(255, 80, 0, 0.2),
        0 0 80px rgba(255, 80, 0, 0.08);
}

/* گلو طلایی برای جم */
.glow-gold {
    box-shadow:
        0 0 30px rgba(255, 200, 0, 0.2),
        0 0 60px rgba(255, 200, 0, 0.07);
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* آیکن دکمه تم: خورشید در حالت تاریک، ماه در حالت روشن */
.theme-icon-sun { display: inline-block; }
.theme-icon-moon { display: none; }
html:not(.dark) .theme-icon-sun { display: none; }
html:not(.dark) .theme-icon-moon { display: inline-block; }

/* تم رنگی فری‌فایر */
:root {
    --ff-red:    #e8230a;
    --ff-orange: #ff5000;
    --ff-gold:   #ffc800;
    --ff-dark:   #0a0805;
    --ff-dark2:  #110e08;
}

/* ============================================================
   حالت روشن (Light Mode) — پایه‌ای
   کل سایت با رنگ‌های تیره‌ی ثابت ساخته شده؛ این بخش سطوح و متن‌های
   اصلی را در حالت روشن وارونه می‌کند. دکمه‌های رنگی سفیدمتن می‌مانند.
   ============================================================ */
html:not(.dark) body { background-color: #eaeef5 !important; color: #0f1722; }

/* سطح صفحه و پنل‌ها */
html:not(.dark) .bg-\[\#0F141C\],
html:not(.dark) .bg-\[\#0A0F18\],
html:not(.dark) .bg-\[\#080A0F\],
html:not(.dark) .bg-\[\#0A0F17\],
html:not(.dark) .bg-\[\#0e1117\] { background-color: #f3f6fb !important; }

html:not(.dark) .bg-\[\#121A25\],
html:not(.dark) .bg-\[\#111924\],
html:not(.dark) .bg-\[\#151C28\],
html:not(.dark) .bg-\[\#1C2533\],
html:not(.dark) .bg-\[\#121826\] { background-color: #ffffff !important; }

/* ===== هدر، جستجو و دستیار هوشمند در حالت روشن =====
   این بخش‌ها استایل اینلاین (هاردکدِ تیره) دارند؛ با انتخابگرهای [style*=...]
   و !important روی استایل اینلاینِ بدون-important غلبه می‌کنیم. */

/* --- هدر --- */
html:not(.dark) header[style] {
    background: rgba(255,255,255,0.92) !important;
    border-bottom-color: rgba(249,115,22,0.18) !important;
    box-shadow: 0 4px 24px rgba(15,23,34,0.08) !important;
}
/* لوگو و عناوین سفید → تیره */
html:not(.dark) header [style*="color:#fff"] { color: #0f1722 !important; }
/* لینک‌های نویگیشن و متن‌های کم‌رنگِ سفید → خاکستری تیره */
html:not(.dark) header [style*="color:rgba(255,255,255,0.8)"] { color: rgba(15,23,34,0.85) !important; }
html:not(.dark) header [style*="color:rgba(255,255,255,0.75)"],
html:not(.dark) header [style*="color:rgba(255,255,255,0.62)"],
html:not(.dark) header [style*="color:rgba(255,255,255,0.6)"] { color: rgba(15,23,34,0.66) !important; }
html:not(.dark) header [style*="color:rgba(255,255,255,0.45)"],
html:not(.dark) header [style*="color:rgba(255, 255, 255, 0.55)"],
html:not(.dark) header [style*="color:rgba(255, 255, 255, 0.55)"] { color: rgba(15,23,34,0.5) !important; }
/* دکمه‌ها/چیپ‌های نیمه‌شفافِ سفید → سطح روشن */
html:not(.dark) header [style*="background:rgba(255,255,255,0.05)"],
html:not(.dark) header [style*="background:rgba(255,255,255,0.06)"],
html:not(.dark) header [style*="background:rgba(255,255,255,0.03)"] { background: rgba(15,23,34,0.05) !important; }
/* مرزهای سفیدِ شفاف */
html:not(.dark) header [style*="rgba(255,255,255,0.08)"],
html:not(.dark) header [style*="rgba(255,255,255,0.1)"],
html:not(.dark) header [style*="rgba(255,255,255,0.07)"] { border-color: rgba(15,23,34,0.12) !important; }
/* پنل منوی موبایل، منوی پروفایل و مودال جستجو (پس‌زمینه‌های خیلی تیره).
   از کلاس استفاده می‌کنیم چون Alpine هنگام toggleِ display استایلِ اینلاین را
   دوباره سریالایز می‌کند و hex را به rgb() تبدیل می‌کند (انتخابگرِ [style*=...] می‌شکند). */
html:not(.dark) header .lt-panel { background: rgba(255,255,255,0.98) !important; }
html:not(.dark) header .lt-card { background: #ffffff !important; }
html:not(.dark) header .lt-field { background: #f3f6fb !important; }
/* اینپوت جستجو در مودال */
html:not(.dark) header input[style] { color: #0f1722 !important; }
html:not(.dark) header input::placeholder { color: rgba(15,23,34,0.4) !important; }

/* هاوِر: onmouseover اینلاین رنگ متن را سفید (#fff) می‌کند که روی هدر روشن نامرئی است.
   با !important استایلِ اینلاینِ JS را override می‌کنیم. */
html:not(.dark) header nav a:hover { color: #0f1722 !important; background: rgba(15,23,34,0.06) !important; }
html:not(.dark) header .lt-panel a:hover { background: rgba(15,23,34,0.05) !important; }
html:not(.dark) header .lt-panel a:hover p[style*="color:#fff"] { color: #0f1722 !important; }

/* مهم: onmouseover/onmouseout با JS رنگ سفید را به‌صورت inline ست می‌کنند و مرورگر
   استایل را با فاصله دوباره سریالایز می‌کند (rgb(255, 255, 255) / rgba(255, 255, 255, 0.x)).
   پس فرمِ سریالایزشده را هم باید override کنیم وگرنه بعد از رد شدنِ موس نامرئی می‌شوند. */
html:not(.dark) header [style*="color: rgb(255, 255, 255)"],
html:not(.dark) header [style*="color:#fff"] { color: #0f1722 !important; }
html:not(.dark) header [style*="color: rgba(255, 255, 255, 0.6"],
html:not(.dark) header [style*="color: rgba(255, 255, 255, 0.5"] { color: rgba(15,23,34,0.66) !important; }
html:not(.dark) header [style*="color: rgba(255, 255, 255, 0.4"],
html:not(.dark) header [style*="color: rgba(255, 255, 255, 0.3"] { color: rgba(15,23,34,0.5) !important; }
/* پس‌زمینه‌ی سفیدِ شفاف که JS هنگام hover ست می‌کند (فرمِ فاصله‌دار) */
html:not(.dark) header [style*="background: rgba(255, 255, 255, 0.0"] { background: rgba(15,23,34,0.05) !important; }

/* --- دستیار هوشمند (AI chat) --- */
html:not(.dark) .aicw-panel { background: #ffffff !important; border-color: rgba(249,115,22,0.3) !important; box-shadow: 0 20px 50px rgba(15,23,34,0.15) !important; }
html:not(.dark) .aicw-head { border-bottom-color: rgba(15,23,34,0.08) !important; }
html:not(.dark) .aicw-head p[style*="color:#fff"] { color: #0f1722 !important; }
html:not(.dark) .aicw-close { background: rgba(15,23,34,0.05) !important; border-color: rgba(15,23,34,0.12) !important; color: rgba(15,23,34,0.5) !important; }
html:not(.dark) .aicw-bubble.bot { background: #f3f6fb !important; color: rgba(15,23,34,0.85) !important; border-color: rgba(15,23,34,0.08) !important; }
html:not(.dark) .aicw-foot { border-top-color: rgba(15,23,34,0.08) !important; }
html:not(.dark) .aicw-input { background: #f3f6fb !important; border-color: rgba(15,23,34,0.12) !important; color: #0f1722 !important; }
html:not(.dark) .aicw-input::placeholder { color: rgba(15,23,34,0.4) !important; }
html:not(.dark) .aicw-dot { border-color: #ffffff !important; }

/* فوتر در حالت روشن روشن می‌شود */
html:not(.dark) footer { background-color: #ffffff !important; }

/* متن‌ها */
html:not(.dark) .text-white { color: #0f1722 !important; }
html:not(.dark) .text-white\/90,
html:not(.dark) .text-white\/80,
html:not(.dark) .text-white\/75,
html:not(.dark) .text-white\/70 { color: rgba(15,23,34,0.82) !important; }
html:not(.dark) .text-white\/65,
html:not(.dark) .text-white\/62,
html:not(.dark) .text-white\/60,
html:not(.dark) .text-white\/55,
html:not(.dark) .text-white\/50 { color: rgba(15,23,34,0.62) !important; }
html:not(.dark) .text-white\/45,
html:not(.dark) .text-white\/40,
html:not(.dark) .text-white\/35,
html:not(.dark) .text-white\/30,
html:not(.dark) .text-white\/25,
html:not(.dark) .text-white\/20 { color: rgba(15,23,34,0.45) !important; }

/* مرزها */
html:not(.dark) .border-white\/5,
html:not(.dark) .border-white\/7,
html:not(.dark) .border-white\/8,
html:not(.dark) .border-white\/10,
html:not(.dark) .border-white\/20 { border-color: rgba(15,23,34,0.12) !important; }

/* پس‌زمینه‌های شفافِ سفید (کارت‌های نیمه‌شفاف) */
html:not(.dark) .bg-white\/5,
html:not(.dark) .bg-white\/\[0\.02\],
html:not(.dark) .bg-white\/\[0\.03\] { background-color: rgba(15,23,34,0.04) !important; }

/* محافظ: دکمه/المان‌های رنگی، متن سفید را حفظ کنند */
html:not(.dark) [class*="bg-gradient-to"].text-white,
html:not(.dark) .bg-orange-500.text-white,
html:not(.dark) .bg-orange-600.text-white,
html:not(.dark) .bg-red-500.text-white,
html:not(.dark) .bg-red-600.text-white,
html:not(.dark) .bg-cyan-500.text-white,
html:not(.dark) .bg-blue-600.text-white,
html:not(.dark) .bg-purple-500.text-white,
html:not(.dark) .bg-purple-600.text-white,
html:not(.dark) .bg-indigo-500.text-white,
html:not(.dark) .bg-indigo-600.text-white,
html:not(.dark) .bg-emerald-500.text-white,
html:not(.dark) .bg-emerald-600.text-white { color: #ffffff !important; }

[x-cloak] { display: none !important; }

html { scroll-padding-top: 72px; }
body { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 1024px) {
    body { padding-bottom: 0; }
}

/* ── صفحات جم: شیک، خوانا، موبایل‌اول ── */
.gem-page, .gem-page * { font-family: 'Vazirmatn', Tahoma, sans-serif !important; }
.gem-page { padding-bottom: 8px; }
.gem-crumbs { display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:12px; margin-bottom:14px; color:rgba(255,255,255,.45); }
.gem-crumbs a { color:rgba(255,255,255,.5); text-decoration:none; }
.gem-crumbs a:hover { color:#fb923c; }
.gem-crumbs .now { color:#fb923c; font-weight:700; }

.gem-hero {
    position: relative; overflow: hidden;
    background: linear-gradient(145deg, #1a120c 0%, #121820 55%, #1a0e0c 100%);
    border: 1px solid rgba(249,115,22,0.28);
    border-radius: 22px; padding: 18px 16px; margin-bottom: 14px;
    box-shadow: 0 18px 40px rgba(0,0,0,.28);
}
.gem-hero::before {
    content: ''; position: absolute; width: 240px; height: 240px; pointer-events: none;
    right: -50px; top: -80px;
    background: radial-gradient(circle, rgba(249,115,22,.38), transparent 68%);
}
.gem-hero::after {
    content: ''; position: absolute; width: 180px; height: 180px; pointer-events: none;
    left: -40px; bottom: -70px;
    background: radial-gradient(circle, rgba(239,68,68,.18), transparent 70%);
}
.gem-hero > * { position: relative; z-index: 1; }
@media (min-width: 768px) { .gem-hero { padding: 28px 32px; border-radius: 26px; } }
.gem-kicker {
    display:inline-flex; align-items:center; gap:8px;
    color:#fb923c; font-size:11px; font-weight:800; letter-spacing:.2px;
    background: rgba(249,115,22,.12); border:1px solid rgba(249,115,22,.28);
    border-radius:999px; padding:5px 10px; margin-bottom:10px;
}
.gem-hero h1 { color:#fff; font-size:1.45rem; font-weight:900; line-height:1.45; margin:0; }
@media (min-width: 768px) { .gem-hero h1 { font-size:2rem; } }
.gem-hero h1 span { display:block; margin-top:4px; background:linear-gradient(90deg,#fdba74,#f97316,#ef4444); -webkit-background-clip:text; background-clip:text; color:transparent; }
.gem-lead { color:rgba(255,255,255,.72); font-size:13.5px; line-height:1.9; margin:10px 0 0; }
.gem-trust { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.gem-trust span {
    font-size:11px; font-weight:700; color:rgba(255,255,255,.8);
    background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
    border-radius:999px; padding:6px 10px;
}
.gem-hero-cta { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px; padding-top:14px; border-top:1px solid rgba(255,255,255,.08); }
.gem-btn-primary, .gem-choice-btn {
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    min-height:46px; padding:0 18px; border-radius:14px;
    background:linear-gradient(135deg,#f97316,#dc2626); color:#fff !important;
    font-weight:800; font-size:14px; text-decoration:none; box-shadow:0 10px 22px rgba(249,115,22,.32);
}
.gem-choice-btn { width:100%; }
.gem-hero-cta .gem-btn-primary { width:auto; flex-shrink:0; min-width:150px; }
.gem-choice-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
@media (min-width: 768px) { .gem-choice-grid { gap:16px; } }
.gem-choice {
    display:flex; flex-direction:column; align-items:stretch; text-align:right; gap:8px;
    background: linear-gradient(165deg, #1e2838 0%, #121820 70%);
    border:1px solid rgba(255,255,255,.12); border-radius:18px;
    padding:14px 12px 12px; text-decoration:none; color:inherit;
    box-shadow: 0 12px 28px rgba(0,0,0,.28);
    transition: transform .2s, border-color .2s, box-shadow .2s;
}
.gem-choice-id { border-color: rgba(249,115,22,.55); box-shadow: 0 12px 32px rgba(249,115,22,.18); }
.gem-choice-cred { border-color: rgba(56,189,248,.4); box-shadow: 0 12px 32px rgba(14,165,233,.14); }
@media (min-width: 768px) { .gem-choice { padding:18px 16px 16px; gap:10px; border-radius:22px; } }
.gem-choice:hover { transform: translateY(-3px); }
.gem-choice-id:hover { border-color: #fb923c; box-shadow: 0 16px 36px rgba(249,115,22,.28); }
.gem-choice-cred:hover { border-color: #38bdf8; box-shadow: 0 16px 36px rgba(14,165,233,.24); }
.gem-choice-top { display:flex; align-items:center; gap:10px; }
.gem-choice-ico {
    width:44px; height:44px; border-radius:14px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; font-size:22px;
    background:linear-gradient(135deg,#f97316,#dc2626); box-shadow:0 8px 18px rgba(249,115,22,.35);
}
.gem-choice-cred .gem-choice-ico { box-shadow:0 8px 18px rgba(14,165,233,.35); }
@media (min-width: 768px) { .gem-choice-ico { width:52px; height:52px; font-size:26px; } }
.gem-choice-ico-img { padding:0; background:#0b1018; overflow:hidden; }
.gem-choice-ico img { width:100%; height:100%; object-fit:cover; border-radius:14px; }
.gem-choice h2 { margin:0; color:#fff; font-size:.98rem; font-weight:800; line-height:1.3; }
@media (min-width: 768px) { .gem-choice h2 { font-size:1.2rem; } }
.gem-choice .meta { color:#fb923c; font-size:11px; font-weight:800; display:block; margin-top:2px; }
.gem-choice-cred .meta { color:#38bdf8; }
.gem-choice p { margin:0; color:rgba(255,255,255,.78); font-size:12px; line-height:1.7; }
@media (min-width: 768px) { .gem-choice p { font-size:13.5px; } }
.gem-choice ul { margin:0; padding:0; list-style:none; display:grid; gap:4px; }
.gem-choice li { color:rgba(255,255,255,.82); font-size:12px; display:flex; gap:6px; align-items:center; }
@media (min-width: 768px) { .gem-choice li { font-size:13px; } }
.gem-choice li b { color:#34d399; }
.gem-choice .gem-choice-btn { width:100%; min-height:40px; font-size:13px; margin-top:auto; }
.gem-choice-cred .gem-choice-btn { background:linear-gradient(135deg,#0ea5e9,#2563eb); box-shadow:0 10px 22px rgba(14,165,233,.32); }

.gem-note { background:rgba(251,146,60,.1); border:1px solid rgba(251,146,60,.28); border-radius:16px; padding:12px 14px; color:#fdba74; font-size:13px; line-height:1.8; margin-bottom:14px; }
.gem-section-title { color:#fff; font-size:1.05rem; font-weight:800; margin:18px 0 10px; }
.gem-pack-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (min-width: 900px) { .gem-pack-grid { grid-template-columns: repeat(4, 1fr); gap:14px; } }

.gem-card {
    display:flex; flex-direction:column;
    background:#141b26; border:1px solid rgba(255,255,255,.08);
    border-radius:18px; overflow:hidden; text-decoration:none; color:inherit;
    box-shadow:0 10px 24px rgba(0,0,0,.2); transition: transform .18s, border-color .18s, box-shadow .18s;
}
.gem-card:hover { transform: translateY(-3px); border-color: rgba(249,115,22,.45); box-shadow: 0 14px 28px rgba(249,115,22,.14); }
.gem-card.is-sold { opacity:.62; pointer-events:none; }
.gem-card-thumb { position:relative; aspect-ratio: 5/4; background:#0d121a; overflow:hidden; }
.gem-card-thumb img { width:100%; height:100%; object-fit:cover; object-position:center 38%; display:block; transform:scale(1.04); }
.gem-card-thumb::after {
    content:''; position:absolute; inset:0;
    background: linear-gradient(180deg, transparent 40%,
        rgba(8,12,18,.55) 62%, rgba(8,12,18,.94) 100%);
    pointer-events:none;
}
.gem-card-qty {
    position:absolute; left:10px; right:10px; bottom:8px; z-index:2;
    font-family: 'Vazirmatn', Tahoma, sans-serif !important;
    font-weight:700; font-size:17px; line-height:1.1; color:#fff;
    text-shadow: 0 2px 10px rgba(0,0,0,.7); letter-spacing:.3px;
}
.gem-card-emoji { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:40px; z-index:1; }
.gem-card-badge { position:absolute; top:8px; right:8px; z-index:2; font-size:10px; font-weight:800; padding:4px 8px; border-radius:999px; backdrop-filter:blur(8px); }
.gem-card-badge.instant { background:rgba(4,120,87,.94); color:#fff; }
.gem-card-badge.weekly { background:rgba(249,115,22,.94); color:#fff; }
.gem-card-badge.monthly { background:rgba(16,185,129,.94); color:#fff; }
.gem-card-badge.offer { background:rgba(234,179,8,.94); color:#111; }
.gem-card-badge.gift { background:rgba(236,72,153,.94); color:#fff; }
.gem-card-badge.sold { background:rgba(190,24,24,.95); color:#fff; }
.gem-card-body { padding:10px 11px 12px; }
.gem-card-body h3 { color:#fff; font-size:13.5px; font-weight:800; margin:0 0 3px; }
.gem-card-sub { color:rgba(255,255,255,.55); font-size:11px; margin:0 0 8px; }
.gem-card-row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.gem-card-old { color:rgba(255, 255, 255, 0.55); font-size:10px; text-decoration:line-through; margin:0; }
.gem-card-price { color:#fb923c; font-weight:800; font-size:13.5px; margin:0; }
.gem-card-price span { color:rgba(255,255,255,.5); font-size:10px; font-weight:600; }
.gem-card-cta { background:linear-gradient(135deg,#f97316,#dc2626); color:#fff; font-size:11px; font-weight:800; padding:7px 11px; border-radius:10px; }

.gem-related { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0; }
.gem-related a {
    font-size:12px; font-weight:700; color:#fb923c; background:rgba(249,115,22,.1);
    border:1px solid rgba(249,115,22,.22); padding:8px 12px; border-radius:999px; text-decoration:none;
}
.gem-faq { background:#141b26; border:1px solid rgba(255,255,255,.08); border-radius:20px; padding:16px; margin-top:8px; }
.gem-faq h2 { color:#fff; font-size:1.05rem; font-weight:800; margin:0 0 12px; }
.gem-faq details { background:#0f141c; border:1px solid rgba(255,255,255,.07); border-radius:14px; padding:12px 14px; margin-bottom:8px; }
.gem-faq summary { color:#fff; font-weight:700; cursor:pointer; font-size:14px; }
.gem-faq p { color:rgba(255,255,255,.68); font-size:13px; line-height:1.85; margin:8px 0 0; }
.gem-price-table-wrap { overflow-x:auto; margin:8px 0 18px; background:#141b26; border:1px solid rgba(255,255,255,.08); border-radius:18px; }
.gem-price-table-wrap h2 { color:#fff; font-size:1.05rem; padding:16px 16px 0; font-weight:800; }
.gem-price-table { width:100%; border-collapse:collapse; min-width:480px; }
.gem-price-table th, .gem-price-table td { padding:12px 14px; text-align:right; font-size:13px; border-bottom:1px solid rgba(255,255,255,.06); }
.gem-price-table th { color:rgba(255,255,255,.5); font-weight:700; }
.gem-price-table td { color:#fff; }
.gem-price-table td.price { color:#fb923c; font-weight:800; }
.gem-price-table a { color:#fb923c; font-weight:700; }

.gem-buy-bar {
    position: sticky; bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    z-index: 40; background: rgba(17,25,36,.96); backdrop-filter: blur(16px);
    border: 1px solid rgba(249,115,22,.25); border-radius: 18px;
    padding: 12px; margin-top: 8px;
}
@media (min-width: 1024px) { .gem-buy-bar { position: static; bottom: auto; } }

/* تم روشن: کارت روشن، متن تیره، دکمه نارنجی سفید می‌ماند */
html:not(.dark) .gem-page .gem-crumbs, html:not(.dark) .gem-page .gem-crumbs a { color:#55616f; }
html:not(.dark) .gem-page .gem-crumbs .now, html:not(.dark) .gem-page .gem-crumbs a:hover { color:#c2410c; }
html:not(.dark) .gem-hero {
    background: linear-gradient(145deg, #fff7ed, #ffffff 48%, #fff1f2) !important;
    border-color: rgba(234,88,12,.2) !important; box-shadow: 0 12px 30px rgba(15,23,42,.08);
}
html:not(.dark) .gem-hero::before { background: radial-gradient(circle, rgba(249,115,22,.18), transparent 68%); }
html:not(.dark) .gem-hero h1, html:not(.dark) .gem-section-title, html:not(.dark) .gem-faq h2,
html:not(.dark) .gem-faq summary, html:not(.dark) .gem-price-table td, html:not(.dark) .gem-choice h2 { color:#0f172a !important; }
html:not(.dark) .gem-lead, html:not(.dark) .gem-choice p, html:not(.dark) .gem-choice li,
html:not(.dark) .gem-faq p { color:#475569 !important; }
html:not(.dark) .gem-trust span { color:#334155; background:#fff; border-color:rgba(15,23,42,.1); }
html:not(.dark) .gem-choice, html:not(.dark) .gem-card, html:not(.dark) .gem-faq, html:not(.dark) .gem-price-table-wrap {
    background:#ffffff !important; border-color:rgba(15,23,42,.1) !important; box-shadow:0 10px 24px rgba(15,23,42,.06);
}
html:not(.dark) .gem-faq details { background:#f8fafc; border-color:rgba(15,23,42,.08); }
html:not(.dark) .gem-card-body h3 { color:#0f172a !important; }
html:not(.dark) .gem-card-sub { color:#64748b !important; }
html:not(.dark) .gem-card-price span { color:#64748b; }
/* قیمت نارنجیِ روشن روی کارت سفید ۲.۳ به ۱ بود — یعنی خودِ عددی که خریدار
   آمده ببیند، کم‌رنگ‌ترین چیز کارت بود. */
html:not(.dark) .gem-card-price { color:#c2410c; }
.gem-inline-link { color:#fb923c; font-weight:800; }
html:not(.dark) .gem-inline-link { color:#c2410c; }
html:not(.dark) .gem-card-old { color:#8a94a3; }
html:not(.dark) .gem-related a { background:#fff7ed; color:#c2410c; border-color:#fed7aa; }
html:not(.dark) .gem-note { background:#fff7ed; color:#9a3412; border-color:#fdba74; }
html:not(.dark) .gem-lead strong { color:#c2410c; }
html:not(.dark) .gem-choice .meta { color:#ea580c; }
html:not(.dark) .gem-choice-cred .meta { color:#0284c7; }
html:not(.dark) .gem-choice-id { border-color: rgba(234,88,12,.45) !important; box-shadow: 0 10px 24px rgba(234,88,12,.12) !important; }
html:not(.dark) .gem-choice-cred { border-color: rgba(2,132,199,.4) !important; box-shadow: 0 10px 24px rgba(2,132,199,.1) !important; }
html:not(.dark) .gem-choice li b { color:#059669; }
html:not(.dark) .gem-btn-primary, html:not(.dark) .gem-choice-btn, html:not(.dark) .gem-card-cta { color:#fff !important; }
html:not(.dark) .gem-hero-cta { border-top-color: rgba(15,23,42,.08); }
html:not(.dark) .gem-buy-bar {
    background: rgba(255,255,255,.97) !important;
    border-color: rgba(234,88,12,.22);
    box-shadow: 0 12px 28px rgba(15,23,42,.1);
}
html:not(.dark) .gem-buy-bar button { color:#fff !important; }
html:not(.dark) .gem-card-qty { color:#fff !important; }

/* ── پک سنس: هویت تاکتیکال (فیروزه + لایم) — توکن‌محور برای هر دو تم ── */
.sens-page {
    --s-accent:      #22d3ee;
    --s-accent-soft: #67e8f9;
    --s-accent-deep: #0f766e;
    --s-lime:        #a3e635;
    --s-on-accent:   #04141b;

    --s-ink:        #060f16;
    --s-surface:    linear-gradient(180deg, #0f1d28 0%, #0a131c 100%);
    --s-surface-2:  #0a131c;
    --s-well:       #071018;

    --s-line:        rgba(34,211,238,.16);
    --s-line-strong: rgba(34,211,238,.42);

    --s-title: #f2fdff;
    --s-text:  rgba(219,246,253,.88);
    --s-muted: rgba(200,232,242,.76);
    --s-faint: rgba(200,232,242,.58);

    --s-shadow:      0 16px 34px rgba(0,0,0,.30);
    --s-shadow-lift: 0 22px 44px rgba(34,211,238,.16);
    --s-glow:        0 12px 26px rgba(34,211,238,.26);

    --s-r-lg: 26px;
    --s-r-md: 20px;
    --s-r-sm: 14px;

    position: relative;
}
html:not(.dark) .sens-page {
    --s-accent:      #0e7490;
    --s-accent-soft: #155e75;
    --s-accent-deep: #0f766e;
    --s-lime:        #4d7c0f;
    --s-on-accent:   #ffffff;

    --s-ink:        #f4fbfd;
    --s-surface:    linear-gradient(180deg, #ffffff 0%, #f7fdff 100%);
    --s-surface-2:  #ffffff;
    --s-well:       #f1f8fb;

    --s-line:        rgba(8,145,178,.18);
    --s-line-strong: rgba(8,145,178,.42);

    --s-title: #0b1b26;
    --s-text:  #35505e;
    --s-muted: #4f6373;
    --s-faint: #5c7080;

    --s-shadow:      0 12px 28px rgba(15,23,42,.08);
    --s-shadow-lift: 0 18px 36px rgba(8,145,178,.16);
    --s-glow:        0 12px 24px rgba(8,145,178,.22);
}
.sens-page, .sens-page * { font-family: 'Vazirmatn', Tahoma, sans-serif !important; }
.sens-shop { padding-bottom: 28px; }
.sens-page::before {
    content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
    background:
        radial-gradient(760px 340px at 100% -10%, rgba(34,211,238,.13), transparent 60%),
        radial-gradient(600px 300px at 0% 100%, rgba(163,230,53,.07), transparent 55%);
}
html:not(.dark) .sens-page::before {
    background:
        radial-gradient(760px 340px at 100% -10%, rgba(8,145,178,.10), transparent 60%),
        radial-gradient(600px 300px at 0% 100%, rgba(101,163,13,.07), transparent 55%);
}
.sens-page :focus-visible { outline: 2px solid var(--s-accent); outline-offset: 2px; border-radius: 10px; }

/* ── مسیر ── */
.sens-crumbs { display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:12px; margin-bottom:16px; color:var(--s-faint); }
.sens-crumbs a { color:var(--s-muted); text-decoration:none; transition:color .18s; }
.sens-crumbs a:hover { color:var(--s-accent); }
.sens-crumbs .now { color:var(--s-accent); font-weight:800; }

/* ── بنر ── */
.sens-banner {
    position:relative; overflow:hidden;
    background:
        linear-gradient(155deg, rgba(9,23,32,.96), rgba(6,15,22,.98) 52%, rgba(9,26,20,.94)),
        repeating-linear-gradient(90deg, transparent 0 26px, rgba(34,211,238,.030) 26px 27px),
        repeating-linear-gradient(0deg, transparent 0 26px, rgba(34,211,238,.030) 26px 27px);
    border:1px solid var(--s-line-strong);
    border-radius: var(--s-r-lg); padding:22px 18px 20px; margin-bottom:14px;
    box-shadow: var(--s-shadow), inset 0 1px 0 rgba(103,232,249,.10);
}
html:not(.dark) .sens-banner {
    background:
        linear-gradient(150deg, #ecfeff 0%, #ffffff 52%, #f2fdf5 100%),
        repeating-linear-gradient(90deg, transparent 0 26px, rgba(8,145,178,.045) 26px 27px);
    box-shadow: var(--s-shadow);
}
.sens-banner::before {
    content:''; position:absolute; pointer-events:none;
    width:300px; height:300px; left:-80px; top:-100px;
    background: radial-gradient(circle, rgba(34,211,238,.26), transparent 68%);
}
html:not(.dark) .sens-banner::before { background: radial-gradient(circle, rgba(8,145,178,.16), transparent 68%); }
.sens-banner-inner { position:relative; z-index:1; display:flex; flex-direction:column; gap:11px; }
@media (min-width: 768px) {
    .sens-banner { padding:32px 34px 28px; border-radius:30px; }
    .sens-banner-inner { max-width:680px; margin-right:auto; }
}
.sens-kicker {
    display:inline-flex; align-items:center; gap:8px; width:max-content;
    color:var(--s-accent); font-size:11px; font-weight:800;
    background:color-mix(in srgb, var(--s-accent) 10%, transparent);
    border:1px solid var(--s-line-strong);
    border-radius:999px; padding:6px 12px;
}
.sens-kicker i {
    width:7px; height:7px; border-radius:50%; background:var(--s-lime);
    box-shadow:0 0 10px var(--s-lime); display:inline-block;
    animation: sensPulse 1.6s ease-in-out infinite;
}
@keyframes sensPulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.45; transform:scale(.7); } }
.sens-banner h1 { color:var(--s-title); font-size:1.45rem; font-weight:900; line-height:1.4; margin:0; }
@media (min-width: 768px) { .sens-banner h1 { font-size:2.1rem; } }
.sens-banner h1 span {
    display:block; margin-top:7px; font-size:.6em; font-weight:800;
    background:linear-gradient(90deg, var(--s-accent-soft), var(--s-accent), var(--s-lime));
    -webkit-background-clip:text; background-clip:text; color:transparent;
}
.sens-lead { color:var(--s-text); font-size:13px; line-height:1.95; margin:0; }
.sens-pills { display:flex; flex-wrap:wrap; gap:8px; margin-top:2px; }
.sens-pills span {
    display:inline-flex; align-items:center; gap:6px;
    font-size:11.5px; font-weight:800; color:var(--s-text);
    background:color-mix(in srgb, var(--s-accent) 8%, transparent);
    border:1px solid var(--s-line); border-radius:999px; padding:7px 12px;
}
.sens-pills svg { width:13px; height:13px; color:var(--s-accent); flex-shrink:0; }

/* ── نوار فیلتر ── */
.sens-toolbar {
    background:var(--s-surface); border:1px solid var(--s-line);
    border-radius: var(--s-r-md); padding:10px; margin-bottom:16px;
    box-shadow: var(--s-shadow);
}
.sens-seg {
    display:grid; grid-template-columns:1fr 1fr; gap:4px;
    background:color-mix(in srgb, var(--s-well) 70%, transparent);
    border:1px solid var(--s-line); border-radius: var(--s-r-sm); padding:4px;
}
.sens-seg a {
    display:flex; align-items:center; justify-content:center; gap:8px;
    min-height:44px; border-radius:11px; text-decoration:none;
    color:var(--s-muted); font-size:13px; font-weight:800;
    transition: background .18s, color .18s, box-shadow .18s;
}
.sens-seg a:hover { color:var(--s-title); }
.sens-seg a.is-on {
    background:linear-gradient(135deg, var(--s-accent), var(--s-accent-deep));
    color:var(--s-on-accent); box-shadow: var(--s-glow);
}
.sens-seg svg { width:16px; height:16px; }
.sens-filter-row { display:flex; align-items:center; gap:10px; margin-top:10px; }
.sens-chips { display:flex; gap:8px; overflow-x:auto; flex:1; padding:2px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.sens-chips::-webkit-scrollbar { display:none; }
.sens-chips a {
    flex:0 0 auto; padding:9px 15px; border-radius:999px; text-decoration:none;
    font-size:12px; font-weight:800; color:var(--s-muted);
    background:var(--s-surface-2); border:1px solid var(--s-line);
    transition: border-color .18s, color .18s, background .18s;
}
.sens-chips a:hover { color:var(--s-title); border-color:var(--s-line-strong); }
.sens-chips a.is-on {
    color:var(--s-on-accent); border-color:transparent;
    background:linear-gradient(135deg, var(--s-accent-soft), var(--s-accent));
    box-shadow: var(--s-glow);
}
.sens-count { flex:0 0 auto; font-size:11.5px; font-weight:800; color:var(--s-faint); padding-inline-start:4px; white-space:nowrap; }
@media (max-width: 520px) { .sens-count { display:none; } }

.sens-note {
    display:flex; gap:10px; align-items:flex-start;
    background:color-mix(in srgb, var(--s-lime) 10%, transparent);
    border:1px solid color-mix(in srgb, var(--s-lime) 34%, transparent);
    border-radius: var(--s-r-sm); padding:13px 15px; color:var(--s-text);
    font-size:12.5px; line-height:1.9; margin-bottom:14px;
}
.sens-note svg { width:17px; height:17px; color:var(--s-lime); flex-shrink:0; margin-top:2px; }
.sens-note strong { color:var(--s-title); font-weight:800; }

/* ── شبکه کارت‌ها ── */
.sens-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
@media (min-width: 720px)  { .sens-grid { grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; } }
@media (min-width: 1080px) { .sens-grid { grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; } }

.sens-item {
    position:relative; display:flex; flex-direction:column;
    background: var(--s-surface); border:1px solid var(--s-line);
    border-radius: var(--s-r-md); overflow:hidden; color:inherit;
    box-shadow: var(--s-shadow);
    transition: transform .22s ease, border-color .22s, box-shadow .22s;
}
.sens-item:hover {
    transform: translateY(-5px);
    border-color: var(--s-line-strong);
    box-shadow: var(--s-shadow-lift);
}
.sens-item-media {
    position:relative; aspect-ratio:16/10; overflow:hidden; display:block;
    background:
        radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--s-accent) 14%, transparent), transparent 70%),
        var(--s-well);
}
.sens-item-media img { width:100%; height:100%; object-fit:cover; display:block; transition: transform .5s ease; }
.sens-item:hover .sens-item-media img { transform: scale(1.06); }
.sens-plate {
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    background-image:
        repeating-linear-gradient(90deg, transparent 0 18px, color-mix(in srgb, var(--s-accent) 8%, transparent) 18px 19px),
        repeating-linear-gradient(0deg, transparent 0 18px, color-mix(in srgb, var(--s-accent) 8%, transparent) 18px 19px);
}
.sens-plate svg {
    width:52px; height:52px; color:var(--s-accent); position:relative; z-index:1;
    opacity:.92; filter: drop-shadow(0 6px 14px color-mix(in srgb, var(--s-accent) 45%, transparent));
    transition: transform .35s ease;
}
.sens-item:hover .sens-plate svg { transform: scale(1.08) rotate(-3deg); }
.sens-plate::after {
    content:''; position:absolute; inset:0;
    background:linear-gradient(115deg, transparent 40%, color-mix(in srgb, var(--s-accent) 12%, transparent) 50%, transparent 60%);
}
.sens-item-media::after {
    content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
    background:linear-gradient(180deg, transparent 52%, color-mix(in srgb, var(--s-ink) 78%, transparent));
}
.sens-item-tag {
    position:absolute; top:10px; right:10px; z-index:2;
    font-size:10px; font-weight:800; padding:5px 10px; border-radius:999px;
    background:linear-gradient(135deg, var(--s-lime), color-mix(in srgb, var(--s-lime) 60%, #000));
    color:#0a2005;
}
html:not(.dark) .sens-item-tag { color:#ffffff; }
.sens-item-off {
    position:absolute; top:10px; left:10px; z-index:2;
    font-size:10px; font-weight:900; padding:5px 9px; border-radius:999px;
    background:linear-gradient(135deg,#f43f5e,#be123c); color:#fff;
    box-shadow:0 8px 16px rgba(244,63,94,.3);
}
.sens-item-dev {
    position:absolute; bottom:10px; right:10px; z-index:2;
    display:inline-flex; align-items:center; gap:5px;
    font-size:10px; font-weight:800; padding:5px 10px; border-radius:999px;
    background:color-mix(in srgb, var(--s-ink) 70%, transparent);
    color:var(--s-accent-soft); border:1px solid var(--s-line-strong);
    backdrop-filter: blur(8px);
}
html:not(.dark) .sens-item-dev { background:rgba(255,255,255,.88); color:var(--s-accent); }
.sens-item-dev svg { width:11px; height:11px; }
.sens-item-sold {
    position:absolute; inset:0; z-index:3;
    background:color-mix(in srgb, var(--s-ink) 62%, transparent);
    display:flex; align-items:center; justify-content:center;
    backdrop-filter: blur(2px);
}
html:not(.dark) .sens-item-sold { background:rgba(15,23,42,.42); }
.sens-item-sold span { background:#ef4444; color:#fff; font-size:11px; font-weight:800; padding:7px 13px; border-radius:999px; }
.sens-item-body { padding:13px 13px 14px; display:flex; flex-direction:column; flex:1; }
.sens-item-body h3 {
    color:var(--s-title); font-size:14px; font-weight:800; margin:0 0 5px; line-height:1.5;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    transition: color .18s;
}
.sens-item-body a:hover h3 { color:var(--s-accent); }
.sens-item-desc {
    color:var(--s-muted); font-size:11.5px; margin:0 0 10px; line-height:1.75;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.sens-price-row { display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; margin:auto 0 11px; }
.sens-item-price { color:var(--s-accent); font-weight:900; font-size:15px; margin:0; }
.sens-item-price span { color:var(--s-faint); font-size:10px; font-weight:700; margin-inline-start:2px; }
.sens-item-old { color:var(--s-faint); font-size:10.5px; text-decoration:line-through; margin:0; }
.sens-item-actions { display:flex; gap:7px; }
.sens-item-actions a, .sens-item-actions button, .sens-item-actions span.dead {
    flex:1; min-height:40px; border-radius:12px; font-size:11.5px; font-weight:800;
    display:flex; align-items:center; justify-content:center; gap:5px;
    text-decoration:none; border:0; cursor:pointer; transition: background .18s, transform .18s, box-shadow .18s;
}
.sens-item-actions a { background:transparent; color:var(--s-accent); border:1px solid var(--s-line-strong) !important; }
.sens-item-actions a:hover { background:color-mix(in srgb, var(--s-accent) 10%, transparent); }
.sens-item-actions button {
    background:linear-gradient(135deg, var(--s-accent), var(--s-accent-deep));
    color:var(--s-on-accent); box-shadow: var(--s-glow);
}
.sens-item-actions button:hover { transform: translateY(-1px); }
.sens-item-actions button svg { width:14px; height:14px; }
.sens-item-actions span.dead {
    background:color-mix(in srgb, var(--s-muted) 12%, transparent);
    color:var(--s-faint); cursor:not-allowed; border:1px solid var(--s-line);
}

/* ── حالت خالی ── */
.sens-empty {
    text-align:center; background:var(--s-surface); border:1px dashed var(--s-line-strong);
    border-radius: var(--s-r-lg); padding:38px 18px;
}
.sens-empty svg { width:44px; height:44px; color:var(--s-accent); opacity:.75; margin:0 auto 10px; }
/* عنوان بخشِ گرید. بدون آن کارت‌های h3 مستقیم زیر h1 می‌نشستند. */
.sens-section-title { color:var(--s-title); font-size:1.05rem; font-weight:800; margin:18px 0 10px; }
.sens-empty h3 { color:var(--s-title); font-size:1.05rem; font-weight:800; margin:0 0 6px; }
.sens-empty p { color:var(--s-muted); font-size:13px; margin:0; }

/* ── مزیت‌ها ── */
.sens-feats { display:grid; grid-template-columns:1fr; gap:10px; margin-top:20px; }
@media (min-width: 640px) { .sens-feats { grid-template-columns:repeat(3, 1fr); gap:12px; } }
.sens-feat {
    display:flex; align-items:center; gap:12px;
    background:var(--s-surface); border:1px solid var(--s-line);
    border-radius: var(--s-r-md); padding:14px 15px; box-shadow: var(--s-shadow);
}
.sens-feat .ico {
    width:42px; height:42px; border-radius:13px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    background:color-mix(in srgb, var(--s-accent) 12%, transparent);
    border:1px solid var(--s-line-strong); color:var(--s-accent);
}
.sens-feat .ico svg { width:19px; height:19px; }
.sens-feat h4 { color:var(--s-title); font-size:13.5px; font-weight:800; margin:0 0 2px; }
.sens-feat p { color:var(--s-muted); font-size:11.5px; margin:0; line-height:1.6; }

/* ── مودال ── */
.sens-modal-card {
    background: var(--s-surface); border:1px solid var(--s-line-strong);
    border-radius: var(--s-r-lg); box-shadow: 0 26px 60px rgba(0,0,0,.5);
}
html:not(.dark) .sens-modal-card { box-shadow: 0 26px 60px rgba(15,23,42,.22); }
.sens-modal-icon {
    background:linear-gradient(135deg, var(--s-accent), var(--s-accent-deep));
    color:var(--s-on-accent); box-shadow: var(--s-glow);
}
.sens-modal-icon svg { width:26px; height:26px; }
.sens-modal-title { color:var(--s-title); font-size:1.05rem; font-weight:800; margin:0; }
.sens-modal-sub { color:var(--s-muted); font-size:12px; line-height:1.9; margin:6px 0 0; }
.sens-modal-sub b { color:var(--s-accent); font-weight:800; }
.sens-modal-btn {
    background:linear-gradient(135deg, var(--s-accent), var(--s-accent-deep));
    color:var(--s-on-accent); box-shadow: var(--s-glow); border:0; cursor:pointer;
}
.sens-modal-close {
    display:flex; align-items:center; justify-content:center;
    width:32px; height:32px; border-radius:50%; border:1px solid var(--s-line);
    background:transparent; color:var(--s-muted); cursor:pointer; transition:color .18s, background .18s;
}
.sens-modal-close:hover { color:var(--s-title); background:color-mix(in srgb, var(--s-muted) 12%, transparent); }
.sens-modal-ghost {
    border:1px solid var(--s-line); color:var(--s-muted); background:transparent;
    border-radius:16px; font-size:13px; font-weight:800; cursor:pointer; transition:color .18s, background .18s;
}
.sens-modal-ghost:hover { color:var(--s-title); background:color-mix(in srgb, var(--s-muted) 10%, transparent); }
.sens-err { color:#fb7185; font-size:11.5px; margin:8px 0 0; }
html:not(.dark) .sens-err { color:#be123c; }
.sens-label { display:block; font-size:12.5px; font-weight:700; color:var(--s-muted); margin-bottom:8px; }
.sens-input {
    width:100%; padding:13px 36px 13px 14px; border-radius:16px;
    background:var(--s-well); border:1px solid var(--s-line);
    color:var(--s-title); font-size:13px; text-align:left; direction:ltr;
    transition:border-color .18s, box-shadow .18s;
}
.sens-input::placeholder { color:var(--s-faint); }
.sens-input:focus {
    outline:none; border-color:var(--s-accent);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--s-accent) 18%, transparent);
}
.sens-input.rtl { direction:rtl; text-align:right; padding:13px 14px; }
.sens-input-at { position:absolute; right:14px; top:50%; transform:translateY(-50%); font-size:13px; font-weight:800; color:var(--s-accent); }
.sens-textarea {
    width:100%; padding:13px 14px; border-radius:16px; resize:vertical;
    background:var(--s-well); border:1px solid var(--s-line);
    color:var(--s-title); font-size:13px; line-height:1.9;
}
.sens-textarea:focus { outline:none; border-color:var(--s-accent); }

/* ── صفحه جزئیات ── */
.sens-frame {
    position:relative; border-radius: var(--s-r-lg); overflow:hidden;
    background:
        radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--s-accent) 14%, transparent), transparent 70%),
        var(--s-well);
    border:1px solid var(--s-line-strong);
    aspect-ratio:16/11; display:flex; align-items:center; justify-content:center;
    box-shadow: var(--s-shadow);
}
.sens-frame img { width:100%; height:100%; object-fit:contain; }
.sens-frame::before, .sens-frame::after {
    content:''; position:absolute; width:26px; height:26px; pointer-events:none; z-index:2;
    border:2px solid var(--s-accent); opacity:.65;
}
.sens-frame::before { top:12px; right:12px; border-left:0; border-bottom:0; }
.sens-frame::after { bottom:12px; left:12px; border-right:0; border-top:0; }
.sens-frame .sens-plate svg { width:96px; height:96px; }
.sens-frame-tags { position:absolute; top:14px; right:14px; z-index:4; display:flex; flex-direction:column; gap:8px; align-items:flex-end; }
.sens-frame-tags .sens-item-tag, .sens-frame-tags .sens-item-off { position:static; }

.sens-chip {
    display:inline-flex; align-items:center; gap:6px; padding:7px 13px; border-radius:999px;
    font-size:12px; font-weight:800; border:1px solid var(--s-line-strong);
    background:color-mix(in srgb, var(--s-accent) 10%, transparent); color:var(--s-accent);
}
.sens-chip.ghost { background:transparent; color:var(--s-muted); border-color:var(--s-line); }
.sens-chip svg { width:13px; height:13px; }

.sens-title { color:var(--s-title); font-size:1.7rem; font-weight:900; line-height:1.45; margin:0; }
@media (min-width: 768px) { .sens-title { font-size:2.1rem; } }

.sens-mini {
    display:flex; align-items:center; gap:10px; padding:12px;
    background:var(--s-surface); border:1px solid var(--s-line); border-radius: var(--s-r-sm);
}
.sens-mini .ico {
    width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center;
    background:color-mix(in srgb, var(--s-accent) 12%, transparent);
    border:1px solid var(--s-line-strong); color:var(--s-accent); flex-shrink:0;
}
.sens-mini .ico svg { width:17px; height:17px; }
.sens-mini .k { display:block; font-size:11px; color:var(--s-faint); margin:0 0 2px; }
.sens-mini .v { display:block; font-size:13px; color:var(--s-title); font-weight:800; margin:0; }

.sens-buy-card {
    padding:18px; border-radius: var(--s-r-lg);
    background:var(--s-surface); border:1px solid var(--s-line-strong);
    box-shadow: var(--s-shadow);
}
@media (min-width: 1024px) { .sens-buy-card { position:sticky; top:130px; } }
.sens-buy-k { font-size:12.5px; color:var(--s-muted); }
.sens-buy-price { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin:6px 0 14px; }
.sens-buy-price b { color:var(--s-accent); font-size:1.85rem; font-weight:900; line-height:1; }
.sens-buy-price i { color:var(--s-faint); font-size:12.5px; font-style:normal; font-weight:700; }
.sens-buy-price s { color:var(--s-faint); font-size:12.5px; }
.sens-buy-btn {
    width:100%; min-height:54px; border:0; border-radius:16px; cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:8px;
    font-size:15px; font-weight:900; color:var(--s-on-accent);
    background:linear-gradient(135deg, var(--s-accent), var(--s-accent-deep));
    box-shadow: var(--s-glow); transition: transform .18s, box-shadow .18s;
}
.sens-buy-btn:hover { transform: translateY(-2px); box-shadow: var(--s-shadow-lift); }
.sens-buy-btn svg { width:19px; height:19px; }
.sens-buy-dead {
    width:100%; min-height:54px; border-radius:16px; display:flex; align-items:center;
    justify-content:center; gap:8px; font-size:14px; font-weight:800; cursor:not-allowed;
}
.sens-buy-dead.off { background:rgba(239,68,68,.10); border:1px solid rgba(239,68,68,.32); color:#f87171; }
.sens-buy-dead.own { background:rgba(16,185,129,.10); border:1px solid rgba(16,185,129,.32); color:#34d399; }
html:not(.dark) .sens-buy-dead.off { color:#b91c1c; }
html:not(.dark) .sens-buy-dead.own { color:#047857; }
.sens-buy-hint { text-align:center; font-size:11.5px; color:var(--s-faint); margin:12px 0 0; }

.sens-tabs { display:flex; align-items:center; gap:8px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none; }
.sens-tabs::-webkit-scrollbar { display:none; }
.sens-tab {
    padding:11px 18px; border-radius:999px; font-size:13px; font-weight:800; white-space:nowrap;
    background:var(--s-surface-2); color:var(--s-muted); border:1px solid var(--s-line); cursor:pointer;
    transition: color .18s, background .18s, box-shadow .18s;
}
.sens-tab:hover { color:var(--s-title); }
.sens-tab.is-on {
    color:var(--s-on-accent); border-color:transparent;
    background:linear-gradient(135deg, var(--s-accent), var(--s-accent-deep));
    box-shadow: var(--s-glow);
}
.sens-panel {
    background:var(--s-surface); border:1px solid var(--s-line);
    border-radius: var(--s-r-lg); padding:22px 18px; box-shadow: var(--s-shadow);
}
@media (min-width: 768px) { .sens-panel { padding:28px; } }
.sens-panel h2 { color:var(--s-title); font-size:1.2rem; font-weight:900; margin:0 0 14px; }
.sens-panel h2 small { color:var(--s-faint); font-size:12px; font-weight:700; margin-inline-start:8px; }
.sens-body-text { color:var(--s-text); font-size:13.5px; line-height:2.05; margin:0 0 20px; white-space:pre-line; }
.sens-review { display:flex; gap:12px; padding:16px; align-items:flex-start; }
.sens-review .av {
    width:40px; height:40px; border-radius:12px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; font-weight:900;
    background:linear-gradient(135deg, var(--s-accent), var(--s-accent-deep)); color:var(--s-on-accent);
}
.sens-review .nm { color:var(--s-title); font-weight:800; font-size:13.5px; }
.sens-review .dt { color:var(--s-faint); font-size:11.5px; }
.sens-review p { color:var(--s-text); font-size:13px; line-height:1.95; margin:0; }
.sens-empty-note { color:var(--s-muted); font-size:13px; text-align:center; padding:22px 0; margin:0; }
.sens-stars { display:flex; gap:2px; }
.sens-stars svg { width:15px; height:15px; color:var(--s-line-strong); opacity:.5; }
.sens-stars svg.on { color:var(--s-lime); opacity:1; }
.sens-form {
    margin-top:26px; padding:18px; border-radius: var(--s-r-md);
    background:color-mix(in srgb, var(--s-well) 70%, transparent); border:1px solid var(--s-line);
}
.sens-form h3 { color:var(--s-title); font-size:13.5px; font-weight:800; margin:0 0 14px; }
.sens-back {
    display:inline-flex; align-items:center; gap:8px; padding:11px 20px; border-radius:999px;
    border:1px solid var(--s-line-strong); color:var(--s-accent); text-decoration:none;
    font-size:13px; font-weight:800; transition: background .18s;
}
.sens-back:hover { background:color-mix(in srgb, var(--s-accent) 10%, transparent); }
.sens-back svg { width:15px; height:15px; }

@media (prefers-reduced-motion: reduce) {
    .sens-page *, .sens-page *::before, .sens-page *::after {
        animation-duration:.01ms !important; animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }
    .sens-item:hover { transform:none; }
}

/* ── صفحه اصلی: موبایل‌اول، توکن‌محور برای هر دو تم ── */
.hm {
    --h-accent:     #f97316;
    --h-accent-2:   #ef4444;
    --h-gold:       #fbbf24;
    --h-on-accent:  #ffffff;

    --h-surface:   linear-gradient(180deg, #151d29 0%, #101722 100%);
    --h-surface-2: #121a24;
    --h-well:      #0b1119;

    --h-line:        rgba(255,255,255,.08);
    --h-line-strong: rgba(249,115,22,.34);

    --h-title: #f5f8fc;
    --h-text:  rgba(226,236,246,.78);
    --h-muted: rgba(203,216,232,.55);
    --h-faint: rgba(203,216,232,.36);

    --h-shadow: 0 16px 34px rgba(0,0,0,.32);
    --h-glow:   0 14px 28px rgba(249,115,22,.30);

    --h-r-lg: 24px;
    --h-r-md: 18px;
    --h-r-sm: 13px;
}
html:not(.dark) .hm {
    --h-accent:    #ea580c;
    --h-accent-2:  #dc2626;
    --h-gold:      #d97706;

    --h-surface:   linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
    --h-surface-2: #ffffff;
    --h-well:      #f1f5f9;

    --h-line:        rgba(15,23,42,.10);
    --h-line-strong: rgba(234,88,12,.34);

    --h-title: #0f1b2a;
    --h-text:  #41546b;
    --h-muted: #64748b;
    --h-faint: #94a3b8;

    --h-shadow: 0 12px 28px rgba(15,23,42,.08);
    --h-glow:   0 12px 24px rgba(234,88,12,.24);
}
.hm :focus-visible { outline:2px solid var(--h-accent); outline-offset:2px; border-radius:10px; }
.hm-wrap { width:100%; max-width:1180px; margin:0 auto; padding:0 14px; }
@media (min-width:768px) { .hm-wrap { padding:0 24px; } }

.hm-sec { padding:30px 0; }
@media (min-width:768px) { .hm-sec { padding:48px 0; } }
.hm-sec-head { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:16px; }
.hm-kicker {
    display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:999px;
    background:color-mix(in srgb, var(--h-accent) 12%, transparent);
    color:var(--h-accent); font-size:10.5px; font-weight:800;
}
.hm-kicker svg { width:12px; height:12px; }
.hm-sec-head h2 { color:var(--h-title); font-size:19px; font-weight:900; margin:9px 0 0; line-height:1.5; }
@media (min-width:768px) { .hm-sec-head h2 { font-size:26px; } }
.hm-sec-head p { color:var(--h-muted); font-size:12.5px; margin:5px 0 0; line-height:1.8; }
.hm-more {
    flex-shrink:0; display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
    color:var(--h-accent); font-size:12px; font-weight:800; text-decoration:none;
    min-height:40px; padding:0 4px;
}
.hm-more svg { width:14px; height:14px; }

/* ── هیرو ── */
.hm-hero { position:relative; overflow:hidden; padding:22px 0 6px; }
@media (min-width:768px) { .hm-hero { padding:40px 0 10px; } }
.hm-hero::before {
    content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
    background:
        radial-gradient(520px 260px at 88% -10%, color-mix(in srgb, var(--h-accent) 22%, transparent), transparent 62%),
        radial-gradient(420px 220px at 0% 110%, color-mix(in srgb, var(--h-accent-2) 14%, transparent), transparent 60%);
}
.hm-hero > * { position:relative; z-index:1; }
.hm-badge {
    display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:999px;
    background:color-mix(in srgb, var(--h-accent) 10%, transparent);
    border:1px solid var(--h-line-strong); color:var(--h-text); font-size:11px; font-weight:700;
}
.hm-badge i {
    width:7px; height:7px; border-radius:50%; background:var(--h-accent); display:inline-block;
    box-shadow:0 0 0 4px color-mix(in srgb, var(--h-accent) 22%, transparent);
    animation:hmPulse 1.8s ease-in-out infinite;
}
@keyframes hmPulse { 0%,100%{opacity:1} 50%{opacity:.45} }
.hm-h1 { color:var(--h-title); font-size:29px; font-weight:900; line-height:1.42; margin:12px 0 0; }
@media (min-width:768px) { .hm-h1 { font-size:46px; } }
.hm-h1 span {
    display:block;
    background:linear-gradient(90deg, var(--h-accent-2), var(--h-accent), var(--h-gold));
    -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hm-lead { color:var(--h-muted); font-size:13px; line-height:1.95; margin:10px 0 0; max-width:52ch; }
@media (min-width:768px) { .hm-lead { font-size:15px; } }
.hm-rating { display:flex; align-items:center; gap:9px; margin-top:14px; }
.hm-stars { display:flex; gap:2px; }
.hm-stars svg { width:15px; height:15px; color:var(--h-faint); }
.hm-stars svg.on { color:var(--h-gold); }
.hm-rating span { color:var(--h-muted); font-size:11.5px; font-weight:700; }

/* ── سه کارت اصلی: روی موبایل هم دیده می‌شوند ── */
.hm-actions { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; margin-top:20px; }
@media (min-width:900px) { .hm-actions { grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; } }
.hm-act {
    position:relative; overflow:hidden; display:flex; flex-direction:column; gap:10px;
    padding:15px; border-radius:var(--h-r-lg); text-decoration:none;
    background:var(--h-surface); border:1px solid var(--h-line); box-shadow:var(--h-shadow);
    transition:transform .2s, border-color .2s, box-shadow .2s;
}
.hm-act:hover { transform:translateY(-3px); border-color:var(--h-line-strong); }
.hm-act.wide { grid-column:1 / -1; }
@media (min-width:900px) { .hm-act.wide { grid-column:auto; } }
.hm-act .ico {
    width:44px; height:44px; border-radius:var(--h-r-sm); display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg, var(--h-accent), var(--h-accent-2)); color:#fff; box-shadow:var(--h-glow);
}
.hm-act .ico svg { width:22px; height:22px; }
.hm-act.gem  .ico { background:linear-gradient(135deg,#fbbf24,#f97316); }
.hm-act.acc  .ico { background:linear-gradient(135deg,#f97316,#dc2626); }
.hm-act.sens .ico { background:linear-gradient(135deg,#22d3ee,#0f766e); }
.hm-act b { display:block; color:var(--h-title); font-size:14.5px; font-weight:800; }
.hm-act .sub { display:block; color:var(--h-muted); font-size:11.5px; margin-top:3px; line-height:1.7; }
.hm-act .foot { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; }
.hm-act .price { color:var(--h-accent); font-size:13.5px; font-weight:900; }
.hm-act .price small { color:var(--h-faint); font-size:10.5px; font-weight:700; margin-inline-start:3px; }
.hm-act .go {
    display:inline-flex; align-items:center; justify-content:center; gap:5px;
    min-height:36px; padding:0 14px; border-radius:999px; font-size:11.5px; font-weight:800;
    background:color-mix(in srgb, var(--h-accent) 14%, transparent); color:var(--h-accent);
}
.hm-act.wide .go { background:linear-gradient(135deg, var(--h-accent), var(--h-accent-2)); color:#fff; box-shadow:var(--h-glow); }
@media (min-width:900px) { .hm-act.wide .go { background:color-mix(in srgb, var(--h-accent) 14%, transparent); color:var(--h-accent); box-shadow:none; } }
.hm-act .go svg { width:13px; height:13px; }
.hm-act .tag {
    position:absolute; top:12px; inset-inline-start:12px;
    font-size:9.5px; font-weight:800; padding:4px 9px; border-radius:999px;
    background:color-mix(in srgb, var(--h-gold) 16%, transparent); color:var(--h-gold);
}

/* ── میان‌بُرهای دم‌دستی ── */
.hm-quick { display:flex; gap:8px; overflow-x:auto; padding:2px 0 4px; scrollbar-width:none; margin-top:12px; }
.hm-quick::-webkit-scrollbar { display:none; }
.hm-quick a {
    flex:0 0 auto; display:inline-flex; align-items:center; gap:7px;
    min-height:42px; padding:0 15px; border-radius:999px; text-decoration:none; white-space:nowrap;
    background:var(--h-surface-2); border:1px solid var(--h-line);
    color:var(--h-text); font-size:12px; font-weight:700; transition:border-color .18s, color .18s;
}
.hm-quick a:hover { border-color:var(--h-line-strong); color:var(--h-title); }
.hm-quick svg { width:14px; height:14px; color:var(--h-accent); }

/* ── نوار اعتماد ── */
.hm-trust { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; margin-top:16px; }
.hm-trust div {
    display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;
    padding:13px 8px; border-radius:var(--h-r-md);
    background:var(--h-surface-2); border:1px solid var(--h-line);
}
@media (min-width:768px) { .hm-trust div { flex-direction:row; justify-content:center; gap:9px; padding:15px; } }
.hm-trust svg { width:19px; height:19px; color:var(--h-accent); }
.hm-trust b { color:var(--h-title); font-size:11.5px; font-weight:800; }
.hm-trust span { display:block; color:var(--h-faint); font-size:10px; margin-top:2px; }
@media (min-width:768px) { .hm-trust span { display:inline; margin:0; } }

/* ── اکانت‌ها ── */
.hm-list { display:grid; grid-template-columns:1fr; gap:10px; }
@media (min-width:768px) { .hm-list { grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; } }
.hm-listing {
    display:flex; align-items:center; gap:12px; padding:12px;
    background:var(--h-surface); border:1px solid var(--h-line); border-radius:var(--h-r-lg);
    box-shadow:var(--h-shadow); transition:border-color .2s, transform .2s;
}
.hm-listing:hover { border-color:var(--h-line-strong); transform:translateY(-2px); }
.hm-listing .thumb {
    position:relative; width:72px; height:72px; flex-shrink:0; border-radius:var(--h-r-md); overflow:hidden;
    background:color-mix(in srgb, var(--h-accent) 12%, var(--h-well));
    display:flex; align-items:center; justify-content:center;
}
.hm-listing .thumb img { width:100%; height:100%; object-fit:cover; }
.hm-listing .thumb svg { width:26px; height:26px; color:var(--h-accent); }
.hm-listing .info { flex:1; min-width:0; }
.hm-listing .info h3 {
    color:var(--h-title); font-size:13.5px; font-weight:800; margin:0; line-height:1.55;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.hm-tags { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:5px; }
.hm-tags span {
    font-size:9.5px; font-weight:800; padding:3px 8px; border-radius:999px;
    background:color-mix(in srgb, var(--h-accent) 12%, transparent); color:var(--h-accent);
}
.hm-listing .buy { display:flex; flex-direction:column; align-items:flex-end; gap:7px; flex-shrink:0; }
.hm-listing .buy .p { color:var(--h-accent); font-size:14px; font-weight:900; white-space:nowrap; }
.hm-listing .buy .p small { color:var(--h-faint); font-size:10px; font-weight:700; margin-inline-start:3px; }
.hm-listing .buy .old { color:var(--h-faint); font-size:10.5px; text-decoration:line-through; }
.hm-btn {
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    min-height:42px; padding:0 18px; border-radius:var(--h-r-sm); border:0; cursor:pointer; text-decoration:none;
    background:linear-gradient(135deg, var(--h-accent), var(--h-accent-2));
    color:#fff; font-size:12px; font-weight:800; box-shadow:var(--h-glow);
    transition:transform .18s;
}
.hm-btn:hover { transform:translateY(-1px); }
.hm-btn svg { width:14px; height:14px; }
.hm-btn.ghost { background:transparent; color:var(--h-accent); border:1px solid var(--h-line-strong); box-shadow:none; }
.hm-btn.lg { min-height:50px; padding:0 26px; font-size:13.5px; }

.hm-empty {
    text-align:center; padding:32px 16px; border-radius:var(--h-r-lg);
    background:var(--h-surface); border:1px dashed var(--h-line-strong); color:var(--h-muted); font-size:13px;
}

/* ── سه قدم ── */
.hm-steps { display:grid; grid-template-columns:1fr; gap:10px; }
@media (min-width:768px) { .hm-steps { grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; } }
.hm-step {
    display:flex; align-items:flex-start; gap:12px; padding:15px;
    background:var(--h-surface); border:1px solid var(--h-line); border-radius:var(--h-r-lg);
}
.hm-step .n {
    width:34px; height:34px; flex-shrink:0; border-radius:11px;
    display:flex; align-items:center; justify-content:center;
    background:color-mix(in srgb, var(--h-accent) 14%, transparent);
    border:1px solid var(--h-line-strong); color:var(--h-accent); font-size:14px; font-weight:900;
}
.hm-step b { display:block; color:var(--h-title); font-size:13.5px; font-weight:800; }
.hm-step p { color:var(--h-muted); font-size:11.5px; line-height:1.85; margin:4px 0 0; }

/* ── نظرات ── */
.hm-revs { display:flex; gap:10px; overflow-x:auto; padding-bottom:6px; scroll-snap-type:x mandatory; scrollbar-width:none; }
.hm-revs::-webkit-scrollbar { display:none; }
@media (min-width:900px) { .hm-revs { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; overflow:visible; } }
.hm-rev {
    flex:0 0 82%; scroll-snap-align:start; padding:16px;
    background:var(--h-surface); border:1px solid var(--h-line); border-radius:var(--h-r-lg); box-shadow:var(--h-shadow);
}
@media (min-width:900px) { .hm-rev { flex:auto; } }
.hm-rev p { color:var(--h-text); font-size:12.5px; line-height:2; margin:10px 0 14px; }
.hm-rev .who { display:flex; align-items:center; gap:9px; padding-top:12px; border-top:1px solid var(--h-line); }
.hm-rev .av {
    width:34px; height:34px; border-radius:11px; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg, var(--h-accent), var(--h-accent-2)); color:#fff; font-weight:800; font-size:13px;
}
.hm-rev .who b { display:block; color:var(--h-title); font-size:12.5px; font-weight:800; }
.hm-rev .who span { display:block; color:var(--h-faint); font-size:10.5px; margin-top:2px; }

/* ── سوالات متداول ── */
.hm-faq { display:flex; flex-direction:column; gap:9px; }
.hm-faq-item { background:var(--h-surface); border:1px solid var(--h-line); border-radius:var(--h-r-md); overflow:hidden; }
.hm-faq-item.is-open { border-color:var(--h-line-strong); }
.hm-faq-q {
    width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:15px 16px; background:transparent; border:0; cursor:pointer; text-align:start;
    color:var(--h-title); font-size:13px; font-weight:800;
}
.hm-faq-q svg { width:17px; height:17px; color:var(--h-accent); transition:transform .25s; flex-shrink:0; }
.hm-faq-item.is-open .hm-faq-q svg { transform:rotate(180deg); }
.hm-faq-a { padding:0 16px 15px; color:var(--h-muted); font-size:12.5px; line-height:2; }

/* ── فراخوان پایانی ── */
.hm-cta {
    position:relative; overflow:hidden; border-radius:var(--h-r-lg); padding:24px;
    background:linear-gradient(135deg, var(--h-accent-2), var(--h-accent) 55%, var(--h-gold));
    display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px;
}
@media (min-width:768px) { .hm-cta { padding:34px 38px; } }
.hm-cta h2 { color:#fff; font-size:19px; font-weight:900; margin:0; line-height:1.5; }
@media (min-width:768px) { .hm-cta h2 { font-size:26px; } }
.hm-cta p { color:rgba(255,255,255,.85); font-size:12.5px; margin:7px 0 0; line-height:1.9; }
.hm-cta a {
    display:inline-flex; align-items:center; gap:8px; padding:13px 26px; border-radius:var(--h-r-sm);
    background:#fff; color:#c2410c; font-size:13.5px; font-weight:900; text-decoration:none;
    box-shadow:0 14px 28px rgba(0,0,0,.18);
}
.hm-cta a svg { width:16px; height:16px; }

@media (prefers-reduced-motion: reduce) {
    .hm *, .hm *::before { animation-duration:.01ms !important; transition-duration:.01ms !important; }
    .hm-act:hover, .hm-listing:hover, .hm-btn:hover { transform:none; }
}

/* ── لینک‌های داخلی صفحات جم در فوتر (قابل دیدن، نه مخفی) ── */
.gem-links { border-top:1px solid rgba(255,255,255,.06); background:rgba(8,10,15,.5); }
html:not(.dark) .gem-links { background:#f8fafc; border-top-color:rgba(15,23,42,.08); }
.gem-links-inner {
    max-width:1180px; margin:0 auto; padding:22px 16px 26px;
    display:grid; grid-template-columns:1fr; gap:18px;
}
@media (min-width:640px) { .gem-links-inner { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (min-width:1024px) { .gem-links-inner { grid-template-columns:repeat(4, minmax(0,1fr)); gap:22px; padding:26px 24px 30px; } }
.gem-links-col h3 { color:rgba(255,255,255,.85); font-size:12.5px; font-weight:800; margin:0 0 10px; }
html:not(.dark) .gem-links-col h3 { color:#0f172a; }
.gem-links-row { display:flex; flex-wrap:wrap; gap:7px; }
.gem-links-row a {
    display:inline-flex; align-items:center; min-height:32px; padding:0 11px; border-radius:999px;
    background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
    color:rgba(255,255,255,.62); font-size:11.5px; font-weight:600; text-decoration:none;
    transition:color .18s, border-color .18s;
}
.gem-links-row a:hover { color:#fb923c; border-color:rgba(249,115,22,.35); }
html:not(.dark) .gem-links-row a { background:#fff; border-color:rgba(15,23,42,.1); color:#475569; }
html:not(.dark) .gem-links-row a:hover { color:#ea580c; border-color:rgba(234,88,12,.35); }

/* ── گیفت کارت: بنفش/ایندیگو تا از جم (نارنجی) و سنس (فیروزه‌ای) جدا باشد ── */
.gc-page {
    --gc-accent:      #a78bfa;
    --gc-accent-2:    #6d28d9;
    --gc-accent-soft: rgba(167,139,250,.12);
    --gc-on-accent:   #ffffff;
    --gc-gold:        #fbbf24;

    --gc-surface:   linear-gradient(180deg, #161428 0%, #100f1e 100%);
    --gc-surface-2: #14121f;
    --gc-well:      #0c0b16;

    --gc-line:        rgba(167,139,250,.16);
    --gc-line-strong: rgba(167,139,250,.42);

    --gc-title: #f4f1ff;
    --gc-text:  rgba(226,222,246,.88);
    --gc-muted: rgba(203,198,232,.76);
    --gc-faint: rgba(203,198,232,.60);

    --gc-shadow: 0 16px 34px rgba(0,0,0,.34);
    --gc-glow:   0 14px 28px rgba(109,40,217,.34);

    --gc-r-lg: 24px;
    --gc-r-md: 18px;
    --gc-r-sm: 13px;
    position: relative;
}
html:not(.dark) .gc-page {
    --gc-accent:      #6d28d9;
    --gc-accent-2:    #4c1d95;
    --gc-accent-soft: rgba(109,40,217,.10);
    --gc-gold:        #b45309;

    --gc-surface:   linear-gradient(180deg, #ffffff 0%, #fbfaff 100%);
    --gc-surface-2: #ffffff;
    --gc-well:      #f4f2fb;

    --gc-line:        rgba(76,29,149,.14);
    --gc-line-strong: rgba(109,40,217,.40);

    --gc-title: #1a1533;
    --gc-text:  #423c60;
    --gc-muted: #5f5878;
    --gc-faint: #6b6586;

    --gc-shadow: 0 12px 28px rgba(26,21,51,.08);
    --gc-glow:   0 12px 24px rgba(109,40,217,.22);
}
/* صفحه‌های بازیِ هم‌شکلِ جم (پابجی، کال آف دیوتی، دلتا فورس) قالب gem-page
   دارند ولی چند جزءِ gc-* را قرض گرفته‌اند — کادر جست‌وجوی بسته‌ها، پیام «پیدا
   نشد»، عنوان بخش‌ها. متغیرهای --gc-* فقط داخل .gc-page تعریف بودند، پس آن‌جا
   کادر جست‌وجو نه پس‌زمینه داشت نه حاشیه نه رنگ متن و فقط placeholderش دیده
   می‌شد. همان متغیرها این‌جا با پالت نارنجیِ صفحه‌های جم. */
.gem-page {
    --gc-accent:      #fb923c;
    --gc-accent-2:    #ea580c;
    --gc-accent-soft: rgba(249,115,22,.12);
    --gc-on-accent:   #ffffff;
    --gc-gold:        #fbbf24;
    --gc-surface:   linear-gradient(180deg, #1a130e 0%, #12161e 100%);
    --gc-surface-2: #151a22;
    --gc-well:      #0d1117;
    --gc-line:        rgba(249,115,22,.22);
    --gc-line-strong: rgba(249,115,22,.45);
    --gc-title: #f8fafc;
    --gc-text:  rgba(226,232,240,.88);
    --gc-muted: rgba(203,213,225,.76);
    --gc-faint: rgba(203,213,225,.62);
    --gc-shadow: 0 16px 34px rgba(0,0,0,.34);
    --gc-glow:   0 14px 28px rgba(234,88,12,.30);
    --gc-r-lg: 24px;
    --gc-r-md: 18px;
    --gc-r-sm: 13px;
}
html:not(.dark) .gem-page {
    --gc-accent:      #ea580c;
    --gc-accent-2:    #c2410c;
    --gc-accent-soft: rgba(234,88,12,.10);
    --gc-gold:        #b45309;
    --gc-surface:   linear-gradient(180deg, #ffffff 0%, #fffaf5 100%);
    --gc-surface-2: #ffffff;
    --gc-well:      #fff7ed;
    --gc-line:        rgba(194,65,12,.18);
    --gc-line-strong: rgba(234,88,12,.42);
    --gc-title: #0f172a;
    --gc-text:  #334155;
    --gc-muted: #475569;
    --gc-faint: #64748b;
    --gc-shadow: 0 12px 28px rgba(15,23,42,.08);
    --gc-glow:   0 12px 24px rgba(234,88,12,.20);
}
.gc-page, .gc-page * { font-family: 'Vazirmatn', Tahoma, sans-serif !important; }
.gc-page :focus-visible { outline:2px solid var(--gc-accent); outline-offset:2px; border-radius:10px; }
.gc-page::before {
    content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
    background:
        radial-gradient(720px 320px at 100% -8%, rgba(167,139,250,.16), transparent 60%),
        radial-gradient(560px 280px at 0% 100%, rgba(251,191,36,.07), transparent 55%);
}
html:not(.dark) .gc-page::before {
    background: radial-gradient(720px 320px at 100% -8%, rgba(109,40,217,.10), transparent 60%);
}
.gc-page > * { position:relative; z-index:1; }

.gc-crumbs { display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:12px; margin-bottom:16px; color:var(--gc-faint); }
.gc-crumbs a { color:var(--gc-muted); text-decoration:none; }
.gc-crumbs a:hover { color:var(--gc-accent); }
.gc-crumbs .now { color:var(--gc-accent); font-weight:800; }

/* ── بنر ── */
.gc-banner {
    position:relative; overflow:hidden; border-radius:var(--gc-r-lg);
    padding:22px 18px; margin-bottom:16px;
    background:
        linear-gradient(150deg, rgba(22,20,40,.96), rgba(14,13,26,.98) 55%, rgba(28,20,45,.94)),
        repeating-linear-gradient(115deg, transparent 0 28px, rgba(167,139,250,.045) 28px 29px);
    border:1px solid var(--gc-line-strong);
    box-shadow: var(--gc-shadow), inset 0 1px 0 rgba(196,181,253,.12);
}
html:not(.dark) .gc-banner {
    background: linear-gradient(150deg, #f5f3ff 0%, #ffffff 55%, #fdf6ff 100%);
    box-shadow: var(--gc-shadow);
}
@media (min-width:768px) { .gc-banner { padding:30px 32px; border-radius:28px; } }
.gc-kicker {
    display:inline-flex; align-items:center; gap:7px; width:max-content;
    padding:6px 12px; border-radius:999px; font-size:11px; font-weight:800;
    color:var(--gc-accent); background:var(--gc-accent-soft); border:1px solid var(--gc-line-strong);
}
.gc-kicker svg { width:13px; height:13px; }
.gc-banner h1 { color:var(--gc-title); font-size:1.45rem; font-weight:900; line-height:1.45; margin:12px 0 0; }
@media (min-width:768px) { .gc-banner h1 { font-size:2.05rem; } }
.gc-banner h1 span {
    display:block; margin-top:6px; font-size:.6em; font-weight:800;
    background:linear-gradient(90deg, var(--gc-accent), var(--gc-gold));
    -webkit-background-clip:text; background-clip:text; color:transparent;
}
.gc-lead { color:var(--gc-text); font-size:13px; line-height:1.95; margin:10px 0 0; max-width:56ch; }
.gc-pills { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.gc-pills span {
    display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:999px;
    font-size:11.5px; font-weight:800; color:var(--gc-text);
    background:var(--gc-accent-soft); border:1px solid var(--gc-line);
}
.gc-pills svg { width:13px; height:13px; color:var(--gc-accent); }

/* ── فیلتر برند ── */
.gc-chips { display:flex; gap:8px; overflow-x:auto; padding:2px 2px 6px; margin-bottom:16px; scrollbar-width:none; }
.gc-chips::-webkit-scrollbar { display:none; }
.gc-chips a {
    flex:0 0 auto; display:inline-flex; align-items:center; min-height:40px; padding:0 16px;
    border-radius:999px; text-decoration:none; white-space:nowrap;
    font-size:12.5px; font-weight:800; color:var(--gc-muted);
    background:var(--gc-surface-2); border:1px solid var(--gc-line); transition:all .18s;
}
.gc-chips a:hover { color:var(--gc-title); border-color:var(--gc-line-strong); }
.gc-chips a.is-on {
    color:var(--gc-on-accent); border-color:transparent;
    background:linear-gradient(135deg, var(--gc-accent), var(--gc-accent-2)); box-shadow:var(--gc-glow);
}

/* ── شبکه کارت‌ها ── */
.gc-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
@media (min-width:720px)  { .gc-grid { grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; } }
@media (min-width:1080px) { .gc-grid { grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; } }

.gc-card {
    position:relative; display:flex; flex-direction:column; overflow:hidden;
    border-radius:var(--gc-r-lg); text-decoration:none; color:inherit;
    background:var(--gc-surface); border:1px solid var(--gc-line);
    box-shadow:var(--gc-shadow); transition:transform .22s ease, border-color .22s, box-shadow .22s;
}
.gc-card:hover { transform:translateY(-5px); border-color:var(--gc-line-strong); box-shadow:0 22px 44px rgba(109,40,217,.20); }
.gc-card.is-sold { opacity:.6; }

/* روی کارت‌های بدون عکس، یک «کارت هدیه» واقعی رسم می‌شود */
.gc-face {
    position:relative; aspect-ratio:16/10; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--gc-accent) 34%, transparent), transparent 60%),
        var(--gc-well);
}
.gc-face img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.gc-card:hover .gc-face img { transform:scale(1.06); }
.gc-face::after {
    content:''; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(115deg, transparent 42%, rgba(255,255,255,.10) 50%, transparent 58%);
}
.gc-plate {
    position:absolute; inset:0; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:6px; text-align:center; padding:10px;
}
.gc-plate .brand { color:var(--gc-title); font-size:13px; font-weight:900; }
.gc-plate .value { color:var(--gc-accent); font-size:20px; font-weight:900; line-height:1.2; }
.gc-plate .strip {
    position:absolute; inset-inline:14px; bottom:14px; height:9px; border-radius:3px;
    background:repeating-linear-gradient(90deg, color-mix(in srgb, var(--gc-accent) 40%, transparent) 0 7px, transparent 7px 12px);
    opacity:.65;
}
.gc-tag, .gc-off, .gc-region {
    position:absolute; z-index:2; font-size:10px; font-weight:800; padding:4px 9px; border-radius:999px;
}
.gc-tag { top:10px; inset-inline-end:10px; background:linear-gradient(135deg, var(--gc-gold), #b45309); color:#fff; }
.gc-off { top:10px; inset-inline-start:10px; background:linear-gradient(135deg,#f43f5e,#be123c); color:#fff; }
.gc-region {
    bottom:10px; inset-inline-end:10px; backdrop-filter:blur(8px);
    background:color-mix(in srgb, var(--gc-well) 72%, transparent);
    color:var(--gc-accent); border:1px solid var(--gc-line-strong);
}
html:not(.dark) .gc-region { background:rgba(255,255,255,.88); }
.gc-sold {
    position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:center;
    background:rgba(9,8,18,.62); backdrop-filter:blur(2px);
}
.gc-sold span { background:#be1818; color:#fff; font-size:11px; font-weight:800; padding:7px 13px; border-radius:999px; }

.gc-body { padding:12px 13px 13px; display:flex; flex-direction:column; flex:1; gap:2px; }
.gc-body h3 {
    color:var(--gc-title); font-size:13.5px; font-weight:800; margin:0 0 5px; line-height:1.55;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.gc-sub { color:var(--gc-muted); font-size:11px; margin:0 0 8px; }
.gc-price-row { display:flex; align-items:baseline; gap:7px; flex-wrap:wrap;
                justify-content:space-between; margin:auto 0 0; }
.gc-price { color:var(--gc-accent); font-weight:900; font-size:15px; margin:0; }
.gc-price small { color:var(--gc-faint); font-size:10px; font-weight:700; margin-inline-start:3px; }
.gc-old { color:var(--gc-faint); font-size:10.5px; text-decoration:line-through; }
/* یک دکمهٔ پُر روی هر کارت، در شبکه‌ای با ۱۲۲ برند، یعنی ۱۲۲ لکهٔ رنگی
   که هیچ‌کدام از دیگری مهم‌تر نیست — و ۱۲۲ × ۵۱ پیکسل ارتفاعِ اضافه، که
   یعنی نصف برندها یک اسکرول دیرتر دیده می‌شوند. خودِ کارت لینک است، پس
   یک نشانهٔ کوچک کافی است. */
.gc-cta {
    display:inline-flex; align-items:center; gap:5px;
    font-size:11.5px; font-weight:800; color:var(--gc-accent);
    padding:0; min-height:0; background:none; box-shadow:none;
}
.gc-card:hover .gc-cta { color:var(--gc-title); }
.gc-cta.dead { color:var(--gc-faint); }
.gc-cta svg { transition:transform .18s ease; }
.gc-card:hover .gc-cta svg { transform:translateX(-3px); }
@media (prefers-reduced-motion: reduce) { .gc-card:hover .gc-cta svg { transform:none; } }

/* ── صفحه جزئیات ── */
.gc-frame {
    position:relative; overflow:hidden; border-radius:var(--gc-r-lg); aspect-ratio:16/10;
    display:flex; align-items:center; justify-content:center;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--gc-accent) 32%, transparent), transparent 62%),
        var(--gc-well);
    border:1px solid var(--gc-line-strong); box-shadow:var(--gc-shadow);
}
.gc-frame img { width:100%; height:100%; object-fit:cover; }
.gc-frame .gc-plate .brand { font-size:17px; }
.gc-frame .gc-plate .value { font-size:32px; }
.gc-title { color:var(--gc-title); font-size:1.55rem; font-weight:900; line-height:1.45; margin:0; }
@media (min-width:768px) { .gc-title { font-size:2rem; } }
.gc-meta { display:flex; flex-wrap:wrap; gap:8px; }
.gc-meta span {
    display:inline-flex; align-items:center; gap:6px; padding:7px 13px; border-radius:999px;
    font-size:12px; font-weight:800; color:var(--gc-accent);
    background:var(--gc-accent-soft); border:1px solid var(--gc-line-strong);
}
.gc-meta span.ghost { color:var(--gc-muted); background:transparent; border-color:var(--gc-line); }
.gc-buy {
    padding:18px; border-radius:var(--gc-r-lg);
    background:var(--gc-surface); border:1px solid var(--gc-line-strong); box-shadow:var(--gc-shadow);
}
@media (min-width:1024px) { .gc-buy { position:sticky; top:130px; } }
.gc-buy-price { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin:6px 0 16px; }
.gc-buy-price b { color:var(--gc-accent); font-size:1.8rem; font-weight:900; line-height:1; }
.gc-buy-price i { color:var(--gc-faint); font-size:12.5px; font-style:normal; font-weight:700; }
.gc-buy-price s { color:var(--gc-faint); font-size:12.5px; }
.gc-label { display:block; font-size:12.5px; font-weight:700; color:var(--gc-muted); margin-bottom:8px; }
.gc-input {
    width:100%; padding:13px 14px; border-radius:14px; font-size:13px;
    background:var(--gc-well); border:1px solid var(--gc-line); color:var(--gc-title);
    transition:border-color .18s, box-shadow .18s;
}
.gc-input::placeholder { color:var(--gc-faint); }
.gc-input:focus { outline:none; border-color:var(--gc-accent); box-shadow:0 0 0 3px var(--gc-accent-soft); }
.gc-qty { display:flex; align-items:center; gap:8px; }
.gc-qty button {
    width:42px; height:42px; border-radius:12px; cursor:pointer; font-size:18px; font-weight:800;
    background:var(--gc-surface-2); border:1px solid var(--gc-line); color:var(--gc-title);
}
.gc-qty button:hover { border-color:var(--gc-line-strong); }
.gc-qty output {
    min-width:52px; text-align:center; font-size:15px; font-weight:900; color:var(--gc-title);
    font-variant-numeric:tabular-nums;
}
.gc-btn {
    width:100%; min-height:54px; border:0; border-radius:16px; cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:8px;
    font-size:15px; font-weight:900; color:var(--gc-on-accent);
    background:linear-gradient(135deg, var(--gc-accent), var(--gc-accent-2));
    box-shadow:var(--gc-glow); transition:transform .18s;
}
.gc-btn:hover { transform:translateY(-2px); }
.gc-btn:disabled { opacity:.55; cursor:not-allowed; transform:none; }
.gc-btn svg { width:19px; height:19px; }
.gc-dead {
    width:100%; min-height:54px; border-radius:16px; display:flex; align-items:center; justify-content:center;
    background:rgba(239,68,68,.10); border:1px solid rgba(239,68,68,.32); color:#f87171;
    font-size:14px; font-weight:800;
}
html:not(.dark) .gc-dead { color:#b91c1c; }
.gc-hint { color:var(--gc-faint); font-size:11.5px; line-height:1.9; margin:12px 0 0; }
.gc-err { color:#fb7185; font-size:12px; margin:8px 0 0; }

.gc-panel {
    background:var(--gc-surface); border:1px solid var(--gc-line);
    border-radius:var(--gc-r-lg); padding:20px; box-shadow:var(--gc-shadow);
}
.gc-panel h2 { color:var(--gc-title); font-size:1.05rem; font-weight:900; margin:0 0 12px; }
.gc-panel p { color:var(--gc-text); font-size:13px; line-height:2.05; margin:0 0 14px; white-space:pre-line; }
.gc-steps { display:grid; grid-template-columns:1fr; gap:10px; }
@media (min-width:640px) { .gc-steps { grid-template-columns:repeat(3, 1fr); } }
.gc-step { display:flex; gap:11px; align-items:flex-start; padding:13px; border-radius:var(--gc-r-sm); background:var(--gc-surface-2); border:1px solid var(--gc-line); }
.gc-step .n {
    width:30px; height:30px; flex-shrink:0; border-radius:10px; display:flex; align-items:center; justify-content:center;
    background:var(--gc-accent-soft); border:1px solid var(--gc-line-strong); color:var(--gc-accent); font-weight:900; font-size:13px;
}
.gc-step b { display:block; color:var(--gc-title); font-size:12.5px; font-weight:800; }
.gc-step p { color:var(--gc-muted); font-size:11.5px; line-height:1.8; margin:3px 0 0; white-space:normal; }

.gc-empty {
    text-align:center; padding:38px 18px; border-radius:var(--gc-r-lg);
    background:var(--gc-surface); border:1px dashed var(--gc-line-strong);
}
.gc-empty svg { width:42px; height:42px; color:var(--gc-accent); opacity:.75; margin:0 auto 10px; }
/* هم‌خانوادهٔ .sens-section-title — عنوان بخشِ گرید گیفت کارت‌ها. */
.gc-section-title { color:var(--gc-title); font-size:1.05rem; font-weight:800; margin:18px 0 10px; }
.gc-section-title small { color:var(--gc-faint); font-size:11.5px; font-weight:700; margin-inline-start:8px; }

/* جست‌وجوی برند — فهرست بیش از صد برند دارد و پیمایشش تنها راه نیست. */
.gc-search { display:flex; align-items:center; gap:8px; margin-bottom:14px; position:relative; }
.gc-search svg {
    width:16px; height:16px; color:var(--gc-accent);
    position:absolute; inset-inline-start:14px; pointer-events:none;
}
.gc-search .gc-input { padding-inline-start:40px; }
.gc-search-go {
    flex-shrink:0; min-height:44px; padding:0 18px; border:0; border-radius:14px; cursor:pointer;
    font-size:13px; font-weight:800; color:var(--gc-on-accent);
    background:linear-gradient(135deg, var(--gc-accent), var(--gc-accent-2));
}

/* انتخاب مبلغ روی صفحهٔ برند. دکمه است نه لینک: صفحه عوض نمی‌شود، فقط
   قیمت و موجودی همان بالا به‌روز می‌شوند. */
.gc-amounts {
    display:grid; grid-template-columns:repeat(auto-fill, minmax(132px, 1fr));
    gap:8px; margin-bottom:18px;
}
.gc-amount {
    display:flex; flex-direction:column; align-items:flex-start; gap:3px;
    padding:11px 12px; border-radius:14px; cursor:pointer; text-align:start;
    background:var(--gc-surface-2); border:1px solid var(--gc-line); color:var(--gc-title);
    transition:border-color .16s, background .16s;
}
.gc-amount:hover { border-color:var(--gc-line-strong); }
.gc-amount.is-on {
    border-color:var(--gc-accent); background:var(--gc-accent-soft);
    box-shadow:0 0 0 3px var(--gc-accent-soft);
}
.gc-amount .v { font-size:13px; font-weight:900; }
.gc-amount .p { font-size:11.5px; font-weight:700; color:var(--gc-muted); }
.gc-amount .p small { font-size:10px; }
.gc-amount.is-on .p { color:var(--gc-accent); }
.gc-opt { color:var(--gc-faint); font-weight:600; font-size:11px; }
.gc-empty h3 { color:var(--gc-title); font-size:1.05rem; font-weight:800; margin:0 0 6px; }
.gc-empty p { color:var(--gc-muted); font-size:13px; margin:0; }

.gc-back {
    display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 20px; border-radius:999px;
    border:1px solid var(--gc-line-strong); color:var(--gc-accent); text-decoration:none;
    font-size:13px; font-weight:800;
}
.gc-back:hover { background:var(--gc-accent-soft); }
.gc-back svg { width:15px; height:15px; }

@media (prefers-reduced-motion: reduce) {
    .gc-page *, .gc-page *::before, .gc-page *::after { transition-duration:.01ms !important; }
    .gc-card:hover, .gc-btn:hover { transform:none; }
}

/* تب‌بار موبایل */
.mobile-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    display: flex; justify-content: space-around; align-items: stretch;
    height: calc(64px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(10,12,18,.96); backdrop-filter: blur(18px);
    border-top: 1px solid rgba(249,115,22,.18);
}
@media (min-width: 1024px) { .mobile-tabbar { display: none; } }
html:not(.dark) .mobile-tabbar {
    background: rgba(255,255,255,.96);
    border-top-color: rgba(15,23,34,.10);
    box-shadow: 0 -6px 20px rgba(15,23,34,.06);
}
html:not(.dark) .mobile-tabbar a { color: #5b6675; }
html:not(.dark) .mobile-tabbar a.active { color: #c2410c; }
.mobile-tabbar a {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; color: rgba(255,255,255,.5); text-decoration: none; font-size: 10px; font-weight: 700;
    /* شش تب شد؛ هیچ برچسبی نباید دو خطی شود و بقیه را کج کند. */
    white-space: nowrap; min-width: 0;
}
.mobile-tabbar a.active { color: #fb923c; }
.mobile-tabbar svg { width: 22px; height: 22px; flex-shrink: 0; }
/* روی گوشی‌های باریک شش تب × ~۵۳px است؛ یک پله کوچک‌تر تا برچسب‌ها نشکنند. */
@media (max-width: 359px) {
    .mobile-tabbar a { font-size: 9px; }
    .mobile-tabbar svg { width: 20px; height: 20px; }
}

#cart-toast { bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important; left: 12px !important; right: auto; max-width: calc(100vw - 24px); }
@media (min-width: 1024px) { #cart-toast { bottom: 24px !important; left: 24px !important; } }
#ai-chat-widget { bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important; left: 12px !important; }
@media (min-width: 1024px) { #ai-chat-widget { bottom: 20px !important; left: 20px !important; } }

@media (max-width: 1023px) {
    header > div[style*="padding:0 24px"] { padding: 0 12px !important; }
}

/* لینک لوگو flex-shrink:0 داشت و با متن برند ۱۴۷px عرض می‌گرفت؛ کنارِ گروه
   دکمه‌ها روی گوشی باریک از عرض صفحه رد می‌شد. چون بدنه اسکرول افقی ندارد،
   دکمهٔ منو روی عرض ۳۲۰ کامل بیرون از صفحه می‌افتاد و قابل لمس نبود.
   کاربر لاگین‌کرده بدتر است: دکمهٔ پروفایل برخلاف دکمهٔ «ورود» هیچ کلاس
   مخفی‌سازی موبایل ندارد و ۵۸px به گروه دکمه‌ها اضافه می‌کند. */
@media (max-width: 1023px) {
    header .hdr-logo { flex-shrink: 1 !important; min-width: 0; }
    /* تصویر نباید در فشار جا خالی کند وگرنه لوگو کشیده و له می‌شود. */
    header .hdr-logo-img { width: 40px !important; height: 40px !important; flex-shrink: 0 !important; }
}
/* اسم زیر لوگوست، پس عرضش همان عرض یک کلمه است و روی گوشی هم می‌ماند.
   قبلاً کنارِ لوگو بود، ۱۴۷px می‌گرفت و مجبور بودیم زیر ۶۴۰px حذفش کنیم. */
@media (max-width: 639px) {
    header .hdr-logo-img { width: 38px !important; height: 38px !important; }
    header .hdr-logo-name { font-size: 10px !important; }
}
/* باریک‌ترین گوشی‌ها، با حساب کاربری لاگین‌شده. */
@media (max-width: 380px) {
    /* تصویر اینجا کوچک نمی‌شود: عرضِ بلوک را متنِ «اتومیک شاپ» تعیین می‌کند،
       نه تصویر، پس کوچک‌کردنش یک پیکسل هم عرض آزاد نمی‌کند و فقط لوگو را
       ریز می‌کند. چیزی که در فشار باید کوتاه بیاید همان متن است. */
    header .hdr-logo-name { font-size: 9.5px !important; }
    header .hdr-actions { gap: 6px !important; }
    header .hdr-actions > button:first-child { padding: 0 10px !important; }
    /* حاشیهٔ اطمینان: عدد دو رقمی سبد خرید نباید دوباره ردیف را سرریز کند. */
    header div[style*="height:64px"] { gap: 8px !important; }
}

/* ══════════════════════════════════════════════════════════
   شارژ بازی با ایدی و صفحهٔ پیگیری سفارش

   هر دو همان توکن‌های .gc-page را دارند تا کلاس‌های مشترک
   (.gc-crumbs، .gc-btn، .gc-input، .gc-panel، .gc-steps) بدون
   تکرار کار کنند؛ فقط رنگ لهجه فرق می‌کند: گیفت کارت بنفش است،
   شارژ بازی نارنجیِ برند، و صفحهٔ سفارش سبزِ «انجام شد».
   ══════════════════════════════════════════════════════════ */
.gt-page, .ot-page {
    --gc-accent:      #fb923c;
    --gc-accent-2:    #ea580c;
    --gc-accent-soft: rgba(251,146,60,.12);
    --gc-on-accent:   #ffffff;
    --gc-gold:        #fbbf24;

    --gc-surface:   linear-gradient(180deg, #1a1410 0%, #12100e 100%);
    --gc-surface-2: #17130f;
    --gc-well:      #0e0c0a;

    --gc-line:        rgba(251,146,60,.16);
    --gc-line-strong: rgba(251,146,60,.42);

    --gc-title: #fdf6f0;
    --gc-text:  rgba(245,235,226,.88);
    --gc-muted: rgba(232,222,213,.76);
    --gc-faint: rgba(232,222,213,.58);

    --gc-shadow: 0 16px 34px rgba(0,0,0,.34);
    --gc-glow:   0 14px 28px rgba(234,88,12,.30);

    --gc-r-lg: 24px;
    --gc-r-md: 18px;
    --gc-r-sm: 13px;
    position: relative;
}
html:not(.dark) .gt-page, html:not(.dark) .ot-page {
    --gc-accent:      #c2410c;
    --gc-accent-2:    #9a3412;
    --gc-accent-soft: rgba(234,88,12,.10);
    --gc-gold:        #92400e;

    --gc-surface:   linear-gradient(180deg, #ffffff 0%, #fffaf6 100%);
    --gc-surface-2: #ffffff;
    --gc-well:      #fdf5ee;

    --gc-line:        rgba(194,65,12,.14);
    --gc-line-strong: rgba(234,88,12,.40);

    --gc-title: #2a1a0f;
    --gc-text:  #4a3728;
    --gc-muted: #6b5747;
    --gc-faint: #7d6956;

    --gc-shadow: 0 12px 28px rgba(42,26,15,.08);
    --gc-glow:   0 12px 24px rgba(234,88,12,.22);
}
.gt-page, .gt-page *, .ot-page, .ot-page * { font-family:'Vazirmatn', Tahoma, sans-serif !important; }
.gt-page :focus-visible, .ot-page :focus-visible {
    outline:2px solid var(--gc-accent); outline-offset:2px; border-radius:10px;
}
.gt-page::before, .ot-page::before {
    content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
    background:
        radial-gradient(720px 320px at 100% -8%, rgba(251,146,60,.14), transparent 60%),
        radial-gradient(560px 280px at 0% 100%, rgba(251,191,36,.06), transparent 55%);
}
html:not(.dark) .gt-page::before, html:not(.dark) .ot-page::before {
    background: radial-gradient(720px 320px at 100% -8%, rgba(234,88,12,.09), transparent 60%);
}
.gt-page > *, .ot-page > * { position:relative; z-index:1; }

/* ── سربرگ فهرست بازی‌ها ── */
.gt-hero {
    background:var(--gc-surface); border:1px solid var(--gc-line);
    border-radius:var(--gc-r-lg); padding:22px; margin-bottom:20px;
    box-shadow:var(--gc-shadow);
}
.gt-kicker {
    display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:800;
    color:var(--gc-accent); background:var(--gc-accent-soft);
    border:1px solid var(--gc-line-strong); border-radius:999px; padding:5px 12px;
}
.gt-hero h1 { color:var(--gc-title); font-size:1.45rem; font-weight:900; line-height:1.5; margin:12px 0 0; }
.gt-hero h1 span { display:block; color:var(--gc-accent); font-size:.92rem; font-weight:700; margin-top:5px; }
.gt-lead { color:var(--gc-text); font-size:13px; line-height:1.95; margin:10px 0 0; max-width:58ch; }

/* ── شبکهٔ بازی‌ها ── */
/* سرِ فهرست: عنوان و جست‌وجو کنار هم روی دسکتاپ، زیر هم روی موبایل. */
.gt-listhead { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
               gap:12px; margin:26px 0 14px; }
.gt-search { position:relative; display:flex; align-items:center; flex:1 1 240px; max-width:340px; }
.gt-search svg { position:absolute; inset-inline-start:12px; opacity:.55; pointer-events:none; }
.gt-search .gc-input { margin:0; padding-inline-start:36px; }
.gt-search input::-webkit-search-cancel-button { cursor:pointer; }
.gt-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
@media (min-width:640px) { .gt-grid { grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (min-width:1024px) { .gt-grid { grid-template-columns:repeat(4, minmax(0,1fr)); } }
.gt-card {
    display:flex; flex-direction:column; overflow:hidden; text-decoration:none;
    background:var(--gc-surface); border:1px solid var(--gc-line);
    border-radius:var(--gc-r-md); box-shadow:var(--gc-shadow);
    transition:transform .2s, border-color .2s, box-shadow .2s;
}
.gt-card:hover { transform:translateY(-4px); border-color:var(--gc-line-strong); box-shadow:0 20px 40px rgba(234,88,12,.18); }
.gt-art {
    position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--gc-well);
    display:flex; align-items:center; justify-content:center;
}
.gt-art img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.gt-card:hover .gt-art img { transform:scale(1.07); }
.gt-initial { color:var(--gc-accent); font-size:2.4rem; font-weight:900; }
.gt-body { padding:11px 12px 13px; display:flex; flex-direction:column; gap:4px; }
.gt-body h3 { color:var(--gc-title); font-size:12.5px; font-weight:800; margin:0; line-height:1.6; }
.gt-sub { color:var(--gc-muted); font-size:10.5px; }
.gt-price { color:var(--gc-accent); font-size:12.5px; font-weight:900; margin-top:2px; }
.gt-price small { color:var(--gc-faint); font-size:9.5px; font-weight:700; }

/* ── سربرگ صفحهٔ یک بازی ── */
.gt-head { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.gt-cover {
    width:96px; height:96px; flex-shrink:0; border-radius:22px; overflow:hidden;
    background:var(--gc-well); border:1px solid var(--gc-line);
    display:flex; align-items:center; justify-content:center;
}
.gt-cover img { width:100%; height:100%; object-fit:cover; }

/* ── ستون خرید ── */
.gt-buy {
    align-self:start; position:sticky; top:96px;
    background:var(--gc-surface); border:1px solid var(--gc-line);
    border-radius:var(--gc-r-lg); padding:18px; box-shadow:var(--gc-shadow);
}
@media (max-width:1023px) { .gt-buy { position:static; } }
.gt-verify {
    width:100%; margin-top:12px; min-height:44px; border-radius:13px; cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:7px;
    font-size:13px; font-weight:800; color:var(--gc-accent);
    background:var(--gc-accent-soft); border:1px solid var(--gc-line-strong);
}
.gt-verify:disabled { opacity:.6; cursor:progress; }
.gt-ok {
    display:flex; align-items:center; gap:7px; margin:10px 0 0; font-size:12.5px;
    color:#34d399; background:rgba(16,185,129,.10);
    border:1px solid rgba(16,185,129,.3); border-radius:12px; padding:9px 11px;
}
html:not(.dark) .gt-ok { color:#047857; }
.gt-picked { color:var(--gc-muted); font-size:12px; margin:2px 0 0; }

/* ══════════════════════════════════════════════════════════
   صفحهٔ پیگیری سفارش
   ══════════════════════════════════════════════════════════ */
.ot-hero {
    text-align:center; padding:28px 20px; border-radius:var(--gc-r-lg);
    background:var(--gc-surface); border:1px solid var(--gc-line);
    box-shadow:var(--gc-shadow); margin-bottom:18px;
}
.ot-mark {
    width:64px; height:64px; margin:0 auto 14px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:var(--gc-accent-soft); border:1px solid var(--gc-line-strong);
    color:var(--gc-accent);
}
.ot-hero.is-ok  .ot-mark { background:rgba(16,185,129,.12); border-color:rgba(16,185,129,.34); color:#34d399; }
.ot-hero.is-bad .ot-mark { background:rgba(239,68,68,.12);  border-color:rgba(239,68,68,.34);  color:#f87171; }
.ot-hero.is-wait .ot-mark { background:rgba(251,191,36,.12); border-color:rgba(251,191,36,.34); color:#fbbf24; }
.ot-hero h1 { color:var(--gc-title); font-size:1.35rem; font-weight:900; margin:0 0 8px; }
.ot-hero p { color:var(--gc-text); font-size:13px; line-height:2; margin:0 auto; max-width:52ch; }
.ot-code {
    display:inline-flex; align-items:center; gap:10px; margin-top:16px; padding:9px 14px;
    border-radius:999px; background:var(--gc-well); border:1px dashed var(--gc-line-strong);
}
.ot-code span { color:var(--gc-faint); font-size:11px; font-weight:700; }
.ot-code b { color:var(--gc-title); font-size:14px; font-weight:900; letter-spacing:.5px; }

.ot-copy {
    display:inline-flex; align-items:center; gap:5px; cursor:pointer;
    font-size:11px; font-weight:800; padding:5px 10px; border-radius:999px;
    color:var(--gc-accent); background:var(--gc-accent-soft);
    border:1px solid var(--gc-line-strong); white-space:nowrap;
}
.ot-copy:hover { background:var(--gc-accent); color:var(--gc-on-accent); }

.ot-card {
    background:var(--gc-surface); border:1px solid var(--gc-line);
    border-radius:var(--gc-r-lg); padding:18px; box-shadow:var(--gc-shadow);
    margin-bottom:14px;
}
.ot-card h2 {
    display:flex; align-items:center; gap:8px; color:var(--gc-title);
    font-size:1rem; font-weight:900; margin:0 0 14px;
}
.ot-card h2 svg { color:var(--gc-accent); }
.ot-item { padding:14px; border-radius:var(--gc-r-sm); background:var(--gc-surface-2); border:1px solid var(--gc-line); }
.ot-item + .ot-item { margin-top:10px; }
.ot-item-head { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.ot-item-head b { color:var(--gc-title); font-size:13px; font-weight:800; }
.ot-badge {
    font-size:10.5px; font-weight:800; padding:3px 10px; border-radius:999px; white-space:nowrap;
    color:var(--gc-muted); background:var(--gc-well); border:1px solid var(--gc-line);
}
.ot-badge.ok  { color:#34d399; background:rgba(16,185,129,.10); border-color:rgba(16,185,129,.30); }
.ot-badge.bad { color:#f87171; background:rgba(239,68,68,.10);  border-color:rgba(239,68,68,.30); }
html:not(.dark) .ot-badge.ok  { color:#047857; }
html:not(.dark) .ot-badge.bad { color:#b91c1c; }

.ot-secret { display:flex; align-items:center; gap:8px; margin-top:11px; flex-wrap:wrap; }
.ot-secret code {
    flex:1 1 220px; min-width:0; padding:11px 13px; border-radius:12px;
    background:var(--gc-well); border:1px solid var(--gc-line-strong);
    color:var(--gc-accent); font-size:13.5px; font-weight:700;
    word-break:break-all; white-space:pre-line; line-height:1.9;
}
.ot-note { color:var(--gc-muted); font-size:11.5px; line-height:1.9; margin:9px 0 0; }
.ot-note.ok   { color:#34d399; }
.ot-note.bad  { color:#f87171; }
.ot-note.wait { color:var(--gc-gold); }
html:not(.dark) .ot-note.ok  { color:#047857; }
html:not(.dark) .ot-note.bad { color:#b91c1c; }

.ot-facts { display:flex; flex-wrap:wrap; gap:8px 22px; margin:11px 0 0; }
.ot-facts div { display:flex; flex-direction:column; gap:2px; }
.ot-facts dt { color:var(--gc-faint); font-size:10.5px; font-weight:700; }
.ot-facts dd { color:var(--gc-title); font-size:12.5px; font-weight:700; margin:0; }

.ot-line { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0; font-size:12.5px; color:var(--gc-text); }
.ot-line + .ot-line { border-top:1px solid var(--gc-line); }
.ot-line b { color:var(--gc-title); font-weight:800; white-space:nowrap; }
.ot-line.total b { color:var(--gc-accent); font-size:15px; }
.ot-line.muted, .ot-line.muted b { color:var(--gc-faint); font-weight:700; }

.ot-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:center; margin-top:18px; }
.ot-actions .gc-btn { width:auto; padding:0 22px; }

@media (prefers-reduced-motion: reduce) {
    .gt-page *, .ot-page * { transition-duration:.01ms !important; }
    .gt-card:hover { transform:none; }
}

/* ══════════════════════════════════════════════════════════
   بستهٔ شارژ بازی — کارت تصویری، هم‌خانوادهٔ .gem-card فری‌فایر
   ══════════════════════════════════════════════════════════ */
.gt-packs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
@media (min-width: 640px)  { .gt-packs { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1280px) { .gt-packs { grid-template-columns: repeat(4, minmax(0,1fr)); } }

.gt-pack {
    display: flex; flex-direction: column; overflow: hidden; cursor: pointer;
    text-align: start; padding: 0;
    background: var(--gc-surface); border: 1px solid var(--gc-line);
    border-radius: var(--gc-r-md); box-shadow: var(--gc-shadow);
    transition: transform .18s, border-color .18s, box-shadow .18s;
}
.gt-pack:hover { transform: translateY(-3px); border-color: var(--gc-line-strong); }
.gt-pack.is-on {
    border-color: var(--gc-accent);
    box-shadow: 0 0 0 3px var(--gc-accent-soft), var(--gc-shadow);
}
.gt-pack.is-out { opacity: .62; cursor: not-allowed; }
.gt-pack.is-out:hover { transform: none; }

.gt-pack-thumb {
    position: relative; display: block; aspect-ratio: 5/4;
    background: var(--gc-well); overflow: hidden;
}
.gt-pack-thumb img {
    width: 100%; height: 100%; object-fit: cover; object-position: center 38%;
    display: block; transform: scale(1.04);
}
.gt-pack-thumb::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to top,
        rgba(6,4,2,.94) 0%, rgba(6,4,2,.80) 34%,
        rgba(6,4,2,.34) 62%, transparent 100%);
}
.gt-pack-qty {
    position: absolute; inset-inline: 8px; bottom: 7px; z-index: 2;
    color: #fff; font-size: 12.5px; font-weight: 900; line-height: 1.5;
    text-shadow: 0 1px 6px rgba(0,0,0,.6);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.gt-pack-badge {
    position: absolute; top: 7px; inset-inline-end: 7px; z-index: 2;
    font-size: 9.5px; font-weight: 800; padding: 3px 8px; border-radius: 999px;
    backdrop-filter: blur(8px);
}
.gt-pack-badge.live { background: rgba(4,120,87,.94); color: #fff; }
.gt-pack-badge.tag  { background: rgba(234,179,8,.94);  color: #111; }
.gt-pack-badge.out  { background: rgba(190,24,24,.95);  color: #fff; }

.gt-pack-body { padding: 9px 11px 11px; display: flex; flex-direction: column; gap: 2px; }
.gt-pack-body .p { color: var(--gc-accent); font-size: 13.5px; font-weight: 900; }
.gt-pack-body .s { color: var(--gc-faint); font-size: 10.5px; font-weight: 600; }
.gt-pack-body .p small { color: var(--gc-faint); font-size: 9.5px; font-weight: 700; }
.gt-pack.is-out .gt-pack-body .p { color: var(--gc-muted); }

/* مبلغ ناموجود در صفحهٔ برند گیفت کارت */
.gc-amount.is-out { opacity: .6; cursor: not-allowed; }
.gc-amount.is-out:hover { border-color: var(--gc-line); }
.gc-amount .out {
    display: inline-block; margin-top: 3px; font-size: 9.5px; font-weight: 800;
    padding: 2px 8px; border-radius: 999px;
    background: rgba(239,68,68,.14); color: #f87171;
    border: 1px solid rgba(239,68,68,.32);
}
html:not(.dark) .gc-amount .out { color: #b91c1c; }

@media (prefers-reduced-motion: reduce) {
    .gt-pack:hover { transform: none; }
}

/* بازی‌ای که هیچ بستهٔ خریدنی ندارد — دیده می‌شود، ولی خاموش. */
.gt-card.is-out { opacity: .62; }
.gt-card.is-out:hover { transform: none; }
.gt-card .gt-pack-badge.out { position: absolute; top: 7px; inset-inline-end: 7px; z-index: 2; }

/* هشدار منطقه — بالای صفحهٔ بازی، جایی که قبل از پرداخت دیده می‌شود. */
.gt-warn {
    display: flex; align-items: flex-start; gap: 10px; margin-bottom: 18px;
    padding: 13px 15px; border-radius: var(--gc-r-md);
    background: rgba(251,191,36,.10); border: 1px solid rgba(251,191,36,.34);
    color: #fbbf24; font-size: 12.5px; font-weight: 600; line-height: 1.95;
}
.gt-warn svg { flex-shrink: 0; margin-top: 2px; }
html:not(.dark) .gt-warn { color: #92400e; background: rgba(251,191,36,.14); }

/* ── صفحهٔ سفارش یک بسته شارژ (مرحلهٔ دوم) ──────────────────────────────
   همان دو مرحلهٔ بخش جم فری‌فایر: بسته انتخاب شد، حالا آیدی. رنگ‌ها از
   همان متغیرهای .gt-page می‌آیند تا در تم روشن هم درست دربیاید. */
.gt-pack-go { display: flex; align-items: center; gap: 4px; color: var(--gc-accent); font-weight: 800; }
.gt-pack-go svg { width: 11px; height: 11px; }

.go-summary {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 14px; margin-bottom: 16px;
    background: var(--gc-surface); border: 1px solid var(--gc-line);
    border-radius: var(--gc-r-lg); box-shadow: var(--gc-shadow);
}
.go-thumb {
    width: 76px; height: 76px; flex-shrink: 0; overflow: hidden;
    border-radius: var(--gc-r-md); background: var(--gc-well);
    display: flex; align-items: center; justify-content: center;
}
.go-thumb img { width: 100%; height: 100%; object-fit: cover; }
.go-summary-text { flex: 1 1 190px; min-width: 0; }
.go-tag {
    display: inline-block; font-size: 10px; font-weight: 800; padding: 3px 9px;
    border-radius: 999px; background: var(--gc-accent-soft);
    color: var(--gc-accent); border: 1px solid var(--gc-line-strong);
}
.go-summary-text h1 { color: var(--gc-title); font-size: 1.05rem; font-weight: 900; line-height: 1.6; margin: 7px 0 3px; }
.go-summary-text p { color: var(--gc-muted); font-size: 12px; line-height: 1.8; margin: 0; }
.go-summary-price { text-align: start; margin-inline-start: auto; }
.go-summary-price s { display: block; color: var(--gc-faint); font-size: 11.5px; }
.go-summary-price b { color: var(--gc-accent); font-size: 1.3rem; font-weight: 900; }
.go-summary-price i { display: block; color: var(--gc-faint); font-size: 10.5px; font-style: normal; font-weight: 700; }

.go-error {
    display: flex; align-items: flex-start; gap: 9px; margin-bottom: 16px;
    padding: 12px 14px; border-radius: var(--gc-r-md);
    background: rgba(239,68,68,.10); border: 1px solid rgba(239,68,68,.34);
    color: #fca5a5; font-size: 12.5px; font-weight: 600; line-height: 1.9;
}
html:not(.dark) .go-error { color: #b91c1c; }
.go-error svg { flex-shrink: 0; margin-top: 2px; }

.go-form { display: grid; gap: 14px; }
.go-panel {
    padding: 16px; background: var(--gc-surface-2);
    border: 1px solid var(--gc-line); border-radius: var(--gc-r-lg);
    box-shadow: var(--gc-shadow);
}
.go-panel h2 {
    display: flex; align-items: center; gap: 7px; margin: 0 0 12px;
    color: var(--gc-title); font-size: .98rem; font-weight: 800;
}
.go-panel h2 svg { color: var(--gc-accent); }
.go-hint {
    display: flex; align-items: flex-start; gap: 9px; margin-bottom: 14px;
    padding: 11px 13px; border-radius: var(--gc-r-sm);
    background: var(--gc-accent-soft); border: 1px solid var(--gc-line);
}
.go-hint svg { flex-shrink: 0; margin-top: 2px; color: var(--gc-accent); }
.go-hint p { margin: 0; color: var(--gc-text); font-size: 12px; line-height: 1.95; }
.go-row { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.go-row .gc-input { flex: 1 1 180px; min-width: 0; margin: 0; }
/* .gt-verify پیش‌فرض تمام‌عرض است (ستون کناری صفحهٔ قبلی)؛ اینجا کنار
   ورودی می‌نشیند و نباید جای آن را بخورد. */
.go-row .gt-verify { margin: 0; width: auto; flex: 0 0 auto; padding: 0 16px; }
@media (max-width: 430px) {
    .go-row .gc-input, .go-row .gt-verify { flex: 1 1 100%; }
}
.gc-label .req { color: #f87171; }
html:not(.dark) .gc-label .req { color: #dc2626; }

.go-total {
    display: flex; align-items: baseline; gap: 7px; margin: 16px 0 14px;
    padding-top: 14px; border-top: 1px solid var(--gc-line);
}
.go-total span { color: var(--gc-muted); font-size: 12.5px; margin-inline-end: auto; }
.go-total b { color: var(--gc-accent); font-size: 1.25rem; font-weight: 900; }
.go-total i { color: var(--gc-faint); font-size: 10.5px; font-style: normal; font-weight: 700; }

.go-switch { display: flex; flex-wrap: wrap; gap: 8px; }
.go-chip {
    display: flex; flex-direction: column; gap: 2px; padding: 8px 12px;
    border-radius: var(--gc-r-sm); text-decoration: none;
    background: var(--gc-surface-2); border: 1px solid var(--gc-line);
    color: var(--gc-title); font-size: 12px; font-weight: 800;
    transition: border-color .18s, transform .18s;
}
.go-chip small { color: var(--gc-accent); font-size: 10.5px; font-weight: 700; }
.go-chip:hover { border-color: var(--gc-line-strong); transform: translateY(-2px); }
.go-chip.is-on { border-color: var(--gc-accent); box-shadow: 0 0 0 3px var(--gc-accent-soft); }
.go-chip.is-out { opacity: .55; }
.go-chip.is-out small { color: var(--gc-faint); }

.go-faq {
    margin-top: 22px; padding: 16px; background: var(--gc-surface-2);
    border: 1px solid var(--gc-line); border-radius: var(--gc-r-lg);
}
.go-faq h2 { color: var(--gc-title); font-size: 1.02rem; font-weight: 800; margin: 0 0 12px; }
.go-faq details {
    background: var(--gc-well); border: 1px solid var(--gc-line);
    border-radius: var(--gc-r-sm); padding: 11px 13px; margin-bottom: 8px;
}
.go-faq summary { color: var(--gc-title); font-weight: 700; cursor: pointer; font-size: 13px; }
.go-faq p { color: var(--gc-text); font-size: 12.5px; line-height: 1.95; margin: 8px 0 0; }

/* ردیف مبلغ‌های همسایه روی صفحهٔ یک مبلغ. عمداً لینک است نه دکمه: هم خزنده
   دنبالش می‌رود هم خریدار می‌تواند در تب تازه بازش کند. */
.go-tiers {
    margin-top: 22px; padding: 16px; background: var(--gc-surface-2);
    border: 1px solid var(--gc-line); border-radius: var(--gc-r-lg);
}
.go-tiers h2 { color: var(--gc-title); font-size: 1.02rem; font-weight: 800; margin: 0 0 12px; }
.go-tier-row { display: flex; flex-wrap: wrap; gap: 8px; }
.go-tier-row a {
    display: flex; flex-direction: column; gap: 3px; flex: 1 1 128px;
    background: var(--gc-well); border: 1px solid var(--gc-line);
    border-radius: var(--gc-r-sm); padding: 10px 12px;
    color: var(--gc-title); font-weight: 700; font-size: 12.5px;
    text-decoration: none; transition: border-color .18s, transform .18s;
}
.go-tier-row a small { color: var(--gc-text); font-weight: 600; font-size: 11.5px; }
.go-tier-row a:hover { border-color: var(--gc-line-strong); transform: translateY(-1px); }

/* ردیف نام انگلیسی زیر عنوان. کوچک و کم‌رنگ است چون برای خریدار فارسی
   یک یادداشت است، نه تیتر — ولی متنِ واقعی صفحه است و گوگل می‌خواندش. */
.en-names {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
    margin: 10px 0 0; font-size: 12px; line-height: 1.9;
}
.en-names .lbl {
    color: var(--gc-faint, #8b8598); font-weight: 700; font-size: 11.5px;
    flex: 0 0 auto;
}
@media (max-width: 480px) {
    .en-names { font-size: 11px; gap: 4px 6px; }
    .en-names .lbl { font-size: 10.5px; }
}
.en-names .vals { display: flex; flex-wrap: wrap; gap: 4px 7px; }
.en-names b { color: var(--gc-text, #b9b4c6); font-weight: 600; }
.en-names i { color: var(--gc-faint, #8b8598); font-style: normal; opacity: .6; }

@media (prefers-reduced-motion: reduce) {
    .go-chip:hover { transform: none; }
}

/* عنوان بخش وقتی کنارش جست‌وجو هست: زیرنویس روی خط خودش، وگرنه روی
   موبایل وسطش می‌شکند. */
.gt-listhead .gc-section-title small { display: block; margin: 3px 0 0 0; }

/* ── زیرمنوی «جم فری‌فایر»: یوسی پابجی، سی‌پی کال آف، کوین دلتا فورس ── */
.hdr-drop { position: relative; display: flex; }
.hdr-drop-caret { width: 12px; height: 12px; opacity: .6; flex-shrink: 0; }
.hdr-drop-menu {
    display: none; position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
    min-width: 240px; padding: 6px; border-radius: 14px;
    background: #121A25; border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 18px 40px rgba(0,0,0,.45);
}
/* پل بین آیتم و زیرمنو، تا موس در فاصلهٔ ۶ پیکسلی منو را نبندد. */
.hdr-drop-menu::before { content: ''; position: absolute; top: -8px; right: 0; left: 0; height: 8px; }
.hdr-drop:hover .hdr-drop-menu,
.hdr-drop:focus-within .hdr-drop-menu { display: block; }
.hdr-drop-item {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px;
    border-radius: 10px; text-decoration: none;
}
.hdr-drop-item:hover, .hdr-drop-item.is-on { background: rgba(249,115,22,.12); }
.hdr-drop-item img { width: 28px; height: 28px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.hdr-drop-item b { display: block; font-size: 13px; font-weight: 700; color: #fff; }
.hdr-drop-item small { display: block; font-size: 11px; color: rgba(255,255,255,.55); margin-top: 1px; }
.hdr-drop-item.is-on b { color: #fb923c; }
html:not(.dark) .hdr-drop-menu { background: #fff; border-color: rgba(15,23,42,.08); box-shadow: 0 18px 40px rgba(15,23,42,.12); }
html:not(.dark) .hdr-drop-item b { color: #0f172a; }
html:not(.dark) .hdr-drop-item small { color: #64748b; }

/* ── بخش‌های ویژهٔ شارژ (پابجی، کال آف، دلتا فورس) ── */
.fg-hero-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 14px; }
.fg-hero-link {
    display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px;
    border-radius: 12px; background: rgba(249,115,22,.12); color: #fb923c;
    font-weight: 700; font-size: 13px; text-decoration: none;
}
.fg-hero-link:hover { background: rgba(249,115,22,.2); }
.fg-hero-note { font-size: 12.5px; color: rgba(255,255,255,.62); }
.fg-hero-note b { color: #fff; }
.fg-listhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
html:not(.dark) .fg-hero-note { color: #475569; }
html:not(.dark) .fg-hero-note b { color: #0f172a; }


/* ── حالت روشن: متن‌های کم‌رنگی که روی زمینهٔ روشن گم می‌شدند ── */
html:not(.dark) .gem-kicker { color:#c2410c; background:rgba(234,88,12,.08); border-color:rgba(234,88,12,.28); }
html:not(.dark) .fg-hero-link { color:#c2410c; background:rgba(234,88,12,.10); }
html:not(.dark) .fg-hero-link:hover { background:rgba(234,88,12,.16); }
html:not(.dark) .fg-hero-note { color:#475569; }
html:not(.dark) .gem-crumbs { color:#64748b; }
html:not(.dark) .gem-crumbs a { color:#475569; }
html:not(.dark) .gem-crumbs a:hover { color:#c2410c; }
html:not(.dark) .gem-crumbs .now { color:#c2410c; }
html:not(.dark) .en-names b { color:#334155; }
html:not(.dark) .en-names i, html:not(.dark) .en-names .lbl { color:#64748b; }
html:not(.dark) .gem-card-cta,
html:not(.dark) .gem-btn-primary,
html:not(.dark) .gem-choice-btn:not(.gem-choice-cred .gem-choice-btn) { background: linear-gradient(135deg, #ea580c, #dc2626); }