:root {
    /* الوضع الفاتح */
    --main-bg: #FAF7FF;
    --navbar-bg: #F3EAFA;
    --box-bg: #E6D6FA;
    --primary: #DB88FF;
    --primary-light: #F3EAFA;
    --primary-bold: #FB3FFF;
    --txt-main: #2D0140;
    --txt-muted: #847097;
    --btn-main-bg: #FB3FFF;
    --btn-main-txt: #fff;
    --btn-sec-bg: #fff;
    --btn-sec-txt: #DB88FF;
    --footer-bg: #2D0140;
    --footer-txt: #F3EAFA;

    /* ألوان إضافية للوضع الفاتح */
    --light-bg: #FAF7FF;
    --light-secondary: #F3EAFA;
    --light-primary: #DB88FF;
    --light-accent: #C463FF;
    --light-highlight: #FB3FFF;
    --light-text: #2D0140;
    --light-text-secondary: #847097;
    --light-border: #E6D6FA;
    --light-card: #FFFFFF;
    --light-shadow: rgba(219, 136, 255, 0.1);
}

/* الوضع الداكن */
body.dark {
    --main-bg: #181b22;
    --navbar-bg: #23263c;
    --box-bg: #1a1c24;
    --primary: #A305A6;
    --primary-light: #23263c;
    --primary-bold: #FB3FFF;
    --txt-main: #FFFFFF;
    --txt-muted: #CCCCCC;
    --btn-main-bg: #A305A6;
    --btn-main-txt: #fff;
    --btn-sec-bg: #23263c;
    --btn-sec-txt: #FB3FFF;
    --footer-bg: #23263c;
    --footer-txt: #e4efb3;

    /* ألوان إضافية للوضع الداكن */
    --dark-bg: #181b22;
    --dark-secondary: #23263c;
    --dark-primary: #A305A6;
    --dark-accent: #FB3FFF;
    --dark-highlight: #FB3FFF;
    --dark-text: #FFFFFF;
    --dark-text-secondary: #CCCCCC;
    --dark-border: #2D0140;
    --dark-card: #23263c;
    --dark-shadow: rgba(0, 0, 0, 0.3);
}

body {
    background: var(--main-bg);
    color: var(--txt-main);
}

.navbar-ein {
    background: var(--navbar-bg);
}

.navbar-ein {
    background: var(--navbar-bg);
    direction: ltr;
    background: var(--navbar-bg);
    border-bottom: 2px solid var(--primary);
    min-height: 62px;
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.ein-brand-side {
    /* direction: ltr; */
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 210px;
    padding-right: 100px;
}

.ein-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #fff;
    border: 2.5px solid var(--primary-light);
    object-fit: cover;
}

.ein-logo-text {
    font-size: 2.5rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    letter-spacing: -1.5px;
    color: var(--primary-bold);
    text-decoration: underline 2px white;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.ein-logo-text .ein-highlight {
    color: white;
    text-decoration: underline 2px var(--primary-bold);
    margin-left: 2px;
    margin-right: 2px;
    font-weight: 900;
}

.ein-btns-side {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-left: 10px;
}

.ein-create-btn {
    background: var(--primary-light);
    color: var(--primary-bold) !important;
    border-radius: 7px;
    border: none;
    font-weight: 700;
    font-size: 1.04rem;
    padding: 7px 18px 7px 18px;
    display: flex;
    align-items: center;
    gap: 7px;
    box-shadow: none;
    transition: background 0.13s;
}

.ein-create-btn i {
    color: var(--primary-bold);
    font-size: 1.13em;
    margin-left: 5px;
}

.ein-create-btn:hover {
    background: var(--primary);
}

.ein-login-btn {
    background: #fff;
    color: var(--primary) !important;
    border: 2px solid transparent;
    border-radius: 7px;
    font-size: 1.04rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 3px;
    box-shadow: none;
    padding: 7px 19px;
    transition: border 0.16s, background 0.13s, color 0.14s;
    text-decoration: none;
}

.ein-login-btn i {
    color: var(--primary);
    font-size: 1.13em;
    margin-left: 2px;
}

.ein-login-btn:hover,
.ein-login-btn:focus {
    border: 2px solid var(--primary);
    background: var(--primary-light);
    color: var(--primary-bold) !important;
}

@media (max-width: 991px) {
    .ein-container {
        padding: 0 10px;
        position: relative;
        height: 10px;
    }

    .ein-brand-side {
        padding-left: 100px;
        position: absolute;
        right: 53%;
        top: 50%;
        transform: translate(50%, -50%);
        left: unset;
        margin: 0 !important;
    }

    .nav-right {
        top: 45%;
        padding-left: 300px;
        margin-top: -15px;
        margin-bottom: -20px;
        padding-bottom: 30px;
    }


    .navt .ein-mode-switch {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .navbar-toggler {
        border: none;
        order: 1;
        margin-right: 3px;
        /* margin-bottom: 5px; */
    }

    .ein-btns-side {
        width: 100%;
        gap: 10px;
        margin-top: 10px;
        flex-direction: column !important;
        align-items: flex-start !important;
    }
}


@media (min-width: 992px) {
    .navbar-toggler {
        display: none !important;
    }

    .ein-brand-side {
        position: static;
        transform: none;
        margin: 0;
    }
}

@media (max-width: 768px) {
    .ein-logo-text {
        font-size: 2.0rem;
        /* ← حجم أصغر للموبايل */
    }
}