*{
  box-sizing: border-box;
}

body{
  font-family: Arial, sans-serif;
  background:#0b0f19;
  color:#e6e6e6;
  display:flex;
  flex-direction:column; 
  min-height:100vh;
  align-items:center;
  justify-content:center;
}


.card{
  width:360px;
  max-width: calc(100vw - 40px);
  background:#121a2b;
  border:1px solid #22304e;
  border-radius:14px;
  padding:22px;
  box-shadow:0 0 30px rgba(0,0,0,0.4);
  overflow: hidden; 
}


#loginForm{
  width: 100%;
}

#loginForm input,
#loginForm button{
  display: block;
  max-width: 100%;
}
h1{
  margin:0 0 14px;
  font-size:22px;
}

label{
  display:block;
  margin-top:12px;
  font-size:14px;
  opacity:.9;
}

input{
  width:100%;
  max-width:100%;
  min-width:0;
  margin-top:6px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid #2a3a60;
  background:#0d1426;
  color:#e6e6e6;
  transition:0.2s ease;
}


input:focus{
  outline:none;
  border-color:#3a7bff;
  box-shadow:0 0 0 2px rgba(58,123,255,0.25);
}

button{
  width:100%;
  margin-top:16px;
  padding:10px 12px;
  border-radius:10px;
  border:0;
  background:#3a7bff;
  color:white;
  font-weight:bold;
  cursor:pointer;
  transition:0.2s ease;
}

button:hover{
  background:#4d8dff;
  transform:translateY(-1px);
}

.err{
  margin-top:12px;
  color:#ff6b6b;
  font-size:14px;
}

.page{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;   /* بدل center */
  padding-top:180px;            /* هون نتحكم بالارتفاع */
  gap:20px;
}

.brand{
  font-size:64px;             
  font-weight:900;
  letter-spacing:4px;
  color:#4d8dff;
  text-shadow:0 0 30px rgba(77,141,255,0.8);
    transform: translateY(-40px);
  margin-bottom:30px;
}