:root {
  --pp-blue-50: #eff6ff;
  --pp-blue-100: #dae9ff;
  --pp-blue-200: #bed9ff;
  --pp-blue-500: #3287ff;
  --pp-blue-600: #1677ff;
  --pp-blue-700: #0a68eb;
  --pp-blue-800: #0f58be;
  --pp-blue-rgb: 22, 119, 255;
  --pp-navy-50: #f7fafd;
  --pp-navy-100: #eff4fb;
  --pp-navy-200: #dfe8f3;
  --pp-navy-400: #8ca2c0;
  --pp-navy-500: #5b7394;
  --pp-navy-700: #2c405c;
  --pp-navy-900: #0b1f3a;
  --pp-navy-rgb: 11, 31, 58;
  --pp-success: #16a34a;
  --pp-danger: #dc2626;
  --pp-radius-sm: 8px;
  --pp-radius: 12px;
  --pp-radius-lg: 16px;
  --pp-shadow-sm: 0 1px 2px rgb(var(--pp-navy-rgb) / 6%);
  --pp-shadow: 0 4px 14px rgb(var(--pp-navy-rgb) / 8%);
  --pp-shadow-primary: 0 6px 16px rgb(var(--pp-blue-rgb) / 24%);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; min-width: 320px; margin: 0; overflow: hidden; }
