/* ═══════════ BlizzOne Paste ═══════════
 * آرام و مینیمال: یک عنوان، یک ادیتور، یک دکمه. رنگِ برند فقط جایی که معنی دارد.
 * رنگ‌ها از blizzone.ir: بنفش #5b4cf5، سرمه‌ای #241a4d. همه از توکن‌ها، دارک و لایت هر دو درجه‌یک.
 */

:root {
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px;
  --f0: 11px; --f1: 12px; --f2: 13px; --f3: 15px; --f4: 20px;
  --r1: 8px; --r2: 10px; --r3: 14px; --r4: 18px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --mono: "JetBrains Mono", "Cascadia Code", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: "IRANYekan", Tahoma, system-ui, sans-serif;
}

:root, :root[data-theme="light"] {
  color-scheme: light;
  --bg:        #f7f7fb;
  --bg-soft:   #fbfbfe;
  --surface:   #ffffff;
  --raised:    #ffffff;
  --line:      #e6e4f1;
  --line-2:    #d2cfe6;
  --txt:       #262140;
  --txt-2:     #4f4a6d;
  --txt-3:     #6e6a8a;
  --brand:     #5b4cf5;
  --brand-2:   #4b3fd6;
  --brand-hi:  #8a7ef8;
  --brand-soft:#ebe8fe;
  --on-brand:  #ffffff;
  --grad-a:    #5b4cf5;
  --grad-b:    #9583ff;
  --good:      #15925a;
  --good-soft: #e3f5ec;
  --bad:       #d23a55;
  --bad-soft:  #fdebee;
  --hot:       #e0602a;
  --hot-soft:  #fdefe7;
  --gutter:    #b5b1cc;
  --dots:      rgba(38, 33, 64, .06);
  --glow:      rgba(91, 76, 245, .09);
  --shadow:    0 1px 0 rgba(255, 255, 255, .8) inset, 0 1px 2px rgba(38, 33, 64, .04), 0 12px 40px -12px rgba(38, 33, 64, .12);
  --ring:      0 0 0 4px rgba(91, 76, 245, .14);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:        #0d0b1c;
  --bg-soft:   #120f27;
  --surface:   #151230;
  --raised:    #1c1840;
  --line:      #29244d;
  --line-2:    #3a3468;
  --txt:       #ebe9f8;
  --txt-2:     #a9a4c9;
  --txt-3:     #8e89b4;
  --brand:     #7b6ef9;
  --brand-2:   #5b4cf5;
  --brand-hi:  #a196fb;
  --brand-soft:#221d4f;
  --on-brand:  #ffffff;
  --grad-a:    #9d93fb;
  --grad-b:    #5b4cf5;
  --good:      #4fd496;
  --good-soft: #10291f;
  --bad:       #ff7a90;
  --bad-soft:  #2c1422;
  --hot:       #ff9a62;
  --hot-soft:  #2c1b14;
  --gutter:    #48427a;
  --dots:      rgba(235, 233, 248, .05);
  --glow:      rgba(91, 76, 245, .22);
  --shadow:    0 1px 0 rgba(255, 255, 255, .03) inset, 0 20px 50px -20px rgba(0, 0, 0, .6);
  --ring:      0 0 0 4px rgba(123, 110, 249, .22);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--txt);
  font: 400 var(--f3)/1.7 var(--sans);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
.bg {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(var(--dots) 1px, transparent 1px) 0 0 / 24px 24px;
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 90%);
          mask-image: linear-gradient(to bottom, #000 30%, transparent 90%);
}
a { color: var(--brand); text-decoration: none; }
::selection { background: var(--brand); color: var(--on-brand); }
.i { width: 18px; height: 18px; flex: none; }
.mono { font-family: var(--mono); }
.muted { color: var(--txt-3); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .45; flex: none; }

