:root {
        --neon: #00c8ff;
        --neon-g: #00ff9d;
        --deep: #060d1e;
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    body {
        font-family: 'Vazirmatn','Segoe UI',sans-serif;
        background: var(--deep);
        color: #c0d8f0;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        direction: rtl;
    }
    html[dir="ltr"] body {
        direction: ltr;
    }

    /* ===== BACKGROUND ===== */
    .bg-wrap { position: fixed; inset: 0; z-index: 0; }
    .bg-grid {
        position: absolute; inset: 0;
        background-image:
            linear-gradient(rgba(0,200,255,0.05) 1px, transparent 1px),
            linear-gradient(90deg, rgba(0,200,255,0.05) 1px, transparent 1px);
        background-size: 52px 52px;
        animation: gridPulse 9s ease-in-out infinite;
    }
    @keyframes gridPulse { 0%,100%{opacity:.4} 50%{opacity:.9} }

    .bg-orb {
        position: absolute; border-radius: 50%; pointer-events: none;
    }
    .bg-orb1 {
        width: 700px; height: 700px; top: -200px; right: -200px;
        background: radial-gradient(circle, rgba(0,200,255,0.1) 0%, transparent 70%);
        animation: orb1 18s ease-in-out infinite;
    }
    .bg-orb2 {
        width: 500px; height: 500px; bottom: -150px; left: -150px;
        background: radial-gradient(circle, rgba(0,255,157,0.07) 0%, transparent 70%);
        animation: orb2 22s ease-in-out infinite;
    }
    @keyframes orb1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-50px,70px)} }
    @keyframes orb2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(60px,-50px)} }

    .particle { position: absolute; border-radius: 50%; pointer-events: none; animation: pFloat linear infinite; opacity: 0; }
    @keyframes pFloat {
        0%   { transform: translateY(100vh) translateX(0); opacity: 0; }
        8%   { opacity: .8; }
        92%  { opacity: .4; }
        100% { transform: translateY(-30px) translateX(var(--dx,40px)); opacity: 0; }
    }

    /* ===== CARD ===== */
    .login-card {
        position: relative; z-index: 10;
        width: 100%; max-width: 420px;
        padding: 42px 38px 36px;
        background: rgba(5,12,30,0.88);
        backdrop-filter: blur(28px) saturate(180%);
        -webkit-backdrop-filter: blur(28px) saturate(180%);
        border: 1px solid rgba(0,200,255,0.18);
        border-radius: 20px;
        box-shadow:
            0 0 0 1px rgba(255,255,255,0.03),
            0 8px 60px rgba(0,0,0,0.6),
            0 0 80px rgba(0,200,255,0.06);
        animation: cardIn .6s cubic-bezier(.34,1.56,.64,1) both;
    }
    @keyframes cardIn { from { opacity:0; transform:translateY(30px) scale(.97); } to { opacity:1; transform:none; } }

    /* Neon top line */
    .login-card::before {
        content: '';
        position: absolute; top: 0; left: 10%; right: 10%; height: 2px;
        background: linear-gradient(90deg, transparent, var(--neon), transparent);
        border-radius: 0 0 4px 4px;
        box-shadow: 0 0 18px rgba(0,200,255,.6);
    }

    /* Logo */
    .login-logo-wrap {
        display: flex; justify-content: center; margin-bottom: 22px;
    }
    .login-logo-ring {
        position: relative; width: 82px; height: 82px;
        display: flex; align-items: center; justify-content: center;
    }
    .login-logo-ring::before {
        content: '';
        position: absolute; inset: -5px; border-radius: 50%;
        background: conic-gradient(var(--neon-g) 0deg, transparent 80deg, var(--neon-g) 180deg, transparent 260deg, var(--neon-g) 360deg);
        animation: spinRing 4s linear infinite;
        -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #fff calc(100% - 2.5px));
        mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #fff calc(100% - 2.5px));
    }
    @keyframes spinRing { to { transform: rotate(360deg); } }
    .login-logo {
        width: 82px; height: 82px; border-radius: 50%; object-fit: cover;
        position: relative; z-index: 1;
        box-shadow: 0 0 20px rgba(0,255,157,.35);
    }

    .login-title {
        text-align: center; margin-bottom: 28px;
    }
    .login-title h2 {
        font-size: 1.22rem; font-weight: 700; color: #ddefff;
        margin-bottom: 4px;
    }
    .login-title p {
        font-size: .72rem; color: rgba(0,200,255,.55);
        letter-spacing: .06em;
    }

    /* Fields */
    .field-wrap { margin-bottom: 18px; }
    .field-label {
        display: block; font-size: .8rem; color: rgba(180,220,255,.75);
        margin-bottom: 7px; font-weight: 500;
    }
    .field-inner { position: relative; }
    .field-inner .fi-icon {
        position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
        color: rgba(0,200,255,.5); font-size: 1rem; pointer-events: none;
    }
    .neon-input {
        width: 100%; padding: 11px 40px 11px 14px;
        background: rgba(0,200,255,0.05);
        border: 1px solid rgba(0,200,255,0.2);
        border-radius: 10px;
        color: #ddefff; font-size: .93rem;
        font-family: 'Vazirmatn','Segoe UI',sans-serif;
        outline: none;
        transition: border-color .2s, box-shadow .2s, background .2s;
    }
    .neon-input::placeholder { color: rgba(140,180,220,.4); }
    .neon-input:focus {
        border-color: rgba(0,200,255,.55);
        background: rgba(0,200,255,.08);
        box-shadow: 0 0 0 3px rgba(0,200,255,.12), 0 0 18px rgba(0,200,255,.14);
    }

    .login-locale { position: relative; width: 100%; }
    .login-locale-btn {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 11px 14px;
        cursor: pointer;
        text-align: inherit;
        font: inherit;
        color: #e8f1ff !important;
        background-color: #071428 !important;
        border: 1px solid rgba(0,200,255,.28);
        border-radius: 10px;
        color-scheme: dark;
    }
    .login-locale-btn:hover,
    .login-locale-btn:focus,
    .login-locale-btn[aria-expanded="true"] {
        border-color: rgba(0,200,255,.55);
        background: rgba(0,200,255,.08);
        box-shadow: 0 0 0 3px rgba(0,200,255,.12), 0 0 18px rgba(0,200,255,.14);
        outline: none;
    }
    .login-locale-text { flex: 1; }
    .login-locale-caret { opacity: .7; font-size: .75rem; }
    .login-locale .fi {
        width: 1.2em;
        line-height: 1;
        border-radius: 2px;
        box-shadow: 0 0 0 1px rgba(148,163,184,.25);
    }
    .login-locale-menu {
        position: absolute;
        z-index: 30;
        inset-inline: 0;
        top: calc(100% + 6px);
        margin: 0;
        padding: 6px;
        list-style: none;
        border-radius: 10px;
        border: 1px solid rgba(0,200,255,.35);
        background: linear-gradient(180deg, #0a162c, #07101f);
        box-shadow: 0 12px 28px rgba(0,0,0,.45);
        max-height: 240px;
        overflow: auto;
    }
    .login-locale-option {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 12px;
        border-radius: 8px;
        color: #e8f1ff;
        cursor: pointer;
        font-size: .9rem;
    }
    .login-locale-option:hover,
    .login-locale-option.is-active {
        background: rgba(0,200,255,.12);
    }
    .login-locale .visually-hidden {
        position: absolute !important;
        width: 1px; height: 1px;
        padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0,0,0,0);
        white-space: nowrap; border: 0;
    }
    /* انتخاب زبان — جلوگیری از پس‌زمینهٔ سفید و متن روشن مرورگر */
    select.neon-input,
    #login-locale {
        padding: 11px 36px 11px 14px;
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
        background-color: #071428 !important;
        background-image:
            linear-gradient(45deg, transparent 50%, #7dd3fc 50%),
            linear-gradient(135deg, #7dd3fc 50%, transparent 50%);
        background-position:
            calc(100% - 18px) calc(50% - 3px),
            calc(100% - 12px) calc(50% - 3px);
        background-size: 6px 6px, 6px 6px;
        background-repeat: no-repeat;
        color: #e8f1ff !important;
        color-scheme: dark;
    }
    select.neon-input option,
    #login-locale option {
        background-color: #0b1a33;
        color: #e8f1ff;
    }
    select.neon-input option:checked,
    #login-locale option:checked {
        background-color: #0369a1;
        color: #fff;
    }

    .eye-btn {
        position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
        background: none; border: none; color: rgba(0,200,255,.5);
        cursor: pointer; font-size: 1rem; padding: 2px; transition: color .2s;
    }
    .eye-btn:hover { color: var(--neon); }

    /* LTR login chrome: icons/eye flip; locale chevron stays on the right */
    html[dir="ltr"] .field-inner .fi-icon {
        right: auto;
        left: 13px;
    }
    html[dir="ltr"] .neon-input {
        padding: 11px 14px 11px 40px;
    }
    html[dir="ltr"] .field-inner:has(.eye-btn) .neon-input {
        padding-right: 40px;
    }
    html[dir="ltr"] .eye-btn {
        left: auto;
        right: 12px;
    }
    html[dir="ltr"] select.neon-input,
    html[dir="ltr"] #login-locale {
        padding: 11px 36px 11px 14px;
        background-position:
            calc(100% - 18px) calc(50% - 3px),
            calc(100% - 12px) calc(50% - 3px);
        text-align: start;
    }

    /* Remember me */
    .remember-row {
        display: flex; align-items: center; gap: 8px;
        margin-bottom: 22px; cursor: pointer;
    }
    .neon-check {
        width: 17px; height: 17px; border-radius: 5px;
        border: 1px solid rgba(0,200,255,.35);
        background: rgba(0,200,255,.06);
        appearance: none; -webkit-appearance: none;
        cursor: pointer; transition: all .2s; flex-shrink: 0;
        position: relative;
    }
    .neon-check:checked {
        background: rgba(0,200,255,.2);
        border-color: rgba(0,200,255,.65);
    }
    .neon-check:checked::after {
        content: '✓'; position: absolute; inset: 0;
        display: flex; align-items: center; justify-content: center;
        color: var(--neon); font-size: .75rem; font-weight: 700;
    }
    .remember-label { font-size: .8rem; color: rgba(160,210,240,.7); user-select: none; }

    /* Submit button */
    .btn-neon {
        width: 100%; padding: 13px;
        background: linear-gradient(135deg, rgba(0,200,255,.18), rgba(0,150,200,.1));
        border: 1px solid rgba(0,200,255,.4);
        border-radius: 12px;
        color: #e0f4ff; font-size: .95rem; font-weight: 600;
        font-family: 'Vazirmatn','Segoe UI',sans-serif;
        cursor: pointer; transition: all .22s;
        display: flex; align-items: center; justify-content: center; gap: 8px;
        box-shadow: 0 0 18px rgba(0,200,255,.14);
        position: relative; overflow: hidden;
    }
    .btn-neon::before {
        content: '';
        position: absolute; inset: 0;
        background: linear-gradient(135deg, rgba(0,200,255,.28), rgba(0,150,200,.16));
        opacity: 0; transition: opacity .22s;
    }
    .btn-neon:hover::before { opacity: 1; }
    .btn-neon:hover {
        box-shadow: 0 0 30px rgba(0,200,255,.3);
        border-color: rgba(0,200,255,.7);
        color: #fff;
    }
    .btn-neon:active { transform: scale(.98); }
    .btn-neon.loading { pointer-events: none; opacity: .75; }
    .spinner-ring {
        width: 18px; height: 18px; border-radius: 50%;
        border: 2px solid rgba(0,200,255,.3);
        border-top-color: var(--neon);
        animation: spin .7s linear infinite; display: none;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    .btn-neon.loading .spinner-ring { display: block; }
    .btn-neon.loading .btn-text { display: none; }

    /* Alert — default stays error-looking for login failures */
    .neon-alert {
        background: rgba(255,60,80,.08);
        border: 1px solid rgba(255,60,80,.3);
        border-radius: 10px; color: #ff8888;
        padding: 10px 14px; font-size: .83rem;
        margin-bottom: 18px;
        display: flex; align-items: center; gap: 8px;
    }
    .neon-alert--success {
        background: rgba(34,197,94,.1);
        border-color: rgba(34,197,94,.4);
        color: #86efac;
    }
    .neon-alert--error {
        background: rgba(255,60,80,.08);
        border-color: rgba(255,60,80,.3);
        color: #ff8888;
    }

    /* Divider */
    .card-divider {
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(0,200,255,.15), transparent);
        margin: 24px 0;
    }
    .card-footer-text {
        text-align: center; font-size: .7rem; color: rgba(0,200,255,.35);
    }

    @media (max-width: 480px) {
        .login-card { margin: 16px; padding: 30px 22px 28px; }
    }

    /* ═══════ LIGHT MODE ═══════ */
    [data-theme-mode="light"] {--deep:#f1f5f9;}
    [data-theme-mode="light"] body{color:#1e293b;}
    [data-theme-mode="light"] .bg-wrap{opacity:.18;}
    [data-theme-mode="light"] .login-card{
        background:#ffffff;
        border-color:#e2e8f0;
        box-shadow:0 8px 40px rgba(15,23,42,.08);
    }
    [data-theme-mode="light"] .login-title h2{color:#0f172a;}
    [data-theme-mode="light"] .login-title p{color:#64748b;}
    [data-theme-mode="light"] .field-label,
    [data-theme-mode="light"] .form-label{color:#334155 !important;}
    [data-theme-mode="light"] .neon-input{
        background:#ffffff !important;
        border-color:#cbd5e1 !important;
        color:#0f172a !important;
        color-scheme: light;
    }
    [data-theme-mode="light"] .neon-input:focus{
        border-color:#0284c7 !important;
        box-shadow:0 0 0 3px rgba(2,132,199,.15) !important;
    }
    [data-theme-mode="light"] .neon-input::placeholder{color:#94a3b8;}
    [data-theme-mode="light"] .input-icon{color:#64748b;}
    [data-theme-mode="light"] .login-locale-btn{
        background:#ffffff !important;
        color:#0f172a !important;
        border-color:#cbd5e1 !important;
        color-scheme: light;
    }
    [data-theme-mode="light"] .login-locale-btn:hover,
    [data-theme-mode="light"] .login-locale-btn:focus,
    [data-theme-mode="light"] .login-locale-btn[aria-expanded="true"]{
        background:#f8fafc !important;
        border-color:#0284c7 !important;
        box-shadow:0 0 0 3px rgba(2,132,199,.12) !important;
    }
    [data-theme-mode="light"] .login-locale-menu{
        background:#ffffff !important;
        border-color:#e2e8f0 !important;
        box-shadow:0 12px 28px rgba(15,23,42,.12) !important;
    }
    [data-theme-mode="light"] .login-locale-option{
        color:#1e293b !important;
    }
    [data-theme-mode="light"] .login-locale-option:hover,
    [data-theme-mode="light"] .login-locale-option.is-active{
        background:#e0f2fe !important;
        color:#0369a1 !important;
    }
    [data-theme-mode="light"] .btn-neon,
    [data-theme-mode="light"] .neon-btn{
        background:linear-gradient(135deg,#0284c7,#0369a1) !important;
        border-color:#0369a1 !important;
        color:#ffffff !important;
        box-shadow:0 4px 14px rgba(3,105,161,.25) !important;
    }
    [data-theme-mode="light"] .btn-neon:hover,
    [data-theme-mode="light"] .neon-btn:hover{
        color:#ffffff !important;
        box-shadow:0 6px 20px rgba(3,105,161,.35) !important;
    }
    [data-theme-mode="light"] .btn-neon::before{display:none;}
    [data-theme-mode="light"] .remember-label{color:#475569 !important;}
    [data-theme-mode="light"] .neon-alert,
    [data-theme-mode="light"] .neon-alert--error{
        background:#fef2f2;
        border-color:#fecaca;
        color:#b91c1c;
    }
    [data-theme-mode="light"] .neon-alert--success{
        background:#f0fdf4;
        border-color:#bbf7d0;
        color:#166534;
    }
    [data-theme-mode="light"] .card-divider{
        background:linear-gradient(90deg,transparent,rgba(15,23,42,.1),transparent);
    }
    [data-theme-mode="light"] .card-footer-text{color:#64748b;}