/* تم ورود، هم‌خانواده با بخش گزارش‌ها (Gozaresh) — پس‌زمینه‌ی تیره‌ی سرمه‌ای و
   لهجه‌ی طلایی/کهربایی رسمی gpsmobile.ir (#ECC205 + گرادیان #FF6F00→#ECC205). */

:root {
    --lg-bg: #0a1220;
    --lg-surface: #101b30;
    --lg-surface-2: #16233e;
    --lg-border: #22345a;
    --lg-text: #eaf0fa;
    --lg-text-dim: #9fadc7;
    --lg-text-faint: #6b7a99;
    --lg-accent: #ecc205;
    --lg-accent-2: #ff6f00;
    --lg-accent-dark: #111c2a;
    --lg-on-accent: #0d1117;
}

body.hold-transition.login-page {
    background-color: var(--lg-bg) !important;
    background-image: none !important;
    color: var(--lg-text);
    font-family: Tahoma, "B Nazanin", sans-serif;
    min-height: 100vh;
}
/* به‌خواست کاربر: کادر مرکز صفحه باشه (هم عمودی هم افقی) - روی فرم‌های کوتاه این خانواده
   (Login/Default.aspx، ForgotPassword.aspx، VerifyMobile.aspx، Res1/jayab - همه با کلاس
   lg-center-page روی body). عمداً روی Sign.aspx اعمال نشده چون فرم بلندترش (۶ فیلد) عمداً
   چسبیده به بالا می‌مونه - .login-box-compact. بقیه‌ی فرزندهای مستقیم body (اورلی‌های تماس/خطا،
   اسکریپت‌ها) همه position:fixed یا غیرمرئی‌ان، پس تنها چیزی که واقعاً توی چیدمان فلکس جا
   می‌گیره خودِ فرم/کادره. */
body.lg-center-page {
    display: flex;
    align-items: center;
    justify-content: center;
}
body.lg-center-page .login-box {
    margin-top: 0;
}
.login-page a {
    color: var(--lg-accent);
}
.login-page a:hover {
    color: var(--lg-accent-2);
}

/* لوگوی واقعیِ ویژن ردیاب - داخل کادر ورود، بالای فیلدها (نگاه کنید Login/Default.aspx) - دقیقاً
   عیناً همون مقادیر .company-header/.lg/.company-title که تیم gpsmobile.ir تایید کردن (پیام
   مستقیم از سشن www-gpsmobile-ir-42) تا هر دو صفحه‌ی ورود کاملاً هم‌شکل باشن. */
.lg-company-header {
    text-align: center;
    margin-bottom: 12px;
}
.lg-company-logo {
    width: 96px;
    max-width: 70%;
    height: auto;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.35));
}
.lg-company-title {
    color: #FFD700;
    font-size: 19px;
    font-weight: bold;
    margin-bottom: 6px;
    text-shadow: 0 2px 8px rgba(0,0,0,.65);
    white-space: nowrap;
}
@media screen and (max-width: 480px) {
    .lg-company-logo { width: 84px; }
    .lg-company-title { font-size: 15px; }
}

.lg-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-bottom: 22px;
}
.lg-brand .dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--lg-accent);
}
.lg-brand span {
    color: var(--lg-text);
    font-size: 19px;
    font-weight: bold;
}

.login-box {
    position: relative;
    z-index: 1;
    margin-top: 3vh;
    /* به‌خواست کاربر: اندازه‌ی کادر واقعاً درصدِ عرض صفحه بمونه رو *هر* رزولوشنی، نه این‌که یه سقف
       پایین (600px قبلی) از یه رزولوشن به بعد جلوی درصد رو بگیره و دوباره تقریباً ثابت بشه. الان
       سقف خیلی بالاتره (960px) تا ۳۶vw تا مانیتورهای خیلی بزرگ (~2666px عرض) هم واقعاً به‌صورت
       درصد اعمال بشه، نه فقط رو لپ‌تاپ‌های معمولی. کف ۳۲۰px فقط برای گوشی‌های خیلی کوچیک. */
    width: clamp(320px, 36vw, 960px);
}