/* ─── هدر ─── */
.top {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  max-width: 980px; margin: 0 auto; padding: var(--s5) var(--s4) 0;
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--txt); }
.brand img { border-radius: 10px; }
.brand-txt { display: flex; align-items: baseline; gap: var(--s2); }
.brand-txt b { font-size: 17px; font-weight: 900; letter-spacing: -.01em; }
.brand-txt small {
  font: 700 10px/1 var(--mono); letter-spacing: .12em; color: var(--brand);
  padding: 4px 6px; border-radius: 5px; background: var(--brand-soft);
}
.top-actions { display: flex; gap: var(--s2); }
[data-theme="dark"] .when-light, [data-theme="light"] .when-dark { display: none; }

.wrap { flex: 1; width: 100%; max-width: 980px; margin: 0 auto; padding: var(--s8) var(--s4) var(--s7); }

.foot {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s2) var(--s3);
  padding: var(--s5) var(--s4) var(--s6); color: var(--txt-3); font-size: var(--f1);
}
.foot a { color: inherit; font-weight: 600; }
.foot a:hover { color: var(--brand); }

/* ─── دکمه ─── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  height: 42px; padding: 0 18px; border-radius: var(--r2);
  border: 1px solid transparent; background: none; color: var(--txt);
  font: 700 var(--f2) var(--sans); cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s, box-shadow .2s, transform .1s, opacity .15s;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn .i { width: 17px; height: 17px; }
.btn.primary {
  background: var(--brand); color: var(--on-brand);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 8px 22px -10px var(--brand);
}
.btn.primary:hover { background: var(--brand-2); }
.btn.primary:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; background: var(--brand); }
.btn.ghost { border-color: var(--line); background: var(--surface); color: var(--txt-2); }
.btn.ghost:hover { border-color: var(--line-2); color: var(--txt); background: var(--raised); }
.btn.sm { height: 36px; padding: 0 var(--s3); font-size: var(--f1); }
.btn.lg { height: 48px; padding: 0 var(--s5); font-size: var(--f3); }
.btn.icon-only { width: 42px; padding: 0; }
.btn.sm.icon-only { width: 36px; }
.btn.done, .btn.done:hover { background: var(--good); border-color: var(--good); color: #fff; box-shadow: none; }
.btn[aria-pressed="true"] { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }

/* ─── هیرو ─── */
.hero { text-align: center; margin-bottom: var(--s6); }
/* پیلِ انگلیسی بالای تیتر، مثل سایت مرجع: مونو، حروف باز، قاب نازک */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 18px; border-radius: 999px;
  border: 1px solid var(--line); background: color-mix(in srgb, var(--raised) 75%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 1px 2px rgba(38, 33, 64, .04);
  color: var(--txt-3); font: 600 11.5px/1 var(--mono); letter-spacing: .24em; text-transform: uppercase;
}
.eyebrow i { font-style: normal; letter-spacing: 0; opacity: .55; }
h1 { margin: 0; font-weight: 900; }

/* تیتر: دو خط، بدون خط تیره. فاصله‌ی حروف صفر، چون منفی‌اش اتصال حروف فارسی را می‌شکند */
.title {
  display: flex; flex-direction: column; align-items: center;
  margin: 26px 0 20px; font-size: clamp(42px, 7.2vw, 74px); line-height: 1.18; letter-spacing: 0;
}
.t1 { color: var(--txt); font-weight: 800; }
.t2 { position: relative; display: inline-block; padding: 0 .08em .14em; font-weight: 900; }
.grad { -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 8px 22px rgba(91, 76, 245, .22)); }
/* خطِ دست‌کشیده‌ی زیر «لینک بگیر» که بعد از ورود تیتر کشیده می‌شود */
.swoosh { position: absolute; left: 3%; bottom: 0; width: 94%; height: .26em; overflow: visible; }
.swoosh path { fill: none; stroke: var(--brand); stroke-width: 5; stroke-linecap: round; opacity: .3; stroke-dasharray: 1; stroke-dashoffset: 1; }
.ready .swoosh path { animation: draw .9s var(--ease) .8s forwards; }
.settled .swoosh path { stroke-dashoffset: 0; }

