/* ====================================================================
   login.css - استایل اختصاصی صفحه ورود (#loginPage)
   (استخراج شده از تگ <style> دومی که فقط برای صفحه لاگین بود)
   ==================================================================== */

        /* ===== پس‌زمینه متحرک ===== */
        #loginPage {
            min-height: 100vh;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #1e1b4b 0%, #312e81 25%, #4c1d95 50%, #6d28d9 75%, #7c3aed 100%);
            position: relative;
            overflow: hidden;
            padding: 20px;
        }
        #loginPage::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                radial-gradient(circle at 20% 20%, rgba(236,72,153,0.35) 0%, transparent 50%),
                radial-gradient(circle at 80% 80%, rgba(16,185,129,0.25) 0%, transparent 50%),
                radial-gradient(circle at 80% 10%, rgba(251,191,36,0.2) 0%, transparent 40%),
                radial-gradient(circle at 10% 80%, rgba(99,102,241,0.3) 0%, transparent 45%);
            animation: bgPulse 8s ease-in-out infinite alternate;
            pointer-events: none;
        }
        @keyframes bgPulse {
            0%   { opacity: 0.7; transform: scale(1); }
            100% { opacity: 1;   transform: scale(1.05); }
        }

        /* ===== ذرات شناور ===== */
        .login-particle {
            position: absolute;
            border-radius: 50%;
            pointer-events: none;
            animation: floatUp linear infinite;
            opacity: 0;
            z-index: 1;
        }
        @keyframes floatUp {
            0%   { transform: translateY(100vh) rotate(0deg);   opacity: 0; }
            10%  { opacity: 0.6; }
            90%  { opacity: 0.4; }
            100% { transform: translateY(-10vh) rotate(720deg); opacity: 0; }
        }

        /* ===== کارت لاگین ===== */
        .login-card {
            position: relative;
            z-index: 10;
            width: 100%;
            max-width: 420px;
            background: rgba(255,255,255,0.08);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            border: 1px solid rgba(255,255,255,0.18);
            border-radius: 28px;
            padding: 36px 36px 32px;
            box-shadow:
                0 32px 80px rgba(0,0,0,0.4),
                0 0 0 1px rgba(255,255,255,0.06) inset,
                0 1px 0 rgba(255,255,255,0.2) inset;
            animation: cardAppear 0.7s cubic-bezier(0.34,1.56,0.64,1) both;
        }
        @keyframes cardAppear {
            from { opacity: 0; transform: translateY(40px) scale(0.93); }
            to   { opacity: 1; transform: translateY(0)    scale(1);    }
        }

        /* ===== بج - حذف شد ===== */

        /* ===== لوگو ===== */
        .login-logo-wrap {
            text-align: center;
            margin-bottom: 18px;
        }
        .login-logo-ring {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: linear-gradient(135deg, rgba(251,191,36,0.2), rgba(139,92,246,0.2));
            border: 2px solid rgba(251,191,36,0.4);
            box-shadow: 0 0 30px rgba(251,191,36,0.25), 0 0 60px rgba(139,92,246,0.15);
            animation: ringGlow 3s ease-in-out infinite alternate;
        }
        @keyframes ringGlow {
            from { box-shadow: 0 0 20px rgba(251,191,36,0.2), 0 0 40px rgba(139,92,246,0.1); }
            to   { box-shadow: 0 0 40px rgba(251,191,36,0.45), 0 0 80px rgba(139,92,246,0.25); }
        }
        .login-logo-ring img {
            width: 85px; height: 85px; object-fit: contain; border-radius: 50%;
        }

        /* ===== عنوان ===== */
        .login-title {
            text-align: center;
            font-size: 1.15rem;
            font-weight: 800;
            margin-bottom: 6px;
            background: linear-gradient(135deg, #fbbf24, #f0abfc, #a5f3fc);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            line-height: 1.5;
            white-space: nowrap;
        }
        .login-subtitle {
            text-align: center;
            font-size: 12px;
            color: rgba(255,255,255,0.45);
            margin-bottom: 28px;
        }

        /* ===== فیلدهای ورودی ===== */
        .login-field {
            margin-bottom: 18px;
        }
        .login-field label {
            display: block;
            font-size: 13px;
            color: rgba(255,255,255,0.75);
            margin-bottom: 8px;
            font-weight: 600;
        }
        .login-input-wrap {
            position: relative;
        }
        .login-input-wrap .field-icon {
            position: absolute;
            right: 14px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 16px;
            opacity: 0.6;
            pointer-events: none;
        }
        .login-field input {
            width: 100%;
            padding: 14px 44px 14px 16px;
            background: rgba(255,255,255,0.1);
            border: 1.5px solid rgba(255,255,255,0.15);
            border-radius: 14px;
            color: #fff;
            font-size: 15px;
            font-family: inherit;
            direction: rtl;
            transition: all 0.3s ease;
            outline: none;
        }
        .login-field input::placeholder { color: rgba(255,255,255,0.35); }
        .login-field input:focus {
            background: rgba(255,255,255,0.15);
            border-color: rgba(167,139,250,0.7);
            box-shadow: 0 0 0 3px rgba(139,92,246,0.2), 0 4px 16px rgba(139,92,246,0.15);
        }

        /* ===== دیواید ===== */
        .login-divider {
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
            margin: 22px 0 18px;
        }

        /* ===== فوتر ===== */
        .login-footer {
            text-align: center;
            margin-top: 22px;
        }
        .login-footer p { font-size: 12px; color: rgba(255,255,255,0.4); margin: 5px 0; }
        .login-footer span { color: rgba(167,139,250,0.9); font-weight: 700; }
        .login-footer a {
            color: #fbbf24;
            text-decoration: none;
            font-weight: 700;
        }

        /* ===== دکمه ورود ===== */
        #loginPage .login-btn {
            background: linear-gradient(135deg, #6366f1, #8b5cf6, #ec4899);
            color: white;
            border: none;
            padding: 15px;
            border-radius: 14px;
            font-size: 16px;
            font-weight: 800;
            cursor: pointer;
            width: 100%;
            letter-spacing: 1.5px;
            box-shadow: 0 8px 30px rgba(139,92,246,0.5);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        #loginPage .login-btn::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, #4f46e5, #7c3aed, #db2777);
            opacity: 0;
            transition: opacity 0.3s;
        }
        #loginPage .login-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(139,92,246,0.65); }
        #loginPage .login-btn:hover::after { opacity: 1; }
        #loginPage .login-btn:active { transform: scale(0.98) translateY(0); }
        #loginPage .login-btn span { position: relative; z-index: 1; }


/* ==================== لینک‌های ثانویه‌ی فرم ورود ====================
   «عضو جدید هستید؟ ثبت‌نام کنید» و «بازگشت به فرم ورود»
   قبلاً رنگ اصلی تم را داشتند که با پس‌زمینه‌ی همان تم هم‌رنگ می‌شد.
   حالا: متن سفید روشن روی یک قرص نیمه‌شفاف، با حاشیه‌ای به رنگ درخشش هر تم. */
.login-alt-link {
    display: inline-block;
    padding: 9px 20px;
    border-radius: 999px;
    color: #ffffff !important;
    font-weight: bold;
    font-size: 14px;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.14);
    border: 1.5px solid rgba(var(--login-glow-rgb, 251, 191, 36), 0.75);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
    transition: background 0.2s ease, transform 0.2s ease;
}
.login-alt-link:hover,
.login-alt-link:active {
    background: rgba(var(--login-glow-rgb, 251, 191, 36), 0.28);
    transform: translateY(-1px);
}