/* صفحة الدخول بنفس شكل دخول PixMatic Studio: كارت في النص على ورق منقّط، والـ wires جاية من حرف الشباك */
body.aw-page {
  background:
    radial-gradient(rgba(32, 38, 32, 0.13) 1px, transparent 1.2px) 0 0 / 22px 22px,
    radial-gradient(ellipse 46rem 30rem at 12% 0%, rgba(251, 197, 112, 0.22), transparent 72%),
    radial-gradient(ellipse 40rem 28rem at 92% 100%, rgba(232, 194, 131, 0.18), transparent 72%),
    #faf6ed;
}
body.aw-page .split { display: block; width: 100%; max-width: none; min-height: 100svh; padding: 0; margin: 0; }
body.aw-page .brand { display: none; }
body.aw-page .form-side {
  min-height: 100svh; width: 100%; padding: 22px clamp(16px, 4vw, 40px) 40px;
  display: flex; flex-direction: column; align-items: center; background: transparent;
}
body.aw-page .form-top { width: min(100%, 1180px); max-width: none; margin: 0 auto; display: flex; align-items: center; gap: 14px; }
body.aw-page .aw-logo { display: flex; align-items: center; margin-inline-end: auto; }
body.aw-page .aw-logo img { height: 34px; width: auto; display: block; }
body.aw-page .form-wrap {
  position: relative; z-index: 2; margin: auto; width: min(100%, 440px); max-width: 440px;
  border: 1.5px solid #202620; border-radius: 26px;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.96), rgba(255, 252, 244, 0.92));
  box-shadow: 7px 7px 0 #202620, 0 40px 90px -40px rgba(32, 38, 32, 0.35);
  opacity: 0; transform: translateY(18px) scale(0.985);
  animation: awCardIn 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s forwards;
}
@keyframes awCardIn { to { opacity: 1; transform: none; } }
body.aw-page .form-wrap.is-shaking { animation: awShake 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; opacity: 1; transform: none; }
@keyframes awShake { 10%, 90% { translate: -1px 0; } 20%, 80% { translate: 3px 0; } 30%, 50%, 70% { translate: -6px 0; } 40%, 60% { translate: 6px 0; } }


/* الـ wires فوق الصفحة */
.aw-layer { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 5; }
body.aw-page .field input { transition: border-color 0.3s, box-shadow 0.3s, background 0.3s; }
body.aw-page .field.is-wired input { border-color: rgba(227, 154, 11, 0.8) !important; box-shadow: 0 0 0 4px rgba(252, 176, 23, 0.16) !important; background: #fff; }
body.aw-page #googleBtn.is-wired { border-color: rgba(227, 154, 11, 0.75); box-shadow: 0 0 0 4px rgba(252, 176, 23, 0.18); }
body.aw-page #submitBtn.is-wired { box-shadow: 0 0 0 5px rgba(252, 176, 23, 0.2), 0 14px 28px -14px rgba(32, 38, 32, 0.6); }
body.aw-page #submitBtn.is-done { background: #2f3a2f; color: #fcb017; }

@media (max-width: 560px) {
  body.aw-page .form-side { padding: 14px 14px 30px; }
  body.aw-page .aw-logo img { height: 27px; }
  body.aw-page .form-wrap { margin-top: 26px; box-shadow: 5px 5px 0 #202620, 0 30px 60px -30px rgba(32, 38, 32, 0.3); }
}
@media (prefers-reduced-motion: reduce) {
  body.aw-page .form-wrap { animation: none; opacity: 1; transform: none; }
}