*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pop {
  0%   { opacity: 0; transform: scale(.88); }
  70%  { transform: scale(1.03); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(-32px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideOutLeft {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(32px); }
}

.animate-fade-down {
  animation: fadeDown .55s cubic-bezier(.22,.68,0,1.2) both;
}

.animate-fade-up {
  animation: fadeUp .55s cubic-bezier(.22,.68,0,1.2) var(--delay, 0s) both;
}

.animate-pop {
  animation: pop .5s cubic-bezier(.22,.68,0,1.2) both;
}

.step { width: 100%; }

.step--hidden {
  display: none;
}

.step--active {
  display: block;
  animation: slideInRight .42s cubic-bezier(.22,.68,0,1.2) both;
}

.step--exit {
  animation: slideOutLeft .28s ease forwards;
}

:root {
  --bg-base:       #F5F3FF;
  --bg-card:       #FFFFFF;
  --bg-elevated:   #EDE9FE;
  --accent:        #7C3AED;
  --accent-light:  #8B5CF6;
  --accent-glow:   rgba(124,58,237,0.15);
  --accent-bg:     rgba(124,58,237,0.08);
  --text-primary:  #1E1B4B;
  --text-secondary:#6B7280;
  --success:       #059669;
  --danger:        #DC2626;
  --warning:       #D97706;
  --border:        rgba(124,58,237,0.12);
  --shadow:        rgba(124,58,237,0.10);
}

body {
  font-family: 'Vazirmatn', sans-serif;
  background: var(--bg-base);
  color: var(--text-primary);
  min-height: 100vh;
  direction: rtl;
  text-align: right;
  position: relative;
  overflow-x: hidden;
}

.mesh {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(150px);
  opacity: 0.18;
}

.blob-1 { width: 500px; height: 500px; background: #7C3AED; top: -120px; right: -100px; animation: blobDrift1 12s ease-in-out infinite alternate; }
.blob-2 { width: 400px; height: 400px; background: #A78BFA; bottom: -100px; left: -80px;  animation: blobDrift2 14s ease-in-out infinite alternate; }

@keyframes blobDrift1 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(40px, 30px) scale(1.08); }
}

@keyframes blobDrift2 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-30px, -20px) scale(1.06); }
}

.container {
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin: 0 auto;
  padding: 40px 20px 80px;
}

.container--wide {
  max-width: 1100px;
}

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 4px 24px var(--shadow);
}

.card-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 24px;
  border: none;
  border-radius: 12px;
  font-family: 'Vazirmatn', sans-serif;
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s, transform .2s, box-shadow .2s;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 4px 16px var(--accent-glow);
  position: relative;
  overflow: hidden;
}

.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.18) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform .5s ease;
}

.btn-primary:hover:not(:disabled)::after {
  transform: translateX(100%);
}

.btn-primary:hover:not(:disabled) {
  background: var(--accent-light);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px var(--accent-glow);
}

.btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.spinner {
  width: 18px;
  height: 18px;
  border: 2.5px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .6s linear infinite;
  display: none;
}

@keyframes spin { to { transform: rotate(360deg); } }

#toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--text-primary);
  color: #fff;
  padding: 12px 24px;
  border-radius: 12px;
  font-size: .9rem;
  font-weight: 500;
  z-index: 9999;
  transition: transform .35s ease, opacity .35s ease;
  opacity: 0;
  white-space: nowrap;
  max-width: 90vw;
  text-align: center;
}

#toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
#toast.success { background: var(--success); }
#toast.error   { background: var(--danger); }

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: .75rem;
  font-weight: 700;
}

.badge-pending   { background: rgba(217,119,6,.12);  color: var(--warning); }
.badge-submitted { background: rgba(124,58,237,.10); color: var(--accent); }
.badge-approved  { background: rgba(5,150,105,.12);  color: var(--success); }
.badge-rejected  { background: rgba(220,38,38,.12);  color: var(--danger); }