/* Zibato UI kit — کامپوننت‌ها و نمودارها. همهٔ رنگ‌ها از توکن‌های سایت (--rose = شخصیت، --text، --surface، --border).
   بعد از zb-ds.css لود می‌شود. الهام: beUI. حرکت < 300ms؛ reduced-motion فقط opacity. */
:root{
    --zb-accent:var(--rose);
    --zb-ok:oklch(58% .15 155);--zb-warn:oklch(70% .15 75);--zb-bad:oklch(56% .2 25);
    --zb-glide:cubic-bezier(.34,1.25,.5,1);
}
html.zb-lock{overflow:hidden}
.num{font-variant-numeric:tabular-nums}
kbd{border:1px solid var(--border-strong,var(--border));border-bottom-width:2px;border-radius:6px;padding:0 6px;font:11.5px ui-monospace,monospace;color:var(--muted);direction:ltr;display:inline-block;background:transparent}

/* ورود آرام — فقط وقتی JS فعال است، تا بدونِ JS هرچه هست دیده شود */
.zb-js [data-zb-in]{opacity:0;transform:translateY(10px);filter:blur(5px);
    transition:opacity .28s var(--zb-ease-out),transform .28s var(--zb-ease-out),filter .28s var(--zb-ease-out)}
.zb-js [data-zb-in].zb-in{opacity:1;transform:none;filter:none}

/* ═══ ضربانِ زنده ═══ */
.zb-live{position:relative;display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-2)}
.zb-live::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--zb-ok);box-shadow:0 0 0 0 color-mix(in srgb,var(--zb-ok) 55%,transparent);animation:zbLive 2s infinite}
@keyframes zbLive{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--zb-ok) 50%,transparent)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
.zb-flash{animation:zbFlash 1.2s var(--zb-ease-out)}
@keyframes zbFlash{0%{background:color-mix(in srgb,var(--zb-accent) 18%,transparent)}100%{background:transparent}}

/* ═══ اعلان ═══ */
.zbn-stack{position:fixed;z-index:1200;inset-inline:0;bottom:calc(84px + env(safe-area-inset-bottom,0px));margin-inline:auto;width:min(380px,calc(100vw - 32px));display:flex;flex-direction:column-reverse;gap:8px;pointer-events:none}
@media (min-width:900px){.zbn-stack{bottom:24px}}
.zbn{pointer-events:auto;display:flex;gap:12px;align-items:center;background:color-mix(in srgb,var(--surface) 96%,transparent);
    border:1px solid var(--border-strong,var(--border));border-radius:16px;padding:12px 14px;
    box-shadow:0 0 0 1px color-mix(in srgb,#000 4%,transparent),0 14px 34px rgba(0,0,0,.14);
    -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
    animation:zbnIn .42s var(--zb-ease-out);transition:transform .35s var(--zb-ease-out),opacity .3s,filter .3s;touch-action:pan-y}
.zbn.out{opacity:0;transform:translateX(-32px);filter:blur(4px)}
@keyframes zbnIn{from{opacity:0;transform:translateY(22px) scale(.96);filter:blur(10px)}}
.zbn-i{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;background:color-mix(in srgb,var(--zb-ok) 14%,transparent);color:var(--zb-ok)}
.zbn--err .zbn-i{background:color-mix(in srgb,var(--zb-bad) 14%,transparent);color:var(--zb-bad)}
.zbn--warn .zbn-i{background:color-mix(in srgb,var(--zb-warn) 18%,transparent);color:oklch(48% .12 75)}
.zbn--info .zbn-i{background:var(--zb-accent-soft,color-mix(in srgb,var(--zb-accent) 9%,transparent));color:var(--zb-accent)}
.zbn-t b{font-weight:500;display:block;font-size:14px;color:var(--text)}
.zbn-t small{display:block;color:var(--muted);font-size:12px}

/* ═══ شیتِ پایین ═══ */
.zbs-scrim{position:fixed;inset:0;z-index:1300;background:color-mix(in srgb,var(--bg) 45%,transparent);-webkit-backdrop-filter:blur(8px) saturate(1.4);backdrop-filter:blur(8px) saturate(1.4);
    opacity:0;pointer-events:none;transition:opacity .2s var(--zb-ease-out)}
.zbs-scrim.on{opacity:1;pointer-events:auto}
.zbs{position:fixed;z-index:1301;inset-inline:0;bottom:0;margin-inline:auto;width:min(560px,100%);max-height:92vh;overflow:auto;
    background:var(--surface);border:1px solid var(--border-strong,var(--border));border-bottom:0;border-radius:26px 26px 0 0;
    box-shadow:0 -20px 60px rgba(0,0,0,.2);transform:translateY(105%);visibility:hidden;transition:transform .5s cubic-bezier(.32,.72,0,1),visibility 0s .5s;
    padding:8px 20px calc(24px + env(safe-area-inset-bottom,0px));overscroll-behavior:contain}
.zbs.on{transform:translateY(var(--dy,0px));visibility:visible;transition:transform .5s cubic-bezier(.32,.72,0,1),visibility 0s}.zbs.drag{transition:none}
.zbs-h{width:40px;height:6px;border-radius:99px;background:var(--border-strong,var(--border));margin:4px auto 14px;cursor:grab;touch-action:none}

/* ═══ پنل فرمان ═══ */
.zbp-scrim{z-index:1400}
.zbp{position:fixed;z-index:1401;top:16vh;inset-inline:0;margin-inline:auto;width:min(580px,calc(100vw - 32px));background:var(--surface);
    border:1px solid var(--border-strong,var(--border));border-radius:20px;box-shadow:0 30px 70px rgba(0,0,0,.25);
    opacity:0;transform:scale(.96) translateY(-6px);pointer-events:none;transition:opacity .16s var(--zb-ease-out),transform .2s var(--zb-ease-out)}
.zbp.on{opacity:1;transform:none;pointer-events:auto}
.zbp-in{width:100%;border:0;border-bottom:1px solid var(--border);background:transparent;color:var(--text);padding:16px 18px;font:inherit;font-size:16px;outline:0;border-radius:20px 20px 0 0}
.zbp-list{max-height:min(340px,46vh);overflow:auto;padding:8px;position:relative}
.zbp-g{font-size:11.5px;color:var(--muted);padding:8px 10px 4px}
.zbp-r{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;padding:9px 12px;border-radius:12px;cursor:pointer;font-size:14px}
.zbp-hi{position:absolute;inset-inline:8px;top:0;border-radius:12px;background:var(--surface-2);transition:transform .22s var(--zb-ease-out),height .22s var(--zb-ease-out);z-index:0}
.zbp-f{display:flex;gap:14px;padding:9px 16px;border-top:1px solid var(--border);font-size:12px;color:var(--muted)}

/* ═══ tooltip نمودارها ═══ */
.zbt{position:fixed;z-index:1500;pointer-events:none;background:var(--surface);border:1px solid var(--border-strong,var(--border));border-radius:12px;padding:8px 12px;font-size:12.5px;color:var(--text);
    box-shadow:0 8px 28px rgba(0,0,0,.14);opacity:0;transform:scale(.94);transition:opacity .18s var(--zb-ease-out),transform .18s var(--zb-ease-out);min-width:130px}
.zbt.on{opacity:1;transform:none}
.zbt b{font-weight:500}.zbt i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-inline-end:6px}
.zbt .r{display:flex;justify-content:space-between;gap:16px}.zbt .tot{margin-top:4px;padding-top:4px;border-top:1px solid var(--border)}.zbt .sub{color:var(--muted)}

