@font-face {
  font-family: 'IRANSansX';
  src: url('../fonts/IRANSansXFaNum-Regular.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('https://cdn.jsdelivr.net/npm/vazirmatn@33.003/fonts/webfonts/Vazirmatn-Regular.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('https://cdn.jsdelivr.net/npm/vazirmatn@33.003/fonts/webfonts/Vazirmatn-Bold.woff2') format('woff2');
  font-weight: 700; font-display: swap;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; direction: rtl; }
body {
  font-family: 'Vazirmatn', 'IRANSansX', Tahoma, sans-serif;
  overflow: hidden;
  background: #0a0e17;
  color: #fff;
}

.bg {
  position: fixed; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 30%, rgba(59,130,246,.45), transparent),
    radial-gradient(ellipse 70% 50% at 80% 20%, rgba(139,92,246,.4), transparent),
    radial-gradient(ellipse 60% 40% at 50% 80%, rgba(16,185,129,.25), transparent),
    #0a0e17;
  animation: bgPulse 12s ease-in-out infinite alternate;
}
@keyframes bgPulse {
  from { filter: hue-rotate(0deg) saturate(1); }
  to { filter: hue-rotate(25deg) saturate(1.15); }
}
.orb {
  position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55;
  animation: float 18s ease-in-out infinite;
}
.orb-1 { width: 340px; height: 340px; background: #3b82f6; top: -80px; right: -60px; }
.orb-2 { width: 280px; height: 280px; background: #8b5cf6; bottom: 10%; left: -40px; animation-delay: -6s; }
.orb-3 { width: 200px; height: 200px; background: #06b6d4; bottom: -40px; right: 30%; animation-delay: -12s; }
@keyframes float {
  0%,100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(30px,-20px) scale(1.08); }
}

.wrap {
  position: relative; z-index: 1;
  min-height: 100vh; display: grid; place-items: center; padding: 1.5rem;
}

.glass {
  width: 100%; max-width: 420px;
  padding: 2rem 1.75rem 1.75rem;
  border-radius: 28px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow:
    0 8px 32px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.15);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  animation: cardIn .6s cubic-bezier(.22,1,.36,1);
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(24px) scale(.96); }
  to { opacity: 1; transform: none; }
}

.logo-row {
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  margin-bottom: 1.75rem;
}
.logo-mark {
  width: 56px; height: 56px; border-radius: 18px;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  display: grid; place-items: center;
  font-weight: 700; font-size: 1.1rem;
  box-shadow: 0 8px 24px rgba(59,130,246,.45);
}
.logo-row h1 { margin: 0; font-size: 1.25rem; font-weight: 700; }
.logo-row p { margin: 0; font-size: .82rem; color: rgba(255,255,255,.6); }

label {
  display: block; font-size: .8rem; color: rgba(255,255,255,.7);
  margin-bottom: .35rem; font-weight: 600;
}
.field { margin-bottom: 1rem; }
.field input {
  width: 100%; padding: .85rem 1rem; border-radius: 14px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(0,0,0,.25);
  color: #fff; font-family: inherit; font-size: .95rem;
  outline: none; transition: border-color .2s, box-shadow .2s, background .2s;
}
.field input:focus {
  border-color: rgba(59,130,246,.7);
  box-shadow: 0 0 0 4px rgba(59,130,246,.2);
  background: rgba(0,0,0,.35);
}
.field input::placeholder { color: rgba(255,255,255,.35); }

.btn-login {
  width: 100%; margin-top: .35rem; padding: .95rem;
  border: 0; border-radius: 14px; cursor: pointer;
  font-family: inherit; font-size: 1rem; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #3b82f6, #6366f1 50%, #8b5cf6);
  background-size: 200% 200%;
  box-shadow: 0 8px 28px rgba(59,130,246,.4);
  transition: transform .2s, box-shadow .2s;
  animation: gradientShift 6s ease infinite;
}
@keyframes gradientShift {
  0%,100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.btn-login:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(99,102,241,.5); }
.btn-login:active { transform: translateY(0); }

.err {
  background: rgba(239,68,68,.15);
  border: 1px solid rgba(239,68,68,.35);
  color: #fecaca; padding: .75rem .9rem; border-radius: 12px;
  margin-bottom: 1rem; font-size: .85rem;
  animation: shake .4s ease;
}
@keyframes shake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.links {
  display: flex; justify-content: space-between; margin-top: 1.1rem;
  font-size: .8rem;
}
.links a { color: rgba(255,255,255,.65); text-decoration: none; transition: color .2s; }
.links a:hover { color: #fff; }

.foot {
  text-align: center; margin-top: 1.25rem;
  font-size: .72rem; color: rgba(255,255,255,.4);
}