.azot{font-family:inherit}
.azot *{box-sizing:border-box}

/* Card با حاشیه گرادیانی و گِلو */
.azot .azot-card{
  --r: var(--azot-radius,20px);
  position:relative; overflow:hidden; padding:26px; border-radius:var(--r);
  background:#ffffff;
  box-shadow:0 16px 40px rgba(15,23,42,.10);
}
.azot .azot-card::before{
  content:""; position:absolute; inset:-2px; border-radius:calc(var(--r) + 2px);
  background:conic-gradient(from 0deg, var(--azot-primary,#ef2b50), var(--azot-accent,#ff6b86), var(--azot-primary,#ef2b50));
  filter:blur(14px); opacity:.14; z-index:0; animation:azotSpin 6s linear infinite;
}
@keyframes azotSpin{to{transform:rotate(360deg)}}
.azot .azot-card.glass{backdrop-filter:saturate(140%) blur(8px)}
.azot .azot-head{position:relative; z-index:1}
.azot .azot-badge{
  display:inline-flex; align-items:center; justify-content:center;
  height:26px; padding:0 10px; border-radius:999px; font-weight:900; font-size:12px;
  background:color-mix(in srgb, var(--azot-primary,#ef2b50) 16%, #fff); color:var(--azot-primary,#ef2b50);
  box-shadow:0 6px 16px rgba(239,43,80,.25); margin-bottom:6px;
}
.azot .azot-title{margin:0;font-weight:900;font-size:calc(var(--azot-base,16px)*1.6)}
.azot .azot-sub{opacity:.8;margin-top:4px}

/* Input fancy */
.azot .azot-form{margin-top:16px; position:relative}
.azot .azot-input{display:flex; gap:10px}
.azot .azot-input.fancy{
  background:#fff; border-radius:999px; padding:8px; border:1px solid #e8ecf1;
  box-shadow:0 10px 20px rgba(15,23,42,.04) inset;
}
.azot .azot-input .ico{display:grid; place-items:center; width:34px; color:#94a3b8}
.azot .azot-input input{
  flex:1; border:none; outline:none; background:transparent; padding:10px 10px;
  font-size:var(--azot-base,16px);
}
.azot .azot-btn{
  border:none; border-radius:999px; padding:12px 18px; cursor:pointer; font-weight:900; color:#fff;
  background:linear-gradient(135deg,var(--azot-primary,#ef2b50),var(--azot-accent,#ff6b86));
  box-shadow:0 12px 22px rgba(239,43,80,.28); display:inline-flex; align-items:center; gap:8px;
  transition:transform .06s, filter .2s
}
.azot .azot-btn:hover{filter:brightness(1.06)}
.azot .azot-btn:active{transform:translateY(1px)}
.azot .azot-btn .spin{opacity:.0; transition:opacity .3s}

/* Busy overlay – Skeleton */
.azot .azot-busy[hidden]{display:none}
.azot .azot-busy{
  position:absolute; inset:0; background:rgba(255,255,255,.75); backdrop-filter:blur(3px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; border-radius:inherit;
}
.azot .busy-skeleton{width:min(760px,100%); padding:0 8px}
.azot .busy-skeleton > div{
  height:14px; margin:8px 0; border-radius:8px;
  background:linear-gradient(90deg,#eef1f6 25%, #f6f8fb 37%, #eef1f6 63%);
  background-size:400% 100%; animation:azotShimmer 1.4s infinite;
}
.azot .busy-skeleton .s-1{height:18px;width:90%}
.azot .busy-skeleton .s-2{width:75%}
.azot .busy-skeleton .s-3{width:60%}
@keyframes azotShimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
.azot .busy-txt{font-weight:800; color:var(--azot-primary,#ef2b50)}

/* Summary chips */
.azot .azot-result[hidden], .azot .azot-empty[hidden]{display:none}
.azot .azot-summary{margin-top:18px; display:flex; gap:10px; flex-wrap:wrap}
.azot .azot-summary .chip{
  display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px;
  background:color-mix(in srgb, var(--azot-primary,#ef2b50) 10%, #fff);
  border:1px solid #f0f3f7; font-weight:800; color:#0f172a;
}

/* Status pill + icon */
.azot .azot-status{margin-top:12px; display:flex; align-items:center; gap:8px}
.azot .azot-status .pill{
  display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; font-weight:900;
  background:#0b1220; color:#fff; box-shadow:0 10px 24px rgba(11,18,32,.25)
}
.azot .st-ico{opacity:.95}

/* Progress bar (animated stripes) + Steps */
.azot .azot-progress{margin-top:16px}
.azot .azot-progress .bar{
  height:12px; border-radius:999px; background:#f2f5f9; overflow:hidden; position:relative
}
.azot .azot-progress .bar .fill{
  height:100%; width:0%; background:repeating-linear-gradient(45deg,
    color-mix(in srgb, var(--azot-primary,#ef2b50) 88%, transparent) 0 12px,
    color-mix(in srgb, var(--azot-accent,#ff6b86) 85%, transparent) 12px 24px);
  animation:azotStripe 1.4s linear infinite; transition:width .6s ease;
  filter:drop-shadow(0 6px 12px rgba(239,43,80,.25))
}
@keyframes azotStripe{to{background-position:60px 0}}

.azot .azot-progress .steps{display:flex;justify-content:space-between;margin-top:8px}
.azot .azot-progress .steps span{
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#e2e8f0;color:#0f172a;
  transition:transform .2s, background .3s, color .3s; font-weight:900
}
.azot .azot-progress .steps span.active{background:var(--azot-primary,#ef2b50);color:#fff;transform:scale(1.06)}
.azot .azot-progress .steps span.done{
  background:linear-gradient(135deg,var(--azot-primary,#ef2b50),var(--azot-accent,#ff6b86)); color:#fff; position:relative
}
.azot .azot-progress .steps span.done::after{content:'✓';position:absolute;inset:0;display:grid;place-items:center;font-weight:900}

/* Products grid */
.azot .azot-products{margin-top:16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.azot .azot-products .item{
  display:flex;gap:10px;align-items:center;background:#fff;border:1px solid #eef2f6;border-radius:14px;padding:8px;
  transition:transform .15s, box-shadow .2s
}
.azot .azot-products .item:hover{transform:translateY(-3px);box-shadow:0 14px 26px rgba(15,23,42,.12)}
.azot .azot-products .item img{width:58px;height:58px;border-radius:10px;object-fit:cover}

/* Empty */
.azot .azot-empty{
  margin-top:18px;background:#fff7f7;border:1px solid #ffe1e1;color:#c81e1e;padding:12px 14px;border-radius:12px;font-weight:800
}

/* Confetti keyframes (JS تولید span می‌کند) */
@keyframes azotFall{to{transform:translateY(220px) rotate(180deg); opacity:.0}}