:root {

    --page:
        #f7f8fb;

    --page-warm:
        #fffaf0;

    --surface:
        #ffffff;

    --surface-soft:
        #f5f7fa;

    --surface-warm:
        #fff9ec;

    --sidebar:
        #f0f4f8;

    --border:
        #dfe5ec;

    --border-strong:
        #cbd5df;

    --navy:
        #14243b;

    --navy-soft:
        #33465f;

    --text:
        #172234;

    --muted:
        #6f7c8d;

    --gold:
        #d99a20;

    --gold-dark:
        #b87800;

    --gold-light:
        #ffd979;

    --gold-pale:
        #fff3cf;

    --blue:
        #3d72a9;

    --blue-soft:
        #e9f2fb;

    --green:
        #16845b;

    --danger:
        #c84545;

    --shadow:
        0 24px 70px
        rgba(37,55,77,.12);

    --shadow-small:
        0 8px 25px
        rgba(37,55,77,.08);

    --sidebar-width:
        292px;

}


/* ==========================================================
   RESET
========================================================== */

* {
    box-sizing: border-box;
}


html,
body {

    margin: 0;

    width: 100%;

    min-height: 100%;

    background:
        var(--page);

    color:
        var(--text);

}


html[lang="ar"] body {

    font-family:
        "Noto Sans Arabic",
        Tahoma,
        Arial,
        sans-serif;

}


html[lang="en"] body {

    font-family:
        "Inter",
        "Segoe UI",
        Arial,
        sans-serif;

}


button,
input,
textarea,
select {

    font: inherit;

}


button {

    cursor: pointer;

}


button,
input,
textarea,
select {

    -webkit-tap-highlight-color:
        transparent;

}


.hidden {

    display:
        none !important;

}


/* ==========================================================
   AUTH LAYOUT
========================================================== */

.auth-screen {

    min-height:
        100vh;

    display:
        grid;

    grid-template-columns:
        minmax(420px, 1.05fr)
        minmax(500px, .95fr);

    background:
        #f8fafc;

}


/* ==========================================================
   BRAND SIDE
========================================================== */

.auth-brand-panel {

    min-height:
        100vh;

    position:
        relative;

    overflow:
        hidden;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        55px 55px;

    background:

        radial-gradient(
            circle at 50% 20%,
            rgba(255,220,130,.48),
            transparent 28%
        ),

        radial-gradient(
            circle at 15% 80%,
            rgba(113,169,217,.18),
            transparent 34%
        ),

        linear-gradient(
            145deg,
            #fffdf8 0%,
            #f4f7fa 45%,
            #e9f0f7 100%
        );

    border-left:
        1px solid
        rgba(203,213,223,.7);

}


.auth-brand-panel::after {

    content:
        "";

    position:
        absolute;

    inset:
        auto -10% -25% -10%;

    height:
        50%;

    background:

        repeating-linear-gradient(
            -8deg,
            transparent 0,
            transparent 19px,
            rgba(217,154,32,.08) 20px,
            transparent 21px
        );

    transform:
        rotate(-2deg);

    pointer-events:
        none;

}


.brand-decoration {

    position:
        absolute;

    border-radius:
        50%;

    border:
        1px solid
        rgba(217,154,32,.14);

}


.decoration-one {

    width:
        430px;

    height:
        430px;

    top:
        -210px;

    left:
        -150px;

}


.decoration-two {

    width:
        280px;

    height:
        280px;

    bottom:
        -140px;

    right:
        -90px;

}


.brand-content {

    width:
        min(590px, 100%);

    position:
        relative;

    z-index:
        2;

    text-align:
        center;

}


.official-logo-shell {

    width:
        clamp(190px, 25vw, 320px);

    height:
        clamp(190px, 25vw, 320px);

    margin:
        0 auto 12px;

    position:
        relative;

    display:
        grid;

    place-items:
        center;

}


.logo-glow {

    position:
        absolute;

    inset:
        15%;

    border-radius:
        50%;

    background:
        rgba(255,193,70,.32);

    filter:
        blur(45px);

}


.official-logo {

    position:
        relative;

    z-index:
        2;

    width:
        100%;

    height:
        100%;

    object-fit:
        contain;

    filter:
        drop-shadow(
            0 18px 24px
            rgba(41,51,62,.18)
        );

}


.company-name-ar {

    color:
        var(--navy);

    font-size:
        clamp(22px, 2.2vw, 35px);

    font-weight:
        800;

    line-height:
        1.5;

}


.company-name-en {

    margin-top:
        3px;

    color:
        #758295;

    font-family:
        "Inter",
        sans-serif;

    font-size:
        12px;

    font-weight:
        600;

    letter-spacing:
        7px;

}


.brand-divider {

    margin:
        22px auto;

    width:
        210px;

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    color:
        var(--gold-dark);

}


.brand-divider span {

    height:
        1px;

    flex:
        1;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--gold),
            transparent
        );

}


.brand-divider i {

    font-style:
        normal;

    font-size:
        11px;

}


.product-title {

    margin:
        0;

    color:
        var(--navy);

    font-size:
        clamp(30px, 3vw, 47px);

    line-height:
        1.35;

}


.product-title span {

    color:
        var(--gold-dark);

    font-family:
        "Inter",
        sans-serif;

}


.product-description {

    margin:
        3px 0 27px;

    color:
        var(--muted);

    font-size:
        17px;

}


.feature-grid {

    display:
        grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap:
        12px;

    width:
        min(520px, 100%);

    margin:
        auto;

}


.feature-card {

    min-height:
        82px;

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    text-align:
        right;

    padding:
        14px 16px;

    border:
        1px solid
        rgba(255,255,255,.9);

    border-radius:
        18px;

    background:
        rgba(255,255,255,.7);

    box-shadow:
        var(--shadow-small);

    backdrop-filter:
        blur(12px);

}


.feature-icon {

    width:
        42px;

    height:
        42px;

    flex:
        0 0 42px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        13px;

    color:
        var(--gold-dark);

    background:
        var(--gold-pale);

    font-size:
        21px;

    font-weight:
        800;

}


.feature-card strong {

    display:
        block;

    color:
        var(--navy);

    font-size:
        14px;

}


.feature-card small {

    display:
        block;

    margin-top:
        3px;

    color:
        var(--muted);

    font-size:
        11px;

}


/* ==========================================================
   AUTH FORM SIDE
========================================================== */

.auth-form-side {

    min-height:
        100vh;

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        90px 45px 45px;

    background:

        radial-gradient(
            circle at 90% 10%,
            rgba(114,166,216,.14),
            transparent 30%
        ),

        linear-gradient(
            160deg,
            #f5f8fb,
            #edf2f7
        );

}


.auth-language-area {

    position:
        absolute;

    top:
        28px;

    right:
        38px;

}


.language-switch {

    display:
        flex;

    align-items:
        center;

    gap:
        3px;

    padding:
        5px;

    border:
        1px solid
        rgba(255,255,255,.95);

    border-radius:
        999px;

    background:
        rgba(255,255,255,.78);

    box-shadow:
        0 8px 30px
        rgba(37,55,77,.09);

    backdrop-filter:
        blur(15px);

}


.language-globe {

    width:
        34px;

    height:
        34px;

    display:
        grid;

    place-items:
        center;

    color:
        var(--navy-soft);

    font-size:
        19px;

}


.language-option {

    height:
        36px;

    min-width:
        84px;

    border:
        0;

    border-radius:
        999px;

    padding:
        0 16px;

    background:
        transparent;

    color:
        var(--navy-soft);

    font-weight:
        600;

}


.language-option.active {

    color:
        #372600;

    background:
        linear-gradient(
            135deg,
            #ffdc7c,
            #e9a72c
        );

    box-shadow:
        0 6px 18px
        rgba(217,154,32,.22);

}


.auth-card {

    width:
        min(610px, 100%);

    padding:
        clamp(28px, 4vw, 48px);

    border:
        1px solid
        rgba(255,255,255,.95);

    border-radius:
        30px;

    background:
        rgba(255,255,255,.88);

    box-shadow:
        var(--shadow);

    backdrop-filter:
        blur(20px);

}


.mobile-logo {

    display:
        none;

}


.auth-heading {

    text-align:
        center;

    margin-bottom:
        28px;

}


.auth-eyebrow {

    display:
        inline-block;

    margin-bottom:
        6px;

    color:
        var(--gold-dark);

    font-family:
        "Inter",
        sans-serif;

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        3px;

}


.auth-heading h2 {

    margin:
        0;

    color:
        var(--navy);

    font-size:
        clamp(25px, 2.5vw, 34px);

    line-height:
        1.5;

    font-weight:
        800;

}


.auth-heading p {

    margin:
        4px 0 0;

    color:
        var(--muted);

    font-size:
        15px;

}


.auth-tabs {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        5px;

    padding:
        5px;

    margin-bottom:
        27px;

    border:
        1px solid
        var(--border);

    border-radius:
        15px;

    background:
        var(--surface-soft);

}


.auth-tab {

    height:
        47px;

    border:
        0;

    border-radius:
        11px;

    color:
        var(--navy-soft);

    background:
        transparent;

    font-weight:
        700;

}


.auth-tab.active {

    color:
        #302100;

    background:
        linear-gradient(
            135deg,
            #ffdc7b,
            #e8a324
        );

    box-shadow:
        0 5px 18px
        rgba(217,154,32,.18);

}


.field {

    margin-bottom:
        18px;

}


.field label {

    display:
        block;

    margin-bottom:
        7px;

    color:
        var(--navy);

    font-size:
        13px;

    font-weight:
        700;

}


.input-shell {

    min-height:
        54px;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    padding:
        0 14px;

    border:
        1px solid
        var(--border-strong);

    border-radius:
        13px;

    background:
        #fbfcfd;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;

}


.input-shell:focus-within {

    border-color:
        rgba(217,154,32,.75);

    background:
        #fff;

    box-shadow:
        0 0 0 4px
        rgba(217,154,32,.09);

}


.input-icon {

    color:
        #8b97a5;

    font-size:
        17px;

}


.input-shell input {

    min-width:
        0;

    flex:
        1;

    height:
        50px;

    border:
        0;

    outline:
        0;

    background:
        transparent;

    color:
        var(--text);

}


.input-shell input::placeholder {

    color:
        #a1abb6;

}


.password-toggle {

    width:
        34px;

    height:
        34px;

    border:
        0;

    border-radius:
        9px;

    background:
        transparent;

    color:
        #8d98a6;

}


.password-toggle:hover {

    background:
        #eef2f6;

}


.login-options {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    margin:
        -2px 0 14px;

}


.remember-option {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    color:
        var(--navy-soft);

    font-size:
        13px;

}


.remember-option input {

    accent-color:
        var(--gold-dark);

}


.text-button {

    border:
        0;

    background:
        transparent;

    color:
        var(--gold-dark);

    font-size:
        13px;

    font-weight:
        600;

}


.error-message {

    min-height:
        21px;

    color:
        var(--danger);

    font-size:
        12px;

}


.primary-button {

    width:
        100%;

    min-height:
        55px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    border:
        0;

    border-radius:
        14px;

    color:
        #302100;

    background:
        linear-gradient(
            135deg,
            #ffda75,
            #e6a01f
        );

    box-shadow:
        0 10px 25px
        rgba(217,154,32,.22);

    font-weight:
        800;

    font-size:
        16px;

    transition:
        transform .18s ease,
        box-shadow .18s ease;

}


.primary-button:hover {

    transform:
        translateY(-1px);

    box-shadow:
        0 13px 30px
        rgba(217,154,32,.28);

}


.primary-button:disabled {

    opacity:
        .6;

    cursor:
        default;

    transform:
        none;

}


.button-arrow {

    font-size:
        19px;

}


.auth-separator {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    margin:
        23px 0;

}


.auth-separator span {

    height:
        1px;

    flex:
        1;

    background:
        var(--border);

}


.auth-separator em {

    color:
        var(--muted);

    font-size:
        12px;

    font-style:
        normal;

}


.future-login-options {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        11px;

}


.social-button {

    height:
        50px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    border:
        1px solid
        var(--border);

    border-radius:
        13px;

    background:
        #fff;

    color:
        var(--navy);

    font-family:
        "Inter",
        sans-serif;

    font-weight:
        600;

}


.social-button:hover {

    border-color:
        #bcc8d4;

    background:
        #fafbfc;

}


.google-mark {

    color:
        #4285f4;

}


.privacy-note {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        center;

    gap:
        7px;

    margin-top:
        23px;

    color:
        var(--muted);

    font-size:
        11px;

    line-height:
        1.8;

    text-align:
        center;

}


.privacy-lock {

    color:
        var(--gold-dark);

}


/* ==========================================================
   CHAT
========================================================== */

.chat-screen {

    height:
        100vh;

    display:
        flex;

    overflow:
        hidden;

    background:
        var(--page);

}


.sidebar {

    width:
        var(--sidebar-width);

    flex:
        0 0
        var(--sidebar-width);

    display:
        flex;

    flex-direction:
        column;

    padding:
        15px;

    border-left:
        1px solid
        var(--border);

    background:
        linear-gradient(
            180deg,
            #f2f6fa,
            #edf2f7
        );

}


.sidebar-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        4px 2px 16px;

}


.sidebar-brand {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

}


.small-brand-logo-wrap {

    width:
        48px;

    height:
        48px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(217,154,32,.32);

    border-radius:
        14px;

    background:
        #fff;

    box-shadow:
        var(--shadow-small);

}


.small-brand-logo {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

}


.sidebar-brand strong {

    display:
        block;

    color:
        var(--navy);

}


.sidebar-brand small {

    display:
        block;

    margin-top:
        2px;

    color:
        var(--muted);

    font-family:
        "Inter",
        sans-serif;

    font-size:
        8px;

    letter-spacing:
        1.5px;

}


.new-chat-button {

    width:
        100%;

    min-height:
        47px;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    border:
        1px solid
        var(--border);

    border-radius:
        13px;

    padding:
        0 14px;

    color:
        var(--navy);

    background:
        rgba(255,255,255,.8);

    box-shadow:
        0 4px 15px
        rgba(37,55,77,.04);

    font-weight:
        700;

}


.new-chat-button:hover {

    border-color:
        rgba(217,154,32,.4);

    background:
        #fff;

}


.sidebar-label {

    margin:
        22px 8px 8px;

    color:
        var(--muted);

    font-size:
        11px;

    font-weight:
        700;

}


.conversation-list {

    flex:
        1;

    overflow-y:
        auto;

}


.conversation-item {

    width:
        100%;

    margin-bottom:
        3px;

    padding:
        11px;

    border:
        0;

    border-radius:
        10px;

    background:
        transparent;

    color:
        var(--navy-soft);

    text-align:
        right;

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

}


.conversation-item:hover {

    background:
        rgba(255,255,255,.75);

}


.conversation-item.active {

    color:
        var(--navy);

    background:
        #fff;

    box-shadow:
        0 4px 15px
        rgba(37,55,77,.05);

}


.sidebar-footer {

    padding-top:
        12px;

    border-top:
        1px solid
        var(--border);

}


.user-card {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        7px 2px 12px;

}


.avatar {

    width:
        40px;

    height:
        40px;

    flex:
        0 0 40px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        12px;

    color:
        #362500;

    background:
        linear-gradient(
            135deg,
            #ffdd7d,
            #e3a023
        );

    font-weight:
        900;

}


.user-details {

    min-width:
        0;

    flex:
        1;

}


.user-details strong,
.user-details small {

    display:
        block;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

}


.user-details strong {

    color:
        var(--navy);

}


.user-details small {

    margin-top:
        2px;

    color:
        var(--gold-dark);

    font-size:
        10px;

    font-family:
        "Inter",
        sans-serif;

    font-weight:
        700;

}


.logout-button {

    width:
        100%;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    border:
        0;

    padding:
        9px 4px;

    background:
        transparent;

    color:
        var(--muted);

}


.main-chat {

    min-width:
        0;

    flex:
        1;

    display:
        flex;

    flex-direction:
        column;

    background:

        radial-gradient(
            circle at 50% 10%,
            rgba(255,222,138,.12),
            transparent 30%
        ),

        #fbfcfd;

}


.topbar {

    min-height:
        67px;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    padding:
        9px 18px;

    border-bottom:
        1px solid
        var(--border);

    background:
        rgba(255,255,255,.86);

    backdrop-filter:
        blur(14px);

}


.topbar-title {

    flex:
        1;

}


.topbar-title strong {

    display:
        block;

    color:
        var(--navy);

}


.topbar-title span {

    display:
        block;

    margin-top:
        2px;

    color:
        var(--green);

    font-size:
        10px;

}


.topbar-actions {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

}


.topbar select {

    height:
        39px;

    border:
        1px solid
        var(--border);

    border-radius:
        10px;

    padding:
        0 10px;

    outline:
        0;

    color:
        var(--navy);

    background:
        #fff;

}


.chat-language-switch {

    display:
        flex;

    gap:
        2px;

    padding:
        3px;

    border:
        1px solid
        var(--border);

    border-radius:
        999px;

    background:
        #f4f6f8;

}


.chat-language-option {

    height:
        31px;

    border:
        0;

    border-radius:
        999px;

    padding:
        0 11px;

    color:
        var(--muted);

    background:
        transparent;

    font-size:
        11px;

}


.chat-language-option.active {

    color:
        #372600;

    background:
        #f4c459;

    font-weight:
        700;

}


.messages {

    flex:
        1;

    overflow-y:
        auto;

    scroll-behavior:
        smooth;

}


.welcome {

    width:
        min(850px, 100%);

    min-height:
        100%;

    margin:
        0 auto;

    padding:
        65px 24px 160px;

    text-align:
        center;

}


.welcome-logo-wrap {

    width:
        125px;

    height:
        125px;

    margin:
        0 auto 13px;

    position:
        relative;

}


.welcome-logo-wrap::before {

    content:
        "";

    position:
        absolute;

    inset:
        22%;

    border-radius:
        50%;

    background:
        rgba(242,185,63,.25);

    filter:
        blur(25px);

}


.welcome-brand-logo {

    position:
        relative;

    z-index:
        2;

    width:
        100%;

    height:
        100%;

    object-fit:
        contain;

}


.welcome-badge {

    display:
        inline-block;

    margin-bottom:
        7px;

    color:
        var(--gold-dark);

    font-family:
        "Inter",
        sans-serif;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        3px;

}


.welcome h2 {

    margin:
        0;

    color:
        var(--navy);

    font-size:
        clamp(26px, 4vw, 39px);

    line-height:
        1.5;

}


.welcome p {

    margin:
        4px 0;

    color:
        var(--muted);

    font-size:
        15px;

}


.suggestion-grid {

    display:
        grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap:
        11px;

    margin-top:
        30px;

}


.suggestion {

    min-height:
        76px;

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    border:
        1px solid
        var(--border);

    border-radius:
        17px;

    padding:
        13px 16px;

    color:
        var(--navy);

    background:
        rgba(255,255,255,.9);

    box-shadow:
        var(--shadow-small);

    text-align:
        right;

    font-weight:
        700;

}


.suggestion:hover {

    border-color:
        rgba(217,154,32,.42);

    transform:
        translateY(-1px);

}


.suggestion-icon {

    width:
        42px;

    height:
        42px;

    flex:
        0 0 42px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        13px;

    color:
        var(--gold-dark);

    background:
        var(--gold-pale);

    font-family:
        "Inter",
        sans-serif;

    font-weight:
        800;

}


.message-row {

    width:
        100%;

    padding:
        20px 24px;

}


.message-inner {

    width:
        min(880px, 100%);

    margin:
        0 auto;

    display:
        flex;

    gap:
        13px;

}


.message-avatar {

    width:
        36px;

    height:
        36px;

    flex:
        0 0 36px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        11px;

    font-weight:
        800;

}


.user .message-avatar {

    color:
        #fff;

    background:
        var(--blue);

}


.assistant .message-avatar {

    color:
        #342400;

    background:
        linear-gradient(
            135deg,
            #ffdc7b,
            #e7a324
        );

}


.message-content {

    min-width:
        0;

    flex:
        1;

    padding:
        5px 0;

    color:
        var(--text);

    line-height:
        1.95;

    white-space:
        pre-wrap;

    overflow-wrap:
        anywhere;

}


.message-meta {

    margin-top:
        8px;

    color:
        var(--muted);

    font-family:
        "Inter",
        sans-serif;

    font-size:
        9px;

}


.typing {

    opacity:
        .65;

}


.composer-area {

    padding:
        12px 20px 16px;

    background:
        linear-gradient(
            transparent,
            #fbfcfd 28%
        );

}


.composer {

    width:
        min(920px, 100%);

    margin:
        auto;

    display:
        flex;

    align-items:
        flex-end;

    gap:
        6px;

    padding:
        9px;

    border:
        1px solid
        var(--border);

    border-radius:
        20px;

    background:
        #fff;

    box-shadow:
        0 13px 40px
        rgba(37,55,77,.1);

}


.composer textarea {

    min-height:
        42px;

    max-height:
        190px;

    min-width:
        0;

    flex:
        1;

    resize:
        none;

    border:
        0;

    outline:
        0;

    padding:
        10px 6px;

    color:
        var(--text);

    background:
        transparent;

    line-height:
        1.65;

}


.composer textarea::placeholder {

    color:
        #9aa5b2;

}


.composer-tool,
.send-button,
.icon-button {

    width:
        40px;

    height:
        40px;

    flex:
        0 0 40px;

    border:
        0;

    border-radius:
        12px;

}


.composer-tool,
.icon-button {

    color:
        var(--navy-soft);

    background:
        transparent;

}


.composer-tool:hover,
.icon-button:hover {

    background:
        #f1f4f7;

}


.send-button {

    color:
        #362500;

    background:
        linear-gradient(
            135deg,
            #ffdb77,
            #e5a01f
        );

    font-size:
        21px;

    font-weight:
        900;

}


.send-button:disabled {

    opacity:
        .45;

    cursor:
        default;

}


.composer-info {

    width:
        min(890px, 100%);

    margin:
        7px auto 0;

    display:
        flex;

    justify-content:
        space-between;

    gap:
        10px;

    color:
        var(--muted);

    font-size:
        9px;

}


.mobile-only {

    display:
        none;

}


/* ==========================================================
   ENGLISH / LTR
========================================================== */

html[dir="ltr"] .feature-card,
html[dir="ltr"] .suggestion,
html[dir="ltr"] .conversation-item {

    text-align:
        left;

}


html[dir="ltr"] .sidebar {

    border-left:
        0;

    border-right:
        1px solid
        var(--border);

}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 1050px) {

    .auth-screen {

        grid-template-columns:
            .9fr 1.1fr;

    }

    .auth-brand-panel {

        padding:
            40px 30px;

    }

    .feature-grid {

        grid-template-columns:
            1fr;

        max-width:
            360px;

    }

    .official-logo-shell {

        width:
            220px;

        height:
            220px;

    }

}


@media (max-width: 800px) {

    .auth-screen {

        display:
            block;

        min-height:
            100vh;

        background:
            linear-gradient(
                180deg,
                #f9fbfd,
                #eef3f8
            );

    }


    .auth-brand-panel {

        display:
            none;

    }


    .auth-form-side {

        min-height:
            100vh;

        padding:
            85px 16px 28px;

    }


    .auth-language-area {

        top:
            20px;

        right:
            50%;

        transform:
            translateX(50%);

    }


    .auth-card {

        width:
            min(520px, 100%);

        padding:
            25px 20px;

        border-radius:
            23px;

    }


    .mobile-logo {

        width:
            105px;

        height:
            105px;

        display:
            block;

        margin:
            0 auto 5px;

    }


    .mobile-logo img {

        width:
            100%;

        height:
            100%;

        object-fit:
            contain;

    }


    .auth-heading {

        margin-bottom:
            20px;

    }


    .future-login-options {

        grid-template-columns:
            1fr 1fr;

    }


    .mobile-only {

        display:
            grid;

        place-items:
            center;

    }


    .sidebar {

        position:
            fixed;

        inset:
            0 auto 0 0;

        z-index:
            100;

        width:
            min(88vw, 320px);

        transform:
            translateX(-105%);

        transition:
            transform .22s ease;

        box-shadow:
            20px 0 60px
            rgba(37,55,77,.18);

    }


    html[dir="rtl"] .sidebar {

        inset:
            0 0 0 auto;

        transform:
            translateX(105%);

    }


    .sidebar.open {

        transform:
            translateX(0);

    }


    .topbar {

        padding-inline:
            9px;

    }


    .topbar-actions select {

        max-width:
            100px;

    }


    .chat-language-switch {

        display:
            none;

    }


    .welcome {

        padding:
            45px 15px 140px;

    }


    .suggestion-grid {

        grid-template-columns:
            1fr;

    }


    .message-row {

        padding:
            17px 13px;

    }


    .composer-area {

        padding:
            8px;

    }


    .composer {

        border-radius:
            16px;

    }


    .composer-info {

        padding:
            0 5px;

    }


    .composer-info span:last-child {

        display:
            none;

    }

}


@media (max-width: 450px) {

    .language-option {

        min-width:
            73px;

        padding:
            0 10px;

        font-size:
            12px;

    }


    .auth-heading h2 {

        font-size:
            24px;

    }


    .auth-tabs {

        margin-bottom:
            20px;

    }


    .future-login-options {

        grid-template-columns:
            1fr;

    }


    .composer-tool:nth-of-type(2) {

        display:
            none;

    }

}



/* ==========================================================
   ALUQAB AI — CONVERSATION UI V5
========================================================== */

.conversation-empty {
    color: var(--muted);
    padding: 12px 10px;
    font-size: 13px;
}


.conversation-item-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    border-radius: 12px;
    margin-bottom: 4px;
}


.conversation-item-wrap:hover {
    background: rgba(15, 23, 42, 0.045);
}


.conversation-item-wrap.active {
    background: rgba(234, 179, 8, 0.10);
}


.conversation-item-wrap .conversation-item {
    flex: 1;
    min-width: 0;
    margin: 0;
    padding-inline-end: 42px;
    background: transparent;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.conversation-menu-button {
    position: absolute;
    inset-inline-end: 7px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    color: var(--muted);
    opacity: 0;
    transition:
        opacity .15s ease,
        background .15s ease,
        color .15s ease;
}


.conversation-item-wrap:hover
.conversation-menu-button,
.conversation-item-wrap.active
.conversation-menu-button {
    opacity: 1;
}


.conversation-menu-button:hover {
    background: rgba(15, 23, 42, 0.08);
    color: var(--text);
}


.conversation-menu {
    display: none;
    position: absolute;
    z-index: 100;
    inset-inline-end: 6px;
    top: calc(100% - 2px);
    min-width: 150px;
    padding: 6px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 12px;
    background: #ffffff;
    box-shadow:
        0 12px 32px rgba(15, 23, 42, 0.14);
}


.conversation-menu.open {
    display: block;
}


.conversation-menu-item {
    width: 100%;
    border: 0;
    border-radius: 8px;
    background: transparent;
    padding: 9px 10px;
    cursor: pointer;
    text-align: start;
    font: inherit;
    font-size: 13px;
    color: #172033;
}


.conversation-menu-item:hover {
    background: #f5f7fb;
}


.conversation-menu-item.danger {
    color: #b42318;
}


.conversation-menu-item.danger:hover {
    background: #fff1f0;
}


/* Mobile: menu must remain visible */
@media (max-width: 760px) {

    .conversation-menu-button {
        opacity: 1;
    }

}



/* ==========================================================
   ALUQAB AI — V8 QUOTA CARD
   ========================================================== */

.aluqab-quota-card {

    margin:
        14px 12px;

    padding:
        14px 15px;

    border:
        1px solid
        rgba(80, 95, 120, 0.13);

    border-radius:
        18px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.96),
            rgba(247,249,255,.92)
        );

    box-shadow:
        0 8px 28px
        rgba(32, 46, 70, .06);

    direction:
        inherit;

}


.aluqab-quota-head {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

}


.aluqab-quota-plan {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    min-width:
        0;

    font-size:
        13px;

    font-weight:
        800;

}


.aluqab-quota-icon {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        25px;

    height:
        25px;

    flex:
        0 0 25px;

    border-radius:
        9px;

    background:
        rgba(86, 108, 170, .09);

    font-size:
        14px;

}