/* فرم ثبت‌نام طولانی‌تره (۶ فیلد) - بی‌فایده‌ست همون فاصله‌ی زیاد از بالای صفحه‌ی صفحات کوتاه‌تر
   (ورود/بازیابی) رو داشته باشه؛ فقط همین صفحه بچسبه به بالا. */
.login-box-compact {
    margin-top: 15px;
}

/* صفحه‌های ورود اختصاصی نماینده (Login/Res1، Login/jayab و…) یه ردیف لوگو (۶۰px + فاصله)
   بیشتر از صفحه‌ی ورود اصلی دارن؛ با همون margin-top: 8vh، روی نمایشگرهای کوتاه لوگو از بالای
   ویوپورت می‌زد بیرون. این مقدار برای صفحاتی که *هنوز* lg-center-page نگرفتن (اگه در آینده‌ای
   اضافه بشن) باقی می‌مونه - چون Res1/jayab فعلاً هر دو lg-center-page هم دارن، قانون پایین‌تر
   (margin-top:0، به‌خواست کاربر - کادر مرکز صفحه) با specificity بیشتر رویِ همین قانون رو می‌بره. */
body.lg-reseller .login-box {
    margin-top: 3vh;
}
body.lg-center-page.lg-reseller .login-box {
    margin-top: 0;
}

.login-box-body {
    position: relative;
    background: var(--lg-surface);
    border: 1px solid var(--lg-border);
    border-radius: 14px;
    padding: 18px 24px;
    box-shadow: none;
}

/* ردیف بالای کادر ورود (تغییر زبان + تماس با ما) - قبلاً هر دو badge با position:absolute
   جدا (یکی left:12px پیش‌فرض، یکی با inline style روی right:12px) روی هم موقعیت‌یابی می‌شدن که
   شکننده بود و باعث چسبیدن/روی‌هم‌افتادن دوتاشون می‌شد. حالا هر دو داخل یه ردیف flex هستن که
   خودش با justify-content:space-between فاصله‌شون رو مدیریت می‌کنه - چه یکی باشه چه دوتا،
   و جهت (راست/چپ) خودش با direction صفحه (فارسی/انگلیسی) هماهنگ می‌شه. */
.lg-top-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}
/* صفحه‌ی ثبت‌نام فاصله‌ی بالای کادر رو عمداً کم داره (login-box-compact) - این عنصر نباید اون
   فاصله رو با margin-bottom خودش دوباره برگردونه. */
.lg-top-actions-tight {
    margin-bottom: 0;
}
.lg-contact-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    color: var(--lg-accent);
    text-decoration: none;
    background: rgba(236,194,5,.1);
    border: 1px solid rgba(236,194,5,.3);
    border-radius: 20px;
    padding: 5px 12px;
    cursor: pointer;
    white-space: nowrap;
}
.lg-contact-badge:hover {
    background: rgba(236,194,5,.18);
    color: var(--lg-accent);
}
.lg-lang-icon {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

.login-box-msg {
    color: var(--lg-text-dim);
    text-align: center;
    margin-bottom: 18px;
}

/* عنوان زرد/طلایی با آیکن دایره‌ای - همون لهجه‌ی رنگی .lg-brand بالای صفحه (مثلاً «ثبت نام
   کاربر جدید» توی Sign.aspx)، ولی این‌بار خودِ متن هم هم‌رنگ نقطه‌ست، نه سفید. */
.login-box-msg-accent {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--lg-accent);
    font-weight: bold;
}
.login-box-msg-accent .dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--lg-accent);
    flex-shrink: 0;
}

/* به‌خواست کاربر: تیترهای صفحات ثبت‌نام/بازیابی حساب یه‌کم بزرگ‌تر از پیش‌فرض
   .login-box-msg-accent (که فونتی مشخص نداره و ۱۴px پیش‌فرض بوت‌استرپ رو ارث می‌بره)
   - داخل کادر (Sign.aspx و ForgotPassword.aspx). */
.lg-page-title {
    font-size: 16px;
}
/* به‌خواست کاربر: فاصله‌ی زیر تیتر «ثبت نام کاربر جدید» (Sign.aspx) کمتر از پیش‌فرض
   .login-box-msg (18px) - فقط همین صفحه، بقیه‌ی صفحاتی که از login-box-msg-accent استفاده
   می‌کنن (ForgotPassword.aspx، VerifyMobile.aspx) دست‌نخورده می‌مونن. */
