:root{ --bg-1: #050f0d; --bg-2: #081714; --card-bg: rgba(4, 18, 15, 0.9); --card-border: rgba(0, 212, 170, 0.5); --card-glow: rgba(255,255,255,0.02); --accent-1: #008080; --accent-2: #00d4aa; --btn-gradient-1: #008080; --btn-gradient-2: #00d4aa;} *, *::before, *::after{ box-sizing: border-box; -webkit-tap-highlight-color: transparent;} :focus:not(:focus-visible){ outline: none;} :focus-visible:not(input):not(textarea):not(select){ outline: 2px solid #00d4aa; outline-offset: 2px;} button, input, select, textarea{ font-family: inherit;} html{ height: 100%; background-color: #050f0d;} body{ height: 100%; margin: 0; font-family: 'Vazirmatn', 'Vazir', sans-serif; color: #ffffff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;} .animated-bg{ position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100dvh; z-index: -1; overflow: hidden; background: linear-gradient(135deg, #050f0d 0%, #081714 25%, #030b09 50%, #020806 75%, #06120f 100%);} .animated-bg::before{ content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(0, 128, 128, 0.08) 0%, transparent 50%), radial-gradient(circle, rgba(0, 212, 170, 0.06) 0%, transparent 50%); animation: rotate-bg 20s linear infinite;} @keyframes rotate-bg{ 0%{ transform: rotate(0deg);} 100%{ transform: rotate(360deg);}} .floating-particles{ position: absolute; width: 100%; height: 100%;} .particle{ position: absolute; background: rgba(0, 212, 170, 0.08); border-radius: 50%; animation: float 8s ease-in-out infinite;} .particle:nth-child(1){ top: 10%; left: 10%; width: 4px; height: 4px; animation-delay: 0s;} .particle:nth-child(2){ top: 20%; left: 80%; width: 6px; height: 6px; animation-delay: 2s;} .particle:nth-child(3){ top: 60%; left: 20%; width: 3px; height: 3px; animation-delay: 4s;} .particle:nth-child(4){ top: 80%; left: 70%; width: 5px; height: 5px; animation-delay: 6s;} .particle:nth-child(5){ top: 40%; left: 40%; width: 4px; height: 4px; animation-delay: 8s;} @keyframes float{ 0%, 100%{ transform: translateY(0px) rotate(0deg); opacity: 0.3;} 50%{ transform: translateY(-20px) rotate(180deg); opacity: 0.7;}} .admin-login-main{ min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px; position: relative; z-index: 1;} .login-wrapper{ width: 100%; max-width: 420px;} .login-card{ background: var(--card-bg); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border: 1px solid var(--card-border); border-radius: 20px; padding: 36px 30px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); position: relative; overflow: hidden; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);} .login-card::before{ content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, #008080, #00d4aa); opacity: 0; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);} .login-card:hover::before{ opacity: 1;} .login-title{ font-size: 34px; text-align: center; margin: 0 0 22px 0; letter-spacing: 0.5px; background: linear-gradient(135deg, #ffffff, rgba(255, 255, 255, 0.95)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-shadow: 0 8px 18px rgba(0, 128, 128, 0.3);} .login-error{ color: #ef4444; background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.2); padding: 10px 12px; border-radius: 12px; text-align: center; margin-bottom: 14px; font-weight: 600;} .login-form{ display: flex; flex-direction: column; gap: 18px;} .input-label{ display: block; position: relative;} .label-text{ display: block; font-size: 14px; color: rgba(255, 255, 255, 0.95); margin-bottom: 8px;} .login-input{ width: 100%; padding: 12px 44px 12px 14px; background: rgba(7, 32, 29, 0.6); border: 1px solid rgba(0, 212, 170, 0.35); color: #ffffff; font-size: 16px; border-radius: 12px; outline: none; transition: all 0.25s ease; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);} .login-input::placeholder{ color: rgba(153, 246, 228, 0.75);} .login-input:focus{ border-color: #00d4aa; box-shadow: 0 0 0 3px rgba(0, 212, 170, 0.1); background: rgba(0, 128, 128, 0.08);} .login-btn{ padding: 14px 20px; border-radius: 12px; font-size: 18px; font-weight: 700; color: #ffffff; border: none; cursor: pointer; transition: all 0.25s ease; background: linear-gradient(135deg, #008068, #00695c); box-shadow: 0 8px 30px rgba(0, 128, 128, 0.3); position: relative; overflow: hidden;} .login-btn::before{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: inherit; opacity: 0; transition: all 0.25s ease;} .login-btn:hover::before{ opacity: 0.1;} .login-btn:hover{ transform: translateY(-2px); box-shadow: 0 10px 25px rgba(0, 128, 128, 0.3);} .login-btn{ touch-action: manipulation;} .login-alt{ display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.6rem; margin: 4px 0 0; padding-top: 14px; font-size: 0.82rem; text-align: center; color: rgba(255, 255, 255, 0.55); border-top: 1px solid rgba(255, 255, 255, 0.08);} .login-alt-btn{ display: inline-flex; align-items: center; gap: 0.42rem; padding: 0.5rem 0.95rem; border-radius: 999px; font-weight: 700; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;} .login-alt-btn i{ font-size: 0.9rem; line-height: 1;} .login-alt-btn--paid{ color: #041714; background: linear-gradient(135deg, #00b391, #00d4aa); box-shadow: 0 6px 18px rgba(0, 212, 170, 0.25);} .login-alt-btn--paid:hover{ color: #041714; box-shadow: 0 10px 22px rgba(0, 212, 170, 0.34); transform: translateY(-1px);} .login-alt-btn--demo{ color: #ffe08a; background: rgba(245, 197, 24, 0.14); box-shadow: inset 0 0 0 1px rgba(245, 197, 24, 0.45);} .login-alt-btn--demo:hover{ color: #fff3d6; background: rgba(245, 197, 24, 0.2); transform: translateY(-1px);} @media (max-width: 480px){ .admin-login-main{ padding: 16px;} .login-card{ padding: 26px 18px; border-radius: 14px;} .login-title{ font-size: 26px;} .login-btn{ font-size: 16px; padding: 14px 12px;} .login-alt{ gap: 0.45rem; font-size: 0.78rem;} .login-alt-btn{ padding: 0.44rem 0.75rem; gap: 0.34rem;} .login-alt-btn i{ font-size: 0.82rem;}} @media (hover: none){ .login-card:hover::before{ opacity: 0;} .login-btn:hover{ transform: none; box-shadow: 0 8px 30px rgba(0, 128, 128, 0.3);} .login-alt-btn:hover{ transform: none;}} .login-input[dir="ltr"]{ direction: ltr; text-align: left; font-family: 'Cascadia Code', 'Consolas', 'Courier New', monospace; letter-spacing: 0;} .login-input[dir="rtl"]{ direction: rtl; text-align: right; font-family: 'Vazirmatn', 'Vazir', sans-serif; letter-spacing: 0;} .login-input::placeholder{ font-family: Vazirmatn, Tahoma, sans-serif; letter-spacing: 0; direction: rtl; text-align: right;} .login-password-wrap{ position: relative;} .login-password-wrap .login-input{ padding-right: 14px; padding-left: 46px;} .login-password-eye{ position: absolute; top: 50%; left: 12px; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; border-radius: 9px; background: transparent; color: rgba(153, 246, 228, 0.75); cursor: pointer; font-size: 0.95rem; transition: color 0.15s ease, background 0.15s ease; z-index: 1;} .login-password-eye:hover{ color: #99f6e4; background: rgba(0, 212, 170, 0.1);} @media (hover: none) and (pointer: coarse){ .animated-bg::before, .floating-particles .particle{ animation: none;} .login-card{ -webkit-backdrop-filter: none; backdrop-filter: none;}}