/* ═══ نمودارها ═══ */
.zb-legend{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.zb-lg{border:0;background:transparent;border-radius:8px;padding:4px 10px;font-size:12.5px;display:inline-flex;align-items:center;gap:6px;color:var(--text-2);transition:background .18s,opacity .18s}
.zb-lg.pin{background:var(--surface-2)}.zb-lg i{width:9px;height:9px;border-radius:3px;background:var(--c)}
.zb-bars{display:flex;align-items:flex-end;gap:clamp(6px,2vw,14px);height:200px;border-bottom:1px solid var(--border);position:relative;padding-inline:4px}
.zb-gl{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(to top,transparent 0 calc(25% - 1px),var(--border) calc(25% - 1px) 25%)}
.zb-col{flex:1;height:100%;display:flex;flex-direction:column-reverse;position:relative}
.zb-seg{width:100%;background:var(--c);opacity:.9;transition:height .7s var(--zb-ease-out),opacity .3s var(--zb-ease-out)}
.zb-bars.dim .zb-seg{opacity:.16}.zb-bars.dim .zb-seg.hl{opacity:.95}
.zb-xl{display:flex;gap:clamp(6px,2vw,14px);padding-inline:4px;margin-top:6px;font-size:12px;color:var(--muted)}.zb-xl span{flex:1;text-align:center}
.zb-spark{width:100%;height:36px;display:block}
.zb-donut{position:relative;width:132px;height:132px;margin-inline:auto}.zb-donut svg{width:100%;height:100%}
.zb-arc{transition:opacity .25s}
.zb-donut-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.zb-donut-c b{font-size:22px;font-weight:500;line-height:1.1}.zb-donut-c span{font-size:11.5px;color:var(--muted)}
.zb-ring{width:84px;height:84px;display:block}.zb-ring-v{position:absolute;inset:0;display:grid;place-items:center;font-weight:500}
[data-zb-ringbox]{position:relative;width:84px;height:84px}
.zb-funnel svg{width:100%;height:auto;display:block}
.zb-fst{cursor:pointer;transition:opacity .3s var(--zb-ease-out),transform .3s var(--zb-ease-out)}
.zb-funnel.dim .zb-fst{opacity:.35!important}.zb-funnel.dim .zb-fst.hl{opacity:1!important}
.zb-flab{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:8px;margin-top:10px;font-size:12.5px}
.zb-flab div{border-top:2px solid var(--c);padding-top:6px;display:flex;flex-direction:column}.zb-flab b{font-size:18px;font-weight:500}.zb-flab em{font-style:normal;color:var(--muted)}
.zb-heat-months{display:grid;direction:ltr;gap:4px;font-size:11px;color:var(--muted);margin-bottom:4px;overflow:visible;white-space:nowrap}
.zb-heat{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,16px);gap:4px;direction:ltr;overflow-x:auto;padding-bottom:6px}
.zb-cell{width:16px;height:16px;border-radius:4px;border:0;padding:0;background:color-mix(in srgb,var(--text) 6%,transparent);
    transform:scale(.4);opacity:0;animation:zbCell .5s var(--zb-ease-out) forwards;animation-delay:calc(var(--d)*18ms)}