.aluqab-quota-counter {

    flex:
        0 0 auto;

    padding:
        4px 9px;

    border-radius:
        999px;

    background:
        rgba(86, 108, 170, .08);

    font-size:
        12px;

    font-weight:
        800;

    font-variant-numeric:
        tabular-nums;

}


.aluqab-quota-progress {

    position:
        relative;

    width:
        100%;

    height:
        7px;

    margin:
        12px 0 9px;

    overflow:
        hidden;

    border-radius:
        999px;

    background:
        rgba(80, 95, 120, .09);

}


.aluqab-quota-progress-bar {

    width:
        0;

    height:
        100%;

    border-radius:
        inherit;

    background:
        linear-gradient(
            90deg,
            #79a7ff,
            #8d8cf8
        );

    transition:
        width .35s ease;

}


.aluqab-quota-progress-bar.warning {

    background:
        linear-gradient(
            90deg,
            #f4b85f,
            #ef9e58
        );

}


.aluqab-quota-progress-bar.danger {

    background:
        linear-gradient(
            90deg,
            #ef7b7b,
            #e95f72
        );

}


.aluqab-quota-text {

    color:
        var(--muted, #697386);

    font-size:
        11.5px;

    line-height:
        1.7;

}


.aluqab-quota-warning {

    margin-top:
        9px;

    padding:
        8px 10px;

    border-radius:
        11px;

    font-size:
        11px;

    line-height:
        1.6;

}


.aluqab-quota-warning.warning {

    background:
        rgba(244, 184, 95, .12);

    color:
        #93611f;

}


.aluqab-quota-warning.danger {

    background:
        rgba(233, 95, 114, .10);

    color:
        #a23d4b;

}


.aluqab-quota-warning[hidden] {

    display:
        none !important;

}


@media (max-width: 760px) {

    .aluqab-quota-card {

        margin:
            12px 10px;

        padding:
            13px;

    }

}


/* English quota typography */

html[lang="en"]
.aluqab-quota-card {

    direction:
        ltr;

    text-align:
        left;

}


/* Arabic quota typography */

html[lang="ar"]
.aluqab-quota-card {

    direction:
        rtl;

    text-align:
        right;

}


/* ==========================================================
   ALUQAB AI — ARABIC / ENGLISH COMPOSER FIX
   ========================================================== */

html[lang="ar"] #message-input {
    direction: rtl !important;
    text-align: right !important;
    unicode-bidi: plaintext;
    writing-mode: horizontal-tb;
}

html[lang="ar"] #message-input::placeholder {
    direction: rtl;
    text-align: right;
}

html[lang="en"] #message-input {
    direction: ltr !important;
    text-align: left !important;
    unicode-bidi: plaintext;
    writing-mode: horizontal-tb;
}

html[lang="en"] #message-input::placeholder {
    direction: ltr;
    text-align: left;
}

#message-input {
    -webkit-user-select: text;
    user-select: text;
    ime-mode: auto;
}



/* ==========================================================
   ALUQAB AI — V9.1 PLANS UI
   ========================================================== */

.plans-button {

    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    margin: 10px 0 8px;
    padding: 11px 14px;

    border-radius: 12px;
    border: 1px solid
        rgba(255,255,255,.11);

    background:
        rgba(255,255,255,.045);

    color: inherit;

    cursor: pointer;

    font: inherit;

    transition:
        transform .16s ease,
        background .16s ease,
        border-color .16s ease;

}


.plans-button:hover {

    transform:
        translateY(-1px);

    background:
        rgba(255,255,255,.075);

    border-color:
        rgba(255,255,255,.18);

}


.plans-modal {

    position: fixed;
    inset: 0;

    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;

}


.plans-modal.hidden {

    display: none !important;

}


.plans-modal-backdrop {

    position: absolute;
    inset: 0;

    background:
        rgba(0,0,0,.72);

    backdrop-filter:
        blur(7px);

}


.plans-dialog {

    position: relative;

    width:
        min(1050px, 100%);

    max-height:
        calc(100vh - 48px);

    overflow-y: auto;

    border-radius: 22px;

    border:
        1px solid
        rgba(255,255,255,.11);

    background:
        var(--panel, #111318);

    box-shadow:
        0 30px 90px
        rgba(0,0,0,.45);

    padding: 26px;

}


.plans-dialog-header {

    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;

    margin-bottom: 24px;

}


.plans-dialog-header h2 {

    margin: 0 0 7px;

    font-size: 25px;

}


.plans-dialog-header p {

    margin: 0;

    color:
        var(--muted, #999);

}


.plans-close {

    width: 40px;
    height: 40px;

    flex: 0 0 40px;

    border-radius: 12px;

    border:
        1px solid
        rgba(255,255,255,.10);

    background:
        rgba(255,255,255,.05);

    color: inherit;

    font-size: 24px;
    line-height: 1;

    cursor: pointer;

}


.plans-grid {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 16px;

}


.plan-card {

    display: flex;
    flex-direction: column;

    min-width: 0;

    padding: 20px;

    border-radius: 18px;

    border:
        1px solid
        rgba(255,255,255,.09);

    background:
        rgba(255,255,255,.035);

}


.plan-card.current {

    border-color:
        rgba(255,255,255,.30);

    box-shadow:
        inset 0 0 0 1px
        rgba(255,255,255,.08);

}


.plan-card-top {

    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;

}


.plan-name {

    display: block;

    font-size: 21px;
    font-weight: 800;

}


.plan-description {

    margin:
        7px 0 0;

    min-height: 42px;

    color:
        var(--muted, #999);

    font-size: 13px;
    line-height: 1.6;

}


.plan-status {

    white-space: nowrap;

    padding: 5px 9px;

    border-radius: 999px;

    border:
        1px solid
        rgba(255,255,255,.10);

    font-size: 11px;

}


.plan-limit-main {

    margin:
        23px 0 17px;

}


.plan-limit-main strong {

    display: block;

    font-size: 35px;
    line-height: 1;

}


.plan-limit-main span {

    display: block;

    margin-top: 8px;

    color:
        var(--muted, #999);

    font-size: 13px;

}


.plan-capacity {

    display: grid;
    grid-template-columns:
        1fr 1fr;

    gap: 8px;

    margin-bottom: 18px;

}


.plan-capacity > div {

    padding: 10px;

    border-radius: 11px;

    background:
        rgba(255,255,255,.035);

}


.plan-capacity span,
.plan-capacity strong {

    display: block;

}


.plan-capacity span {

    min-height: 34px;

    color:
        var(--muted, #999);

    font-size: 10px;
    line-height: 1.4;

}


.plan-capacity strong {

    margin-top: 5px;

    font-size: 13px;

}


.plan-features {

    flex: 1;

    list-style: none;

    margin: 0 0 20px;
    padding: 0;

}


.plan-features li {

    display: flex;
    align-items: flex-start;
    gap: 8px;

    margin-bottom: 10px;

    font-size: 13px;
    line-height: 1.5;

}


.plan-action {

    width: 100%;

    padding: 11px 14px;

    border: 0;

    border-radius: 11px;

    font: inherit;
    font-weight: 700;

}


.plan-action:disabled {

    opacity: .55;
    cursor: default;

}


.plans-loading {

    padding: 40px 15px;

    text-align: center;

    color:
        var(--muted, #999);

}


.plans-loading.hidden {

    display: none;

}


.plans-note {

    margin-top: 18px;

    padding: 12px 14px;

    border-radius: 12px;

    background:
        rgba(255,255,255,.035);

    color:
        var(--muted, #999);

    text-align: center;

    font-size: 12px;
    line-height: 1.6;

}


body.plans-open {

    overflow: hidden;

}


html[lang="ar"] .plans-dialog {

    direction: rtl;
    text-align: right;

}


html[lang="en"] .plans-dialog {

    direction: ltr;
    text-align: left;

}


@media (max-width: 900px) {

    .plans-grid {

        grid-template-columns:
            1fr;

    }


    .plan-description {

        min-height: 0;

    }

}


@media (max-width: 600px) {

    .plans-modal {

        padding: 10px;

        align-items: flex-end;

    }


    .plans-dialog {

        width: 100%;

        max-height:
            calc(100vh - 20px);

        border-radius:
            20px 20px 14px 14px;

        padding: 18px;

    }


    .plans-dialog-header h2 {

        font-size: 20px;

    }


    .plan-capacity {

        grid-template-columns:
            1fr;

    }

}


/* ==========================================================
   ALUQAB AI — V9.2 COLORED PLANS
   ========================================================== */


/* ----------------------------------------------------------
   COMMON
   ---------------------------------------------------------- */

.plan-card {
    position: relative;
    overflow: hidden;

    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease,
        background .22s ease;
}


.plan-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 4px;

    opacity: .95;
}


.plan-card:hover {
    transform: translateY(-4px);
}


.plan-card .plan-name,
.plan-card .plan-limit-main strong {
    transition: color .2s ease;
}


.plan-card .plan-status {
    font-weight: 700;
}


/* ----------------------------------------------------------
   FREE — BLUE / CYAN
   ---------------------------------------------------------- */

.plan-card.plan-free {

    border-color:
        rgba(56, 189, 248, .35);

    background:
        linear-gradient(
            145deg,
            rgba(14, 165, 233, .11),
            rgba(56, 189, 248, .035) 55%,
            rgba(255,255,255,.025)
        );
}


.plan-card.plan-free::before {

    background:
        linear-gradient(
            90deg,
            #0ea5e9,
            #38bdf8,
            #67e8f9
        );
}


.plan-card.plan-free .plan-name,
.plan-card.plan-free
.plan-limit-main strong {

    color: #38bdf8;
}


.plan-card.plan-free .plan-status {

    color: #7dd3fc;

    border-color:
        rgba(56,189,248,.35);

    background:
        rgba(14,165,233,.10);
}


.plan-card.plan-free
.plan-features li span {

    color: #38bdf8;
}


.plan-card.plan-free:hover {

    border-color:
        rgba(56,189,248,.70);

    box-shadow:
        0 15px 40px
        rgba(14,165,233,.13);
}


/* ----------------------------------------------------------
   PLUS — GOLD
   ---------------------------------------------------------- */

.plan-card.plan-plus {

    border-color:
        rgba(245, 180, 45, .42);

    background:
        linear-gradient(
            145deg,
            rgba(245, 158, 11, .13),
            rgba(251, 191, 36, .04) 55%,
            rgba(255,255,255,.025)
        );
}


.plan-card.plan-plus::before {

    background:
        linear-gradient(
            90deg,
            #d97706,
            #f59e0b,
            #fbbf24
        );
}


.plan-card.plan-plus .plan-name,
.plan-card.plan-plus
.plan-limit-main strong {

    color: #fbbf24;
}


.plan-card.plan-plus .plan-status {

    color: #fcd34d;

    border-color:
        rgba(251,191,36,.38);

    background:
        rgba(245,158,11,.10);
}


.plan-card.plan-plus
.plan-features li span {

    color: #fbbf24;
}


.plan-card.plan-plus:hover {

    border-color:
        rgba(251,191,36,.75);

    box-shadow:
        0 15px 40px
        rgba(245,158,11,.14);
}


/* ----------------------------------------------------------
   PRO — PURPLE
   ---------------------------------------------------------- */

.plan-card.plan-pro {

    border-color:
        rgba(168, 85, 247, .42);

    background:
        linear-gradient(
            145deg,
            rgba(126, 34, 206, .15),
            rgba(168, 85, 247, .045) 55%,
            rgba(255,255,255,.025)
        );
}


.plan-card.plan-pro::before {

    background:
        linear-gradient(
            90deg,
            #7c3aed,
            #a855f7,
            #c084fc
        );
}


.plan-card.plan-pro .plan-name,
.plan-card.plan-pro
.plan-limit-main strong {

    color: #c084fc;
}


.plan-card.plan-pro .plan-status {

    color: #d8b4fe;

    border-color:
        rgba(192,132,252,.38);

    background:
        rgba(126,34,206,.13);
}


.plan-card.plan-pro
.plan-features li span {

    color: #c084fc;
}


.plan-card.plan-pro:hover {

    border-color:
        rgba(192,132,252,.75);

    box-shadow:
        0 15px 40px
        rgba(126,34,206,.17);
}


/* ----------------------------------------------------------
   CURRENT PLAN
   ---------------------------------------------------------- */

.plan-card.current {

    transform:
        translateY(-3px);

    box-shadow:
        0 18px 45px
        rgba(0,0,0,.25),
        inset 0 0 0 1px
        rgba(255,255,255,.08);
}


.plan-card.current::after {

    content: "";

    position: absolute;

    width: 110px;
    height: 110px;

    top: -55px;
    right: -55px;

    border-radius: 50%;

    background:
        rgba(255,255,255,.07);

    pointer-events: none;
}


/* ----------------------------------------------------------
   CAPACITY BOXES
   ---------------------------------------------------------- */

.plan-card .plan-capacity > div {

    border:
        1px solid
        rgba(255,255,255,.055);

    backdrop-filter:
        blur(4px);
}


/* ----------------------------------------------------------
   ACTION BUTTONS
   ---------------------------------------------------------- */

.plan-card.plan-free
.plan-action {

    background:
        linear-gradient(
            135deg,
            #0284c7,
            #38bdf8
        );

    color: #fff;
}


.plan-card.plan-plus
.plan-action {

    background:
        linear-gradient(
            135deg,
            #d97706,
            #fbbf24
        );

    color: #1b1302;
}


.plan-card.plan-pro
.plan-action {

    background:
        linear-gradient(
            135deg,
            #7c3aed,
            #c084fc
        );

    color: #fff;
}


.plan-card .plan-action:disabled {

    filter:
        saturate(.65);

    opacity: .70;
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 900px) {

    .plan-card:hover {
        transform: none;
    }

    .plan-card.current {
        transform: none;
    }

}



/* ==========================================================
   ALUQAB AI — V9.3 PLAN READABILITY
   ========================================================== */


/* Main description */

.plan-card .plan-description {
    color: rgba(235, 241, 250, .76);
}


/* Daily message label */

.plan-card .plan-limit-main span {
    color: rgba(235, 241, 250, .72);
}


/* Capacity boxes */

.plan-card .plan-capacity > div {
    background: rgba(255,255,255,.055);
}


.plan-card .plan-capacity span {
    color: rgba(225, 232, 242, .72);
}


.plan-card .plan-capacity strong {
    color: rgba(255,255,255,.92);
    font-weight: 700;
}


/* Feature list */

.plan-card .plan-features li {
    color: rgba(235, 241, 250, .84);
}


.plan-card .plan-features li span {
    font-weight: 900;
}


/* FREE */

.plan-card.plan-free .plan-capacity > div {
    border-color: rgba(56,189,248,.13);
}


.plan-card.plan-free .plan-capacity strong {
    color: #bae6fd;
}


/* PLUS */

.plan-card.plan-plus .plan-capacity > div {
    border-color: rgba(251,191,36,.14);
}


.plan-card.plan-plus .plan-capacity strong {
    color: #fde68a;
}


/* PRO */

.plan-card.plan-pro .plan-capacity > div {
    border-color: rgba(192,132,252,.15);
}


.plan-card.plan-pro .plan-capacity strong {
    color: #e9d5ff;
}


/* Status badges */

.plan-card .plan-status {
    font-weight: 800;
}


/* Bottom information note */

.plans-note {
    color: rgba(225,232,242,.70);
}


/* Current plan button */

.plan-card.current .plan-action:disabled {
    opacity: .88;
}


/* Coming soon buttons */

.plan-card:not(.current) .plan-action:disabled {
    opacity: .76;
}


/* Arabic readability */

html[lang="ar"] .plan-description,
html[lang="ar"] .plan-features li,
html[lang="ar"] .plan-capacity span {
    letter-spacing: 0;
}


/* English readability */

html[lang="en"] .plan-description,
html[lang="en"] .plan-features li {
    letter-spacing: .01em;
}



/* ==========================================================
   ALUQAB AI — V11.1 ADMIN SUBSCRIPTIONS UI
   ========================================================== */

.admin-button {

    width: 100%;
    min-height: 44px;

    border:
        1px solid rgba(56,189,248,.20);

    border-radius: 12px;

    background:
        rgba(56,189,248,.07);

    color: inherit;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    cursor: pointer;

    font: inherit;

    transition:
        .18s ease;

}


.admin-button:hover {

    background:
        rgba(56,189,248,.13);

    border-color:
        rgba(56,189,248,.35);

}


.admin-modal {

    position: fixed;
    inset: 0;

    z-index: 5000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;

}


.admin-modal.hidden {

    display: none;

}


.admin-modal-backdrop {

    position: absolute;
    inset: 0;

    background:
        rgba(2,6,23,.76);

    backdrop-filter:
        blur(8px);

}


.admin-dialog {

    position: relative;

    width:
        min(1180px, 96vw);

    max-height:
        88vh;

    overflow: auto;

    border:
        1px solid rgba(148,163,184,.18);

    border-radius: 22px;

    background:
        #0b1220;

    color:
        #f8fafc;

    box-shadow:
        0 30px 100px
        rgba(0,0,0,.48);

}


.admin-dialog-header {

    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;

    padding:
        24px 26px 18px;

    border-bottom:
        1px solid rgba(148,163,184,.13);

}


.admin-dialog-header h2 {

    margin: 0 0 5px;

    font-size: 22px;

}


.admin-dialog-header p {

    margin: 0;

    color:
        rgba(226,232,240,.66);

}


.admin-close {

    width: 40px;
    height: 40px;

    border: 0;
    border-radius: 12px;

    background:
        rgba(255,255,255,.07);

    color: #fff;

    font-size: 24px;

    cursor: pointer;

}


.admin-toolbar {

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    padding:
        18px 26px;

}


.admin-stat {

    display: flex;
    align-items: center;
    gap: 10px;

    color:
        rgba(226,232,240,.72);

}


.admin-stat strong {

    color: #fff;

    font-size: 20px;

}


.admin-refresh {

    border:
        1px solid rgba(56,189,248,.24);

    border-radius: 10px;

    background:
        rgba(56,189,248,.10);

    color:
        #e0f2fe;

    padding:
        9px 16px;

    cursor: pointer;

    font: inherit;

}


.admin-loading,
.admin-error {

    margin:
        0 26px 16px;

    padding:
        12px 14px;

    border-radius:
        10px;

}


.admin-loading {

    background:
        rgba(56,189,248,.08);

    color:
        #bae6fd;

}


.admin-error {

    background:
        rgba(239,68,68,.10);

    color:
        #fecaca;

    border:
        1px solid rgba(239,68,68,.20);

}


.admin-table-wrap {

    overflow-x: auto;

    padding:
        0 26px 26px;

}


.admin-table {

    width: 100%;

    border-collapse:
        collapse;

    min-width:
        900px;

}


.admin-table th,
.admin-table td {

    padding:
        14px 12px;

    text-align:
        start;

    border-bottom:
        1px solid rgba(148,163,184,.11);

    vertical-align:
        middle;

}


.admin-table th {

    color:
        rgba(226,232,240,.65);

    font-size:
        13px;

    font-weight:
        700;

}


.admin-user {

    display: flex;
    flex-direction: column;
    gap: 3px;

}


.admin-user strong {

    color: #fff;

}


.admin-user small {

    color:
        rgba(226,232,240,.58);

}


.admin-role,
.admin-plan {

    display: inline-flex;

    padding:
        5px 9px;

    border-radius:
        999px;

    font-size:
        12px;

    font-weight:
        800;

}


.admin-role {

    background:
        rgba(148,163,184,.12);

}


.admin-role.is-admin {

    background:
        rgba(56,189,248,.13);

    color:
        #bae6fd;

}


.admin-plan-free {

    background:
        rgba(56,189,248,.12);

    color:
        #bae6fd;

}


.admin-plan-plus {

    background:
        rgba(251,191,36,.12);

    color:
        #fde68a;

}


.admin-plan-pro {

    background:
        rgba(192,132,252,.14);

    color:
        #e9d5ff;

}


.admin-actions {

    display: flex;
    flex-wrap: wrap;
    gap: 6px;

}


.admin-actions button {

    border:
        1px solid rgba(148,163,184,.17);

    border-radius:
        8px;

    background:
        rgba(255,255,255,.055);

    color:
        #f8fafc;

    padding:
        7px 10px;

    cursor: pointer;

    font: inherit;
    font-size: 12px;

}


.admin-actions button:hover {

    background:
        rgba(255,255,255,.11);

}


.admin-actions .admin-cancel {

    border-color:
        rgba(239,68,68,.20);

    color:
        #fecaca;

}


.admin-empty {

    text-align: center !important;

    color:
        rgba(226,232,240,.60);

    padding:
        30px !important;

}


body.admin-open {

    overflow: hidden;

}


@media (max-width: 700px) {

    .admin-modal {

        padding: 8px;

    }


    .admin-dialog {

        width: 100%;

        max-height:
            94vh;

        border-radius:
            16px;

    }


    .admin-dialog-header,
    .admin-toolbar {

        padding-left:
            16px;

        padding-right:
            16px;

    }


    .admin-table-wrap {

        padding-left:
            12px;

        padding-right:
            12px;

    }

}


/* ==========================================================
   ALUQAB AI — V11.2 ADMIN SAFETY
   ========================================================== */

.admin-actions button:disabled {

    opacity: .45;

    cursor: not-allowed;

    background:
        rgba(255,255,255,.025);

    border-color:
        rgba(148,163,184,.10);

}

.admin-actions button:disabled:hover {

    background:
        rgba(255,255,255,.025);

}

.admin-protected {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 32px;

    padding:
        6px 11px;

    border:
        1px solid rgba(251,191,36,.22);

    border-radius:
        8px;

    background:
        rgba(251,191,36,.08);

    color:
        #fde68a;

    font-size:
        12px;

    font-weight:
        800;

}



/* ==========================================================
   ALUQAB AI — V11.2 STAGE 2 CONFIRMATION UI
   ========================================================== */

.admin-confirm-modal {

    position: fixed;
    inset: 0;

    z-index: 7000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

}


.admin-confirm-modal.hidden {

    display: none;

}


.admin-confirm-backdrop {

    position: absolute;
    inset: 0;

    background:
        rgba(2, 6, 23, .72);

    backdrop-filter:
        blur(7px);

}


.admin-confirm-dialog {

    position: relative;

    width:
        min(460px, 94vw);

    padding:
        28px;

    border:
        1px solid rgba(148,163,184,.18);

    border-radius:
        20px;

    background:
        #0b1220;

    color:
        #f8fafc;

    box-shadow:
        0 30px 90px
        rgba(0,0,0,.55);

    text-align: right;

}


.admin-confirm-icon {

    width: 46px;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 16px;

    border-radius: 14px;

    background:
        rgba(251,191,36,.10);

    border:
        1px solid rgba(251,191,36,.20);

    color:
        #fbbf24;

    font-size: 22px;

}


.admin-confirm-dialog h3 {

    margin:
        0 0 8px;

    font-size:
        20px;

}


.admin-confirm-dialog > p {

    margin:
        0 0 20px;

    color:
        rgba(226,232,240,.66);

    line-height:
        1.7;

}


.admin-confirm-details {

    display: grid;

    gap: 9px;

    padding:
        14px;

    border:
        1px solid rgba(148,163,184,.12);

    border-radius:
        14px;

    background:
        rgba(255,255,255,.025);

}


.admin-confirm-details > div {

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    min-height:
        30px;

}


.admin-confirm-details span {

    color:
        rgba(226,232,240,.60);

    font-size:
        13px;

}


.admin-confirm-details strong {

    color:
        #fff;

    font-size:
        13px;

}


.admin-confirm-actions {

    display: flex;

    gap: 10px;

    margin-top:
        20px;

}


.admin-confirm-actions button {

    flex: 1;

    min-height:
        42px;

    border-radius:
        11px;

    cursor: pointer;

    font: inherit;

    font-weight:
        800;

}


.admin-confirm-secondary {

    border:
        1px solid rgba(148,163,184,.18);

    background:
        rgba(255,255,255,.045);

    color:
        #e2e8f0;

}


.admin-confirm-primary {

    border:
        1px solid rgba(251,191,36,.28);

    background:
        rgba(251,191,36,.15);

    color:
        #fde68a;

}


.admin-confirm-primary.is-danger {

    border-color:
        rgba(239,68,68,.30);

    background:
        rgba(239,68,68,.13);

    color:
        #fecaca;

}


.admin-confirm-primary:hover {

    filter:
        brightness(1.12);

}


@media (max-width: 520px) {

    .admin-confirm-dialog {

        padding:
            21px;

    }


    .admin-confirm-actions {

        flex-direction:
            column-reverse;

    }

}


/* ==========================================================
   ALUQAB AI — V12 STAGE 1 PLANS
   ========================================================== */

.plan-card:not(.current) .plan-action:not(:disabled) {

    cursor: pointer;

    opacity: 1;

    transition:
        transform .18s ease,
        filter .18s ease,
        box-shadow .18s ease;

}

.plan-card:not(.current) .plan-action:not(:disabled):hover {

    transform:
        translateY(-1px);

    filter:
        brightness(1.12);

}

.plan-card.plan-plus .plan-action:not(:disabled) {

    border-color:
        rgba(245, 158, 11, .34);

    background:
        rgba(245, 158, 11, .12);

    color:
        #fbbf24;

}

.plan-card.plan-pro .plan-action:not(:disabled) {

    border-color:
        rgba(168, 85, 247, .34);

    background:
        rgba(168, 85, 247, .12);

    color:
        #d8b4fe;

}



/* ==========================================================
   ALUQAB AI — V13.2
   CLEAN PREMIUM AUTH
   ========================================================== */


/* =========================
   GLOBAL AUTH
   ========================= */

.auth-screen {

    min-height: 100vh;

    display: grid;

    /*
     * HTML order:
     * hero first, auth second.
     * Arabic page direction can affect placement,
     * therefore explicit areas keep the form on the left
     * and artwork on the right.
     */

    grid-template-columns:
        minmax(420px, 39%)
        minmax(0, 61%);

    grid-template-areas:
        "login hero";

    direction: ltr;

    overflow: hidden;

    background: #f5f9fc;

    font-family:
        "Noto Sans Arabic",
        "Segoe UI",
        Tahoma,
        Arial,
        sans-serif;

}


/* =========================
   HERO
   ========================= */

.auth-brand-panel {

    grid-area: hero;

    direction: rtl;

    position: relative;

    min-width: 0;

    min-height: 100vh;

    display: flex;

    align-items: flex-end;

    justify-content: center;

    padding:
        clamp(24px, 3vw, 48px);

    overflow: hidden;

    isolation: isolate;

    background-image:
        url("/assets/aluqab-ai-hero.png");

    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat;

}


/*
 * Soft bottom fade only.
 * We deliberately avoid a full dark overlay.
 */

.auth-brand-panel::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            transparent 0%,
            transparent 58%,
            rgba(3, 20, 35, .03) 70%,
            rgba(3, 20, 35, .24) 100%
        );

}


.auth-brand-panel::after {

    display: none !important;

}


.brand-decoration,
.official-logo-shell,
.mobile-logo,
.company-name-ar,
.company-name-en,
.brand-divider {

    display: none !important;

}


/* =========================
   HERO CONTENT
   ========================= */

.brand-content {

    position: relative;

    z-index: 2;

    width:
        min(760px, 92%);

    margin:
        0 auto clamp(18px, 3vh, 38px);

    padding:
        20px 22px;

    color: #ffffff;

    border:
        1px solid
        rgba(255,255,255,.30);

    border-radius:
        22px;

    background:
        linear-gradient(
            135deg,
            rgba(7, 39, 63, .36),
            rgba(7, 39, 63, .16)
        );

    -webkit-backdrop-filter:
        blur(6px);

    backdrop-filter:
        blur(6px);

    box-shadow:
        0 18px 45px
        rgba(3, 20, 35, .15);

}


.product-title,
.brand-content h1 {

    margin:
        0 0 4px !important;

    text-align: center;

    color:
        #ffffff !important;

    font-size:
        clamp(30px, 3vw, 44px) !important;

    font-weight: 900;

    line-height: 1.25;

    letter-spacing: -.02em;

    text-shadow:
        0 3px 16px
        rgba(0,0,0,.28);

}


.product-title span {

    color:
        #f8b51f !important;

}


.product-description,
.brand-content > p {

    margin:
        0 auto 16px !important;

    text-align: center;

    color:
        rgba(255,255,255,.92) !important;

    font-size: 14px !important;

    line-height: 1.7;

}


/* =========================
   FEATURES
   ========================= */

.feature-grid {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 8px;

    margin-top: 12px;

}


.feature-card {

    min-width: 0;

    min-height: 72px;

    display: flex;

    align-items: center;

    gap: 9px;

    padding:
        10px 11px;

    border:
        1px solid
        rgba(255,255,255,.25);

    border-radius: 14px;

    background:
        rgba(255,255,255,.11);

    color: #ffffff;

    box-shadow: none;

    -webkit-backdrop-filter:
        blur(4px);

    backdrop-filter:
        blur(4px);

    transition:
        transform .18s ease,
        background .18s ease,
        border-color .18s ease;

}


.feature-card:hover {

    transform:
        translateY(-2px);

    background:
        rgba(255,255,255,.17);

    border-color:
        rgba(246,181,38,.52);

}


.feature-icon {

    flex:
        0 0 34px;

    width: 34px;

    height: 34px;

    display: grid;

    place-items: center;

    border-radius: 10px;

    color:
        #ffd16a !important;

    background:
        rgba(246,181,38,.15) !important;

    border:
        1px solid
        rgba(246,181,38,.28);

    font-size: 16px;

}


.feature-card strong {

    display: block;

    color:
        #ffffff !important;

    font-size: 12px;

    font-weight: 800;

    line-height: 1.4;

}


.feature-card small {

    display: block;

    margin-top: 2px;

    color:
        rgba(255,255,255,.72) !important;

    font-size: 9px;

    line-height: 1.45;

}


/* =========================
   LOGIN SIDE
   ========================= */

.auth-form-side {

    grid-area: login;

    direction: rtl;

    position: relative;

    min-width: 0;

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    padding:
        36px clamp(32px, 5vw, 72px);

    overflow-y: auto;

    background:

        radial-gradient(
            circle at 10% 90%,
            rgba(43,157,216,.09),
            transparent 27%
        ),

        radial-gradient(
            circle at 90% 8%,
            rgba(242,178,37,.12),
            transparent 25%
        ),

        linear-gradient(
            145deg,
            #ffffff 0%,
            #f6faff 48%,
            #eef5fa 100%
        );

}


.auth-form-side::before {

    content: "";

    position: absolute;

    top: -100px;

    right: -100px;

    width: 300px;

    height: 300px;

    border-radius: 50%;

    border:
        1px solid
        rgba(218,158,36,.14);

    pointer-events: none;

}


/* =========================
   LANGUAGE
   ========================= */

.auth-language-area {

    position: absolute;

    top: 22px;

    right: 28px;

    z-index: 5;

}


.language-switch {

    display: flex;

    align-items: center;

    gap: 3px;

    padding: 4px !important;

    border:
        1px solid
        #dce6ee !important;

    border-radius:
        999px !important;

    background:
        rgba(255,255,255,.88) !important;

    box-shadow:
        0 8px 24px
        rgba(19,55,80,.07);

    -webkit-backdrop-filter:
        blur(10px);

    backdrop-filter:
        blur(10px);

}


.language-switch button {

    min-width: 64px;

    min-height: 34px;

    padding:
        5px 12px;

    border: 0;

    border-radius:
        999px !important;

    background: transparent;

    color: #54697c;

    font-weight: 700;

}


.language-switch button.active {

    color:
        #16293a !important;

    background:
        linear-gradient(
            135deg,
            #ffd66b,
            #efa91c
        ) !important;

    box-shadow:
        0 5px 14px
        rgba(217,154,32,.22);

}


/* =========================
   LOGIN CARD
   ========================= */

.auth-card {

    position: relative;

    width:
        min(100%, 500px);

    margin:
        54px auto 20px;

    padding:
        36px 36px 30px;

    border:
        1px solid
        rgba(22,56,80,.10);

    border-radius:
        26px;

    background:
        rgba(255,255,255,.96);

    box-shadow:
        0 26px 70px
        rgba(21,55,79,.12);

    -webkit-backdrop-filter:
        blur(14px);

    backdrop-filter:
        blur(14px);

}


.auth-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 14%;

    right: 14%;

    height: 3px;

    border-radius:
        0 0 8px 8px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #e8a51d,
            #ffd66a,
            #e8a51d,
            transparent
        );

}


/* =========================
   LOGIN HEADER
   ========================= */

.auth-heading {

    text-align: center;

    margin:
        0 0 22px;

}


.auth-eyebrow {

    display: inline-block;

    margin-bottom: 8px;

    color:
        #c9870c !important;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 10px;

    font-weight: 800;

    letter-spacing:
        .22em;

}


.auth-heading h2 {

    margin:
        0 0 5px;

    color:
        #10273d !important;

    font-size:
        clamp(27px, 2.5vw, 34px);

    font-weight: 900;

    line-height: 1.4;

    letter-spacing:
        -.02em;

}


.auth-heading p {

    margin: 0;

    color:
        #748596 !important;

    font-size: 13px;

    line-height: 1.8;

}


/* =========================
   LOGIN / REGISTER TABS
   ========================= */

.auth-tabs {

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 4px;

    padding: 4px;

    margin-bottom: 23px;

    border:
        1px solid
        #dce6ee !important;

    border-radius:
        14px !important;

    background:
        #f1f6fa !important;

}


.auth-tab {

    min-height: 43px;

    border: 0;

    border-radius:
        10px !important;

    background:
        transparent;

    color:
        #53687a !important;

    font-size: 14px;

    font-weight: 800;

    cursor: pointer;

}


.auth-tab.active {

    color:
        #172a3c !important;

    background:
        linear-gradient(
            135deg,
            #ffd66b,
            #efa91c
        ) !important;

    box-shadow:
        0 7px 17px
        rgba(217,154,32,.20);

}


/* =========================
   FIELDS
   ========================= */

.auth-card .field {

    margin-bottom: 17px;

}


.auth-card label {

    display: block;

    margin-bottom: 7px;

    color:
        #20374c !important;

    font-size: 12px;

    font-weight: 800;

}


.input-shell {

    position: relative;

    min-height: 52px;

    display: flex;

    align-items: center;

    border:
        1px solid
        #d4e0e9 !important;

    border-radius:
        13px !important;

    background:
        #f9fbfd !important;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;

}


.input-shell:hover {

    border-color:
        #b8cad7 !important;

}


.input-shell:focus-within {

    border-color:
        #dda020 !important;

    background:
        #ffffff !important;

    box-shadow:
        0 0 0 4px
        rgba(221,160,32,.10) !important;

}


.input-shell input {

    width: 100%;

    min-width: 0;

    border: 0 !important;

    outline: 0 !important;

    background:
        transparent !important;

    color:
        #142a3f !important;

    font-family: inherit;

    font-size: 14px;

}


.input-shell input::placeholder {

    color:
        #9aa8b5 !important;

}


.input-icon {

    color:
        #8da0af;

}


/* =========================
   LOGIN OPTIONS
   ========================= */

.login-options {

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 15px;

    margin:
        2px 0 18px;

}


.remember-option {

    display: flex !important;

    align-items: center;

    gap: 7px;

    margin: 0 !important;

    cursor: pointer;

}


.text-button {

    border: 0;

    padding: 0;

    background: transparent;

    color:
        #b97808 !important;

    font-family: inherit;

    font-size: 12px;

    font-weight: 700;

    cursor: pointer;

}


/* =========================
   PRIMARY BUTTON
   ========================= */

.primary-button {

    width: 100%;

    min-height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    border:
        0 !important;

    border-radius:
        13px !important;

    color:
        #14283a !important;

    background:
        linear-gradient(
            135deg,
            #ffd66b 0%,
            #f2b32c 50%,
            #eb9e15 100%
        ) !important;

    font-family: inherit;

    font-size: 14px;

    font-weight: 900;

    cursor: pointer;

    box-shadow:
        0 12px 26px
        rgba(218,153,26,.22);

    transition:
        transform .18s ease,
        box-shadow .18s ease;

}


.primary-button:hover:not(:disabled) {

    transform:
        translateY(-1px);

    box-shadow:
        0 15px 30px
        rgba(218,153,26,.28);

}


.primary-button:disabled {

    opacity: .62;

    cursor: not-allowed;

}


/* =========================
   SEPARATOR
   ========================= */

.auth-separator {

    display: flex;

    align-items: center;

    gap: 12px;

    margin:
        21px 0 18px;

    color:
        #93a2ae;

}


.auth-separator span {

    flex: 1;

    height: 1px;

    background:
        #dfe7ed;

}


.auth-separator em {

    font-style: normal;

    font-size: 11px;

}


/* =========================
   SOCIAL
   ========================= */

.future-login-options {

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 9px;

}


.social-button {

    min-height: 46px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    border:
        1px solid
        #d9e4ec !important;

    border-radius:
        12px !important;

    background:
        #ffffff !important;

    color:
        #263c50 !important;

    font-family: inherit;

    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 4px 13px
        rgba(20,55,80,.035);

}


.social-button:hover {

    border-color:
        #becfdb !important;

    background:
        #f8fbfd !important;

}


/* =========================
   PRIVACY
   ========================= */

.privacy-note {

    display: flex;

    align-items: flex-start;

    justify-content: center;

    gap: 7px;

    margin-top: 20px;

    color:
        #83919e !important;

    font-size: 10px;

    line-height: 1.7;

    text-align: center;

}


.privacy-lock {

    color:
        #c98b12;

}


/* ==========================================================
   MEDIUM DESKTOP
   ========================================================== */

@media (max-width: 1250px) {

    .auth-screen {

        grid-template-columns:
            minmax(390px, 43%)
            minmax(0, 57%);

    }


    .auth-form-side {

        padding:
            32px 28px;

    }


    .brand-content {

        width:
            min(680px, 94%);

        padding:
            17px;

    }


    .feature-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }

}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 900px) {

    .auth-screen {

        display: flex;

        flex-direction: column;

        min-height: 100vh;

        overflow: auto;

    }


    /*
     * On smaller devices the login is the priority.
     */

    .auth-form-side {

        order: 1;

        min-height: 100vh;

        padding:
            78px 22px 40px;

    }


    .auth-brand-panel {

        order: 2;

        min-height: 440px;

        padding:
            20px;

        background-position:
            center center;

    }


    .auth-card {

        margin:
            0 auto;

    }


    .brand-content {

        margin:
            0 auto 10px;

    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 640px) {

    .auth-brand-panel {

        display: none;

    }


    .auth-form-side {

        min-height: 100vh;

        padding:
            74px 14px 28px;

        align-items:
            flex-start;

    }


    .auth-language-area {

        top: 16px;

        right: 16px;

    }


    .auth-card {

        width: 100%;

        margin: 0;

        padding:
            28px 20px 24px;

        border-radius:
            22px;

    }


    .auth-heading h2 {

        font-size:
            27px;

    }


    .future-login-options {

        grid-template-columns:
            1fr 1fr;

    }

}


/* ==========================================================
   SMALL MOBILE
   ========================================================== */

@media (max-width: 390px) {

    .auth-form-side {

        padding-left: 10px;

        padding-right: 10px;

    }


    .auth-card {

        padding:
            25px 15px 22px;

    }


    .auth-heading h2 {

        font-size:
            24px;

    }


    .future-login-options {

        grid-template-columns:
            1fr;

    }

}


/* ==================== END V13.2 ==================== */



/* ==========================================================
   V13.2 — HERO FEATURE POSITION FIX
   Keep cards away from text embedded in hero image
   ========================================================== */

@media (min-width: 901px) {

    .brand-content {

        /*
         * Move entire AI information panel upward.
         * This prevents feature cards from covering
         * the company text embedded in the artwork.
         */

        margin:
            0 auto clamp(150px, 18vh, 210px) !important;

        width:
            min(610px, 78%) !important;

        padding:
            15px 18px !important;

        border-radius:
            19px !important;

    }


    .product-title,
    .brand-content h1 {

        font-size:
            clamp(28px, 2.3vw, 38px) !important;

        margin-bottom:
            2px !important;

    }


    .product-description,
    .brand-content > p {

        margin-bottom:
            10px !important;

        font-size:
            12px !important;

    }


    .feature-grid {

        grid-template-columns:
            repeat(4, minmax(0, 1fr)) !important;

        gap:
            7px !important;

        margin-top:
            8px !important;

    }


    .feature-card {

        min-height:
            58px !important;

        padding:
            7px 8px !important;

        gap:
            6px !important;

        border-radius:
            12px !important;

    }


    .feature-icon {

        flex:
            0 0 28px !important;

        width:
            28px !important;

        height:
            28px !important;

        font-size:
            13px !important;

        border-radius:
            8px !important;

    }


    .feature-card strong {

        font-size:
            10px !important;

        white-space:
            normal !important;

    }


    .feature-card small {

        font-size:
            8px !important;

        line-height:
            1.3 !important;

    }

}


/* ==================== END FEATURE POSITION FIX ==================== */



/* ==========================================================
   ALUQAB AI — V13.3
   MINIMAL GLASS FEATURE BAR + GOOGLE BRAND
   ========================================================== */


/* ----------------------------------------------------------
   HERO CONTENT
   ---------------------------------------------------------- */

@media (min-width: 901px) {

    /*
     * Remove the large glass card.
     * The artwork remains the visual focus.
     */

    .brand-content {

        width:
            min(620px, 82%) !important;

        margin:
            0 auto clamp(145px, 17vh, 195px) !important;

        padding:
            0 !important;

        border:
            0 !important;

        border-radius:
            0 !important;

        background:
            transparent !important;

        box-shadow:
            none !important;

        -webkit-backdrop-filter:
            none !important;

        backdrop-filter:
            none !important;

    }


    .product-title,
    .brand-content h1 {

        margin:
            0 0 3px !important;

        text-align:
            center !important;

        font-size:
            clamp(30px, 2.5vw, 42px) !important;

        font-weight:
            900 !important;

        color:
            #ffffff !important;

        text-shadow:
            0 3px 18px
            rgba(0,0,0,.32) !important;

    }


    .product-title span {

        color:
            #ffc64d !important;

    }


    .product-description,
    .brand-content > p {

        margin:
            0 0 13px !important;

        text-align:
            center !important;

        color:
            rgba(255,255,255,.92) !important;

        font-size:
            12px !important;

        text-shadow:
            0 2px 10px
            rgba(0,0,0,.30);

    }


    /* ------------------------------------------------------
       ONE GLASS BAR
       ------------------------------------------------------ */

    .feature-grid {

        width:
            fit-content !important;

        max-width:
            100% !important;

        margin:
            0 auto !important;

        padding:
            6px 9px !important;

        display:
            flex !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        gap:
            0 !important;

        direction:
            rtl;

        border:
            1px solid
            rgba(255,255,255,.30) !important;

        border-radius:
            999px !important;

        background:
            linear-gradient(
                135deg,
                rgba(9,43,67,.42),
                rgba(9,43,67,.22)
            ) !important;

        box-shadow:
            0 12px 30px
            rgba(4,25,42,.14) !important;

        -webkit-backdrop-filter:
            blur(9px) saturate(125%) !important;

        backdrop-filter:
            blur(9px) saturate(125%) !important;

    }


    /*
     * Each feature becomes plain content inside
     * the same glass bar — no individual cards.
     */

    .feature-card {

        position:
            relative;

        min-height:
            0 !important;

        width:
            auto !important;

        display:
            flex !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        flex:
            0 0 auto !important;

        gap:
            5px !important;

        padding:
            5px 13px !important;

        border:
            0 !important;

        border-radius:
            0 !important;

        background:
            transparent !important;

        box-shadow:
            none !important;

        -webkit-backdrop-filter:
            none !important;

        backdrop-filter:
            none !important;

        transform:
            none !important;

    }


    /*
     * Fine separators between features.
     */

    .feature-card:not(:last-child)::after {

        content:
            "";

        position:
            absolute;

        left:
            0;

        top:
            22%;

        width:
            1px;

        height:
            56%;

        background:
            rgba(255,255,255,.22);

    }


    .feature-card:hover {

        background:
            transparent !important;

        transform:
            none !important;

    }


    /*
     * Icon is now just a small golden symbol.
     */

    .feature-icon {

        flex:
            0 0 auto !important;

        width:
            auto !important;

        height:
            auto !important;

        min-width:
            0 !important;

        display:
            inline !important;

        padding:
            0 !important;

        border:
            0 !important;

        border-radius:
            0 !important;

        background:
            transparent !important;

        color:
            #ffd05a !important;

        font-size:
            13px !important;

        line-height:
            1 !important;

        box-shadow:
            none !important;

    }


    .feature-card strong {

        display:
            inline !important;

        color:
            #ffffff !important;

        font-size:
            10px !important;

        font-weight:
            800 !important;

        line-height:
            1.4 !important;

        white-space:
            nowrap !important;

        text-shadow:
            0 2px 8px
            rgba(0,0,0,.25);

    }


    /*
     * Descriptions caused most of the visual clutter.
     */

    .feature-card small {

        display:
            none !important;

    }

}


/* ----------------------------------------------------------
   GOOGLE BUTTON
   ---------------------------------------------------------- */

.google-login-button {

    position:
        relative;

}


/*
 * Hide a generic/icon-font Google symbol if one exists
 * immediately inside the Google button.
 */

.google-login-button .social-icon,
.google-login-button .provider-icon,
.google-login-button > svg,
.google-login-button > i {

    display:
        none !important;

}


/*
 * Official-style multicolor G treatment.
 * Pure CSS avoids another external asset request.
 */

.google-login-button::before {

    content:
        "G";

    width:
        22px;

    height:
        22px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 22px;

    font-family:
        Arial,
        sans-serif;

    font-size:
        19px;

    font-weight:
        900;

    line-height:
        1;

    background:
        conic-gradient(
            from -45deg,
            #4285f4 0deg 90deg,
            #34a853 90deg 180deg,
            #fbbc05 180deg 270deg,
            #ea4335 270deg 360deg
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

}


/* ----------------------------------------------------------
   MOBILE / TABLET FEATURE FALLBACK
   ---------------------------------------------------------- */

@media (max-width: 900px) and (min-width: 641px) {

    .feature-grid {

        display:
            flex !important;

        flex-wrap:
            wrap !important;

        justify-content:
            center !important;

        gap:
            7px !important;

    }


    .feature-card {

        flex:
            0 0 auto !important;

    }


    .feature-card small {

        display:
            none !important;

    }

}


/* ==================== END V13.3 ==================== */



/* ==========================================================
   ALUQAB AI — V13.4 FINAL AUTH POLISH
   ========================================================== */


@media (min-width: 901px) {

    /*
     * Raise the AI identity area.
     * Keep it clear of the large company text
     * embedded inside the hero artwork.
     */

    .brand-content {

        width:
            min(680px, 88%) !important;

        margin:
            0 auto clamp(205px, 24vh, 275px) !important;

    }


    /*
     * Main product title
     */

    .product-title,
    .brand-content h1 {

        margin:
            0 0 5px !important;

        font-size:
            clamp(34px, 2.65vw, 46px) !important;

        line-height:
            1.05 !important;

        letter-spacing:
            -.4px !important;

        color:
            #ffffff !important;

        text-shadow:
            0 3px 14px rgba(0,0,0,.55),
            0 1px 3px rgba(0,0,0,.60) !important;

    }


    .product-title span {

        color:
            #ffc443 !important;

    }


    .product-description,
    .brand-content > p {

        margin:
            0 0 15px !important;

        font-size:
            13px !important;

        font-weight:
            500 !important;

        color:
            rgba(255,255,255,.94) !important;

        text-shadow:
            0 2px 8px rgba(0,0,0,.55) !important;

    }


    /*
     * Premium feature ribbon.
     */

    .feature-grid {

        width:
            fit-content !important;

        max-width:
            96% !important;

        padding:
            8px 13px !important;

        gap:
            0 !important;

        border:
            1px solid rgba(255,255,255,.34) !important;

        border-radius:
            999px !important;

        background:
            linear-gradient(
                135deg,
                rgba(5,29,48,.56),
                rgba(10,48,72,.38)
            ) !important;

        box-shadow:
            0 10px 30px rgba(0,18,32,.22),
            inset 0 1px 0 rgba(255,255,255,.08) !important;

        -webkit-backdrop-filter:
            blur(12px) saturate(135%) !important;

        backdrop-filter:
            blur(12px) saturate(135%) !important;

    }


    .feature-card {

        padding:
            6px 17px !important;

        gap:
            7px !important;

    }


    .feature-card:not(:last-child)::after {

        top:
            19% !important;

        height:
            62% !important;

        background:
            rgba(255,255,255,.25) !important;

    }


    .feature-icon {

        font-size:
            15px !important;

        color:
            #ffca48 !important;

        filter:
            drop-shadow(
                0 2px 5px rgba(0,0,0,.30)
            );

    }


    .feature-card strong {

        font-size:
            11.5px !important;

        font-weight:
            800 !important;

        color:
            rgba(255,255,255,.98) !important;

        text-shadow:
            0 2px 7px rgba(0,0,0,.40) !important;

    }


    .feature-card small {

        display:
            none !important;

    }

}


/* ==========================================================
   GOOGLE BUTTON CLEANUP
   ========================================================== */


/*
 * The HTML already contains a small Google G.
 * Hide that old inline mark so we don't get G G.
 */

.google-login-button span:last-child,
.google-login-button .google-icon,
.google-login-button .social-icon,
.google-login-button .provider-icon {

    display:
        none !important;

}


/*
 * Also hide simple inline icon elements.
 */

.google-login-button > i,
.google-login-button > svg {

    display:
        none !important;

}


/*
 * One clean multicolor Google G.
 */

.google-login-button::before {

    content:
        "G" !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    width:
        21px !important;

    height:
        21px !important;

    flex:
        0 0 21px !important;

    margin-inline-start:
        5px !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size:
        18px !important;

    font-weight:
        900 !important;

    line-height:
        1 !important;

    background:
        conic-gradient(
            from -45deg,
            #4285f4 0deg 90deg,
            #34a853 90deg 180deg,
            #fbbc05 180deg 270deg,
            #ea4335 270deg 360deg
        ) !important;

    -webkit-background-clip:
        text !important;

    background-clip:
        text !important;

    -webkit-text-fill-color:
        transparent !important;

    color:
        transparent !important;

}


/*
 * Keep provider buttons clean and aligned.
 */

.google-login-button {

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap:
        7px !important;

}


/* ==========================================================
   RESPONSIVE PROTECTION
   ========================================================== */

@media (max-width: 1180px) and (min-width: 901px) {

    .brand-content {

        width:
            88% !important;

        margin-bottom:
            185px !important;

    }


    .feature-card {

        padding:
            5px 11px !important;

    }


    .feature-card strong {

        font-size:
            10px !important;

    }

}


/* ==================== END V13.4 ==================== */


/* V13.5 — REMOVE HERO PRODUCT TITLE ONLY */

@media (min-width: 901px) {

    .brand-content .product-title,
    .brand-content .product-description {
        display: none !important;
    }

    .feature-grid {
        margin: 0 auto !important;
    }

}



/* ==========================================================
   ALUQAB AI — V14 CINEMATIC GLASS AUTH
   ========================================================== */


@media (min-width: 901px) {


    /* ======================================================
       LEFT AUTH AREA
       Let the cinematic atmosphere continue behind the card
       ====================================================== */

    .auth-form-side {

        position:
            relative !important;

        background:
            linear-gradient(
                145deg,
                #eef8ff 0%,
                #f8fbfd 48%,
                #fff7e7 100%
            ) !important;

        overflow:
            hidden !important;

    }


    /*
     * Warm atmospheric glow
     */

    .auth-form-side::before {

        content:
            "";

        position:
            absolute;

        width:
            520px;

        height:
            520px;

        left:
            -190px;

        bottom:
            -170px;

        border-radius:
            50%;

        background:
            radial-gradient(
                circle,
                rgba(255,183,42,.20) 0%,
                rgba(255,183,42,.07) 38%,
                transparent 70%
            );

        pointer-events:
            none;

    }


    /*
     * Cool blue glow to visually connect
     * with the digital side of the hero.
     */

    .auth-form-side::after {

        content:
            "";

        position:
            absolute;

        width:
            500px;

        height:
            500px;

        right:
            -220px;

        top:
            -190px;

        border-radius:
            50%;

        background:
            radial-gradient(
                circle,
                rgba(28,139,215,.16),
                rgba(28,139,215,.04) 45%,
                transparent 72%
            );

        pointer-events:
            none;

    }


    /* ======================================================
       LOGIN CARD
       ====================================================== */

    .auth-card {

        position:
            relative !important;

        z-index:
            5 !important;

        width:
            min(500px, calc(100% - 70px)) !important;

        padding:
            36px 34px 28px !important;

        border:
            1px solid rgba(224,164,42,.55) !important;

        border-radius:
            26px !important;

        background:
            linear-gradient(
                145deg,
                rgba(255,255,255,.78),
                rgba(246,250,253,.68)
            ) !important;

        box-shadow:
            0 34px 80px rgba(12,39,61,.18),
            0 14px 32px rgba(12,39,61,.10),
            0 0 0 1px rgba(255,255,255,.65) inset,
            0 1px 0 rgba(255,255,255,.95) inset,
            0 -1px 0 rgba(212,151,31,.14) inset !important;

        -webkit-backdrop-filter:
            blur(22px) saturate(145%) !important;

        backdrop-filter:
            blur(22px) saturate(145%) !important;

    }


    /*
     * Golden highlight along the top.
     */

    .auth-card::before {

        content:
            "";

        position:
            absolute;

        top:
            -1px;

        left:
            12%;

        right:
            12%;

        height:
            2px;

        border-radius:
            999px;

        background:
            linear-gradient(
                90deg,
                transparent,
                #e2a52d,
                #ffd66b,
                #e2a52d,
                transparent
            );

        box-shadow:
            0 0 16px rgba(234,172,48,.34);

        pointer-events:
            none;

    }


    /*
     * Very subtle golden glow behind the card.
     */

    .auth-card::after {

        content:
            "";

        position:
            absolute;

        inset:
            14px;

        z-index:
            -1;

        border-radius:
            24px;

        box-shadow:
            0 0 60px rgba(220,157,32,.08);

        pointer-events:
            none;

    }


    /* ======================================================
       HEADING
       ====================================================== */

    .auth-eyebrow {

        color:
            #b97908 !important;

        font-weight:
            800 !important;

        letter-spacing:
            3px !important;

    }


    .auth-heading h1 {

        color:
            #102a43 !important;

        font-weight:
            900 !important;

        text-shadow:
            0 1px 0 rgba(255,255,255,.9) !important;

    }


    .auth-heading p {

        color:
            #728398 !important;

    }


    /* ======================================================
       LOGIN / REGISTER TABS
       ====================================================== */

    .auth-tabs {

        padding:
            4px !important;

        border:
            1px solid rgba(135,164,189,.25) !important;

        border-radius:
            14px !important;

        background:
            rgba(229,239,247,.72) !important;

        box-shadow:
            inset 0 1px 3px rgba(26,58,83,.06) !important;

    }


    .auth-tab {

        min-height:
            43px !important;

        border-radius:
            11px !important;

        color:
            #50677c !important;

        font-weight:
            800 !important;

        transition:
            transform .18s ease,
            box-shadow .18s ease,
            background .18s ease !important;

    }


    .auth-tab.active {

        color:
            #10283d !important;

        background:
            linear-gradient(
                135deg,
                #ffd467,
                #f4a914
            ) !important;

        box-shadow:
            0 8px 20px rgba(226,156,21,.25),
            inset 0 1px 0 rgba(255,255,255,.55) !important;

    }


    /* ======================================================
       INPUTS
       ====================================================== */

    .auth-card input[type="email"],
    .auth-card input[type="password"],
    .auth-card input[type="text"] {

        min-height:
            48px !important;

        border:
            1px solid rgba(137,168,194,.38) !important;

        border-radius:
            12px !important;

        background:
            linear-gradient(
                180deg,
                rgba(248,252,255,.86),
                rgba(239,247,252,.76)
            ) !important;

        color:
            #17324a !important;

        box-shadow:
            inset 0 2px 4px rgba(20,52,77,.035),
            0 1px 0 rgba(255,255,255,.9) !important;

        transition:
            border-color .18s ease,
            box-shadow .18s ease,
            background .18s ease !important;

    }


    .auth-card input:focus {

        outline:
            none !important;

        border-color:
            rgba(224,159,29,.72) !important;

        background:
            rgba(255,255,255,.94) !important;

        box-shadow:
            0 0 0 4px rgba(237,173,43,.11),
            0 8px 20px rgba(24,63,92,.06) !important;

    }


    .auth-card label {

        color:
            #1e3850 !important;

        font-weight:
            800 !important;

    }


    /* ======================================================
       PRIMARY LOGIN BUTTON
       ====================================================== */

    .auth-card button[type="submit"] {

        min-height:
            50px !important;

        border:
            1px solid rgba(221,147,8,.42) !important;

        border-radius:
            13px !important;

        color:
            #10263a !important;

        font-weight:
            900 !important;

        background:
            linear-gradient(
                110deg,
                #ffd66c 0%,
                #ffc344 40%,
                #f2a40e 100%
            ) !important;

        box-shadow:
            0 12px 24px rgba(225,151,13,.20),
            inset 0 1px 0 rgba(255,255,255,.58) !important;

        transition:
            transform .18s ease,
            box-shadow .18s ease,
            filter .18s ease !important;

    }


    .auth-card button[type="submit"]:hover {

        transform:
            translateY(-2px) !important;

        filter:
            brightness(1.025) !important;

        box-shadow:
            0 16px 30px rgba(225,151,13,.28),
            inset 0 1px 0 rgba(255,255,255,.68) !important;

    }


    .auth-card button[type="submit"]:active {

        transform:
            translateY(0) scale(.995) !important;

    }


    /* ======================================================
       FORGOT PASSWORD
       ====================================================== */

    .auth-card a {

        transition:
            color .18s ease,
            opacity .18s ease !important;

    }


    /* ======================================================
       SEPARATOR
       ====================================================== */

    .auth-separator {

        color:
            #8b9aab !important;

    }


    .auth-separator::before,
    .auth-separator::after {

        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(127,151,171,.30),
                transparent
            ) !important;

    }


    /* ======================================================
       GOOGLE / GITHUB
       ====================================================== */

    .login-options button,
    .future-login-options button {

        min-height:
            45px !important;

        border:
            1px solid rgba(129,158,183,.32) !important;

        border-radius:
            12px !important;

        background:
            rgba(255,255,255,.66) !important;

        color:
            #253d52 !important;

        font-weight:
            800 !important;

        box-shadow:
            0 5px 14px rgba(20,52,77,.045),
            inset 0 1px 0 rgba(255,255,255,.85) !important;

        -webkit-backdrop-filter:
            blur(10px) !important;

        backdrop-filter:
            blur(10px) !important;

        transition:
            transform .18s ease,
            border-color .18s ease,
            box-shadow .18s ease !important;

    }


    .login-options button:hover,
    .future-login-options button:hover {

        transform:
            translateY(-2px) !important;

        border-color:
            rgba(214,153,32,.48) !important;

        box-shadow:
            0 10px 22px rgba(25,58,82,.09) !important;

    }


    /* ======================================================
       LANGUAGE SWITCH
       ====================================================== */

    .auth-language-area {

        z-index:
            10 !important;

    }


    .language-switch {

        padding:
            4px !important;

        border:
            1px solid rgba(129,158,183,.26) !important;

        background:
            rgba(255,255,255,.70) !important;

        box-shadow:
            0 9px 25px rgba(23,58,84,.10) !important;

        -webkit-backdrop-filter:
            blur(14px) !important;

        backdrop-filter:
            blur(14px) !important;

    }


    .language-switch .active {

        background:
            linear-gradient(
                135deg,
                #ffd56a,
                #f5aa17
            ) !important;

        box-shadow:
            0 5px 13px rgba(220,151,18,.18) !important;

    }

}


/* ==========================================================
   MOBILE
   Keep the same identity without making the phone too dark.
   ========================================================== */

@media (max-width: 900px) {

    .auth-card {

        border:
            1px solid rgba(218,157,34,.38) !important;

        box-shadow:
            0 24px 55px rgba(18,52,77,.14),
            0 0 0 1px rgba(255,255,255,.7) inset !important;

    }

}


/* ====================== END V14 ========================== */



/* ==========================================================
   ALUQAB AI — V14.1 FINAL GLASS AUTH OVERRIDE
   ========================================================== */

@media (min-width: 901px) {

    /*
     * LOGIN CARD — FINAL AUTHORITY
     */

    .auth-form-side .auth-card {

        position: relative !important;
        z-index: 20 !important;

        width:
            min(500px, calc(100% - 70px)) !important;

        padding:
            36px 34px 28px !important;

        border:
            1px solid rgba(255,255,255,.62) !important;

        border-radius:
            28px !important;

        /*
         * Actual glass.
         * Much more transparent than previous version.
         */

        background:
            linear-gradient(
                145deg,
                rgba(255,255,255,.58) 0%,
                rgba(255,255,255,.36) 48%,
                rgba(235,247,255,.27) 100%
            ) !important;

        -webkit-backdrop-filter:
            blur(24px)
            saturate(145%) !important;

        backdrop-filter:
            blur(24px)
            saturate(145%) !important;

        /*
         * Floating / 3D effect.
         */

        box-shadow:

            0 38px 75px
            rgba(13,45,69,.20),

            0 16px 32px
            rgba(26,68,96,.11),

            -14px 0 38px
            rgba(69,160,213,.07),

            14px 0 38px
            rgba(231,166,36,.08),

            inset 0 1px 0
            rgba(255,255,255,.96),

            inset 1px 0 0
            rgba(255,255,255,.42),

            inset 0 -1px 0
            rgba(74,119,150,.10)

            !important;

        overflow:
            visible !important;

        transform:
            translateZ(0);

        isolation:
            isolate;

    }


    /*
     * GOLDEN TOP REFLECTION
     */

    .auth-form-side .auth-card::before {

        content:
            "" !important;

        position:
            absolute !important;

        top:
            -1px !important;

        left:
            9% !important;

        right:
            9% !important;

        height:
            3px !important;

        border-radius:
            0 0 12px 12px !important;

        background:
            linear-gradient(
                90deg,
                transparent 0%,
                rgba(244,177,45,.20) 14%,
                rgba(255,206,94,.95) 50%,
                rgba(244,177,45,.20) 86%,
                transparent 100%
            ) !important;

        box-shadow:
            0 3px 15px
            rgba(238,166,30,.18) !important;

        pointer-events:
            none !important;

        z-index:
            3 !important;

    }


    /*
     * SHADOW / LIGHT AURA BEHIND CARD
     */

    .auth-form-side .auth-card::after {

        content:
            "" !important;

        position:
            absolute !important;

        z-index:
            -1 !important;

        inset:
            20px -15px -24px 18px !important;

        border-radius:
            30px !important;

        background:
            linear-gradient(
                120deg,
                rgba(69,164,220,.09),
                transparent 42%,
                rgba(237,172,39,.10)
            ) !important;

        filter:
            blur(24px) !important;

        opacity:
            .90 !important;

        pointer-events:
            none !important;

    }


    /*
     * Keep all card content above glass layers.
     */

    .auth-form-side .auth-card > * {

        position:
            relative;

        z-index:
            4;

    }


    /*
     * Heading becomes part of the premium card.
     */

    .auth-form-side .auth-heading h2 {

        color:
            #102b43 !important;

        text-shadow:
            0 1px 0 rgba(255,255,255,.82) !important;

    }


    .auth-form-side .auth-heading p {

        color:
            #6c8294 !important;

    }


    /*
     * Tabs — translucent instead of flat grey.
     */

    .auth-form-side .auth-tabs {

        border:
            1px solid rgba(116,157,188,.22) !important;

        background:
            rgba(229,241,249,.54) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.90),
            0 5px 14px rgba(31,70,98,.045) !important;

        -webkit-backdrop-filter:
            blur(12px) !important;

        backdrop-filter:
            blur(12px) !important;

    }


    /*
     * Inputs — frosted fields.
     */

    .auth-form-side .input-shell {

        background:
            rgba(246,251,255,.54) !important;

        border:
            1px solid rgba(123,163,194,.31) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.90),
            0 5px 13px rgba(29,67,94,.035) !important;

        -webkit-backdrop-filter:
            blur(10px) !important;

        backdrop-filter:
            blur(10px) !important;

    }


    .auth-form-side .auth-card input[type="email"],
    .auth-form-side .auth-card input[type="password"],
    .auth-form-side .auth-card input[type="text"] {

        background:
            transparent !important;

        box-shadow:
            none !important;

    }


    /*
     * Social buttons.
     */

    .auth-form-side .social-button {

        background:
            rgba(255,255,255,.48) !important;

        border:
            1px solid rgba(122,160,190,.27) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.92),
            0 5px 13px rgba(28,66,93,.035) !important;

        -webkit-backdrop-filter:
            blur(10px) !important;

        backdrop-filter:
            blur(10px) !important;

    }


    /*
     * Slight perspective impression.
     */

    .auth-form-side {

        perspective:
            1200px;

    }

}


/*
 * MOBILE — retain premium appearance
 * but avoid excessive blur / GPU load.
 */

@media (max-width: 900px) {

    .auth-form-side .auth-card {

        background:
            linear-gradient(
                145deg,
                rgba(255,255,255,.88),
                rgba(245,251,255,.78)
            ) !important;

        border:
            1px solid rgba(218,157,34,.30) !important;

        box-shadow:
            0 24px 55px rgba(18,52,77,.14),
            inset 0 1px 0 rgba(255,255,255,.90) !important;

        -webkit-backdrop-filter:
            blur(18px) !important;

        backdrop-filter:
            blur(18px) !important;

    }

}


/* ================= END V14.1 ================= */


/* ==========================================================
   ALUQAB AI — V14.2 PREMIUM VISUAL POLISH
   ========================================================== */

@media (min-width: 901px) {


    /* ------------------------------------------------------
       AUTH SIDE
       Softer visual connection with hero
       ------------------------------------------------------ */

    .auth-form-side {

        background:

            radial-gradient(
                circle at 100% 48%,
                rgba(244,174,39,.13) 0,
                rgba(244,174,39,.045) 24%,
                transparent 48%
            ),

            radial-gradient(
                circle at 8% 10%,
                rgba(61,164,224,.10) 0,
                transparent 42%
            ),

            linear-gradient(
                135deg,
                #eef9ff 0%,
                #f7fbfd 48%,
                #fff9ec 100%
            )

            !important;

    }


    /* ------------------------------------------------------
       CARD — wider, shorter, floating
       ------------------------------------------------------ */

    .auth-form-side .auth-card {

        width:
            min(535px, calc(100% - 64px)) !important;

        padding:
            32px 38px 25px !important;

        border-radius:
            30px !important;

        border:
            1px solid rgba(255,255,255,.74) !important;

        background:

            linear-gradient(
                135deg,
                rgba(255,255,255,.66) 0%,
                rgba(250,253,255,.48) 47%,
                rgba(255,248,231,.42) 100%
            )

            !important;

        box-shadow:

            0 45px 85px
            rgba(17,47,68,.18),

            0 20px 38px
            rgba(17,47,68,.10),

            18px 10px 45px
            rgba(231,166,38,.09),

            -16px -6px 40px
            rgba(63,154,210,.07),

            inset 0 1px 0
            rgba(255,255,255,.98),

            inset 1px 0 0
            rgba(255,255,255,.55),

            inset 0 -1px 0
            rgba(179,135,52,.09)

            !important;

        -webkit-backdrop-filter:
            blur(26px) saturate(150%) !important;

        backdrop-filter:
            blur(26px) saturate(150%) !important;

    }


    /* ------------------------------------------------------
       Golden light reflection
       ------------------------------------------------------ */

    .auth-form-side .auth-card::before {

        left:
            13% !important;

        right:
            13% !important;

        height:
            2px !important;

        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(240,170,27,.35),
                #ffd978,
                rgba(240,170,27,.35),
                transparent
            ) !important;

        box-shadow:
            0 2px 15px rgba(238,170,37,.24) !important;

    }


    /* ------------------------------------------------------
       Card depth underneath
       ------------------------------------------------------ */

    .auth-form-side .auth-card::after {

        inset:
            30px -20px -30px 30px !important;

        background:
            linear-gradient(
                120deg,
                rgba(53,154,216,.08),
                transparent 45%,
                rgba(239,174,41,.13)
            ) !important;

        filter:
            blur(28px) !important;

    }


    /* ------------------------------------------------------
       Heading
       ------------------------------------------------------ */

    .auth-form-side .auth-heading {

        margin-bottom:
            21px !important;

    }


    .auth-form-side .auth-eyebrow {

        font-size:
            10px !important;

        letter-spacing:
            3.2px !important;

        color:
            #b87908 !important;

    }


    .auth-form-side .auth-heading h2 {

        margin-top:
            8px !important;

        font-size:
            clamp(27px, 2vw, 34px) !important;

        line-height:
            1.25 !important;

        font-weight:
            900 !important;

        color:
            #102a43 !important;

    }


    .auth-form-side .auth-heading p {

        margin-top:
            5px !important;

        color:
            #75899a !important;

    }


    /* ------------------------------------------------------
       Tabs
       ------------------------------------------------------ */

    .auth-form-side .auth-tabs {

        margin-bottom:
            25px !important;

        border-radius:
            14px !important;

        background:
            rgba(232,242,249,.55) !important;

    }


    .auth-form-side .auth-tab {

        min-height:
            43px !important;

    }


    .auth-form-side .auth-tab.active {

        background:
            linear-gradient(
                115deg,
                #ffd66c,
                #f5a914
            ) !important;

        box-shadow:
            0 8px 19px rgba(221,151,17,.22),
            inset 0 1px 0 rgba(255,255,255,.60)
            !important;

    }


    /* ------------------------------------------------------
       Form spacing
       ------------------------------------------------------ */

    .auth-form-side .field-group {

        margin-bottom:
            18px !important;

    }


    .auth-form-side .field-group label {

        margin-bottom:
            7px !important;

    }


    /* ------------------------------------------------------
       Inputs
       ------------------------------------------------------ */

    .auth-form-side .input-shell {

        min-height:
            48px !important;

        border-radius:
            13px !important;

        border:
            1px solid rgba(117,158,188,.32) !important;

        background:
            linear-gradient(
                180deg,
                rgba(250,253,255,.70),
                rgba(240,248,253,.52)
            ) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.94),
            0 5px 15px rgba(31,70,98,.035)
            !important;

        transition:
            border-color .18s ease,
            box-shadow .18s ease,
            transform .18s ease !important;

    }


    .auth-form-side .input-shell:focus-within {

        border-color:
            rgba(221,157,31,.67) !important;

        box-shadow:
            0 0 0 4px rgba(231,168,39,.09),
            0 9px 22px rgba(31,70,98,.055),
            inset 0 1px 0 rgba(255,255,255,.96)
            !important;

        transform:
            translateY(-1px);

    }


    /* ------------------------------------------------------
       Remember / forgot row
       ------------------------------------------------------ */

    .auth-form-side .login-options {

        margin-top:
            2px !important;

        margin-bottom:
            21px !important;

    }


    /* ------------------------------------------------------
       Main CTA
       ------------------------------------------------------ */

    .auth-form-side .primary-button,
    .auth-form-side button[type="submit"] {

        min-height:
            51px !important;

        border-radius:
            13px !important;

        background:
            linear-gradient(
                110deg,
                #ffd568 0%,
                #ffc342 40%,
                #f2a20d 100%
            ) !important;

        border:
            1px solid rgba(214,141,5,.42) !important;

        box-shadow:
            0 14px 27px rgba(221,148,13,.20),
            inset 0 1px 0 rgba(255,255,255,.63)
            !important;

    }


    .auth-form-side .primary-button:hover,
    .auth-form-side button[type="submit"]:hover {

        transform:
            translateY(-2px) !important;

        box-shadow:
            0 18px 32px rgba(221,148,13,.27),
            inset 0 1px 0 rgba(255,255,255,.70)
            !important;

    }


    /* ------------------------------------------------------
       Separator
       ------------------------------------------------------ */

    .auth-form-side .auth-separator {

        margin:
            19px 0 17px !important;

    }


    /* ------------------------------------------------------
       Google + GitHub
       ------------------------------------------------------ */

    .auth-form-side .social-button {

        min-height:
            45px !important;

        border-radius:
            13px !important;

        background:
            rgba(255,255,255,.55) !important;

        border:
            1px solid rgba(117,157,187,.28) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.95),
            0 6px 16px rgba(29,67,94,.04)
            !important;

    }


    .auth-form-side .social-button:hover {

        transform:
            translateY(-2px) !important;

        border-color:
            rgba(219,156,30,.46) !important;

        background:
            rgba(255,255,255,.74) !important;

        box-shadow:
            0 10px 22px rgba(27,64,91,.08),
            inset 0 1px 0 rgba(255,255,255,.98)
            !important;

    }


    /* ------------------------------------------------------
       Footer/privacy text
       ------------------------------------------------------ */

    .auth-form-side .auth-footer-note {

        margin-top:
            16px !important;

        opacity:
            .78;

    }


    /* ------------------------------------------------------
       Language control
       ------------------------------------------------------ */

    .auth-form-side .language-switch {

        border:
            1px solid rgba(255,255,255,.75) !important;

        background:
            rgba(255,255,255,.67) !important;

        box-shadow:
            0 11px 26px rgba(26,61,87,.10),
            inset 0 1px 0 rgba(255,255,255,.96)
            !important;

    }

}


/* ==========================================================
   V14.2 MOBILE
   ========================================================== */

@media (max-width: 900px) {

    .auth-form-side .auth-card {

        border-radius:
            24px !important;

        background:
            linear-gradient(
                145deg,
                rgba(255,255,255,.91),
                rgba(246,251,255,.82)
            ) !important;

        box-shadow:
            0 26px 58px rgba(18,52,77,.15),
            0 8px 22px rgba(18,52,77,.07),
            inset 0 1px 0 rgba(255,255,255,.96)
            !important;

    }

}


/* ================= END V14.2 ================= */


/* V14.2 GOOGLE ICON CLEANUP */

.social-button.google-button .google-icon > *:not(:first-child),
.social-button[data-provider="google"] .google-icon > *:not(:first-child) {
    display: none !important;
}

.google-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 19px !important;
    height: 19px !important;
    flex: 0 0 19px !important;
}



/* ==========================================================
   ALUQAB AI — V15 EXACT REFERENCE UI
   FINAL AUTH OVERRIDE
   ========================================================== */

@media (min-width: 901px) {

    /* ===== WHOLE SCREEN ===== */

    #auth-screen.auth-screen {
        position: fixed !important;
        inset: 0 !important;

        width: 100vw !important;
        height: 100vh !important;
        min-height: 100vh !important;

        display: block !important;
        overflow: hidden !important;

        background:
            #08131d
            url("/assets/aluqab-ai-hero.png")
            center center / cover no-repeat !important;
    }


    /* cinematic depth */

    #auth-screen.auth-screen::before {
        content: "" !important;

        position: absolute !important;
        inset: 0 !important;
        z-index: 1 !important;

        pointer-events: none !important;

        background:
            radial-gradient(
                circle at 17% 50%,
                rgba(239,166,49,.19),
                transparent 31%
            ),
            linear-gradient(
                90deg,
                rgba(4,11,17,.34) 0%,
                rgba(4,11,17,.09) 35%,
                transparent 62%
            ) !important;
    }


    #auth-screen.auth-screen::after {
        content: "" !important;

        position: absolute !important;
        inset: 0 !important;
        z-index: 1 !important;

        pointer-events: none !important;

        box-shadow:
            inset 0 0 120px rgba(0,0,0,.25) !important;
    }


    /* ===== HERO CONTENT ===== */

    #auth-screen .auth-brand-panel {
        position: absolute !important;
        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;

        z-index: 2 !important;

        background: transparent !important;

        overflow: visible !important;

        pointer-events: none !important;
    }


    #auth-screen .brand-decoration {
        display: none !important;
    }


    #auth-screen .brand-content {
        position: absolute !important;

        left: 55.5% !important;
        top: 63.5% !important;

        transform: translateX(-50%) !important;

        width: min(500px, 28vw) !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;

        padding: 0 !important;
        margin: 0 !important;

        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;

        color: white !important;
    }


    /* Remove title/subtitle from hero.
       Company/founder text already belongs to hero artwork. */

    #auth-screen .brand-content .product-title,
    #auth-screen .brand-content .product-description {
        display: none !important;
    }


    /* ===== FEATURE BAR ===== */

    #auth-screen .feature-grid {
        width: min(500px, 28vw) !important;

        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;

        gap: 0 !important;

        padding: 7px 10px !important;
        margin: 0 !important;

        direction: rtl !important;

        border:
            1px solid rgba(255,210,118,.24) !important;

        border-radius:
            18px !important;

        background:
            linear-gradient(
                180deg,
                rgba(9,18,25,.58),
                rgba(9,18,25,.72)
            ) !important;

        box-shadow:
            0 16px 36px rgba(0,0,0,.28),
            inset 0 1px 0 rgba(255,255,255,.12),
            0 0 24px rgba(230,165,43,.08)
            !important;

        backdrop-filter:
            blur(15px) saturate(130%) !important;

        -webkit-backdrop-filter:
            blur(15px) saturate(130%) !important;
    }


    #auth-screen .feature-card {
        min-width: 0 !important;
        min-height: 42px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        gap: 6px !important;

        padding: 4px 8px !important;
        margin: 0 !important;

        border: 0 !important;
        border-radius: 0 !important;

        background: transparent !important;

        box-shadow: none !important;

        color: white !important;
    }


    #auth-screen .feature-card:not(:last-child) {
        border-left:
            1px solid rgba(255,255,255,.11) !important;
    }


    #auth-screen .feature-card:hover {
        transform: none !important;
        background:
            rgba(255,190,63,.06) !important;
    }


    #auth-screen .feature-icon {
        width: 25px !important;
        height: 25px !important;

        flex: 0 0 25px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        padding: 0 !important;
        margin: 0 !important;

        border: 0 !important;

        background: transparent !important;

        color: #ffc342 !important;

        font-size: 15px !important;

        box-shadow: none !important;
    }


    #auth-screen .feature-card strong {
        display: block !important;

        color: #fff !important;

        font-size: 10px !important;
        line-height: 1.2 !important;
        font-weight: 800 !important;

        white-space: nowrap !important;
    }


    #auth-screen .feature-card small {
        display: none !important;
    }


    /* ===== AUTH SIDE BECOMES TRANSPARENT ===== */

    #auth-screen .auth-form-side {
        position: absolute !important;
        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;

        z-index: 5 !important;

        display: block !important;

        padding: 0 !important;
        margin: 0 !important;

        background: transparent !important;

        overflow: visible !important;

        pointer-events: none !important;
    }


    /* ===== LANGUAGE ===== */

    #auth-screen .auth-language-area {
        position: absolute !important;

        left: 28% !important;
        top: 2.1% !important;

        transform: translateX(-50%) !important;

        width: auto !important;

        padding: 0 !important;
        margin: 0 !important;

        z-index: 20 !important;

        pointer-events: auto !important;
    }


    #auth-screen .language-switch {
        min-height: 40px !important;

        padding: 4px 7px !important;

        border:
            1px solid rgba(255,255,255,.18) !important;

        border-radius:
            24px !important;

        background:
            rgba(13,23,31,.57) !important;

        box-shadow:
            0 9px 28px rgba(0,0,0,.27),
            inset 0 1px 0 rgba(255,255,255,.12)
            !important;

        backdrop-filter:
            blur(15px) !important;

        -webkit-backdrop-filter:
            blur(15px) !important;
    }


    #auth-screen .language-option {
        color:
            rgba(255,255,255,.78) !important;
    }


    #auth-screen .language-option.active {
        color: #111c24 !important;

        background:
            linear-gradient(
                135deg,
                #ffd564,
                #f4a711
            ) !important;

        box-shadow:
            0 4px 13px rgba(244,166,20,.28) !important;
    }


    #auth-screen .language-globe {
        color:
            rgba(255,255,255,.80) !important;
    }


    /* ===== AUTH CARD ===== */

    #auth-screen .auth-card {
        position: absolute !important;

        left: 9.3% !important;
        top: 10.8% !important;

        width: 25.2vw !important;
        max-width: 510px !important;
        min-width: 430px !important;

        height: auto !important;

        padding:
            28px 34px 22px !important;

        margin: 0 !important;

        border:
            1px solid rgba(255,205,112,.72) !important;

        border-radius:
            24px !important;

        background:
            linear-gradient(
                145deg,
                rgba(27,31,33,.64) 0%,
                rgba(17,23,28,.68) 52%,
                rgba(29,25,19,.61) 100%
            ) !important;

        color: white !important;

        box-shadow:
            0 30px 65px rgba(0,0,0,.43),
            0 0 28px rgba(255,174,39,.18),
            inset 0 1px 0 rgba(255,255,255,.16),
            inset 0 0 28px rgba(255,184,52,.035)
            !important;

        backdrop-filter:
            blur(18px) saturate(128%) !important;

        -webkit-backdrop-filter:
            blur(18px) saturate(128%) !important;

        z-index: 15 !important;

        pointer-events: auto !important;

        overflow: hidden !important;
    }


    #auth-screen .auth-card::before {
        content: "" !important;

        position: absolute !important;

        left: 8% !important;
        right: 8% !important;
        top: 0 !important;

        height: 1px !important;

        background:
            linear-gradient(
                90deg,
                transparent,
                #ffd26a,
                transparent
            ) !important;

        box-shadow:
            0 0 17px rgba(255,181,47,.70) !important;
    }


    #auth-screen .auth-card::after {
        content: "" !important;

        position: absolute !important;

        right: -80px !important;
        bottom: -100px !important;

        width: 230px !important;
        height: 230px !important;

        border-radius: 50% !important;

        background:
            rgba(255,168,26,.07) !important;

        filter:
            blur(38px) !important;

        pointer-events: none !important;
    }


    /* ===== HEADING ===== */

    #auth-screen .auth-heading {
        margin:
            0 0 18px !important;

        text-align: center !important;
    }


    #auth-screen .auth-eyebrow {
        color: #eeb23b !important;

        font-size: 10px !important;
        font-weight: 800 !important;
        letter-spacing: 4px !important;
    }


    #auth-screen .auth-heading h2 {
        margin:
            7px 0 3px !important;

        color: #fff !important;

        font-size:
            clamp(25px, 1.55vw, 32px) !important;

        line-height: 1.3 !important;
        font-weight: 900 !important;

        text-shadow:
            0 2px 10px rgba(0,0,0,.28) !important;
    }


    #auth-screen .auth-heading p {
        margin: 0 !important;

        color:
            rgba(255,255,255,.72) !important;

        font-size: 12px !important;
    }


    /* ===== TABS ===== */

    #auth-screen .auth-tabs {
        min-height: 47px !important;

        padding: 3px !important;
        margin:
            0 0 19px !important;

        border:
            1px solid rgba(255,255,255,.18) !important;

        border-radius:
            14px !important;

        background:
            rgba(255,255,255,.12) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.09) !important;
    }


    #auth-screen .auth-tab {
        min-height: 39px !important;

        border: 0 !important;
        border-radius: 11px !important;

        background: transparent !important;

        color:
            rgba(255,255,255,.82) !important;

        font-weight: 800 !important;
    }


    #auth-screen .auth-tab.active {
        color: #151b20 !important;

        background:
            linear-gradient(
                120deg,
                #ffd25d,
                #ee9e0c
            ) !important;

        box-shadow:
            0 7px 18px rgba(235,157,12,.31),
            inset 0 1px 0 rgba(255,255,255,.48)
            !important;
    }


    /* ===== FIELDS ===== */

    #auth-screen .field {
        margin-bottom: 15px !important;
    }


    #auth-screen .field label {
        display: block !important;

        margin-bottom: 6px !important;

        color: #fff !important;

        font-size: 11px !important;
        font-weight: 800 !important;

        text-shadow:
            0 1px 5px rgba(0,0,0,.25) !important;
    }


    #auth-screen .input-shell {
        min-height: 47px !important;

        border:
            1px solid rgba(255,255,255,.19) !important;

        border-radius:
            13px !important;

        background:
            linear-gradient(
                180deg,
                rgba(255,255,255,.14),
                rgba(255,255,255,.09)
            ) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.10),
            0 7px 17px rgba(0,0,0,.10)
            !important;

        backdrop-filter:
            blur(8px) !important;
    }


    #auth-screen .input-shell:focus-within {
        border-color:
            rgba(255,193,71,.75) !important;

        box-shadow:
            0 0 0 3px rgba(255,181,44,.11),
            inset 0 1px 0 rgba(255,255,255,.12)
            !important;

        transform: none !important;
    }


    #auth-screen .input-shell input {
        color: white !important;

        background: transparent !important;
    }


    #auth-screen .input-shell input::placeholder {
        color:
            rgba(255,255,255,.42) !important;
    }


    #auth-screen .input-icon,
    #auth-screen .password-toggle {
        color:
            rgba(255,255,255,.76) !important;
    }


    /* ===== LOGIN OPTIONS ===== */

    #auth-screen #login-options,
    #auth-screen .login-options {
        margin:
            1px 0 17px !important;

        color:
            rgba(255,255,255,.88) !important;
    }


    #auth-screen #login-options label,
    #auth-screen .login-options label {
        color:
            rgba(255,255,255,.88) !important;
    }


    #auth-screen #forgot-password {
        color: #ffc64e !important;
    }


    /* ===== SUBMIT ===== */

    #auth-screen #auth-submit,
    #auth-screen .primary-button,
    #auth-screen button[type="submit"] {
        min-height: 48px !important;

        border:
            1px solid rgba(255,203,91,.54) !important;

        border-radius:
            13px !important;

        color: #111b22 !important;

        font-weight: 900 !important;

        background:
            linear-gradient(
                110deg,
                #ffd765 0%,
                #ffbe34 45%,
                #ee970b 100%
            ) !important;

        box-shadow:
            0 11px 25px rgba(231,145,10,.30),
            inset 0 1px 0 rgba(255,255,255,.50)
            !important;
    }


    #auth-screen #auth-submit:hover,
    #auth-screen .primary-button:hover,
    #auth-screen button[type="submit"]:hover {
        transform:
            translateY(-1px) !important;

        filter:
            brightness(1.04) !important;
    }


    /* ===== SEPARATOR ===== */

    #auth-screen .auth-separator {
        margin:
            14px 0 !important;

        color:
            rgba(255,255,255,.72) !important;
    }


    #auth-screen .auth-separator::before,
    #auth-screen .auth-separator::after {
        background:
            rgba(255,255,255,.17) !important;
    }


    /* ===== SOCIAL ===== */

    #auth-screen .future-login-options {
        gap: 9px !important;
    }


    #auth-screen .social-button {
        min-height: 43px !important;

        border:
            1px solid rgba(255,255,255,.18) !important;

        border-radius:
            12px !important;

        color: white !important;

        background:
            linear-gradient(
                180deg,
                rgba(255,255,255,.14),
                rgba(255,255,255,.075)
            ) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.10),
            0 7px 17px rgba(0,0,0,.10)
            !important;

        backdrop-filter:
            blur(8px) !important;
    }


    #auth-screen .social-button:hover {
        transform:
            translateY(-1px) !important;

        border-color:
            rgba(255,193,72,.46) !important;

        background:
            rgba(255,255,255,.16) !important;
    }


    /* ===== FOOTER NOTE ===== */

    #auth-screen .auth-footer-note {
        margin-top:
            13px !important;

        color:
            rgba(255,255,255,.66) !important;

        font-size: 9px !important;

        opacity: 1 !important;
    }


    /* mobile logo never needed on desktop */

    #auth-screen .mobile-logo {
        display: none !important;
    }

}


/* ==========================================================
   V15 MOBILE
   Keep functional real form, use hero as background.
   ========================================================== */

@media (max-width: 900px) {

    #auth-screen.auth-screen {
        min-height: 100dvh !important;

        background:
            linear-gradient(
                rgba(5,13,20,.30),
                rgba(5,13,20,.46)
            ),
            url("/assets/aluqab-ai-hero.png")
            center center / cover no-repeat !important;
    }


    #auth-screen .auth-brand-panel {
        display: none !important;
    }


    #auth-screen .auth-form-side {
        min-height:
            100dvh !important;

        padding:
            78px 18px 28px !important;

        background:
            transparent !important;
    }


    #auth-screen .auth-card {
        width:
            min(100%, 480px) !important;

        margin:
            0 auto !important;

        padding:
            27px 22px 22px !important;

        border:
            1px solid rgba(255,205,112,.58) !important;

        border-radius:
            22px !important;

        color: white !important;

        background:
            rgba(13,21,27,.72) !important;

        box-shadow:
            0 28px 60px rgba(0,0,0,.38),
            0 0 25px rgba(255,177,42,.10)
            !important;

        backdrop-filter:
            blur(19px) saturate(125%) !important;

        -webkit-backdrop-filter:
            blur(19px) saturate(125%) !important;
    }


    #auth-screen .auth-heading h2,
    #auth-screen .field label {
        color: white !important;
    }


    #auth-screen .auth-heading p {
        color:
            rgba(255,255,255,.68) !important;
    }


    #auth-screen .input-shell {
        background:
            rgba(255,255,255,.10) !important;

        border-color:
            rgba(255,255,255,.18) !important;
    }


    #auth-screen .input-shell input {
        color: white !important;
    }


    #auth-screen .input-shell input::placeholder {
        color:
            rgba(255,255,255,.43) !important;
    }


    #auth-screen .auth-language-area {
        position:
            absolute !important;

        top:
            18px !important;

        left:
            50% !important;

        transform:
            translateX(-50%) !important;

        z-index:
            20 !important;
    }


    #auth-screen .language-switch {
        background:
            rgba(11,20,27,.67) !important;

        border:
            1px solid rgba(255,255,255,.16) !important;

        backdrop-filter:
            blur(13px) !important;
    }

}


/* ==================== END V15 ==================== */


/* ==========================================================
   ALUQAB AI — V15.1 REFERENCE ALIGNMENT
   ========================================================== */

@media (min-width: 901px) {

    /* background framing closer to reference */
    #auth-screen.auth-screen {
        background-image:
            linear-gradient(
                90deg,
                rgba(4,10,15,.12),
                rgba(4,10,15,.02)
            ),
            url("/assets/aluqab-ai-hero.png") !important;

        background-size:
            cover !important;

        background-position:
            center 46% !important;
    }


    /* remove unwanted dark horizontal header effect */
    #auth-screen.auth-screen::before {
        background:
            radial-gradient(
                circle at 19% 48%,
                rgba(245,171,43,.18),
                transparent 31%
            ),
            linear-gradient(
                90deg,
                rgba(3,8,13,.18) 0%,
                transparent 46%
            ) !important;
    }


    /* =========================
       AUTH CARD
       ========================= */

    #auth-screen .auth-card {
        left:
            9.6% !important;

        top:
            10.8% !important;

        width:
            26vw !important;

        min-width:
            470px !important;

        max-width:
            535px !important;

        padding:
            31px 36px 25px !important;

        border:
            1px solid rgba(255,196,77,.80) !important;

        border-radius:
            24px !important;

        background:
            linear-gradient(
                145deg,
                rgba(25,29,30,.82) 0%,
                rgba(16,21,24,.80) 48%,
                rgba(24,21,17,.79) 100%
            ) !important;

        box-shadow:
            0 35px 75px rgba(0,0,0,.50),
            0 0 0 1px rgba(255,194,70,.12),
            0 0 32px rgba(255,174,35,.29),
            inset 0 1px 0 rgba(255,255,255,.17),
            inset 0 0 42px rgba(255,173,39,.055)
            !important;

        backdrop-filter:
            blur(26px) saturate(118%) !important;

        -webkit-backdrop-filter:
            blur(26px) saturate(118%) !important;
    }


    /* golden illuminated border */
    #auth-screen .auth-card::before {
        left:
            5% !important;

        right:
            5% !important;

        height:
            2px !important;

        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(255,192,65,.45),
                #ffd36d,
                rgba(255,192,65,.45),
                transparent
            ) !important;

        box-shadow:
            0 0 18px rgba(255,183,48,.82) !important;
    }


    /* =========================
       LANGUAGE
       ========================= */

    #auth-screen .auth-language-area {
        left:
            34.3% !important;

        top:
            2.2% !important;

        transform:
            translateX(-50%) !important;
    }


    #auth-screen .language-switch {
        min-height:
            42px !important;

        padding:
            4px 7px !important;

        background:
            rgba(13,20,25,.69) !important;

        border:
            1px solid rgba(255,255,255,.17) !important;

        box-shadow:
            0 11px 27px rgba(0,0,0,.32),
            inset 0 1px 0 rgba(255,255,255,.13)
            !important;
    }


    /* =========================
       HEADING
       ========================= */

    #auth-screen .auth-heading {
        margin-bottom:
            21px !important;
    }


    #auth-screen .auth-eyebrow {
        color:
            #f1b53d !important;

        font-size:
            11px !important;

        letter-spacing:
            4.2px !important;
    }


    #auth-screen .auth-heading h2 {
        font-size:
            31px !important;

        color:
            #fff !important;

        text-shadow:
            0 3px 14px rgba(0,0,0,.44) !important;
    }


    #auth-screen .auth-heading p {
        color:
            rgba(255,255,255,.70) !important;
    }


    /* =========================
       INPUTS
       ========================= */

    #auth-screen .field {
        margin-bottom:
            18px !important;
    }


    #auth-screen .input-shell {
        min-height:
            49px !important;

        background:
            linear-gradient(
                180deg,
                rgba(255,255,255,.16),
                rgba(255,255,255,.10)
            ) !important;

        border:
            1px solid rgba(255,255,255,.22) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.12),
            0 8px 18px rgba(0,0,0,.13)
            !important;
    }


    /* =========================
       LOGIN BUTTON
       ========================= */

    #auth-screen #auth-submit,
    #auth-screen .primary-button,
    #auth-screen button[type="submit"] {
        min-height:
            51px !important;

        box-shadow:
            0 13px 28px rgba(240,151,11,.37),
            0 0 18px rgba(255,182,42,.14),
            inset 0 1px 0 rgba(255,255,255,.57)
            !important;
    }


    /* =========================
       SOCIAL BUTTONS
       ========================= */

    #auth-screen .social-button {
        min-height:
            46px !important;

        background:
            linear-gradient(
                180deg,
                rgba(255,255,255,.15),
                rgba(255,255,255,.08)
            ) !important;
    }


    /* =========================
       FEATURES
       move beside/below card
       ========================= */

    #auth-screen .brand-content {
        left:
            70.5% !important;

        top:
            65.5% !important;

        transform:
            translateX(-50%) !important;

        width:
            500px !important;
    }


    #auth-screen .feature-grid {
        width:
            500px !important;

        min-height:
            53px !important;

        padding:
            6px 12px !important;

        border:
            1px solid rgba(255,203,100,.26) !important;

        border-radius:
            18px !important;

        background:
            linear-gradient(
                180deg,
                rgba(14,21,25,.69),
                rgba(8,14,18,.75)
            ) !important;

        box-shadow:
            0 17px 38px rgba(0,0,0,.34),
            0 0 17px rgba(244,172,41,.09),
            inset 0 1px 0 rgba(255,255,255,.11)
            !important;

        backdrop-filter:
            blur(18px) !important;

        -webkit-backdrop-filter:
            blur(18px) !important;
    }


    #auth-screen .feature-card {
        min-height:
            40px !important;
    }


    #auth-screen .feature-card strong {
        font-size:
            11px !important;

        color:
            #fff !important;
    }


    #auth-screen .feature-icon {
        color:
            #ffc446 !important;

        font-size:
            16px !important;
    }

}


/* ================= END V15.1 ================= */


/* ==========================================================
   ALUQAB AI — V15.2 SHOW FULL ORIGINAL HERO
   ========================================================== */

@media (min-width: 901px) {

    #auth-screen.auth-screen {

        background-color:
            #071521 !important;

        background-image:
            url("/assets/aluqab-ai-v15-reference.png") !important;

        background-repeat:
            no-repeat !important;

        /*
         * IMPORTANT:
         * show the WHOLE reference image
         * without cropping eagle/company/details
         */
        background-size:
            100% 100% !important;

        background-position:
            center center !important;
    }


    /*
     * Disable old overlays that alter
     * the original reference artwork.
     */

    #auth-screen.auth-screen::before,
    #auth-screen.auth-screen::after {

        background:
            none !important;

        opacity:
            0 !important;

        pointer-events:
            none !important;
    }

}


/* ================= END V15.2 ================= */


/* ==========================================================
   ALUQAB AI — V16 CLEAN 5D HERO
   ========================================================== */


/* ---------- DESKTOP ---------- */

@media (min-width: 901px) {

    #auth-screen.auth-screen {

        position:
            relative !important;

        min-height:
            100vh !important;

        width:
            100% !important;

        overflow:
            hidden !important;

        background-color:
            #07111c !important;

        background-image:
            url("/assets/aluqab-ai-v16-hero.png") !important;

        background-repeat:
            no-repeat !important;

        background-position:
            center center !important;

        background-size:
            cover !important;
    }


    /*
     * Remove previous V15 reference-image overlays.
     */

    #auth-screen.auth-screen::before {

        content:
            "" !important;

        position:
            absolute !important;

        inset:
            0 !important;

        z-index:
            0 !important;

        pointer-events:
            none !important;

        opacity:
            1 !important;

        background:
            linear-gradient(
                90deg,
                rgba(3,10,18,.38) 0%,
                rgba(3,10,18,.18) 27%,
                rgba(3,10,18,.02) 52%,
                rgba(3,10,18,.03) 100%
            ) !important;
    }


    #auth-screen.auth-screen::after {

        content:
            "" !important;

        position:
            absolute !important;

        inset:
            0 !important;

        z-index:
            0 !important;

        pointer-events:
            none !important;

        opacity:
            1 !important;

        background:
            radial-gradient(
                circle at 20% 50%,
                rgba(255,176,31,.10),
                transparent 34%
            ) !important;
    }


    /*
     * Main layout.
     */

    #auth-screen .auth-form-side {

        position:
            relative !important;

        z-index:
            10 !important;

        width:
            44% !important;

        min-width:
            560px !important;

        max-width:
            760px !important;

        min-height:
            100vh !important;

        display:
            flex !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        padding:
            80px 55px 40px !important;

        background:
            transparent !important;
    }


    /*
     * Remove old brand panel.
     * The new artwork itself provides the visual branding.
     */

    #auth-screen .auth-brand-panel {

        position:
            absolute !important;

        inset:
            0 !important;

        width:
            100% !important;

        height:
            100% !important;

        background:
            transparent !important;

        pointer-events:
            none !important;
    }


    #auth-screen .auth-brand-panel .brand-content,
    #auth-screen .auth-brand-panel .brand-decoration,
    #auth-screen .auth-brand-panel .decoration-one,
    #auth-screen .auth-brand-panel .decoration-two {

        display:
            none !important;
    }


    /*
     * Premium floating glass login card.
     */

    #auth-screen .auth-card {

        position:
            relative !important;

        z-index:
            20 !important;

        width:
            min(100%, 500px) !important;

        margin:
            0 auto !important;

        padding:
            38px 36px 30px !important;

        border:
            1px solid rgba(255,190,60,.58) !important;

        border-radius:
            27px !important;

        color:
            #ffffff !important;

        background:
            linear-gradient(
                145deg,
                rgba(12,17,20,.78),
                rgba(19,19,17,.64)
            ) !important;

        box-shadow:
            0 30px 70px rgba(0,0,0,.38),
            0 8px 25px rgba(0,0,0,.30),
            inset 0 1px 0 rgba(255,255,255,.14),
            0 0 30px rgba(245,168,25,.10) !important;

        -webkit-backdrop-filter:
            blur(20px) saturate(135%) !important;

        backdrop-filter:
            blur(20px) saturate(135%) !important;
    }


    #auth-screen .auth-card::before {

        content:
            "" !important;

        position:
            absolute !important;

        left:
            8% !important;

        right:
            8% !important;

        top:
            -1px !important;

        height:
            2px !important;

        border-radius:
            100% !important;

        background:
            linear-gradient(
                90deg,
                transparent,
                #ffd266,
                #f3a313,
                #ffd266,
                transparent
            ) !important;

        box-shadow:
            0 0 15px rgba(255,184,35,.65) !important;
    }


    /*
     * Language control.
     */

    #auth-screen .auth-language-area {

        position:
            absolute !important;

        z-index:
            30 !important;

        top:
            20px !important;

        left:
            50% !important;

        transform:
            translateX(-50%) !important;

        margin:
            0 !important;
    }


    #auth-screen .language-switch {

        background:
            rgba(10,16,22,.68) !important;

        border:
            1px solid rgba(255,255,255,.16) !important;

        box-shadow:
            0 12px 30px rgba(0,0,0,.22) !important;

        -webkit-backdrop-filter:
            blur(15px) !important;

        backdrop-filter:
            blur(15px) !important;
    }


    /*
     * Heading.
     */

    #auth-screen .auth-heading {

        text-align:
            center !important;

        margin-bottom:
            25px !important;
    }


    #auth-screen .auth-eyebrow {

        color:
            #f8b323 !important;

        letter-spacing:
            .30em !important;

        font-weight:
            800 !important;
    }


    #auth-screen .auth-heading h1 {

        color:
            #ffffff !important;

        text-shadow:
            0 3px 18px rgba(0,0,0,.45) !important;
    }


    #auth-screen .auth-heading p {

        color:
            rgba(255,255,255,.70) !important;
    }


    /*
     * Tabs.
     */

    #auth-screen .auth-tabs {

        padding:
            4px !important;

        border:
            1px solid rgba(255,255,255,.17) !important;

        background:
            rgba(255,255,255,.09) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.08) !important;
    }


    #auth-screen .auth-tab {

        color:
            rgba(255,255,255,.72) !important;
    }


    #auth-screen .auth-tab.active {

        color:
            #111820 !important;

        background:
            linear-gradient(
                135deg,
                #ffd462,
                #f3a313
            ) !important;

        box-shadow:
            0 8px 20px rgba(245,166,20,.28) !important;
    }


    /*
     * Labels.
     */

    #auth-screen .auth-card label {

        color:
            rgba(255,255,255,.92) !important;
    }


    /*
     * Inputs.
     */

    #auth-screen .auth-card input {

        color:
            #ffffff !important;

        background:
            rgba(255,255,255,.09) !important;

        border-color:
            rgba(255,255,255,.20) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.06) !important;
    }


    #auth-screen .auth-card input::placeholder {

        color:
            rgba(255,255,255,.42) !important;
    }


    #auth-screen .auth-card input:focus {

        border-color:
            rgba(255,187,45,.80) !important;

        box-shadow:
            0 0 0 3px rgba(255,178,28,.12),
            0 0 22px rgba(255,166,18,.10) !important;
    }


    /*
     * Primary login.
     */

    #auth-screen .primary-button,
    #auth-screen button[type="submit"] {

        color:
            #101820 !important;

        font-weight:
            800 !important;

        border:
            1px solid rgba(255,213,105,.70) !important;

        background:
            linear-gradient(
                100deg,
                #ffd45e,
                #f2a10b
            ) !important;

        box-shadow:
            0 12px 26px rgba(239,154,8,.26),
            inset 0 1px 0 rgba(255,255,255,.40) !important;
    }


    /*
     * Social login buttons.
     */

    #auth-screen .login-options button,
    #auth-screen .future-login-options button {

        color:
            #ffffff !important;

        background:
            rgba(255,255,255,.075) !important;

        border:
            1px solid rgba(255,255,255,.18) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.06) !important;

        -webkit-backdrop-filter:
            blur(10px) !important;

        backdrop-filter:
            blur(10px) !important;
    }


    #auth-screen .login-options button:hover,
    #auth-screen .future-login-options button:hover {

        background:
            rgba(255,255,255,.13) !important;

        border-color:
            rgba(255,192,58,.45) !important;
    }


    /*
     * Secondary text.
     */

    #auth-screen .auth-separator,
    #auth-screen .remember-row,
    #auth-screen .auth-card small {

        color:
            rgba(255,255,255,.62) !important;
    }


    /*
     * Remove mobile logo on desktop.
     */

    #auth-screen .mobile-logo {

        display:
            none !important;
    }

}


/* ---------- MOBILE ---------- */

@media (max-width: 900px) {

    #auth-screen.auth-screen {

        min-height:
            100dvh !important;

        background:
            linear-gradient(
                rgba(5,12,18,.34),
                rgba(5,12,18,.54)
            ),
            url("/assets/aluqab-ai-v16-hero.png")
            center center / cover
            no-repeat !important;
    }


    #auth-screen .auth-brand-panel {

        display:
            none !important;
    }


    #auth-screen .auth-form-side {

        width:
            100% !important;

        min-width:
            0 !important;

        min-height:
            100dvh !important;

        padding:
            82px 18px 30px !important;

        background:
            transparent !important;
    }


    #auth-screen .auth-card {

        width:
            min(100%, 480px) !important;

        padding:
            30px 22px 24px !important;

        border:
            1px solid rgba(255,190,60,.52) !important;

        border-radius:
            24px !important;

        color:
            #ffffff !important;

        background:
            rgba(9,14,18,.78) !important;

        box-shadow:
            0 25px 60px rgba(0,0,0,.40) !important;

        -webkit-backdrop-filter:
            blur(20px) saturate(130%) !important;

        backdrop-filter:
            blur(20px) saturate(130%) !important;
    }


    #auth-screen .auth-language-area {

        position:
            absolute !important;

        top:
            18px !important;

        left:
            50% !important;

        transform:
            translateX(-50%) !important;

        z-index:
            40 !important;
    }

}


/* ================= END V16 ================= */


/* ==========================================================
   ALUQAB AI — V16.1 COMPANY IDENTITY
   ========================================================== */


/* ----------------------------------------------------------
   DESKTOP
   ---------------------------------------------------------- */

@media (min-width: 901px) {

    #auth-screen .v161-company-identity {

        position:
            absolute !important;

        /*
         * Keep the identity in the open lower-right area,
         * away from the login card and eagle head.
         */

        right:
            8.5% !important;

        bottom:
            7.5% !important;

        z-index:
            12 !important;

        width:
            min(620px, 39vw) !important;

        padding:
            20px 32px 18px !important;

        text-align:
            center !important;

        direction:
            rtl !important;

        pointer-events:
            none !important;

        border-radius:
            22px !important;

        border:
            1px solid rgba(255,205,100,.14) !important;

        background:
            linear-gradient(
                180deg,
                rgba(5,12,18,.13),
                rgba(5,10,15,.38)
            ) !important;

        box-shadow:
            0 22px 55px rgba(0,0,0,.22),
            inset 0 1px 0 rgba(255,255,255,.07) !important;

        -webkit-backdrop-filter:
            blur(3px) !important;

        backdrop-filter:
            blur(3px) !important;
    }


    #auth-screen .v161-company-title {

        margin:
            0 !important;

        color:
            #f7c45c !important;

        font-family:
            "Noto Sans Arabic",
            "Tahoma",
            sans-serif !important;

        font-size:
            clamp(27px, 2.15vw, 43px) !important;

        line-height:
            1.25 !important;

        font-weight:
            900 !important;

        letter-spacing:
            -.02em !important;

        text-shadow:
            0 2px 0 rgba(70,35,0,.90),
            0 4px 10px rgba(0,0,0,.70),
            0 0 20px rgba(255,175,25,.22) !important;

        background:
            linear-gradient(
                180deg,
                #fff0b0 0%,
                #ffc64f 42%,
                #e99a13 100%
            ) !important;

        -webkit-background-clip:
            text !important;

        background-clip:
            text !important;

        -webkit-text-fill-color:
            transparent !important;
    }


    #auth-screen .v161-company-en {

        margin-top:
            7px !important;

        color:
            rgba(255,255,255,.91) !important;

        direction:
            ltr !important;

        font-family:
            Arial,
            sans-serif !important;

        font-size:
            clamp(12px, .95vw, 17px) !important;

        font-weight:
            500 !important;

        letter-spacing:
            .40em !important;

        text-indent:
            .40em !important;

        text-shadow:
            0 3px 12px rgba(0,0,0,.80) !important;
    }


    #auth-screen .v161-company-divider {

        display:
            flex !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        gap:
            14px !important;

        width:
            80% !important;

        margin:
            13px auto 11px !important;
    }


    #auth-screen .v161-company-divider span {

        display:
            block !important;

        width:
            100% !important;

        height:
            1px !important;

        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(247,183,48,.85)
            ) !important;

        box-shadow:
            0 0 8px rgba(247,171,27,.22) !important;
    }


    #auth-screen .v161-company-divider span:last-child {

        background:
            linear-gradient(
                90deg,
                rgba(247,183,48,.85),
                transparent
            ) !important;
    }


    #auth-screen .v161-company-divider i {

        color:
            #f7b530 !important;

        font-size:
            8px !important;

        font-style:
            normal !important;

        text-shadow:
            0 0 10px rgba(255,183,37,.70) !important;
    }


    #auth-screen .v161-founder-role {

        color:
            rgba(255,255,255,.86) !important;

        font-family:
            "Noto Sans Arabic",
            "Tahoma",
            sans-serif !important;

        font-size:
            clamp(13px, 1vw, 18px) !important;

        line-height:
            1.7 !important;

        font-weight:
            500 !important;

        text-shadow:
            0 3px 12px rgba(0,0,0,.90) !important;
    }


    #auth-screen .v161-founder-name {

        display:
            flex !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        gap:
            16px !important;

        margin-top:
            7px !important;
    }


    #auth-screen .v161-founder-name span {

        display:
            block !important;

        width:
            60px !important;

        height:
            1px !important;

        background:
            linear-gradient(
                90deg,
                transparent,
                #e9a521
            ) !important;
    }


    #auth-screen .v161-founder-name span:last-child {

        background:
            linear-gradient(
                90deg,
                #e9a521,
                transparent
            ) !important;
    }


    #auth-screen .v161-founder-name strong {

        color:
            #ffc550 !important;

        font-family:
            "Noto Sans Arabic",
            "Tahoma",
            sans-serif !important;

        font-size:
            clamp(17px, 1.3vw, 24px) !important;

        font-weight:
            900 !important;

        white-space:
            nowrap !important;

        text-shadow:
            0 2px 0 rgba(75,35,0,.85),
            0 4px 14px rgba(0,0,0,.90),
            0 0 15px rgba(255,174,26,.18) !important;
    }

}


/* ----------------------------------------------------------
   MOBILE / TABLET
   Keep branding compact so it does not obstruct login.
   ---------------------------------------------------------- */

@media (max-width: 900px) {

    #auth-screen .v161-company-identity {

        position:
            relative !important;

        z-index:
            15 !important;

        width:
            min(92%, 480px) !important;

        margin:
            20px auto 30px !important;

        padding:
            17px 18px !important;

        text-align:
            center !important;

        direction:
            rtl !important;

        border:
            1px solid rgba(255,194,62,.24) !important;

        border-radius:
            20px !important;

        background:
            rgba(5,11,17,.68) !important;

        box-shadow:
            0 18px 45px rgba(0,0,0,.30) !important;

        -webkit-backdrop-filter:
            blur(14px) !important;

        backdrop-filter:
            blur(14px) !important;
    }


    #auth-screen .v161-company-title {

        color:
            #ffc34a !important;

        font-size:
            25px !important;

        line-height:
            1.35 !important;

        font-weight:
            900 !important;

        text-shadow:
            0 3px 12px rgba(0,0,0,.75) !important;
    }


    #auth-screen .v161-company-en {

        margin-top:
            5px !important;

        color:
            rgba(255,255,255,.90) !important;

        direction:
            ltr !important;

        font-size:
            11px !important;

        letter-spacing:
            .28em !important;
    }


    #auth-screen .v161-company-divider {

        display:
            flex !important;

        align-items:
            center !important;

        gap:
            10px !important;

        width:
            80% !important;

        margin:
            11px auto !important;
    }


    #auth-screen .v161-company-divider span {

        flex:
            1 !important;

        height:
            1px !important;

        background:
            rgba(242,171,31,.55) !important;
    }


    #auth-screen .v161-company-divider i {

        color:
            #f4ad22 !important;

        font-size:
            7px !important;

        font-style:
            normal !important;
    }


    #auth-screen .v161-founder-role {

        color:
            rgba(255,255,255,.78) !important;

        font-size:
            12px !important;
    }


    #auth-screen .v161-founder-name {

        display:
            flex !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        gap:
            10px !important;

        margin-top:
            6px !important;
    }


    #auth-screen .v161-founder-name span {

        width:
            30px !important;

        height:
            1px !important;

        background:
            rgba(240,170,30,.65) !important;
    }


    #auth-screen .v161-founder-name strong {

        color:
            #ffc34a !important;

        font-size:
            16px !important;

        font-weight:
            900 !important;
    }

}


/* ================= END V16.1 ================= */


/* ==========================================================
   ALUQAB AI — V16.2 FINAL COMPANY IDENTITY POLISH
   ========================================================== */

/*
 * Company identity block:
 * - clearer over detailed background
 * - subtle premium glass
 * - gold depth
 * - keeps eagle/image visible
 */

.auth-brand-panel .brand-content {
    position: absolute !important;

    /* position identity slightly higher */
    right: 8.5% !important;
    left: auto !important;
    bottom: 8.5% !important;

    width: min(430px, 42vw) !important;
    max-width: 430px !important;

    padding: 18px 28px 16px !important;

    text-align: center !important;

    background:
        linear-gradient(
            135deg,
            rgba(7, 14, 22, .30),
            rgba(8, 15, 22, .17) 55%,
            rgba(5, 11, 18, .27)
        ) !important;

    border: 1px solid rgba(255, 190, 55, .18) !important;

    border-radius: 22px !important;

    box-shadow:
        0 22px 55px rgba(0, 0, 0, .28),
        0 5px 18px rgba(0, 0, 0, .18),
        inset 0 1px 0 rgba(255,255,255,.10),
        inset 0 0 30px rgba(255, 174, 31, .025) !important;

    backdrop-filter:
        blur(7px)
        saturate(118%) !important;

    -webkit-backdrop-filter:
        blur(7px)
        saturate(118%) !important;

    overflow: hidden !important;

    z-index: 20 !important;
}


/* soft internal light */

.auth-brand-panel .brand-content::before {
    content: "" !important;

    position: absolute !important;
    inset: 0 !important;

    pointer-events: none !important;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(255, 194, 72, .10),
            transparent 48%
        ) !important;

    z-index: -1 !important;
}


/* COMPANY ARABIC */

.auth-brand-panel .company-name-ar {
    position: relative !important;

    margin: 0 0 5px !important;

    font-size: clamp(25px, 1.75vw, 35px) !important;
    line-height: 1.25 !important;

    font-weight: 900 !important;

    letter-spacing: -.4px !important;

    color: #f6bd48 !important;

    text-shadow:
        0 2px 0 rgba(69, 35, 4, .95),
        0 4px 8px rgba(0,0,0,.65),
        0 0 15px rgba(255, 174, 34, .28) !important;
}


/* COMPANY ENGLISH */

.auth-brand-panel .company-name-en {
    margin: 0 auto 10px !important;

    font-size: 13px !important;

    font-weight: 600 !important;

    letter-spacing: 6px !important;

    color: rgba(255,255,255,.94) !important;

    text-shadow:
        0 2px 5px rgba(0,0,0,.75) !important;
}


/* GOLD DIVIDER */

.auth-brand-panel .brand-divider {
    width: 82% !important;

    margin: 6px auto 10px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
}

.auth-brand-panel .brand-divider span {
    height: 1px !important;
    flex: 1 !important;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(246, 181, 57, .90),
            transparent
        ) !important;
}

.auth-brand-panel .brand-divider i {
    color: #f6b735 !important;

    font-size: 7px !important;

    text-shadow:
        0 0 8px rgba(255, 184, 48, .75) !important;
}


/* DESCRIPTION */

.auth-brand-panel .product-description {
    margin: 4px auto 8px !important;

    color: rgba(255,255,255,.92) !important;

    font-size: 15px !important;
    line-height: 1.7 !important;

    font-weight: 500 !important;

    text-shadow:
        0 2px 6px rgba(0,0,0,.95) !important;
}


/*
 * Founder name
 * Existing product title is used for the founder/name section
 * only when V16 identity HTML has assigned it there.
 */

.auth-brand-panel .founder-name,
.auth-brand-panel .founder-title strong {
    color: #ffc34b !important;

    font-weight: 900 !important;

    text-shadow:
        0 2px 0 rgba(75, 37, 0, .95),
        0 3px 9px rgba(0,0,0,.80),
        0 0 12px rgba(255,184,48,.22) !important;
}


/* founder description */

.auth-brand-panel .founder-role,
.auth-brand-panel .identity-role {
    color: rgba(255,255,255,.91) !important;

    font-size: 14px !important;
    line-height: 1.6 !important;

    text-shadow:
        0 2px 6px rgba(0,0,0,.95) !important;
}


/* remove excessive effects from feature area */

.auth-brand-panel .feature-grid {
    margin-top: 8px !important;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1450px) {

    .auth-brand-panel .brand-content {
        right: 6% !important;
        bottom: 6.5% !important;

        width: min(390px, 43vw) !important;

        padding: 15px 22px !important;
    }

    .auth-brand-panel .company-name-ar {
        font-size: 27px !important;
    }

}


@media (max-width: 1100px) {

    .auth-brand-panel .brand-content {
        right: 5% !important;
        bottom: 5% !important;

        width: min(360px, 46vw) !important;
    }

}


/* mobile: don't allow identity to cover login */

@media (max-width: 820px) {

    .auth-brand-panel .brand-content {
        display: none !important;
    }

}


/* ==================== END V16.2 ==================== */


/* ==========================================================
   ALUQAB AI — V16.3 COMPANY NAME MAX VISIBILITY
   ========================================================== */

.auth-brand-panel .company-name-ar {

    position: relative !important;
    z-index: 50 !important;

    display: block !important;

    margin: 0 auto 7px !important;

    font-size: clamp(31px, 2vw, 40px) !important;
    line-height: 1.25 !important;

    font-weight: 900 !important;

    color: #ffd36a !important;

    -webkit-text-fill-color: #ffd36a !important;

    -webkit-text-stroke:
        0.7px rgba(42, 22, 0, .95) !important;

    text-shadow:
        0 2px 1px #2b1600,
        0 4px 3px rgba(0,0,0,.95),
        0 7px 14px rgba(0,0,0,.95),
        0 0 8px rgba(255,178,30,.80),
        0 0 20px rgba(255,167,0,.35) !important;

    filter:
        drop-shadow(0 4px 5px rgba(0,0,0,.85)) !important;
}


/* English company name */

.auth-brand-panel .company-name-en {

    position: relative !important;
    z-index: 50 !important;

    color: #ffffff !important;

    font-size: 14px !important;
    font-weight: 700 !important;

    letter-spacing: 6px !important;

    text-shadow:
        0 2px 3px #000,
        0 4px 8px rgba(0,0,0,.95) !important;
}


/* Give ONLY company heading a subtle dark depth */

.auth-brand-panel .company-name-ar::before {

    content: "" !important;

    position: absolute !important;

    left: 50% !important;
    top: 50% !important;

    transform:
        translate(-50%, -50%) !important;

    width: 115% !important;
    height: 150% !important;

    background:
        radial-gradient(
            ellipse at center,
            rgba(0,0,0,.50) 0%,
            rgba(0,0,0,.26) 48%,
            transparent 75%
        ) !important;

    filter: blur(8px) !important;

    z-index: -1 !important;

    pointer-events: none !important;
}


/* founder role clearer */

.auth-brand-panel .founder-role,
.auth-brand-panel .identity-role {

    color: rgba(255,255,255,.98) !important;

    font-weight: 600 !important;

    text-shadow:
        0 2px 3px #000,
        0 4px 8px rgba(0,0,0,.95) !important;
}


/* founder name */

.auth-brand-panel .founder-name,
.auth-brand-panel .founder-title strong {

    color: #ffc44f !important;

    -webkit-text-fill-color: #ffc44f !important;

    -webkit-text-stroke:
        .35px rgba(49,24,0,.9) !important;

    text-shadow:
        0 2px 2px #2d1600,
        0 4px 7px rgba(0,0,0,.95),
        0 0 12px rgba(255,176,28,.45) !important;
}


/* ================= END V16.3 ================= */

/* ==========================================================
   ALUQAB AI — V16.4 ULTRA CLEAR COMPANY IDENTITY
   ========================================================== */

/* whole identity — slightly higher */
.auth-brand-panel .brand-content {
    bottom: 10.5% !important;
}


/* شركة العقاب للبرمجيات */
.auth-brand-panel .company-name-ar {

    position: relative !important;
    z-index: 100 !important;

    display: block !important;

    font-size: clamp(34px, 2.15vw, 43px) !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;

    margin: 0 auto 8px !important;

    /*
       Bright metallic gold.
       Much lighter than background.
    */
    color: #ffd76a !important;

    background:
        linear-gradient(
            180deg,
            #fff3bd 0%,
            #ffd96a 25%,
            #ffb51c 55%,
            #ffd766 76%,
            #fff0ad 100%
        ) !important;

    -webkit-background-clip: text !important;
    background-clip: text !important;

    -webkit-text-fill-color: transparent !important;

    -webkit-text-stroke:
        1.15px rgba(32, 16, 0, .98) !important;

    text-shadow:
        0 2px 0 #281300,
        0 3px 2px rgba(0,0,0,1),
        0 6px 7px rgba(0,0,0,.95),
        0 10px 20px rgba(0,0,0,.85),
        0 0 10px rgba(255,188,48,.50) !important;

    filter:
        drop-shadow(0 5px 5px rgba(0,0,0,.9))
        drop-shadow(0 0 5px rgba(255,180,25,.30)) !important;
}


/* dark halo behind ONLY the title */

.auth-brand-panel .company-name-ar::before {

    content: "" !important;

    position: absolute !important;

    left: 50% !important;
    top: 50% !important;

    transform: translate(-50%, -50%) !important;

    width: 125% !important;
    height: 175% !important;

    background:
        radial-gradient(
            ellipse at center,
            rgba(0,0,0,.72) 0%,
            rgba(0,0,0,.48) 42%,
            rgba(0,0,0,.18) 65%,
            transparent 78%
        ) !important;

    filter: blur(10px) !important;

    z-index: -1 !important;

    pointer-events: none !important;
}


/* ALUQAB SOFTWARE */

.auth-brand-panel .company-name-en {

    position: relative !important;
    z-index: 100 !important;

    font-size: 14px !important;
    font-weight: 700 !important;

    letter-spacing: 6.5px !important;

    color: #fff !important;
    -webkit-text-fill-color: #fff !important;

    text-shadow:
        0 2px 2px #000,
        0 4px 7px #000,
        0 0 8px rgba(255,255,255,.18) !important;
}


/* founder description */

.auth-brand-panel .founder-role,
.auth-brand-panel .identity-role {

    color: #fff !important;

    font-size: 15px !important;
    font-weight: 600 !important;

    text-shadow:
        0 2px 2px #000,
        0 4px 8px #000 !important;
}


/* رائد عبد الجبار عباس */

.auth-brand-panel .founder-name,
.auth-brand-panel .founder-title strong {

    color: #ffc33e !important;
    -webkit-text-fill-color: #ffc33e !important;

    font-size: 21px !important;
    font-weight: 900 !important;

    -webkit-text-stroke:
        .45px rgba(35,17,0,.95) !important;

    text-shadow:
        0 2px 1px #271200,
        0 4px 6px #000,
        0 0 10px rgba(255,179,25,.42) !important;
}


/* ================= END V16.4 ================= */


/* ==========================================================
   ALUQAB AI — V16.5 REAL COMPANY IDENTITY
   TARGETS THE ACTUAL V16.1 HTML
   ========================================================== */


/* ===== WHOLE COMPANY BLOCK ===== */

#auth-screen .v161-company-identity {

    position: absolute !important;

    right: 8% !important;
    left: auto !important;

    bottom: 7.5% !important;
    top: auto !important;

    width: min(500px, 42vw) !important;

    padding: 22px 32px 20px !important;

    text-align: center !important;

    direction: rtl !important;

    border-radius: 24px !important;

    background:
        linear-gradient(
            135deg,
            rgba(4,10,17,.52),
            rgba(7,14,22,.31) 50%,
            rgba(3,9,15,.46)
        ) !important;

    border:
        1px solid rgba(255,190,63,.30) !important;

    box-shadow:
        0 22px 55px rgba(0,0,0,.38),
        inset 0 1px 0 rgba(255,255,255,.10),
        inset 0 0 30px rgba(255,180,35,.035) !important;

    backdrop-filter:
        blur(7px)
        saturate(120%) !important;

    -webkit-backdrop-filter:
        blur(7px)
        saturate(120%) !important;

    z-index: 50 !important;

    overflow: visible !important;
}


/* ===== ARABIC COMPANY NAME ===== */

#auth-screen .v161-company-title {

    position: relative !important;

    display: block !important;

    margin: 0 auto 6px !important;

    padding: 0 !important;

    font-family:
        "Noto Sans Arabic",
        sans-serif !important;

    font-size:
        clamp(34px, 2.25vw, 46px) !important;

    line-height: 1.3 !important;

    font-weight: 900 !important;

    letter-spacing: 0 !important;


    /*
       Metallic 5D gold
    */

    color: #ffd45f !important;

    background:
        linear-gradient(
            180deg,

            #fff8d2 0%,
            #ffe79a 15%,
            #ffc942 34%,
            #f3a814 52%,
            #ffd35d 70%,
            #fff0ad 87%,
            #d98b08 100%
        ) !important;

    -webkit-background-clip: text !important;
    background-clip: text !important;

    -webkit-text-fill-color:
        transparent !important;


    /*
       Strong dark edge
    */

    -webkit-text-stroke:
        1px rgba(42,20,0,.95) !important;


    /*
       5D depth
    */

    text-shadow:

        0 1px 0 #8a5100,

        0 2px 0 #714000,

        0 3px 0 #5b3200,

        0 4px 1px rgba(35,17,0,.95),

        0 7px 7px rgba(0,0,0,.85),

        0 13px 18px rgba(0,0,0,.55),

        0 0 12px rgba(255,186,48,.38) !important;

    filter:
        drop-shadow(
            0 4px 5px rgba(0,0,0,.75)
        ) !important;

}


/* dark halo directly behind title */

#auth-screen .v161-company-title::before {

    content: "" !important;

    position: absolute !important;

    z-index: -1 !important;

    left: 50% !important;
    top: 52% !important;

    transform:
        translate(-50%,-50%) !important;

    width: 118% !important;
    height: 160% !important;

    border-radius: 50% !important;

    background:
        radial-gradient(
            ellipse at center,

            rgba(0,0,0,.65) 0%,
            rgba(0,0,0,.43) 42%,
            rgba(0,0,0,.15) 65%,
            transparent 78%
        ) !important;

    filter:
        blur(11px) !important;

    pointer-events: none !important;
}


/* ===== ALUQAB SOFTWARE ===== */

#auth-screen .v161-company-en {

    position: relative !important;

    margin:
        2px auto 11px !important;

    font-family:
        Inter,
        sans-serif !important;

    font-size: 14px !important;

    font-weight: 700 !important;

    letter-spacing: 7px !important;

    color: #ffffff !important;

    -webkit-text-fill-color:
        #ffffff !important;

    text-shadow:

        0 2px 2px #000,

        0 4px 7px rgba(0,0,0,.95),

        0 0 9px rgba(255,255,255,.16) !important;
}


/* ===== DIVIDER ===== */

#auth-screen .v161-company-divider {

    width: 88% !important;

    margin:
        7px auto 12px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 12px !important;
}


#auth-screen .v161-company-divider span {

    display: block !important;

    flex: 1 !important;

    height: 1px !important;

    background:
        linear-gradient(
            90deg,

            transparent,

            rgba(255,194,68,.95),

            transparent
        ) !important;

    box-shadow:
        0 0 8px rgba(255,178,28,.32) !important;
}


#auth-screen .v161-company-divider i {

    font-style: normal !important;

    font-size: 8px !important;

    color: #ffc13c !important;

    text-shadow:
        0 0 9px rgba(255,183,37,.85) !important;
}


/* ===== FOUNDER ROLE ===== */

#auth-screen .v161-founder-role {

    margin:
        0 auto 8px !important;

    font-family:
        "Noto Sans Arabic",
        sans-serif !important;

    font-size: 16px !important;

    line-height: 1.7 !important;

    font-weight: 600 !important;

    color: #ffffff !important;

    -webkit-text-fill-color:
        #ffffff !important;

    text-shadow:

        0 2px 2px rgba(0,0,0,1),

        0 4px 8px rgba(0,0,0,.95) !important;
}


/* ===== FOUNDER NAME ROW ===== */

#auth-screen .v161-founder-name {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 14px !important;

    margin-top: 4px !important;
}


/* lines beside founder */

#auth-screen .v161-founder-name span {

    display: block !important;

    width: 72px !important;

    height: 1px !important;

    background:
        linear-gradient(
            90deg,

            transparent,

            #ffc33f
        ) !important;

    box-shadow:
        0 0 7px rgba(255,181,31,.42) !important;
}


#auth-screen .v161-founder-name span:last-child {

    background:
        linear-gradient(
            90deg,

            #ffc33f,

            transparent
        ) !important;
}


/* ===== RAED NAME ===== */

#auth-screen .v161-founder-name strong {

    white-space: nowrap !important;

    font-family:
        "Noto Sans Arabic",
        sans-serif !important;

    font-size: 22px !important;

    line-height: 1.4 !important;

    font-weight: 900 !important;

    color: #ffc546 !important;

    -webkit-text-fill-color:
        #ffc546 !important;

    -webkit-text-stroke:
        .4px rgba(48,23,0,.92) !important;

    text-shadow:

        0 1px 0 #704000,

        0 2px 0 #4f2b00,

        0 4px 5px rgba(0,0,0,.95),

        0 0 11px rgba(255,180,30,.38) !important;
}


/* ===== RESPONSIVE ===== */

@media (max-width: 1400px) {

    #auth-screen .v161-company-identity {

        right: 5.5% !important;

        bottom: 6% !important;

        width: min(450px, 43vw) !important;

        padding:
            18px 25px !important;
    }


    #auth-screen .v161-company-title {

        font-size:
            clamp(30px, 2.1vw, 39px) !important;
    }

}


@media (max-width: 900px) {

    #auth-screen .v161-company-identity {

        display: none !important;
    }

}


/* ================= END V16.5 ================= */


/* ==========================================================
   ALUQAB AI — GOOGLE SINGLE ICON FINAL FIX
   ========================================================== */

/*
 * Kill ALL old generated Google icons.
 * Keep only the real .google-mark element from HTML.
 */

#auth-screen .google-login-button::before,
#auth-screen .google-login-button::after {
    content: none !important;
    display: none !important;
}


/*
 * Hide any legacy icon containers if they appear.
 */

#auth-screen .google-login-button .google-icon,
#auth-screen .google-login-button .social-icon,
#auth-screen .google-login-button .provider-icon,
#auth-screen .google-login-button > svg,
#auth-screen .google-login-button > i {
    display: none !important;
}


/*
 * Keep ONE Google G.
 */

#auth-screen .google-login-button .google-mark {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 22px !important;
    height: 22px !important;

    flex: 0 0 22px !important;

    margin: 0 7px !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    font-family:
        Arial,
        sans-serif !important;

    font-size: 20px !important;
    line-height: 1 !important;
    font-weight: 900 !important;

    /*
     * Multicolor effect on the single G.
     */

    background-image:
        conic-gradient(
            from -45deg,
            #4285F4 0deg 90deg,
            #34A853 90deg 180deg,
            #FBBC05 180deg 270deg,
            #EA4335 270deg 360deg
        ) !important;

    -webkit-background-clip: text !important;
    background-clip: text !important;

    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
}


/* Keep Google text visible */

#auth-screen .google-login-button > span {
    display: inline !important;

    color: #ffffff !important;

    -webkit-text-fill-color: #ffffff !important;
}


/* ================= END GOOGLE FINAL FIX ================= */


/* ==========================================================
   ALUQAB AI — V16.6 PREMIUM 3D COMPANY IDENTITY
   ========================================================== */


/* Main identity glass panel */
#auth-screen .v161-company-identity {
    background:
        linear-gradient(
            145deg,
            rgba(8, 13, 19, .72) 0%,
            rgba(13, 17, 21, .58) 48%,
            rgba(8, 12, 17, .72) 100%
        ) !important;

    border: 1px solid rgba(255, 191, 52, .30) !important;

    border-radius: 22px !important;

    -webkit-backdrop-filter: blur(12px) saturate(135%) !important;
    backdrop-filter: blur(12px) saturate(135%) !important;

    box-shadow:
        0 24px 55px rgba(0, 0, 0, .35),
        0 0 0 1px rgba(255,255,255,.035) inset,
        0 1px 0 rgba(255,255,255,.10) inset,
        0 0 30px rgba(245, 166, 35, .07) !important;
}


/* Arabic company title — bright premium gold */
#auth-screen .v161-company-title {
    position: relative !important;

    color: #ffc247 !important;
    -webkit-text-fill-color: #ffc247 !important;

    font-size: clamp(30px, 2.15vw, 46px) !important;
    line-height: 1.35 !important;
    font-weight: 900 !important;

    letter-spacing: -.7px !important;

    opacity: 1 !important;

    filter: none !important;

    text-shadow:
        0 1px 0 #fff0b0,
        0 2px 0 #c98508,
        0 3px 0 #8b5700,
        0 5px 7px rgba(0,0,0,.92),
        0 0 8px rgba(255,181,35,.80),
        0 0 18px rgba(255,164,0,.40) !important;
}


/* subtle highlight over title */
#auth-screen .v161-company-title::before {
    content: "" !important;

    position: absolute !important;

    left: 10% !important;
    right: 10% !important;
    bottom: -10px !important;

    height: 1px !important;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,190,55,.85),
            transparent
        ) !important;

    opacity: .9 !important;
}


/* English company name */
#auth-screen .v161-company-en {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    opacity: 1 !important;

    font-size: 13px !important;
    font-weight: 700 !important;

    letter-spacing: 7px !important;

    margin-top: 18px !important;

    text-shadow:
        0 2px 5px rgba(0,0,0,.95),
        0 0 12px rgba(255,255,255,.20) !important;
}


/* Divider */
#auth-screen .v161-company-divider span {
    background:
        linear-gradient(
            90deg,
            transparent,
            #ffb31f
        ) !important;

    opacity: .9 !important;
}

#auth-screen .v161-company-divider span:last-child {
    background:
        linear-gradient(
            90deg,
            #ffb31f,
            transparent
        ) !important;
}

#auth-screen .v161-company-divider i {
    color: #ffc13b !important;

    text-shadow:
        0 0 12px rgba(255,181,28,.75) !important;
}


/* Founder role */
#auth-screen .v161-founder-role {
    color: rgba(255,255,255,.96) !important;
    -webkit-text-fill-color: rgba(255,255,255,.96) !important;

    opacity: 1 !important;

    font-size: 15px !important;
    font-weight: 600 !important;

    text-shadow:
        0 2px 6px rgba(0,0,0,.95) !important;
}


/* Founder name */
#auth-screen .v161-founder-name strong {
    color: #ffc247 !important;
    -webkit-text-fill-color: #ffc247 !important;

    opacity: 1 !important;

    font-size: 21px !important;
    font-weight: 900 !important;

    text-shadow:
        0 2px 2px rgba(0,0,0,.95),
        0 0 9px rgba(255,180,30,.55) !important;
}


/* Founder side lines */
#auth-screen .v161-founder-name span {
    height: 1px !important;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,187,45,.9)
        ) !important;
}

#auth-screen .v161-founder-name span:last-child {
    background:
        linear-gradient(
            90deg,
            rgba(255,187,45,.9),
            transparent
        ) !important;
}


/* ================= END V16.6 ================= */


/* ==========================================================
   ALUQAB AI — V16.7 AUTH VISIBILITY FINAL FIX
   ========================================================== */

/*
 * Authentication screen MUST disappear after successful login.
 * This rule intentionally overrides all previous V16 identity
 * display declarations.
 */

#auth-screen.hidden,
.auth-screen.hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}


/*
 * Chat screen becomes the only visible application screen
 * after authentication.
 */

#chat-screen:not(.hidden) {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}


/* ================= END V16.7 ================= */



/* ==========================================================
   ALUQAB AI — ARABIC INPUT FINAL FIX
   ========================================================== */

#message-input {
    font-family:
        "Noto Sans Arabic",
        "Segoe UI",
        Tahoma,
        Arial,
        sans-serif !important;

    direction: rtl;
    text-align: right;

    unicode-bidi: plaintext !important;
    writing-mode: horizontal-tb !important;

    -webkit-user-select: text !important;
    user-select: text !important;

    caret-color: currentColor !important;
}

#message-input:focus {
    direction: rtl;
    text-align: right;
}

/* ================= END ARABIC INPUT FIX ================= */



/* ==========================================================
   ALUQAB AI — V16.8 MARKDOWN + CODE RENDERING
   ========================================================== */


/*
 * Normal assistant text follows the current interface
 * direction while mixed Arabic/English stays readable.
 */

.message-row.assistant .message-content {

    unicode-bidi:
        plaintext;

}


/*
 * Headings returned by AI.
 */

.message-content h1,
.message-content h2,
.message-content h3 {

    margin:
        14px 0 8px;

    line-height:
        1.55;

    font-weight:
        700;

}

.message-content h1 {

    font-size:
        1.30em;

}

.message-content h2 {

    font-size:
        1.20em;

}

.message-content h3 {

    font-size:
        1.10em;

}


/*
 * Inline code must always remain LTR.
 */

.message-content .inline-code {

    direction:
        ltr !important;

    unicode-bidi:
        isolate !important;

    display:
        inline-block;

    padding:
        2px 6px;

    margin:
        0 2px;

    border-radius:
        6px;

    background:
        #eef2f7;

    border:
        1px solid #dce3eb;

    font-family:
        "DejaVu Sans Mono",
        "Liberation Mono",
        Consolas,
        monospace;

    font-size:
        .92em;

}


/*
 * Full fenced code block.
 */

.message-content .code-block {

    direction:
        ltr !important;

    text-align:
        left !important;

    unicode-bidi:
        isolate !important;

    width:
        100%;

    max-width:
        100%;

    margin:
        14px 0;

    overflow:
        hidden;

    border:
        1px solid #d8e0e8;

    border-radius:
        12px;

    background:
        #f7f9fb;

}


/*
 * Small language header: python, bash, javascript...
 */

.message-content .code-toolbar {

    direction:
        ltr !important;

    text-align:
        left !important;

    min-height:
        28px;

    padding:
        5px 12px;

    background:
        #edf2f6;

    border-bottom:
        1px solid #d8e0e8;

    font-size:
        11px;

    color:
        #607080;

}


/*
 * Actual source code.
 */

.message-content .code-block pre {

    direction:
        ltr !important;

    text-align:
        left !important;

    unicode-bidi:
        isolate !important;

    margin:
        0;

    padding:
        14px 16px;

    overflow-x:
        auto;

    white-space:
        pre !important;

    tab-size:
        4;

}


.message-content .code-block code {

    direction:
        ltr !important;

    text-align:
        left !important;

    unicode-bidi:
        isolate !important;

    white-space:
        pre !important;

    font-family:
        "DejaVu Sans Mono",
        "Liberation Mono",
        Consolas,
        monospace;

    font-size:
        13px;

    line-height:
        1.65;

}


/*
 * Prevent global RTL rules from reversing code.
 */

html[dir="rtl"] .message-content .code-block,
html[dir="rtl"] .message-content .code-block *,
html[lang="ar"] .message-content .code-block,
html[lang="ar"] .message-content .code-block * {

    direction:
        ltr !important;

    text-align:
        left !important;

}


/* ================= END V16.8 ================= */


/* ==========================================================
   ALUQAB AI — V16.9 MARKDOWN + COPY BUTTON
   ========================================================== */


/* ---------- CODE TOOLBAR ---------- */

.message-content .code-toolbar {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    direction:
        ltr !important;

}


.message-content .code-language-wrap {

    display:
        flex;

    align-items:
        center;

    min-height:
        22px;

}


.message-content .code-language {

    font-size:
        11px;

    font-weight:
        600;

    letter-spacing:
        .02em;

    color:
        #64748b;

}


/* ---------- COPY BUTTON ---------- */

.message-content .code-copy-button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        5px;

    min-height:
        25px;

    padding:
        3px 8px;

    border:
        0;

    border-radius:
        6px;

    background:
        transparent;

    color:
        #64748b;

    font-family:
        inherit;

    font-size:
        11px;

    cursor:
        pointer;

    transition:
        background .15s ease,
        color .15s ease;

}


.message-content .code-copy-button:hover {

    background:
        rgba(15, 23, 42, .07);

    color:
        #0f172a;

}


.message-content .code-copy-button.copied {

    background:
        rgba(22, 163, 74, .10);

    color:
        #15803d;

}


.message-content .code-copy-icon {

    font-size:
        14px;

    line-height:
        1;

}


/* ---------- MARKDOWN LISTS ---------- */

.message-content .markdown-list-item,
.message-content .markdown-number-item {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        8px;

    margin:
        5px 0;

    line-height:
        1.75;

}


html[dir="rtl"]
.message-content
.markdown-list-item,

html[dir="rtl"]
.message-content
.markdown-number-item {

    flex-direction:
        row;

    text-align:
        right;

}


/* ---------- BLOCKQUOTE ---------- */

.message-content blockquote {

    margin:
        12px 0;

    padding:
        8px 14px;

    border-inline-start:
        3px solid #f5b82e;

    background:
        rgba(245, 184, 46, .07);

    border-radius:
        6px;

    color:
        #475569;

}


/* ---------- LINKS ---------- */

.message-content .markdown-link {

    color:
        #2563eb;

    text-decoration:
        none;

    border-bottom:
        1px solid rgba(37, 99, 235, .25);

}


.message-content .markdown-link:hover {

    border-bottom-color:
        currentColor;

}


/* ---------- BETTER CODE SCROLL ---------- */

.message-content .code-block pre {

    scrollbar-width:
        thin;

}


.message-content .code-block pre::-webkit-scrollbar {

    height:
        7px;

}


.message-content .code-block pre::-webkit-scrollbar-thumb {

    background:
        rgba(100, 116, 139, .35);

    border-radius:
        10px;

}


/* ---------- MOBILE ---------- */

@media (max-width: 700px) {

    .message-content .code-block {

        border-radius:
            9px;

        margin:
            10px 0;

    }


    .message-content .code-block pre {

        padding:
            12px;

        font-size:
            12px;

    }


    .message-content .code-copy-button {

        padding:
            3px 6px;

    }

}


/* ================= END V16.9 ================= */


/* ==========================================================
   ALUQAB AI — V16.10 CLICKABLE RAW LINKS
   ========================================================== */

.message-content .raw-url-link {

    display:
        inline;

    direction:
        ltr;

    unicode-bidi:
        isolate;

    overflow-wrap:
        anywhere;

    word-break:
        break-word;

    text-decoration:
        underline;

    text-underline-offset:
        3px;

    cursor:
        pointer;

}


/*
 * Keep URLs readable inside Arabic responses.
 */

html[dir="rtl"]
.message-content
.raw-url-link {

    direction:
        ltr;

    unicode-bidi:
        isolate;

}


/* ================= END V16.10 ================= */


/* ==========================================================
   ALUQAB AI — V16.11 ADVANCED MARKDOWN
   ========================================================== */


/* ---------- HEADINGS ---------- */

.message-content h1,
.message-content h2,
.message-content h3 {

    margin:
        18px 0 9px;

    line-height:
        1.45;

    font-weight:
        700;

    color:
        var(--text);

}


.message-content h1 {

    font-size:
        1.55em;

}


.message-content h2 {

    font-size:
        1.32em;

}


.message-content h3 {

    font-size:
        1.16em;

}


/* ---------- STRONG / ITALIC ---------- */

.message-content strong {

    font-weight:
        700;

}


.message-content em {

    font-style:
        italic;

}


.message-content del {

    opacity:
        .72;

    text-decoration-thickness:
        1.5px;

}


/* ---------- QUOTES ---------- */

.message-content blockquote {

    margin:
        14px 0;

    padding:
        10px 14px;

    border-inline-start:
        4px solid #d9a62e;

    background:
        rgba(217,166,46,.07);

    border-radius:
        8px;

    line-height:
        1.8;

}


/* ---------- DIVIDER ---------- */

.message-content hr {

    border:
        0;

    border-top:
        1px solid #dce3eb;

    margin:
        20px 0;

}


/* ---------- LISTS ---------- */

.message-content .markdown-list-item,
.message-content .markdown-number-item {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        9px;

    margin:
        6px 0;

    line-height:
        1.75;

}


.message-content .markdown-list-item > span:first-child,
.message-content .markdown-number-item > span:first-child {

    flex:
        0 0 auto;

    font-weight:
        700;

}


/* ---------- LINKS ---------- */

.message-content .markdown-link {

    text-decoration:
        underline;

    text-underline-offset:
        3px;

    overflow-wrap:
        anywhere;

}


/* ---------- RTL ---------- */

html[dir="rtl"] .message-content h1,
html[dir="rtl"] .message-content h2,
html[dir="rtl"] .message-content h3,
html[dir="rtl"] .message-content blockquote {

    text-align:
        right;

}


/*
 * Keep the existing code renderer completely isolated
 * from prose Markdown direction rules.
 */

.message-content .code-block,
.message-content .code-block * {

    direction:
        ltr !important;

    text-align:
        left !important;

}


/* ================= END V16.11 ================= */


/* ==========================================================
   ALUQAB AI — V16.12 CODE COPY UX
   ========================================================== */

.message-content .code-copy-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;

    min-width: 62px;
    min-height: 28px;

    padding: 4px 9px;

    border: 0;
    border-radius: 7px;

    background: transparent;

    font-size: 11px;
    line-height: 1;

    cursor: pointer;

    transition:
        background .18s ease,
        transform .18s ease,
        opacity .18s ease;
}

.message-content .code-copy-button:hover {
    background: rgba(80, 100, 120, .09);
}

.message-content .code-copy-button:active {
    transform: scale(.96);
}

.message-content .code-copy-button.copied {
    font-weight: 700;
}

.message-content .code-copy-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 14px;

    font-size: 12px;
}

.message-content .code-copy-text {
    white-space: nowrap;
}


/* Keep code toolbar stable in Arabic UI. */

html[dir="rtl"] .message-content .code-toolbar {
    direction: ltr !important;
}

html[dir="rtl"] .message-content .code-copy-button {
    direction: rtl !important;
}


/* ================= END V16.12 ================= */


/* ===== ALUQAB AI V18.1 START ===== */

/*
 * Official Aluqab AI authentication gateway.
 *
 * The generated artwork is used only as visual scenery.
 * All fields and buttons below remain real HTML controls.
 */

:root {

    --v181-gold:
        #d8a64b;

    --v181-gold-light:
        #f6cf74;

    --v181-gold-dark:
        #9e6b25;

    --v181-bg:
        #06101a;

    --v181-panel:
        rgba(5, 16, 27, .94);

    --v181-panel-soft:
        rgba(8, 23, 37, .86);

    --v181-field:
        rgba(15, 34, 51, .88);

    --v181-line:
        rgba(162, 183, 204, .28);

    --v181-text:
        #f7f9fc;

    --v181-muted:
        #9caabd;

    --v181-blue:
        #37a7e8;

}


/* ---------------------------------------------------
   Full authentication gateway
   --------------------------------------------------- */

#auth-screen {

    position:
        relative !important;

    display:
        block;

    width:
        100%;

    min-height:
        100vh;

    overflow:
        hidden;

    isolation:
        isolate;

    background:
        #06101a
        url("/assets/aluqab-ai-login-v18.png")
        center center /
        cover
        no-repeat !important;

    color:
        var(--v181-text);

}


/*
 * Hide the illustrated fake login card that exists
 * inside the artwork on the right side.
 *
 * The real HTML card sits above this mask.
 */

#auth-screen::after {

    content:
        "";

    position:
        absolute;

    z-index:
        1;

    top:
        0;

    right:
        0;

    bottom:
        0;

    width:
        49%;

    pointer-events:
        none;

    background:
        linear-gradient(
            90deg,
            rgba(5, 16, 27, .08) 0%,
            rgba(5, 16, 27, .86) 15%,
            rgba(5, 16, 27, .98) 100%
        );

}


/* Cinematic edge treatment */

#auth-screen::before {

    content:
        "";

    position:
        absolute;

    z-index:
        1;

    inset:
        0;

    pointer-events:
        none;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, .04),
            rgba(0, 0, 0, .12)
        );

}


/* ---------------------------------------------------
   Keep language switch visible
   --------------------------------------------------- */

#auth-screen .language-switch {

    position:
        relative;

    z-index:
        20;

}


/* ---------------------------------------------------
   Real interactive authentication card
   --------------------------------------------------- */

#auth-screen .auth-card {

    position:
        relative !important;

    z-index:
        10 !important;

    width:
        min(
            590px,
            42vw
        ) !important;

    margin:
        7vh 4vw 5vh auto !important;

    padding:
        38px 38px 30px !important;

    border:
        1px solid
        rgba(216, 166, 75, .48) !important;

    border-radius:
        27px !important;

    background:
        linear-gradient(
            145deg,
            rgba(8, 24, 38, .965),
            rgba(4, 14, 24, .975)
        ) !important;

    box-shadow:
        0 32px 90px
        rgba(0, 0, 0, .42),
        inset 0 1px 0
        rgba(255,255,255,.04) !important;

    backdrop-filter:
        blur(17px);

    -webkit-backdrop-filter:
        blur(17px);

}


/* Hide old micro label */

#auth-screen .auth-eyebrow {

    display:
        none !important;

}


/* ---------------------------------------------------
   Heading
   --------------------------------------------------- */

#auth-screen .auth-heading {

    margin-bottom:
        24px !important;

    text-align:
        right;

}


#auth-screen #auth-title {

    margin:
        0 0 8px !important;

    color:
        #ffffff !important;

    font-size:
        clamp(
            26px,
            2.2vw,
            39px
        ) !important;

    font-weight:
        800 !important;

    line-height:
        1.25 !important;

}


#auth-screen #auth-subtitle {

    margin:
        0 !important;

    color:
        var(--v181-muted) !important;

    font-size:
        16px !important;

    line-height:
        1.7 !important;

}


/* ---------------------------------------------------
   Login / Register tabs
   --------------------------------------------------- */

#auth-screen .auth-tabs {

    display:
        grid !important;

    grid-template-columns:
        1fr 1fr;

    gap:
        6px;

    padding:
        4px;

    margin-bottom:
        26px !important;

    border:
        1px solid
        rgba(216,166,75,.30);

    border-radius:
        16px;

    background:
        rgba(5, 14, 23, .52);

}


#auth-screen .auth-tab {

    min-height:
        52px !important;

    border:
        0 !important;

    border-radius:
        12px !important;

    background:
        transparent !important;

    color:
        #e7edf4 !important;

    font-size:
        15px !important;

    font-weight:
        700 !important;

    cursor:
        pointer;

    transition:
        background .18s ease,
        color .18s ease,
        box-shadow .18s ease;

}


#auth-screen .auth-tab.active {

    color:
        #16110a !important;

    background:
        linear-gradient(
            100deg,
            var(--v181-gold-light),
            var(--v181-gold)
        ) !important;

    box-shadow:
        0 8px 22px
        rgba(216,166,75,.18);

}


/* ---------------------------------------------------
   Form fields
   --------------------------------------------------- */

#auth-screen .field {

    margin-bottom:
        18px !important;

}


#auth-screen .field label {

    display:
        block;

    margin-bottom:
        8px;

    color:
        #edf2f7 !important;

    font-size:
        14px;

    font-weight:
        700;

}


#auth-screen .input-shell {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    min-height:
        59px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(160, 184, 208, .30) !important;

    border-radius:
        14px !important;

    background:
        var(--v181-field) !important;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;

}


#auth-screen .input-shell:focus-within {

    border-color:
        rgba(216,166,75,.86) !important;

    box-shadow:
        0 0 0 3px
        rgba(216,166,75,.10);

    background:
        rgba(17, 38, 56, .96) !important;

}


#auth-screen .input-icon {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        52px;

    min-width:
        52px;

    color:
        #9eb0c1;

    font-size:
        17px;

}


#auth-screen .input-shell input {

    width:
        100% !important;

    min-width:
        0;

    min-height:
        57px !important;

    padding:
        0 10px !important;

    border:
        0 !important;

    outline:
        0 !important;

    background:
        transparent !important;

    color:
        #ffffff !important;

    font-size:
        16px !important;

    box-shadow:
        none !important;

}


#auth-screen .input-shell input::placeholder {

    color:
        #6f8091 !important;

}


/* Password eye */

#auth-screen .password-toggle {

    width:
        48px;

    height:
        48px;

    margin:
        4px;

    border:
        0;

    border-radius:
        10px;

    background:
        transparent;

    color:
        #8fa1b4;

    cursor:
        pointer;

}


/* ---------------------------------------------------
   Login options
   --------------------------------------------------- */

#auth-screen .login-options {

    display:
        flex !important;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        14px;

    margin:
        4px 0 18px !important;

}


#auth-screen .remember-option {

    display:
        inline-flex !important;

    align-items:
        center;

    gap:
        8px;

    color:
        #dce5ed !important;

}


#auth-screen .text-button {

    border:
        0 !important;

    background:
        transparent !important;

    color:
        var(--v181-blue) !important;

    cursor:
        pointer;

}


/* ---------------------------------------------------
   Main button
   --------------------------------------------------- */

#auth-screen #auth-submit {

    width:
        100% !important;

    min-height:
        61px !important;

    margin-top:
        2px;

    border:
        0 !important;

    border-radius:
        15px !important;

    color:
        #151008 !important;

    font-size:
        17px !important;

    font-weight:
        900 !important;

    cursor:
        pointer;

    background:
        linear-gradient(
            100deg,
            #f6ce73,
            #d69e45
        ) !important;

    box-shadow:
        0 12px 30px
        rgba(216,166,75,.17);

    transition:
        transform .16s ease,
        filter .16s ease,
        box-shadow .16s ease;

}


@media (hover: hover) {

    #auth-screen #auth-submit:hover {

        transform:
            translateY(-1px);

        filter:
            brightness(1.06);

        box-shadow:
            0 17px 36px
            rgba(216,166,75,.25);

    }

}


/* ---------------------------------------------------
   Error
   --------------------------------------------------- */

#auth-screen #auth-error {

    min-height:
        20px;

    margin-bottom:
        7px;

    color:
        #ff7777 !important;

    font-size:
        13px;

}


/* ---------------------------------------------------
   Separator
   --------------------------------------------------- */

#auth-screen .auth-separator {

    display:
        flex !important;

    align-items:
        center;

    gap:
        14px;

    margin:
        22px 0 17px !important;

    color:
        #8b9bac;

}


#auth-screen .auth-separator span {

    height:
        1px;

    flex:
        1;

    background:
        rgba(145,165,184,.22);

}


/* ---------------------------------------------------
   Social login
   --------------------------------------------------- */

#auth-screen .future-login-options {

    display:
        grid !important;

    grid-template-columns:
        1fr 1fr;

    gap:
        12px !important;

}


#auth-screen .future-login-options button {

    min-height:
        54px !important;

    border:
        1px solid
        rgba(155,179,200,.30) !important;

    border-radius:
        13px !important;

    background:
        rgba(4, 14, 24, .76) !important;

    color:
        #f5f7fa !important;

    font-weight:
        700 !important;

    cursor:
        pointer;

}


/*
 * Google remains light like the reference.
 */

#auth-screen .google-login-button {

    background:
        #f7f8fa !important;

    color:
        #15181d !important;

}


/* ---------------------------------------------------
   Privacy / footer note
   --------------------------------------------------- */

#auth-screen .privacy-note {

    margin-top:
        18px !important;

    color:
        #7e8e9f !important;

    font-size:
        11px !important;

    text-align:
        center;

}


/* ---------------------------------------------------
   Strict screen switching
   --------------------------------------------------- */

#auth-screen.hidden {

    display:
        none !important;

}

#chat-screen.hidden {

    display:
        none !important;

}


/* ---------------------------------------------------
   Tablet
   --------------------------------------------------- */

@media (max-width: 1100px) {

    #auth-screen {

        background-position:
            38% center !important;

    }

    #auth-screen::after {

        width:
            58%;

    }

    #auth-screen .auth-card {

        width:
            min(
                560px,
                52vw
            ) !important;

        margin-right:
            3vw !important;

    }

}


/* ---------------------------------------------------
   Mobile
   --------------------------------------------------- */

@media (max-width: 760px) {

    #auth-screen {

        min-height:
            100vh;

        padding:
            18px 14px 30px;

        background-position:
            31% center !important;

    }


    /*
     * On mobile the artwork becomes atmospheric
     * and the form takes priority.
     */

    #auth-screen::after {

        width:
            100%;

        background:
            linear-gradient(
                180deg,
                rgba(4,13,22,.38),
                rgba(4,13,22,.91) 34%,
                rgba(4,13,22,.98) 100%
            );

    }


    #auth-screen .auth-card {

        width:
            100% !important;

        max-width:
            520px;

        margin:
            150px auto 0 !important;

        padding:
            28px 20px 24px !important;

        border-radius:
            22px !important;

    }


    #auth-screen #auth-title {

        font-size:
            27px !important;

    }


    #auth-screen .future-login-options {

        grid-template-columns:
            1fr;

    }


    #auth-screen .login-options {

        align-items:
            flex-start;

        flex-direction:
            column;

    }

}


/* ---------------------------------------------------
   Small phones
   --------------------------------------------------- */

@media (max-width: 420px) {

    #auth-screen {

        padding-inline:
            9px;

    }

    #auth-screen .auth-card {

        padding:
            24px 16px 22px !important;

        margin-top:
            120px !important;

    }

}


/* ===== ALUQAB AI V18.1 END ===== */




/* =========================================================
   ALUQAB AI V18.2
   FINAL OFFICIAL LOGIN LAYOUT
   ========================================================= */


/* Kill all old split-screen/grid behavior */
#auth-screen {
    position: relative !important;
    display: block !important;

    width: 100% !important;
    min-height: 100vh !important;

    overflow: hidden !important;

    grid-template-columns: none !important;
    grid-template-areas: none !important;

    background:
        url("/assets/aluqab-ai-login-v18.png")
        center center / cover no-repeat !important;
}


/* Completely remove old eagle/flag brand panel */
#auth-screen .auth-brand-panel {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}


/* Remove any old decorative layers */
#auth-screen .brand-decoration,
#auth-screen .brand-content,
#auth-screen .product-title,
#auth-screen .product-description,
#auth-screen .feature-grid {
    display: none !important;
}


/* Remove previous overlay that could darken the image incorrectly */
#auth-screen::before {
    content: "" !important;

    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;

    pointer-events: none !important;

    background:
        linear-gradient(
            90deg,
            rgba(3, 10, 17, .02) 0%,
            rgba(3, 10, 17, .06) 46%,
            rgba(3, 10, 17, .34) 62%,
            rgba(3, 10, 17, .78) 100%
        ) !important;
}


/* Remove the old right-side masking rule */
#auth-screen::after {
    display: none !important;
}


/* ---------------------------------------------------------
   AUTH CARD — REAL WORKING FORM
   --------------------------------------------------------- */

#auth-screen .auth-card {
    position: absolute !important;

    z-index: 50 !important;

    top: 50% !important;
    right: 4.2% !important;
    left: auto !important;

    transform:
        translateY(-50%) !important;

    width:
        min(560px, 40vw) !important;

    max-height:
        calc(100vh - 48px) !important;

    overflow-y:
        auto !important;

    margin: 0 !important;

    padding:
        34px 36px 28px !important;

    border:
        1px solid
        rgba(214, 162, 72, .55) !important;

    border-radius:
        25px !important;

    background:
        linear-gradient(
            145deg,
            rgba(7, 20, 32, .96),
            rgba(3, 12, 21, .96)
        ) !important;

    box-shadow:
        0 30px 80px
        rgba(0, 0, 0, .48),
        inset 0 1px 0
        rgba(255,255,255,.05) !important;

    backdrop-filter:
        blur(18px) !important;

    -webkit-backdrop-filter:
        blur(18px) !important;

    direction:
        rtl !important;
}


/* ---------------------------------------------------------
   LANGUAGE SWITCH
   --------------------------------------------------------- */

#auth-screen .language-switch {
    position: absolute !important;

    z-index: 70 !important;

    top: 20px !important;
    left: 24px !important;
    right: auto !important;

    margin: 0 !important;
}


/* ---------------------------------------------------------
   TITLE
   --------------------------------------------------------- */

#auth-screen .auth-heading {
    text-align: right !important;
    margin-bottom: 22px !important;
}

#auth-screen .auth-eyebrow {
    display: none !important;
}

#auth-screen #auth-title {
    margin: 0 0 7px !important;

    color: #ffffff !important;

    font-size:
        clamp(27px, 2vw, 36px) !important;

    font-weight: 850 !important;

    line-height: 1.3 !important;
}

#auth-screen #auth-subtitle {
    margin: 0 !important;

    color:
        #92a2b4 !important;

    font-size:
        15px !important;
}


/* ---------------------------------------------------------
   TABS
   --------------------------------------------------------- */

#auth-screen .auth-tabs {
    display: grid !important;

    grid-template-columns:
        1fr 1fr !important;

    gap: 7px !important;

    margin:
        0 0 24px !important;

    padding:
        4px !important;

    border:
        1px solid
        rgba(214,162,72,.28) !important;

    border-radius:
        15px !important;

    background:
        rgba(3, 12, 21, .55) !important;
}

#auth-screen .auth-tab {
    min-height:
        50px !important;

    border:
        0 !important;

    border-radius:
        11px !important;

    background:
        transparent !important;

    color:
        #e8eef5 !important;

    font-weight:
        700 !important;
}

#auth-screen .auth-tab.active {
    color:
        #171108 !important;

    background:
        linear-gradient(
            100deg,
            #f3ca70,
            #d39c43
        ) !important;
}


/* ---------------------------------------------------------
   FIELDS
   --------------------------------------------------------- */

#auth-screen .field {
    margin-bottom:
        17px !important;
}

#auth-screen .field label {
    display:
        block !important;

    margin-bottom:
        7px !important;

    color:
        #ecf1f6 !important;

    font-size:
        13px !important;

    font-weight:
        700 !important;
}

#auth-screen .input-shell {
    display:
        flex !important;

    align-items:
        center !important;

    min-height:
        56px !important;

    border:
        1px solid
        rgba(143,168,190,.33) !important;

    border-radius:
        13px !important;

    background:
        rgba(13, 31, 47, .87) !important;

    overflow:
        hidden !important;
}

#auth-screen .input-shell:focus-within {
    border-color:
        rgba(215,164,76,.85) !important;

    box-shadow:
        0 0 0 3px
        rgba(215,164,76,.10) !important;
}

#auth-screen .input-shell input {
    width:
        100% !important;

    min-height:
        54px !important;

    border:
        0 !important;

    outline:
        0 !important;

    background:
        transparent !important;

    color:
        white !important;

    font-size:
        15px !important;

    box-shadow:
        none !important;
}


/* ---------------------------------------------------------
   LOGIN OPTIONS
   --------------------------------------------------------- */

#auth-screen .login-options {
    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        space-between !important;

    gap:
        12px !important;

    margin:
        2px 0 17px !important;
}


/* ---------------------------------------------------------
   LOGIN BUTTON
   --------------------------------------------------------- */

#auth-screen #auth-submit {
    width:
        100% !important;

    min-height:
        58px !important;

    border:
        0 !important;

    border-radius:
        14px !important;

    color:
        #171108 !important;

    font-size:
        17px !important;

    font-weight:
        900 !important;

    background:
        linear-gradient(
            100deg,
            #f5ce75,
            #d69c41
        ) !important;

    box-shadow:
        0 12px 28px
        rgba(211,156,65,.19) !important;
}


/* ---------------------------------------------------------
   SOCIAL LOGIN
   --------------------------------------------------------- */

#auth-screen .future-login-options {
    display:
        grid !important;

    grid-template-columns:
        1fr 1fr !important;

    gap:
        11px !important;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 800px) {

    #auth-screen {
        min-height:
            100vh !important;

        padding:
            105px 14px 26px !important;

        background-position:
            31% center !important;
    }

    #auth-screen::before {
        background:
            linear-gradient(
                180deg,
                rgba(3,10,17,.30),
                rgba(3,10,17,.86) 40%,
                rgba(3,10,17,.98) 100%
            ) !important;
    }

    #auth-screen .auth-card {
        position:
            relative !important;

        top:
            auto !important;

        right:
            auto !important;

        left:
            auto !important;

        transform:
            none !important;

        width:
            100% !important;

        max-width:
            520px !important;

        max-height:
            none !important;

        margin:
            0 auto !important;

        padding:
            26px 19px 23px !important;

        border-radius:
            21px !important;
    }

    #auth-screen .language-switch {
        top:
            16px !important;

        left:
            16px !important;
    }

    #auth-screen .future-login-options {
        grid-template-columns:
            1fr !important;
    }

}


/* =========================================================
   END ALUQAB AI V18.2
   ========================================================= */



/* ==========================================================
   ALUQAB AI V19 — ATTACHMENT PREVIEW
   ========================================================== */

.attachment-preview {
    width: min(100%, 760px);
    margin: 0 auto 8px;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    direction: rtl;
}

.attachment-preview.hidden {
    display: none !important;
}

.attachment-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 300px;
    padding: 8px 10px;
    border: 1px solid rgba(130,150,170,.25);
    border-radius: 12px;
    background: rgba(247,249,252,.96);
    box-shadow: 0 2px 9px rgba(20,35,50,.06);
}

.attachment-chip-icon {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    font-size: 17px;
}

.attachment-chip-details {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.attachment-chip-details strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 700;
}

.attachment-chip-details small {
    opacity: .62;
    font-size: 10px;
}

.attachment-remove {
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    font-size: 19px;
    line-height: 1;
}

.attachment-remove:hover {
    background: rgba(120,135,150,.12);
}

#attach-button.uploading {
    opacity: .55;
    cursor: wait;
}

@media (max-width: 620px) {

    .attachment-preview {
        padding-inline: 6px;
    }

    .attachment-chip {
        width: 100%;
        max-width: none;
    }
}

/* ================= END V19 ================= */



/* ==========================================================
   ALUQAB AI V20 — MEDIA UI
   ========================================================== */

#voice-button.recording {

    background:
        rgba(210, 45, 55, .14) !important;

    color:
        #d52c39 !important;

    box-shadow:
        0 0 0 3px
        rgba(210, 45, 55, .08);

    animation:
        aluqab-record-pulse
        1.2s
        infinite;

}


@keyframes aluqab-record-pulse {

    0% {
        transform:
            scale(1);
    }

    50% {
        transform:
            scale(1.07);
    }

    100% {
        transform:
            scale(1);
    }

}


#web-search-button.active {

    background:
        rgba(50, 125, 245, .12) !important;

    color:
        #2f74e8 !important;

    box-shadow:
        inset 0 0 0 1px
        rgba(50, 125, 245, .20);

}


#speak-answer-button.playing {

    background:
        rgba(216, 164, 58, .13) !important;

}


.aluqab-image-overlay {

    position:
        fixed;

    z-index:
        999999;

    inset:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        24px;

    background:
        rgba(3, 10, 18, .82);

    backdrop-filter:
        blur(12px);

}


.aluqab-image-modal {

    width:
        min(92vw, 760px);

    max-height:
        92vh;

    overflow:
        auto;

    display:
        flex;

    flex-direction:
        column;

    gap:
        14px;

    padding:
        18px;

    border:
        1px solid
        rgba(216, 164, 58, .35);

    border-radius:
        20px;

    background:
        #0a1724;

    color:
        #fff;

    box-shadow:
        0 35px 100px
        rgba(0, 0, 0, .55);

}


.aluqab-image-modal-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

}


.aluqab-image-modal-header strong {

    font-size:
        16px;

}


.aluqab-image-modal-header button {

    width:
        34px;

    height:
        34px;

    border:
        0;

    border-radius:
        10px;

    color:
        #fff;

    background:
        rgba(255,255,255,.08);

    cursor:
        pointer;

    font-size:
        21px;

}


.aluqab-image-modal img {

    width:
        100%;

    height:
        auto;

    max-height:
        68vh;

    object-fit:
        contain;

    border-radius:
        14px;

    background:
        #03080d;

}


.aluqab-image-modal small {

    opacity:
        .65;

    direction:
        ltr;

    text-align:
        center;

}


.aluqab-image-actions {

    display:
        flex;

    justify-content:
        center;

    gap:
        10px;

}


.aluqab-image-actions a,
.aluqab-image-actions button {

    min-width:
        120px;

    padding:
        10px 16px;

    border:
        0;

    border-radius:
        10px;

    cursor:
        pointer;

    text-decoration:
        none;

    text-align:
        center;

    font-weight:
        700;

}


.aluqab-image-actions a {

    background:
        #e5ad4b;

    color:
        #13100a;

}


.aluqab-image-actions button {

    background:
        rgba(255,255,255,.09);

    color:
        #fff;

}


/* ================= END V20 ================= */



/* ==========================================================
   ALUQAB AI V20.1 — LARGE PREMIUM COMPOSER
   ========================================================== */


/* ----------------------------------------------------------
   Composer outer area
   ---------------------------------------------------------- */

.composer-area {

    padding:
        14px 28px 22px !important;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0),
            rgba(255,255,255,.96) 24%,
            #ffffff 100%
        ) !important;

}


/* ----------------------------------------------------------
   Main composer shell
   ---------------------------------------------------------- */

.composer {

    width:
        min(100%, 980px) !important;

    min-height:
        88px !important;

    margin:
        0 auto !important;

    padding:
        12px 14px !important;

    display:
        flex !important;

    align-items:
        flex-end !important;

    gap:
        10px !important;

    border:
        1px solid
        rgba(28, 58, 88, .13) !important;

    border-radius:
        26px !important;

    background:
        rgba(255,255,255,.985) !important;

    box-shadow:
        0 10px 35px
        rgba(20, 45, 70, .08),
        0 2px 7px
        rgba(20, 45, 70, .04),
        inset 0 1px 0
        rgba(255,255,255,.95) !important;

    transition:
        border-color .20s ease,
        box-shadow .20s ease,
        transform .20s ease !important;

}


.composer:focus-within {

    border-color:
        rgba(202, 151, 48, .46) !important;

    box-shadow:
        0 14px 42px
        rgba(20, 45, 70, .10),
        0 0 0 4px
        rgba(226, 176, 69, .07) !important;

}


/* ----------------------------------------------------------
   Large text input
   ---------------------------------------------------------- */

#message-input {

    flex:
        1 1 auto !important;

    width:
        100% !important;

    min-width:
        0 !important;

    min-height:
        62px !important;

    max-height:
        260px !important;

    padding:
        17px 12px 14px !important;

    border:
        0 !important;

    outline:
        0 !important;

    resize:
        none !important;

    overflow-y:
        auto !important;

    background:
        transparent !important;

    color:
        #172536 !important;

    font-family:
        "Noto Sans Arabic",
        system-ui,
        sans-serif !important;

    font-size:
        17px !important;

    font-weight:
        500 !important;

    line-height:
        1.9 !important;

    letter-spacing:
        0 !important;

    direction:
        rtl !important;

    text-align:
        right !important;

    caret-color:
        #d49d35 !important;

    scrollbar-width:
        thin !important;

}


#message-input::placeholder {

    color:
        #9aa7b5 !important;

    opacity:
        1 !important;

    font-size:
        15px !important;

    font-weight:
        400 !important;

}


/* ----------------------------------------------------------
   Composer control buttons
   ---------------------------------------------------------- */

.composer .composer-tool {

    width:
        44px !important;

    height:
        44px !important;

    min-width:
        44px !important;

    flex:
        0 0 44px !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    padding:
        0 !important;

    margin:
        0 !important;

    border:
        1px solid
        transparent !important;

    border-radius:
        14px !important;

    background:
        transparent !important;

    color:
        #66788a !important;

    font-size:
        17px !important;

    cursor:
        pointer !important;

    transition:
        background .18s ease,
        color .18s ease,
        border-color .18s ease,
        transform .18s ease,
        box-shadow .18s ease !important;

}


.composer .composer-tool:hover {

    color:
        #25384a !important;

    background:
        #f5f8fb !important;

    border-color:
        rgba(31,62,91,.08) !important;

    transform:
        translateY(-1px) !important;

}


.composer .composer-tool:active {

    transform:
        scale(.95) !important;

}


/* ----------------------------------------------------------
   Attach
   ---------------------------------------------------------- */

#attach-button {

    font-size:
        24px !important;

    font-weight:
        400 !important;

}


/* ----------------------------------------------------------
   Image generation
   ---------------------------------------------------------- */

#image-button {

    font-size:
        19px !important;

}


/* ----------------------------------------------------------
   Web
   ---------------------------------------------------------- */

#web-search-button {

    font-size:
        19px !important;

}


#web-search-button.active {

    color:
        #286fd2 !important;

    background:
        #edf5ff !important;

    border-color:
        rgba(40,111,210,.18) !important;

}


/* ----------------------------------------------------------
   Voice
   ---------------------------------------------------------- */

#voice-button {

    font-size:
        17px !important;

}


#voice-button.recording {

    color:
        #c93542 !important;

    background:
        #fff0f1 !important;

    border-color:
        rgba(201,53,66,.16) !important;

}


/* ----------------------------------------------------------
   Speaker
   ---------------------------------------------------------- */

#speak-answer-button {

    font-size:
        17px !important;

}


/* ----------------------------------------------------------
   Send button
   ---------------------------------------------------------- */

#send-button,
.composer button[type="submit"] {

    width:
        48px !important;

    height:
        48px !important;

    min-width:
        48px !important;

    flex:
        0 0 48px !important;

    border:
        0 !important;

    border-radius:
        15px !important;

    background:
        linear-gradient(
            145deg,
            #f6c861,
            #dfa638
        ) !important;

    color:
        #16120a !important;

    box-shadow:
        0 7px 18px
        rgba(212,157,53,.22) !important;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        filter .18s ease !important;

}


#send-button:hover,
.composer button[type="submit"]:hover {

    transform:
        translateY(-1px) !important;

    box-shadow:
        0 9px 22px
        rgba(212,157,53,.28) !important;

    filter:
        brightness(1.02) !important;

}


/* ----------------------------------------------------------
   Attachment preview also wider
   ---------------------------------------------------------- */

.attachment-preview {

    width:
        min(100%, 980px) !important;

    margin:
        0 auto 10px !important;

    padding:
        0 6px !important;

    gap:
        8px !important;

}


.attachment-chip {

    min-height:
        48px !important;

    padding:
        8px 12px !important;

    border-radius:
        13px !important;

    background:
        #f8fafc !important;

}


/* ----------------------------------------------------------
   Footer/help text under composer
   ---------------------------------------------------------- */

.composer-area small,
.composer-note,
.ai-disclaimer {

    font-size:
        10px !important;

    color:
        #9aa6b1 !important;

}


/* ----------------------------------------------------------
   Desktop widescreen
   ---------------------------------------------------------- */

@media (min-width: 1400px) {

    .composer {

        width:
            min(100%, 1040px) !important;

    }

    .attachment-preview {

        width:
            min(100%, 1040px) !important;

    }

}


/* ----------------------------------------------------------
   Tablet
   ---------------------------------------------------------- */

@media (max-width: 900px) {

    .composer-area {

        padding:
            10px 14px 16px !important;

    }


    .composer {

        min-height:
            78px !important;

        padding:
            9px 10px !important;

        border-radius:
            22px !important;

        gap:
            7px !important;

    }


    #message-input {

        min-height:
            56px !important;

        font-size:
            16px !important;

        padding:
            14px 8px 11px !important;

    }


    .composer .composer-tool {

        width:
            40px !important;

        height:
            40px !important;

        min-width:
            40px !important;

        flex-basis:
            40px !important;

    }

}


/* ----------------------------------------------------------
   Mobile
   ---------------------------------------------------------- */

@media (max-width: 620px) {

    .composer-area {

        padding:
            8px 8px 12px !important;

    }


    .composer {

        min-height:
            72px !important;

        padding:
            8px !important;

        gap:
            5px !important;

        border-radius:
            19px !important;

    }


    #message-input {

        min-height:
            52px !important;

        max-height:
            190px !important;

        font-size:
            15px !important;

        line-height:
            1.75 !important;

        padding:
            12px 6px 9px !important;

    }


    .composer .composer-tool {

        width:
            36px !important;

        height:
            36px !important;

        min-width:
            36px !important;

        flex-basis:
            36px !important;

        border-radius:
            11px !important;

        font-size:
            15px !important;

    }

}


/* ==========================================================
   END ALUQAB AI V20.1
   ========================================================== */



/* ==========================================================
   ALUQAB AI V21 — PRODUCT UI
   ========================================================== */

.message-content {

    position:
        relative;

}


.v21-copy-message {

    position:
        absolute;

    top:
        4px;

    left:
        4px;

    width:
        30px;

    height:
        30px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        0;

    border-radius:
        9px;

    background:
        transparent;

    color:
        #8190a0;

    opacity:
        0;

    cursor:
        pointer;

    transition:
        opacity .18s ease,
        background .18s ease,
        color .18s ease;

}


.message-content:hover
.v21-copy-message {

    opacity:
        1;

}


.v21-copy-message:hover {

    background:
        rgba(70, 90, 110, .08);

    color:
        #34495d;

}


/* Gallery */

.v21-gallery-overlay {

    position:
        fixed;

    z-index:
        1000000;

    inset:
        0;

    padding:
        24px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        rgba(3, 10, 18, .82);

    backdrop-filter:
        blur(12px);

}


.v21-gallery-panel {

    width:
        min(1100px, 94vw);

    max-height:
        90vh;

    overflow:
        auto;

    padding:
        20px;

    border:
        1px solid
        rgba(215, 164, 62, .28);

    border-radius:
        24px;

    background:
        #f9fbfd;

    box-shadow:
        0 30px 100px
        rgba(0,0,0,.35);

}


.v21-gallery-head {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin-bottom:
        18px;

}


.v21-gallery-head strong {

    font-size:
        20px;

    color:
        #172536;

}


.v21-gallery-head button {

    width:
        38px;

    height:
        38px;

    border:
        0;

    border-radius:
        11px;

    background:
        #edf1f5;

    cursor:
        pointer;

    font-size:
        22px;

}


.v21-gallery-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(210px, 1fr)
        );

    gap:
        14px;

}


.v21-gallery-card {

    overflow:
        hidden;

    min-height:
        210px;

    display:
        flex;

    flex-direction:
        column;

    border:
        1px solid
        rgba(40, 65, 90, .10);

    border-radius:
        16px;

    background:
        #fff;

    box-shadow:
        0 5px 18px
        rgba(20, 40, 60, .05);

}


.v21-gallery-card img {

    width:
        100%;

    aspect-ratio:
        1 / 1;

    object-fit:
        cover;

    display:
        block;

}


.v21-gallery-card a {

    margin:
        9px;

    padding:
        8px;

    border-radius:
        9px;

    background:
        #f2f5f8;

    color:
        #30465a;

    text-align:
        center;

    text-decoration:
        none;

    font-size:
        12px;

    font-weight:
        700;

}


.v21-gallery-loader,
.v21-gallery-empty {

    min-height:
        180px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #82909e;

}


/* Slight visual identity for new tools */

#generated-gallery-button,
#export-chat-button {

    font-size:
        18px !important;

}


/* ================= END V21 ================= */



/* ==========================================================
   ALUQAB AI V22 — ACCOUNT UI
   ========================================================== */


/* Chat management */

.v22-chat-tools {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        7px;

    margin:
        8px 0 14px;

}


.v22-chat-tools button {

    min-height:
        38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    border:
        1px solid
        rgba(55,75,95,.10);

    border-radius:
        11px;

    background:
        rgba(255,255,255,.55);

    color:
        #637485;

    cursor:
        pointer;

    transition:
        .18s ease;

}


.v22-chat-tools button:hover {

    background:
        #ffffff;

    color:
        #25384a;

    transform:
        translateY(-1px);

}


.v22-chat-tools button.danger:hover {

    color:
        #c33a46;

    background:
        #fff4f5;

    border-color:
        rgba(195,58,70,.15);

}


.v22-chat-tools small {

    font-size:
        11px;

}


/* Account button */

.v22-account-button {

    width:
        100%;

    min-height:
        42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-start;

    gap:
        10px;

    margin:
        8px 0;

    padding:
        9px 12px;

    border:
        1px solid
        rgba(50,70,90,.09);

    border-radius:
        12px;

    background:
        rgba(255,255,255,.45);

    color:
        #586b7c;

    cursor:
        pointer;

    font-family:
        inherit;

    transition:
        .18s ease;

}


.v22-account-button:hover {

    background:
        #fff;

    color:
        #26394b;

}


/* Overlay */

.v22-account-overlay {

    position:
        fixed;

    z-index:
        1000001;

    inset:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        20px;

    background:
        rgba(4,12,20,.70);

    backdrop-filter:
        blur(12px);

}


/* Modal */

.v22-account-modal {

    width:
        min(460px, 94vw);

    max-height:
        90vh;

    overflow-y:
        auto;

    padding:
        22px;

    border:
        1px solid
        rgba(35,60,85,.12);

    border-radius:
        24px;

    background:
        #ffffff;

    box-shadow:
        0 30px 100px
        rgba(0,0,0,.28);

    color:
        #1d2e3e;

}


.v22-account-head {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    margin-bottom:
        22px;

}


.v22-account-head > div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;

}


.v22-account-head strong {

    font-size:
        20px;

}


.v22-account-head small {

    color:
        #8a98a6;

    direction:
        ltr;

    text-align:
        right;

}


.v22-account-close {

    width:
        38px;

    height:
        38px;

    flex:
        0 0 38px;

    border:
        0;

    border-radius:
        11px;

    background:
        #f1f4f7;

    color:
        #647585;

    cursor:
        pointer;

    font-size:
        22px;

}


/* Sections */

.v22-account-section {

    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;

}


.v22-account-section label,
.v22-section-title {

    font-size:
        13px;

    font-weight:
        700;

    color:
        #43576a;

}


.v22-account-section input {

    width:
        100%;

    min-height:
        48px;

    padding:
        10px 13px;

    border:
        1px solid
        #dfe5eb;

    border-radius:
        12px;

    outline:
        0;

    background:
        #fbfcfd;

    color:
        #203244;

    font-family:
        inherit;

    font-size:
        14px;

    transition:
        border-color .18s ease,
        box-shadow .18s ease;

}


.v22-account-section input:focus {

    border-color:
        rgba(205,155,55,.65);

    box-shadow:
        0 0 0 4px
        rgba(215,165,60,.08);

    background:
        #fff;

}


.v22-primary {

    min-height:
        45px;

    margin-top:
        3px;

    border:
        0;

    border-radius:
        12px;

    background:
        linear-gradient(
            145deg,
            #efc367,
            #dba23a
        );

    color:
        #17130d;

    cursor:
        pointer;

    font-family:
        inherit;

    font-weight:
        800;

    box-shadow:
        0 7px 18px
        rgba(210,157,55,.18);

}


.v22-primary:disabled {

    opacity:
        .55;

    cursor:
        wait;

}


.v22-account-divider {

    height:
        1px;

    margin:
        22px 0;

    background:
        #eef1f4;

}


.v22-account-status {

    min-height:
        20px;

    padding-top:
        4px;

    font-size:
        12px;

    text-align:
        center;

}


.v22-account-status.success {

    color:
        #237b4b;

}


.v22-account-status.error {

    color:
        #bd3542;

}


@media (max-width: 620px) {

    .v22-account-modal {

        padding:
            18px;

        border-radius:
            20px;

    }

}


/* ================= END V22 ================= */



/* ==========================================================
   ALUQAB AI V23 — PASSWORD RECOVERY UI
   ========================================================== */

.v23-reset-overlay {

    position:
        fixed;

    z-index:
        1000010;

    inset:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        20px;

    background:
        rgba(4, 12, 20, .72);

    backdrop-filter:
        blur(12px);

}


.v23-reset-modal {

    width:
        min(430px, 94vw);

    padding:
        22px;

    border:
        1px solid
        rgba(35, 60, 85, .13);

    border-radius:
        24px;

    background:
        #fff;

    color:
        #1d2e3e;

    box-shadow:
        0 30px 100px
        rgba(0, 0, 0, .30);

}


.v23-reset-head {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        14px;

    margin-bottom:
        22px;

}


.v23-reset-head > div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;

}


.v23-reset-head strong {

    font-size:
        20px;

}


.v23-reset-head small {

    color:
        #8897a5;

    line-height:
        1.7;

}


.v23-reset-close {

    width:
        38px;

    height:
        38px;

    flex:
        0 0 38px;

    border:
        0;

    border-radius:
        11px;

    background:
        #f1f4f7;

    color:
        #627384;

    cursor:
        pointer;

    font-size:
        22px;

}


.v23-reset-body {

    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;

}


.v23-reset-body label {

    margin-top:
        3px;

    color:
        #43576a;

    font-size:
        13px;

    font-weight:
        700;

}


.v23-reset-body input {

    width:
        100%;

    min-height:
        49px;

    padding:
        10px 13px;

    border:
        1px solid
        #dfe5eb;

    border-radius:
        12px;

    outline:
        none;

    background:
        #fbfcfd;

    color:
        #203244;

    font-family:
        inherit;

    font-size:
        14px;

    transition:
        border-color .18s ease,
        box-shadow .18s ease;

}


.v23-reset-body input:focus {

    border-color:
        rgba(205,155,55,.65);

    box-shadow:
        0 0 0 4px
        rgba(215,165,60,.08);

    background:
        #fff;

}


.v23-reset-primary {

    min-height:
        47px;

    margin-top:
        8px;

    border:
        0;

    border-radius:
        12px;

    background:
        linear-gradient(
            145deg,
            #efc367,
            #dba23a
        );

    color:
        #17130d;

    font-family:
        inherit;

    font-weight:
        800;

    cursor:
        pointer;

    box-shadow:
        0 7px 18px
        rgba(210,157,55,.18);

}


.v23-reset-primary:disabled {

    opacity:
        .55;

    cursor:
        wait;

}


.v23-reset-status {

    min-height:
        24px;

    padding-top:
        5px;

    font-size:
        12px;

    line-height:
        1.7;

    text-align:
        center;

}


.v23-reset-status.success {

    color:
        #247b4c;

}


.v23-reset-status.error {

    color:
        #bd3542;

}


/* ================= END V23 ================= */



/* ==========================================================
   ALUQAB AI V24 — REALTIME LIVE VOICE UI
   ========================================================== */


.v24-voice-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000020;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background:
        rgba(4, 10, 18, .82);

    backdrop-filter:
        blur(18px);
}


.v24-voice-modal {
    position: relative;

    width:
        min(
            440px,
            95vw
        );

    padding:
        34px 26px 26px;

    overflow: hidden;

    border:
        1px solid
        rgba(
            225,
            183,
            88,
            .20
        );

    border-radius:
        30px;

    background:
        linear-gradient(
            160deg,
            #111c28,
            #09121b
        );

    color:
        #f7f4ed;

    text-align: center;

    box-shadow:
        0 35px 120px
        rgba(
            0,
            0,
            0,
            .52
        );
}


.v24-voice-modal::before {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    top: -170px;
    left: 50%;

    transform:
        translateX(-50%);

    border-radius:
        50%;

    background:
        rgba(
            220,
            164,
            57,
            .12
        );

    filter:
        blur(20px);

    pointer-events: none;
}


.v24-voice-close {
    position: absolute;

    top: 15px;
    inset-inline-end: 15px;

    width: 38px;
    height: 38px;

    border: 0;

    border-radius:
        12px;

    background:
        rgba(
            255,
            255,
            255,
            .07
        );

    color:
        #d9e1e8;

    font-size:
        23px;

    cursor: pointer;
}


.v24-voice-brand {
    font-size:
        23px;

    font-weight:
        800;

    color:
        #efc66e;
}


.v24-voice-subtitle {
    margin-top:
        4px;

    color:
        #91a1b0;

    font-size:
        13px;
}


.v24-voice-orb-wrap {
    display: flex;
    justify-content: center;

    margin:
        32px 0 24px;
}


.v24-voice-orb {
    position: relative;

    width:
        118px;

    height:
        118px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #f4cf7a,
            #c98d27 58%,
            #785016
        );

    box-shadow:
        0 0 0 12px
            rgba(
                220,
                167,
                65,
                .06
            ),
        0 0 55px
            rgba(
                222,
                166,
                56,
                .18
            );

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}


.v24-voice-orb::before,
.v24-voice-orb::after {
    content: "";

    position: absolute;
    inset: -13px;

    border:
        1px solid
        rgba(
            239,
            195,
            103,
            .18
        );

    border-radius:
        50%;

    opacity: 0;
}


.v24-voice-orb span {
    font-size:
        38px;

    filter:
        drop-shadow(
            0 3px 10px
            rgba(
                0,
                0,
                0,
                .25
            )
        );
}


.v24-voice-orb[
    data-state="listening"
] {
    animation:
        v24VoiceIdle
        2.3s ease-in-out
        infinite;
}


.v24-voice-orb[
    data-state="user-speaking"
] {
    transform:
        scale(1.07);

    box-shadow:
        0 0 0 16px
            rgba(
                220,
                167,
                65,
                .09
            ),
        0 0 75px
            rgba(
                222,
                166,
                56,
                .30
            );
}


.v24-voice-orb[
    data-state="user-speaking"
]::before {
    opacity: 1;

    animation:
        v24VoiceRing
        1.15s ease-out
        infinite;
}


.v24-voice-orb[
    data-state="assistant-speaking"
] {
    animation:
        v24VoiceSpeak
        .75s ease-in-out
        infinite alternate;
}


.v24-voice-orb[
    data-state="thinking"
] {
    animation:
        v24VoiceThink
        1.1s linear
        infinite;
}


.v24-voice-orb[
    data-state="muted"
] {
    filter:
        grayscale(.85);

    opacity:
        .7;
}


.v24-voice-orb[
    data-state="error"
] {
    filter:
        grayscale(.5);

    box-shadow:
        0 0 0 12px
        rgba(
            180,
            45,
            56,
            .08
        );
}


.v24-voice-status {
    min-height:
        25px;

    color:
        #f1d28d;

    font-size:
        15px;

    font-weight:
        700;
}


.v24-voice-status[
    data-state="error"
] {
    color:
        #ff8e98;
}


.v24-voice-status[
    data-state="muted"
] {
    color:
        #aeb8c1;
}


.v24-voice-timer {
    margin-top:
        5px;

    color:
        #758799;

    font-family:
        monospace;

    font-size:
        12px;

    letter-spacing:
        .5px;
}


.v24-voice-transcript {
    min-height:
        70px;

    max-height:
        130px;

    overflow-y:
        auto;

    margin-top:
        20px;

    padding:
        14px 15px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .055
        );

    border-radius:
        16px;

    background:
        rgba(
            255,
            255,
            255,
            .035
        );

    color:
        #ced7df;

    font-size:
        13px;

    line-height:
        1.9;

    text-align:
        start;
}


.v24-voice-controls {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        10px;

    margin-top:
        20px;
}


.v24-voice-control {
    min-height:
        48px;

    padding:
        10px 14px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .08
        );

    border-radius:
        14px;

    background:
        rgba(
            255,
            255,
            255,
            .06
        );

    color:
        #e9eef2;

    font-family:
        inherit;

    font-weight:
        700;

    cursor: pointer;

    transition:
        background .18s ease,
        transform .18s ease;
}


.v24-voice-control:hover {
    background:
        rgba(
            255,
            255,
            255,
            .10
        );
}


.v24-voice-control:active {
    transform:
        scale(.98);
}


.v24-voice-control.is-muted {
    background:
        rgba(
            220,
            165,
            58,
            .12
        );

    color:
        #f0cb80;
}


.v24-voice-control.v24-end {
    background:
        rgba(
            205,
            59,
            69,
            .13
        );

    color:
        #ff9ca5;
}


.v24-voice-hint {
    display: block;

    margin-top:
        16px;

    color:
        #687a8a;

    line-height:
        1.8;

    font-size:
        11px;
}


#voice-button.v24-voice-active {
    background:
        rgba(
            218,
            164,
            57,
            .16
        );

    color:
        #dba638;

    box-shadow:
        0 0 0 3px
        rgba(
            218,
            164,
            57,
            .08
        );
}


#voice-button.v24-voice-starting {
    opacity:
        .6;
}


@keyframes v24VoiceIdle {

    0%,
    100% {
        transform:
            scale(1);
    }

    50% {
        transform:
            scale(1.025);
    }
}


@keyframes v24VoiceRing {

    0% {
        transform:
            scale(.92);

        opacity:
            .7;
    }

    100% {
        transform:
            scale(1.35);

        opacity:
            0;
    }
}


@keyframes v24VoiceSpeak {

    from {
        transform:
            scale(1);
    }

    to {
        transform:
            scale(1.08);
    }
}


@keyframes v24VoiceThink {

    0% {
        transform:
            rotate(0deg)
            scale(.98);
    }

    50% {
        transform:
            rotate(180deg)
            scale(1.03);
    }

    100% {
        transform:
            rotate(360deg)
            scale(.98);
    }
}


@media (
    max-width: 520px
) {

    .v24-voice-modal {
        padding:
            30px 18px 22px;

        border-radius:
            25px;
    }


    .v24-voice-orb {
        width:
            104px;

        height:
            104px;
    }


    .v24-voice-controls {
        grid-template-columns:
            1fr;
    }
}


/* ================= END V24 ================= */

/* =========================================================
   ALUQAB AI — MOBILE AUTH HOTFIX
   ========================================================= */

@media (max-width: 800px) {

    #auth-screen {
        width: 100% !important;
        height: auto !important;
        min-height: 100dvh !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        padding:
            88px 12px
            max(42px, env(safe-area-inset-bottom))
            !important;

        background-attachment: scroll !important;
        background-position: 33% center !important;
    }

    #auth-screen .auth-card {
        position: relative !important;

        width: 100% !important;
        max-width: 520px !important;

        height: auto !important;
        max-height: none !important;

        overflow: visible !important;

        margin: 0 auto !important;

        padding: 22px 16px 24px !important;

        border-radius: 20px !important;
    }

    #auth-screen .language-switch {
        position: absolute !important;

        top: 18px !important;
        left: 50% !important;
        right: auto !important;

        transform: translateX(-50%) !important;
    }

    #auth-screen .auth-heading {
        margin-bottom: 17px !important;
    }

    #auth-screen #auth-title {
        font-size: clamp(26px, 8vw, 34px) !important;
        line-height: 1.25 !important;
    }

    #auth-screen #auth-subtitle {
        font-size: 14px !important;
    }

    #auth-screen .auth-tabs {
        margin-bottom: 18px !important;
    }

    #auth-screen .auth-tab {
        min-height: 46px !important;
    }

    #auth-screen .field {
        margin-bottom: 13px !important;
    }

    #auth-screen .input-shell {
        min-height: 52px !important;
    }

    #auth-screen .input-shell input {
        min-height: 50px !important;
    }

    #auth-screen .login-options {
        margin: 0 0 14px !important;
    }

    #auth-screen #auth-submit {
        min-height: 54px !important;
    }

    #auth-screen .future-login-options {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }
}

@media (max-width: 420px) {

    #auth-screen {
        padding-left: 9px !important;
        padding-right: 9px !important;
    }

    #auth-screen .auth-card {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    #auth-screen #auth-title {
        font-size: 27px !important;
    }
}

/* =========================================================
   END MOBILE AUTH HOTFIX
   ========================================================= */