:root{--mo-auth-accent:#b08d3c;--mo-auth-text:#b08d3c;--mo-auth-on:#07080b}
/* شاشة الدخول في النسخ السحابية — نفس شكل الجيم والصيدليات: خلفية غامقة وبقعتين بلون البرنامج.
   المصدر tools/shared/cloud-landing/cloud-auth.css (copy.js بيحط اللون فوق) — ماتعدّلش النسخ اللي جوه البرامج.
   كله تحت data-mo-cloud فنسخة الكمبيوتر مابتتأثرش. */
html[data-mo-cloud] :is(.login-page, .login-screen, .login-back) {
  position: fixed !important; inset: 0; z-index: 900; display: flex !important; align-items: center; justify-content: center;
  padding: 24px 16px; box-sizing: border-box; overflow: auto; overflow-x: hidden;
  background: #07080b !important; color: #eef1f6;
}
html[data-mo-cloud] .login-screen.hidden { display: none !important; }
html[data-mo-cloud] :is(.login-page, .login-screen, .login-back)::before,
html[data-mo-cloud] :is(.login-page, .login-screen, .login-back)::after {
  content: ''; position: fixed; border-radius: 50%; filter: blur(90px); opacity: .55; pointer-events: none; background: var(--mo-auth-accent);
}
html[data-mo-cloud] :is(.login-page, .login-screen, .login-back)::before { width: 520px; height: 520px; top: -160px; inset-inline-end: -120px; }
html[data-mo-cloud] :is(.login-page, .login-screen, .login-back)::after { width: 440px; height: 440px; bottom: -170px; inset-inline-start: -120px; opacity: .35; }
html[data-mo-cloud] :is(.login-card, .login-box) {
  position: relative; z-index: 1; width: min(100%, 420px) !important; max-width: 100% !important; box-sizing: border-box; margin: auto;
  display: flex; flex-direction: column; gap: 10px; padding: 30px 26px !important; border-radius: 20px !important;
  background: rgba(19, 22, 29, .92) !important; border: 1px solid rgba(255, 255, 255, .09) !important; color: #eef1f6 !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55) !important; backdrop-filter: blur(14px);
}
html[data-mo-cloud] :is(.login-card, .login-box) :is(h1, h2, h3, b, strong) { color: #fff !important; text-align: center; }
html[data-mo-cloud] :is(.login-card, .login-box) :is(h1, h2) { font-size: 22px; font-weight: 800; margin: 2px 0; }
html[data-mo-cloud] :is(.login-card, .login-box) :is(label, label span, .muted, p, small) { color: #b4bccb !important; font-size: 14px; }
html[data-mo-cloud] :is(.login-card, .login-box) :is(.muted.small, .small) { font-size: 13px !important; line-height: 1.6; }
html[data-mo-cloud] :is(.login-card, .login-box) :is(input, select) {
  width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px 12px; font-size: 16px; border-radius: 11px !important;
  background: rgba(255, 255, 255, .05) !important; border: 1px solid rgba(255, 255, 255, .14) !important; color: #fff !important; outline: none;
}
html[data-mo-cloud] :is(.login-card, .login-box) input:focus { border-color: var(--mo-auth-text) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--mo-auth-accent) 35%, transparent); }
html[data-mo-cloud] :is(.login-card, .login-box) :is(button[type=submit], button.primary, .btn-primary, .btn.primary) {
  width: 100%; min-height: 46px; border: 0 !important; border-radius: 12px !important; cursor: pointer; font-size: 16px; font-weight: 800;
  background: var(--mo-auth-accent) !important; color: var(--mo-auth-on) !important; background-image: none !important;
}
html[data-mo-cloud] :is(.login-card, .login-box) :is(a, .link-btn) {
  color: var(--mo-auth-text) !important; text-decoration: none; font-size: 14px; font-weight: 600; background: none !important; padding: 6px 2px; display: inline-block;
}
html[data-mo-cloud] :is(.login-card, .login-box) :is(a, .link-btn):hover { text-decoration: underline; }
html[data-mo-cloud] :is(.login-card, .login-box) :is(.login-logo, .brand-mark) { display: block; margin: 0 auto; text-align: center; }
html[data-mo-cloud] :is(.login-card, .login-box) :is(.error-text, .form-error, .alert.error) { color: #fca5a5 !important; background: rgba(239, 68, 68, .12) !important; border-color: transparent !important; border-radius: 10px; font-size: 14px; }
html[data-mo-cloud] :is(.login-card, .login-box) .error-text:empty { display: none; }
@media (max-width: 480px) { html[data-mo-cloud] :is(.login-card, .login-box) { padding: 24px 18px !important; } }
html[data-mo-cloud] :is(.mofr-link, .mofr-note a) { color: var(--mo-auth-text) !important; }
html[data-mo-cloud] .login-user { background: rgba(255, 255, 255, .05) !important; border-color: rgba(255, 255, 255, .14) !important; color: #fff !important; }