/* ==================== themes.css - طرح‌های رنگی کل برنامه (تولیدشده) ====================
   هر طرح فقط مقدار «توکن»های رنگ را عوض می‌کند. تمام CSS و صفحه‌ها از همین توکن‌ها استفاده می‌کنند،
   پس یک طرح از صفحه‌ی لاگین تا همه‌ی صفحه‌ها، مودال‌ها و منوها را می‌پوشاند.
   طرح پیش‌فرض (آبی) دقیقاً ظاهر قبلی برنامه است. =================================================== */

:root {
    --primary: #0284c7;
    --primary-dark: #0369a1;
    --primary-light: #0ea5e9;
    --primary-rgb: 2,132,199;
    --chrome-a: #c026d3;
    --chrome-a-rgb: 192,38,211;
    --chrome-b: #7c3aed;
    --chrome-b-rgb: 124,58,237;
    --chrome-b-dark: #6d28d9;
    --chrome-b-deep: #7e22ce;
    --surface: #ffffff;
    --surface-2: #f8fafc;
    --surface-3: #f1f5f9;
    --tint: #f0f9ff;
    --tint-2: #e0f2fe;
    --text: #0f172a;
    --text-2: #1e293b;
    --text-3: #334155;
    --text-secondary: #475569;
    --text-soft: #64748b;
    --text-muted: #94a3b8;
    --border: #e2e8f0;
    --border-soft: #f1f5f9;
    --border-strong: #cbd5e1;
    --menu-panel: rgba(253,244,255,0.98);
    --tile-title: #4c1d95;
}

