/* login.css — Modern RTL, Mobile-first, Responsive */



/* ---------- Theme ---------- */

:root{

  --bg: #0b1220;

  --stroke: rgba(255,255,255,.10);

  --text: rgba(255,255,255,.92);

  --muted: rgba(255,255,255,.65);



  --primary: #4f8cff;

  --primary-2:#7aa7ff;



  --danger: #ff5a6a;



  --shadow: 0 18px 45px rgba(0,0,0,.45);

  --shadow-soft: 0 10px 22px rgba(0,0,0,.22);



  --radius: 18px;



  --focus: 0 0 0 4px rgba(79,140,255,.22);

}



/* ---------- Reset ---------- */

*{ box-sizing: border-box; }

html, body{ height: 100%; }



body{

  margin:0;

  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Tahoma, Arial, "Noto Sans Arabic", "Noto Sans", sans-serif;

  line-height: 1.7;

  color: var(--text);

  background:

    radial-gradient(1200px 800px at 15% 10%, rgba(79,140,255,.18), transparent 55%),

    radial-gradient(900px 650px at 90% 20%, rgba(122,167,255,.14), transparent 55%),

    radial-gradient(800px 600px at 50% 95%, rgba(255,90,106,.10), transparent 55%),

    var(--bg);

}



/* ---------- Layout ---------- */

.auth{

  min-height: 100%;

  display: grid;

  place-items: center;

  padding: 22px 16px;

}



.auth__card{

  width: min(440px, 100%);

  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));

  border: 1px solid var(--stroke);

  border-radius: var(--radius);

  box-shadow: var(--shadow);

  overflow: hidden;

}



.auth__head{

  padding: 18px 16px 8px;

}



.auth__head h1{

  margin: 0;

  font-size: 1.25rem;

  letter-spacing: -0.2px;

}



.muted{

  margin-top: 6px;

  color: var(--muted);

  font-size: .92rem;

}



.auth__foot{

  padding: 12px 16px 16px;

  border-top: 1px solid rgba(255,255,255,.08);

}



/* ---------- Alerts ---------- */

.alert{

  margin: 12px 16px 0;

  padding: 12px 12px;

  border-radius: 14px;

  border: 1px solid var(--stroke);

  background: rgba(255,255,255,.06);

}



.alert--error{

  border-color: rgba(255,90,106,.35);

  background: rgba(255,90,106,.12);

}



/* ---------- Form ---------- */

.form{

  padding: 14px 16px 16px;

  display: flex;

  flex-direction: column;

  gap: 12px;

}



.field{

  display: flex;

  flex-direction: column;

  gap: 6px;

}



.field__label{

  font-size: .92rem;

  font-weight: 900;

  color: rgba(255,255,255,.88);

}



.field__control{ position: relative; }



.input{

  width: 100%;

  padding: 12px 12px;

  border-radius: 14px;

  border: 1px solid rgba(255,255,255,.14);

  background: rgba(0,0,0,.20);

  color: var(--text);

  outline: none;

  transition: box-shadow .15s ease, border-color .15s ease, background .15s ease;

}



.input:focus{

  border-color: rgba(79,140,255,.55);

  box-shadow: var(--focus);

  background: rgba(0,0,0,.28);

}



/* ---------- Button ---------- */

.btn{

  appearance: none;

  border: 1px solid var(--stroke);

  background: rgba(255,255,255,.06);

  color: var(--text);

  border-radius: 14px;

  padding: 11px 12px;

  font-weight: 950;

  cursor: pointer;

  transition: transform .15s ease, background .15s ease, border-color .15s ease, filter .15s ease;

}



.btn:active{ transform: translateY(1px); }

.btn:hover{ background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.18); }

.btn:focus{ outline:none; box-shadow: var(--focus); }



.btn--primary{

  background: linear-gradient(135deg, rgba(79,140,255,.95), rgba(122,167,255,.85));

  border-color: rgba(120,160,255,.55);

  color: #071022;

}

.btn--primary:hover{ filter: brightness(1.03); }



/* ---------- Responsive ---------- */

@media (min-width: 720px){

  .auth{ padding: 32px 16px; }

  .auth__head{ padding: 20px 18px 10px; }

  .form{ padding: 14px 18px 18px; }

  .auth__foot{ padding: 12px 18px 18px; }

}