@charset "UTF-8";
/* ════════════════════════════════════════════════════════════════════════════
 * 106-auth-alula.css — قشرة «العلا» لصفحتي الدخول/التسجيل (إضافية · آخر طبقة · قابلة للحذف)
 * ────────────────────────────────────────────────────────────────────────────
 * 🏜️ [العلا للبوّابة 2026-07-01]
 * تحوّل صفحتي #page-login / #page-register من البنفسجي إلى العلا الذهبي (لأنهما
 * نقطة الدخول الأساسية، تطابق الثيم الافتراضي الجديد). الـauth مقفلة على مظهرها
 * الخاص (95-cinematic-auth + 99-theme-isolation) بمعزل عن data-theme ⇒ نتجاوزها هنا.
 *
 * تُحمَّل بعد 95-cinematic-auth و99-theme-isolation و105 (آخر طبقة) فتتغلّب بالترتيب.
 * ما يشتقّ من --primary (عنوان البطاقة/تركيز الحقول) يتلوّن تلقائياً؛ ونتجاوز صراحةً
 * ما كُتب بلون بنفسجي حرفي (البطاقة/الشعار/الحقول/الزر) بـ !important لتخطّي قواعد 95.
 *
 * المسارات نسبية لمجلد هذا الملف (assets/css/) ⇒ «../cinematic/…».
 * للإزالة: احذف هذا الـ link + الملف ⇒ ترجع صفحات الدخول بنفسجية.
 * ════════════════════════════════════════════════════════════════════════════ */

/* ─── (1) توكنات العلا للـauth (تتغلّب على 95-cinematic-auth + 99-theme-isolation) ─── */
body:has(#page-login.active),
body:has(#page-register.active),
body.is-auth-screen {
  --primary:        #e0a85b;
  --primary-hover:  #c8893b;
  --primary-light:  #f0c07e;
  --bg-page:        #0e0a05;
  --bg-card:        #1d150d;
  --bg-input:       rgba(36, 26, 16, 0.62);
  --bg-input-focus: rgba(46, 33, 20, 0.82);
  --text-primary:   #f4ecdd;
  --text-secondary: #cbb89a;
  --text-muted:     #8c7a62;
  --border-color:   rgba(224, 168, 91, 0.16);
  --glow:           0 0 0 4px rgba(224, 168, 91, 0.18);
  --hu-halo:        rgba(224, 168, 91, 0.22);
  background: #0e0a05 !important;
}

/* ─── (2) خلفية العلا بدل المعبد (.h-auth-cosmos ترث .cine-cosmos) ─── */
.h-auth-cosmos,
.cine-cosmos {
  background-color: #0e0a05 !important;
  background-image:
    image-set(url("../cinematic/cosmos-alula-wide.webp") type("image/webp"),
              url("../cinematic/cosmos-alula-wide.jpg")  type("image/jpeg")) !important;
}
@media (orientation: portrait) {
  .h-auth-cosmos,
  .cine-cosmos {
    background-image:
      image-set(url("../cinematic/cosmos-alula-tall.webp") type("image/webp"),
                url("../cinematic/cosmos-alula-tall.jpg")  type("image/jpeg")) !important;
  }
}
.cine-aurora {
  background: radial-gradient(58% 80% at 50% 100%, rgba(224,168,91,0.22), transparent 70%) !important;
}

/* ─── (3) البطاقة — كانت كحلية بحدّ بنفسجي ⇒ دافئة بحدّ عنبري ─── */
#page-login.active,
#page-register.active {
  background: linear-gradient(180deg, rgba(29, 21, 13, 0.90), rgba(14, 10, 5, 0.94)) !important;
  border-color: rgba(224, 168, 91, 0.18) !important;
  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(224, 168, 91, 0.05) !important;
}
#page-login.active::before,
#page-register.active::before {
  background: linear-gradient(90deg, transparent, rgba(240, 192, 126, 0.55), transparent) !important;
}
#page-login.active .auth-back-link,
#page-register.active .auth-back-link {
  border-color: rgba(224, 168, 91, 0.16) !important;
}

/* ─── (4) هالة/ظل الشعار البطل ─── */
.auth-logo-stage::before {
  background: radial-gradient(closest-side,
    rgba(240, 192, 126, 0.22) 0%,
    rgba(224, 168, 91, 0.08) 50%,
    transparent 72%) !important;
}
.auth-logo-stage .auth-logo {
  filter:
    drop-shadow(0 6px 16px rgba(0, 0, 0, 0.45))
    drop-shadow(0 0 18px rgba(240, 192, 126, 0.35)) !important;
}

/* ─── (5) الحقول + الأزرار — حدّ/توهّج عنبري ─── */
#page-login.active .h-input,
#page-register.active .h-input {
  border-color: rgba(224, 168, 91, 0.18) !important;
}
#page-login.active .h-input:hover,
#page-register.active .h-input:hover {
  border-color: rgba(240, 192, 126, 0.4) !important;
}
#page-login.active .h-input:focus,
#page-register.active .h-input:focus {
  box-shadow: 0 0 0 4px rgba(224, 168, 91, 0.18), 0 0 26px -8px rgba(240, 192, 126, 0.6) !important;
}
#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(224, 168, 91, 0.45),
    0 0 0 1px rgba(240, 192, 126, 0.22) !important;
}