*{box-sizing:border-box}
html,body{min-height:100%;margin:0}
body{font-family:Cairo,Arial,sans-serif;background:#fff;color:#111;overflow-x:hidden}
.login-shell{min-height:100vh;display:grid;grid-template-columns:minmax(380px,560px) 1fr;align-items:center;gap:48px;padding:56px 7vw;position:relative;direction:ltr}
.login-panel{direction:rtl;width:100%;max-width:560px;margin-inline:auto;position:relative;z-index:2}
.brand-block{text-align:center;margin-bottom:72px}
.brand-logo-img{width:190px;max-height:92px;object-fit:contain;margin-bottom:18px}
.brand-logo-text{display:inline-flex;align-items:center;justify-content:center;font-size:42px;font-weight:800;letter-spacing:.03em;color:#111;margin-bottom:10px}
.brand-block h1{margin:0;font-size:32px;line-height:1.15;font-weight:800;letter-spacing:.01em}
.brand-block p{margin:8px 0 0;color:#8b95a1;font-size:14px;letter-spacing:.08em;text-transform:uppercase}
.form-heading{margin-bottom:30px;text-align:right}
.form-heading h2{margin:0 0 8px;font-size:30px;line-height:1.3;font-weight:700;letter-spacing:.01em}
.form-heading p{margin:0;color:#667085;font-size:15px}
.login-alert{border:1px solid #fecaca;background:#fff1f2;color:#991b1b;padding:14px 16px;border-radius:14px;margin-bottom:18px;font-size:14px;font-weight:600}
.login-form label{display:block;margin:0 0 8px;color:#374151;font-size:14px;font-weight:600}
.login-form input[type=email],
.login-form input[type=password],
.login-form input[type=text]{width:100%;height:54px;border:1px solid #d8dee8;border-radius:9px;padding:0 16px;font-size:15px;font-family:inherit;outline:none;background:#fff;transition:border-color .2s,box-shadow .2s}
.login-form input:focus{border-color:#111;box-shadow:0 0 0 4px rgba(17,17,17,.07)}
.password-wrap{position:relative;margin-bottom:20px}
.password-wrap input{padding-left:52px}
.toggle-password{position:absolute;left:8px;top:50%;transform:translateY(-50%);height:38px;width:40px;border:0;background:transparent;cursor:pointer;border-radius:8px;font-size:16px;opacity:.65}
.login-options{display:flex;align-items:center;justify-content:space-between;margin:12px 0 22px}
.remember{display:flex!important;align-items:center;gap:10px;margin:0!important;cursor:pointer;color:#5b6675!important;font-weight:500!important}
.remember input{width:21px;height:21px;accent-color:#111}
.login-submit{width:100%;height:56px;border:0;border-radius:8px;background:#009b7a;color:#fff;font-family:inherit;font-size:17px;font-weight:700;cursor:pointer;box-shadow:0 18px 40px rgba(0,155,122,.18);transition:transform .18s,box-shadow .18s,background .18s}
.login-submit:hover{background:#008a6d;transform:translateY(-1px);box-shadow:0 22px 44px rgba(0,155,122,.22)}
.login-art{position:relative;min-height:680px;height:80vh;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.illustration-card{position:absolute;right:4vw;bottom:-12px;width:min(480px,42vw);z-index:2}
.illustration-card img{width:100%;display:block}
.shape{position:absolute;pointer-events:none}
.shape-ring{width:156px;height:156px;border:4px solid #111;border-radius:50%;right:22vw;bottom:56px;transform:rotate(-12deg);box-shadow:18px 4px 0 #16d5ae}
.shape-dot{width:158px;height:158px;border-radius:50%;background:#27d7b3;left:-58px;bottom:80px}
.shape-dot:before{content:"";position:absolute;inset:18px;background-image:radial-gradient(#fff 1.3px,transparent 1.3px);background-size:13px 13px;opacity:.85}
.shape-arc{width:260px;height:260px;border:32px solid #25d7b0;border-left-color:transparent;border-bottom-color:transparent;border-radius:50%;right:-60px;top:-80px;transform:rotate(10deg)}
.plus{position:absolute;color:#111;font-size:72px;font-weight:300;line-height:1}
.plus-a{right:20vw;bottom:255px}
.plus-b{right:8vw;bottom:210px;font-size:54px}

@media (max-width: 980px){
  .login-shell{grid-template-columns:1fr;padding:34px 24px;gap:20px}
  .login-panel{max-width:560px}
  .brand-block{margin-bottom:44px}
  .login-art{min-height:260px;height:300px;order:-1;opacity:.5;position:absolute;inset:auto 0 0 0;z-index:0}
  .illustration-card{width:280px;right:20px;bottom:-24px}
  .shape-ring{right:220px;bottom:30px;transform:scale(.65) rotate(-12deg)}
  .plus-a,.plus-b{display:none}
}
@media (max-width: 560px){
  .login-shell{padding:28px 20px;align-items:start}
  .brand-logo-img{width:150px;max-height:74px}
  .brand-block{margin-bottom:42px}
  .brand-block h1{font-size:26px}
  .brand-block p{font-size:12px}
  .form-heading h2{font-size:25px}
  .login-art{display:none}
  .login-panel{padding-top:30px}
}