@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap');
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.ops-auth {
    display: grid;
    place-items: center;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    padding: 22px;
    padding-bottom: calc(22px + env(safe-area-inset-bottom));
    font-family: Tajawal, 'Segoe UI', Tahoma, sans-serif;
    background: #f5f7f3;
    background-image: radial-gradient(circle at 12% 8%, #e0f0df 0, transparent 35%), radial-gradient(circle at 88% 90%, #e8f3b033 0, transparent 36%);
    color: #16251f;
}
body.ops-auth .login-card {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 460px;
    padding: 42px;
    background: #fff;
    border: 1px solid #e1e9e2;
    border-radius: 24px;
    box-shadow: 0 24px 70px rgba(19, 57, 35, .1);
    text-align: center;
}
body.ops-auth .login-card::before {
    content: '';
    display: block;
    height: 7px;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    background: #173e32;
}
body.ops-auth .logo-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 78px;
    height: 78px;
    margin-bottom: 19px;
    padding: 10px;
    background: #e8f5ed;
    border-radius: 20px;
}
body.ops-auth .logo-container img { max-width: 100%; max-height: 100%; object-fit: contain; }
body.ops-auth .auth-eyebrow { color: #176b50; font-size: .78rem; font-weight: 800; }
body.ops-auth .login-title { color: #16251f; font-size: 1.65rem; line-height: 1.25; margin: 7px 0 27px; }
body.ops-auth .login-desc { color: #68766f; font-size: .96rem; line-height: 1.7; margin: 0 0 26px; }
body.ops-auth .form-group { text-align: right; margin-bottom: 18px; }
body.ops-auth .form-label { display: block; color: #30443a; font-size: .9rem; font-weight: 700; margin-bottom: 7px; }
body.ops-auth .form-control {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 11px 14px;
    font: inherit;
    font-size: 1rem;
    border: 1px solid #dce7de;
    border-radius: 13px;
    background: #fff;
    color: #16251f;
    text-align: right;
}
body.ops-auth .form-control:focus {
    outline: none;
    border-color: #176b50;
    box-shadow: 0 0 0 3px rgba(23, 107, 80, .12);
}
body.ops-auth .remember-me { display: flex; align-items: center; gap: 8px; margin: 4px 0 20px; color: #68766f; font-size: .88rem; cursor: pointer; }
body.ops-auth .remember-me input { width: 17px; height: 17px; accent-color: #176b50; }
body.ops-auth .btn-login {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 49px;
    padding: 10px 16px;
    border: 0;
    border-radius: 13px;
    background: #176b50;
    color: #fff;
    font: inherit;
    font-size: 1rem;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}
body.ops-auth .btn-login:hover { background: #12553f; }
body.ops-auth .auth-links { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 19px; }
body.ops-auth .auth-links a { color: #176b50; text-decoration: none; font-size: .85rem; font-weight: 700; }
body.ops-auth .auth-links a:hover { text-decoration: underline; }
body.ops-auth .alert-error { background: #fee2e2; color: #991b1b; padding: 11px 13px; border-radius: 12px; margin-bottom: 18px; text-align: right; font-size: .88rem; }
body.ops-auth :focus-visible { outline: 3px solid #91c8a7; outline-offset: 2px; }
body.ops-error {
    --primary: #176b50;
    --primary-hover: #12553f;
    --primary-light: #e8f5ed;
    --text-main: #16251f;
    --text-body: #30443a;
    --text-secondary: #68766f;
    background: #f5f7f3;
    color: #16251f;
}
body.ops-error .standalone-header { border-top-color: #173e32; border-bottom-color: #e1e9e2; box-shadow: none; }
body.ops-error .standalone-header .brand-lockup strong { color: #173e32; }
body.ops-error .standalone-header-link { color: #176b50; }
body.ops-error .error-card { border: 1px solid #e1e9e2; border-top: 6px solid #173e32; border-radius: 22px; box-shadow: 0 18px 50px rgba(19, 57, 35, .08); }
body.ops-error .error-code { color: #176b50; }
body.ops-error .btn-primary { background: #176b50; border-color: #176b50; }
body.ops-error .standalone-footer { border-color: #e1e9e2; }
@media (max-width: 480px) {
    body.ops-auth { padding: 15px; padding-bottom: calc(15px + env(safe-area-inset-bottom)); }
    body.ops-auth .login-card { padding: 31px 20px; border-radius: 20px; }
    body.ops-auth .login-title { font-size: 1.45rem; }
}