:root {
  --color-primary: #78b9ff;
  --color-primary-contrast: #07111f;
  --color-bg: #06101e;
  --color-surface: rgba(12, 29, 51, .74);
  --color-surface-2: rgba(21, 51, 84, .58);
  --color-text: #f1f7ff;
  --color-muted: #91a8c2;
  --font-heading: "Tajawal", "Cairo", sans-serif;
  --font-body: "Tajawal", "Cairo", sans-serif;
  --radius: 22px;
  --line: rgba(120, 185, 255, .24);
  --soft-line: rgba(210, 232, 255, .08);
  --shadow: 0 24px 80px rgba(0, 6, 18, .42);
  --ease: cubic-bezier(.22, .8, .2, 1);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-width: 320px;
  height: 100%;
}

body {
  overflow: hidden;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

::selection {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
}

/* النمط السلماني: لوحة مستوحاة من الرمل والطين والحجر الطبيعي */
body.salmani {
  --color-primary: #d8ad78;
  --color-primary-contrast: #2e2119;
  --color-bg: #211b17;
  --color-surface: rgba(58, 43, 33, .78);
  --color-surface-2: rgba(112, 79, 55, .62);
  --color-text: #f8eee1;
  --color-muted: #c8b19a;
  --line: rgba(216, 173, 120, .35);
  --soft-line: rgba(248, 238, 225, .1);
  --shadow: 0 24px 80px rgba(20, 12, 7, .48);
}

body.salmani .app,
body.salmani .faq-page {
  background: radial-gradient(circle at 82% 18%, rgba(216, 173, 120, .16), transparent 28%), linear-gradient(135deg, var(--color-bg), #3b2a20 58%, var(--color-bg));
}

body.salmani .page-transition {
  background: radial-gradient(circle at center, rgba(214, 177, 129, .25), transparent 34%), linear-gradient(135deg, rgba(248, 243, 235, .98), rgba(231, 215, 193, .98));
}

/* لوحة سلمانية مطوّرة: رمل دافئ، طين طبيعي، وحجر داكن */
body.salmani {
  --color-primary: #a96f45;
  --color-primary-contrast: #fffaf2;
  --color-bg: #f4eee4;
  --color-surface: rgba(255, 252, 246, .78);
  --color-surface-2: rgba(232, 216, 194, .72);
  --color-text: #342a24;
  --color-muted: #76695d;
  --line: rgba(169, 111, 69, .34);
  --soft-line: rgba(108, 83, 61, .16);
  --shadow: 0 24px 70px rgba(91, 65, 43, .16);
}

body.salmani .app {
  background:
    radial-gradient(circle at 82% 10%, rgba(215, 177, 126, .34), transparent 25%),
    radial-gradient(circle at 8% 88%, rgba(181, 126, 77, .16), transparent 28%),
    linear-gradient(135deg, #f8f3eb 0%, #eee2d1 54%, #f7f0e5 100%);
  color: var(--color-text);
}

body.salmani .app::before {
  background:
    radial-gradient(circle at 18% 22%, rgba(191, 130, 76, .24), transparent 25%),
    radial-gradient(circle at 82% 70%, rgba(225, 183, 127, .14), transparent 28%),
    radial-gradient(circle at 55% 0%, rgba(111, 70, 43, .34), transparent 30%);
}

body.salmani .faq-page {
  background:
    radial-gradient(circle at 88% 12%, rgba(215, 177, 126, .3), transparent 27%),
    radial-gradient(circle at 12% 90%, rgba(181, 126, 77, .14), transparent 30%),
    linear-gradient(135deg, #f8f3eb 0%, #eee2d1 58%, #f7f0e5 100%);
}

body.salmani .faq-page::before {
  opacity: .22;
}

/* استبدال الأسطح الزرقاء الثابتة داخل الصفحة الرئيسية */
body.salmani .loader,
body.salmani .dock {
  background: rgba(250, 246, 239, .94);
  color: var(--color-text);
}

body.salmani .contact-card,
body.salmani .project-modal-card {
  background: linear-gradient(145deg, rgba(77, 55, 40, .96), rgba(31, 23, 17, .98));
}

body.salmani .field input,
body.salmani .field textarea {
  background: rgba(30, 21, 15, .72);
  border-color: var(--line);
}

body.salmani #services .face {
  background:
    linear-gradient(145deg, rgba(123, 86, 57, .72), rgba(47, 32, 24, .9)),
    radial-gradient(circle at 18% 0%, rgba(245, 210, 163, .15), transparent 44%);
  box-shadow: 0 18px 42px rgba(25, 13, 7, .42), inset 0 1px rgba(255, 245, 228, .12);
}

body.salmani #services .flip:hover .face {
  background: linear-gradient(145deg, rgba(225, 183, 127, .22), rgba(55, 38, 28, .9));
  border-color: var(--line);
  box-shadow: 0 18px 34px rgba(25, 13, 7, .5), inset 0 1px rgba(255, 245, 228, .18);
}

body.salmani #services .face > p,
body.salmani #services .face > h3,
body.salmani #services .face > .service-num {
  color: var(--color-text);
}

body.salmani .project::after {
  background: linear-gradient(transparent, rgba(31, 22, 16, .96));
}

body.salmani .project-modal-backdrop {
  background: rgba(24, 15, 9, .84);
}

body.salmani .geo-background,
body.salmani .orb {
  border-color: rgba(225, 183, 127, .16);
}

body.salmani .hero-art::before {
  box-shadow: 0 0 0 28px rgba(225, 183, 127, .07), 0 0 0 62px rgba(225, 183, 127, .035);
}

body.salmani .faq-category.active,
body.salmani .category.active,
body.salmani .faq-category:hover,
body.salmani .category:hover {
  color: var(--color-primary-contrast);
  background: var(--color-primary);
}

body.salmani .faq-screen-item[open],
body.salmani .faq-item[open] {
  background: linear-gradient(145deg, rgba(117, 82, 55, .86), rgba(53, 37, 27, .92));
}

body.salmani .faq-note {
  background: rgba(225, 183, 127, .09);
}

body.salmani .page-transition.is-active {
  background:
    radial-gradient(circle at center, rgba(185, 133, 83, .18), transparent 32%),
    linear-gradient(135deg, rgba(248, 243, 235, .9), rgba(231, 215, 193, .97));
}

body.salmani .transition-plan,
body.salmani .plan svg {
  filter: drop-shadow(0 0 18px rgba(225, 183, 127, .3));
}

body.salmani .style-option:hover,
body.salmani .style-option.active {
  background: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(225, 213, 195, .84));
}

/* تطوير النمط السلماني: قاعدة فاتحة مع زجاج سماوي معماري خفيف */
body.salmani {
  --color-primary: #a66f45;
  --color-primary-contrast: #fffaf4;
  --color-bg: #f5efe6;
  --color-surface: rgba(255, 253, 249, .84);
  --color-surface-2: rgba(235, 224, 209, .76);
  --color-text: #3b3028;
  --color-muted: #74685d;
  --line: rgba(166, 111, 69, .34);
  --soft-line: rgba(116, 92, 70, .16);
  --glass: #8fc8d2;
  --glass-soft: rgba(143, 200, 210, .16);
  --glass-line: rgba(91, 169, 185, .34);
  --shadow: 0 24px 70px rgba(91, 65, 43, .15);
}

/* توحيد الأسطح الفاتحة وإلغاء البقايا الداكنة */
body.salmani .loader,
body.salmani .dock,
body.salmani .contact-card,
body.salmani .project-modal-card,
body.salmani .faq-item[open],
body.salmani .faq-screen-item[open] {
  color: var(--color-text);
  background: linear-gradient(145deg, rgba(255, 253, 249, .97), rgba(232, 220, 204, .9));
  border-color: var(--line);
  box-shadow: var(--shadow);
}

body.salmani .field input,
body.salmani .field textarea {
  color: var(--color-text);
  background: rgba(255, 253, 249, .78);
  border-color: var(--line);
}

body.salmani .field input::placeholder,
body.salmani .field textarea::placeholder {
  color: var(--color-muted);
}

/* زجاج سماوي هادئ في العناصر المعمارية */
body.salmani .style-option,
body.salmani .face,
body.salmani .project,
body.salmani .faq-screen-item,
body.salmani .faq-category,
body.salmani .about-values span,
body.salmani .about-certification {
  background: linear-gradient(145deg, rgba(255, 253, 249, .9), var(--glass-soft));
  border-color: var(--glass-line);
}

body.salmani .style-option:hover,
body.salmani .style-option.active,
body.salmani .face:hover,
body.salmani .project:hover,
body.salmani .faq-screen-item:hover,
body.salmani .faq-screen-item[open],
body.salmani .faq-category:hover,
body.salmani .faq-category.active {
  border-color: var(--glass);
  box-shadow: 0 18px 34px rgba(91, 131, 138, .18), inset 0 1px rgba(255, 255, 255, .8);
}

body.salmani .face {
  color: var(--color-text);
  background:
    linear-gradient(145deg, rgba(255, 253, 249, .94), rgba(211, 231, 230, .58)),
    radial-gradient(circle at 18% 0%, rgba(143, 200, 210, .22), transparent 46%);
  box-shadow: 0 16px 34px rgba(91, 65, 43, .14), inset 0 1px rgba(255, 255, 255, .82);
}

