/* ==========================================================================
   ماژول تم‌ها و بافت‌های سینماتیک نمد و میز بازی شلم (۱۳ تم اختصاصی)
   ========================================================================== */

/* ─── تم‌های اختصاصی و سینماتیک پس‌زمینه میز و اتاق ────────────────────────── */
.table.theme-emerald {
  background: radial-gradient(130% 120% at 50% 5%, #153826 0%, #0c2016 45%, #050c08 100%);
}
.table.theme-royal {
  background: radial-gradient(130% 120% at 50% 5%, #132a52 0%, #09162e 45%, #040914 100%);
}
.table.theme-ruby {
  background: radial-gradient(130% 120% at 50% 5%, #470d1a 0%, #29060e 45%, #0f0205 100%);
}
.table.theme-noir {
  background: radial-gradient(130% 120% at 50% 5%, #23272f 0%, #13151a 45%, #08090b 100%);
}
/* ⚠ باگِ اصلی: از وقتی ۵ تمِ فروشگاهیِ اول اضافه شدند، هیچ‌کدام (و بعداً ۸ تمِ دوم هم) اینجا
   یک `.table.theme-x{background}` مخصوصِ خودشان نداشتند — پس‌زمینهٔ کلِ صفحهٔ میز (دورِ نمد)
   همیشه از body (گرادیانِ سبزِ ثابتِ خط ۴۸) دیده می‌شد، نه رنگِ تمِ فعلی («پشت میز همیشه سبزه»).
   از var(--felt/-2/-edge) استفاده می‌کند، نه هگزِ کپی‌شده، تا اگر رنگِ تمی دوباره عوض شد،
   این پس‌زمینه خودکار هماهنگ بماند — دیگر نیازی به sync دستی نیست. */
.table.theme-carpet, .table.theme-cyberpunk, .table.theme-wood, .table.theme-galaxy,
.table.theme-gold-vip, .table.theme-gold_vip, .table.theme-leather-black, .table.theme-velvet-navy,
.table.theme-marble-cream, .table.theme-walnut-gloss, .table.theme-velvet-burgundy,
.table.theme-canvas-rustic, .table.theme-suede-olive, .table.theme-leather-vintage,
.table.theme-silk-pinstripe, .table.theme-platinum-executive {
  background: radial-gradient(130% 120% at 50% 5%, var(--felt) 0%, var(--felt-2) 45%, var(--felt-edge) 100%);
}

.table.theme-royal .topbar {
  background: rgba(9, 22, 46, 0.85);
  border-bottom-color: rgba(70, 130, 240, 0.2);
}
.table.theme-ruby .topbar {
  background: rgba(41, 6, 14, 0.85);
  border-bottom-color: rgba(230, 60, 90, 0.2);
}
.table.theme-noir .topbar {
  background: rgba(19, 21, 26, 0.9);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
.table.theme-emerald .topbar {
  background: rgba(12, 32, 22, 0.85);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.table.theme-emerald, .felt.theme-emerald {
  --felt: #134637;
  --felt-2: #0a2c22;
  --felt-edge: #051912;
  --rail: #4a3324;
  --rail-2: #2a1c12;
  --rail-3: #160e08;
  --inlay: rgba(198,158,72,.22);
  --stitch: rgba(214,178,96,.42);
  --medal: rgba(198,158,72,.13);
  box-shadow:
    inset 0 0 120px rgba(0,0,0,.62),
    inset 0 0 34px rgba(0,0,0,.45),
    inset 0 2px 6px rgba(255,255,255,.05),
    0 0 0 1px rgba(255,225,180,.10),
    0 0 0 3px rgba(0,0,0,.5),
    0 18px 45px rgba(0,0,0,.65),
    0 0 35px rgba(26, 116, 76, 0.22);
}
.table.theme-royal, .felt.theme-royal {
  --felt: #1c4d96;
  --felt-2: #0d2c5e;
  --felt-edge: #051530;
  --rail: #2c3a52;
  --rail-2: #141c2b;
  --rail-3: #0a0e18;
  --inlay: rgba(190,205,225,.20);
  --stitch: rgba(198,214,238,.34);
  --medal: rgba(190,205,225,.11);
  box-shadow:
    inset 0 0 80px rgba(0,0,0,.5),
    inset 0 2px 6px rgba(255,255,255,.08),
    0 0 0 1px rgba(255,225,180,.10),
    0 0 0 3px rgba(0,0,0,.5),
    0 18px 45px rgba(0,0,0,.7),
    0 0 45px rgba(28, 77, 150, 0.35);
}
.table.theme-ruby, .felt.theme-ruby {
  --felt: #5b2029;
  --felt-2: #3a1119;
  --felt-edge: #1c060b;
  --rail: #4d2a24;
  --rail-2: #2a1310;
  --rail-3: #17090a;
  --inlay: rgba(214,178,96,.26);
  --stitch: rgba(222,186,104,.5);
  --medal: rgba(214,178,96,.15);
  box-shadow:
    inset 0 0 80px rgba(0,0,0,.5),
    inset 0 2px 6px rgba(255,255,255,.08),
    0 0 0 1px rgba(255,225,180,.10),
    0 0 0 3px rgba(0,0,0,.5),
    0 18px 45px rgba(0,0,0,.7),
    0 0 45px rgba(120, 34, 48, 0.3);
}
.table.theme-noir, .felt.theme-noir {
  --felt: #2e343d;
  --felt-2: #1a1d22;
  --felt-edge: #0c0e11;
  --rail: #2e3138;
  --rail-2: #17181c;
  --rail-3: #0c0d10;
  --inlay: rgba(210,215,225,.14);
  --stitch: rgba(205,210,220,.26);
  --medal: rgba(210,215,225,.10);
  box-shadow:
    inset 0 0 80px rgba(0,0,0,.65),
    inset 0 2px 6px rgba(255,255,255,.06),
    0 0 0 1px rgba(255,225,180,.10),
    0 0 0 3px rgba(0,0,0,.5),
    0 18px 45px rgba(0,0,0,.75),
    0 0 35px rgba(255, 255, 255, 0.07);
}

/* ۵ تم اختصاصی فروشگاه
   ⚠ باگِ v213/v214: بافتِ تزئینیِ هر تم روی `background-image` خودِ `.felt` نوشته می‌شد،
   و چون `.felt` پایه رنگِ نمد را با یک `background` شش‌لایه (شاملِ var(--felt)) رسم
   می‌کند، override کردنِ `background-image` کلِ آن شش لایه را پاک و رنگِ نمد را به
   پیش‌فرضِ سبزِ ریشه (`:root`) سقوط می‌داد — علتِ «چرا سبزه؟». راه‌حل: بافتِ هر تم
   را روی `.felt::after` (که همین الان فقط یک بردرِ نازک است، بدونِ background) اضافه
   کن، نه روی خودِ `.felt` — این‌طور رنگِ پایه دست‌نخورده می‌ماند. */
.table.theme-carpet, .felt.theme-carpet {
  /* قرمزِ گرم و مایل به نارنجی — از «زرشکی» (H351) و «بورگاندی» (H337) با ~۲۰ درجه فاصله دارد */
  --felt: #8b301d;
  --felt-2: #54190d;
  --felt-edge: #240a05;
  --rail: #5a2318;
  --rail-2: #33130c;
  --rail-3: #190705;
  --inlay: rgba(230,185,90,.4);
  --stitch: rgba(245,205,110,.65);
  --medal: rgba(224,180,85,.3);
  box-shadow:
    inset 0 0 90px rgba(0,0,0,.55),
    inset 0 2px 8px rgba(230,185,90,.12),
    0 0 0 1px rgba(255,225,180,.16),
    0 0 0 3px rgba(0,0,0,.5),
    0 18px 45px rgba(0,0,0,.7),
    0 0 55px rgba(200, 55, 25, 0.5);
}
/* ترنجِ اصیلِ فرش ایرانی: فرش‌های واقعی هرگز تک‌رنگ نیستند — نخِ فیروزه‌ای/سبزِ دوم اضافه شد
   کنارِ طلایی، به‌علاوهٔ یک مدالیونِ بیضی‌شکلِ مشخص در مرکز (نه فقط هالهٔ محو) و ۴ گوشهٔ
   آینه‌ای با دو رنگِ متناوب (طلایی‌زرشکی ۲ گوشه، فیروزه‌ای ۲ گوشهٔ دیگر) — امضای رایجِ
   قالی‌های اصفهان/تبریز که لچکِ گوشه‌ها را با ترنجِ مرکزی هم‌رنگ نمی‌کنند. */
.felt.theme-carpet::after {
  background-image: radial-gradient(ellipse 46% 34% at 50% 50%, transparent 60%, rgba(20,130,115,.22) 63%, transparent 68%),
                    radial-gradient(ellipse 30% 22% at 50% 50%, rgba(230,185,90,.16) 0%, transparent 72%),
                    repeating-linear-gradient(45deg, rgba(230,185,90,.07) 0px, rgba(230,185,90,.07) 1px, transparent 1px, transparent 26px),
                    repeating-linear-gradient(-45deg, rgba(230,185,90,.07) 0px, rgba(230,185,90,.07) 1px, transparent 1px, transparent 26px),
                    repeating-linear-gradient(45deg, rgba(20,140,120,.045) 13px, rgba(20,140,120,.045) 14px, transparent 14px, transparent 52px),
                    radial-gradient(circle at 20% 20%, rgba(200,40,60,.18) 0%, transparent 40%),
                    radial-gradient(circle at 80% 80%, rgba(200,40,60,.18) 0%, transparent 40%),
                    radial-gradient(circle at 80% 20%, rgba(20,130,115,.15) 0%, transparent 35%),
                    radial-gradient(circle at 20% 80%, rgba(20,130,115,.15) 0%, transparent 35%);
}
.table.theme-cyberpunk, .felt.theme-cyberpunk {
  --felt: #2d1354;
  --felt-2: #170a35;
  --felt-edge: #05020a;
  --rail: #33234f;
  --rail-2: #18112c;
  --rail-3: #0a0618;
  --inlay: rgba(0,240,255,.55);
  --stitch: rgba(255,0,128,.8);
  --medal: rgba(0,255,200,.4);
  box-shadow:
    inset 0 0 90px rgba(0,0,0,.6),
    inset 0 2px 6px rgba(0,240,255,.2),
    0 0 0 1px rgba(0,240,255,.45),
    0 0 0 3px rgba(0,0,0,.6),
    0 18px 45px rgba(0,0,0,.75),
    0 0 60px rgba(255, 0, 128, 0.5);
}
.felt.theme-cyberpunk::after {
  background-image: linear-gradient(rgba(0,240,255,.1) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,0,128,.1) 1px, transparent 1px);
  background-size: 32px 32px;
}
.table.theme-wood, .felt.theme-wood {
  --felt: #4f3119;
  --felt-2: #2e1c0e;
  --felt-edge: #170d06;
  --rail: #5f3d21;
  --rail-2: #34210f;
  --rail-3: #190f07;
  --inlay: rgba(224,175,50,.4);
  --stitch: rgba(235,190,65,.6);
  --medal: rgba(210,160,40,.24);
  box-shadow:
    inset 0 0 85px rgba(0,0,0,.55),
    inset 0 2px 8px rgba(224,175,50,.1),
    0 0 0 1px rgba(255,225,180,.16),
    0 0 0 3px rgba(0,0,0,.55),
    0 18px 45px rgba(0,0,0,.7),
    0 0 50px rgba(180, 110, 45, 0.4);
}
/* رگه‌های چوب: دو لایهٔ خطِ افقیِ با زاویهٔ کمی متفاوت تا حسِ رگهٔ طبیعی بدهد، نه راه‌راهِ مصنوعی */
.felt.theme-wood::after {
  background-image: repeating-linear-gradient(3deg, rgba(0,0,0,.09) 0px, rgba(0,0,0,.09) 1px, transparent 1px, transparent 11px),
                    repeating-linear-gradient(-2deg, rgba(255,195,120,.05) 0px, rgba(255,195,120,.05) 1px, transparent 1px, transparent 17px),
                    radial-gradient(60% 45% at 50% 25%, rgba(255,195,120,.09) 0%, transparent 60%);
}
.table.theme-galaxy, .felt.theme-galaxy {
  /* کبودتر و تیره‌تر از سایبرپانک (H264→245) — کهکشان = آبی‌بنفشِ عمیقِ کیهانی، سایبرپانک = بنفش‌مجنتاییِ نئونی */
  --felt: #130e43;
  --felt-2: #090629;
  --felt-edge: #040211;
  --rail: #2a1f4d;
  --rail-2: #16102e;
  --rail-3: #090616;
  --inlay: rgba(168,85,247,.4);
  --stitch: rgba(192,132,252,.6);
  --medal: rgba(147,197,253,.3);
  box-shadow:
    inset 0 0 90px rgba(0,0,0,.6),
    inset 0 2px 8px rgba(168,85,247,.15),
    0 0 0 1px rgba(168,85,247,.35),
    0 0 0 3px rgba(0,0,0,.6),
    0 18px 45px rgba(0,0,0,.75),
    0 0 60px rgba(60, 50, 210, 0.5);
}
/* کهکشان: میدانِ ستاره (کاشی ۲۰۰px با ۶ نقطه) روی دو حبابِ سحابیِ بنفش/آبی */
.felt.theme-galaxy::after {
  background-image: radial-gradient(1.5px 1.5px at 20px 30px, rgba(255,255,255,.9) 0%, transparent 100%),
                    radial-gradient(1px 1px at 90px 70px, rgba(255,255,255,.7) 0%, transparent 100%),
                    radial-gradient(1.5px 1.5px at 150px 40px, rgba(255,255,255,.8) 0%, transparent 100%),
                    radial-gradient(1px 1px at 60px 110px, rgba(255,255,255,.6) 0%, transparent 100%),
                    radial-gradient(1.5px 1.5px at 180px 130px, rgba(255,255,255,.75) 0%, transparent 100%),
                    radial-gradient(1px 1px at 30px 170px, rgba(255,255,255,.65) 0%, transparent 100%),
                    radial-gradient(circle at 50% 30%, rgba(147,51,234,.2) 0%, transparent 60%),
                    radial-gradient(circle at 80% 70%, rgba(59,130,246,.16) 0%, transparent 50%);
  background-size: 200px 200px, 200px 200px, 200px 200px, 200px 200px, 200px 200px, 200px 200px, auto, auto;
}
.table.theme-gold-vip, .felt.theme-gold-vip, .table.theme-gold_vip, .felt.theme-gold_vip {
  --felt: #63501f;
  --felt-2: #3a2f12;
  --felt-edge: #1c1608;
  --rail: #6b5624;
  --rail-2: #3f3213;
  --rail-3: #1f1809;
  --inlay: rgba(255,215,0,.5);
  --stitch: rgba(255,223,64,.75);
  --medal: rgba(245,195,35,.35);
  box-shadow:
    inset 0 0 85px rgba(0,0,0,.55),
    inset 0 2px 8px rgba(255,215,0,.15),
    0 0 0 1px rgba(255,215,0,.4),
    0 0 0 3px rgba(0,0,0,.55),
    0 18px 45px rgba(0,0,0,.7),
    0 0 60px rgba(234, 179, 8, 0.5);
}
/* برجستهٔ سلطنتی: مشبکِ لوزیِ ظریفِ طلایی (زاویهٔ متفاوت از فرش) + هالهٔ مرکزی */
.felt.theme-gold-vip::after, .felt.theme-gold_vip::after {
  background-image: repeating-linear-gradient(60deg, rgba(255,223,90,.06) 0px, rgba(255,223,90,.06) 1px, transparent 1px, transparent 24px),
                    repeating-linear-gradient(-60deg, rgba(255,223,90,.06) 0px, rgba(255,223,90,.06) 1px, transparent 1px, transparent 24px),
                    radial-gradient(circle at 50% 50%, rgba(255,215,0,.18) 0%, transparent 70%);
}

/* ۸ تمِ اختصاصیِ دوم — الهام از متریالِ واقعی (چرم/مخمل/مرمر/چوب/کتان/سوئد)،
   هر خانواده تکنیکِ بصریِ خودش را دارد نه فقط رنگ: چرم=دانه‌ریزِ pebble+درخشش،
   مخمل=بافتِ نرمِ جهت‌دار، مرمر=رگه، چوب=درخشش/رگه، کتان=تاروپودِ ریز، سوئد=نویزِ مات. */
.table.theme-leather-black, .felt.theme-leather-black {
  /* مشکیِ گرم (قهوه‌ایِ خیلی تیره) نه مشکیِ خنثی — تا از «ذغالی» (خاکستریِ سرد) واقعاً جدا شود */
  --felt: #2c2621;
  --felt-2: #1b1611;
  --felt-edge: #0c0907;
  --rail: #3a2a1a;
  --rail-2: #211710;
  --rail-3: #100b07;
  --inlay: rgba(212,175,110,.4);
  --stitch: rgba(230,195,130,.55);
  --medal: rgba(212,175,110,.22);
  box-shadow:
    inset 0 0 85px rgba(0,0,0,.6),
    inset 0 2px 8px rgba(212,175,110,.1),
    0 0 0 1px rgba(212,175,110,.2),
    0 0 0 3px rgba(0,0,0,.55),
    0 18px 45px rgba(0,0,0,.75),
    0 0 45px rgba(50, 35, 20, 0.45);
}
/* چرمِ مشکی: دانه‌ریزِ pebble (نقاطِ ظریفِ تکرارشونده) + یک نوارِ درخشِ مورّب */
.felt.theme-leather-black::after {
  background-image: linear-gradient(115deg, rgba(255,255,255,.05) 0%, transparent 30%, transparent 70%, rgba(255,255,255,.03) 100%),
                    radial-gradient(1px 1px at 8px 8px, rgba(0,0,0,.35) 0%, transparent 100%),
                    radial-gradient(1px 1px at 4px 12px, rgba(0,0,0,.3) 0%, transparent 100%);
  background-size: auto, 16px 16px, 16px 16px;
}
.table.theme-velvet-navy, .felt.theme-velvet-navy {
  /* سرمه‌ایِ نیمه‌شب: خیلی تیره‌تر و مایل‌به‌بنفش‌تر از «سورمه‌ای» (H216→235، L35%→14%) — نه فقط رنگِ دیگر، ارزشِ روشناییِ دیگر */
  --felt: #101337;
  --felt-2: #080a22;
  --felt-edge: #03040e;
  --rail: #3a2818;
  --rail-2: #21160d;
  --rail-3: #100b06;
  --inlay: rgba(200,210,230,.35);
  --stitch: rgba(220,228,245,.5);
  --medal: rgba(180,195,220,.2);
  box-shadow:
    inset 0 0 90px rgba(0,0,0,.55),
    inset 0 2px 8px rgba(200,210,230,.1),
    0 0 0 1px rgba(200,210,230,.2),
    0 0 0 3px rgba(0,0,0,.5),
    0 18px 45px rgba(0,0,0,.7),
    0 0 45px rgba(25, 20, 90, 0.5);
}
/* مخملِ سرمه‌ای: بافتِ نرمِ جهت‌دار (نپِ مخمل زیرِ نور) — بدونِ الگوی تکرارشونده */
.felt.theme-velvet-navy::after {
  background-image: linear-gradient(100deg, rgba(255,255,255,.04) 0%, transparent 15%, transparent 45%, rgba(0,0,0,.06) 60%, transparent 80%, rgba(255,255,255,.03) 100%);
}
.table.theme-marble-cream, .felt.theme-marble-cream {
  /* تنها تمِ روشنِ مجموعه، در اپِ کاملاً دارک‌مود — راه‌حل این نیست که کم‌رنگ‌ترش کنیم،
     بلکه ویگنتِ لبه را واقعاً تا نزدیکِ مشکی تاریک کنیم: مثلِ یک تختهٔ سنگِ مرمرِ نورافکن‌خورده
     وسطِ یک اتاقِ تاریک، نه یک لکهٔ روشنِ نچسب وسطِ کروم تیره. felt/felt-2 دست‌نخورده
     (هویتِ روشنِ تم)، فقط edge و rail خیلی عمیق‌تر شدند تا افتِ نور واقعی حس شود. */
  --felt: #d9cdb8;
  --felt-2: #b8a98c;
  --felt-edge: #1a140c;
  --rail: #3a2e1c;
  --rail-2: #211a10;
  --rail-3: #100c07;
  --inlay: rgba(200,165,95,.5);
  --stitch: rgba(220,185,115,.65);
  --medal: rgba(180,145,85,.3);
  box-shadow:
    inset 0 0 100px rgba(0,0,0,.5),
    inset 0 2px 10px rgba(255,255,255,.2),
    0 0 0 1px rgba(200,165,95,.35),
    0 0 0 3px rgba(0,0,0,.55),
    0 18px 45px rgba(0,0,0,.75),
    0 0 55px rgba(200, 165, 95, 0.4);
}
/* مرمرِ کرم: رگه‌های نازکِ دوزاویه + دو لکهٔ ابری برای حسِ سنگِ طبیعی */
.felt.theme-marble-cream::after {
  background-image: linear-gradient(35deg, transparent 42%, rgba(120,100,70,.12) 43%, transparent 44%, transparent 68%, rgba(120,100,70,.09) 69%, transparent 70%),
                    linear-gradient(-20deg, transparent 25%, rgba(90,75,50,.1) 26%, transparent 27%, transparent 80%, rgba(90,75,50,.08) 81%, transparent 82%),
                    radial-gradient(50% 35% at 30% 60%, rgba(255,250,235,.15) 0%, transparent 70%),
                    radial-gradient(40% 30% at 75% 25%, rgba(255,250,235,.12) 0%, transparent 70%);
}
.table.theme-walnut-gloss, .felt.theme-walnut-gloss {
  /* ماهونِ قرمزتر و تیره‌تر از theme-wood (H27→15) — «صیقلی» یعنی عمیق‌تر هم هست، نه فقط براق‌تر */
  --felt: #492012;
  --felt-2: #2d1209;
  --felt-edge: #130703;
  --rail: #6b4526;
  --rail-2: #3f2914;
  --rail-3: #1f1409;
  --inlay: rgba(230,190,110,.4);
  --stitch: rgba(240,205,130,.55);
  --medal: rgba(210,170,90,.25);
  box-shadow:
    inset 0 0 85px rgba(0,0,0,.55),
    inset 0 2px 8px rgba(230,190,110,.12),
    0 0 0 1px rgba(230,190,110,.25),
    0 0 0 3px rgba(0,0,0,.5),
    0 18px 45px rgba(0,0,0,.7),
    0 0 45px rgba(160, 60, 25, 0.45);
}
/* گردوی جلادار: دو نورِ بازتابی (نه یکی) — نوارِ نرمِ پهن + یک خطِ باریکِ تیزِ برخوردِ مستقیمِ نور،
   دقیقاً همان چیزی که لاکِ الکلیِ واقعی روی چوب می‌سازد (نه صرفاً یک هالهٔ محو) */
.felt.theme-walnut-gloss::after {
  background-image: linear-gradient(125deg, transparent 0%, transparent 32%, rgba(255,235,190,.22) 46%, rgba(255,245,220,.32) 50%, rgba(255,235,190,.22) 54%, transparent 68%, transparent 100%),
                    linear-gradient(125deg, transparent 0%, transparent 41%, rgba(255,250,235,.5) 49.5%, rgba(255,250,235,.5) 50.5%, transparent 58%, transparent 100%);
}
.table.theme-velvet-burgundy, .felt.theme-velvet-burgundy {
  /* لِوندِ عمیق (H310) نه قرمز — دیگر «زرشکیِ تیره‌تر» نیست، رنگِ کاملاً متفاوتی است.
     ریلِ زغالی-بنفش به‌جای چوبِ گرمِ معمول + طلای‌رزی به‌جای طلای زردِ استاندارد
     («کازینوی مدرنِ نیمه‌شب» در برابرِ رنگ‌آمیزیِ چوبیِ کلاسیکِ زرشکی). */
  --felt: #390931;
  --felt-2: #20041b;
  --felt-edge: #0e010c;
  --rail: #211221;
  --rail-2: #140b14;
  --rail-3: #0a050a;
  --inlay: rgba(224,150,175,.45);
  --stitch: rgba(238,175,200,.65);
  --medal: rgba(210,140,165,.3);
  box-shadow:
    inset 0 0 90px rgba(0,0,0,.5),
    inset 0 2px 8px rgba(224,150,175,.14),
    0 0 0 1px rgba(224,150,175,.28),
    0 0 0 3px rgba(0,0,0,.5),
    0 18px 45px rgba(0,0,0,.7),
    0 0 55px rgba(160, 15, 110, 0.55);
}
/* بورگاندیِ هتلی: نپِ مخمل قوی‌تر از v218 (تا واقعاً «مخمل» حس شود، نه فقط رنگ) */
.felt.theme-velvet-burgundy::after {
  background-image: linear-gradient(100deg, rgba(255,255,255,.06) 0%, transparent 15%, transparent 45%, rgba(0,0,0,.12) 60%, transparent 80%, rgba(255,255,255,.04) 100%);
}
.table.theme-canvas-rustic, .felt.theme-canvas-rustic {
  --felt: #4a5563;
  --felt-2: #313a45;
  --felt-edge: #181d23;
  --rail: #4a3624;
  --rail-2: #2c2015;
  --rail-3: #16100a;
  --inlay: rgba(200,190,170,.32);
  --stitch: rgba(215,205,185,.48);
  --medal: rgba(190,180,160,.2);
  box-shadow:
    inset 0 0 85px rgba(0,0,0,.5),
    inset 0 2px 8px rgba(200,190,170,.08),
    0 0 0 1px rgba(200,190,170,.18),
    0 0 0 3px rgba(0,0,0,.5),
    0 18px 45px rgba(0,0,0,.65),
    0 0 35px rgba(90, 100, 115, 0.35);
}
/* کتانِ روستیک: تاروپودِ ریزِ ۴px، عمودی×افقی — بافتِ پارچهٔ بافته‌شده، نه گریدِ دیجیتال */
.felt.theme-canvas-rustic::after {
  background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.06) 0px, rgba(0,0,0,.06) 1px, transparent 1px, transparent 4px),
                    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0px, rgba(255,255,255,.03) 1px, transparent 1px, transparent 4px);
}
.table.theme-suede-olive, .felt.theme-suede-olive {
  --felt: #4a5c2e;
  --felt-2: #2e3a1c;
  --felt-edge: #161d0e;
  --rail: #3d3220;
  --rail-2: #241d12;
  --rail-3: #120e09;
  --inlay: rgba(200,195,150,.3);
  --stitch: rgba(215,210,165,.45);
  --medal: rgba(180,175,130,.2);
  box-shadow:
    inset 0 0 85px rgba(0,0,0,.55),
    inset 0 2px 8px rgba(200,195,150,.08),
    0 0 0 1px rgba(200,195,150,.18),
    0 0 0 3px rgba(0,0,0,.5),
    0 18px 45px rgba(0,0,0,.65),
    0 0 35px rgba(90, 110, 45, 0.35);
}
/* سوئدِ زیتونی: نویزِ ریزِ مات (بدونِ جهت، برخلافِ مخمل) — حسِ پارچهٔ پرزدار */
.felt.theme-suede-olive::after {
  background-image: radial-gradient(1px 1px at 3px 3px, rgba(255,255,255,.05) 0%, transparent 100%),
                    radial-gradient(1px 1px at 7px 9px, rgba(0,0,0,.06) 0%, transparent 100%),
                    radial-gradient(1px 1px at 11px 4px, rgba(255,255,255,.04) 0%, transparent 100%);
  background-size: 12px 12px, 12px 12px, 12px 12px;
}
.table.theme-leather-vintage, .felt.theme-leather-vintage {
  /* دباغیِ کهنه و کم‌رنگ‌شده — روشن‌تر و کم‌اشباع‌تر از wood/walnut-gloss تا «سومین قهوه‌ایِ یکسان» نباشد */
  --felt: #796349;
  --felt-2: #4b3926;
  --felt-edge: #20180f;
  --rail: #5a3d24;
  --rail-2: #362415;
  --rail-3: #1a1109;
  --inlay: rgba(220,195,150,.35);
  --stitch: rgba(230,205,165,.5);
  --medal: rgba(200,175,130,.22);
  box-shadow:
    inset 0 0 85px rgba(0,0,0,.5),
    inset 0 2px 8px rgba(220,195,150,.12),
    0 0 0 1px rgba(220,195,150,.22),
    0 0 0 3px rgba(0,0,0,.5),
    0 18px 45px rgba(0,0,0,.65),
    0 0 40px rgba(150, 125, 90, 0.3);
}
/* چرمِ عتیقهٔ نقشه‌دار: دانه‌ریزِ pebble + خطوطِ محوِ شعاعی از مرکز (یادآورِ قطب‌نما) */
.felt.theme-leather-vintage::after {
  background-image: repeating-conic-gradient(from 0deg at 50% 50%, rgba(230,205,165,.04) 0deg 2deg, transparent 2deg 45deg),
                    radial-gradient(1px 1px at 8px 8px, rgba(0,0,0,.3) 0%, transparent 100%),
                    radial-gradient(1px 1px at 4px 12px, rgba(0,0,0,.25) 0%, transparent 100%);
  background-size: auto, 16px 16px, 16px 16px;
}

/* ۲ تمِ رسمی/شیکِ سوم — عمداً بدونِ طلای گرم (که همهٔ ۱۳ تمِ قبلی استفاده کرده‌اند) و
   بدونِ نخِ چوب. «رسمی» یعنی خویشتن‌داری هم هست: بدونِ نقشِ تزئینیِ پرسروصدا، فقط
   جنسیتِ خودِ پارچه حرف می‌زند — ابریشمِ مشکی با راه‌راهِ ظریف، یا فلزِ پلاتینیِ صیقلی. */
.table.theme-silk-pinstripe, .felt.theme-silk-pinstripe {
  /* ابریشمِ مشکیِ سردتر و تیره‌تر از leather-black/noir — کروات‌مشکی، نه چرم و نه ذغال */
  --felt: #11141d;
  --felt-2: #090b11;
  --felt-edge: #040406;
  --rail: #0d0e12;
  --rail-2: #09090c;
  --rail-3: #040506;
  --inlay: rgba(220,225,235,.4);
  --stitch: rgba(235,238,245,.6);
  --medal: rgba(210,215,225,.25);
  box-shadow:
    inset 0 0 90px rgba(0,0,0,.6),
    inset 0 2px 8px rgba(220,225,235,.12),
    0 0 0 1px rgba(220,225,235,.3),
    0 0 0 3px rgba(0,0,0,.55),
    0 18px 45px rgba(0,0,0,.75),
    0 0 50px rgba(200, 210, 230, 0.35);
}
/* ابریشمِ راه‌راه: خط‌دوزیِ عمودیِ ظریف (۹px) + یک نوارِ نرم و پهنِ درخشِ ابریشمی (نه تیز مثلِ لاک) */
.felt.theme-silk-pinstripe::after {
  background-image: repeating-linear-gradient(90deg, rgba(230,235,245,.08) 0px, rgba(230,235,245,.08) 1px, transparent 1px, transparent 9px),
                    linear-gradient(115deg, transparent 0%, transparent 30%, rgba(255,255,255,.06) 42%, rgba(255,255,255,.1) 50%, rgba(255,255,255,.06) 58%, transparent 70%, transparent 100%);
}
.table.theme-platinum-executive, .felt.theme-platinum-executive {
  /* پلاتینِ خنثی و سرد — فقط ۲۰۰ درجه، فاصله از سورمه‌ای(۲۱۶)/ذغالی(۲۱۶) با درخشِ فلزیِ قوی جبران می‌شود */
  --felt: #1f292d;
  --felt-2: #12191c;
  --felt-edge: #060809;
  --rail: #283033;
  --rail-2: #191d1f;
  --rail-3: #0b0d0e;
  --inlay: rgba(200,220,235,.55);
  --stitch: rgba(225,238,248,.75);
  --medal: rgba(190,210,225,.35);
  box-shadow:
    inset 0 0 85px rgba(0,0,0,.5),
    inset 0 2px 8px rgba(200,220,235,.18),
    0 0 0 1px rgba(200,220,235,.4),
    0 0 0 3px rgba(0,0,0,.5),
    0 18px 45px rgba(0,0,0,.7),
    0 0 55px rgba(210, 225, 240, 0.45);
}
/* پلاتینِ اجرایی: خطوطِ ریزِ برس‌خوردهٔ فلزی + دو نورِ کروم‌مانند + جرقه‌های الماس (میدانِ نقطه، مثلِ galaxy ولی سفید و کم‌تراکم) */
.felt.theme-platinum-executive::after {
  background-image: radial-gradient(1px 1px at 25px 35px, rgba(255,255,255,.9) 0%, transparent 100%),
                    radial-gradient(1px 1px at 85px 65px, rgba(255,255,255,.8) 0%, transparent 100%),
                    radial-gradient(1.5px 1.5px at 150px 20px, rgba(255,255,255,.95) 0%, transparent 100%),
                    radial-gradient(1px 1px at 60px 120px, rgba(255,255,255,.75) 0%, transparent 100%),
                    linear-gradient(125deg, transparent 0%, transparent 38%, rgba(220,235,250,.25) 48%, rgba(240,248,255,.35) 50%, rgba(220,235,250,.25) 52%, transparent 62%, transparent 100%),
                    repeating-linear-gradient(1deg, rgba(255,255,255,.04) 0px, rgba(255,255,255,.04) 1px, transparent 1px, transparent 3px);
  background-size: 200px 200px, 200px 200px, 200px 200px, 200px 200px, auto, auto;
}

/* ⚠ موبایل: شعاعِ سایه‌های نمد کوچک می‌شود. نمد بزرگ‌ترین المانِ صفحه است و هر
   تغییری داخلش این سایه‌ها را از نو می‌کشد؛ inset با شعاعِ ۸۰–۱۲۰px روی GPUِ گوشی
   گران است و در نمدِ ~۳۶۰px عرض دیده هم نمی‌شود. هالهٔ رنگیِ هر تم (آخرین سایه)
   دست‌نخورده می‌ماند تا ظاهرِ تم عوض نشود.
   این بلوک باید **بعد از** تم‌ها بیاید: `.felt.theme-x` از `.felt` قوی‌تر است. */
@media (max-width: 560px) {
  .felt.theme-emerald {
    box-shadow: inset 0 0 40px rgba(0,0,0,.62), inset 0 0 16px rgba(0,0,0,.45),
      inset 0 2px 6px rgba(255,255,255,.05), 0 0 0 1px rgba(255,225,180,.10),
      0 0 0 3px rgba(0,0,0,.5), 0 8px 18px rgba(0,0,0,.65), 0 0 20px rgba(26, 116, 76, 0.22);
  }
  .felt.theme-royal {
    box-shadow: inset 0 0 34px rgba(0,0,0,.5), inset 0 2px 6px rgba(255,255,255,.08),
      0 0 0 1px rgba(255,225,180,.10), 0 0 0 3px rgba(0,0,0,.5),
      0 8px 18px rgba(0,0,0,.7), 0 0 22px rgba(28, 77, 150, 0.35);
  }
  .felt.theme-ruby {
    box-shadow: inset 0 0 34px rgba(0,0,0,.5), inset 0 2px 6px rgba(255,255,255,.08),
      0 0 0 1px rgba(255,225,180,.10), 0 0 0 3px rgba(0,0,0,.5),
      0 8px 18px rgba(0,0,0,.7), 0 0 22px rgba(120, 34, 48, 0.3);
  }
  .felt.theme-noir {
    box-shadow: inset 0 0 34px rgba(0,0,0,.65), inset 0 2px 6px rgba(255,255,255,.06),
      0 0 0 1px rgba(255,225,180,.10), 0 0 0 3px rgba(0,0,0,.5),
      0 8px 18px rgba(0,0,0,.75), 0 0 20px rgba(255, 255, 255, 0.07);
  }
  .felt.theme-carpet {
    box-shadow: inset 0 0 36px rgba(0,0,0,.5), inset 0 2px 8px rgba(230,185,90,.12),
      0 0 0 1px rgba(255,225,180,.16), 0 0 0 3px rgba(0,0,0,.5),
      0 8px 18px rgba(0,0,0,.7), 0 0 28px rgba(200, 55, 25, 0.5);
  }
  .felt.theme-cyberpunk {
    box-shadow: inset 0 0 36px rgba(0,0,0,.55), inset 0 2px 6px rgba(0,240,255,.2),
      0 0 0 1px rgba(0,240,255,.45), 0 0 0 3px rgba(0,0,0,.6),
      0 8px 18px rgba(0,0,0,.75), 0 0 30px rgba(255, 0, 128, 0.5);
  }
  .felt.theme-wood {
    box-shadow: inset 0 0 36px rgba(0,0,0,.5), inset 0 2px 8px rgba(224,175,50,.1),
      0 0 0 1px rgba(255,225,180,.16), 0 0 0 3px rgba(0,0,0,.55),
      0 8px 18px rgba(0,0,0,.7), 0 0 26px rgba(180, 110, 45, 0.4);
  }
  .felt.theme-galaxy {
    box-shadow: inset 0 0 36px rgba(0,0,0,.55), inset 0 2px 8px rgba(168,85,247,.15),
      0 0 0 1px rgba(168,85,247,.35), 0 0 0 3px rgba(0,0,0,.6),
      0 8px 18px rgba(0,0,0,.75), 0 0 32px rgba(60, 50, 210, 0.5);
  }
  .felt.theme-gold-vip, .felt.theme-gold_vip {
    box-shadow: inset 0 0 36px rgba(0,0,0,.5), inset 0 2px 8px rgba(255,215,0,.15),
      0 0 0 1px rgba(255,215,0,.4), 0 0 0 3px rgba(0,0,0,.55),
      0 8px 18px rgba(0,0,0,.7), 0 0 30px rgba(234, 179, 8, 0.5);
  }
  .felt.theme-leather-black {
    box-shadow: inset 0 0 34px rgba(0,0,0,.6), inset 0 2px 8px rgba(212,175,110,.1),
      0 0 0 1px rgba(212,175,110,.2), 0 0 0 3px rgba(0,0,0,.55),
      0 8px 18px rgba(0,0,0,.75), 0 0 22px rgba(50, 35, 20, 0.45);
  }
  .felt.theme-velvet-navy {
    box-shadow: inset 0 0 36px rgba(0,0,0,.55), inset 0 2px 8px rgba(200,210,230,.1),
      0 0 0 1px rgba(200,210,230,.2), 0 0 0 3px rgba(0,0,0,.5),
      0 8px 18px rgba(0,0,0,.7), 0 0 22px rgba(25, 20, 90, 0.5);
  }
  .felt.theme-marble-cream {
    box-shadow: inset 0 0 40px rgba(0,0,0,.45), inset 0 2px 10px rgba(255,255,255,.2),
      0 0 0 1px rgba(200,165,95,.35), 0 0 0 3px rgba(0,0,0,.5),
      0 8px 18px rgba(0,0,0,.6), 0 0 26px rgba(200, 165, 95, 0.4);
  }
  .felt.theme-walnut-gloss {
    box-shadow: inset 0 0 34px rgba(0,0,0,.55), inset 0 2px 8px rgba(230,190,110,.12),
      0 0 0 1px rgba(230,190,110,.25), 0 0 0 3px rgba(0,0,0,.5),
      0 8px 18px rgba(0,0,0,.7), 0 0 22px rgba(160, 60, 25, 0.45);
  }
  .felt.theme-velvet-burgundy {
    box-shadow: inset 0 0 36px rgba(0,0,0,.5), inset 0 2px 8px rgba(224,150,175,.14),
      0 0 0 1px rgba(224,150,175,.28), 0 0 0 3px rgba(0,0,0,.5),
      0 8px 18px rgba(0,0,0,.7), 0 0 28px rgba(160, 15, 110, 0.55);
  }
  .felt.theme-canvas-rustic {
    box-shadow: inset 0 0 34px rgba(0,0,0,.5), inset 0 2px 8px rgba(200,190,170,.08),
      0 0 0 1px rgba(200,190,170,.18), 0 0 0 3px rgba(0,0,0,.5),
      0 8px 18px rgba(0,0,0,.65), 0 0 18px rgba(90, 100, 115, 0.35);
  }
  .felt.theme-suede-olive {
    box-shadow: inset 0 0 34px rgba(0,0,0,.55), inset 0 2px 8px rgba(200,195,150,.08),
      0 0 0 1px rgba(200,195,150,.18), 0 0 0 3px rgba(0,0,0,.5),
      0 8px 18px rgba(0,0,0,.65), 0 0 18px rgba(90, 110, 45, 0.35);
  }
  .felt.theme-leather-vintage {
    box-shadow: inset 0 0 34px rgba(0,0,0,.5), inset 0 2px 8px rgba(220,195,150,.12),
      0 0 0 1px rgba(220,195,150,.22), 0 0 0 3px rgba(0,0,0,.5),
      0 8px 18px rgba(0,0,0,.65), 0 0 20px rgba(150, 125, 90, 0.3);
  }
  .felt.theme-silk-pinstripe {
    box-shadow: inset 0 0 36px rgba(0,0,0,.6), inset 0 2px 8px rgba(220,225,235,.12),
      0 0 0 1px rgba(220,225,235,.3), 0 0 0 3px rgba(0,0,0,.55),
      0 8px 18px rgba(0,0,0,.75), 0 0 26px rgba(200, 210, 230, 0.35);
  }
  .felt.theme-platinum-executive {
    box-shadow: inset 0 0 34px rgba(0,0,0,.5), inset 0 2px 8px rgba(200,220,235,.18),
      0 0 0 1px rgba(200,220,235,.4), 0 0 0 3px rgba(0,0,0,.5),
      0 8px 18px rgba(0,0,0,.7), 0 0 28px rgba(210, 225, 240, 0.45);
  }
}

/* ─── دیالوگ انتخاب تم روی میز ──────────────────────────────────────────────── */
.table-theme-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(6px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: fadeIn 0.2s ease-out;
}
.table-theme-modal {
  background: #151d28;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  width: 100%;
  max-width: 440px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 30px rgba(244, 201, 93, 0.1);
  overflow: hidden;
  animation: scaleUp 0.25s var(--ease-spring);
}
.table-theme-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.table-theme-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.table-theme-title h3 {
  margin: 0;
  font-size: 16px;
  color: #fff;
  font-weight: 700;
}
.table-theme-sub {
  margin: 12px 20px 8px;
  font-size: 13px;
  color: #94a3b8;
}
.table-theme-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 12px 20px 20px;
}
.table-theme-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 14px;
  border-radius: 14px;
  border: 2px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  text-align: right;
  gap: 6px;
}
.table-theme-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.06);
}
.table-theme-card.active {
  border-color: var(--gold);
  background: rgba(244, 201, 93, 0.08);
  box-shadow: 0 0 16px rgba(244, 201, 93, 0.2);
}
.ttc-preview {
  width: 100%;
  height: 38px;
  border-radius: 8px;
  margin-bottom: 4px;
  border: 3px solid var(--ttc-rail, rgba(255, 255, 255, 0.15));
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
}
.ttc-preview.emerald { --ttc-rail: #4a3324; background: radial-gradient(circle, #1a744c 0%, #0e442c 100%); }
.ttc-preview.royal   { --ttc-rail: #2c3a52; background: radial-gradient(circle, #1c4d96 0%, #0d2c5e 100%); }
.ttc-preview.ruby    { --ttc-rail: #4d2a24; background: radial-gradient(circle, #8a172c 0%, #520917 100%); }
.ttc-preview.noir    { --ttc-rail: #2e3138; background: radial-gradient(circle, #2e343d 0%, #17181c 100%); }
/* ⚠ ۵ تمِ فروشگاهیِ اول اینجا اصلاً سواچ نداشتند (رنگش دیده نمی‌شد) — همراهِ ۸ تمِ جدید اضافه شد */
.ttc-preview.carpet          { --ttc-rail: #5a2318; background: radial-gradient(circle, #b03d26 0%, #54190d 100%); }
.ttc-preview.cyberpunk       { --ttc-rail: #33234f; background: radial-gradient(circle, #4a1f8f 0%, #170a35 100%); }
.ttc-preview.wood            { --ttc-rail: #5f3d21; background: radial-gradient(circle, #6b4726 0%, #2e1c0e 100%); }
.ttc-preview.galaxy          { --ttc-rail: #2a1f4d; background: radial-gradient(circle, #241a70 0%, #090629 100%); }
.ttc-preview.gold-vip        { --ttc-rail: #6b5624; background: radial-gradient(circle, #82692c 0%, #3a2f12 100%); }
.ttc-preview.leather-black   { --ttc-rail: #3a2a1a; background: radial-gradient(circle, #453b32 0%, #1b1611 100%); }
.ttc-preview.velvet-navy     { --ttc-rail: #3a2818; background: radial-gradient(circle, #1c2260 0%, #080a22 100%); }
.ttc-preview.marble-cream    { --ttc-rail: #6b5636; background: radial-gradient(circle, #ece2cf 0%, #b8a98c 100%); }
.ttc-preview.walnut-gloss    { --ttc-rail: #6b4526; background: radial-gradient(circle, #6b301a 0%, #2d1209 100%); }
.ttc-preview.velvet-burgundy { --ttc-rail: #211221; background: radial-gradient(circle, #5c1150 0%, #20041b 100%); }
.ttc-preview.canvas-rustic   { --ttc-rail: #4a3624; background: radial-gradient(circle, #5c6b7d 0%, #313a45 100%); }
.ttc-preview.suede-olive     { --ttc-rail: #3d3220; background: radial-gradient(circle, #5c7238 0%, #2e3a1c 100%); }
.ttc-preview.leather-vintage { --ttc-rail: #5a3d24; background: radial-gradient(circle, #937a5a 0%, #4b3926 100%); }
.ttc-preview.silk-pinstripe    { --ttc-rail: #0d0e12; background: radial-gradient(circle, #232a3d 0%, #090b11 100%); }
.ttc-preview.platinum-executive { --ttc-rail: #283033; background: radial-gradient(circle, #3d4a50 0%, #12191c 100%); }
.ttc-name {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}
.table-theme-card.active .ttc-name {
  color: var(--gold);
}
.ttc-desc {
  font-size: 11px;
  color: #7b9483;
  line-height: 1.3;
}

/* ─── انتخاب تم در ساخت اتاق ────────────────────────────────────────────────── */
.cr-theme-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.cr-theme-tabs {
  display: flex;
  flex: 1;
  min-width: 0;
  gap: 6px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  touch-action: pan-x;
}
.cr-theme-tabs::-webkit-scrollbar { display: none; }
.cr-theme-btn {
  flex: none;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: #cfd8dc;
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
.cr-theme-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
}
.cr-theme-btn.active {
  background: rgba(244, 201, 93, 0.15);
  border-color: var(--gold);
  color: var(--gold);
  font-weight: 700;
  box-shadow: 0 0 10px rgba(244, 201, 93, 0.25);
}
.cr-theme-btn .theme-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(0,0,0,0.5);
  display: inline-block;
}
.cr-theme-btn.emerald .theme-dot { background: #1a6b47; }
.cr-theme-btn.royal .theme-dot { background: #2b4c80; }
.cr-theme-btn.ruby .theme-dot { background: #8a1e30; }
.cr-theme-btn.noir .theme-dot { background: #353a42; }