@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap');

:root {
    --owner-deep: oklch(0.15 0.045 250);
    --owner-navy: oklch(0.22 0.06 250);
    --owner-ink: oklch(0.22 0.04 250);
    --owner-muted: oklch(0.5 0.035 250);
    --owner-border: oklch(0.88 0.02 250);
    --owner-teal: #6b7cff;
    --owner-bg: oklch(0.975 0.01 250);
    font-family: Roboto, "IBM Plex Sans Arabic", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--owner-ink);
    background: var(--owner-bg);
}
* { box-sizing: border-box; }
body { min-width: 320px; min-height: 100vh; margin: 0; background: var(--owner-bg); }
a { color: inherit; }
button, input { font: inherit; }
.owner-login-shell { display: grid; grid-template-columns: minmax(320px, .92fr) minmax(460px, 1.08fr); min-height: 100vh; }
.owner-login-intro { display: flex; flex-direction: column; padding: 34px clamp(30px, 7vw, 100px); background: var(--owner-deep); color: white; }
.owner-login-brand { display: inline-block; width: fit-content; }
.owner-login-brand img { display: block; width: 164px; filter: brightness(0) invert(1); }
.owner-login-copy { max-width: 460px; margin: auto 0; }
.owner-login-kicker { margin: 0 0 15px; color: var(--owner-teal); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.owner-login-copy h1 { margin: 0 0 18px; font-size: clamp(34px, 4.2vw, 56px); line-height: 1.02; letter-spacing: -.05em; text-wrap: balance; }
.owner-login-copy h1 em { color: var(--owner-teal); font-style: normal; }
.owner-login-copy > p:last-child { max-width: 42ch; margin: 0; color: oklch(.79 .03 250); line-height: 1.65; }
.owner-login-foot { display: flex; align-items: center; gap: 9px; color: oklch(.68 .03 250); font-size: 11px; }
.owner-login-foot span { width: 28px; height: 1px; background: var(--owner-teal); }
.owner-login-panel { display: grid; place-items: center; padding: 32px; background: var(--owner-bg); }
.owner-login-card { width: min(100%, 440px); padding: 34px; border: 1px solid var(--owner-border); border-radius: 12px; background: white; box-shadow: 0 22px 55px oklch(.25 .04 250 / .1); }
.owner-login-card-head { display: flex; align-items: center; gap: 11px; padding-bottom: 21px; border-bottom: 1px solid var(--owner-border); }
.owner-lock { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; background: var(--owner-navy); color: white; font-size: 11px; font-weight: 800; letter-spacing: .05em; }
.owner-login-card-head strong, .owner-login-card-head small { display: block; }
.owner-login-card-head strong { color: var(--owner-ink); font-size: 13px; }
.owner-login-card-head small { margin-top: 2px; color: var(--owner-muted); font-size: 11px; }
.owner-login-card-intro { margin: 29px 0 26px; }
.owner-login-card-intro h2 { margin: 0 0 7px; color: var(--owner-ink); font-size: 25px; letter-spacing: -.04em; }
.owner-login-card-intro p { margin: 0; color: var(--owner-muted); line-height: 1.55; }
form { display: grid; gap: 16px; }
label { display: grid; gap: 7px; color: var(--owner-ink); font-size: 12px; font-weight: 750; }
input { width: 100%; min-height: 46px; padding: 0 13px; border: 1px solid var(--owner-border); border-radius: 7px; background: white; color: var(--owner-ink); outline: 0; }
input:focus { border-color: var(--owner-teal); box-shadow: 0 0 0 3px rgb(107 124 255 / .18); }
form button { min-height: 47px; margin-top: 4px; border: 0; border-radius: 7px; background: var(--owner-navy); color: white; font-weight: 750; cursor: pointer; }
form button:hover { background: var(--owner-deep); }
form button:focus-visible { outline: 3px solid rgb(107 124 255 / .35); outline-offset: 2px; }
form button span { margin-left: 5px; color: var(--owner-teal); }
form button > span { display: inline-block; width: 15px; height: 15px; margin-left: 5px; color: var(--owner-teal); font-size: 0; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19 19 5M9 5h10v10'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19 19 5M9 5h10v10'/%3E%3C/svg%3E") center/contain no-repeat; }
html[dir="rtl"] form button > span { transform: scaleX(-1); }
.owner-login-notice { margin: 0 0 18px; padding: 11px 12px; border: 1px solid; border-radius: 7px; font-size: 12px; line-height: 1.5; }
.owner-login-notice--error { border-color: oklch(.83 .08 25); background: oklch(.97 .025 25); color: oklch(.48 .13 25); }
.owner-login-note { margin: 22px 0 0; color: var(--owner-muted); font-size: 11px; line-height: 1.55; text-align: center; }
@media (max-width: 800px) { .owner-login-shell { grid-template-columns: 1fr; } .owner-login-intro { min-height: 340px; padding: 25px 24px; } .owner-login-copy { margin: auto 0 32px; } .owner-login-copy h1 { font-size: 38px; } .owner-login-panel { padding: 24px 16px 40px; } .owner-login-card { padding: 26px 21px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }

html[dir="rtl"] body,
html[dir="rtl"] button,
html[dir="rtl"] input { font-family: "IBM Plex Sans Arabic", Roboto, ui-sans-serif, system-ui, sans-serif; }
html[dir="rtl"] body { direction: rtl; }
html[dir="rtl"] .owner-login-shell { direction: rtl; }
html[dir="rtl"] .owner-login-intro { order: 2; text-align: right; }
html[dir="rtl"] .owner-login-panel { order: 1; text-align: right; }
html[dir="rtl"] .owner-login-brand img { filter: brightness(0) invert(1); }
html[dir="rtl"] .owner-login-card-head { direction: rtl; }
html[dir="rtl"] .owner-login-card-head .owner-language-toggle { margin-right: auto; }
.owner-language-toggle { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 0 9px; border: 1px solid var(--owner-border); border-radius: 7px; background: white; color: var(--owner-navy); font-size: 11px; font-weight: 700; }
.owner-language-toggle:hover { border-color: var(--owner-teal); color: var(--owner-teal); }

/* Forgot / reset password pages reuse the sign-in card. */
.account-recovery { min-height: 100vh; }
.account-recovery .owner-login-card-head img { display: block; width: 110px; height: auto; }
.account-recovery-back { display: inline-block; margin-top: 16px; color: #1733ff; font-size: 14px; font-weight: 600; text-decoration: none; }
.account-recovery-back:hover { text-decoration: underline; }