/* کارگاه ابزارها: داک تب‌ها، انیمیشن‌ها و اجزای مشترک. رنگ‌ها از توکن‌های style.css */
:root{
  --ok:#1F6B45;--ok-bg:#DDEBDD;--warn:#7D5200;--warn-bg:#F4E3BC;--err:#9E2A2A;--err-bg:#F3D5D1;--inf:#0F43C9;--inf-bg:#E3EBFF;
  --field:#FFFFFF;
}
html{scroll-padding-top:4rem}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ناوبری بخش‌ها */
.mini{position:sticky;top:0;z-index:5;background:var(--cream);border-bottom:1px solid var(--line)}
.mini ul{list-style:none;padding:0;margin:0 auto;width:min(100% - 1.5rem,68rem);display:flex;gap:.25rem;overflow-x:auto;scrollbar-width:none}
.mini a{display:block;padding:.55rem .9rem;text-decoration:none;font-weight:700;font-size:.92rem;border-radius:var(--r);white-space:nowrap;transition:background-color .2s}
@media (hover:hover){.mini a:hover{background:#DCE6FF;color:var(--accent-2)}}

/* کارت و داک تب‌ها */
#tools{padding-top:clamp(1.5rem,4vw,2.5rem)}
.wb-card{margin-top:1rem;background:var(--cream);border:1px solid var(--line);border-radius:var(--r-lg);overflow:clip}
.wb-tabs{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:.2rem;padding:.4rem;background:var(--navy)}
@media (min-width:60rem){.wb-tabs{grid-template-columns:repeat(8,1fr)}}
.wb-ink{display:none;position:absolute;top:.4rem;bottom:.4rem;left:0;border-radius:calc(var(--r) - 1px);background:var(--accent);transition:transform .35s cubic-bezier(.3,1.3,.5,1),width .35s ease;pointer-events:none}
.has-ink .wb-ink{display:block}
.wb-tab{position:relative;z-index:1;font:inherit;border:0;background:transparent;color:var(--sand);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;min-height:3.5rem;padding:.35rem .25rem;border-radius:var(--r);font-size:.8rem;font-weight:700;line-height:1.3;transition:color .2s,background-color .2s}
@media (min-width:60rem){.wb-tab{flex-direction:row;gap:.5rem;font-size:.92rem}}
.wb-tab .ic{width:1.35rem;height:1.35rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.wb-tab[aria-selected=true]{background:var(--accent);color:#fff}
.has-ink .wb-tab[aria-selected=true]{background:transparent;color:#fff}
.wb-tab[aria-selected=true] .ic{animation:pop .45s}
@media (hover:hover){.wb-tab[aria-selected=false]:hover{color:var(--cream);background:rgba(248,240,229,.1)}.wb-tab:hover .ic{transform:translateY(-2px) scale(1.12)}}
.wb-tab:focus-visible{outline:3px solid #fff;outline-offset:-3px}
@keyframes pop{0%{transform:scale(.7) rotate(-8deg)}60%{transform:scale(1.2)}100%{transform:none}}

.wb-panels [role=tabpanel]{padding:1rem;display:grid;gap:.9rem;align-content:start;min-height:16rem}
.wb-panels [role=tabpanel][hidden]{display:none}
.wb-panels [role=tabpanel].in{animation:wb-in .4s ease both}
@keyframes wb-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.rise{animation:wb-in .45s ease both;animation-delay:calc(var(--i,0)*45ms)}
.skel{display:grid;gap:.7rem}.skel i{display:block;height:2.4rem;border-radius:var(--r);background:linear-gradient(90deg,var(--sand) 25%,var(--cream) 50%,var(--sand) 75%);background-size:200% 100%;animation:shim 1.2s infinite}
@keyframes shim{to{background-position:-200% 0}}

/* ورودی یکپارچه */
.src{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--field);transition:border-color .2s,box-shadow .2s}
.src:focus-within{border-color:var(--accent)}
.src.is-drag{border-color:var(--accent);border-style:dashed;animation:pulse 1s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(26,86,240,.2)}}
.src-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;padding:.4rem .5rem;border-bottom:1px solid var(--line)}
.src-bar .end{margin-inline-start:auto}
.src-ta,textarea,input[type=text],input[type=search],input[type=url],select{font:inherit;color:var(--navy);width:100%}
.src-ta{border:0;background:transparent;padding:.7rem .9rem;resize:vertical;min-height:6rem;max-height:30rem;line-height:1.6;font-size:.92rem;font-family:ui-monospace,Consolas,monospace;tab-size:2;white-space:pre}
.src-ta:focus{outline:0}
.src-drop{position:absolute;inset:0;display:none;place-items:center;background:rgba(248,240,229,.92);font-weight:700;border-radius:var(--r-lg);pointer-events:none}
.is-drag .src-drop{display:grid}
input[type=text],input[type=search],input[type=url],select{border:1px solid var(--line);background:var(--field);border-radius:var(--r);padding:.5rem .75rem;min-height:2.5rem;transition:border-color .2s}
input:focus,select:focus{outline:0;border-color:var(--accent)}
input[type=checkbox]{width:1.1rem;height:1.1rem;accent-color:var(--accent)}
.fld{display:grid;gap:.3rem;font-size:.9rem;font-weight:700}
.fld>span{color:var(--mute)}
.req{color:var(--err)}
.chk{display:flex;align-items:center;gap:.45rem;font-size:.9rem}
.opts{display:flex;flex-wrap:wrap;gap:.5rem .9rem;align-items:center}
.opts select{width:auto}
.remote{display:flex;gap:.4rem;flex-wrap:wrap}.remote input{flex:1 1 12rem;width:auto}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));gap:.7rem}
.grow{flex:1 1 12rem;width:auto}
.muted{color:var(--mute);font-size:.88rem}
.src-meta{font-size:.8rem}

