*, *::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); } }
@keyframes spin          { to { transform:rotate(360deg); } }
@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); } }
@keyframes iconBounce    { 0% { opacity:0; transform:scale(0) rotate(-15deg); } 60% { transform:scale(1.15) rotate(5deg); } 100% { opacity:1; transform:scale(1) rotate(0); } }
@keyframes barShimmer    { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }
@keyframes barGrow       { from { width:0 !important; } }

.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);
}

html { scroll-behavior:smooth; }

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

/* ── Mesh ── */
.mesh { position:fixed; inset:0; pointer-events:none; z-index:0; }
.blob { position:absolute; border-radius:50%; filter:blur(150px); opacity:.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; }

/* ── Layout ── */
.container       { position:relative; z-index:1; max-width:780px;  margin:0 auto; padding:40px 20px 80px; }
.container--wide { position:relative; z-index:1; max-width:1100px; margin:0 auto; padding:40px 20px 80px; }

/* ── Card ── */
.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);
}

/* ── Buttons ── */
.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:disabled { opacity:.6; cursor:not-allowed; }
.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-secondary {
  background:var(--bg-card); color:var(--text-secondary);
  border:1.5px solid var(--border); width:auto;
}
.btn-secondary:hover:not(:disabled) { border-color:var(--accent); color:var(--accent); background:var(--accent-bg); }
.btn-sm {
  padding:6px 14px; border-radius:8px; border:none; width:auto;
  font-family:'Vazirmatn', sans-serif; font-size:.78rem; font-weight:700;
  cursor:pointer; transition:opacity .2s, transform .2s;
}
.btn-sm:hover:not(:disabled) { opacity:.85; transform:translateY(-1px); }
.btn-sm:disabled { opacity:.4; cursor:not-allowed; }

/* ── Page title & back button ── */
.page-title { font-size:1.6rem; font-weight:800; margin-bottom:32px; color:var(--text-primary); }
.page-title span { color:var(--accent); }
.btn-back {
  padding:9px 20px; border-radius:10px;
  border:1.5px solid var(--border); background:var(--bg-card);
  color:var(--text-secondary); font-family:'Vazirmatn', sans-serif;
  font-size:.85rem; font-weight:600; text-decoration:none; transition:all .2s;
}
.btn-back:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-bg); }

/* ── Spinner ── */
.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;
}
.spinner.active { display:inline-block; }

/* ── Form ── */
.form-group { margin-bottom:20px; }
.form-group label, label {
  display:block; font-size:.85rem; font-weight:500;
  margin-bottom:6px; color:var(--text-primary);
}
.form-group input,
.form-group select,
.form-group textarea {
  width:100%; border:1.5px solid var(--border); border-radius:10px;
  padding:10px 14px; font-family:'Vazirmatn', sans-serif;
  font-size:.9rem; color:var(--text-primary);
  background:var(--bg-base); outline:none; transition:border-color .2s, box-shadow .2s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus  { border-color:var(--accent); background:#fff; box-shadow:0 0 0 3px var(--accent-glow); }
.form-group textarea        { resize:vertical; min-height:90px; line-height:1.7; }
.checkbox-label { display:flex; align-items:center; gap:8px; font-size:.88rem; cursor:pointer; color:var(--text-secondary); }
.checkbox-label input[type=checkbox] { width:auto; accent-color:var(--accent); }
.req { color:var(--danger); }
.opt { font-weight:400; color:var(--text-secondary); font-size:.82rem; }
.field-hint { font-size:.78rem; color:var(--text-secondary); margin-top:5px; }

/* ── Toast ── */
#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); }
#toast.info    { background:var(--accent); }

/* ── Modals ── */
.modal-overlay {
  position:fixed; inset:0; background:rgba(15,10,40,.7); backdrop-filter:blur(6px);
  z-index:9000; display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.modal-overlay.open { opacity:1; pointer-events:all; }
.modal-box {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:20px; box-shadow:0 24px 80px rgba(124,58,237,.25);
  width:92vw; max-width:1000px; height:92vh;
  display:flex; flex-direction:column; overflow:hidden;
  transform:scale(.92) translateY(16px);
  transition:transform .3s cubic-bezier(.22,.68,0,1.2);
}
.modal-overlay.open .modal-box { transform:scale(1) translateY(0); }
.modal-box--sm { width:420px; height:auto; max-height:90vh; }
.modal-box--lg { width:860px; height:auto; max-height:88vh; }
.modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; border-bottom:1px solid var(--border);
  font-weight:700; font-size:.95rem;
}
.modal-close {
  width:32px; height:32px; border:none; background:var(--bg-elevated);
  border-radius:8px; cursor:pointer; font-size:1.1rem;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s; color:var(--text-primary);
}
.modal-close:hover { background:var(--accent-bg); color:var(--accent); }
.modal-body { overflow:auto; padding:20px; display:flex; align-items:center; justify-content:center; flex:1; min-height:0; }
.modal-body img { max-width:100%; max-height:100%; width:auto; height:auto; border-radius:10px; display:block; object-fit:contain; }
.modal-body .pdf-link {
  display:inline-flex; align-items:center; gap:10px; padding:16px 28px;
  background:var(--accent-bg); border:1.5px solid var(--border);
  border-radius:12px; color:var(--accent); font-weight:700; text-decoration:none;
}
.modal-body .pdf-link:hover { background:var(--bg-elevated); }
.modal-body--col { flex-direction:column; align-items:stretch; gap:20px; padding:24px; }

/* ── Badge ── */
.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); }