.yf-login-shell { min-height: 100vh; display: grid; grid-template-columns: 1.05fr .95fr; background: #f3f6fb; font-family: "Plus Jakarta Sans Variable", "Segoe UI", sans-serif; }
.yf-login-intro { min-height: 100vh; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(38px, 6vw, 80px); background: radial-gradient(circle at 20% 20%, #123b72 0, #071b35 48%, #041227 100%); color: #fff; }
.yf-login-intro img { width: 230px; height: auto; object-fit: contain; object-position: left center; }
.yf-login-intro > div > span, .yf-login-card > span { color: #2f79ff; font-size: 11px; font-weight: 800; letter-spacing: .16em; }
.yf-login-intro h1 { margin: 16px 0; font-size: clamp(44px, 6vw, 76px); line-height: 1.02; letter-spacing: -.055em; }
.yf-login-intro p { max-width: 570px; margin: 0; color: #b7c6dc; font-size: 16px; line-height: 1.7; }
.yf-login-intro > small { display: flex; align-items: center; gap: 9px; color: #b9c8dd; font-size: 12px; }
.yf-login-intro svg, .yf-login-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.yf-login-intro > small svg { width: 17px; height: 17px; }
.yf-login-card { width: min(470px, calc(100% - 36px)); align-self: center; justify-self: center; padding: 42px; border: 1px solid #dae2ed; border-radius: 22px; background: #fff; box-shadow: 0 30px 85px rgba(7, 24, 48, .12); }
.yf-login-icon { width: 54px; height: 54px; display: grid; place-items: center; margin-bottom: 24px; border-radius: 15px; background: #eaf1ff; color: #1769ff; }
.yf-login-card h2 { margin: 10px 0 8px; color: #091a31; font-size: 36px; letter-spacing: -.04em; }
.yf-login-card > p { margin: 0 0 28px; color: #76849a; font-size: 13px; line-height: 1.6; }
.yf-login-card form { display: flex; flex-direction: column; gap: 17px; }
.yf-login-card label { display: flex; flex-direction: column; gap: 8px; }
.yf-login-card label span { color: #34445a; font-size: 12px; font-weight: 750; }
.yf-login-card input { height: 52px; padding: 0 15px; border: 1px solid #d7dfe9; border-radius: 10px; outline: none; background: #fff; color: #14253c; font: inherit; color-scheme: light; }
.yf-login-card input:focus { border-color: #1769ff; box-shadow: 0 0 0 3px rgba(23, 105, 255, .12); }
.yf-login-card form > button { min-height: 52px; border: 0; border-radius: 10px; background: #1769ff; color: #fff; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; box-shadow: 0 10px 25px rgba(23, 105, 255, .25); }
.yf-login-error, .yf-login-success { padding: 11px 13px; border-radius: 9px; font-size: 12px; }
.yf-login-error { border: 1px solid #f2cbd1; background: #fff1f3; color: #c63c50; }
.yf-login-success { border: 1px solid #bde6d9; background: #edfff9; color: #11775d; }
.yf-login-forgot { color: #1769ff; text-align: center; font-size: 12px; font-weight: 750; text-decoration: none; }
.yf-login-forgot:hover { text-decoration: underline; }
.yf-login-card > small { display: block; margin-top: 22px; color: #8a96a7; font-family: "Noto Sans Arabic Variable", sans-serif; font-size: 11px; text-align: center; }
@media (max-width: 850px) { .yf-login-shell { grid-template-columns: 1fr; }.yf-login-intro { display: none; }.yf-login-card { margin: 28px 0; padding: 32px 25px; }.yf-login-card h2 { font-size: 31px; } }