/* دکمه‌های کوچک */
.btn-s{font:inherit;font-size:.88rem;font-weight:700;border:0;cursor:pointer;border-radius:var(--r);padding:.3rem .8rem;min-height:2.1rem;background:var(--sand);color:var(--navy);transition:transform .15s,background-color .2s,color .2s}
.btn-s.pri{background:var(--accent);color:#fff}
.btn-s.ghost{background:transparent;box-shadow:inset 0 0 0 2px var(--sand)}
@media (hover:hover){.btn-s:hover{transform:scale(1.04);background:#E3EBFF}.btn-s.pri:hover{background:var(--accent-2);color:#fff}}
.btn-s:active{transform:scale(.96)}
.btn-s[hidden]{display:none}
.row-actions,.bar{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.wb-card .chips{margin:0}

/* نتایج */
.res{display:grid;gap:.8rem}
.top{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(6.5rem,1fr));gap:.5rem;flex:1 1 16rem}
.stat{background:var(--sand);border-radius:var(--r);padding:.5rem .7rem;display:grid;gap:.1rem}
.stat span{font-size:.8rem;color:var(--mute)}.stat strong{font-size:1.25rem;line-height:1.3}
.stat[data-tone=error]{background:var(--err-bg);color:var(--err)}.stat[data-tone=warning]{background:var(--warn-bg);color:var(--warn)}.stat[data-tone=ok]{background:var(--ok-bg);color:var(--ok)}.stat[data-tone=info]{background:var(--inf-bg);color:var(--inf)}
.stat[data-tone] span{color:inherit}
.gauge{position:relative;width:7.5rem;height:7.5rem;flex:none}
.gauge svg{width:100%;height:100%}
.g-track{stroke:var(--sand)}.g-ring{transition:stroke-dashoffset 1.1s cubic-bezier(.2,.8,.2,1)}
.gauge[data-tone=ok] .g-ring{stroke:var(--ok)}.gauge[data-tone=warning] .g-ring{stroke:#B7791F}.gauge[data-tone=error] .g-ring{stroke:var(--err)}
.g-num{position:absolute;inset:0;display:grid;place-content:center;text-align:center;line-height:1.2}.g-num strong{font-size:1.7rem}.g-num span{font-size:.72rem;color:var(--mute)}
.badge{display:inline-block;font-size:.76rem;font-weight:700;line-height:1.4;padding:.1rem .55rem;border-radius:6px;background:var(--inf-bg);color:var(--inf);white-space:nowrap}
.badge[data-tone=ok]{background:var(--ok-bg);color:var(--ok)}.badge[data-tone=warning]{background:var(--warn-bg);color:var(--warn)}.badge[data-tone=error]{background:var(--err-bg);color:var(--err)}.badge[data-tone=muted]{background:var(--sand);color:var(--mute)}.badge[data-tone=type]{background:var(--accent);color:#fff}
.tags{display:flex;flex-wrap:wrap;gap:.3rem;align-items:center}.tags.big{gap:.4rem}
.kv{display:inline-flex;gap:.35rem;background:var(--sand);border-radius:var(--r);padding:.1rem .6rem;font-size:.85rem}
.cd{font-family:ui-monospace,Consolas,monospace;font-size:.82rem;background:var(--sand);border-radius:6px;padding:.05rem .4rem;overflow-wrap:anywhere;unicode-bidi:plaintext}
.empty{color:var(--mute);background:var(--sand);border-radius:var(--r);padding:.9rem 1rem;text-align:center}
.note{border-radius:var(--r);padding:.6rem .9rem;background:var(--inf-bg);color:var(--inf);font-size:.92rem}
.note[data-tone=warning]{background:var(--warn-bg);color:var(--warn)}.note[data-tone=error]{background:var(--err-bg);color:var(--err)}

.iss{display:grid;gap:.5rem}
.it{background:var(--field);border:1px solid var(--line);border-inline-start-width:6px;border-radius:var(--r);padding:.6rem .85rem;display:grid;gap:.25rem;font-size:.92rem}
.it[data-level=error]{border-inline-start-color:var(--err)}.it[data-level=warning]{border-inline-start-color:#B7791F}.it[data-level=info]{border-inline-start-color:var(--inf)}.it[data-level=ok]{border-inline-start-color:var(--ok)}
.it p{color:var(--mute)}.it .fix{color:var(--navy)}
.it-h{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.iss-wrap{display:grid;gap:.6rem}

.tbl-wrap{overflow:auto;max-height:26rem;border:1px solid var(--line);border-radius:var(--r);background:var(--field)}
table{border-collapse:collapse;width:100%;font-size:.88rem}
th,td{padding:.45rem .7rem;text-align:start;vertical-align:top;border-bottom:1px solid var(--line)}
th{position:sticky;top:0;background:var(--sand);z-index:1;white-space:nowrap}
tr[data-tone=warning]{background:rgba(244,227,188,.35)}
.tbl-more{display:flex;gap:.6rem;align-items:center;margin-top:.4rem}
.wl{margin:0;padding-inline-start:1rem;color:var(--warn)}

details.dt,details.ent{border:1px solid var(--line);border-radius:var(--r);background:var(--field)}
details>summary{cursor:pointer;padding:.5rem .8rem;font-weight:700;display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
details.dt>*:not(summary),details.ent>*:not(summary){margin:.2rem .8rem .7rem}
details.dt>pre{overflow:auto;max-height:16rem;font-size:.8rem;background:var(--sand);padding:.6rem;border-radius:var(--r)}
.ents{display:grid;gap:.5rem}.fl{list-style:none;padding:0;display:grid;gap:.35rem;font-size:.9rem}.fl li{display:flex;gap:.4rem;flex-wrap:wrap;align-items:baseline}
.grp{border-top:1px solid var(--sand);padding-top:.5rem;margin-top:.5rem}.rule{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-top:.25rem}

.serp{background:#fff;border-radius:var(--r);padding:.8rem 1rem;display:grid;gap:.1rem;border:1px solid var(--line);max-width:40rem}
.serp-u{color:#1E6B4A;font-size:.8rem}.serp-t{color:#1A0DAB;font-size:1.05rem;font-weight:400}.serp-d{color:#4D5156;font-size:.88rem}

.utm-url-wrap{display:flex;gap:.5rem;align-items:stretch;flex-wrap:wrap}
.utm-url{flex:1 1 16rem;background:var(--navy);color:var(--cream);border-radius:var(--r);padding:.7rem .9rem;font-family:ui-monospace,Consolas,monospace;font-size:.86rem;overflow-wrap:anywhere;line-height:1.6}
.utm-out{display:grid;gap:.6rem}

.jstat{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.tree{max-height:24rem;overflow:auto;font-size:.88rem;background:var(--field);border:1px solid var(--line);border-radius:var(--r);padding:.4rem .6rem}
.tree:empty{display:none}.tb{padding-inline-start:1.1rem;border-inline-start:1px dashed var(--tan)}
.trow{display:flex;gap:.5rem;flex-wrap:wrap;padding:.1rem 0}.tk{font-weight:700}
.tv[data-t=string]{color:var(--ok)}.tv[data-t=number]{color:var(--inf)}.tv[data-t=boolean],.tv[data-t=null]{color:var(--warn)}
.tree summary{padding:.1rem 0;font-weight:400}
.outbox{display:grid;gap:.5rem}

.toast{position:fixed;inset-inline:0;bottom:1.2rem;margin-inline:auto;width:fit-content;max-width:90vw;z-index:20;background:var(--navy);color:var(--cream);padding:.55rem 1.1rem;border-radius:var(--r);font-size:.92rem;opacity:0;transform:translateY(1rem);pointer-events:none;transition:opacity .25s,transform .25s}
.toast.on{opacity:1;transform:none}.toast[data-kind=error]{background:var(--err)}.toast[data-kind=ok]{background:var(--ok)}

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