.lead { margin: 0 auto; max-width: 520px; color: var(--txt-2); font-size: 17px; line-height: 1.8; text-wrap: balance; }
/* سه ویژگی، هر کدام یک تکه‌ی نشکن؛ اگر جا نشد کلِ تکه می‌رود خط بعد نه نصفش */
.facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 14px 0 0; padding: 0; list-style: none; color: var(--txt-3); font-size: var(--f2); font-weight: 600; }
.facts li { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.facts li::before { content: ""; width: 14px; height: 14px; flex: none; background: var(--good); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / contain no-repeat; }

/* ─── ادیتور ───
 * یک کارت: متن بالا، نوار پایینِ کارت با شمارنده (راست) و دکمه‌ی اصلی (چپ).
 * متن مثل سایت مرجع می‌شکند: یک خطِ ۳۰ هزار کاراکتری نباید اسکرول افقی بسازد.
 */
.editor {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r4);
  box-shadow: var(--shadow);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.editor:hover { border-color: var(--line-2); }
.editor:focus-within { border-color: color-mix(in srgb, var(--brand) 55%, var(--line)); box-shadow: var(--shadow), var(--ring); }

#text {
  display: block; width: 100%; height: 52vh; min-height: 320px; resize: vertical;
  padding: 22px 24px; border: 0; outline: none; background: none; color: var(--txt);
  font: 400 14px/1.8 var(--mono); tab-size: 4;
  /* لاگ و JSON فاصله ندارند؛ بدون break-all نیمی از هر خط خالی می‌ماند */
  white-space: pre-wrap; word-break: break-all;
  overflow-x: hidden; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--line-2) transparent;
}
#text::placeholder { color: var(--txt-3); font: 400 16px/1.8 var(--sans); }
/* dir=auto وقتی خالی است چپ‌چین می‌شود و متن فارسیِ placeholder به‌هم می‌ریزد */
#text:placeholder-shown { direction: rtl; text-align: right; unicode-bidi: normal; }

.ed-foot {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: 10px 10px 10px var(--s4); padding-inline-start: var(--s5);
  border-top: 1px solid var(--line); background: var(--bg-soft);
}
.meter { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.counter {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
  color: var(--txt-3); font-size: var(--f1); font-weight: 600; font-variant-numeric: tabular-nums;
  transition: color .2s;
}
.counter .of { opacity: .8; }
.counter.over { color: var(--bad); }
.bar { width: 160px; max-width: 100%; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--brand); transition: width .25s var(--ease), background .2s; }
.bar i.warn { background: var(--hot); }
.bar i.over { background: var(--bad); }

.actions { display: flex; align-items: center; gap: var(--s2); flex: none; }
.actions .btn.primary { height: 44px; padding: 0 22px; font-size: var(--f3); }
.kbd-hint { display: inline-flex; align-items: center; gap: 4px; color: var(--txt-3); font: 500 var(--f0) var(--mono); direction: ltr; margin-inline-end: 4px; }
.kbd-hint kbd { padding: 2px 6px; border-radius: 5px; border: 1px solid var(--line-2); border-bottom-width: 2px; background: var(--raised); font: inherit; }
.btn.text { height: 44px; padding: 0 12px; color: var(--txt-3); font-weight: 600; }
.btn.text:hover { color: var(--bad); background: var(--bad-soft); }

.err {
  display: flex; align-items: center; gap: var(--s2);
  margin-top: var(--s3); padding: 12px var(--s4); border-radius: var(--r2);
  background: var(--bad-soft); color: var(--bad); font-size: var(--f2); font-weight: 600;
}

.quota { margin: var(--s4) 0 0; text-align: center; color: var(--txt-3); font-size: var(--f1); }
.quota b { color: var(--txt-2); font-weight: 700; }

/* ─── کارت ─── */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r4); box-shadow: var(--shadow); }

