/* تمركز كامل الصفحة */
body, html {
  height: 100%;
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f0f2f5;
  direction: rtl;

  display: flex;
  justify-content: center;
  align-items: center;
}

/* البوكس الرئيسي */
.app {
  background-color: #fff;
  padding: 8vw 10vw; /* وحدات نسبية للتجاوب */
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(0,0,0,0.2);
  text-align: center;
  min-width: 280px;
  max-width: 400px;
}

/* العنوان */
.app h2 {
  margin-bottom: 5vw;
  color: #333;
  font-size: 5vw; /* تكبير النص على الموبايل */
}

/* الأزرار */
button {
  width: 100%;
  padding: 3vw 0; /* تكبير الأزرار على الموبايل */
  margin: 2vw 0;
  font-size: 4vw;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  background-color: #007bff;
  color: white;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #0056b3;
}

/* Media Query للشاشات الكبيرة */
@media screen and (min-width: 768px) {
  .app {
    padding: 230px 280px; /* كما كان سابقًا للشاشات الكبيرة */
    max-width: 400px;
  }
  .app h2 { font-size: 24px; margin-bottom: 30px; }
  button { font-size: 16px; padding: 12px 0; margin: 10px 0; }
}