body { color: var(--pp-navy-900); background: var(--pp-navy-50); font-family: "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
a { color: inherit; }

.auth-layout { width: 100%; height: 100dvh; display: grid; grid-template-columns: minmax(430px, 1fr) minmax(0, 1fr); grid-template-areas: "panel visual"; direction: ltr; overflow: hidden; }
.auth-visual { grid-area: visual; position: relative; height: 100dvh; overflow: hidden; background: var(--pp-navy-100); }
.auth-visual__image { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 44%; transition: transform 500ms ease; }
.auth-visual:hover .auth-visual__image { transform: scale(1.012); }
.auth-visual__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(6 22 45 / 5%) 30%, rgb(5 22 47 / 82%) 100%); }
.auth-visual__content { position: absolute; top:clamp(125px,19vh,175px); right:16px; bottom:auto; left:auto; width:min(450px,calc(100% - 32px)); color:#fff; direction:rtl; text-align:right; }
.auth-visual__content h2 { width: 100%; max-width: none; margin: 0 0 8px; text-align: right; font-size: clamp(27px, 3vw, 44px); line-height: 1.3; letter-spacing: -.5px; }
.auth-visual__content h2 span { color: #91bfff; }
.auth-visual__content p { width: 100%; max-width: none; margin: 5px 0 0; text-align: right; color: rgb(255 255 255 / 88%); font-size: clamp(15px,1.25vw,18px); line-height: 1.7; }
.auth-visual__content p strong { color: #fff; font-size: clamp(16px,1.3vw,19px); }
.auth-visual__content p:last-child { font-size:clamp(10px,.8vw,12px); line-height:1.65; }

.auth-panel { grid-area: panel; position: relative; height: 100dvh; display: grid; place-items: center; padding: 58px clamp(28px, 6vw, 82px) 24px; overflow: hidden; direction: rtl; background: var(--pp-navy-50); }
.auth-wordmark { position: absolute; top: 20px; left: 28px; display: block; }
.auth-wordmark img { width: 132px; height: 38px; display: block; object-fit: contain; }
.auth-panel__inner { width: min(100%, 410px); }
.brand { display: none; }
.auth-heading { margin-bottom: 16px; text-align: center; }
.auth-heading h1 { margin: 4px 0 6px; color: var(--pp-navy-900); font-size: clamp(27px, 2.7vw, 35px); line-height: 1.3; }
.auth-heading h1 span { color: var(--pp-blue-600); }
.auth-heading p { margin: 0; color: var(--pp-navy-500); font-size: 12px; line-height: 1.75; }

.login-form { padding: 22px; border: 1px solid var(--pp-navy-200); border-radius: var(--pp-radius-lg); background: #fff; box-shadow: var(--pp-shadow-sm); }
.form-field + .form-field { margin-top: 8px; }
.form-field label { display: block; margin-bottom: 6px; color: var(--pp-navy-900); font-size: 12px; font-weight: 600; }
.input-control { min-height: 47px; display: flex; align-items: center; gap: 9px; padding: 0 13px; border: 1px solid var(--pp-navy-200); border-radius: var(--pp-radius-sm); background: #fff; transition: border-color 180ms ease, box-shadow 180ms ease; }
.input-control:focus-within { border-color: var(--pp-blue-600); box-shadow: 0 0 0 3px rgb(var(--pp-blue-rgb) / 18%); }
.input-control > i { flex: 0 0 auto; color: var(--pp-navy-400); font-size: 17px; }
.input-control input { min-width: 0; width: 100%; align-self: stretch; padding: 0; border: 0; outline: 0; color: var(--pp-navy-700); background: transparent; direction: rtl; font-size: 13px; }
.input-control input[type="email"] { direction: ltr; text-align: right; }
.input-control input::placeholder { color: var(--pp-navy-400); }
.password-toggle { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 auto; padding: 0; border: 0; border-radius: var(--pp-radius-sm); color: var(--pp-navy-500); background: transparent; cursor: pointer; }
.password-toggle:hover { color: var(--pp-blue-700); background: var(--pp-blue-50); }
.field-error { min-height: 17px; display: block; padding-top: 3px; color: var(--pp-danger); font-size: 10px; font-weight: 600; }
.form-field.is-invalid .input-control { border-color: var(--pp-danger); box-shadow: 0 0 0 3px rgb(220 38 38 / 16%); }

.form-options { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 1px 0 14px; font-size: 11px; }
.remember-option { display: inline-flex; align-items: center; gap: 7px; color: var(--pp-navy-700); font-weight: 600; cursor: pointer; }
.remember-option input { width: 17px; height: 17px; margin: 0; accent-color: var(--pp-blue-600); }
.form-options a, .signup-prompt a { color: var(--pp-blue-700); font-weight: 700; text-decoration: none; }
.form-options a:hover, .signup-prompt a:hover { text-decoration: underline; }
.submit-button { width: 100%; min-height: 47px; position: relative; display: flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: var(--pp-radius); color: #fff; background: var(--pp-blue-600); box-shadow: var(--pp-shadow-primary); font-size: 13px; font-weight: 700; cursor: pointer; transition: background-color 180ms ease, transform 180ms ease; }
.submit-button:hover { background: var(--pp-blue-700); }
.submit-button:active { background: var(--pp-blue-800); transform: translateY(1px); }
.submit-button i { position: absolute; left: 22px; }

.social-login { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; direction: ltr; }
.social-login__button { width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 1px solid var(--pp-navy-200); border-radius: var(--pp-radius); color: var(--pp-navy-700); background: #fff; cursor: pointer; transition: 180ms ease; }
.social-login__button:hover { border-color: var(--pp-blue-200); background: var(--pp-blue-50); transform: translateY(-1px); }
.social-login__button i { font-size: 19px; }
.social-login__button--google i { color: #4285f4; }
.social-login__button--facebook i { color: #1877f2; }
.social-login__button--apple i { color: var(--pp-navy-900); }
.signup-prompt { margin: 13px 0 0; color: var(--pp-navy-500); text-align: center; font-size: 11px; }
.form-status { min-height: 15px; margin: 5px 0 0; color: var(--pp-success); text-align: center; font-size: 10px; font-weight: 700; }
:where(a, button, input):focus-visible { outline: 2px solid var(--pp-blue-500); outline-offset: 2px; }

@media (max-width: 820px) {
  .auth-layout { display: flex; flex-direction: column; }
  .auth-visual { display: none; }
  .auth-panel { height: 100dvh; padding: 42px 18px 10px; overflow-y: auto; align-items: safe center; }
  .auth-wordmark { top: 7px; left: 18px; }
  .auth-wordmark img { width: 108px; height: 31px; }
  .auth-heading { margin-bottom: 9px; }
  .auth-heading p { display: none; }
  .auth-heading h1 { font-size: 24px; }
  .login-form { padding: 15px 17px; }
}

@media (max-width: 430px) {
  .input-control, .submit-button { min-height: 43px; }
  .form-field + .form-field { margin-top: 3px; }
  .field-error { min-height: 13px; }
  .social-login { margin-top: 8px; }
  .social-login__button { width: 36px; height: 36px; }
  .signup-prompt { margin-top: 7px; }
}

@media (max-height: 650px) and (min-width: 821px) {
  .auth-heading p { display: none; }
  .auth-heading { margin-bottom: 7px; }
  .login-form { padding-block: 14px; }
  .form-field + .form-field { margin-top: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .001ms !important; }
}