:root {
    --oso-green-deep: #101b0d;
    --oso-green: #1d3216;
    --oso-green-soft: #334a26;
    --oso-gold: #c89b35;
    --oso-gold-light: #efd277;
    --oso-cream: #fbf6e9;
    --oso-muted: #d9d1bc;
    --oso-font: "Noto Naskh Arabic", "Amiri", "Segoe UI", Tahoma, serif;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
    margin: 0;
    direction: rtl;
    font-family: var(--oso-font);
    background: var(--oso-green-deep);
}

.login-page {
    min-height: 100svh;
    color: var(--oso-cream);
    overflow-x: hidden;
    overflow-y: auto;
    padding: 24px 0;
    background:
        radial-gradient(circle at 17% 20%, rgba(200, 155, 53, .14), transparent 32%),
        radial-gradient(circle at 84% 74%, rgba(200, 155, 53, .08), transparent 36%),
        linear-gradient(135deg, #17270f 0%, #0e180c 55%, #1c2e16 100%);
}

.login-page::before,
.login-page::after {
    content: "";
    position: fixed;
    pointer-events: none;
    border: 1px solid rgba(239, 210, 119, .18);
    border-radius: 50%;
    transform: rotate(-18deg);
}

.login-page::before {
    width: 74vw;
    height: 130vh;
    left: -48vw;
    top: -18vh;
}

.login-page::after {
    width: 64vw;
    height: 118vh;
    right: -48vw;
    bottom: -22vh;
}

.login-layout {
    position: relative;
    z-index: 1;
    direction: ltr;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr);
    align-items: center;
    gap: clamp(28px, 4.5vw, 84px);
    width: min(1360px, calc(100% - 40px));
    min-height: calc(100svh - 48px);
    margin: 0 auto;
    padding: 0;
}

.brand-panel {
    direction: rtl;
    text-align: center;
    padding: 12px 20px;
}

.brand-mark {
    display: grid;
    place-items: center;
    width: clamp(180px, 22vw, 290px);
    height: clamp(180px, 22vw, 290px);
    margin: 0 auto 20px;
    border: 1px solid rgba(239, 210, 119, .35);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(49, 73, 32, .92), rgba(18, 31, 13, .5));
    box-shadow: 0 22px 55px rgba(0, 0, 0, .3), inset 0 0 0 12px rgba(200, 155, 53, .05);
}

.brand-mark img {
    display: block;
    width: 68%;
    height: 68%;
    object-fit: contain;
    filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .28));
}

.brand-eyebrow {
    margin: 0 0 6px;
    color: var(--oso-gold-light);
    font-family: Georgia, serif;
    font-size: clamp(20px, 2.2vw, 30px);
    letter-spacing: .08em;
    direction: ltr;
}

.brand-panel h1 {
    margin: 0;
    color: var(--oso-gold-light);
    font-size: clamp(28px, 3vw, 44px);
    font-weight: 800;
}

.brand-copy {
    max-width: 460px;
    margin: 14px auto 0;
    color: var(--oso-muted);
    font-size: clamp(16px, 1.5vw, 20px);
    line-height: 1.8;
}

.brand-rule {
    display: flex;
    align-items: center;
    gap: 12px;
    width: min(320px, 70%);
    margin: 24px auto 16px;
}

.brand-rule::before,
.brand-rule::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(239, 210, 119, .55));
}

.brand-rule::after { background: linear-gradient(90deg, rgba(239, 210, 119, .55), transparent); }

.brand-rule span {
    width: 9px;
    height: 9px;
    transform: rotate(45deg);
    background: var(--oso-gold);
}

.designer-credit {
    display: grid;
    gap: 4px;
    color: var(--oso-muted);
    font-size: 15px;
}

.designer-credit strong { color: var(--oso-cream); font-size: 17px; }
.designer-credit a { color: var(--oso-gold-light); text-decoration: none; direction: ltr; }

.login-card {
    direction: rtl;
    width: 100%;
    max-width: 540px;
    justify-self: center;
    padding: clamp(24px, 3vw, 38px);
    border: 1px solid rgba(239, 210, 119, .42);
    border-radius: 22px;
    background: linear-gradient(155deg, rgba(63, 82, 42, .95), rgba(16, 26, 11, .98));
    backdrop-filter: blur(8px);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .07);
}

.card-emblem {
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    margin: 0 auto 12px;
    border: 1px solid var(--oso-gold-light);
    border-radius: 50%;
    background: var(--oso-green);
    color: var(--oso-gold-light);
}

.card-emblem-shield { font-size: 38px; line-height: 1; }

.card-kicker {
    margin: 0;
    color: var(--oso-gold-light);
    font-family: Georgia, serif;
    font-size: 15px;
    letter-spacing: .07em;
    text-align: center;
    direction: ltr;
}

.login-card h2 {
    margin: 7px 0 0;
    color: var(--oso-cream);
    font-size: clamp(32px, 4vw, 46px);
    line-height: 1.05;
    text-align: center;
}