body.salmani .face > h3,
body.salmani .face > p {
  color: var(--color-text);
  text-shadow: none;
}

body.salmani .face > p,
body.salmani .project-info small,
body.salmani .service-num {
  color: var(--color-primary);
}

body.salmani .project::after {
  background: linear-gradient(transparent, rgba(67, 48, 35, .72));
}

body.salmani .project-info h3 {
  color: #fffaf4;
  text-shadow: 0 2px 12px rgba(45, 30, 20, .7);
}

body.salmani .faq-category:hover,
body.salmani .faq-category.active {
  color: var(--color-primary-contrast);
  background: linear-gradient(145deg, var(--color-primary), #c18c5d);
}

body.salmani .faq-category span,
body.salmani .faq-category:hover span,
body.salmani .faq-category.active span {
  color: var(--glass);
}

body.salmani .dock {
  background: rgba(255, 253, 249, .88);
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 38px rgba(91, 65, 43, .18), inset 0 1px rgba(255, 255, 255, .85);
}

body.salmani .dock button:hover,
body.salmani .dock button.active {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
}

body.salmani .hero-art path,
body.salmani .hero-art rect,
body.salmani .hero-art line,
body.salmani .hero-art circle,
body.salmani .geo-background,
body.salmani .orb {
  stroke: var(--glass);
}

body.salmani .hero-art .fine,
body.salmani .hero-art text {
  stroke: none;
  fill: var(--color-muted);
}

body.salmani .hero-art::before {
  border-color: var(--glass-line);
  box-shadow: 0 0 0 28px rgba(143, 200, 210, .1), 0 0 0 62px rgba(143, 200, 210, .045);
}

body.salmani .page-transition {
  background: radial-gradient(circle at center, rgba(143, 200, 210, .24), transparent 34%), linear-gradient(135deg, rgba(249, 245, 238, .96), rgba(231, 218, 201, .98));
}

body.salmani .transition-plan path,
body.salmani .transition-plan rect,
body.salmani .transition-plan line,
body.salmani .transition-plan circle,
body.salmani .plan path,
body.salmani .plan rect,
body.salmani .plan line,
body.salmani .plan circle {
  stroke: var(--glass);
}

body.salmani .transition-plan .fine,
body.salmani .plan .fine {
  stroke: var(--color-muted);
}

body.salmani .status .geo-indicator {
  border-color: var(--glass);
}

/* أولوية نهائية للأسطح الفاتحة فوق القواعد القديمة */
body.salmani #services .face,
body.salmani #services .face.back {
  color: var(--color-text) !important;
  background: linear-gradient(145deg, rgba(255, 253, 249, .96), rgba(211, 231, 230, .62)) !important;
  border-color: var(--glass-line) !important;
  box-shadow: 0 16px 34px rgba(91, 65, 43, .14), inset 0 1px rgba(255, 255, 255, .82) !important;
}

body.salmani #services .face > h3,
body.salmani #services .face > p,
body.salmani #services .face .service-num {
  color: var(--color-text) !important;
  text-shadow: none !important;
}

body.salmani #services .face > p {
  color: var(--color-muted) !important;
}

body.salmani .contact-card,
body.salmani .project-modal-card {
  background: linear-gradient(145deg, rgba(255, 253, 249, .98), rgba(231, 219, 203, .94)) !important;
  color: var(--color-text) !important;
}

body.salmani .contact-card input,
body.salmani .contact-card textarea {
  background: rgba(255, 253, 249, .86) !important;
  color: var(--color-text) !important;
}

body.salmani .faq-page .faq-item[open],
body.salmani .faq-page .faq-item,
body.salmani .faq-page .faq-note {
  color: var(--color-text);
  background: linear-gradient(145deg, rgba(255, 253, 249, .94), rgba(211, 231, 230, .48));
  border-color: var(--glass-line);
}

body.salmani .faq-page .faq-answer,
body.salmani .faq-page .faq-item summary {
  color: var(--color-text);
}

body.salmani .faq-page .faq-answer,
body.salmani .faq-page .faq-note span {
  color: var(--color-muted);
}

/* النسخة المطوّرة من النمط السلماني: ضوء رملي، طين راقٍ وزجاج سماوي هادئ */
body.salmani {
  --color-primary: #9a6845;
  --color-primary-contrast: #fffdf8;
  --color-bg: #f6f0e7;
  --color-surface: rgba(255, 253, 248, .82);
  --color-surface-2: rgba(232, 222, 208, .72);
  --color-text: #3b3028;
  --color-muted: #76695d;
  --line: rgba(154, 104, 69, .3);
  --soft-line: rgba(116, 91, 69, .15);
  --glass: #83c3ce;
  --glass-soft: rgba(131, 195, 206, .14);
  --glass-line: rgba(85, 166, 181, .32);
  --shadow: 0 22px 60px rgba(111, 78, 51, .14);
}