/* ─── نتیجه ─── */
.result { padding: var(--s6); text-align: center; }
.res-head { display: flex; flex-direction: column; align-items: center; gap: var(--s3); margin-bottom: var(--s5); }
.res-head h2 { margin: 0; font-size: var(--f4); font-weight: 900; }
.res-head p { margin: 2px 0 0; color: var(--txt-2); font-size: var(--f2); }
.ok { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--good-soft); color: var(--good); }
.ok .i { width: 26px; height: 26px; stroke-width: 2.4; }
.url-row { display: flex; gap: var(--s2); max-width: 560px; margin: 0 auto; }
.url-row input {
  flex: 1; min-width: 0; height: 48px; padding: 0 var(--s4); border-radius: var(--r2);
  border: 1px solid var(--line-2); background: var(--raised); color: var(--txt);
  font: 600 var(--f3) var(--mono); outline: none; text-align: center;
}
.url-row input:focus { border-color: var(--brand); box-shadow: var(--ring); }
.url-row .btn { height: 48px; }
/* دکمه‌ی اصلیِ کارت نتیجه: رنگ تلگرام تا کاربر بی‌فکر بشناسدش */
.btn.tg {
  display: flex; width: 100%; max-width: 560px; margin: var(--s3) auto 0; height: 50px;
  background: #229ed9; color: #fff; font-size: var(--f3);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset, 0 10px 24px -12px #229ed9;
}
.btn.tg:hover { background: #1c8cc2; transform: translateY(-1px); }
.btn.tg .i { width: 19px; height: 19px; }
.result.entering .btn.tg { animation: rise .55s var(--ease) .3s both; }
.res-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); margin-top: var(--s4); }

/* ─── نمایش پیست ─── */
.wrap:has(.viewer) { padding-top: var(--s7); }
.v-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s4); }
.v-title { min-width: 0; flex: 1 1 300px; }
.v-title h1 { font-size: clamp(22px, 3.4vw, 30px); line-height: 1.35; letter-spacing: -.015em; margin-bottom: 6px; overflow-wrap: anywhere; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--txt-3); font-size: var(--f1); }
.meta.center { justify-content: center; }
.meta .mono { font-size: var(--f0); }
.meta .hot { display: inline-flex; align-items: center; gap: 4px; color: var(--hot); font-weight: 700; }
.meta .hot .i { width: 14px; height: 14px; }
.v-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.notice {
  display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3); padding: 10px var(--s4);
  border-radius: var(--r2); background: var(--hot-soft); color: var(--hot); font-size: var(--f2); font-weight: 600;
}

.code-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r4); box-shadow: var(--shadow); overflow: hidden; }
.code {
  counter-reset: ln; max-height: 74vh; overflow: auto; padding: 14px 0;
  text-align: left; font: 400 13.5px/1.75 var(--mono); tab-size: 4;
}
.code:focus-visible { outline: none; box-shadow: inset var(--ring); }
.code .l { counter-increment: ln; position: relative; min-height: 1.75em; padding: 0 22px 0 calc(var(--gw, 5ch) + 30px); white-space: pre; width: max-content; min-width: 100%; }
.code .l::before {
  content: counter(ln); position: absolute; left: 10px; top: 0; width: var(--gw, 5ch);
  text-align: right; color: var(--gutter); user-select: none; -webkit-user-select: none;
}
.code .l:hover { background: color-mix(in srgb, var(--brand-soft) 60%, transparent); }
.code .l:hover::before { color: var(--brand); }
.code.wrapped .l { white-space: pre-wrap; word-break: break-all; width: auto; }
.code .plain { margin: 0; padding: 0 22px; white-space: pre; font: inherit; }
.code.wrapped .plain { white-space: pre-wrap; word-break: break-all; }