.lg-signup-title-tight {
    margin-bottom: 8px;
}

.login-page .form-group {
    margin-bottom: 12px;
}
/* به‌خواست کاربر: نام‌کاربری/رمز عبور توی یه ردیف افقی، هر کدوم با لیبل بالای خودش (نگاه کنید
   Login/Default.aspx). گپ کمتر از حالت موبایل روی صفحه‌های خیلی باریک تا دو فیلد جا بشن. */
.lg-login-fields-row {
    display: flex;
    gap: 12px;
}
.lg-login-fields-row .form-group {
    flex: 1;
    min-width: 0;
}
/* وسط‌چینیِ متن داخل اینپوت‌ها حالا سراسریه (نگاه کنید .login-page .form-control)، نیازی به رول
   جدا اینجا نیست. */
@media screen and (max-width: 380px) {
    .lg-login-fields-row {
        flex-direction: column;
        gap: 0;
    }
}
.login-page .form-control {
    background: var(--lg-surface-2);
    border: 1px solid var(--lg-border);
    color: var(--lg-text);
    border-radius: 8px;
    height: 38px;
    box-shadow: none;
    /* به‌خواست کاربر: همه‌ی اینپوت‌های صفحات ورود/ثبت‌نام/بازیابی وسط‌چین باشن. padding چپ/راست
       متقارن هم لازمه چون has-feedback (Bootstrap/rtl.css) یه padding نامتقارن برای جای آیکن
       اعتبارسنجی اضافه می‌کنه که اینجا استفاده نمی‌شه - همون نامتقارنی مرکز بصری متن/کرسور رو
       از مرکز واقعی کادر منحرف می‌کرد. */
    text-align: center !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
}
.login-page .form-control:focus {
    border-color: var(--lg-accent);
    box-shadow: 0 0 0 2px rgba(236,194,5,.2);
    background: var(--lg-surface-2);
    color: var(--lg-text);
}
.login-page .form-control::placeholder {
    color: var(--lg-text-faint);
}

/* کادرهای نام‌کاربری/رمز/سریال و مواردی که داده‌شون فارسی نیست، جهت تایپ چپ‌به‌راست باشه - خودِ
   متن با قانون text-align بالا (روی .form-control) وسط‌چین می‌مونه، این فقط جهت نوشتن/کرسوره. */
.login-page .ltr-input {
    direction: ltr;
}

