/* ══════════ صفحات الدخول — راصد ══════════
   مبدأ التصميم: لا شعار أبيض في أي صفحة.
   كل أرضية يقع تحتها شعار فاتحةٌ عمداً، فيظهر الشعار الأصلي الملوّن
   كما صُمِّم. اللون يأتي من الأزرار والتفاصيل والحدّ، لا من مساحة
   داكنة تُجبرنا على تبييض الشعار. */

:root {
    --ra-teal: #12524B;
    --ra-teal-2: #1A6B62;
    --ra-gold: #C29455;
    --ra-ink: #16211F;
    --ra-ink-2: #566461;
    --ra-ink-3: #8B9A96;
    --ra-line: #E2EAE8;
    --ra-tint: #EFF5F3;
}

.ra-auth {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 100vh;
    width: 100%;
    background: #fff;
    color: var(--ra-ink);
}

@media (min-width: 1024px) {
    .ra-auth { grid-template-columns: 1.05fr 1fr; }
}

/* ── لوحة الهوية ── */

.ra-side {
    display: none;
    position: relative;
    overflow: hidden;
    order: 2;
    padding: 3.5rem 3rem;
    align-items: center;

    /* لمسة لون خفيفة جداً — تكفي لتمييز اللوحة ولا تُعتم الشعار */
    background:
        radial-gradient(120% 95% at 88% 4%, rgba(194, 148, 85, .13), transparent 55%),
        radial-gradient(105% 80% at 8% 96%, rgba(18, 82, 75, .09), transparent 58%),
        var(--ra-tint);
    border-inline-start: 1px solid var(--ra-line);
}

@media (min-width: 1024px) {
    .ra-side { display: flex; }
}

/* الشريط الذهبي: يحمل هوية راصد بلا أن يمسّ الشعار */
.ra-side::before {
    content: '';
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--ra-teal) 0%, var(--ra-gold) 100%);
}

.ra-side::after {
    content: '';
    position: absolute;
    inset-inline-end: -170px;
    bottom: -200px;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    border: 68px solid rgba(18, 82, 75, .045);
    pointer-events: none;
}

.ra-side__in { position: relative; z-index: 1; width: 100%; }

/* الشعار الأصلي بحجمه الكامل — بلا إطار ولا مرشّح */
.ra-side__logo {
    display: block;
    width: auto;
    max-width: 320px;
    max-height: 200px;
    object-fit: contain;
}

/* وأرضيةٌ فاتحة تحت الحبر الداكن — في الوضع الليلي وحده.

   الشعاراتُ تُرسَم لورقٍ أبيض: حبرٌ داكن وذهب. فإذا وقعت على صفحةٍ
   شبه سوداء قُرئت مربّعاً معتماً لا شعاراً، ويظنّ صاحبُها أن ملفّه
   ليس شفافاً — والملفُّ شفافٌ تماماً، إنما وُضع على أرضيةٍ لم
   يُرسَم لها. */
.ra-side__plate,
.ra-card__plate { display: block; }

@media (prefers-color-scheme: dark) {
    .ra-side__plate,
    .ra-card__plate {
        /* عرضٌ بقدر ما فيه، ثم يُوسَّط — و`inline-block` لا يُوسّطه
           هامشٌ تلقائي، فيقف حيث انتهى السطر. */
        display: block;
        width: fit-content;
        padding: .85rem 1.1rem;
        border-radius: 20px;
        background: #FFFFFF;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .28), 0 14px 30px -22px rgba(0, 0, 0, .8);
    }

    .ra-card__plate { margin: 0 auto 2.25rem; }
    .ra-card__plate .ra-card__logo { margin: 0; }
}

.ra-side__h {
    margin: 2.4rem 0 0;
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.6;
    letter-spacing: -.02em;
    max-width: 20ch;
    text-wrap: balance;
}

.ra-side__p {
    margin: .85rem 0 0;
    font-size: .94rem;
    line-height: 2;
    color: var(--ra-ink-2);
    max-width: 42ch;
}

.ra-side__list {
    margin: 2.4rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: .8rem;
    font-size: .88rem;
    color: var(--ra-ink-2);
}

.ra-side__list li { display: flex; align-items: center; gap: .7rem; }

.ra-side__list span {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #fff;
    border: 1px solid var(--ra-line);
    color: var(--ra-teal);
    font-size: .85rem;
}

.ra-side__by {
    margin-top: 2.6rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--ra-line);
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .8rem;
    color: var(--ra-ink-3);
}

.ra-side__by img { width: 20px; height: 20px; object-fit: contain; flex: 0 0 auto; }
.ra-side__by b { color: var(--ra-ink-2); font-weight: 800; }

/* ── لوحة النموذج ── */

.ra-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2.5rem 1.5rem;
    order: 1;
    background: #fff;
}

@media (min-width: 1024px) {
    .ra-main { padding: 3rem 2.5rem; }
}

.ra-card { width: 100%; max-width: 26rem; }

/* علامةُ البطاقة للجوال فقط — على الشاشة الكبيرة هي في لوحة الهوية.

   ومربّعةٌ لا شعارٌ كامل: الكاملُ يُصغَّر أربع عشرة مرّةً فيصير سطرُ
   تعريفه لطخةً لا تُقرأ. */
.ra-card__logo {
    display: block;
    width: auto;
    max-width: 92px;
    max-height: 92px;
    object-fit: contain;
    margin: 0 auto 2.25rem;
}

@media (min-width: 1024px) {
    .ra-card__logo,
    .ra-card__plate { display: none; }
}

/* ── نموذج الدخول ── */

.rased-title {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -.015em;
    line-height: 1.5;
}

.rased-sub {
    margin: .5rem 0 2rem;
    font-size: .92rem;
    line-height: 1.9;
    color: var(--ra-ink-2);
}

.rased-form-wrap { display: block; }

.rased-foot {
    margin-top: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-size: .78rem;
    color: var(--ra-ink-3);
}

.rased-foot img { width: 18px; height: 18px; object-fit: contain; flex: 0 0 auto; }

/* لا يُكرَّر توقيع راصد مرتين على الشاشة الواحدة */
@media (min-width: 1024px) {
    .rased-foot { display: none; }
}

/* ── الوضع الداكن ──
   لوحة الهوية تبقى فاتحة عمداً: قلبُها إلى داكن يعيدنا إلى الشعار
   الأبيض، وهو ما أُلغي. النموذج وحده يتبع الوضع الداكن. */

.dark .ra-auth,
.dark .ra-main { background: #101A18; color: #E8EFED; }
.dark .rased-sub { color: #9FAEAA; }
.dark .rased-foot { color: #6B7A76; }
.dark .ra-side { border-inline-start-color: #24332F; }