body {
  background: var(--dark);
}

.rules {
  padding: 4rem 1.5rem;
  max-width: 800px;
  margin: 0 auto;
}

.rules h2 {
  font-size: 2.2rem;
  color: var(--primary);
  text-align: center;
  margin-bottom: 1rem;
  text-shadow: 0 0 10px rgba(124,58,237,0.3);
}

/* ============= صندوق التعليمات ============= */
.instructions-box {
  background: var(--dark-300);
  border: 1px solid rgba(124,58,237,0.15);
  border-radius: var(--border-radius-lg);
  padding: 2rem;
  color: var(--light-300);
  font-size: 1rem;
  line-height: 1.8;
}
.instructions-box .title {
  font-size: 1.4rem;
  font-weight: bold;
  color: var(--light);
  margin-bottom: 1.2rem;
  text-align: center;
}
.instructions-box .section { margin-bottom: 1.2rem; }
.instructions-box h5 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 0.6rem;
}
.instructions-box ul { list-style: disc; padding-inline-start: 1.2rem; }
.instructions-box .link { color: var(--primary); font-weight: 500; }
.instructions-box .highlight {
  background: rgba(168,85,247,0.15);
  border-inline-start: 4px solid var(--accent);
  padding: 0.7rem 1rem;
  border-radius: var(--border-radius-sm);
}

/* ============= أزرار الموافقة/الرفض ============= */
.btn-yes {
  background: var(--secondary);
  color: var(--light);
  border: none;
  padding: 0.7rem 1.4rem;
  border-radius: var(--border-radius-md);
  font-weight: 700;
  cursor: pointer;
  transition: 0.3s;
}
.btn-yes:hover { background: var(--secondary-dark); }
.btn-no {
  background: var(--accent);
  color: var(--light);
  border: none;
  padding: 0.7rem 1.4rem;
  border-radius: var(--border-radius-md);
  font-weight: 700;
  cursor: pointer;
  transition: 0.3s;
}
.btn-no:hover { background: var(--accent-dark); }

/* ============= نموذج الأسئلة ============= */
#whitelistForm .title {
  color: var(--primary);
  font-size: 1.4rem;
  font-weight: 700;
  margin: 2rem 0 1.2rem;
}
#whitelistForm label {
  color: var(--light-300);
  font-weight: 600;
  display: block;
  margin-bottom: 0.5rem;
}
#whitelistForm .form-control {
  background: var(--dark-300);
  border: 1px solid rgba(124,58,237,0.2);
  color: var(--light);
  border-radius: var(--border-radius-md);
}
#whitelistForm .form-control:focus {
  background: var(--dark-300);
  color: var(--light);
  border-color: var(--primary);
  box-shadow: 0 0 0 0.2rem rgba(124,58,237,0.2);
}
#whitelistForm .invalid-feedback { color: var(--accent-light); }