/* ─── یک‌بار مصرف / ۴۰۴ ─── */
.gate { max-width: 480px; margin: 0 auto; padding: var(--s7) var(--s6); text-align: center; }
.gate h1 { font-size: 24px; margin: var(--s4) 0 var(--s2); }
.gate p { color: var(--txt-2); font-size: var(--f2); margin: 0 0 var(--s4); }
.gate .meta { margin-bottom: var(--s5); }
.gate-ico { display: inline-grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--hot-soft); color: var(--hot); }
.gate-ico .i { width: 28px; height: 28px; }
.gate-ico.muted-ico { background: var(--brand-soft); color: var(--brand); }

/* پنل مدیریت */
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--raised); border: 1px solid var(--line); color: var(--txt-2); font-size: var(--f1); }
.viewer.card .v-head { margin: 0; padding: var(--s5); border-bottom: 1px solid var(--line); }

/* ─── تُست ─── */
.toast {
  position: fixed; left: 50%; bottom: var(--s5); transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  padding: 10px 20px; border-radius: 999px; background: var(--txt); color: var(--bg);
  font-size: var(--f2); font-weight: 700; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .4);
  transition: opacity .2s, transform .25s var(--ease);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ─── موبایل ─── */
@media (max-width: 720px) {
  .top { padding-top: var(--s4); }
  .top-actions .lbl { display: none; }
  .top-actions .btn.sm { width: 36px; padding: 0; }
  .wrap { padding-top: var(--s7); }
  .hero { margin-bottom: var(--s5); }
  .kbd-hint { display: none; }
  .ed-foot { flex-direction: column; align-items: stretch; gap: var(--s3); padding: var(--s3); }
  .meter { flex-direction: row; align-items: center; justify-content: space-between; }
  .bar { width: 80px; }
  .actions .btn.primary { flex: 1; height: 50px; }
  /* زیر ۱۶ پیکسل، iOS موقع فوکوس صفحه را زوم می‌کند */
  #text { height: 46vh; min-height: 260px; padding: 16px; font-size: 16px; line-height: 1.7; }
  .result { padding: var(--s5) var(--s4); }
  .url-row { flex-direction: column; }
  .v-actions { width: 100%; }
  .v-actions { flex-wrap: nowrap; }
  .v-actions .btn:not(.icon-only) { flex: 1; }
  .v-actions #copyLink { flex: none; width: 42px; padding: 0; }
  .v-actions #copyLink span { display: none; }
  .code { font-size: 12px; }
  .code .l { padding-right: 14px; padding-left: calc(var(--gw, 5ch) + 20px); }
  .code .l::before { left: 6px; }
  .gate { padding: var(--s6) var(--s4); }
}

/* ═══════════ انیمیشن‌ها ═══════════
 * ساده و آرام: همه با یک منحنی (--ease)، هیچ‌کدام بیشتر از ۷۰۰ میلی‌ثانیه، و همه
 * فقط transform/opacity/filter تا روی گوشی ضعیف هم روان بماند.
 */

/* ورود صفحه: پشت سر هم، از بالا به پایین. فقط وقتی JS هست پنهان می‌شوند. */
.js .rise { opacity: 0; }
.ready .rise { animation: rise .7s var(--ease) both; animation-delay: calc(var(--d, 0) * 80ms + 60ms); }
.settled .rise { animation: none; opacity: 1; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }

/* هاله‌ی بنفشِ پس‌زمینه آرام شناور است */
.bg::before {
  content: ""; position: absolute; left: 50%; top: -340px; width: 720px; height: 620px; margin-left: -360px;
  border-radius: 50%; background: radial-gradient(closest-side, var(--glow), transparent);
  animation: drift 16s ease-in-out infinite alternate;
}
@keyframes drift { 0% { transform: translate(-90px, 0) scale(1); } 100% { transform: translate(90px, 50px) scale(1.15); } }

/* درخشش آرام روی «لینک بگیر» */
.grad {
  background-image: linear-gradient(100deg, var(--grad-a) 0%, var(--grad-b) 45%, var(--grad-a) 90%);
  background-size: 220% auto;
  animation: shimmer 7s ease-in-out infinite alternate;
}
@keyframes shimmer { from { background-position: 0% center; } to { background-position: 100% center; } }