.login-page .checkbox {
    margin-top: 4px;
    margin-bottom: 4px;
}
.login-page .btn-primary {
    background: linear-gradient(135deg, var(--lg-accent-2), var(--lg-accent));
    border-color: var(--lg-accent);
    color: var(--lg-on-accent);
    font-weight: bold;
    border-radius: 8px;
    height: 38px;
}
.login-page .btn-primary:hover,
.login-page .btn-primary:focus {
    background: linear-gradient(135deg, #ff8a24, #f5d23a);
    border-color: var(--lg-accent);
    color: var(--lg-on-accent);
}

/* به‌خواست کاربر: به‌جای لینک متنیِ «ثبت نام» پایین فرم، یه دکمه‌ی آبیِ کوچیک‌تر کنار دکمه‌ی
   ورود - ورود (lg-btn-login) بیشتر عرض رو می‌گیره، ثبت‌نام (lg-btn-signup) کوچیک‌تره. */
.lg-login-actions {
    display: flex;
    gap: 8px;
}
.lg-btn-login {
    flex: 2;
}
.lg-btn-signup {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    background: #2f7dd6;
    border: 1px solid #2f7dd6;
    color: #fff !important;
    font-weight: bold;
    text-decoration: none;
    white-space: nowrap;
}
/* به‌خواست کاربر: گردیش مثل دکمه‌ی ورود باشه (همون 8px که .login-page .btn-primary داره)،
   نه یه پیل کامل. AdminLTE's `.btn.btn-flat { border-radius: 0 }` (همون کلاسی که روی این لینک
   هم هست) با specificity دوکلاسی رو می‌بره، پس اینجا هم باید با همون specificity
   (.btn.lg-btn-signup) رقابت کنه، نه فقط تک‌کلاسه. */
.btn.lg-btn-signup {
    border-radius: 8px;
}
.lg-btn-signup:hover {
    background: #3d8ce6;
    border-color: #3d8ce6;
}

/* قانون کلی (به‌خواست کاربر) برای همه‌ی صفحات خانواده‌ی لاگین (ورود/ثبت‌نام/بازیابی/تایید و...):
   اگه صفحه دو دکمه داره و یکی‌شون «بازگشت»ه، هر دو توی یه ردیفن - دکمه‌ی اصلی (lg-btn-main) سه
   برابر عرض، دکمه‌ی بازگشت (lg-btn-back) یک‌سوم. استایل دکمه‌ی بازگشت عمداً خنثی/outline (نه
   رنگ تاکیدی) چون یه اکشن کم‌اهمیت‌تره، نه CTA اصلی صفحه. متن همه‌ی دکمه‌های بازگشت هم باید
   دقیقاً «بازگشت»/«Back» باشه، فارغ از این‌که قبلاً چی بود. */
.lg-actions-row {
    display: flex;
    gap: 8px;
}
.lg-actions-row .lg-btn-main {
    flex: 3;
}
.lg-actions-row .lg-btn-back {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    background: transparent;
    border: 1px solid var(--lg-border);
    color: var(--lg-text-dim) !important;
    font-weight: bold;
    text-decoration: none;
    white-space: nowrap;
}
.btn.lg-btn-back {
    border-radius: 8px;
}
.lg-actions-row .lg-btn-back:hover {
    border-color: var(--lg-text-dim);
    color: var(--lg-text) !important;
}

.lg-links {
    display: flex;
    /* به‌خواست کاربر: وسط‌چین - این ردیف الان فقط یه لینک («فراموشی اکانت») داره، چون لینک
       ثبت‌نام قبلی تبدیل به دکمه‌ی lg-btn-signup کنار دکمه‌ی ورود شده. */
    justify-content: center;
    /* به‌خواست کاربر: فاصله‌ی بیشتر از دکمه‌های بالا (ورود/ثبت‌نام). */
    margin-top: 18px;
    font-size: 12.5px;
}
.lg-links a {
    color: var(--lg-accent);
    text-decoration: none;
}
.lg-links a:hover {
    color: var(--lg-accent-2);
}

.lg-route-rule {
    height: 1px;
    margin: 10px 0;
    border: none;
    background-image: repeating-linear-gradient(to left, var(--lg-border) 0 6px, transparent 6px 12px);
}

.lg-back {
    display: block;
    text-align: center;
    margin-top: 6px;
    color: var(--lg-text-faint);
    font-size: 12.5px;
    text-decoration: none;
}
.lg-back:hover {
    color: var(--lg-accent);
}

.lg-note {
    color: var(--lg-text-faint);
    font-size: 12.5px;
    text-align: center;
    margin-bottom: 16px;
    line-height: 1.8;
}

.login-page label {
    color: var(--lg-text-dim);
    font-size: 12.5px;
    font-weight: bold;
}

/* برندسازی مجزای نمایندگان (لوگو + اطلاعات تماس اختصاصی) */
.lg-reseller-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}
.lg-reseller-logo img {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    object-fit: cover;
    box-shadow: 0 4px 14px rgba(0,0,0,.35);
    border: 1px solid var(--lg-border);
}

.lg-contact-box {
    margin-top: 18px;
    padding: 14px 16px;
    background: var(--lg-surface-2);
    border: 1px solid var(--lg-border);
    border-radius: 10px;
}
.lg-contact-box .lg-contact-title {
    color: var(--lg-text-dim);
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 8px;
}
.lg-contact-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--lg-text);
    margin-bottom: 6px;
}
.lg-contact-row:last-child {
    margin-bottom: 0;
}
.lg-contact-row a {
    color: var(--lg-text);
    text-decoration: none;
    direction: ltr;
    unicode-bidi: embed;
}
.lg-contact-row a:hover {
    color: var(--lg-accent);
}

