:root{
  /* Light UI background */
  --bg-main: #f4f7f6;
  --bg-card: #ffffff;
  --bg-soft: #f1f5f3;

  /* Brand (Green) */
  --brand: #2fbf71;
  --brand2: #36d98a;               /* برای گرادیان */
  --brand-soft: rgba(47,191,113,.12);

  /* Text */
  --txt: #1f2d2b;                  /* alias برای سازگاری با CSS فعلی */
  --muted: #5f6f6b;

  /* Borders */
  --stroke: #e1e7e4;

  /* Status */
  --good: #2fbf71;
  --bad: #e14d5a;

  /* Shadows */
  --shadow-sm: 0 6px 18px rgba(0,0,0,.06);
  --shadow: 0 14px 32px rgba(0,0,0,.08);

  --radius: 18px;
  --radius2: 14px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: "Vazirmatn", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: var(--txt);
  background: linear-gradient(180deg, #fbfdfc, var(--bg-main));
  overflow-x:hidden;
}

/* گرادیان نوشته‌ها (سبز بانکی) */
.gradText{
  background: linear-gradient(90deg, var(--brand), var(--brand2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* بک‌گراند تزئینی خیلی ملایم (لایت) */
.bg{ position:fixed; inset:0; pointer-events:none; z-index:-1; }
.bg__blob{
  position:absolute;
  width:520px; height:520px;
  border-radius:999px;
  filter: blur(44px);
  opacity:.18;
}
.bg__blob--a{ right:-200px; top:-220px; background: rgba(47,191,113,.35); }
.bg__blob--b{ left:-220px; bottom:-240px; background: rgba(47,191,113,.22); }

.bg__grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(31,45,43,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31,45,43,.06) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity:.18;
  mask-image: radial-gradient(closest-side at 50% 35%, rgba(0,0,0,.85), transparent 70%);
}

/* به جای وسطِ کامل، از بالا شروع شود تا دسکتاپ خلوت‌تر نشود */
.wrap{
  min-height:100%;
  display:grid;
  place-items: start center;
  padding:28px 18px 40px;
}

.card{
  width:min(1100px, 100%);
  border:1px solid var(--stroke);
  border-radius: var(--radius);
  background: var(--bg-card);
  box-shadow: var(--shadow);
}

/* Topbar */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:16px 18px; margin-bottom: 14px;
}

.brand{ display:flex; align-items:center; gap:16px; }

.brand__logoWrap{
  width:92px; height:92px;
  border-radius: 22px;
  background: #fff;
  border:1px solid var(--stroke);
  display:grid; place-items:center;
  overflow:hidden;
  box-shadow: var(--shadow-sm);
}
.brand__logo{ width:100%; height:100%; object-fit:contain; padding:10px; }

.brand__title h1{ margin:0; font-size: 18px; font-weight: 900; color: var(--txt); }
.brand__title p{ margin:4px 0 0; font-size: 12px; color: var(--muted); line-height: 1.7; }

.pill{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border:1px solid var(--stroke);
  border-radius:999px;
  background: #fff;
  color: var(--muted);
  font-size:12px;
  white-space:nowrap;
  box-shadow: var(--shadow-sm);
}
.pill__dot{
  width:10px;height:10px;border-radius:50%;
  background: var(--good);
  box-shadow: 0 0 0 4px rgba(47,191,113,.15);
}

/* Hero */
.hero{
  display:grid; grid-template-columns: 1.2fr .8fr;
  gap: 14px; padding: 16px; margin-bottom: 14px; overflow:hidden;
}

.hero__headline{ margin:0 0 8px; font-size: 20px; font-weight: 900; line-height: 1.7; color: var(--txt); }
.hero__desc{ margin:0; color: var(--muted); font-size: 12px; line-height: 1.95; max-width: 70ch; }

.hero__chips{ display:flex; gap:8px; flex-wrap:wrap; margin-top: 12px; }

.chip{
  padding: 8px 10px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background: #fff;
  color: var(--muted);
  font-size:11px;
  box-shadow: var(--shadow-sm);
}

.hero__art{ display:grid; place-items:center; opacity:.98; }
.hero__art img{ width:min(360px, 92%); filter: drop-shadow(0 18px 40px rgba(0,0,0,.12)); }

/* Main */
.main{ padding: 16px; }
.mainHead{ padding: 2px 2px 12px; }
.mainHead h3{ margin:0 0 6px; font-size: 14px; font-weight: 900; color: var(--txt); }
.mainHead p{ margin:0; color: var(--muted); font-size: 12px; line-height: 1.8; }

/* Stepper */
.stepper{
  display:flex; gap:10px; flex-wrap:wrap;
  padding: 10px 2px 16px;
}

.step{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius: 999px;
  border:1px solid var(--stroke);
  background: #fff;
  color: var(--muted);
  font-size:12px;
  transition: .2s ease;
  box-shadow: var(--shadow-sm);
}

.step b{
  width:26px;height:26px;border-radius:999px;
  display:grid;place-items:center;
  background: rgba(47,191,113,.10);
  border: 1px solid rgba(47,191,113,.25);
  color: var(--brand);
  font-size:12px;
  font-weight: 900;
}

.step.active{
  color: var(--brand);
  border-color: rgba(47,191,113,.35);
  background: var(--brand-soft);
}

.step.active b{
  background: var(--brand);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 10px 20px rgba(47,191,113,.18);
}

.step.pending{ opacity:.85; }

/* Grid layout */
.grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 14px;
  align-items: start;
}

/* Panels */
.panel{
  border:1px solid var(--stroke);
  background: var(--bg-card);
  border-radius: var(--radius2);
  padding: 14px;
  box-shadow: var(--shadow-sm);
}

.panel--soft{
  background: var(--bg-soft);
}

.panel__head h3{ margin:0 0 6px; font-size: 14px; font-weight: 900; color: var(--txt); }
.panel__head p{ margin:0; color: var(--muted); font-size: 12px; line-height: 1.8; }

/* Form */
form{ display:grid; gap:12px; margin-top: 12px; }
.row{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
label{ display:grid; gap:6px; font-size:12px; color: var(--muted); }

input, textarea{
  width:100%;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: #fff;
  color: var(--txt);
  padding: 12px 12px;
  outline:none;
  font-family: inherit;
  transition: .18s ease;
}

input:focus{
  border-color: rgba(47,191,113,.70);
  box-shadow: 0 0 0 3px rgba(47,191,113,.18);
}

input::placeholder{ color: rgba(95,111,107,.70); }

.hint{ font-size: 11px; color: var(--muted); line-height:1.7; margin-top: 2px; }

.err{
  display:none;
  margin-top:6px;
  font-size: 11px;
  color: var(--bad);
}
.invalid .err{ display:block; }
.invalid input{
  border-color: rgba(225,77,90,.55);
  box-shadow: 0 0 0 3px rgba(225,77,90,.15);
}

/* Buttons */
.actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 6px; }

.btn{
  border:none; cursor:pointer;
  border-radius: 14px;
  padding: 12px 14px;
  font-family: inherit;
  font-weight: 900;
  font-size: 12px;
  transition: .18s ease;
  color: var(--txt);
}

.btn--primary{
  background: linear-gradient(90deg, var(--brand), var(--brand2));
  color: #fff;
  box-shadow: 0 12px 26px rgba(47,191,113,.22);
}

.btn--primary:active{ transform: scale(.97); }

@media (hover:hover){
  .btn--primary:hover{ transform: translateY(-1px); }
}

.btn--ghost{
  background: #fff;
  border: 1px solid var(--stroke);
  color: var(--txt);
  text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-sm);
}