@keyframes zbCell{to{transform:none;opacity:1}}
.zb-cell.pin{box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px var(--text)}
.zb-cell.inr{box-shadow:0 0 0 1.5px color-mix(in srgb,var(--text) 55%,transparent)}
.zb-cell.off{opacity:.15!important}
.zb-heat-lg{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--muted);margin-top:8px}
.zb-heat-steps{display:inline-flex;gap:4px}.zb-hstep{width:16px;height:16px;border-radius:4px;border:0;padding:0}
.zb-bump svg{width:100%;height:auto;display:block;overflow:visible}
.zb-bl{transition:opacity .25s}.zb-axt{font-size:11px;fill:var(--muted)}.zb-bt{font-size:12px;font-weight:500}
/* تقویم ماهانه */
.zb-cal-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.zb-cal-g{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.zb-cal-g .dn{font-size:clamp(8.5px,1.1vw,11.5px);color:var(--muted);text-align:center;padding:4px 0;white-space:nowrap;overflow:hidden;text-overflow:clip;letter-spacing:-.2px}
.zb-day{aspect-ratio:1;border:1px solid transparent;border-radius:12px;background:color-mix(in srgb,var(--zb-accent) var(--dens,0%),transparent);color:var(--text);
    font-size:13px;display:grid;place-items:center;position:relative;transition:transform .14s var(--zb-ease-out),border-color .18s;
    animation:zbCell .4s var(--zb-ease-out) backwards;animation-delay:calc(var(--i,0)*10ms)}
.zb-day:hover{border-color:var(--border-strong,var(--border))}.zb-day:active{transform:scale(.94)}
.zb-day.past{opacity:.4}.zb-day.today{border-color:var(--zb-accent);font-weight:600}
.zb-day.sel{background:var(--zb-accent-solid,var(--zb-accent));color:#fff;border-color:transparent}
.zb-day.has::after{content:"";position:absolute;bottom:5px;width:4px;height:4px;border-radius:50%;background:var(--zb-accent);opacity:.7}
.zb-day.sel.has::after{background:#fff}
.zb-ico{width:34px;height:34px;border-radius:10px;border:0;background:transparent;color:var(--muted);display:inline-grid;place-items:center;font-size:18px;transition:background .18s,transform .14s}
.zb-ico:hover{background:var(--surface-2);color:var(--text)}.zb-ico:active{transform:scale(.86)}

/* ═══ کارتِ کج ═══ */
[data-zb-tilt]{transform-style:preserve-3d;transition:transform .5s var(--zb-ease-out);position:relative;overflow:hidden}
.zb-glare{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),var(--text),transparent 50%);mix-blend-mode:soft-light}
[data-zb-tilt]:hover .zb-glare{opacity:.16}

/* ═══ دُکِ موبایل ═══ */
.zbd{position:fixed;z-index:1100;inset-inline:0;bottom:calc(12px + env(safe-area-inset-bottom,0px));margin-inline:auto;width:max-content;max-width:calc(100vw - 24px);
    display:none;gap:2px;padding:6px;border-radius:24px;background:color-mix(in srgb,var(--surface) 82%,transparent);border:1px solid var(--border);
    -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 10px 30px rgba(0,0,0,.14)}
@media (max-width:899.98px){.zbd{display:flex}body{padding-bottom:calc(86px + env(safe-area-inset-bottom,0px))}}
.zbd-i{position:relative;z-index:1;width:58px;height:50px;border:0;background:none;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    color:var(--muted);text-decoration:none;font-size:10.5px;transition:color .2s}
.zbd-i svg{width:22px;height:22px}
.zbd-i[aria-current="page"]{color:var(--zb-accent)}
.zbd-pill{position:absolute;top:6px;bottom:6px;left:0;border-radius:18px;background:var(--zb-accent-soft,color-mix(in srgb,var(--zb-accent) 9%,transparent));transition:transform .46s var(--zb-glide),width .46s var(--zb-glide),opacity .2s;z-index:0}
.zbd-i .dotb{position:absolute;top:6px;inset-inline-end:14px;width:8px;height:8px;border-radius:50%;background:var(--zb-accent);box-shadow:0 0 0 2px var(--surface)}

/* دکمهٔ شناورِ دستیار: روی موبایل دُک جایش را می‌گیرد */
@media (max-width:899.98px){.zb-fab{display:none!important}}

@media (prefers-reduced-motion:reduce){
    .zb-js [data-zb-in]{transform:none;filter:none}
    .zb-cell,.zb-day{animation:none;transform:none;opacity:1}
    .zb-live::before{animation:none}
}