/* پاپ‌آپ «تماس با ما» - با کلیک روی دکمه باز می‌شه، با دکمه‌ی بستن یا کلیک روی پس‌زمینه بسته می‌شه */
.lg-contact-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
}
.lg-contact-overlay.open {
    display: flex;
}
.lg-contact-modal {
    width: min(340px, calc(100vw - 32px));
    background: var(--lg-surface);
    border: 1px solid var(--lg-accent);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .6);
    overflow: hidden;
    direction: rtl;
}
.lg-contact-modal-header {
    background: linear-gradient(135deg, var(--lg-accent-2), var(--lg-accent));
    color: var(--lg-on-accent);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: bold;
    font-size: 14px;
}
.lg-contact-modal-close {
    background: rgba(0, 0, 0, .15);
    border: none;
    color: var(--lg-on-accent);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lg-contact-modal-close:hover {
    background: rgba(0, 0, 0, .28);
}
.lg-contact-modal-body {
    padding: 18px;
}
.lg-contact-modal-body .lg-contact-row {
    background: var(--lg-surface-2);
    border: 1px solid var(--lg-border);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
    font-size: 13px;
}
.lg-contact-modal-body .lg-contact-row:last-child {
    margin-bottom: 0;
}

/* پاپ‌آپ خطای لاگین - همون مکانیزم پاپ‌آپ «تماس با ما»، فقط با هدر قرمز به‌جای طلایی */
.lg-error-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 3100;
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
}
.lg-error-overlay.open {
    display: flex;
}
.lg-error-modal {
    width: min(340px, calc(100vw - 32px));
    background: var(--lg-surface);
    border: 1px solid #e0665c;
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .6);
    overflow: hidden;
    direction: rtl;
}
.lg-error-modal-header {
    background: linear-gradient(135deg, #c62828, #7b1a1a);
    color: #fff;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: bold;
    font-size: 14px;
}
.lg-error-modal-body {
    padding: 18px;
    color: var(--lg-text);
    font-size: 13px;
    line-height: 1.8;
    text-align: center;
    /* پیام مسدودیت IP (Login/Default.aspx.vb: BuildIpLockedMessage) دو جمله با یه خط جدید بینشونه -
       بدون pre-line، \n با CSS پیش‌فرض جمع می‌شد و دو جمله بی‌فاصله به هم می‌چسبیدن. */
    white-space: pre-line;
}

/* پیام‌های موفق (مثلاً پایان موفق بازیابی حساب) از همون قالب پاپ‌آپ خطا استفاده می‌کنن، فقط با
   لهجه‌ی سبز به‌جای قرمز - .lg-error-modal.success روی fpMsgModal، طبق نتیجه‌ی fpok=1/0. */
.lg-error-modal.success {
    border-color: #4bbd85;
}
.lg-error-modal.success .lg-error-modal-header {
    background: linear-gradient(135deg, #1f8f5f, #145c3d);
}

.lg-field-error {
    display: none;
    color: #e0665c;
    font-size: 11.5px;
    margin: 4px 2px 0;
}

.lg-msg-error { color: #e0665c !important; }
.lg-msg-success { color: #4bbd85 !important; }

/* بازیابی حساب کاربری (شماره موبایل + کپچا -> کد تایید -> انتخاب اکانت) - ForgotPassword.aspx */
.fp-captcha-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.fp-captcha-question {
    background: var(--lg-surface-2);
    border: 1px solid var(--lg-border);
    border-radius: 6px;
    padding: 8px 14px;
    font-weight: bold;
    color: var(--lg-accent) !important;
    white-space: nowrap;
}
.fp-account-list {
    display: block;
    margin-bottom: 16px;
}
.fp-account-list label {
    display: block;
    background: var(--lg-surface-2);
    border: 1px solid var(--lg-border);
    border-radius: 6px;
    padding: 9px 12px;
    margin-bottom: 8px;
    cursor: pointer;
    color: var(--lg-text);
    font-weight: normal;
}
.fp-disabled {
    pointer-events: none;
    opacity: .45;
}
.fp-action-btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    margin-top: 10px;
    padding: 10px 14px;
    border: 1px solid var(--lg-border);
    border-radius: 6px;
    color: var(--lg-text) !important;
    font-size: 14px;
    text-decoration: none;
    background: var(--lg-surface-2);
    transition: border-color .15s, color .15s, background-color .15s;
}
.fp-action-btn:hover {
    border-color: var(--lg-accent);
    color: var(--lg-accent) !important;
    background: var(--lg-accent-dark);
}

.lg-required {
    color: #e0665c;
}

/* به‌خواست کاربر: لیبل «کد امنیتی» وسط‌چین (برخلاف بقیه‌ی لیبل‌های فرم که راست‌چین می‌مونن) -
   چون خودِ تصویر کپچا زیرش وسط‌چینه، راست‌چین بودن لیبل ناهماهنگ به‌نظر می‌رسید. */
.lg-captcha-label {
    display: block;
    text-align: center;
}

/* ردیف تصویر کپچا (Login/CaptchaImage.ashx، GDI+ واقعی) + دکمه‌ی تصویر جدید. عمداً بدون
   direction:ltr - برخلاف نسخه‌ی قبلیِ متنی (که ترتیب چهار حرف باید ثابت می‌موند)، الان محتوا یه
   تصویر تکیه، پس چیدمان طبیعی RTL صفحه باقی می‌مونه: تصویر (اولین فرزند) سمت راست/اول می‌شینه،
   دکمه‌ی رفرش (دومین فرزند) سمت چپ/بعدش - دقیقاً همون ترتیبی که به‌خواست کاربر باید باشه. */
/* به‌خواست کاربر: تصویر کپچا + دکمه‌ی رفرش + کادر پاسخ، همه توی یه ردیف. */
.lg-captcha-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.lg-captcha-row .form-control {
    flex: 1;
    min-width: 0;
}
.lg-captcha-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-shrink: 0;
}
.lg-captcha-box img {
    border-radius: 8px;
    border: 1px solid var(--lg-border);
    display: block;
}
.lg-captcha-refresh {
    font-size: 20px;
    line-height: 1;
    color: var(--lg-text-dim);
    text-decoration: none;
    padding: 6px;
    border-radius: 6px;
    border: 1px solid var(--lg-border);
    user-select: none;
}
.lg-captcha-refresh:hover {
    color: var(--lg-accent);
    border-color: var(--lg-accent);
}

/* پس‌زمینه‌ی «مدار ماهواره» - دو مدار بیضی بسیار محو با یه نقطه‌ی طلایی که آروم روشن/کم‌رنگ
   می‌شه (شبیه‌سازی ماهواره‌ی در حال چرخش)، پشت همه‌ی صفحات ورود/ثبت‌نام/بازیابی. یه div ثابت
   (position:fixed) که مستقیم بعد از باز شدن body قرار می‌گیره - .login-box با z-index:1 روش
   می‌شینه تا فرم همیشه بالاتر از این پس‌زمینه بمونه. */
.lg-orbit-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.lg-orbit-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 38%, rgba(236, 194, 5, 0.09), transparent 60%);
}
.lg-orbit-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid rgba(236, 194, 5, 0.18);
    border-radius: 50%;
}
.lg-orbit-ring.r1 {
    width: 60vmax;
    height: 24vmax;
    margin: -12vmax 0 0 -30vmax;
    transform: rotate(-18deg);
}
.lg-orbit-ring.r2 {
    width: 82vmax;
    height: 34vmax;
    margin: -17vmax 0 0 -41vmax;
    transform: rotate(12deg);
    border-color: rgba(236, 194, 5, 0.11);
}
.lg-orbit-sat {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--lg-accent);
    box-shadow: 0 0 10px 3px rgba(236, 194, 5, 0.65);
}
.lg-orbit-ring.r1 .lg-orbit-sat {
    top: -3px;
    right: 14%;
    animation: lg-orbit-pulse 16s ease-in-out infinite;
}
.lg-orbit-ring.r2 .lg-orbit-sat {
    bottom: -3px;
    left: 20%;
    animation: lg-orbit-pulse 22s ease-in-out infinite reverse;
}
@keyframes lg-orbit-pulse {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.7); }
}
@media (prefers-reduced-motion: reduce) {
    .lg-orbit-sat {
        animation: none !important;
    }
}