/* Template 1: Miro Inspired (Clean, Minimal, Split Screen) */
body.fb-ha-login-page { margin: 0; padding: 0; background: #fff; }
.miro-wrapper { display: flex; min-height: 100vh; font-family: Tahoma, Arial, sans-serif; direction: rtl; }
.miro-wrapper * { box-sizing: border-box; }

.miro-brand-side { flex: 1.2; background: #FFD02F; display: flex; align-items: center; justify-content: center; padding: 40px; }
.miro-brand-content { max-width: 500px; }
.miro-brand-content h2 { font-size: 38px; font-weight: 900; color: #050038; margin: 0 0 20px 0; line-height: 1.3; }
.miro-brand-content p { font-size: 18px; color: #050038; line-height: 1.6; }

.miro-form-side { flex: 1; display: flex; align-items: center; justify-content: center; background: #fff; padding: 40px; }
.miro-form-container { width: 100%; max-width: 400px; }

.miro-logo-box { margin-bottom: 30px; text-align: right; }
.miro-logo-box img { height: 35px; }
.miro-title { font-size: 28px; font-weight: bold; color: #050038; margin: 0 0 30px 0; }

.miro-alert { padding: 12px; border-radius: 6px; font-size: 13px; font-weight: bold; margin-bottom: 20px; display: none; }
.miro-alert.error { background: #fef2f2; color: #ef4444; border: 1px solid #fca5a5; }
.miro-alert.success { background: #f0fdf4; color: #10b981; border: 1px solid #86efac; }

.miro-tabs { display: flex; gap: 10px; margin-bottom: 25px; border-bottom: 2px solid #f1f5f9; }
.miro-tab-btn { background: none; border: none; padding: 10px 15px; font-size: 16px; color: #64748b; cursor: pointer; border-bottom: 2px solid transparent; font-family: inherit; }
.miro-tab-btn.active { color: #050038; border-bottom-color: #050038; font-weight: bold; }

.miro-step { display: none; animation: miroFade 0.3s ease; }
.miro-step.active { display: block; }
@keyframes miroFade { from{ opacity: 0; transform: translateY(10px); } to{ opacity: 1; transform: translateY(0); } }

.miro-social-wrap { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.miro-social-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 12px; border: 1px solid #cbd5e1; border-radius: 24px; background: #fff; font-size: 15px; font-weight: bold; color: #050038; cursor: pointer; transition: 0.2s; font-family: inherit; }
.miro-social-btn:hover { background: #f8fafc; border-color: #94a3b8; }

.miro-divider { text-align: center; position: relative; margin: 25px 0; }
.miro-divider::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: #e2e8f0; z-index: 1; }
.miro-divider span { position: relative; z-index: 2; background: #fff; padding: 0 15px; color: #64748b; font-size: 13px; }

.miro-field { margin-bottom: 20px; }
.miro-field label { display: block; font-size: 14px; font-weight: bold; color: #050038; margin-bottom: 8px; text-align: right;}
.miro-input { width: 100%; padding: 14px 15px; font-size: 15px; border: 1px solid #94a3b8; border-radius: 6px; color: #050038; transition: 0.2s; font-family: inherit; outline: none; }
.miro-input:focus { border-color: #4262ff; box-shadow: 0 0 0 3px rgba(66, 98, 255, 0.15); }
.miro-input.ltr { direction: ltr; text-align: left; }

.miro-otp-group { display: flex; gap: 8px; direction: ltr; }
.miro-otp-box { flex: 1; height: 50px; text-align: center; font-size: 24px; border: 1px solid #94a3b8; border-radius: 6px; outline: none; }
.miro-otp-box:focus { border-color: #4262ff; box-shadow: 0 0 0 3px rgba(66, 98, 255, 0.15); }

.miro-btn { width: 100%; padding: 14px; background: #4262ff; color: #fff; border: none; border-radius: 24px; font-size: 16px; font-weight: bold; cursor: pointer; transition: 0.2s; display: flex; justify-content: center; align-items: center; gap: 10px; font-family: inherit; }
.miro-btn:hover:not(:disabled) { background: #2b44d3; }
.miro-btn:disabled { opacity: 0.7; cursor: not-allowed; }

.miro-link-btn { width: 100%; text-align: center; background: none; border: none; color: #4262ff; font-weight: bold; font-size: 14px; margin-top: 20px; cursor: pointer; font-family: inherit; }
.miro-link-btn:hover { text-decoration: underline; }

.miro-verify-desc { font-size: 14px; color: #64748b; margin-bottom: 20px; line-height: 1.6; }
.miro-timer { text-align: center; font-size: 13px; color: #64748b; margin-top: 15px; }
.miro-timer span { font-weight: bold; color: #050038; }
.miro-forgot { font-size: 12px; color: #4262ff; text-decoration: none; }

.fb-ha-spinner { border: 2px solid rgba(255,255,255,0.3); border-top: 2px solid #fff; border-radius: 50%; width: 18px; height: 18px; animation: fbSpin 1s linear infinite; display: none; }
@keyframes fbSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

@media(max-width: 768px) {
    .miro-wrapper { flex-direction: column; }
    .miro-brand-side { display: none; } /* در موبایل گرافیک مخفی می‌شود */
    .miro-form-side { padding: 20px; }
}