.card-title {
    margin: 7px 0 5px;
    color: var(--oso-gold-light);
    font-size: clamp(21px, 2.2vw, 28px);
    font-weight: 800;
    text-align: center;
}

.card-description {
    margin: 0 0 22px;
    color: var(--oso-muted);
    font-size: 16px;
    line-height: 1.6;
    text-align: center;
}

.messages {
    margin: 0 0 16px;
    padding: 10px 14px;
    border: 1px solid rgba(239, 151, 135, .55);
    border-radius: 10px;
    background: rgba(111, 39, 32, .3);
    color: #ffd4cc;
    font-size: 14px;
    font-weight: 700;
}

.messages p { margin: 0; }

.login-form { display: grid; gap: 15px; }

.field { display: grid; gap: 6px; }
.field-label { color: var(--oso-cream); font-size: 15px; font-weight: 700; }

.field-control { position: relative; display: block; }

.field input {
    width: 100%;
    height: 54px;
    padding: 0 48px 0 76px;
    border: 1px solid rgba(239, 210, 119, .5);
    border-radius: 10px;
    outline: none;
    background: rgba(255, 255, 255, .96);
    color: var(--oso-green);
    font: inherit;
    font-size: 17px;
    font-weight: 700;
    text-align: right;
    transition: border-color .2s, box-shadow .2s;
}

.field input::placeholder { color: #707866; }
.field input:focus { border-color: var(--oso-gold-light); box-shadow: 0 0 0 3px rgba(239, 210, 119, .17); }

.field-icon {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--oso-green);
    font-size: 22px;
    line-height: 1;
}

.password-toggle {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    padding: 5px;
    background: transparent;
    color: #6f5421;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
}

.form-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    color: var(--oso-muted);
    font-size: 14px;
}

.remember { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.remember input { width: 18px; height: 18px; margin: 0; accent-color: var(--oso-gold); }
.forgot-link { color: var(--oso-gold-light); }

.login-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    width: 100%;
    height: 58px;
    border: 1px solid #f6d77d;
    border-radius: 10px;
    background: linear-gradient(135deg, #f0cf6c, #bc8c28);
    color: #17230f;
    cursor: pointer;
    font: inherit;
    font-size: 24px;
    font-weight: 800;
    box-shadow: 0 14px 24px rgba(0, 0, 0, .22);
    transition: transform .2s, filter .2s;
}

.login-submit:hover { filter: brightness(1.05); transform: translateY(-1px); }
.submit-arrow { font-size: 32px; line-height: 1; }

.security-note { margin: 18px 0 0; color: var(--oso-muted); font-size: 14px; text-align: center; }
.security-note span { color: var(--oso-gold-light); margin-left: 6px; }

@media (max-width: 900px) {
    .login-page {
        height: auto;
        min-height: 100svh;
        overflow-y: auto;
    }

    .login-layout {
        direction: rtl;
        grid-template-columns: 1fr;
        gap: 20px;
        width: min(560px, calc(100% - 30px));
        height: auto;
        min-height: 100svh;
        padding: 28px 0 34px;
    }

    .brand-panel { padding: 0 10px; }
    .brand-mark { width: 128px; height: 128px; margin-bottom: 14px; }
    .brand-eyebrow { font-size: 18px; }
    .brand-panel h1 { font-size: 27px; }
    .brand-copy { margin-top: 8px; font-size: 15px; line-height: 1.6; }
    .brand-rule { margin: 18px auto 12px; }
    .designer-credit { font-size: 13px; }
    .designer-credit strong { font-size: 15px; }
    .login-card { max-width: none; padding: 28px 20px; border-radius: 16px; }
    .card-emblem { width: 58px; height: 58px; }
    .card-emblem-shield { font-size: 32px; }
    .login-card h2 { font-size: 34px; }
    .card-title { font-size: 22px; }
    .card-description { font-size: 14px; margin-bottom: 22px; }
}

@media (max-width: 420px) {
    .login-layout { width: calc(100% - 20px); }
    .login-card { padding: 24px 15px; }
    .form-options { align-items: flex-start; flex-direction: column; }
    .login-submit { height: 58px; font-size: 21px; }
}


@media (min-width: 901px) {
    .login-layout {
        grid-template-columns: minmax(0, 1.06fr) minmax(390px, .94fr);
    }
}

/* Oso readability contrast standard */
.login-page,
.login-card,
.brand-panel {
    color: #fffdf4 !important;
}

.login-page h1,
.login-page h2,
.login-page h3,
.login-page p,
.login-page label,
.login-page .field-label,
.login-page .card-title,
.login-page .card-description,
.login-page .security-note,
.login-page .form-options {
    color: #fffdf4 !important;
}

.login-page .brand-eyebrow,
.login-page .forgot-link,
.login-page .security-note span,
.login-page small {
    color: #f5d56e !important;
}

.login-page input,
.login-page select,
.login-page textarea {
    background: #ffffff !important;
    color: #111827 !important;
}

.login-page input::placeholder,
.login-page textarea::placeholder {
    color: #475467 !important;
}

.login-page .login-submit {
    color: #102914 !important;
}