body.salmani .app,
body.salmani .faq-page {
  color: var(--color-text);
  background:
    radial-gradient(circle at 82% 8%, rgba(131, 195, 206, .2), transparent 26%),
    radial-gradient(circle at 9% 88%, rgba(211, 164, 111, .22), transparent 30%),
    linear-gradient(135deg, #fbf7f0 0%, #eee3d3 52%, #f8f1e7 100%);
}

body.salmani .app::before {
  background:
    radial-gradient(circle at 22% 18%, rgba(202, 151, 99, .2), transparent 25%),
    radial-gradient(circle at 80% 72%, rgba(131, 195, 206, .16), transparent 28%),
    radial-gradient(circle at 55% 0%, rgba(255, 255, 255, .65), transparent 32%);
  filter: blur(22px);
}

body.salmani .app::after,
body.salmani .faq-page::before {
  opacity: .34;
  background-image: linear-gradient(rgba(116, 91, 69, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(116, 91, 69, .1) 1px, transparent 1px);
}

/* أسطح فاتحة موحّدة مع حافة زجاجية خفيفة */
body.salmani .style-option,
body.salmani .face,
body.salmani .contact-card,
body.salmani .project-modal-card,
body.salmani .faq-screen-item,
body.salmani .faq-item,
body.salmani .faq-category,
body.salmani .category,
body.salmani .dock,
body.salmani .about-values span,
body.salmani .about-certification {
  color: var(--color-text);
  border-color: var(--glass-line);
  background: linear-gradient(145deg, rgba(255, 253, 248, .94), rgba(211, 232, 231, .46));
  box-shadow: 0 18px 38px rgba(107, 83, 62, .13), inset 0 1px rgba(255, 255, 255, .88);
}

body.salmani .face,
body.salmani #services .face,
body.salmani #services .face.back {
  background:
    linear-gradient(145deg, rgba(255, 253, 248, .96), rgba(205, 229, 229, .52)),
    radial-gradient(circle at 12% 0%, rgba(131, 195, 206, .2), transparent 45%) !important;
  color: var(--color-text) !important;
}

body.salmani .face h3,
body.salmani .face p,
body.salmani .face > h3,
body.salmani .face > p,
body.salmani .face .service-num,
body.salmani .faq-item summary,
body.salmani .faq-screen-item summary,
body.salmani .about-values b {
  color: var(--color-text) !important;
  text-shadow: none !important;
}

body.salmani .face p,
body.salmani .faq-answer,
body.salmani .faq-screen-item p,
body.salmani .about-values span,
body.salmani .project-modal-copy p {
  color: var(--color-muted) !important;
}

body.salmani .face::before,
body.salmani .faq-screen-item::after,
body.salmani .faq-item::after,
body.salmani .style-option::after {
  background: linear-gradient(105deg, transparent 25%, rgba(255, 255, 255, .72) 48%, rgba(131, 195, 206, .18) 57%, transparent 78%) !important;
}

body.salmani .style-option:hover,
body.salmani .style-option.active,
body.salmani .face:hover,
body.salmani .project:hover,
body.salmani .faq-item:hover,
body.salmani .faq-screen-item:hover,
body.salmani .faq-screen-item[open],
body.salmani .faq-item[open] {
  border-color: var(--glass) !important;
  background: linear-gradient(145deg, rgba(255, 254, 250, .98), rgba(188, 221, 222, .58)) !important;
  box-shadow: 0 20px 40px rgba(94, 131, 137, .18), inset 0 1px rgba(255, 255, 255, .95) !important;
}

body.salmani .style-swatch,
body.salmani .service-num,
body.salmani .faq-category span,
body.salmani .faq-item summary::before,
body.salmani .faq-screen-item summary::before,
body.salmani .status .geo-indicator,
body.salmani .geo-background,
body.salmani .orb {
  border-color: var(--glass-line);
  color: var(--glass);
}

body.salmani .btn.primary,
body.salmani .faq-note a,
body.salmani .faq-category.active,
body.salmani .faq-category:hover,
body.salmani .category.active,
body.salmani .category:hover {
  color: var(--color-primary-contrast) !important;
  background: linear-gradient(135deg, var(--color-primary), #bd8c61) !important;
  border-color: var(--color-primary) !important;
}

body.salmani .field input,
body.salmani .field textarea {
  color: var(--color-text) !important;
  background: rgba(255, 253, 248, .82) !important;
  border-color: var(--glass-line) !important;
}

body.salmani .page-transition,
body.salmani .loader {
  color: var(--color-text);
  background: radial-gradient(circle at center, rgba(131, 195, 206, .2), transparent 34%), linear-gradient(135deg, rgba(251, 247, 240, .97), rgba(232, 218, 199, .98));
}

body.salmani .hero-art path,
body.salmani .hero-art rect,
body.salmani .hero-art line,
body.salmani .hero-art circle,
body.salmani .transition-plan path,
body.salmani .transition-plan rect,
body.salmani .transition-plan line,
body.salmani .transition-plan circle {
  stroke: var(--glass);
}

/* انتقال تبديل النمط */
.theme-switch-loader {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  background: rgba(246, 240, 231, .78);
  backdrop-filter: blur(14px);
  transition: opacity .25s ease, visibility .25s ease;
}

.theme-switch-loader.is-active { opacity: 1; visibility: visible; }
.theme-switch-loader-inner { display: grid; place-items: center; gap: 16px; color: var(--color-text); }
.theme-switch-loader svg { width: 190px; overflow: visible; filter: drop-shadow(0 8px 22px rgba(131, 195, 206, .35)); }
.theme-switch-loader rect,
.theme-switch-loader path,
.theme-switch-loader line,
.theme-switch-loader circle { fill: none; stroke: var(--glass); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.theme-switch-loader rect,
.theme-switch-loader path,
.theme-switch-loader line { stroke-dasharray: 420; stroke-dashoffset: 420; }
.theme-switch-loader.is-active rect,
.theme-switch-loader.is-active path,
.theme-switch-loader.is-active line { animation: theme-plan-draw .8s var(--ease) forwards; }
.theme-switch-loader circle { fill: var(--color-primary); stroke: none; opacity: 0; }
.theme-switch-loader.is-active circle { animation: theme-dot-in .3s ease .58s forwards; }
.theme-switch-loader-inner strong { font-size: 13px; letter-spacing: .4px; }
.theme-switch-loader-inner small { color: var(--color-muted); font-size: 10px; }
@keyframes theme-plan-draw { to { stroke-dashoffset: 0; } }
@keyframes theme-dot-in { to { opacity: 1; transform: scale(1.4); } }
@media (prefers-reduced-motion: reduce) { .theme-switch-loader { transition: none; } .theme-switch-loader.is-active rect, .theme-switch-loader.is-active path, .theme-switch-loader.is-active line { animation: none; stroke-dashoffset: 0; } }

/* اللمسة النهائية للسلماني: طين أعمق مع كحلي معماري */
body.salmani {
  --color-primary: #a86f49;
  --color-primary-contrast: #fffaf3;
  --color-bg: #d9c2aa;
  --color-surface: rgba(247, 237, 225, .86);
  --color-surface-2: rgba(232, 211, 190, .86);
  --color-text: #392c25;
  --color-muted: #746052;
  --line: rgba(168, 111, 73, .38);
  --soft-line: rgba(87, 69, 56, .17);
  --glass: #83bfca;
  --glass-soft: rgba(131, 191, 202, .18);
  --glass-line: rgba(69, 143, 158, .38);
  --salmani-navy: #26394d;
  --salmani-navy-deep: #1d2e40;
  --salmani-navy-soft: rgba(38, 57, 77, .93);
  --shadow: 0 24px 64px rgba(73, 49, 34, .2);
}

body.salmani .app,
body.salmani .faq-page {
  background:
    radial-gradient(circle at 84% 8%, rgba(131, 191, 202, .22), transparent 26%),
    radial-gradient(circle at 8% 88%, rgba(174, 119, 77, .2), transparent 30%),
    linear-gradient(135deg, #e5cfb8 0%, var(--color-bg) 52%, #e8d5c0 100%);
}

body.salmani .app::before {
  background:
    radial-gradient(circle at 20% 20%, rgba(118, 78, 54, .18), transparent 25%),
    radial-gradient(circle at 78% 70%, rgba(38, 57, 77, .12), transparent 28%),
    radial-gradient(circle at 60% 0%, rgba(255, 250, 241, .48), transparent 30%);
}

/* كحلي زجاجي هادئ لبطاقات الأسئلة والإجابات */
body.salmani .faq-screen-item,
body.salmani .faq-item {
  color: #f8efe5;
  background: linear-gradient(145deg, rgba(48, 69, 88, .97), var(--salmani-navy-deep)) !important;
  border-color: rgba(131, 191, 202, .34) !important;
  box-shadow: 0 18px 34px rgba(34, 39, 45, .2), inset 0 1px rgba(255, 255, 255, .13);
}

body.salmani .faq-screen-item summary,
body.salmani .faq-item summary {
  color: #fffaf3 !important;
}

body.salmani .faq-screen-item p,
body.salmani .faq-answer {
  color: #cbd7d8 !important;
}

body.salmani .faq-screen-item:hover,
body.salmani .faq-screen-item[open],
body.salmani .faq-item:hover,
body.salmani .faq-item[open] {
  background: linear-gradient(145deg, #38556b, var(--salmani-navy)) !important;
  border-color: var(--glass) !important;
  box-shadow: 0 22px 40px rgba(34, 55, 69, .28), inset 0 1px rgba(255, 255, 255, .2);
}

body.salmani .faq-screen-item summary::before,
body.salmani .faq-item summary::before {
  color: var(--glass) !important;
  border-color: rgba(131, 191, 202, .55) !important;
}

body.salmani .faq-screen-item[open] summary::before,
body.salmani .faq-item[open] summary::before {
  color: var(--salmani-navy-deep) !important;
  background: var(--glass) !important;
}

/* حضور كحلي خفيف في البطاقات المعمارية الرئيسية */
body.salmani #services .face,
body.salmani .contact-card,
body.salmani .project-modal-card {
  background: linear-gradient(145deg, rgba(48, 69, 88, .96), rgba(29, 46, 64, .98)) !important;
  color: #fffaf3 !important;
  border-color: rgba(131, 191, 202, .34) !important;
}

body.salmani #services .face h3,
body.salmani #services .face p,
body.salmani .contact-card label,
body.salmani .project-modal-card p {
  color: #f8efe5 !important;
}

body.salmani #services .face p,
body.salmani .project-modal-card p,
body.salmani .contact-card label {
  color: #cbd7d8 !important;
}

/* كحلي داخل الحركة بدل الأزرق العصري */
body.salmani .page-transition,
body.salmani .theme-switch-loader {
  background:
    radial-gradient(circle at center, rgba(131, 191, 202, .22), transparent 32%),
    linear-gradient(135deg, rgba(29, 46, 64, .96), rgba(52, 67, 78, .98)) !important;
}

body.salmani .page-transition::before,
body.salmani .page-transition::after {
  border-color: rgba(131, 191, 202, .42);
  box-shadow: 0 0 60px rgba(38, 57, 77, .3);
}

body.salmani .transition-plan,
body.salmani .theme-switch-loader svg {
  filter: drop-shadow(0 0 22px rgba(38, 57, 77, .72)) drop-shadow(0 0 9px rgba(131, 191, 202, .36));
}

body.salmani .transition-plan path,
body.salmani .transition-plan rect,
body.salmani .transition-plan line,
body.salmani .theme-switch-loader path,
body.salmani .theme-switch-loader rect,
body.salmani .theme-switch-loader line {
  stroke: var(--glass);
}

body.salmani .transition-plan .fine,
body.salmani .theme-switch-loader-inner small {
  color: #cbd7d8;
  stroke: #b4c9ca;
}

body.salmani .transition-plan .dot,
body.salmani .theme-switch-loader circle {
  fill: var(--color-primary);
}

@media (prefers-reduced-motion: reduce) {
  body.salmani .transition-plan,
  body.salmani .theme-switch-loader svg { filter: none; }
}

/* لوحة صحراوية متكاملة لصفحة الخدمات في النمط السلماني */
body.salmani {
  --salmani-sand-light: #ead8c1;
  --salmani-sand: #d7b99a;
  --salmani-sand-deep: #bd9573;
  --salmani-clay: #9a684b;
  --salmani-clay-dark: #704735;
  --salmani-stone: #c9b59f;
  --salmani-navy: #263b4d;
  --salmani-navy-soft: #395568;
  --salmani-glass: #86c7ce;
}

body.salmani #services {
  background:
    radial-gradient(circle at 82% 16%, rgba(134, 199, 206, .2), transparent 24%),
    radial-gradient(circle at 12% 84%, rgba(154, 104, 75, .18), transparent 27%),
    linear-gradient(135deg, #e5cdb2 0%, var(--salmani-sand) 48%, #e0c6a9 100%);
}

body.salmani #services::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .42;
  background-image:
    linear-gradient(rgba(112, 71, 53, .1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(112, 71, 53, .1) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: radial-gradient(ellipse at center, #000 10%, transparent 78%);
}

body.salmani #services .section-title {
  color: var(--salmani-navy);
  text-shadow: 0 3px 16px rgba(112, 71, 53, .13);
}

body.salmani #services .section-title span {
  color: var(--salmani-clay);
}

body.salmani #services .face,
body.salmani #services .face.back {
  color: var(--salmani-navy);
  border-color: rgba(70, 151, 165, .42) !important;
  background:
    linear-gradient(145deg, rgba(250, 241, 229, .96), rgba(205, 229, 225, .72)) !important;
  box-shadow:
    0 18px 34px rgba(95, 66, 45, .2),
    inset 0 1px rgba(255, 255, 255, .9),
    inset 0 -18px 35px rgba(134, 199, 206, .08) !important;
  text-shadow: none !important;
}

body.salmani #services .face::before {
  background: linear-gradient(120deg, rgba(255,255,255,.58), transparent 38%, rgba(134,199,206,.16)) !important;
}

body.salmani #services .face::after {
  color: var(--salmani-clay) !important;
  opacity: .13;
}

body.salmani #services .face > .service-num {
  color: var(--salmani-clay) !important;
  text-shadow: none !important;
}

body.salmani #services .face > h3,
body.salmani #services .face.back > h3 {
  color: var(--salmani-navy) !important;
  text-shadow: none !important;
}