/* دکمه‌ی اصلی: کمی بالا می‌آید و یک برق از رویش رد می‌شود */
.btn.primary { position: relative; overflow: hidden; isolation: isolate; }
.btn.primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .3) 50%, transparent 70%);
  transform: translateX(-130%);
}
.btn.primary:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 14px 30px -12px var(--brand); }
.btn.primary:not(:disabled):hover::after { transform: translateX(130%); transition: transform .8s var(--ease); }
.btn.primary:not(:disabled):active { transform: translateY(0) scale(.98); }
.btn.ghost:hover { transform: translateY(-1px); }

/* حالت «در حال ساخت» */
.spinner { display: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: spin .7s linear infinite; }
.btn.loading .spinner { display: block; }
.btn.loading .i { display: none; }
.btn.loading:disabled { opacity: .9; cursor: progress; }
@keyframes spin { to { transform: rotate(360deg); } }

/* شمارنده با هر تغییر یک تپش کوچک دارد */
.counter.active { color: var(--txt-2); }

/* خطا: ادیتور یک لرزش کوتاه، پیام از پایین */
.paste.shake { animation: shake .42s var(--ease); }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.err:not([hidden]) { animation: rise .35s var(--ease) both; }

/* جابه‌جایی ادیتور ↔ کارت نتیجه */
.leaving { animation: leave .22s var(--ease) both; pointer-events: none; }
@keyframes leave { to { opacity: 0; transform: translateY(-10px) scale(.985); filter: blur(4px); } }
.entering { animation: enter .55s var(--ease) both; }
@keyframes enter { from { opacity: 0; transform: translateY(14px) scale(.98); filter: blur(5px); } }
/* برگشت به ادیتور: فقط همان محو شدنِ فرم، نه دوباره کل ورود پله‌ای */
.paste.entering .rise { animation: none; opacity: 1; }

/* کارت نتیجه: تیک کشیده می‌شود، یک موج دورش، بعد بقیه پشت سر هم */
.ok { position: relative; }
.ok::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--good); opacity: 0; }
.result.entering .ok { animation: pop .55s cubic-bezier(.3, 1.5, .5, 1) .08s both; }
.result.entering .ok::after { animation: ripple .9s var(--ease) .35s both; }
.result.entering .ok path { stroke-dasharray: 22; stroke-dashoffset: 22; animation: draw .4s var(--ease) .35s forwards; }
.result.entering .res-head > div, .result.entering .url-row, .result.entering .res-actions { animation: rise .55s var(--ease) both; }
.result.entering .res-head > div { animation-delay: .18s; }
.result.entering .url-row { animation-delay: .26s; }
.result.entering .res-actions { animation-delay: .34s; }
@keyframes pop { from { transform: scale(.3); opacity: 0; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes ripple { from { transform: scale(1); opacity: .55; } to { transform: scale(1.9); opacity: 0; } }

/* کپی موفق: آیکون یک پرش کوچک */
.btn.done .i { animation: pop .4s cubic-bezier(.3, 1.6, .5, 1); }

/* تم: رنگ‌ها نرم عوض می‌شوند و آیکون می‌چرخد */
.theme-anim, .theme-anim *, .theme-anim *::before, .theme-anim *::after {
  transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease) !important;
}
#themeBtn .i { transition: transform .5s var(--ease); }
#themeBtn:hover .i { transform: rotate(30deg); }
.theme-anim #themeBtn .i { animation: turn .5s var(--ease); }
@keyframes turn { from { transform: rotate(-120deg) scale(.4); opacity: 0; } }

/* تُست کمی فنری */
.toast { transform: translate(-50%, 16px) scale(.96); }
.toast.show { transform: translate(-50%, 0) scale(1); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .rise { opacity: 1; }
}