/* ---------- یاقوت سلطنتی ---------- */
html[data-app-theme="royal"] {
    --primary: #1f56ad;
    --primary-dark: #0b2a5b;
    --primary-light: #507bbf;
    --primary-rgb: 31,86,173;
    --chrome-a: #0b2a5b;
    --chrome-a-rgb: 11,42,91;
    --chrome-b: #1f56ad;
    --chrome-b-rgb: 31,86,173;
    --chrome-b-dark: #0a2550;
    --chrome-b-deep: #123978;
    --accent: #d4a017;
    --accent-light: #f2c94c;
    --accent-rgb: 212,160,23;
    --surface: #ffffff;
    --surface-2: #f5f8fd;
    --surface-3: #edf3fc;
    --tint: #eff3f9;
    --tint-2: #e0e7f4;
    --text: #0b1b3a;
    --text-2: #253552;
    --text-3: #3c4a67;
    --text-secondary: #56647f;
    --text-soft: #748096;
    --text-muted: #a2aab9;
    --border: #d8e2f4;
    --border-soft: #ecf0fa;
    --border-strong: #c2cbdc;
    --bg: #eff3f9;
    --card-bg: #ffffff;
    --menu-panel: rgba(246,248,252,0.98);
    --tile-bg: linear-gradient(145deg,#ffffff,#eff3f9);
    --tile-border: 1px solid #d8e2f4;
    --tile-title: #0b1b3a;
    --tile-desc: #56647f;
    --page-bg1: #e9f0fb;
    --page-bg2: #fbf6e8;
    --page-bg: linear-gradient(160deg,#ffffff 0%,#eff3f9 100%);
    --page-border: #d8e2f4;
    --body-bg: linear-gradient(135deg,#e9f0fb 0%,#fbf6e8 100%);
    --header-bg: linear-gradient(135deg,#0b2a5b 0%,#1f56ad 100%);
    --login-bg: linear-gradient(135deg,#051329 0%,#0b2a5b 48%,#1f56ad 100%);
    --login-btn: linear-gradient(135deg,#1f56ad,#d4a017);
    --login-btn-hover: linear-gradient(135deg,#0b2a5b,#b48814);
    --login-title: linear-gradient(135deg,#f2c94c,#ffffff,#96b0d9);
    --login-glow-rgb: 212,160,23;
    --login-focus-rgb: 98,137,198;
    --islamic-green: var(--primary);
    --islamic-green-light: var(--primary-light);
    --gold: var(--accent);
    --gold-light: var(--accent-light);
    --cream: var(--tint);
    --white: var(--surface);
    color-scheme: light;
}

/* ---------- زمرد و شامپاین ---------- */
html[data-app-theme="emerald"] {
    --primary: #14966f;
    --primary-dark: #0a4f3b;
    --primary-light: #48ad8f;
    --primary-rgb: 20,150,111;
    --chrome-a: #0a4f3b;
    --chrome-a-rgb: 10,79,59;
    --chrome-b: #14966f;
    --chrome-b-rgb: 20,150,111;
    --chrome-b-dark: #094634;
    --chrome-b-deep: #0e684d;
    --accent: #c9a24b;
    --accent-light: #e6c97a;
    --accent-rgb: 201,162,75;
    --surface: #ffffff;
    --surface-2: #f4fbf7;
    --surface-3: #ebf8f1;
    --tint: #eff8f5;
    --tint-2: #def0eb;
    --text: #0a2e24;
    --text-2: #21443a;
    --text-3: #36584c;
    --text-secondary: #4d6e62;
    --text-soft: #6d887e;
    --text-muted: #9dafa9;
    --border: #d3eadf;
    --border-soft: #e9f4ef;
    --border-strong: #bed3c9;
    --bg: #eff8f5;
    --card-bg: #ffffff;
    --menu-panel: rgba(246,251,249,0.98);
    --tile-bg: linear-gradient(145deg,#ffffff,#eff8f5);
    --tile-border: 1px solid #d3eadf;
    --tile-title: #0a2e24;
    --tile-desc: #4d6e62;
    --page-bg1: #e6f6ee;
    --page-bg2: #fbf6e6;
    --page-bg: linear-gradient(160deg,#ffffff 0%,#eff8f5 100%);
    --page-border: #d3eadf;
    --body-bg: linear-gradient(135deg,#e6f6ee 0%,#fbf6e6 100%);
    --header-bg: linear-gradient(135deg,#0a4f3b 0%,#14966f 100%);
    --login-bg: linear-gradient(135deg,#04241b 0%,#0a4f3b 48%,#14966f 100%);
    --login-btn: linear-gradient(135deg,#14966f,#c9a24b);
    --login-btn-hover: linear-gradient(135deg,#0a4f3b,#ab8a40);
    --login-title: linear-gradient(135deg,#e6c97a,#ffffff,#91cebc);
    --login-glow-rgb: 201,162,75;
    --login-focus-rgb: 90,182,154;
    --islamic-green: var(--primary);
    --islamic-green-light: var(--primary-light);
    --gold: var(--accent);
    --gold-light: var(--accent-light);
    --cream: var(--tint);
    --white: var(--surface);
    color-scheme: light;
}

/* ---------- ارغوان و رزگلد ---------- */
html[data-app-theme="burgundy"] {
    --primary: #a3234f;
    --primary-dark: #611230;
    --primary-light: #b75376;
    --primary-rgb: 163,35,79;
    --chrome-a: #611230;
    --chrome-a-rgb: 97,18,48;
    --chrome-b: #a3234f;
    --chrome-b-rgb: 163,35,79;
    --chrome-b-dark: #55102a;
    --chrome-b-deep: #78183b;
    --accent: #d9976a;
    --accent-light: #efc09b;
    --accent-rgb: 217,151,106;
    --surface: #ffffff;
    --surface-2: #fdf8f9;
    --surface-3: #fcf2f5;
    --tint: #f9f0f3;
    --tint-2: #f2e0e6;
    --text: #3a0f1d;
    --text-2: #502432;
    --text-3: #643543;
    --text-secondary: #7a4a58;
    --text-soft: #926b76;
    --text-muted: #b69ba3;
    --border: #f0d9df;
    --border-soft: #f8ecef;
    --border-strong: #d8c3c9;
    --bg: #f9f0f3;
    --card-bg: #ffffff;
    --menu-panel: rgba(251,246,248,0.98);
    --tile-bg: linear-gradient(145deg,#ffffff,#f9f0f3);
    --tile-border: 1px solid #f0d9df;
    --tile-title: #3a0f1d;
    --tile-desc: #7a4a58;
    --page-bg1: #fbeff2;
    --page-bg2: #fcf5ec;
    --page-bg: linear-gradient(160deg,#ffffff 0%,#f9f0f3 100%);
    --page-border: #f0d9df;
    --body-bg: linear-gradient(135deg,#fbeff2 0%,#fcf5ec 100%);
    --header-bg: linear-gradient(135deg,#611230 0%,#a3234f 100%);
    --login-bg: linear-gradient(135deg,#2c0816 0%,#611230 48%,#a3234f 100%);
    --login-btn: linear-gradient(135deg,#a3234f,#d9976a);
    --login-btn-hover: linear-gradient(135deg,#611230,#b8805a);
    --login-title: linear-gradient(135deg,#efc09b,#ffffff,#d498ad);
    --login-glow-rgb: 217,151,106;
    --login-focus-rgb: 191,101,132;
    --islamic-green: var(--primary);
    --islamic-green-light: var(--primary-light);
    --gold: var(--accent);
    --gold-light: var(--accent-light);
    --cream: var(--tint);
    --white: var(--surface);
    color-scheme: light;
}

/* ---------- فیروزه‌ی نیشابور ---------- */
html[data-app-theme="turquoise"] {
    --primary: #17a8aa;
    --primary-dark: #0a6870;
    --primary-light: #4abbbd;
    --primary-rgb: 23,168,170;
    --chrome-a: #0a6870;
    --chrome-a-rgb: 10,104,112;
    --chrome-b: #17a8aa;
    --chrome-b-rgb: 23,168,170;
    --chrome-b-dark: #095c63;
    --chrome-b-deep: #0f7e84;
    --accent: #ff7a59;
    --accent-light: #ffa58f;
    --accent-rgb: 255,122,89;
    --surface: #ffffff;
    --surface-2: #f2fbfb;
    --surface-3: #e9f9f8;
    --tint: #eff9f9;
    --tint-2: #dff3f3;
    --text: #073b3f;
    --text-2: #1f4f53;
    --text-3: #336064;
    --text-secondary: #4b7478;
    --text-soft: #6b8d90;
    --text-muted: #9cb3b5;
    --border: #cdebea;
    --border-soft: #e6f5f4;
    --border-strong: #b8d4d3;
    --bg: #eff9f9;
    --card-bg: #ffffff;
    --menu-panel: rgba(246,252,252,0.98);
    --tile-bg: linear-gradient(145deg,#ffffff,#eff9f9);
    --tile-border: 1px solid #cdebea;
    --tile-title: #073b3f;
    --tile-desc: #4b7478;
    --page-bg1: #e3f7f6;
    --page-bg2: #fff4ea;
    --page-bg: linear-gradient(160deg,#ffffff 0%,#eff9f9 100%);
    --page-border: #cdebea;
    --body-bg: linear-gradient(135deg,#e3f7f6 0%,#fff4ea 100%);
    --header-bg: linear-gradient(135deg,#0a6870 0%,#17a8aa 100%);
    --login-bg: linear-gradient(135deg,#042f32 0%,#0a6870 48%,#17a8aa 100%);
    --login-btn: linear-gradient(135deg,#17a8aa,#ff7a59);
    --login-btn-hover: linear-gradient(135deg,#0a6870,#d9684c);
    --login-title: linear-gradient(135deg,#ffa58f,#ffffff,#92d6d7);
    --login-glow-rgb: 255,122,89;
    --login-focus-rgb: 93,194,196;
    --islamic-green: var(--primary);
    --islamic-green-light: var(--primary-light);
    --gold: var(--accent);
    --gold-light: var(--accent-light);
    --cream: var(--tint);
    --white: var(--surface);
    color-scheme: light;
}

/* ---------- انار و زعفران ---------- */
html[data-app-theme="pomegranate"] {
    --primary: #c8283f;
    --primary-dark: #7d1228;
    --primary-light: #d45769;
    --primary-rgb: 200,40,63;
    --chrome-a: #7d1228;
    --chrome-a-rgb: 125,18,40;
    --chrome-b: #c8283f;
    --chrome-b-rgb: 200,40,63;
    --chrome-b-dark: #6e1023;
    --chrome-b-deep: #971a30;
    --accent: #f2a900;
    --accent-light: #ffd166;
    --accent-rgb: 242,169,0;
    --surface: #ffffff;
    --surface-2: #fff9f5;
    --surface-3: #fff4ed;
    --tint: #fbf0f2;
    --tint-2: #f7e1e4;
    --text: #3b1118;
    --text-2: #53282f;
    --text-3: #683d44;
    --text-secondary: #80545b;
    --text-soft: #977379;
    --text-muted: #b9a1a5;
    --border: #f5dccf;
    --border-soft: #faeee7;
    --border-strong: #dcc6ba;
    --bg: #fbf0f2;
    --card-bg: #ffffff;
    --menu-panel: rgba(253,246,247,0.98);
    --tile-bg: linear-gradient(145deg,#ffffff,#fbf0f2);
    --tile-border: 1px solid #f5dccf;
    --tile-title: #3b1118;
    --tile-desc: #80545b;
    --page-bg1: #fff1e8;
    --page-bg2: #fff9ea;
    --page-bg: linear-gradient(160deg,#ffffff 0%,#fbf0f2 100%);
    --page-border: #f5dccf;
    --body-bg: linear-gradient(135deg,#fff1e8 0%,#fff9ea 100%);
    --header-bg: linear-gradient(135deg,#7d1228 0%,#c8283f 100%);
    --login-bg: linear-gradient(135deg,#380812 0%,#7d1228 48%,#c8283f 100%);
    --login-btn: linear-gradient(135deg,#c8283f,#f2a900);
    --login-btn-hover: linear-gradient(135deg,#7d1228,#ce9000);
    --login-title: linear-gradient(135deg,#ffd166,#ffffff,#e59aa5);
    --login-glow-rgb: 242,169,0;
    --login-focus-rgb: 216,104,121;
    --islamic-green: var(--primary);
    --islamic-green-light: var(--primary-light);
    --gold: var(--accent);
    --gold-light: var(--accent-light);
    --cream: var(--tint);
    --white: var(--surface);
    color-scheme: light;
}

/* ---------- مشکی و طلایی ---------- */
html[data-app-theme="blackgold"] {
    --primary: #b98a2f;
    --primary-dark: #8f6a1c;
    --primary-light: #e0b04a;
    --primary-rgb: 185,138,47;
    --chrome-a: #10121b;
    --chrome-a-rgb: 16,18,27;
    --chrome-b: #2a2f45;
    --chrome-b-rgb: 42,47,69;
    --chrome-b-dark: #0e1018;
    --chrome-b-deep: #191c2a;
    --accent: #e0b04a;
    --accent-light: #f3d27c;
    --accent-rgb: 224,176,74;
    --surface: #1d2130;
    --surface-2: #282c3a;
    --surface-3: #343745;
    --tint: #302f33;
    --tint-2: #403b35;
    --text: #f4f0e4;
    --text-2: #e0ddd2;
    --text-3: #cdcac0;
    --text-secondary: #a9a79b;
    --text-soft: #98968c;
    --text-muted: #76756c;
    --border: #31374d;
    --border-soft: #282d40;
    --border-strong: #4e5366;
    --bg: #282c3a;
    --card-bg: #1d2130;
    --menu-panel: rgba(29,33,48,0.98);
    --tile-bg: #1d2130;
    --tile-border: 1px solid #31374d;
    --page-bg: linear-gradient(160deg,#1d2130 0%,#282c3a 100%);
    --page-border: #31374d;
    --body-bg: linear-gradient(135deg,#0d0e13 0%,#171a24 100%);
    --header-bg: linear-gradient(135deg,#10121b 0%,#2a2f45 100%);
    --login-bg: linear-gradient(135deg,#07080c 0%,#10121b 50%,#262b40 100%);
    --tile-title: #f4f0e4;
    --tile-desc: #a9a79b;
    --page-bg1: #0d0e13;
    --page-bg2: #171a24;
    --login-btn: linear-gradient(135deg,#b98a2f,#e0b04a);
    --login-btn-hover: linear-gradient(135deg,#10121b,#be963f);
    --login-title: linear-gradient(135deg,#f3d27c,#ffffff,#ecd092);
    --login-glow-rgb: 224,176,74;
    --login-focus-rgb: 224,176,74;
    --islamic-green: var(--primary);
    --islamic-green-light: var(--primary-light);
    --gold: var(--accent);
    --gold-light: var(--accent-light);
    --cream: var(--tint);
    --white: var(--surface);
    color-scheme: dark;
}

/* ---------- کاشی لاجوردی ---------- */
html[data-app-theme="lapis"] {
    --primary: #2f5fd0;
    --primary-dark: #17307a;
    --primary-light: #5d82da;
    --primary-rgb: 47,95,208;
    --chrome-a: #17307a;
    --chrome-a-rgb: 23,48,122;
    --chrome-b: #2f5fd0;
    --chrome-b-rgb: 47,95,208;
    --chrome-b-dark: #142a6b;
    --chrome-b-deep: #1f4098;
    --accent: #14b8a6;
    --accent-light: #5eead4;
    --accent-rgb: 20,184,166;
    --surface: #ffffff;
    --surface-2: #f5f7fd;
    --surface-3: #edf1fc;
    --tint: #f0f4fc;
    --tint-2: #e2e9f8;
    --text: #0f1f4d;
    --text-2: #263663;
    --text-3: #3b4a76;
    --text-secondary: #52618c;
    --text-soft: #717da1;
    --text-muted: #a0a8c0;
    --border: #d6def4;
    --border-soft: #eaeefa;
    --border-strong: #c1c8dc;
    --bg: #f0f4fc;
    --card-bg: #ffffff;
    --menu-panel: rgba(247,249,253,0.98);
    --tile-bg: linear-gradient(145deg,#ffffff,#f0f4fc);
    --tile-border: 1px solid #d6def4;
    --tile-title: #0f1f4d;
    --tile-desc: #52618c;
    --page-bg1: #e9eefb;
    --page-bg2: #eafaf7;
    --page-bg: linear-gradient(160deg,#ffffff 0%,#f0f4fc 100%);
    --page-border: #d6def4;
    --body-bg: linear-gradient(135deg,#e9eefb 0%,#eafaf7 100%);
    --header-bg: linear-gradient(135deg,#17307a 0%,#2f5fd0 100%);
    --login-bg: linear-gradient(135deg,#0a1637 0%,#17307a 48%,#2f5fd0 100%);
    --login-btn: linear-gradient(135deg,#2f5fd0,#14b8a6);
    --login-btn-hover: linear-gradient(135deg,#17307a,#119c8d);
    --login-title: linear-gradient(135deg,#5eead4,#ffffff,#9eb4e9);
    --login-glow-rgb: 20,184,166;
    --login-focus-rgb: 109,143,222;
    --islamic-green: var(--primary);
    --islamic-green-light: var(--primary-light);
    --gold: var(--accent);
    --gold-light: var(--accent-light);
    --cream: var(--tint);
    --white: var(--surface);
    color-scheme: light;
}

/* ---------- زعفران و گردو ---------- */
html[data-app-theme="saffron"] {
    --primary: #c77a12;
    --primary-dark: #6e3a05;
    --primary-light: #d39746;
    --primary-rgb: 199,122,18;
    --chrome-a: #6e3a05;
    --chrome-a-rgb: 110,58,5;
    --chrome-b: #c77a12;
    --chrome-b-rgb: 199,122,18;
    --chrome-b-dark: #613304;
    --chrome-b-deep: #8d500a;
    --accent: #f5b301;
    --accent-light: #ffd45c;
    --accent-rgb: 245,179,1;
    --surface: #ffffff;
    --surface-2: #fefaef;
    --surface-3: #fdf5e3;
    --tint: #fbf6ee;
    --tint-2: #f7ecde;
    --text: #3a2410;
    --text-2: #513b24;
    --text-3: #664e34;
    --text-secondary: #7d6548;
    --text-soft: #948169;
    --text-muted: #b8aa9a;
    --border: #f1e0b9;
    --border-soft: #f8f0dc;
    --border-strong: #d9caa6;
    --bg: #fbf6ee;
    --card-bg: #ffffff;
    --menu-panel: rgba(253,250,246,0.98);
    --tile-bg: linear-gradient(145deg,#ffffff,#fbf6ee);
    --tile-border: 1px solid #f1e0b9;
    --tile-title: #3a2410;
    --tile-desc: #7d6548;
    --page-bg1: #fdf3dc;
    --page-bg2: #fff9ee;
    --page-bg: linear-gradient(160deg,#ffffff 0%,#fbf6ee 100%);
    --page-border: #f1e0b9;
    --body-bg: linear-gradient(135deg,#fdf3dc 0%,#fff9ee 100%);
    --header-bg: linear-gradient(135deg,#6e3a05 0%,#c77a12 100%);
    --login-bg: linear-gradient(135deg,#311a02 0%,#6e3a05 48%,#c77a12 100%);
    --login-btn: linear-gradient(135deg,#c77a12,#f5b301);
    --login-btn-hover: linear-gradient(135deg,#6e3a05,#d09801);
    --login-title: linear-gradient(135deg,#ffd45c,#ffffff,#e5c190);
    --login-glow-rgb: 245,179,1;
    --login-focus-rgb: 216,162,89;
    --islamic-green: var(--primary);
    --islamic-green-light: var(--primary-light);
    --gold: var(--accent);
    --gold-light: var(--accent-light);
    --cream: var(--tint);
    --white: var(--surface);
    color-scheme: light;
}

/* ---------- جنگلی ---------- */
html[data-app-theme="forest"] {
    --primary: #16a34a;
    --primary-dark: #14532d;
    --primary-light: #49b772;
    --primary-rgb: 22,163,74;
    --chrome-a: #14532d;
    --chrome-a-rgb: 20,83,45;
    --chrome-b: #16a34a;
    --chrome-b-rgb: 22,163,74;
    --chrome-b-dark: #124928;
    --chrome-b-deep: #156f37;
    --accent: #eab308;
    --accent-light: #fde047;
    --accent-rgb: 234,179,8;
    --surface: #ffffff;
    --surface-2: #f4fbf6;
    --surface-3: #ebf8f0;
    --tint: #eff9f2;
    --tint-2: #def2e6;
    --text: #0f2a1a;
    --text-2: #23402f;
    --text-3: #335440;
    --text-secondary: #476a55;
    --text-soft: #688574;
    --text-muted: #9aada2;
    --border: #cdebd6;
    --border-soft: #e6f5ea;
    --border-strong: #b8d4c1;
    --bg: #eff9f2;
    --card-bg: #ffffff;
    --menu-panel: rgba(246,251,248,0.98);
    --tile-bg: linear-gradient(145deg,#ffffff,#eff9f2);
    --tile-border: 1px solid #cdebd6;
    --tile-title: #0f2a1a;
    --tile-desc: #476a55;
    --page-bg1: #e6f6ec;
    --page-bg2: #f6fbe9;
    --page-bg: linear-gradient(160deg,#ffffff 0%,#eff9f2 100%);
    --page-border: #cdebd6;
    --body-bg: linear-gradient(135deg,#e6f6ec 0%,#f6fbe9 100%);
    --header-bg: linear-gradient(135deg,#14532d 0%,#16a34a 100%);
    --login-bg: linear-gradient(135deg,#092514 0%,#14532d 48%,#16a34a 100%);
    --login-btn: linear-gradient(135deg,#16a34a,#eab308);
    --login-btn-hover: linear-gradient(135deg,#14532d,#c79807);
    --login-title: linear-gradient(135deg,#fde047,#ffffff,#92d4aa);
    --login-glow-rgb: 234,179,8;
    --login-focus-rgb: 92,191,128;
    --islamic-green: var(--primary);
    --islamic-green-light: var(--primary-light);
    --gold: var(--accent);
    --gold-light: var(--accent-light);
    --cream: var(--tint);
    --white: var(--surface);
    color-scheme: light;
}

/* ---------- کهکشانی ---------- */
html[data-app-theme="cosmic"] {
    --primary: #8b5cf6;
    --primary-dark: #4c1d95;
    --primary-light: #a580f8;
    --primary-rgb: 139,92,246;
    --chrome-a: #4c1d95;
    --chrome-a-rgb: 76,29,149;
    --chrome-b: #8b5cf6;
    --chrome-b-rgb: 139,92,246;
    --chrome-b-dark: #431a83;
    --chrome-b-deep: #6233b7;
    --accent: #c084fc;
    --accent-light: #e9d5ff;
    --accent-rgb: 192,132,252;
    --surface: #241d4d;
    --surface-2: #2f2856;
    --surface-3: #3a345f;
    --tint: #34275e;
    --tint-2: #40306c;
    --text: #f1f5f9;
    --text-2: #dee1e5;
    --text-3: #caced1;
    --text-secondary: #cbd5e1;
    --text-soft: #b7c0ca;
    --text-muted: #8e959e;
    --border: #4b3f7a;
    --border-soft: #393066;
    --border-strong: #645a8d;
    --bg: #2f2856;
    --card-bg: #241d4d;
    --menu-panel: rgba(36,29,77,0.98);
    --tile-bg: rgba(255,255,255,.06);
    --tile-border: 1px solid rgba(192,132,252,.35);
    --page-bg: rgba(255,255,255,.05);
    --page-border: rgba(192,132,252,.28);
    --body-bg: linear-gradient(160deg,#0d0a24 0%,#1a1440 50%,#3b1d63 100%);
    --header-bg: linear-gradient(135deg,#4c1d95 0%,#8b5cf6 100%);
    --login-bg: linear-gradient(135deg,#1e1b4b 0%,#312e81 25%,#4c1d95 50%,#6d28d9 75%,#7c3aed 100%);
    --tile-title: #e9d5ff;
    --tile-desc: #c4b5fd;
    --page-bg1: #0d0a24;
    --page-bg2: #3b1d63;
    --login-btn: linear-gradient(135deg,#8b5cf6,#c084fc);
    --login-btn-hover: linear-gradient(135deg,#4c1d95,#a370d6);
    --login-title: linear-gradient(135deg,#e9d5ff,#ffffff,#c9b3fb);
    --login-glow-rgb: 192,132,252;
    --login-focus-rgb: 192,132,252;
    --islamic-green: var(--primary);
    --islamic-green-light: var(--primary-light);
    --gold: var(--accent);
    --gold-light: var(--accent-light);
    --cream: var(--tint);
    --white: var(--surface);
    color-scheme: dark;
}

/* ==================== میانبر تغییر سریع طرح (کنار دکمه‌ی «منوهای جانبی») ==================== */
.theme-shortcuts {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
    flex: 0 1 190px; min-width: 140px; align-self: center;
}
.theme-swatch {
    position: relative; width: 100%; aspect-ratio: 1 / 1; padding: 0; border: none; border-radius: 10px;
    cursor: pointer; -webkit-tap-highlight-color: transparent; overflow: hidden;
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.theme-swatch::after {  /* براقی ملایم */
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: inherit;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0) 48%);
    pointer-events: none;
}
.theme-swatch:active { transform: scale(0.9); }
.theme-swatch.active {
    transform: scale(1.1); overflow: visible;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(15, 23, 42, 0.72), 0 6px 14px rgba(15, 23, 42, 0.35);
}
.theme-swatch.active::before {
    content: '\2713'; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 15px; font-weight: 900; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
}


/* ==================== قاعده‌های مشترک همه‌ی طرح‌های کامل ==================== */
html[data-themed] { background: var(--page-bg1); }
html[data-themed] body {
    background: var(--body-bg) !important;
    background-attachment: fixed !important;
    color: var(--text) !important;
}
html[data-themed] .site-header { background: var(--header-bg) !important; box-shadow: 0 8px 30px rgba(var(--chrome-a-rgb), 0.35); }
html[data-themed] .hamburger-mini { background: var(--header-bg); box-shadow: 0 4px 15px rgba(var(--chrome-a-rgb), 0.35); }
html[data-themed] .menu-items { background: var(--menu-panel); border-color: rgba(var(--chrome-b-rgb), 0.3); box-shadow: 0 10px 30px rgba(var(--chrome-a-rgb), 0.18); }
html[data-themed] .menu-tile { background: var(--tile-bg) !important; border: var(--tile-border) !important; box-shadow: 0 4px 14px rgba(0,0,0,0.10); }
html[data-themed] .menu-tile-title { color: var(--tile-title) !important; }
html[data-themed] .menu-tile-desc { color: var(--tile-desc) !important; }
html[data-themed] .menu-tile::before { background: linear-gradient(90deg, transparent, var(--accent), transparent); }
html[data-themed] .menu-tile:hover { box-shadow: 0 10px 26px rgba(var(--accent-rgb), 0.28) !important; }
html[data-themed] .menu-item:hover { background: var(--tint); border-color: rgba(var(--chrome-b-rgb), 0.4); }
html[data-themed] .content-page { background: var(--page-bg) !important; border-color: var(--page-border) !important; color: var(--text); }
html[data-themed] .card { background: var(--surface); color: var(--text); }
html[data-themed] .tab.active { background: var(--primary); }
html[data-themed] .trial-countdown-box { color: #7f1d1d; }
html[data-themed] input, html[data-themed] select, html[data-themed] textarea { color: var(--text); }
html[data-themed] input::placeholder, html[data-themed] textarea::placeholder { color: var(--text-muted); }
html[data-themed][data-dark] input, html[data-themed][data-dark] select, html[data-themed][data-dark] textarea { background-color: var(--surface-3); }
html[data-themed][data-dark] select option { background: var(--surface); color: var(--text); }
html[data-themed][data-dark] .content-page h2,
html[data-themed][data-dark] .content-page h3,
html[data-themed][data-dark] .content-header h2 { color: var(--text); }
html[data-app-theme="cosmic"] .menu-tile-icon { filter: drop-shadow(0 0 6px #c084fc); }
html[data-app-theme="cosmic"] .menu-tile { box-shadow: 0 0 14px rgba(139,92,246,0.15); }
html[data-app-theme="cosmic"] .menu-tile:hover { box-shadow: 0 0 22px rgba(192,132,252,0.5) !important; }

/* ---------- اجزای عمومی که رنگ ثابت داشتند (تب‌ها، کارت عضو، مودال‌ها، فهرست‌ها) ---------- */
html[data-themed] .tab { background: var(--surface-3); color: var(--primary); }
html[data-themed] .tab-filter { background: var(--surface-3); color: var(--primary); border-color: var(--border); }
html[data-themed] .tab.active, html[data-themed] .tab-filter.active { background: var(--primary); color: #fff; }
html[data-themed] .member-card { background: var(--surface); }
html[data-themed] .member-card .info-value { color: var(--primary); }
html[data-themed] .member-card .member-name { color: var(--primary-dark); }
html[data-themed][data-dark] .member-card .member-name { color: var(--accent-light); }
html[data-themed] .member-card .info-label { color: var(--text-secondary); }
html[data-themed] .menu-item { background: var(--surface-2); color: var(--text); border-color: var(--border); }
html[data-themed] #allTransactionsList, html[data-themed] #memberTransactionsList { background: var(--tint); }
html[data-themed] .modal-content { background: var(--surface) !important; border-color: var(--border-strong) !important; color: var(--text); }
html[data-themed] .modal-content h3, html[data-themed] .modal-content .input-group label { color: var(--primary-dark) !important; }
html[data-themed][data-dark] .modal-content h3, html[data-themed][data-dark] .modal-content .input-group label { color: var(--accent-light) !important; }
html[data-themed] .modal-content input, html[data-themed] .modal-content select, html[data-themed] .modal-content textarea { border-color: var(--border-strong) !important; background-color: var(--surface-2); color: var(--text); }
html[data-themed] .content-header { border-bottom-color: var(--accent); }
html[data-themed] .search-bar { background-color: var(--surface-2); color: var(--text); border-color: var(--border); }

/* در طرح‌های تیره، جعبه‌های رنگی روشن (وضعیت‌ها) که متن را به ارث می‌برند خوانا بمانند */
html[data-dark] [style*="background:#f0fdf4"], html[data-dark] [style*="background: #f0fdf4"],
html[data-dark] [style*="background:#dcfce7"], html[data-dark] [style*="background: #dcfce7"],
html[data-dark] [style*="background:#fef3c7"], html[data-dark] [style*="background: #fef3c7"],
html[data-dark] [style*="background:#fffbeb"], html[data-dark] [style*="background: #fffbeb"],
html[data-dark] [style*="background:#fef2f2"], html[data-dark] [style*="background: #fef2f2"],
html[data-dark] [style*="background:#fee2e2"], html[data-dark] [style*="background: #fee2e2"],
html[data-dark] [style*="background:#eff6ff"], html[data-dark] [style*="background: #eff6ff"],
html[data-dark] [style*="background:#dbeafe"], html[data-dark] [style*="background: #dbeafe"],
html[data-dark] [style*="background:#fff7ed"], html[data-dark] [style*="background: #fff7ed"],
html[data-dark] [style*="background:#ecfeff"], html[data-dark] [style*="background: #ecfeff"] { color: #1e293b; }

/* ==================== صفحه‌ی لاگین در طرح‌های کامل ==================== */
html[data-themed] #loginPage { background: var(--login-bg); }
html[data-themed] #loginPage::before {
    background:
        radial-gradient(circle at 20% 20%, rgba(var(--accent-rgb), 0.28) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(var(--primary-rgb), 0.35) 0%, transparent 50%),
        radial-gradient(circle at 80% 10%, rgba(var(--accent-rgb), 0.20) 0%, transparent 40%),
        radial-gradient(circle at 10% 80%, rgba(var(--chrome-b-rgb), 0.30) 0%, transparent 45%);
}
html[data-themed] .login-logo-ring { background: linear-gradient(135deg, rgba(var(--accent-rgb),0.2), rgba(var(--primary-rgb),0.2)); border-color: rgba(var(--accent-rgb),0.45); box-shadow: 0 0 30px rgba(var(--accent-rgb),0.25), 0 0 60px rgba(var(--primary-rgb),0.15); }
html[data-themed] .login-title { background: var(--login-title); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
html[data-themed] .login-field input:focus { border-color: rgba(var(--login-focus-rgb), 0.8); box-shadow: 0 0 0 3px rgba(var(--login-focus-rgb), 0.22), 0 4px 16px rgba(var(--login-focus-rgb), 0.15); }
html[data-themed] .login-footer span { color: var(--accent-light); }
html[data-themed] .login-footer a { color: var(--accent); }
html[data-themed] #loginPage .login-btn { background: var(--login-btn); box-shadow: 0 8px 30px rgba(var(--accent-rgb), 0.45); }
html[data-themed] #loginPage .login-btn::after { background: var(--login-btn-hover); }
html[data-themed] #loginPage .login-btn:hover { box-shadow: 0 12px 40px rgba(var(--accent-rgb), 0.6); }


/* ==================== اصلاح خوانایی «اعضا» و «اعضای من» در طرح‌های تیره ====================
   (کهکشانی و مشکی‌طلایی)
   مشکل: کارت‌ها و پس‌زمینه‌ی لیست، رنگ pastel روشن را به‌صورت inline از جاوااسکریپت می‌گرفتند
   ولی رنگ متن در طرح تیره روشن است؛ نتیجه: متن روی زمینه‌ی روشن محو می‌شد.
   راه‌حل: فقط در طرح‌های تیره (html[data-dark]) زمینه‌ها با !important تیره می‌شوند و
   رنگ‌های متن و برچسب‌ها با طرح هماهنگ می‌شوند. طرح‌های روشن هیچ تغییری نمی‌کنند. */

/* پس‌زمینه‌ی کل لیست اعضا (inline روشن در members.html) */
html[data-dark] #membersList,
html[data-dark] #myMembersList {
    background: transparent !important;
}

/* کارت عضو: زمینه‌ی تیره‌ی هماهنگ با طرح + حاشیه‌ی تأکیدی */
html[data-dark] #membersList .member-card,
html[data-dark] #myMembersList .member-card {
    background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%) !important;
    border-color: rgba(var(--accent-rgb), 0.55);
    color: var(--text);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
html[data-dark] #membersList .member-card:hover,
html[data-dark] #myMembersList .member-card:hover {
    box-shadow: 0 8px 22px rgba(var(--accent-rgb), 0.22);
}

/* نام عضو */
html[data-dark] #membersList .member-card .member-name,
html[data-dark] #myMembersList .member-card .member-name {
    color: var(--accent-light) !important;
}

/* برچسب‌های «سپرده / مانده وام / وام قابل دریافت» (inline: color:var(--islamic-green)) */
html[data-dark] #membersList .member-card [style*="--islamic-green"],
html[data-dark] #myMembersList .member-card [style*="--islamic-green"] {
    color: var(--accent-light) !important;
}

/* مبلغ‌ها و متن‌های بدون رنگ مشخص: روشن و خوانا */
html[data-dark] #membersList .member-card,
html[data-dark] #myMembersList .member-card,
html[data-dark] #membersList .member-card .info-value,
html[data-dark] #myMembersList .member-card .info-value {
    color: var(--text);
}

/* متن‌های کم‌رنگ‌تر (آخرین تراکنش، تاریخ، شماره عضویت، پرانتز «ساعت پیش») */
html[data-dark] #membersList .member-card [style*="--text-secondary"],
html[data-dark] #myMembersList .member-card [style*="--text-secondary"] {
    color: var(--text-3) !important;
}
html[data-dark] #membersList .member-card [style*="--text-soft"],
html[data-dark] #myMembersList .member-card [style*="--text-soft"] {
    color: var(--text-secondary) !important;
}

/* خط‌چین‌های جداکننده داخل کارت */
html[data-dark] #membersList .member-card [style*="dashed"],
html[data-dark] #myMembersList .member-card [style*="dashed"] {
    border-top-color: rgba(var(--accent-rgb), 0.35) !important;
}

/* دکمه‌ی سه‌نقطه */
html[data-dark] #membersList .card-dots-btn,
html[data-dark] #myMembersList .card-dots-btn {
    background: rgba(var(--accent-rgb), 0.14);
    border-color: rgba(var(--accent-rgb), 0.45);
}
html[data-dark] #membersList .card-dots-btn span,
html[data-dark] #myMembersList .card-dots-btn span {
    background: var(--accent-light);
}

/* چیپ «تاریخ تولد ثبت نشده» داخل کارت و دکمه‌ی فیلتر «بدون تاریخ تولد» */
html[data-dark] #membersList .member-card [style*="background:#fef2f2"],
html[data-dark] #myMembersList .member-card [style*="background:#fef2f2"],
html[data-dark] #noBirthDateFilterBtn {
    background: rgba(239, 68, 68, 0.16) !important;
    border-color: rgba(248, 113, 113, 0.65) !important;
    color: #fecaca !important;
}
html[data-dark] #membersList .member-card [style*="background:#fef2f2"] {
    color: #fecaca !important;
}


/* ==================== منوهای صفحه‌ی اصلی در طرح‌های روشن: رنگ‌مایه‌ی همان تم ====================
   قبلاً کاشی‌ها تقریباً سفید بودند؛ حالا زمینه، حاشیه و سایه‌شان کمی به رنگ اصلی تم می‌گراید.
   طرح‌های تیره (کهکشانی و مشکی‌طلایی) دست‌نخورده می‌مانند. */
html[data-themed]:not([data-dark]) .menu-tile {
    background:
        linear-gradient(145deg, rgba(var(--primary-rgb), 0.06) 0%, rgba(var(--primary-rgb), 0.20) 100%),
        var(--surface) !important;
    border: 1.5px solid rgba(var(--primary-rgb), 0.38) !important;
    box-shadow: 0 6px 16px rgba(var(--primary-rgb), 0.16);
}
html[data-themed]:not([data-dark]) .menu-tile:hover,
html[data-themed]:not([data-dark]) .menu-tile:active {
    border-color: rgba(var(--primary-rgb), 0.62) !important;
    box-shadow: 0 10px 26px rgba(var(--primary-rgb), 0.30) !important;
}


/* ==================== تم کهکشانی: حذف هاله‌ی نور دور منوها ====================
   هاله‌ی بنفش دور کاشی‌ها و نشان آیکون‌ها (box-shadow و drop-shadow) حذف شد؛
   حاشیه‌ی ظریف و رنگ زمینه‌ی شیشه‌ای دست‌نخورده می‌ماند. */
html[data-app-theme="cosmic"] .menu-tile,
html[data-app-theme="cosmic"] .menu-tile:hover,
html[data-app-theme="cosmic"] .menu-tile:active {
    box-shadow: none !important;
}
html[data-app-theme="cosmic"] .menu-tile-icon {
    filter: none !important;
}
html[data-app-theme="cosmic"] .ic-badge,
html[data-app-theme="cosmic"] .menu-tile:hover .ic-badge,
html[data-app-theme="cosmic"] .menu-tile:active .ic-badge,
html[data-app-theme="cosmic"] .menu-item-icon .ic-badge {
    box-shadow: inset 0 0 0 1px rgba(192, 132, 252, 0.4) !important;
    filter: none !important;
}


/* ==================== پروفایل عضو (تراکنش‌ها و وام‌ها) در طرح‌های تیره ====================
   (کهکشانی و مشکی‌طلایی)
   کارت‌های تراکنش و وام زمینه‌ی pastel روشن داشتند (inline / !important) ولی متن در طرح تیره
   روشن است؛ نتیجه: ناهماهنگی با بقیه‌ی صفحه‌ها و محو شدن متن. حالا زمینه‌ها تیره و رنگ‌مایه‌دار
   (هم‌رنگ نوع تراکنش/وضعیت وام) و متن‌ها روشن می‌شوند. طرح‌های روشن بدون تغییرند. */

/* ---------- کارت تراکنش ---------- */
html[data-dark] .transaction-card {
    background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.30);
    color: var(--text);
}
html[data-dark] .transaction-card[style*="#4ade80"] { background: linear-gradient(135deg, rgba(74,222,128,0.16), rgba(74,222,128,0.05)), var(--surface) !important; }
html[data-dark] .transaction-card[style*="#60a5fa"] { background: linear-gradient(135deg, rgba(96,165,250,0.18), rgba(96,165,250,0.05)), var(--surface) !important; }
html[data-dark] .transaction-card[style*="#f87171"] { background: linear-gradient(135deg, rgba(248,113,113,0.18), rgba(248,113,113,0.05)), var(--surface) !important; }
html[data-dark] .transaction-card[style*="#fbbf24"] { background: linear-gradient(135deg, rgba(251,191,36,0.18), rgba(251,191,36,0.05)), var(--surface) !important; }
html[data-dark] .transaction-card[style*="#2dd4bf"] { background: linear-gradient(135deg, rgba(45,212,191,0.16), rgba(45,212,191,0.05)), var(--surface) !important; }
html[data-dark] .transaction-card[style*="#fb7185"] { background: linear-gradient(135deg, rgba(251,113,133,0.18), rgba(251,113,133,0.05)), var(--surface) !important; }
/* رنگ متن تیره‌ی هر نوع تراکنش ← نسخه‌ی روشن‌ترِ هم‌خانواده */
html[data-dark] .transaction-card [style*="color:#1d4ed8"] { color: #93c5fd !important; }
html[data-dark] .transaction-card [style*="color:#15803d"] { color: #86efac !important; }
html[data-dark] .transaction-card [style*="color:#b91c1c"] { color: #fca5a5 !important; }
html[data-dark] .transaction-card [style*="color:#92400e"] { color: #fcd34d !important; }
html[data-dark] .transaction-card [style*="color:#0f766e"] { color: #5eead4 !important; }
html[data-dark] .transaction-card [style*="color:#be123c"] { color: #fda4af !important; }
html[data-dark] .transaction-card [style*="color:#475569"] { color: #cbd5e1 !important; }
html[data-dark] .transaction-card .transaction-date,
html[data-dark] .transaction-card .transaction-desc { color: var(--text-secondary); }
html[data-dark] .transaction-card .transaction-actions { border-top-color: rgba(var(--accent-rgb), 0.30); }

/* ---------- کارت وام ---------- */
html[data-dark] .loan-card-active {
    background: linear-gradient(135deg, rgba(239,68,68,0.22) 0%, rgba(239,68,68,0.07) 100%), var(--surface) !important;
    border-color: #f87171 !important;
    color: var(--text);
}
html[data-dark] .loan-card-settled {
    background: linear-gradient(135deg, rgba(16,185,129,0.22) 0%, rgba(16,185,129,0.07) 100%), var(--surface) !important;
    border-color: #34d399 !important;
    color: var(--text);
}
html[data-dark] .loan-card-active:hover  { box-shadow: 0 8px 22px rgba(248,113,113,0.25); }
html[data-dark] .loan-card-settled:hover { box-shadow: 0 8px 22px rgba(52,211,153,0.25); }
/* نوار پیشرفت، جعبه‌ی جزئیات و رنگ‌های درصد */
html[data-dark] .loan-card-active [style*="rgba(0,0,0,0.1)"],
html[data-dark] .loan-card-settled [style*="rgba(0,0,0,0.1)"] { background: rgba(255,255,255,0.16) !important; }
html[data-dark] .loan-card-active [style*="rgba(0,0,0,0.03)"],
html[data-dark] .loan-card-settled [style*="rgba(0,0,0,0.03)"] { background: rgba(255,255,255,0.07) !important; }
html[data-dark] .loan-card-active [style*="color: #dc2626"],
html[data-dark] .loan-card-settled [style*="color: #dc2626"] { color: #fca5a5 !important; }
html[data-dark] .loan-card-active [style*="color: #16a34a"],
html[data-dark] .loan-card-settled [style*="color: #16a34a"] { color: #86efac !important; }