.btn--ghost:active{ transform: scale(.98); }

/* Download box */
.downloadBox{
  margin-top: 12px;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: #fff;
  padding: 14px;
  box-shadow: var(--shadow-sm);
}

.downloadBox__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.downloadBox__title{ font-size: 13px; font-weight: 900; color: var(--txt); }
.downloadBox__desc{ font-size: 12px; color: var(--muted); line-height: 1.8; margin-top: 4px; }

.divider{
  height:1px;
  background: rgba(31,45,43,.10);
  margin: 12px 0;
}

/* Impact text */
.impact{
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--txt);
  line-height: 2;
}

.money{
  display:inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid rgba(47,191,113,.35);
  background: rgba(47,191,113,.12);
  font-weight: 900;
  color: var(--brand);
}

/* File picker */
.filePick{
  display:flex; align-items:center; gap:10px;
  padding: 12px;
  border-radius: 16px;
  border: 1px dashed rgba(31,45,43,.22);
  background: #fff;
  margin-top: 10px;
  cursor:pointer;
}

.filePick input{ display:none; }

.filePick__btn{
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(47,191,113,.10);
  border:1px solid rgba(47,191,113,.22);
  font-size: 12px;
  font-weight: 900;
  color: var(--brand);
}

.filePick__name{
  font-size: 12px;
  color: var(--txt);
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fileMeta{
  display:grid; gap:6px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--txt);
}
.fileMeta .k{ color: var(--muted); }
.fileMeta .v{ font-weight: 800; }

/* Footer */
.footer{
  width:min(1100px, 100%);
  margin-top: 14px;
  color: var(--muted);
  font-size: 12px;
  display:flex; justify-content:center; gap: 10px; flex-wrap:wrap;
}
.footer__sep{ opacity:.5; }

/* Loading overlay (لایت و بانکی) */
.overlay{
  position: fixed;
  inset: 0;
  display:none;
  place-items:center;
  background: rgba(20, 30, 28, .22);
  backdrop-filter: blur(8px);
  z-index: 50;
}
.overlay.show{ display:grid; }

.overlay__card{
  width: min(460px, calc(100% - 36px));
  border-radius: 22px;
  border: 1px solid var(--stroke);
  background: #fff;
  box-shadow: var(--shadow);
  padding: 16px;
  display:flex;
  align-items:center;
  gap: 14px;
}

.spinner{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 4px solid rgba(31,45,43,.12);
  border-top-color: var(--brand);
  animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.overlay__txt b{ display:block; font-size: 13px; color: var(--txt); }
.overlay__txt p{ margin: 4px 0 0; font-size: 12px; color: var(--muted); line-height: 1.7; }

/* Responsive */
@media (max-width: 980px){
  .grid{ grid-template-columns: 1fr; }
  .hero{ grid-template-columns: 1fr; }
  .pill{ display:none; }
  .step{ width: fit-content; }
}

@media (max-width: 560px){
  .row{ grid-template-columns: 1fr; }
  .brand__logoWrap{ width:78px; height:78px; }
}

/* Hidden helper */
.is-hidden{
  display: none !important;
}