body.salmani #services .face > p,
body.salmani #services .face.back > p {
  color: #66584d !important;
  text-shadow: none !important;
}

body.salmani #services .face::before {
  opacity: 1;
}

body.salmani #services .flip:hover .face {
  border-color: var(--salmani-glass) !important;
  background:
    linear-gradient(145deg, rgba(255, 249, 238, .98), rgba(177, 216, 216, .78)) !important;
  box-shadow:
    0 22px 38px rgba(72, 104, 108, .22),
    inset 0 1px rgba(255, 255, 255, .98),
    inset 0 0 28px rgba(134, 199, 206, .16) !important;
}

/* شريط طيني رفيع يربط البطاقات بلغة العمارة الصحراوية */
body.salmani #services .face::before {
  box-shadow: inset 4px 0 0 rgba(154, 104, 75, .72);
}

@media (max-width: 850px) {
  body.salmani #services {
    background:
      radial-gradient(circle at 88% 8%, rgba(134, 199, 206, .18), transparent 28%),
      linear-gradient(145deg, #e5cdb2, #d7b99a 58%, #e1c9ae);
  }
}

/* النسخة النهائية للسلماني: صحراوي فاخر بلمسة كحلية زجاجية */
body.salmani {
  --color-primary: #b9784f;
  --color-primary-contrast: #fffaf3;
  --color-bg: #cdb09a;
  --color-surface: rgba(250, 240, 226, .78);
  --color-surface-2: rgba(226, 198, 166, .8);
  --color-text: #263849;
  --color-muted: #665d57;
  --line: rgba(185, 119, 78, .4);
  --soft-line: rgba(38, 56, 73, .16);
  --glass: #8ccbd2;
  --glass-soft: rgba(140, 203, 210, .2);
  --glass-line: rgba(70, 153, 166, .42);
  --salmani-navy: #263849;
  --salmani-navy-deep: #1b2c3b;
  --salmani-navy-soft: #385466;
  --salmani-clay: #a96745;
  --salmani-sand: #ead6bc;
  --shadow: 0 24px 60px rgba(78, 50, 35, .2);
}

body.salmani .app,
body.salmani .faq-page {
  background:
    radial-gradient(circle at 84% 8%, rgba(140, 203, 210, .28), transparent 25%),
    radial-gradient(circle at 10% 88%, rgba(169, 103, 69, .2), transparent 30%),
    linear-gradient(135deg, #ead9c4 0%, #cdb09a 52%, #e1c6aa 100%);
}

body.salmani .app::before {
  background:
    radial-gradient(circle at 18% 16%, rgba(255, 247, 231, .58), transparent 24%),
    radial-gradient(circle at 80% 72%, rgba(38, 56, 73, .14), transparent 30%),
    radial-gradient(circle at 52% 0%, rgba(140, 203, 210, .22), transparent 28%);
  filter: blur(25px);
}

body.salmani .app::after,
body.salmani .faq-page::before {
  opacity: .3;
  background-image: linear-gradient(rgba(38, 56, 73, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(38, 56, 73, .1) 1px, transparent 1px);
}

/* أسطح رئيسية فاتحة مع طبقة كحلية عميقة للمكونات المهمة */
body.salmani .loader,
body.salmani .dock,
body.salmani .contact-card,
body.salmani .project-modal-card {
  color: #f9f0e5;
  background: linear-gradient(145deg, rgba(56, 84, 102, .98), rgba(27, 44, 59, .99)) !important;
  border-color: rgba(140, 203, 210, .42);
  box-shadow: 0 24px 65px rgba(39, 43, 45, .25), inset 0 1px rgba(255,255,255,.14);
}

body.salmani .dock button { color: #c9d7d7; }
body.salmani .dock button:hover,
body.salmani .dock button.active,
body.salmani .btn.primary,
body.salmani .faq-note a {
  color: #fffaf3;
  background: linear-gradient(135deg, var(--salmani-clay), #c8895d) !important;
  border-color: var(--salmani-clay);
  box-shadow: 0 10px 22px rgba(114, 67, 45, .24);
}

/* بطاقات الخدمات: رمل مصقول وكحلي في العمق */
body.salmani #services {
  background:
    radial-gradient(circle at 82% 13%, rgba(140, 203, 210, .3), transparent 25%),
    radial-gradient(circle at 8% 85%, rgba(169, 103, 69, .2), transparent 28%),
    linear-gradient(135deg, #e7d1b4 0%, #c9a98e 52%, #e2c7aa 100%);
}

body.salmani #services .section-title { color: var(--salmani-navy); }
body.salmani #services .section-title span { color: var(--salmani-clay); }
body.salmani #services .face,
body.salmani #services .face.back {
  color: var(--salmani-navy);
  border-color: var(--glass-line) !important;
  background:
    linear-gradient(145deg, rgba(255, 248, 237, .94), rgba(205, 229, 226, .74)) !important;
  box-shadow: 0 18px 34px rgba(76, 56, 43, .2), inset 0 1px rgba(255,255,255,.92), inset 0 -18px 35px rgba(140,203,210,.1) !important;
}
body.salmani #services .face::before {
  background: linear-gradient(110deg, rgba(255,255,255,.65), transparent 42%, rgba(140,203,210,.18)) !important;
  box-shadow: inset 4px 0 0 rgba(169,103,69,.72);
}
body.salmani #services .face > h3 { color: var(--salmani-navy) !important; text-shadow: none !important; }
body.salmani #services .face > p { color: #66594f !important; text-shadow: none !important; }
body.salmani #services .face > .service-num { color: var(--salmani-clay) !important; text-shadow: none !important; }
body.salmani #services .flip:hover .face {
  border-color: var(--glass) !important;
  background: linear-gradient(145deg, #fffaf0, rgba(170, 216, 216, .82)) !important;
  box-shadow: 0 22px 40px rgba(66, 104, 108, .27), inset 0 1px rgba(255,255,255,.98), inset 0 0 28px rgba(140,203,210,.2) !important;
}

/* الأسئلة: كحلي أنيق كنقطة تميّز داخل اللوحة الصحراوية */
body.salmani .faq-item,
body.salmani .faq-screen-item {
  color: #f8efe4;
  background: linear-gradient(145deg, #3b596b, var(--salmani-navy-deep)) !important;
  border-color: rgba(140,203,210,.38) !important;
  box-shadow: 0 18px 34px rgba(34, 45, 52, .22), inset 0 1px rgba(255,255,255,.13);
}
body.salmani .faq-item summary,
body.salmani .faq-screen-item summary { color: #fffaf3 !important; }
body.salmani .faq-answer,
body.salmani .faq-screen-item p { color: #d1dddd !important; }
body.salmani .faq-item:hover,
body.salmani .faq-item[open],
body.salmani .faq-screen-item:hover,
body.salmani .faq-screen-item[open] {
  background: linear-gradient(145deg, #496c7e, #263f51) !important;
  border-color: var(--glass) !important;
}

body.salmani .field input,
body.salmani .field textarea {
  color: #fdf5ea !important;
  background: rgba(27,44,59,.72) !important;
  border-color: rgba(140,203,210,.4) !important;
}
body.salmani .field input::placeholder,
body.salmani .field textarea::placeholder { color: #b8cbcc; }

/* كحلي وسماوي في مخطط التحميل والانتقال */
body.salmani .page-transition,
body.salmani .theme-switch-loader {
  background: radial-gradient(circle at center, rgba(140,203,210,.24), transparent 34%), linear-gradient(135deg, rgba(27,44,59,.98), rgba(56,84,102,.98)) !important;
}
body.salmani .page-transition::before,
body.salmani .page-transition::after { border-color: rgba(140,203,210,.5); box-shadow: 0 0 65px rgba(27,44,59,.42); }
body.salmani .transition-plan,
body.salmani .theme-switch-loader svg { filter: drop-shadow(0 0 24px rgba(140,203,210,.45)) drop-shadow(0 0 12px rgba(27,44,59,.8)); }
body.salmani .transition-plan path,
body.salmani .transition-plan rect,
body.salmani .transition-plan line,
body.salmani .theme-switch-loader path,
body.salmani .theme-switch-loader rect,
body.salmani .theme-switch-loader line { stroke: var(--glass); }
body.salmani .transition-plan .fine,
body.salmani .theme-switch-loader-inner small { color: #cadbd9; stroke: #cadbd9; }
body.salmani .transition-plan .dot,
body.salmani .theme-switch-loader circle { fill: var(--salmani-clay); }

@media (max-width: 850px) {
  body.salmani #services { background: linear-gradient(145deg, #e7d1b4, #c9a98e 58%, #e2c7aa); }
}

/* النسخة الداكنة جدًا من النمط السلماني: فحم صحراوي، طين وكحلي زجاجي */
body.salmani {
  --color-primary: #d29a67;
  --color-primary-contrast: #211713;
  --color-bg: #171716;
  --color-surface: rgba(39, 34, 31, .9);
  --color-surface-2: rgba(65, 52, 43, .88);
  --color-text: #f5eadb;
  --color-muted: #b9a797;
  --line: rgba(210, 154, 103, .42);
  --soft-line: rgba(226, 207, 185, .13);
  --glass: #83c9d2;
  --glass-soft: rgba(131, 201, 210, .11);
  --glass-line: rgba(131, 201, 210, .34);
  --salmani-navy: #183242;
  --salmani-navy-deep: #0d202d;
  --salmani-navy-soft: #274b5d;
  --salmani-clay: #c17e50;
  --shadow: 0 26px 70px rgba(0, 0, 0, .46);
}

body.salmani .app,
body.salmani .faq-page {
  color: var(--color-text);
  background:
    radial-gradient(circle at 82% 9%, rgba(131, 201, 210, .16), transparent 25%),
    radial-gradient(circle at 8% 88%, rgba(193, 126, 80, .17), transparent 29%),
    linear-gradient(135deg, #121616 0%, #29231f 48%, #17191a 100%);
}

body.salmani .app::before {
  background:
    radial-gradient(circle at 18% 16%, rgba(210, 154, 103, .16), transparent 24%),
    radial-gradient(circle at 78% 70%, rgba(40, 91, 108, .2), transparent 30%),
    radial-gradient(circle at 52% 0%, rgba(255, 232, 202, .08), transparent 28%);
  filter: blur(28px);
}

body.salmani .app::after,
body.salmani .faq-page::before {
  opacity: .28;
  background-image: linear-gradient(rgba(131, 201, 210, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(131, 201, 210, .08) 1px, transparent 1px);
}

/* بطاقات داكنة بلمعة زجاجية هادئة */
body.salmani .style-option,
body.salmani .face,
body.salmani .about-values span,
body.salmani .about-certification,
body.salmani .faq-category,
body.salmani .category,
body.salmani .faq-item,
body.salmani .faq-screen-item {
  color: var(--color-text);
  border-color: var(--glass-line);
  background: linear-gradient(145deg, rgba(53, 67, 69, .9), rgba(29, 30, 29, .94));
  box-shadow: 0 18px 40px rgba(0, 0, 0, .3), inset 0 1px rgba(255, 255, 255, .1);
}

body.salmani #services {
  background:
    radial-gradient(circle at 82% 14%, rgba(131, 201, 210, .18), transparent 25%),
    radial-gradient(circle at 9% 86%, rgba(193, 126, 80, .18), transparent 29%),
    linear-gradient(135deg, #201c1a 0%, #30261f 53%, #181b1c 100%);
}

body.salmani #services::before {
  opacity: .32;
  background-image: linear-gradient(rgba(131, 201, 210, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(131, 201, 210, .08) 1px, transparent 1px);
}

body.salmani #services .section-title { color: #f6eadb; }
body.salmani #services .section-title span { color: var(--color-primary); }
body.salmani #services .face,
body.salmani #services .face.back {
  color: var(--color-text);
  border-color: var(--glass-line) !important;
  background: linear-gradient(145deg, rgba(48, 75, 84, .9), rgba(22, 31, 34, .97)) !important;
  box-shadow: 0 20px 42px rgba(0, 0, 0, .42), inset 0 1px rgba(255, 255, 255, .13), inset 0 -18px 34px rgba(193, 126, 80, .07) !important;
}

body.salmani #services .face::before {
  background: linear-gradient(110deg, rgba(255,255,255,.12), transparent 42%, rgba(131,201,210,.13)) !important;
  box-shadow: inset 4px 0 0 rgba(193, 126, 80, .85);
}

body.salmani #services .face > h3 { color: #fff5e9 !important; }
body.salmani #services .face > p { color: #c6d1ce !important; }
body.salmani #services .face > .service-num { color: var(--glass) !important; }
body.salmani #services .flip:hover .face {
  border-color: var(--glass) !important;
  background: linear-gradient(145deg, #3d6874, #263b43) !important;
  box-shadow: 0 24px 46px rgba(0, 0, 0, .52), inset 0 1px rgba(255,255,255,.2), inset 0 0 30px rgba(131,201,210,.15) !important;
}

body.salmani .faq-item,
body.salmani .faq-screen-item,
body.salmani .faq-item[open],
body.salmani .faq-screen-item[open] {
  color: #fff5e9;
  background: linear-gradient(145deg, #244557, #102632) !important;
  border-color: rgba(131, 201, 210, .4) !important;
}

body.salmani .faq-item:hover,
body.salmani .faq-screen-item:hover,
body.salmani .faq-item[open]:hover,
body.salmani .faq-screen-item[open]:hover {
  background: linear-gradient(145deg, #315d6d, #183847) !important;
  border-color: var(--glass) !important;
}

body.salmani .faq-item summary,
body.salmani .faq-screen-item summary { color: #fff5e9 !important; }
body.salmani .faq-answer,
body.salmani .faq-screen-item p { color: #c4d1d0 !important; }

body.salmani .contact-card,
body.salmani .project-modal-card,
body.salmani .loader,
body.salmani .dock {
  color: var(--color-text);
  background: linear-gradient(145deg, rgba(38, 65, 76, .98), rgba(14, 27, 34, .99)) !important;
  border-color: var(--glass-line);
  box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.12);
}

body.salmani .field input,
body.salmani .field textarea {
  color: #fff5e9 !important;
  background: rgba(12, 25, 31, .8) !important;
  border-color: var(--glass-line) !important;
}

body.salmani .page-transition,
body.salmani .theme-switch-loader {
  background: radial-gradient(circle at center, rgba(131,201,210,.24), transparent 34%), linear-gradient(135deg, rgba(12,25,32,.98), rgba(55,42,34,.98)) !important;
}

body.salmani .page-transition::before,
body.salmani .page-transition::after { border-color: rgba(131,201,210,.5); }
body.salmani .transition-plan,
body.salmani .theme-switch-loader svg { filter: drop-shadow(0 0 22px rgba(131,201,210,.5)) drop-shadow(0 0 14px rgba(193,126,80,.32)); }
body.salmani .transition-plan path,
body.salmani .transition-plan rect,
body.salmani .transition-plan line,
body.salmani .theme-switch-loader path,
body.salmani .theme-switch-loader rect,
body.salmani .theme-switch-loader line { stroke: var(--glass); }
body.salmani .transition-plan .dot,
body.salmani .theme-switch-loader circle { fill: var(--color-primary); }

body.salmani .btn.primary,
body.salmani .faq-note a,
body.salmani .faq-category.active,
body.salmani .faq-category:hover,
body.salmani .category.active,
body.salmani .category:hover {
  color: var(--color-primary-contrast) !important;
  background: linear-gradient(135deg, var(--color-primary), #e0ad79) !important;
  border-color: var(--color-primary) !important;
}

/* اللمسات النهائية للسلماني الداكن: انتقال عميق، اختيار واضح، وتواصل مرتب */
body.salmani .page-transition,
body.salmani .theme-switch-loader {
  background:
    radial-gradient(circle at 50% 42%, rgba(131, 201, 210, .16), transparent 25%),
    radial-gradient(circle at 78% 18%, rgba(193, 126, 80, .13), transparent 28%),
    linear-gradient(135deg, #090f14 0%, #172a35 48%, #241a17 100%) !important;
  backdrop-filter: blur(10px);
}

body.salmani .page-transition::before,
body.salmani .page-transition::after {
  border-color: rgba(131, 201, 210, .42);
  box-shadow: 0 0 70px rgba(10, 31, 42, .7);
}

body.salmani .transition-plan,
body.salmani .theme-switch-loader svg {
  filter: drop-shadow(0 0 26px rgba(131, 201, 210, .5)) drop-shadow(0 0 18px rgba(193, 126, 80, .24));
}

body.salmani .style-option {
  color: #f8eadb !important;
  background: linear-gradient(145deg, rgba(48, 62, 65, .98), rgba(27, 29, 29, .98)) !important;
  border-color: rgba(131, 201, 210, .3) !important;
  box-shadow: 0 14px 28px rgba(0, 0, 0, .3), inset 0 1px rgba(255, 255, 255, .12);
}

body.salmani .style-option b { color: #fff5e8 !important; }
body.salmani .style-option small { color: #c8d2ce !important; }
body.salmani .style-option:hover,
body.salmani .style-option.active {
  color: #fffaf2 !important;
  background: linear-gradient(145deg, #315666, #263d47) !important;
  border-color: var(--glass) !important;
  box-shadow: 0 18px 34px rgba(0, 0, 0, .38), inset 0 1px rgba(255, 255, 255, .2), inset 0 0 24px rgba(131, 201, 210, .1);
}

body.salmani .style-option .style-swatch {
  display: grid;
  place-items: center;
  border-color: rgba(131, 201, 210, .55) !important;
  color: #fff6e8 !important;
  background: linear-gradient(145deg, #385f6c, #182c35) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.2), 0 8px 16px rgba(0,0,0,.28);
}

body.salmani .style-option.active .style-swatch {
  color: #17252b !important;
  background: linear-gradient(145deg, #9bdce0, #c99668) !important;
  border-color: #b6e9e9 !important;
}

body.salmani .contact-details a:hover,
body.salmani .contact-details address:hover {
  border-color: var(--glass) !important;
  background: rgba(131, 201, 210, .13) !important;
}

body.salmani .contact-map iframe {
  border-color: rgba(131, 201, 210, .42) !important;
  filter: saturate(.82) contrast(1.04) sepia(.08);
}

/* لوحة سلمانية نهائية: البني الداكن هو اللون الغالب، والبيج للإطارات واللمسات */
body.salmani {
  --color-primary: #c58a58;
  --color-primary-contrast: #241812;
  --color-bg: #1b1512;
  --color-surface: rgba(55, 39, 29, .94);
  --color-surface-2: rgba(92, 63, 43, .9);
  --color-text: #f4e5d2;
  --color-muted: #c7b29b;
  --line: rgba(218, 177, 133, .58);
  --soft-line: rgba(231, 205, 174, .2);
  --glass: #d9b68d;
  --glass-line: rgba(218, 177, 133, .48);
  --shadow: 0 24px 64px rgba(0, 0, 0, .46);
}

/* خط عربي موثوق: Tajawal أولًا، ثم خطوط النظام العربية عند تعذر تحميل Google Fonts */
body,
button,
input,
textarea,
select {
  font-family: var(--font-body) !important;
}

/* أرقام الهاتف والبريد تبقى باتجاهها الطبيعي في الواجهات العربية */
.contact-details b,
.mobile-contact-panel b {
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: lining-nums tabular-nums;
}

body.salmani .app,
body.salmani .faq-page {
  background:
    radial-gradient(circle at 86% 8%, rgba(218, 177, 133, .12), transparent 24%),
    radial-gradient(circle at 8% 88%, rgba(165, 96, 53, .18), transparent 28%),
    linear-gradient(135deg, #17110f 0%, #302018 48%, #1b1512 100%) !important;
}

body.salmani .app::before {
  background:
    radial-gradient(circle at 18% 16%, rgba(197, 138, 88, .18), transparent 24%),
    radial-gradient(circle at 78% 70%, rgba(218, 177, 133, .08), transparent 28%),
    radial-gradient(circle at 52% 0%, rgba(247, 226, 199, .08), transparent 28%) !important;
}

body.salmani .app::after,
body.salmani .faq-page::before {
  background-image:
    linear-gradient(rgba(231, 205, 174, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(231, 205, 174, .08) 1px, transparent 1px) !important;
}

body.salmani .style-option,
body.salmani .about-values span,
body.salmani .faq-category,
body.salmani .category,
body.salmani .project,
body.salmani .contact-details a {
  background: linear-gradient(145deg, rgba(101, 70, 48, .96), rgba(48, 32, 24, .98)) !important;
  border-color: var(--soft-line) !important;
  color: var(--color-text) !important;
}

body.salmani #services .face {
  background: linear-gradient(145deg, #5b3d2a, #2b1c16) !important;
  border-color: var(--line) !important;
}

body.salmani .faq-screen-item,
body.salmani .faq-item {
  background: linear-gradient(145deg, #3a291f, #1d1512) !important;
  border-color: var(--line) !important;
}

body.salmani .contact-card,
body.salmani .project-modal-card,
body.salmani .dock,
body.salmani .loader {
  background: linear-gradient(145deg, #4a3021, #201512) !important;
  border-color: var(--line) !important;
}

body.salmani .hero-art path,
body.salmani .hero-art rect,
body.salmani .hero-art line,
body.salmani .hero-art circle,
body.salmani .geo-background {
  stroke: var(--glass) !important;
}

body.salmani .btn.primary,
body.salmani .dock button.active,
body.salmani .style-option.active,
body.salmani .faq-category.active,
body.salmani .category.active {
  background: linear-gradient(135deg, #b87549, #d6a675) !important;
  border-color: #d9b68d !important;
}

/* لوحة سلمانية عنابية: دفء وفخامة مع بني وبيج واضحين */
body.salmani {
  --color-primary: #d2a06e;
  --color-primary-contrast: #2a1718;
  --color-bg: #2b1118;
  --color-surface: rgba(66, 30, 32, .94);
  --color-surface-2: rgba(104, 55, 43, .9);
  --color-text: #f5e5d0;
  --color-muted: #d0b9a1;
  --line: rgba(222, 181, 132, .62);
  --soft-line: rgba(238, 213, 183, .2);
  --glass: #e0bf98;
  --glass-line: rgba(224, 191, 152, .52);
  --shadow: 0 24px 64px rgba(19, 5, 9, .5);
}

body.salmani .app,
body.salmani .faq-page {
  background:
    radial-gradient(circle at 84% 8%, rgba(210, 160, 110, .12), transparent 25%),
    radial-gradient(circle at 8% 88%, rgba(113, 47, 45, .28), transparent 30%),
    linear-gradient(135deg, #1b0b11 0%, #461b22 50%, #241016 100%) !important;
}

body.salmani .app::before {
  background:
    radial-gradient(circle at 20% 18%, rgba(177, 104, 70, .2), transparent 25%),
    radial-gradient(circle at 78% 72%, rgba(224, 191, 152, .1), transparent 28%),
    radial-gradient(circle at 52% 0%, rgba(255, 226, 193, .08), transparent 30%) !important;
}

body.salmani .app::after,
body.salmani .faq-page::before {
  background-image:
    linear-gradient(rgba(238, 213, 183, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(238, 213, 183, .09) 1px, transparent 1px) !important;
}

body.salmani .header,
body.salmani .dock,
body.salmani .contact-card,
body.salmani .project-modal-card,
body.salmani .loader {
  background: linear-gradient(145deg, #653a32, #2b1118) !important;
  border-color: var(--glass-line) !important;
  box-shadow: var(--shadow), inset 0 1px rgba(255, 231, 204, .13) !important;
}

body.salmani .style-option,
body.salmani .about-values span,
body.salmani .faq-category,
body.salmani .category,
body.salmani .project,
body.salmani .contact-details a {
  color: var(--color-text) !important;
  background: linear-gradient(145deg, #704239, #3a1b20) !important;
  border-color: var(--soft-line) !important;
  box-shadow: 0 16px 32px rgba(20, 5, 9, .28), inset 0 1px rgba(255, 231, 204, .1) !important;
}

body.salmani #services {
  background:
    radial-gradient(circle at 82% 12%, rgba(224, 191, 152, .12), transparent 25%),
    linear-gradient(135deg, #35151b 0%, #51251f 52%, #241016 100%) !important;
}

body.salmani #services .face,
body.salmani #services .face.back {
  color: var(--color-text) !important;
  background: linear-gradient(145deg, #805542, #452023) !important;
  border-color: var(--glass-line) !important;
  box-shadow: 0 20px 40px rgba(18, 5, 8, .42), inset 0 1px rgba(255, 231, 204, .16) !important;
}

body.salmani #services .face > h3 { color: #fff1df !important; }
body.salmani #services .face > p { color: #e0c9ae !important; }
body.salmani #services .face > .service-num { color: var(--glass) !important; }

body.salmani .faq-item,
body.salmani .faq-screen-item {
  color: var(--color-text) !important;
  background: linear-gradient(145deg, #54252b, #291117) !important;
  border-color: var(--glass-line) !important;
}

body.salmani .faq-item:hover,
body.salmani .faq-item[open],
body.salmani .faq-screen-item:hover,
body.salmani .faq-screen-item[open] {
  background: linear-gradient(145deg, #703a38, #3b1820) !important;
  border-color: var(--glass) !important;
}

body.salmani .faq-item summary,
body.salmani .faq-screen-item summary,
body.salmani .project-info h3 { color: #fff1df !important; }
body.salmani .faq-answer,
body.salmani .faq-screen-item p { color: #d8c1aa !important; }

body.salmani .field input,
body.salmani .field textarea {
  color: #fff1df !important;
  background: #2a1118 !important;
  border-color: var(--glass-line) !important;
}

body.salmani .hero-art path,
body.salmani .hero-art rect,
body.salmani .hero-art line,
body.salmani .hero-art circle,
body.salmani .geo-background { stroke: var(--glass) !important; }

body.salmani .btn.primary,
body.salmani .dock button.active,
body.salmani .style-option.active,
body.salmani .faq-category.active,
body.salmani .category.active {
  color: var(--color-primary-contrast) !important;
  background: linear-gradient(135deg, #c78355, #e0b57f) !important;
  border-color: #e0bf98 !important;
}

/* الهيدر وشريط التنقل ينتقلان إلى body عبر JavaScript، لذلك يجب استهدافهما خارج #app أيضًا */
body.salmani > .header,
body.salmani > .dock,
body.salmani #app > .header,
body.salmani #app > .dock {
  color: var(--color-text) !important;
  border-color: rgba(238, 213, 183, .34) !important;
  background:
    linear-gradient(145deg, rgba(91, 43, 43, .98), rgba(43, 17, 24, .99)) !important;
  box-shadow: 0 18px 42px rgba(19, 5, 9, .38), inset 0 1px rgba(255, 231, 204, .14) !important;
  backdrop-filter: blur(18px);
}

body.salmani > .header .brand strong,
body.salmani > .header .brand small,
body.salmani > .header .status,
body.salmani > .dock button {
  color: var(--color-text) !important;
}

body.salmani > .header .brand small,
body.salmani > .header .status {
  color: var(--color-muted) !important;
}

body.salmani > .dock button:hover,
body.salmani > .dock button.active {
  color: var(--color-primary-contrast) !important;
  background: linear-gradient(135deg, #c78355, #e0b57f) !important;
}

@media (max-width: 850px) {
  body.salmani > .header {
    background: linear-gradient(180deg, rgba(91, 43, 43, .99), rgba(43, 17, 24, .99)) !important;
  }
}

/* ===== تثبيت قاطع للهيدر والدوك في النمط السلماني ===== */
body.salmani > .header,
body.salmani > .dock {
  color: var(--color-text) !important;
  border-color: rgba(238, 213, 183, .34) !important;
  background: linear-gradient(145deg, rgba(104, 55, 43, .96), rgba(43, 17, 24, .98)) !important;
  box-shadow: 0 18px 42px rgba(19, 5, 9, .38), inset 0 1px rgba(255, 231, 204, .14) !important;
  backdrop-filter: blur(18px);
}

body.salmani > .header .brand strong,
body.salmani > .header .brand small,
body.salmani > .header .status {
  color: var(--color-text) !important;
}

body.salmani > .header .brand small,
body.salmani > .header .status {
  color: var(--color-muted) !important;
}

body.salmani > .dock button {
  color: var(--color-text) !important;
}

body.salmani > .dock button:hover,
body.salmani > .dock button.active {
  color: var(--color-primary-contrast) !important;
  background: linear-gradient(135deg, #d2a06e, #c78355) !important;
  border-color: #e0bf98 !important;
}

/* ضمان امتداد الخلفية العنابية حتى في الجوال */
@media (max-width: 850px) {
  body.salmani > .header {
    background: linear-gradient(180deg, rgba(104, 55, 43, .99), rgba(43, 17, 24, .99)) !important;
    border-color: rgba(238, 213, 183, .34) !important;
  }
  body.salmani > .dock {
    background: linear-gradient(145deg, rgba(104, 55, 43, .96), rgba(43, 17, 24, .98)) !important;
    border-color: rgba(238, 213, 183, .34) !important;
  }
}

/* ===== نظام ألوان موحّد ونهائي للنمطين =====
   كل عنصر رئيسي يرث من هذه المتغيرات، لذلك لا تبقى أجزاء زرقاء عند اختيار السلماني. */
:root {
  --blue-bg-deep: #06101e;
  --blue-bg-mid: #091b33;
  --blue-card: rgba(12, 29, 51, .82);
  --blue-card-strong: rgba(21, 51, 84, .9);
  --blue-line: rgba(120, 185, 255, .28);
  --blue-glow: rgba(120, 185, 255, .14);
  --blue-shadow: rgba(0, 8, 24, .42);
}

body:not(.salmani) {
  --mode-bg: var(--blue-bg-deep);
  --mode-bg-mid: var(--blue-bg-mid);
  --mode-card: var(--blue-card);
  --mode-card-strong: var(--blue-card-strong);
  --mode-line: var(--blue-line);
  --mode-glow: var(--blue-glow);
  --mode-shadow: var(--blue-shadow);
  --mode-ink: var(--color-text);
  --mode-muted: var(--color-muted);
  --mode-accent: var(--color-primary);
  --mode-accent-contrast: var(--color-primary-contrast);
}

body.salmani {
  --mode-bg: #260d16;
  --mode-bg-mid: #4a1d26;
  --mode-card: rgba(79, 39, 38, .94);
  --mode-card-strong: rgba(105, 57, 45, .98);
  --mode-line: rgba(231, 202, 166, .62);
  --mode-glow: rgba(211, 151, 103, .14);
  --mode-shadow: rgba(20, 5, 10, .52);
  --mode-ink: #fff1df;
  --mode-muted: #d8bfa7;
  --mode-accent: #d7a878;
  --mode-accent-contrast: #32171d;
  --color-bg: #260d16 !important;
  --color-surface: rgba(79, 39, 38, .94) !important;
  --color-surface-2: rgba(105, 57, 45, .98) !important;
  --color-text: #fff1df !important;
  --color-muted: #d8bfa7 !important;
  --color-primary: #d7a878 !important;
  --color-primary-contrast: #32171d !important;
  --line: rgba(231, 202, 166, .62) !important;
  --soft-line: rgba(231, 202, 166, .24) !important;
  --shadow: 0 24px 64px rgba(20, 5, 10, .52) !important;
}

/* الحاوية والخلفيات والرسومات */
body:not(.salmani) .app,
body:not(.salmani) .faq-page { background: linear-gradient(135deg, var(--mode-bg), var(--mode-bg-mid) 52%, var(--mode-bg)) !important; }
body.salmani .app,
body.salmani .faq-page { background: radial-gradient(circle at 82% 8%, rgba(215, 168, 120, .15), transparent 26%), radial-gradient(circle at 8% 88%, rgba(111, 37, 48, .3), transparent 30%), linear-gradient(135deg, #1b080e 0%, #4a1d26 50%, #260d16 100%) !important; }
body.salmani .app::before { background: radial-gradient(circle at 18% 16%, rgba(215, 168, 120, .18), transparent 25%), radial-gradient(circle at 80% 70%, rgba(111, 37, 48, .25), transparent 30%) !important; }
body.salmani .app::after,
body.salmani .faq-page::before { background-image: linear-gradient(rgba(231, 202, 166, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(231, 202, 166, .08) 1px, transparent 1px) !important; }

/* الهيدر والدوك: يعملان سواء بقيا داخل app أو نُقلا إلى body */
body .header,
body .dock { color: var(--mode-ink) !important; border-color: var(--mode-line) !important; background: linear-gradient(145deg, var(--mode-card-strong), var(--mode-bg)) !important; box-shadow: 0 18px 42px var(--mode-shadow), inset 0 1px rgba(255,255,255,.12) !important; }
body .header .brand strong,
body .dock button { color: var(--mode-ink) !important; }
body .header .brand small,
body .status { color: var(--mode-muted) !important; }
body .dock button:hover,
body .dock button.active,
body .btn.primary,
body .style-option.active,
body .faq-category.active,
body .category.active { color: var(--mode-accent-contrast) !important; background: linear-gradient(135deg, var(--mode-accent), #b97852) !important; border-color: var(--mode-accent) !important; }

/* البطاقات والمكونات */
body .style-option,
body .about-values span,
body .about-certification,
body .faq-category,
body .category,
body .project,
body .contact-details a,
body .faq-screen-item,
body .faq-item,
body .contact-card,
body .project-modal-card { color: var(--mode-ink) !important; border-color: var(--mode-line) !important; background: linear-gradient(145deg, var(--mode-card-strong), var(--mode-card)) !important; box-shadow: 0 16px 34px var(--mode-shadow), inset 0 1px rgba(255,255,255,.1) !important; }
body #services .face,
body #services .face.back { color: var(--mode-ink) !important; border-color: var(--mode-line) !important; background: linear-gradient(145deg, var(--mode-card-strong), var(--mode-bg)) !important; box-shadow: 0 18px 38px var(--mode-shadow), inset 0 1px rgba(255,255,255,.1) !important; }
body .face h3,
body .face p,
body .faq-item summary,
body .faq-screen-item summary,
body .project-info h3,
body .about-values b,
body .contact-details b { color: var(--mode-ink) !important; }
body .face p,
body .faq-answer,
body .faq-screen-item p,
body .project-modal-copy p,
body .about-values span,
body .contact-details small { color: var(--mode-muted) !important; }
body .field input,
body .field textarea { color: var(--mode-ink) !important; border-color: var(--mode-line) !important; background: color-mix(in srgb, var(--mode-bg) 82%, transparent) !important; }

/* الانتقالات واللودر والرسومات الهندسية تتبع النمط الحالي */
body .loader,
body .page-transition,
body .theme-switch-loader { color: var(--mode-ink) !important; background: radial-gradient(circle at center, var(--mode-glow), transparent 35%), linear-gradient(135deg, var(--mode-bg), var(--mode-bg-mid)) !important; }
body .hero-art path,
body .hero-art rect,
body .hero-art line,
body .hero-art circle,
body .geo-background,
body .orb,
body .transition-plan path,
body .transition-plan rect,
body .transition-plan line { stroke: var(--mode-accent) !important; border-color: var(--mode-line) !important; }
body .hero-art .fine,
body .hero-art text,
body .transition-plan .fine { stroke: var(--mode-muted) !important; fill: var(--mode-muted) !important; }
body .hero-floor-logo,
body .brand img { filter: drop-shadow(0 0 16px var(--mode-glow)) !important; }

@supports not (background: color-mix(in srgb, black, white)) {
  body .field input, body .field textarea { background: var(--mode-bg) !important; }
}

@media (max-width: 850px) {
  body .header,
  body .dock { background: linear-gradient(180deg, var(--mode-card-strong), var(--mode-bg)) !important; }
}

/* ===== نظام تبديل نهائي: لا توجد أسطح ثابتة خارج لوحة النمط ===== */
:root {
  --blue-page-start: #06101e;
  --blue-page-end: #091b33;
  --blue-surface-main: rgba(12, 29, 51, .86);
  --blue-surface-soft: rgba(21, 51, 84, .72);
  --blue-edge: rgba(120, 185, 255, .28);
  --blue-active: #78b9ff;
  --blue-active-ink: #07111f;
  --blue-copy: #f1f7ff;
  --blue-subcopy: #91a8c2;
  --blue-shadow: rgba(0, 8, 24, .42);
}

body:not(.salmani) {
  --ui-page-start: var(--blue-page-start);
  --ui-page-end: var(--blue-page-end);
  --ui-surface-main: var(--blue-surface-main);
  --ui-surface-soft: var(--blue-surface-soft);
  --ui-edge: var(--blue-edge);
  --ui-active: var(--blue-active);
  --ui-active-ink: var(--blue-active-ink);
  --ui-copy: var(--blue-copy);
  --ui-subcopy: var(--blue-subcopy);
  --ui-shadow: var(--blue-shadow);
}

body.salmani {
  --ui-page-start: #1b080e;
  --ui-page-end: #4a1d26;
  --ui-surface-main: rgba(50, 23, 29, .94);
  --ui-surface-soft: rgba(105, 57, 45, .96);
  --ui-edge: rgba(231, 202, 166, .62);
  --ui-active: #d7a878;
  --ui-active-ink: #32171d;
  --ui-copy: #fff1df;
  --ui-subcopy: #d8bfa7;
  --ui-shadow: rgba(20, 5, 10, .52);
}

/* الخلفية العامة والطبقات الهندسية */
body .app,
body .faq-page {
  background: linear-gradient(135deg, var(--ui-page-start), var(--ui-page-end) 52%, var(--ui-page-start)) !important;
}

body .app::after,
body .faq-page::before {
  background-image: linear-gradient(var(--ui-edge) 1px, transparent 1px), linear-gradient(90deg, var(--ui-edge) 1px, transparent 1px) !important;
  opacity: .2 !important;
}

/* الهيدر شفاف: تظهر الخلفية والمحتويات الواقعة تحته */
body .header,
body.salmani .header,
body:not(.salmani) .header,
body > .header,
body > .dock {
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body .header {
  border-color: transparent !important;
}

body .header .brand strong,
body .header .brand small,
body .header .status,
body .dock button {
  color: var(--ui-copy) !important;
}

body .header .brand small,
body .header .status {
  color: var(--ui-subcopy) !important;
}

/* شريط التنقل نفسه شفاف، والأزرار فقط تحمل حالة النمط */
body .dock {
  border-color: transparent !important;
  padding: 4px !important;
}

body .dock button {
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--ui-subcopy) !important;
  box-shadow: none !important;
}

body .dock button:hover,
body .dock button.active {
  color: var(--ui-active-ink) !important;
  background: var(--ui-active) !important;
  border-color: var(--ui-active) !important;
  box-shadow: 0 10px 22px var(--ui-shadow) !important;
}

/* جميع الأسطح المشتركة */
body .style-option,
body .about-values span,
body .about-certification,
body .faq-category,
body .category,
body .contact-details a,
body .faq-screen-item,
body .faq-item,
body .contact-card,
body .project-modal-card,
body #services .face {
  color: var(--ui-copy) !important;
  background: linear-gradient(145deg, var(--ui-surface-soft), var(--ui-surface-main)) !important;
  border-color: var(--ui-edge) !important;
  box-shadow: 0 16px 34px var(--ui-shadow), inset 0 1px rgba(255,255,255,.1) !important;
}

body .style-option b,
body .about-values b,
body .faq-category b,
body .category b,
body .faq-screen-item summary,
body .faq-item summary,
body .project-info h3,
body #services .face h3,
body .contact-details b {
  color: var(--ui-copy) !important;
}

body .style-option small,
body .about-values span,
body .faq-screen-item p,
body .faq-answer,
body .project-modal-copy p,
body .contact-details small,
body #services .face p,
body .lead,
body .contact-copy p {
  color: var(--ui-subcopy) !important;
}

/* حالة التفاعل مشتركة في النمطين */
body .style-option:hover,
body .style-option.active,
body .faq-category:hover,
body .faq-category.active,
body .category:hover,
body .category.active,
body #services .flip:hover .face,
body .about-values span:hover,
body .project:hover,
body .faq-screen-item:hover,
body .faq-screen-item[open],
body .faq-item:hover,
body .faq-item[open],
body .contact-details a:hover {
  border-color: var(--ui-active) !important;
  background: linear-gradient(145deg, var(--ui-surface-soft), var(--ui-surface-main)) !important;
}

body .style-option.active,
body .faq-category.active,
body .category.active {
  color: var(--ui-active-ink) !important;
  background: var(--ui-active) !important;
}

body .style-option.active b,
body .faq-category.active b,
body .category.active b {
  color: var(--ui-active-ink) !important;
}

/* من نحن: الصورة والاعتماد والختم يتبعون اللوحة */
body #about .about-image img {
  border-color: var(--ui-edge) !important;
  box-shadow: 0 24px 60px var(--ui-shadow) !important;
}

body #about .about-stamp,
body #about .about-certification {
  color: var(--ui-copy) !important;
  background: linear-gradient(145deg, var(--ui-surface-soft), var(--ui-surface-main)) !important;
  border-color: var(--ui-edge) !important;
}

body #about .about-stamp strong,
body #about .about-certification strong {
  color: var(--ui-active) !important;
}

/* استعراض المشروع والنافذة المنبثقة */
body #projects .project::after {
  background: linear-gradient(transparent, var(--ui-page-start)) !important;
}

body .project-modal-backdrop {
  background: color-mix(in srgb, var(--ui-page-start) 84%, transparent) !important;
}

body .project-modal-close {
  color: var(--ui-copy) !important;
  background: var(--ui-surface-main) !important;
  border-color: var(--ui-edge) !important;
}

/* الأسئلة */
body .faq-screen-item summary::before,
body .faq-item summary::before {
  color: var(--ui-active) !important;
  border-color: var(--ui-edge) !important;
}

body .faq-screen-item[open] summary::before,
body .faq-item[open] summary::before {
  color: var(--ui-active-ink) !important;
  background: var(--ui-active) !important;
}

/* التواصل والحقول والخريطة */
body .field input,
body .field textarea {
  color: var(--ui-copy) !important;
  background: color-mix(in srgb, var(--ui-page-start) 84%, transparent) !important;
  border-color: var(--ui-edge) !important;
}

body .field input::placeholder,
body .field textarea::placeholder {
  color: var(--ui-subcopy) !important;
}

body .contact-icon,
body .wa-icon,
body .contact-map,
body .contact-map iframe {
  border-color: var(--ui-edge) !important;
  color: var(--ui-active) !important;
}

body .btn.primary,
body .faq-note a {
  color: var(--ui-active-ink) !important;
  background: var(--ui-active) !important;
  border-color: var(--ui-active) !important;
}

/* الرسومات والانتقالات واللودر */
body .hero-art path,
body .hero-art rect,
body .hero-art line,
body .hero-art circle,
body .geo-background,
body .orb,
body .transition-plan path,
body .transition-plan rect,
body .transition-plan line {
  stroke: var(--ui-active) !important;
  border-color: var(--ui-edge) !important;
}

body .hero-art .fine,
body .hero-art text,
body .transition-plan .fine {
  stroke: var(--ui-subcopy) !important;
  fill: var(--ui-subcopy) !important;
}

body .page-transition,
body .theme-switch-loader,
body .loader {
  color: var(--ui-copy) !important;
  background: linear-gradient(135deg, var(--ui-page-start), var(--ui-page-end)) !important;
}

@supports not (background: color-mix(in srgb, black, white)) {
  body .field input,
  body .field textarea { background: var(--ui-page-start) !important; }
  body .project-modal-backdrop { background: rgba(6, 16, 30, .86) !important; }
}