/* =========================================================
   الثيمات (data-skin على <html>)
   classic = التصميم الأساسي في style.css — ما يحتاج شي هنا
   glass   = Glassmorphism: خلفية ملوّنة وألواح زجاج مضبّبة فوقها
   bento   = Bento grid: بلاطات مصمتة بزوايا كبيرة ومقاسات متفاوتة
   gold    = ذهبي VIP: زجاج سائل بلون شمباني هادي — للمشتركين فقط (app.js يقفله ويفعّله)
   كل ثيم يعيد تعريف متغيرات الألوان لـ داكن وفاتح، فالوضع واللون الأساسي يشتغلون مع كل الثيمات.
   ========================================================= */

/* تبديل الثيم فوري: app.js يحط هالكلاس لفريم واحد وقت التبديل */
.no-anim *, .no-anim *::before, .no-anim *::after { transition: none !important; }

/* ===== اختيار الثيم في الإعدادات ===== */
/* شريط ينسحب أفقياً (يبدأ من اليمين بالعربي ومن اليسار بالإنجليزي)؛ يبان 3 ونص عشان يتوضح إنه ينسحب */
.skin-picker {
  display: flex; gap: var(--space-2xs); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin-inline: calc(var(--space-s) * -1); padding: 4px var(--space-s) 6px; scroll-padding-inline: var(--space-s);
}
.skin-picker::-webkit-scrollbar { display: none; }
.skin-picker button {
  flex: 0 0 calc((100% - var(--space-2xs) * 3) / 3.35); scroll-snap-align: start;
  position: relative; display: grid; gap: 1px; min-width: 0; padding: 6px 6px var(--space-2xs); text-align: center;
  border-radius: calc(var(--radius-s) + 2px); background: var(--surface-2); border: 1.5px solid var(--line);
  transition: border-color .2s, box-shadow .2s, transform .15s;
}
.skin-picker button:active { transform: scale(.96); }
.skin-picker button.active { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.skin-name { font-weight: 700; font-size: var(--step--1); line-height: 1.4; }
.skin-desc { font-size: var(--step--2); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skin-check {
  position: absolute; top: 10px; inset-inline-end: 10px; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; font-size: 10px; background: var(--accent); color: var(--on-accent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3); opacity: 0; transform: scale(.4); transition: opacity .2s, transform .25s cubic-bezier(.34, 1.4, .64, 1);
}
.skin-picker button.active .skin-check { opacity: 1; transform: none; }
.skin-tag {
  position: absolute; top: 10px; inset-inline-start: 10px; display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 6px; border-radius: 99px; font-size: 9.5px; font-weight: 800; letter-spacing: .02em;
  color: #241d0e; background: #e3d2a8; box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}
.skin-tag i { font-size: 8px; }
.skin-tag { transition: opacity .2s; }
.skin-picker button.active .skin-tag { opacity: 0; }
.skin-vip.locked .skin-prev { filter: saturate(.6) brightness(.8); }
.skin-vip.locked .skin-tag i { --ic-s: var(--ic-lock); }

/* معاينات مصغّرة لكل ثيم (ألوانها ثابتة عشان تبيّن شكل الثيم مهما كان الثيم الحالي) */
.skin-prev { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: calc(var(--radius-s) - 3px); overflow: hidden; margin-bottom: 6px; }
.skin-prev i { position: absolute; display: block; }

.sp-classic { background: radial-gradient(80% 70% at 90% 0%, color-mix(in srgb, var(--accent) 35%, transparent), transparent 70%), #0b0b0e; }
.sp-classic i { background: #1a1a20; border: 1px solid rgba(255, 255, 255, .08); border-radius: 5px; }
.sp-classic i:nth-child(1) { top: 12%; right: 10%; width: 46%; height: 10%; background: #f2f2f4; border: 0; border-radius: 3px; }
.sp-classic i:nth-child(2) { top: 30%; left: 10%; right: 10%; height: 20%; }
.sp-classic i:nth-child(3) { top: 58%; left: 10%; width: 38%; height: 30%; }
.sp-classic i:nth-child(4) { top: 58%; right: 10%; width: 38%; height: 30%; }

.sp-glass {
  background:
    radial-gradient(55% 55% at 85% 10%, color-mix(in srgb, var(--accent) 80%, transparent), transparent 70%),
    radial-gradient(60% 60% at 5% 70%, rgba(109, 93, 252, .85), transparent 70%),
    radial-gradient(50% 50% at 95% 100%, rgba(37, 244, 238, .55), transparent 70%), #120f2a;
}
.sp-glass i { background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .32); border-radius: 7px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
.sp-glass i:nth-child(1) { top: 12%; right: 10%; width: 46%; height: 10%; background: rgba(255, 255, 255, .85); border: 0; border-radius: 3px; }
.sp-glass i:nth-child(2) { top: 30%; left: 10%; right: 10%; height: 20%; }
.sp-glass i:nth-child(3) { top: 58%; left: 10%; width: 38%; height: 30%; }
.sp-glass i:nth-child(4) { top: 58%; right: 10%; width: 38%; height: 30%; }

.sp-bento { background: #0d0d0f; }
.sp-bento i { border-radius: 6px; background: #232328; }
.sp-bento i:nth-child(1) { top: 9%; right: 8%; width: 52%; height: 52%; background: var(--accent); }
.sp-bento i:nth-child(2) { top: 9%; left: 8%; width: 30%; height: 23%; }
.sp-bento i:nth-child(3) { top: 38%; left: 8%; width: 30%; height: 23%; background: #2e2e35; }
.sp-bento i:nth-child(4) { top: 67%; left: 8%; right: 8%; height: 24%; background: #1c1c20; }

.sp-gold { background: radial-gradient(70% 60% at 90% 0%, rgba(212, 189, 138, .45), transparent 70%), radial-gradient(60% 50% at 0% 70%, rgba(140, 170, 200, .3), transparent 70%), #0d0c0a; }
.sp-gold i { background: rgba(255, 248, 232, .1); border: 1px solid rgba(255, 248, 232, .18); border-radius: 8px; box-shadow: inset 0 1px 0 rgba(255, 250, 238, .25); }
.sp-gold i:nth-child(1) { top: 12%; right: 10%; width: 46%; height: 10%; background: #efe6d2; border: 0; border-radius: 99px; }
.sp-gold i:nth-child(2) { top: 30%; left: 10%; right: 10%; height: 20%; }
.sp-gold i:nth-child(3) { top: 58%; left: 10%; width: 38%; height: 30%; }
.sp-gold i:nth-child(4) { top: 58%; right: 10%; width: 38%; height: 30%; background: rgba(212, 189, 138, .55); }

[data-theme="light"] .sp-classic { background: radial-gradient(80% 70% at 90% 0%, color-mix(in srgb, var(--accent) 25%, transparent), transparent 70%), #f6f1e4; }
[data-theme="light"] .sp-classic i { background: #fcf9f1; border-color: rgba(60, 45, 10, .12); }
[data-theme="light"] .sp-classic i:nth-child(1) { background: #1d1a13; }
[data-theme="light"] .sp-glass {
  background:
    radial-gradient(55% 55% at 85% 10%, color-mix(in srgb, var(--accent) 55%, transparent), transparent 70%),
    radial-gradient(60% 60% at 5% 70%, rgba(167, 139, 250, .7), transparent 70%),
    radial-gradient(50% 50% at 95% 100%, rgba(94, 234, 212, .6), transparent 70%), #eef0fb;
}
[data-theme="light"] .sp-glass i { background: rgba(255, 255, 255, .5); border-color: rgba(255, 255, 255, .9); }
[data-theme="light"] .sp-glass i:nth-child(1) { background: #191833; }
[data-theme="light"] .sp-bento { background: #e6e4df; }
[data-theme="light"] .sp-bento i { background: #fff; }
[data-theme="light"] .sp-bento i:nth-child(1) { background: var(--accent); }
[data-theme="light"] .sp-bento i:nth-child(3) { background: #f4f3f0; }
[data-theme="light"] .sp-bento i:nth-child(4) { background: #fbfaf8; }


/* =========================================================
   ثيم زجاجي — Glassmorphism
   ========================================================= */
[data-skin="glass"] {
  --bg: #0c0a1d;
  --surface: rgba(255, 255, 255, .07);
  --surface-2: rgba(255, 255, 255, .08);
  --line: rgba(255, 255, 255, .1);
  --line-strong: rgba(255, 255, 255, .2);
  --text: #f6f5fc;
  --muted: rgba(232, 229, 255, .62);
  --dock-bg: rgba(255, 255, 255, .08);
  --shadow: 0 20px 50px -24px rgba(0, 0, 0, .65);
  --highlight: inset 0 1px 0 rgba(255, 255, 255, .14);
  --glass-edge: rgba(255, 255, 255, .14);
  --glass-blur: blur(18px) saturate(1.7);
  --blob-2: #6d5dfc;
  --blob-3: #25f4ee;
  --blob-mix: 55%;
  --radius: 22px;
  --radius-s: 14px;
  color-scheme: dark;
}
[data-skin="glass"][data-theme="light"] {
  --bg: #eceefa;
  --surface: rgba(255, 255, 255, .5);
  --surface-2: rgba(255, 255, 255, .55);
  --line: rgba(50, 50, 110, .1);
  --line-strong: rgba(50, 50, 110, .18);
  --text: #18172f;
  --muted: #5e5d7c;
  --dock-bg: rgba(255, 255, 255, .5);
  --shadow: 0 20px 40px -24px rgba(60, 50, 140, .35);
  --highlight: inset 0 1px 0 rgba(255, 255, 255, .9);
  --glass-edge: rgba(255, 255, 255, .75);
  --blob-2: #a78bfa;
  --blob-3: #5eead4;
  --blob-mix: 45%;
  color-scheme: light;
}

/* الخلفية: بقع ألوان ثابتة تبان من ورا الزجاج (ثابتة بدون حركة عشان الأداء) */
[data-skin="glass"] body::before {
  inset: 0; height: auto;
  background:
    radial-gradient(45% 35% at 90% 5%, color-mix(in srgb, var(--accent) var(--blob-mix), transparent), transparent 70%),
    radial-gradient(55% 40% at 0% 45%, color-mix(in srgb, var(--blob-2) var(--blob-mix), transparent), transparent 70%),
    radial-gradient(45% 35% at 100% 95%, color-mix(in srgb, var(--blob-3) calc(var(--blob-mix) - 15%), transparent), transparent 70%);
}

/* الألواح الزجاجية */
[data-skin="glass"] :is(.module, .search-bar, .icon-btn:not(.ghost), .chip, .arch-item, .rec-item, .mode-card, .feeds, .sheet-card, .maint-card, .state-grid span, .back-link, .q-btn) {
  border: 1px solid var(--glass-edge);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
}
[data-skin="glass"] :is(.module, .search-bar, .mode-card, .feeds, .sheet-card, .maint-card) { box-shadow: var(--highlight), var(--shadow); }
[data-skin="glass"] .icon-btn:not(.ghost) { box-shadow: var(--highlight); }
[data-skin="glass"] .icon-btn.ghost { box-shadow: none; }
/* البطاقات داخل لوح زجاجي ما تحتاج ضبابية ثانية */
[data-skin="glass"] .module .icon-btn { backdrop-filter: none; -webkit-backdrop-filter: none; }

[data-skin="glass"] .state-grid { gap: var(--space-2xs); background: none; border: 0; overflow: visible; }
[data-skin="glass"] .state-grid span { border-radius: var(--radius); background: var(--surface); box-shadow: var(--highlight); }
[data-skin="glass"] .field { border-color: var(--line); }
[data-skin="glass"] .seg { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
[data-skin="glass"] .seg button.active { box-shadow: var(--highlight), 0 4px 14px -4px rgba(0, 0, 0, .35); }
[data-skin="glass"] .btn-primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 12px 30px -10px color-mix(in srgb, var(--accent) 90%, transparent); }
[data-skin="glass"] .mode-card.active:not(.maint) { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); }
[data-skin="glass"] .country {
  background: radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%), var(--surface);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--glass-edge));
}
[data-skin="glass"] .sheet { background: rgba(5, 4, 15, .45); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
[data-skin="glass"] .sheet-card { background: color-mix(in srgb, var(--bg) 40%, var(--surface)); }

/* البار السفلي: زجاج أصفى بلمعة */
[data-skin="glass"] :is(.dock-pill, .dock-search) {
  border-color: var(--glass-edge);
  backdrop-filter: blur(30px) saturate(2); -webkit-backdrop-filter: blur(30px) saturate(2);
}
[data-skin="glass"] .dock-pill button.active { background: rgba(255, 255, 255, .16); }
/* الوضع الفاتح بالزجاجي: الحافة البيضاء ما تبين على خلفية فاتحة، فنخليها داكنة شفافة وأوضح */
[data-skin="glass"][data-theme="light"] :is(.dock-pill, .dock-search) { border-color: rgba(70, 60, 140, .3); }
[data-skin="glass"][data-theme="light"] .dock { --dock-bg: rgba(255, 255, 255, .72); --dock-active: rgba(70, 60, 140, .14); --dock-shadow: 0 2px 4px rgba(50, 40, 120, .16), 0 14px 32px -10px rgba(50, 40, 120, .45); }
[data-skin="glass"][data-theme="light"] .dock-pill button.active { background: rgba(70, 60, 140, .14); }
/* بنتو فاتح: حافة وظل أوضح */
[data-skin="bento"][data-theme="light"] :is(.dock-pill, .dock-search) { border-color: rgba(0, 0, 0, .14); box-shadow: 0 2px 4px rgba(0, 0, 0, .1), 0 12px 28px -12px rgba(0, 0, 0, .35); }


/* =========================================================
   ثيم بينتو — Bento grid
   ========================================================= */
[data-skin="bento"] {
  --bg: #09090b;
  --surface: #16161a;
  --surface-2: #222227;
  --line: rgba(255, 255, 255, .06);
  --line-strong: rgba(255, 255, 255, .12);
  --text: #f4f4f5;
  --muted: #8f8f99;
  --dock-bg: #16161a;
  --shadow: none;
  --highlight: none;
  --tile-gap: 10px;
  --radius: 26px;
  --radius-s: 16px;
  color-scheme: dark;
}
[data-skin="bento"][data-theme="light"] {
  --bg: #e9e7e2;
  --surface: #ffffff;
  --surface-2: #f3f2ee;
  --line: rgba(0, 0, 0, .06);
  --line-strong: rgba(0, 0, 0, .12);
  --text: #121212;
  --muted: #6d6b66;
  --dock-bg: #ffffff;
  color-scheme: light;
}
/* شكل مسطح: بدون توهج وبدون حدود، البلاطات نفسها تفصل */
[data-skin="bento"] body::before { display: none; }
[data-skin="bento"] :is(.module, .search-bar, .icon-btn, .chip, .arch-item, .rec-item, .mode-card, .feeds, .sheet-card, .maint-card, .seg, .btn-soft, .q-btn) { border-color: transparent; box-shadow: none; }
[data-skin="bento"] .field.small { border-color: transparent; }
[data-skin="bento"] .icon-btn { border-radius: 14px; }
[data-skin="bento"] .btn-primary { box-shadow: none; background: var(--accent); }
[data-skin="bento"] .chip { border-radius: var(--radius-s); padding-block: 6px; padding-inline: 6px var(--space-s); }
[data-skin="bento"] .chip img { border-radius: 10px; }

/* عنوان الصفحة يصير بلاطة كبيرة فيها دائرة بلون التمييز */
[data-skin="bento"] .page-head {
  position: relative; overflow: hidden; isolation: isolate;
  margin: var(--space-s) 0 var(--tile-gap); padding: var(--space-m);
  border-radius: var(--radius); background: var(--surface);
}
[data-skin="bento"] .page-head::after {
  content: ""; position: absolute; z-index: -1; width: 46%; aspect-ratio: 1; inset-inline-end: -12%; bottom: -30%;
  border-radius: 50%; background: color-mix(in srgb, var(--accent) 22%, transparent);
}
[data-skin="bento"] .search-bar { border-radius: var(--radius); padding: 6px; }

/* شبكة "وش بتعرف" تتحول لبينتو: بلاطة كبيرة بلون التمييز + بلاطات أصغر */
[data-skin="bento"] .state-grid { gap: var(--tile-gap); background: none; border: 0; border-radius: 0; overflow: visible; }
[data-skin="bento"] .state-grid span { border-radius: var(--radius); min-height: 104px; align-content: space-between; padding: var(--space-s); }
[data-skin="bento"] .state-grid span:nth-child(1) { grid-row: span 2; background: var(--accent); color: var(--on-accent); font-size: var(--step-1); font-weight: 700; }
[data-skin="bento"] .state-grid span:nth-child(1) i { background: rgba(255, 255, 255, .22); color: var(--on-accent); width: 2.6em; height: 2.6em; font-size: var(--step-0); border-radius: 14px; }
[data-skin="bento"] .state-grid span:nth-child(4) { grid-column: 1 / -1; min-height: 0; grid-auto-flow: column; justify-content: start; align-items: center; gap: var(--space-xs); }

/* بطاقة الحساب */
[data-skin="bento"] .profile, [data-skin="bento"] .track-result, [data-skin="bento"] .archive-list,
[data-skin="bento"] .settings-grid, [data-skin="bento"] .support, [data-skin="bento"] #recList, [data-skin="bento"] .rec-active { gap: var(--tile-gap); }
[data-skin="bento"] .stats-wrap { gap: var(--tile-gap); }
[data-skin="bento"] .stat { min-height: 7.5em; padding: var(--space-s) var(--space-m); }
[data-skin="bento"] .stats-wrap .stat:nth-child(1) { grid-column: 1 / -1; background: var(--accent); color: var(--on-accent); }
[data-skin="bento"] .stats-wrap .stat:nth-child(1) .eyebrow { color: var(--on-accent); opacity: .85; }
[data-skin="bento"] .stats-wrap .stat:nth-child(1) .eyebrow i { background: rgba(255, 255, 255, .22); color: var(--on-accent); }
[data-skin="bento"] .stats-wrap .stat:nth-child(1) b { font-size: var(--step-5); }
[data-skin="bento"] .stats-wrap .stat:nth-child(6) { grid-column: 1 / -1; background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
[data-skin="bento"] .country { border-color: transparent; }
[data-skin="bento"] .avatar { border-radius: 30%; }
[data-skin="bento"] .avatar-ring { border-radius: 34%; }
[data-skin="bento"] .actions { gap: var(--tile-gap); }
[data-skin="bento"] .actions .btn-soft { flex-direction: column; gap: 6px; min-height: 5.2em; border-radius: 20px; background: var(--surface); }
[data-skin="bento"] .actions .btn-soft i { font-size: 1.35em; }
[data-skin="bento"] .actions .btn-soft.accent { background: var(--accent); }

/* البث */
[data-skin="bento"] .mode-cards { gap: var(--tile-gap); }
[data-skin="bento"] .mode-card { flex-direction: column; align-items: flex-start; justify-content: space-between; min-height: 9em; padding: var(--space-s); }
[data-skin="bento"] .mode-icon { width: 3em; height: 3em; border-radius: 14px; font-size: var(--step-0); }
[data-skin="bento"] .mode-card.active:not(.maint) { background: var(--accent); color: var(--on-accent); }
[data-skin="bento"] .mode-card.active:not(.maint) .mode-icon { background: rgba(255, 255, 255, .22); }
[data-skin="bento"] .mode-card.active:not(.maint) .mode-badge { background: var(--on-accent); color: var(--accent); }
[data-skin="bento"] .chips button { border-radius: 12px; border-color: transparent; background: var(--surface-2); }
[data-skin="bento"] .chips button.active { background: var(--accent); }
[data-skin="bento"] .rec-item > img, [data-skin="bento"] .rec-thumb, [data-skin="bento"] .arch-item img { border-radius: 16px; }

/* الإعدادات: الروابط السريعة بلاطتين جنب بعض */
[data-skin="bento"] .settings-grid > .module:first-child { background: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tile-gap); }
[data-skin="bento"] .settings-grid > .module:first-child > .eyebrow { display: none; }
[data-skin="bento"] .settings-grid > .module:first-child .setting-link {
  position: relative; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: var(--space-s);
  min-height: 9em; padding: var(--space-s); border: 0; border-radius: var(--radius); background: var(--surface);
}
[data-skin="bento"] .settings-grid > .module:first-child .setting-link:first-of-type { background: var(--accent); color: var(--on-accent); }
[data-skin="bento"] .settings-grid > .module:first-child .setting-link:first-of-type small,
[data-skin="bento"] .settings-grid > .module:first-child .setting-link:first-of-type .setting-chev { color: inherit; opacity: .8; }
[data-skin="bento"] .settings-grid > .module:first-child .setting-link:first-of-type .setting-ico { background: rgba(255, 255, 255, .22); color: var(--on-accent); }
[data-skin="bento"] .setting-link .setting-ico { width: 44px; height: 44px; border-radius: 14px; }
[data-skin="bento"] .settings-grid > .module:first-child .setting-chev { position: absolute; top: var(--space-s); inset-inline-end: var(--space-s); }
[data-skin="bento"] .skin-picker button { border-color: transparent; }
[data-skin="bento"] .skin-picker button.active { border-color: var(--accent); }
[data-skin="bento"] .back-link { border-radius: 12px; }
[data-skin="bento"] .sup-cats button { border-color: transparent; border-radius: 18px; }
[data-skin="bento"] .sup-cats button.active { border-color: var(--accent); }
[data-skin="bento"] .sup-contact { background: var(--surface) !important; }

/* البار السفلي: بلاطة مصمتة بزوايا مربّعة ناعمة */
[data-skin="bento"] :is(.dock-pill, .dock-search) { border-color: var(--line); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 14px 34px -16px rgba(0, 0, 0, .5); }
[data-skin="bento"] .dock-pill { border-radius: 24px; }
[data-skin="bento"] .dock-search { border-radius: 22px; }
[data-skin="bento"] .dock-pill button { border-radius: 18px; }
[data-skin="bento"] .dock-pill button.active, [data-skin="bento"] .dock-search.active { background: var(--accent); color: var(--on-accent); box-shadow: none; }

@media (min-width: 640px) {
  [data-skin="bento"] .state-grid span:nth-child(1) { grid-column: span 2; }
  [data-skin="bento"] .state-grid span:nth-child(4) { grid-column: auto; grid-auto-flow: row; justify-content: stretch; align-items: stretch; min-height: 104px; }
  [data-skin="bento"] .stats-wrap .stat:nth-child(1) { grid-column: span 4; }
}
@media (min-width: 1024px) {
  [data-skin="bento"] .stats-wrap .stat:nth-child(1) { grid-column: span 2; }
}


/* =========================================================
   ثيم ذهبي — VIP Gold (للمشتركين) بأسلوب Liquid Glass
   ذهبي شمباني هادي (مو مشبّع)، ألواح زجاج سميكة بحافة لامعة،
   ضوء ناعم ورا الزجاج، وأزرار كبسولة
   ========================================================= */
[data-skin="gold"] {
  --accent: #d4bd8a;
  --accent-2: #e9dcbc;
  --on-accent: #1c170c;
  --bg: #0d0c0a;
  --surface: rgba(255, 248, 232, .055);
  --surface-2: rgba(255, 248, 232, .07);
  --line: rgba(255, 244, 220, .08);
  --line-strong: rgba(255, 244, 220, .16);
  --text: #f4f0e6;
  --muted: rgba(236, 228, 210, .58);
  --dock-bg: rgba(40, 36, 28, .42);
  --dock-edge: rgba(255, 244, 220, .16);
  --dock-shine: rgba(255, 250, 238, .22);
  --dock-active: rgba(255, 248, 232, .12);
  --shadow: 0 24px 48px -26px rgba(0, 0, 0, .7);
  --glow: rgba(212, 189, 138, .12);
  /* حافة الزجاج: لمعة فوق، ظل خفيف تحت */
  --rim: inset 0 1px 0 rgba(255, 250, 238, .16), inset 0 -1px 0 rgba(255, 250, 238, .03), inset 1px 0 0 rgba(255, 250, 238, .05), inset -1px 0 0 rgba(255, 250, 238, .05);
  --sheen: linear-gradient(180deg, rgba(255, 250, 238, .07), rgba(255, 250, 238, .015) 38%, rgba(255, 250, 238, 0) 60%);
  --glass-blur: blur(26px) saturate(1.6);
  --light-a: rgba(212, 189, 138, .3);
  --light-b: rgba(140, 170, 200, .2);
  --radius: 26px;
  --radius-s: 18px;
  color-scheme: dark;
}
[data-skin="gold"][data-theme="light"] {
  --accent: #9a7a3e;
  --accent-2: #c2a466;
  --on-accent: #fff;
  --bg: #f3efe7;
  --surface: rgba(255, 255, 255, .5);
  --surface-2: rgba(255, 255, 255, .58);
  --line: rgba(90, 70, 30, .09);
  --line-strong: rgba(90, 70, 30, .16);
  --text: #221d12;
  --muted: #776d58;
  --dock-bg: rgba(255, 255, 255, .5);
  --dock-edge: rgba(255, 255, 255, .9);
  --dock-shine: rgba(255, 255, 255, 1);
  --dock-active: rgba(90, 70, 30, .08);
  --dock-shadow: 0 1px 0 rgba(255, 255, 255, .9), 0 14px 32px -12px rgba(90, 70, 30, .3);
  --shadow: 0 22px 44px -26px rgba(90, 70, 30, .3);
  --glow: rgba(194, 164, 102, .14);
  --rim: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(90, 70, 30, .05), inset 1px 0 0 rgba(255, 255, 255, .5), inset -1px 0 0 rgba(255, 255, 255, .5);
  --sheen: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .1) 45%, rgba(255, 255, 255, 0) 70%);
  --light-a: rgba(214, 186, 128, .4);
  --light-b: rgba(150, 185, 215, .3);
  color-scheme: light;
}

/* الضوء اللي ورا الزجاج: بقعتين ناعمتين ثابتتين (بدون حركة عشان الأداء) */
[data-skin="gold"] body::before {
  inset: 0; height: auto;
  background:
    radial-gradient(55% 38% at 88% 2%, var(--light-a), transparent 70%),
    radial-gradient(50% 36% at 4% 52%, var(--light-b), transparent 70%),
    radial-gradient(45% 30% at 96% 98%, color-mix(in srgb, var(--light-a) 60%, transparent), transparent 70%);
}

/* ===== ألواح الزجاج ===== */
[data-skin="gold"] :is(.module, .search-bar, .mode-card, .quick-tool, .vip-card, .rec-item, .arch-item, .feeds, .sheet-card, .maint-card, .back-link, .q-btn, .chip, .icon-btn:not(.ghost)) {
  background: var(--sheen), var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--rim), var(--shadow);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
}
[data-skin="gold"] :is(.chip, .icon-btn:not(.ghost), .back-link, .q-btn) { box-shadow: var(--rim); }
[data-skin="gold"] .icon-btn.ghost { box-shadow: none; }
/* زجاج داخل زجاج: بدون ضباب ثاني (أخف على الجوال) */
[data-skin="gold"] :is(.module, .sheet-card) :is(.icon-btn, .chip, .module) { backdrop-filter: none; -webkit-backdrop-filter: none; }
[data-skin="gold"] .sheet { background: rgba(8, 7, 5, .4); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
[data-skin="gold"] .sheet-card { background: var(--sheen), color-mix(in srgb, var(--bg) 55%, rgba(60, 54, 42, .6)); }
[data-skin="gold"][data-theme="light"] .sheet-card { background: var(--sheen), rgba(250, 247, 240, .82); }

/* ===== العناوين: بسيطة، والكلمة المميزة بلون الشمباني ===== */
[data-skin="gold"] .display em { color: var(--accent); font-weight: 500; }
[data-skin="gold"] .eyebrow span[dir="ltr"] { color: var(--accent); }

/* ===== الحقول والأزرار: كبسولات ===== */
[data-skin="gold"] .search-bar { border-radius: 99px; padding: 5px; }
[data-skin="gold"] .search-bar .field { border-radius: 99px; background: rgba(255, 248, 232, .04); }
[data-skin="gold"][data-theme="light"] .search-bar .field { background: rgba(255, 255, 255, .55); }
[data-skin="gold"] .field:focus-within { border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent); }
[data-skin="gold"] .text-input { background: rgba(255, 248, 232, .04); border-color: var(--line); }
[data-skin="gold"] .btn-primary {
  border-radius: 99px; color: var(--on-accent);
  background: linear-gradient(180deg, rgba(255, 255, 255, .32), rgba(255, 255, 255, 0) 55%), var(--accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(0, 0, 0, .12), 0 10px 26px -12px color-mix(in srgb, var(--accent) 70%, transparent);
  transition: transform .45s cubic-bezier(.16, 1, .3, 1), box-shadow .3s;
}
[data-skin="gold"] .btn-primary:active { transform: scale(.96); }
/* أزرار التبديل: مقبض زجاجي يتحرك فوق مسار شفاف (زي iOS) */
[data-skin="gold"] .seg { border-radius: 99px; background: rgba(255, 248, 232, .045); border: 1px solid var(--line); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25); }
[data-skin="gold"][data-theme="light"] .seg { background: rgba(90, 70, 30, .06); box-shadow: inset 0 1px 2px rgba(90, 70, 30, .1); }
[data-skin="gold"] .seg button { border-radius: 99px; transition: color .3s, background .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s; }
[data-skin="gold"] .seg button.active { background: var(--sheen), rgba(255, 248, 232, .14); color: var(--text); box-shadow: var(--rim), 0 4px 12px -4px rgba(0, 0, 0, .4); }
[data-skin="gold"][data-theme="light"] .seg button.active { background: #fff; box-shadow: 0 1px 0 #fff inset, 0 3px 10px -3px rgba(90, 70, 30, .3); }
[data-skin="gold"] .switch span { border-radius: 99px; }
[data-skin="gold"] .switch input:checked + span { background: var(--accent); border-color: transparent; }
[data-skin="gold"] .mode-card.active:not(.maint) { background: var(--sheen), color-mix(in srgb, var(--accent) 12%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }

/* ===== بطاقة معلومات الحساب: ترويسة زجاجية ناعمة بدل الشريط المصمت ===== */
[data-skin="gold"] .idcard-head { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); border-bottom: 1px solid var(--line); }
[data-skin="gold"] .idcard-body { background-image: none; }
[data-skin="gold"] .idcard-stamp { border-style: solid; border-width: 1.5px; opacity: .75; }
[data-skin="gold"] .idcard-fields { background: var(--line); }
[data-skin="gold"] .idf { background: transparent; }
[data-skin="gold"] .stat .eyebrow i { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); border-radius: 50%; }

/* ===== البار السفلي: زجاج سائل بلمسة شمباني ===== */
[data-skin="gold"] :is(.dock-pill, .dock-search) {
  background: var(--sheen), var(--dock-bg);
  backdrop-filter: blur(28px) saturate(1.8); -webkit-backdrop-filter: blur(28px) saturate(1.8);
}
[data-skin="gold"] .dock-pill button.active { color: var(--accent); }

/* الذهبي له لونه الخاص، فاختيار اللون الأساسي ما له داعي */
[data-skin="gold"] .accent-setting { display: none; }