+
* غلاف
(يبقى span.h-logo.auth-logo كما هو).
* ════════════════════════════════════════════════════════════════════════════ */
/* ─── (1) خلفية المعبد الثابتة — تظهر فقط على صفحتي الدخول/التسجيل ──────────────── */
.h-auth-cosmos {
position: fixed !important;
inset: 0;
z-index: 0 !important; /* خلف المحتوى (body > * = z-index:1 عبر h-upgrade) */
display: none;
}
body:has(#page-login.active) .h-auth-cosmos,
body:has(#page-register.active) .h-auth-cosmos { display: block; }
/* غمر/scrim إضافي يعمّق القراءة خلف النموذج (::after = آخر طبقة فوق النجوم/الأورورا،
أغمق من اللاندنق). نُعمّق المركز قليلاً لتهدئة عمود النور خلف البطاقة. */
.h-auth-cosmos::after {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(62% 72% at 50% 48%, rgba(3,6,14,0.74), transparent 72%),
linear-gradient(180deg, rgba(6,9,18,0.58), rgba(6,9,18,0.30) 30%, rgba(6,9,18,0.68));
}
/* ─── (2) تثبيت اللوحة السينمائية أثناء الدخول/التسجيل مهما كان الثيم المحفوظ ────── */
body:has(#page-login.active),
body:has(#page-register.active) {
--primary: #a855f7;
--primary-hover: #9333ea;
--primary-light: #c084fc;
--bg-page: #0c0618;
--bg-card: #1a1030;
--bg-input: rgba(26, 16, 48, 0.62);
--bg-input-focus: rgba(38, 24, 64, 0.82);
--text-primary: #f3e9ff;
--text-secondary: #c4b3da;
--text-muted: #8576a0;
--border-color: rgba(168, 85, 247, 0.16);
--glow: 0 0 0 4px rgba(168, 85, 247, 0.18);
--hu-halo: rgba(168, 85, 247, 0.22);
background: #0c0618 !important;
}
/* ─── (3) لا مبدّل ثيم + لا بانر دعم عائم في الصفحات العامة (يبقيان بعد الدخول) ──── */
body:has(#page-login.active) #themeToggleBtn,
body:has(#page-register.active) #themeToggleBtn { display: none !important; }
/* البانر العائم زائد على شاشتي auth (الدعم متاح في الـnav وأسفل البطاقة) ⇒ نخفيه
بصرياً فقط عبر :has دون لمس closeBanner()؛ يعود في الداشبورد طبيعياً. */
body:has(#page-login.active) #supportBanner,
body:has(#page-register.active) #supportBanner { display: none !important; }
/* ─── (4) البطاقة الزجاجية — توأم لزجاج اللاندنق، متمركزة وأنيقة ───────────────── */
#page-login.active,
#page-register.active {
position: relative;
z-index: 1;
max-width: 468px;
margin: clamp(14px, 5vh, 54px) auto;
padding: clamp(18px, 3vw, 30px) clamp(16px, 3vw, 30px) clamp(20px, 3vw, 28px);
border-radius: 22px;
/* تعتيم أعلى (قيم أكثف من اللاندنق) لأنها فوق عمود النور المركزي ⇒ وضوح الحقول */
background:
linear-gradient(180deg, rgba(18, 28, 46, 0.90), rgba(8, 13, 24, 0.94));
border: 1px solid rgba(168, 85, 247, 0.18);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.05),
0 30px 70px -28px rgba(0, 0, 0, 0.72),
0 0 0 1px rgba(168, 85, 247, 0.05);
backdrop-filter: blur(16px) saturate(1.05);
-webkit-backdrop-filter: blur(16px) saturate(1.05);
}
/* خيط ضوء علوي شعري على حافّة البطاقة (بنفسجي فاتح) */
#page-login.active::before,
#page-register.active::before {
content: "";
position: absolute;
top: 0; left: 18%; right: 18%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(192, 132, 252, 0.55), transparent);
pointer-events: none;
}
/* رابط «الواجهة الرئيسية» داخل البطاقة — زجاج خفيف */
#page-login.active .auth-back-link,
#page-register.active .auth-back-link {
border-radius: 12px;
border: 1px solid rgba(168, 85, 247, 0.16);
background: rgba(255, 255, 255, 0.03);
padding: 8px 14px;
}
/* ─── (5) الشعار بطل النموذج — غلاف .auth-logo-stage (هالة بنفسجية هادئة) ─────── */
.auth-logo-stage {
position: relative;
display: inline-grid;
place-items: center;
isolation: isolate;
}
/* هالة بنفسجية ناعمة */
.auth-logo-stage::before {
content: "";
position: absolute;
inset: -32%;
border-radius: 50%;
background: radial-gradient(closest-side,
rgba(192, 132, 252, 0.22) 0%,
rgba(168, 85, 247, 0.08) 50%,
transparent 72%);
z-index: -1;
pointer-events: none;
}
/* الشعار نفسه (.h-logo المقنّع): ظلّ بنفسجي خفيف */
.auth-logo-stage .auth-logo {
position: relative;
z-index: 1;
filter:
drop-shadow(0 6px 16px rgba(0, 0, 0, 0.45))
drop-shadow(0 0 18px rgba(192, 132, 252, 0.35));
}
/* العنوان «تسجيل الدخول/سوي حساب جديد» — أوضح فوق الزجاج */
body:has(#page-login.active) #page-login h3,
body:has(#page-register.active) #page-register h3 {
background: linear-gradient(180deg, #ffffff, color-mix(in oklab, #ffffff 62%, var(--primary)));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* ─── (6) الحقول والأزرار — زجاج داكن، حدّ بنفسجي رفيع، توهّج عند التركيز ─────────── */
#page-login.active .h-input,
#page-register.active .h-input {
background:
linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0) 60%),
var(--bg-input);
border: 1.5px solid rgba(168, 85, 247, 0.18);
color: #eaf2ff;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
}
#page-login.active .h-input::placeholder,
#page-register.active .h-input::placeholder { color: #67768c; }
#page-login.active .h-input:hover,
#page-register.active .h-input:hover { border-color: rgba(192, 132, 252, 0.4); }
#page-login.active .h-input:focus,
#page-register.active .h-input:focus {
border-color: var(--primary);
background: var(--bg-input-focus);
box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.18), 0 0 26px -8px rgba(192, 132, 252, 0.6);
}
#page-login.active .h-btn,
#page-register.active .h-btn {
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.22),
inset 0 -1px 0 rgba(0,0,0,0.10),
0 12px 28px -10px rgba(168, 85, 247, 0.45),
0 0 0 1px rgba(192, 132, 252, 0.22);
}
/* رابط الدعم (تلجرام) أسفل البطاقة — زجاج خفيف متّسق */
#page-login.active a[target="_blank"],
#page-register.active a[target="_blank"] {
background: rgba(255, 255, 255, 0.03);
border-radius: 14px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
/* ─── (7) تقليل الحركة — لا حركات على الشعار، الكتلة محفوظة احتياطاً ────────────── */
@media (prefers-reduced-motion: reduce) {
.auth-logo-stage::before,
.auth-logo-stage .auth-logo { animation: none !important; }
}