/* =====================================================================
   theme-ui — تلميع مكوّنات النواة (النافذة F)
   يعيد تنسيق أصناف موجودة فقط؛ لا يغيّر أي HTML.
   يتجاوز التدرّجات البنفسجية في app.css بألوان مسطّحة.
   ===================================================================== */

/* ===== الهيدر ===== */
.site-header {
    background: color-mix(in srgb, var(--bg-elev) 92%, transparent);
    border-bottom-color: var(--border);
}
.brand {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: var(--text);
    font-weight: 800;
    letter-spacing: -.02em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.brand::before {
    content: '';
    width: 10px; height: 10px;
    border-radius: 3px;
    background: var(--primary);
    box-shadow: 4px 4px 0 var(--accent);
    flex: none;
}
.main-nav a { font-weight: 600; padding: 6px 2px; border-bottom: 2px solid transparent; }
.main-nav a:hover { color: var(--text); border-bottom-color: var(--primary); }

.lang-switch { background: var(--surface-2); border-color: var(--border); }
.lang-switch a { transition: background .15s, color .15s; }
.lang-switch a:hover { color: var(--text); }
.lang-switch a.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }

/* زرّ الثيم: يخفي رمز ◐ النصّي ويرسم أيقونة SVG بقناع (لا إيموجي في الواجهة) */
.theme-btn { background: var(--surface-2); border-color: var(--border); color: var(--text-dim); }
.theme-btn:hover { color: var(--primary); border-color: var(--primary); }
.theme-btn .theme-ico { font-size: 0; line-height: 0; }
.theme-btn .theme-ico::before {
    content: '';
    display: block;
    width: 18px; height: 18px;
    background: currentColor;
    -webkit-mask: var(--ico-theme) center / contain no-repeat;
            mask: var(--ico-theme) center / contain no-repeat;
}
:root {
    --ico-theme: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4.5'/%3E%3Cpath d='M12 2.5v2M12 19.5v2M4.6 4.6l1.4 1.4M18 18l1.4 1.4M2.5 12h2M19.5 12h2M4.6 19.4 6 18M18 6l1.4-1.4'/%3E%3C/svg%3E");
}
:root[data-theme="dark"], :root[data-theme="night"] {
    --ico-theme: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 14.5A8.5 8.5 0 0 1 9.5 3.5a8.5 8.5 0 1 0 11 11z'/%3E%3C/svg%3E");
}

/* ===== الأزرار: مسطّحة ===== */
.btn { border-radius: var(--radius-sm); font-weight: 700; transition: background .15s, border-color .15s, color .15s, transform .15s; }
.btn-primary {
    background: var(--primary);
    color: var(--primary-ct);
    border-color: var(--primary);
}
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); filter: none; transform: translateY(-1px); }
.btn-primary:active { transform: none; }
.btn-ghost { background: var(--surface); border-color: var(--border-strong); }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--primary); color: var(--text); }

/* ===== الهيرو والميزات في الرئيسية ===== */
.hero::before {
    background: radial-gradient(55% 60% at 50% 0, color-mix(in srgb, var(--primary) 14%, transparent), transparent 72%);
}
.hero h1 { font-weight: 800; letter-spacing: -.02em; }
[dir="rtl"] .hero h1 { letter-spacing: 0; }

.feature-card { box-shadow: none; border-radius: var(--radius); }
.feature-card:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: var(--shadow); }

/* أيقونات الميزات: نخفي حرف الإيموجي ونرسم SVG بقناع، بالترتيب (سرعة · سعر · دعم) */
.feature-card .ico {
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 0;
    line-height: 0;
}
.feature-card .ico::before {
    content: '';
    width: 24px; height: 24px;
    background: currentColor;
    -webkit-mask: var(--ico-f, none) center / contain no-repeat;
            mask: var(--ico-f, none) center / contain no-repeat;
}
.feature-card:nth-child(3n+1) .ico { --ico-f: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2.5 4.5 13.5H11l-1 8 8.5-11H12z'/%3E%3C/svg%3E"); }
.feature-card:nth-child(3n+2) .ico { --ico-f: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E"); }
.feature-card:nth-child(3n+3) .ico { --ico-f: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 19.5 6v5.5c0 4.5-3.2 8-7.5 9.5-4.3-1.5-7.5-5-7.5-9.5V6z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }

/* ===== النماذج ===== */
.auth-card { box-shadow: var(--shadow); border-radius: var(--radius-lg); }
.auth-card input { background: var(--surface); border-color: var(--border-strong); border-radius: var(--radius-sm); }
.auth-card input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
.auth-alt a:hover { text-decoration: underline; }

/* ===== جدول الخدمات (وحدة services): خطّ القسم مسطّح ===== */
.svc-group h2::before { background: var(--primary); }

/* ===== الفوتر ===== */
.site-footer { background: var(--bg-elev); }

/* ===== لوحة السيو (داخل غلاف أدمن النافذة D) ===== */
.seo-adm-links { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.seo-adm-links a { color: var(--primary); font-weight: 600; }
.seo-adm-danger { background: color-mix(in srgb, var(--danger) 14%, transparent); border-color: var(--danger); color: var(--danger); }
.seo-adm-warn {
    margin: 8px 0 16px; padding: 12px 14px;
    border: 1px dashed color-mix(in srgb, var(--danger) 55%, var(--border));
    border-radius: var(--radius-sm);
}
.seo-adm-lang legend { font-weight: 800; padding: 0 6px; }
/* معاينة نتيجة البحث: ألوان محايدة ثابتة كما تظهر فعلاً */
.seo-serp {
    display: grid; gap: 2px; max-width: 600px;
    padding: 12px 14px; margin: 0 0 14px;
    background: var(--surface-2); border-radius: var(--radius-sm);
    font-family: Arial, 'Cairo', sans-serif;
}
.seo-serp-url { font-size: .8rem; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; }
.seo-serp-title { font-size: 1.1rem; color: var(--primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seo-serp-desc { font-size: .88rem; color: var(--text-dim); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }