:root {
    --login-primary: #6f3fc5;
    --login-primary-2: #9b4c9a;
    --login-ink: #202334;
    --login-muted: #7c8494;
    --login-border: #e8e7ee;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body.af-login-page {
    margin: 0;
    direction: rtl;
    font-family: Tahoma, "Segoe UI", Arial, sans-serif;
    color: var(--login-ink);
    background: #f7f6fa;
}
.af-login-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(420px, .85fr) minmax(520px, 1.15fr);
}
.af-login-form-side {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 44px;
    background: #fff;
    position: relative;
    z-index: 2;
}
.af-login-box { width: 100%; max-width: 420px; }
.af-login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 36px; }
.af-login-logo {
    width: 50px; height: 50px; flex: 0 0 50px;
    border-radius: 15px;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, var(--login-primary), #d04f84);
    font-weight: 900; font-size: 18px;
    box-shadow: 0 10px 24px rgba(111,63,197,.18);
}
.af-login-brand-copy strong { display: block; font-size: 17px; font-weight: 900; }
.af-login-brand-copy small { color: var(--login-muted); font-size: 10px; }
.af-login-kicker { color: var(--login-primary); font-size: 11px; font-weight: 800; margin-bottom: 7px; }
.af-login-box h1 { margin: 0 0 8px; font-size: 27px; font-weight: 900; letter-spacing: -.5px; }
.af-login-subtitle { margin: 0 0 27px; color: var(--login-muted); font-size: 12px; line-height: 1.9; }
.af-login-field { margin-bottom: 15px; text-align: right; }
.af-login-field label { display: block; margin-bottom: 7px; color: #596173; font-size: 11px; font-weight: 800; }
.af-input-wrap { position: relative; }
.af-input-wrap i { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: #aaa4b7; font-size: 14px; }
.af-login-field .form-control {
    width: 100%; height: 50px;
    border: 1px solid #dedde5;
    border-radius: 13px;
    background: #fcfcfd;
    padding: 10px 42px 10px 12px;
    font-family: inherit;
    font-size: 13px;
    outline: 0;
    box-shadow: none;
    transition: .2s ease;
}
.af-login-field .form-control:focus { border-color: #9e82d5; background: #fff; box-shadow: 0 0 0 4px rgba(111,63,197,.08); }
.af-login-submit {
    width: 100%; height: 50px; margin-top: 7px;
    border: 0; border-radius: 13px;
    color: #fff; cursor: pointer;
    font-family: inherit; font-size: 13px; font-weight: 900;
    background: linear-gradient(135deg, var(--login-primary), var(--login-primary-2));
    box-shadow: 0 12px 24px rgba(111,63,197,.20);
    transition: .2s ease;
}
.af-login-submit:hover { transform: translateY(-1px); box-shadow: 0 15px 28px rgba(111,63,197,.25); }
.af-login-notice { margin-top: 18px; padding: 12px 13px; border-radius: 12px; background: #f8f6fc; color: #747b8b; font-size: 10px; line-height: 1.9; min-height: 18px; }
.af-login-visual {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 58px;
    color: #fff;
    background:
        radial-gradient(circle at 20% 16%, rgba(255,255,255,.14), transparent 26%),
        radial-gradient(circle at 74% 68%, rgba(230,122,168,.20), transparent 25%),
        linear-gradient(140deg, #181128 0%, #352155 48%, #773a74 100%);
}
.af-login-visual:before,
.af-login-visual:after { content:""; position:absolute; border-radius:50%; border:1px solid rgba(255,255,255,.10); }
.af-login-visual:before { width: 460px; height: 460px; top: -160px; left: -120px; }
.af-login-visual:after { width: 260px; height: 260px; right: 50px; bottom: 40px; }
.af-visual-badge { position:absolute; top:58px; right:58px; display:inline-flex; align-items:center; gap:8px; padding:8px 11px; border-radius:999px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.07); font-size:10px; color:rgba(255,255,255,.76); }
.af-visual-content { position: relative; z-index: 2; max-width: 650px; }
.af-visual-content h2 { margin:0 0 15px; font-size:38px; line-height:1.55; font-weight:900; color:#fff; }
.af-visual-content p { margin:0; max-width:560px; color:rgba(255,255,255,.70); font-size:13px; line-height:2.1; }
.af-feature-row { position:relative; z-index:2; display:flex; gap:10px; flex-wrap:wrap; margin-top:28px; }
.af-feature-pill { display:flex; align-items:center; gap:7px; padding:9px 12px; border-radius:11px; background:rgba(255,255,255,.075); border:1px solid rgba(255,255,255,.10); font-size:10px; color:rgba(255,255,255,.82); }
#loading, #loading2 { width:100%; height:100%; top:0; left:0; position:fixed; display:none; background:rgba(255,255,255,.78); backdrop-filter:blur(3px); z-index:99999; text-align:center; }
#loading-image, #loading-image2 { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:100; }
@media (max-width: 980px) {
    .af-login-shell { grid-template-columns: 1fr; }
    .af-login-visual { display:none; }
    .af-login-form-side { min-height:100vh; padding:32px 20px; }
}
@media (max-width: 480px) {
    .af-login-box h1 { font-size:23px; }
    .af-login-brand { margin-bottom:28px; }
}

/* Keep the form reachable on short browser heights (e.g. DevTools opened). */
@media (max-height: 699px) and (min-width: 981px) {
    .af-login-form-side {
        align-items: flex-start;
        overflow-y: auto;
        padding-top: 24px;
        padding-bottom: 24px;
    }
    .af-login-brand { margin-bottom: 22px; }
    .af-login-subtitle { margin-bottom: 18px; }
}