/* ====== Base ====== */
:root{
  --purple-600:#7c3aed;
  --purple-500:#8b5cf6;
  --purple-400:#a78bfa;
  --gray-100:#f3f4f6;
  --gray-300:#d1d5db;
  --gray-400:#9ca3af;
  --green-100:#d1fae5;
  --green-800:#065f46;
  --red-100:#fee2e2;
  --red-800:#991b1b;
  --yellow-100:#fef3c7;
  --yellow-800:#92400e;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; direction:rtl; font-family:system-ui,-apple-system,Segoe UI,Roboto,"Tajawal",sans-serif;
  background:#fff; color:#111827;
}

/* ====== Layout ====== */
.auth{
  display:flex; width:100vw; height:100vh; align-items:center; justify-content:center;
}
.auth__wrap{
  display:flex; width:100%; height:100%;
}

/* Right gradient welcome panel (shows >= md) */
.panel-welcome{
  display:none;
  width:33.3333%;
  height:100%;
  color:#fff;
  background-image: linear-gradient(135deg, var(--purple-600), var(--purple-400));
  border-top-right-radius:1.5rem; /* rounded-tr-3xl */
  border-bottom-right-radius:1.5rem; /* rounded-br-3xl */
  align-items:center; justify-content:center; text-align:center; padding:2rem;
}
.panel-welcome h1{font-size:1.875rem; font-weight:700; margin:0 0 1rem}
.panel-welcome p{font-size:1rem; max-width:28rem; margin:0 auto}

/* Left form panel */
.panel-form{
  width:100%;
  height:100%;
  background:#fff;
  padding:2.5rem;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.logo{width:70px; height:70px; object-fit:contain; margin-bottom:1rem}
.form-title{font-size:1.5rem; font-weight:700; color:var(--purple-600); margin-bottom:1.5rem}

/* ====== Alerts ====== */
.alert{border-radius:.5rem; padding:.75rem 1rem; margin-bottom:1rem}
.alert--yellow{background:var(--yellow-100); color:var(--yellow-800)}
.alert--green{background:var(--green-100); color:var(--green-800)}
.alert--red{background:var(--red-100); color:var(--red-800)}

/* ====== Form ====== */
.form{width:100%; max-width:28rem}
.field{position:relative; margin-bottom:1rem}
.input{
  width:100%; padding:.5rem 2.5rem .5rem 1rem; /* pr-ltr, pl-rtl for icon */
  border:1px solid var(--gray-300); border-radius:.375rem;
  outline:none; transition:box-shadow .2s, border-color .2s;
}
.input:focus{
  border-color: var(--purple-400);
  box-shadow: 0 0 0 3px rgba(167,139,250,.4);
}
.icon{
  position:absolute; left:.75rem; top:.6rem; color:var(--gray-400);
  font-size:.95rem;
}
.btn{
  width:100%; margin-top:.5rem; padding:.6rem 1rem; border:0; border-radius:.375rem;
  background:var(--purple-500); color:#fff; cursor:pointer; font-weight:600;
  transition:filter .2s, transform .02s;
}
.btn:hover{filter:brightness(.95)}
.btn:active{transform:translateY(1px)}

.link{color:var(--purple-600); text-decoration:none}
.link:hover{text-decoration:underline}

.helper{margin-top:.5rem; text-align:center}
.note{margin-top:1rem; text-align:center; color:#4b5563; font-size:.9rem}

/* ====== Responsive ====== */
@media (min-width: 768px){
  .panel-welcome{display:flex}
  .panel-form{width:66.6666%}
}