/* ═══════════════════════════════════════════════════════════════════════
   زیباتو DS v2 — zb-ds.css                         [۲۰۲۶-۰۹-۲۹ · دستور مالک]
   ═══════════════════════════════════════════════════════════════════════
   «همه‌چیز را از نو طراحی کن؛ از beui.dev استفاده کن.»

   این فایل «آخرِ زنجیره» لود می‌شود و فقط دو کار می‌کند:
     ۱) توکن‌های سطح/متن/مرز را به زبانِ beUI می‌برد — سطوحِ تقریباً خنثی،
        مرزِ مویی (آلفای ۶–۱۲٪)، رنگ فقط به‌عنوانِ لهجهٔ کم‌مصرف.
     ۲) کامپوننت‌های مشترک و حرکتِ فنری/محوشدگی را می‌دهد.

   اصلِ طراحی (از مستنداتِ beUI، `docs/motion-patterns` و `docs/theme`):
     • EASE_OUT     cubic-bezier(.16,1,.3,1)   ← ورود/خروج
     • EASE_IN_OUT  cubic-bezier(.77,0,.175,1) ← حرکتِ روی‌صفحه
     • فشردنِ دکمه: scale(.97) در ۱۰۰–۱۶۰ms
     • ورودِ محتوا: translateY(8px)+blur(4px) → صفر، ۰٫۲۲ثانیه
     • «زیر ۳۰۰ms پیش‌فرضِ حرکتِ رابط است.»
     • prefers-reduced-motion: opacity/رنگ می‌ماند، جابه‌جایی و اسپرینگ حذف.

   رنگِ اصلی همچنان از zh-gender.css / سوپرادمین می‌آید (مهمان بادمجانی،
   مرد آبی، زن رز) — این فایل فقط «زمینه» را به آن سازگار و آرام می‌کند.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── ۱) توکن‌های حرکت ───────────────────────────────────────────────── */
:root{
    --zb-ease-out:cubic-bezier(.16,1,.3,1);
    --zb-ease-io:cubic-bezier(.77,0,.175,1);
    --zb-t-press:.14s;
    --zb-t-pop:.18s;
    --zb-t-reveal:.22s;
    --zb-t-sheet:.32s;
    /* فنرِ تقریبیِ BUBBLE_POP (stiffness 520 / damping 27 / mass .52) به‌صورتِ
       linear() — روی مرورگرِ بدونِ پشتیبانی به ease-out می‌افتد. */
    --zb-spring:linear(0,.18 6%,.62 14%,.94 24%,1.06 34%,1.05 42%,1.01 56%,.995 70%,1);

    /* رنگِ «زمینه» از رنگِ مخاطب مایه می‌گیرد، فقط به‌اندازهٔ یک نجوا */
    --zb-hue:335;
}
:root[data-gender="male"]{--zb-hue:250}
:root[data-gender="female"]{--zb-hue:355}
:root[data-gender="guest"]{--zb-hue:335}

/* ── ۲) سطح‌ها — تمِ روشن (پیش‌فرضِ پروژه) ──────────────────────────── */
:root[data-theme="light"]{
    --bg:oklch(98.4% .006 var(--zb-hue));
    --bg-2:#fff;
    --surface:#fff;
    --surface-2:oklch(96.6% .007 var(--zb-hue));
    --border:oklch(20% .02 var(--zb-hue) / .09);
    --border-strong:oklch(20% .02 var(--zb-hue) / .16);
    --text:oklch(19% .02 var(--zb-hue));
    --text-2:oklch(37% .02 var(--zb-hue));
    --muted:oklch(54% .016 var(--zb-hue));
    --shadow-lg:0 1px 2px oklch(20% .02 var(--zb-hue) / .05),
                0 14px 36px -18px oklch(20% .02 var(--zb-hue) / .16);
    /* پلِ توکن‌های Tailwind/legacy تا آن صفحه‌ها هم همین زمینه را ببینند */
    --zb-bg:var(--bg);--zb-surface:#fff;--zb-line:var(--border);
    --zb-ink:var(--text);--zb-ink-2:var(--text-2);--zb-ink-3:var(--muted);
}

/* ── ۳) سطح‌ها — تمِ تیره (فقط با انتخابِ کاربر) ─────────────────────── */
:root[data-theme="dark"]{
    --bg:#151515;
    --bg-2:#1a1a1a;
    --surface:#1c1c1c;
    --surface-2:#232323;
    --border:rgb(255 255 255 / .07);
    --border-strong:rgb(255 255 255 / .13);
    --text:oklch(96% 0 0);
    --text-2:oklch(80% .01 var(--zb-hue));
    --muted:oklch(64% .012 var(--zb-hue));
}

/* زمینهٔ صفحه: تختِ آرام، نه لکه‌های گرادیانیِ رنگارنگ */
:root[data-theme="light"] body,
:root[data-theme="dark"] body{background:var(--bg);color:var(--text)}

/* ── ۴) کاهشِ نویز — آنچه «شلوغی/زشتی» می‌ساخت ───────────────────────── */
/* ۴.۱ چرخشِ بی‌پایانِ زاویهٔ گرادیان روی :root باعثِ repaintِ دائمِ کلِ صفحه بود
       (روی موبایل باتری و فریم می‌خورد) و هیچ اطلاعاتی به کاربر نمی‌داد. */
:root{animation:none!important}
/* ۴.۲ نشانگرِ سفارشیِ دایره‌ای + ذراتِ کانواس: خارج از کنترلِ کاربر، روی
       اسکرین‌شات‌ها «دایرهٔ سرگردان» می‌ساخت. لوکس = خویشتن‌داری. */
#cursorDot,#cursorRing{display:none!important}
#heroCanvas{opacity:.22}
.hero-blob{opacity:.2;filter:blur(110px)}
.hero-glow{opacity:.55}

/* ── ۵) کارتِ مویی — زبانِ beUI ──────────────────────────────────────── */
.zb-card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:16px;
    box-shadow:var(--shadow-lg);
}
.zb-glass{
    background:color-mix(in srgb,var(--surface) 62%,transparent);
    -webkit-backdrop-filter:blur(18px) saturate(1.4);
    backdrop-filter:blur(18px) saturate(1.4);
    border:1px solid var(--border);
}

/* ── ۶) فشردنِ فنری برای هر سطحِ قابل‌فشردن ─────────────────────────── */
.zb-press{
    transition:transform var(--zb-t-press) var(--zb-ease-out),
               box-shadow var(--zb-t-pop) var(--zb-ease-out),
               background-color var(--zb-t-pop),border-color var(--zb-t-pop);
    will-change:transform;
}
.zb-press:active,.zb-press.is-pressed{transform:scale(.97)}
.btn:active,.btn-primary:active,.btn-ghost:active{transform:scale(.97)}

/* ── ۷) ورودِ محتوا: بلور + جابه‌جایی، سپس آرام ─────────────────────── */
[data-reveal],[data-rv],.zb-reveal{
    opacity:0;transform:translateY(8px);filter:blur(4px);
    transition:opacity var(--zb-t-reveal) var(--zb-ease-out),
               transform var(--zb-t-reveal) var(--zb-ease-out),
               filter var(--zb-t-reveal) var(--zb-ease-out);
}
[data-reveal].in,[data-reveal].is-visible,[data-rv].in,.zb-reveal.in{
    opacity:1;transform:none;filter:none;
}

/* ── ۸) پوستهٔ دستیار (چت) — بر پایهٔ beUI «AI Agent Components» ─────── */
.zbc{display:flex;flex-direction:column;height:100%;min-height:0;background:var(--bg);color:var(--text)}
.zbc-scroller{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
    padding:18px 14px 8px;scroll-behavior:smooth}
.zbc-thread{display:flex;flex-direction:column;gap:12px;max-width:760px;margin-inline:auto}

.zbc-msg{display:flex;flex-direction:column;gap:4px;max-width:100%}
.zbc-msg.user{align-items:flex-start}
.zbc-msg.assistant{align-items:flex-end}
.zbc-bubble{
    max-width:82%;padding:.625rem .875rem;border-radius:16px;
    font-size:14px;line-height:1.75;word-wrap:break-word;overflow-wrap:anywhere;
    animation:zbcPop var(--zb-t-pop) var(--zb-spring) both;
}
.zbc-msg.user .zbc-bubble{background:var(--text);color:var(--bg)}
.zbc-msg.assistant .zbc-bubble{background:var(--surface-2);color:var(--text)}
.zbc-bubble p{margin:0 0 .5em}.zbc-bubble p:last-child{margin:0}
.zbc-bubble ul,.zbc-bubble ol{margin:.25em 0 .5em;padding-inline-start:1.25em}
.zbc-bubble a{text-decoration:underline;font-weight:600;color:inherit}
.zbc-bubble code{font-family:ui-monospace,monospace;font-size:.85em;
    background:color-mix(in srgb,var(--bg) 60%,transparent);padding:.1em .35em;border-radius:6px}
@keyframes zbcPop{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}

.zbc-meta{font-size:10.5px;color:var(--muted);display:flex;gap:10px;align-items:center;padding-inline:4px}
.zbc-fb button{border:0;background:none;color:var(--muted);cursor:pointer;padding:2px 4px;border-radius:6px}
.zbc-fb button:hover{color:var(--text);background:var(--surface-2)}
.zbc-fb button.on{color:var(--rose)}

/* نقطه‌های «در حال نوشتن» */
.zbc-typing{display:inline-flex;gap:4px;align-items:center;padding:.15rem 0}
.zbc-typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);
    animation:zbcDot 1.1s var(--zb-ease-io) infinite}
.zbc-typing i:nth-child(2){animation-delay:.15s}.zbc-typing i:nth-child(3){animation-delay:.3s}
@keyframes zbcDot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* کارتِ «ابزار در حال اجرا» (beUI Todo List / Approval) */
.zbc-tool{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-2);
    background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:.4rem .75rem;
    animation:zbcPop var(--zb-t-pop) var(--zb-spring) both}
.zbc-tool svg{width:14px;height:14px;color:var(--rose);flex:none}
.zbc-tool.done svg{color:oklch(62% .16 150)}

/* ورودی — beUI Prompt Input: rounded-2xl، مرزِ مویی، ۲تا۸ خط */
.zbc-compose{padding:8px 12px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(to top,var(--bg) 70%,transparent)}
.zbc-form{max-width:760px;margin-inline:auto;position:relative;
    background:var(--surface);border:1px solid var(--border-strong);border-radius:16px;padding:8px;
    transition:border-color var(--zb-t-pop);box-shadow:var(--shadow-lg)}
.zbc-form:focus-within{border-color:color-mix(in srgb,var(--text) 28%,transparent)}
.zbc-input{width:100%;resize:none;border:0;outline:0;background:transparent;color:var(--text);
    font:inherit;font-size:14px;line-height:24px;padding:6px 8px;min-height:48px;max-height:192px;overflow-y:auto}
.zbc-input::placeholder{color:var(--muted)}
.zbc-bar{display:flex;align-items:center;gap:6px;margin-top:2px;min-height:34px}
.zbc-send{margin-inline-start:auto;width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;
    background:var(--text);color:var(--bg);display:grid;place-items:center;
    transition:transform var(--zb-t-press) var(--zb-ease-out),opacity var(--zb-t-pop)}
.zbc-send:active{transform:scale(.92)}
.zbc-send[disabled]{opacity:.35;cursor:not-allowed}
.zbc-send svg{width:16px;height:16px}
.zbc-hint{font-size:10.5px;color:var(--muted);text-align:center;margin-top:6px}

/* پیشنهادهای شروع */
.zbc-suggest{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:14px}
.zbc-suggest button{border:1px solid var(--border);background:var(--surface);color:var(--text-2);
    border-radius:99px;padding:.45rem .9rem;font:inherit;font-size:12.5px;cursor:pointer;
    transition:border-color var(--zb-t-pop),transform var(--zb-t-press) var(--zb-ease-out)}
.zbc-suggest button:hover{border-color:var(--border-strong);color:var(--text)}
.zbc-suggest button:active{transform:scale(.97)}


/* ══════════════════════════════════════════════════════════════════════════
   ۹) پوستهٔ ادیتوریال v2 — «Steep × beUI»
   تقریباً بی‌رنگ؛ رنگِ شخصیت (--rose = accent بر اساسِ جنسیت) فقط روی کنش‌ها.
   کارتِ تخت با مویینه‌ی ۱px، دکمه‌ی قرص، تایپِ سبک و بزرگ. همهٔ صفحه‌ها (قبل و
   بعد از ورود) از همین کلاس‌های مشترک استفاده می‌کنند: .btn .card .dx-card
   .form-input .badge .kpi .chip .table
   ══════════════════════════════════════════════════════════════════════════ */
:root{
    --zb-r-card:16px; --zb-r-ctl:12px; --zb-r-pill:999px; --zb-r-btn:12px;
    --zb-accent:var(--rose);
    --zb-navy:#141A3A;
    --zb-accent-ink:color-mix(in srgb,var(--rose) 82%,#000);
    --zb-accent-soft:color-mix(in srgb,var(--rose) 9%,transparent);
    --zb-accent-line:color-mix(in srgb,var(--rose) 28%,transparent);
    --zb-hair:var(--border,color-mix(in srgb,#000 9%,transparent));
}

/* تایپوگرافی: وزنِ سبک‌تر و بزرگ‌تر = لحنِ مجله‌ای؛ فارسی هرگز letter-spacing نمی‌گیرد */
html body{font-feature-settings:"ss01","kern";-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html h1,
html h2,
html .hero-title,
html .sec-title,
html .page-title{font-weight:500;line-height:1.35;letter-spacing:0}
html h3,
html h4{font-weight:600;line-height:1.45}
html .text-muted,
html .muted{color:var(--muted)}
html ::selection{background:var(--zb-accent-soft);color:var(--text)}
html :focus-visible{outline:2px solid var(--zb-accent);outline-offset:2px;border-radius:6px}

/* دکمه‌ها: قرصِ تخت؛ اصلی = رنگِ شخصیت، ثانویه = خط‌دار */
html .btn,
html .btn-primary,
html .btn-secondary,
html .btn-ghost,
html .btn-danger,
html .btn-success,
html .zh-btn{
    border-radius:var(--zb-r-btn);font-weight:500;letter-spacing:0;
    box-shadow:none;background-image:none;
    transition:background-color var(--zb-t-pop) var(--zb-ease-out),
               border-color var(--zb-t-pop) var(--zb-ease-out),
               transform var(--zb-t-press) var(--zb-ease-out),
               color var(--zb-t-pop) var(--zb-ease-out)}
html .btn-primary,
html .zh-btn-primary{background:var(--zb-accent-solid,var(--zb-accent));color:#fff;border:1px solid transparent}
html .btn-primary:hover,
html .zh-btn-primary:hover{background:var(--zb-accent-ink);transform:none;box-shadow:none;color:#fff}
html .btn-secondary,
html .btn-ghost{background:transparent;color:var(--text);border:1px solid var(--border-strong,var(--zb-hair))}
html .btn-secondary:hover,
html .btn-ghost:hover{background:var(--surface-2);border-color:var(--text);transform:none;box-shadow:none;color:var(--text)}
html .btn-danger{background:transparent;color:oklch(52% .2 25);border:1px solid color-mix(in srgb,oklch(52% .2 25) 35%,transparent)}
html .btn-danger:hover{background:color-mix(in srgb,oklch(52% .2 25) 8%,transparent);transform:none;box-shadow:none}
html .btn-success{background:oklch(56% .15 155);color:#fff;border:1px solid transparent}
html .btn:active,
html .btn-primary:active,
html .btn-secondary:active,
html .btn-ghost:active{transform:scale(.97)}
html .btn-lg{padding:.8rem 1.6rem;font-size:1rem}
html .btn-sm{padding:.38rem .85rem;font-size:.8125rem}
html .btn[disabled],
html .btn:disabled{opacity:.45;transform:none}

/* کارت‌ها: تخت، مویینه، بدونِ سایه و بدونِ هاورِ بالا‌رونده */
html .card,
html .dx-card,
html .stat-card,
html .kpi,
html .zb-card,
html .card-flat{
    background:var(--surface);border:1px solid var(--zb-hair);border-radius:var(--zb-r-card);
    box-shadow:none;transition:border-color var(--zb-t-pop) var(--zb-ease-out)}
html .card:hover,
html .dx-card:hover,
html .stat-card:hover,
html .kpi:hover{box-shadow:none;transform:none;border-color:var(--border-strong,var(--zb-hair))}
html a.card:hover,
html a.dx-card:hover,
html .zb-card--link:hover{border-color:var(--zb-accent-line)}
html .kpi .v,
html .stat-num,
html .kpi-value{font-weight:500}

/* فیلدها */
html .form-input,
html .form-select,
html .form-textarea,
html input.form-control,
html select.form-control,
html textarea.form-control{
    background:var(--surface);border:1px solid var(--border-strong,var(--zb-hair));border-radius:var(--zb-r-ctl);
    min-height:44px;color:var(--text);box-shadow:none;
    transition:border-color var(--zb-t-pop) var(--zb-ease-out),box-shadow var(--zb-t-pop) var(--zb-ease-out)}
html .form-textarea,
html textarea.form-control{min-height:96px}
html .form-input:focus,
html .form-select:focus,
html .form-textarea:focus,
html .form-control:focus{
    background:var(--surface);border-color:var(--zb-accent);
    box-shadow:0 0 0 3px var(--zb-accent-soft);outline:0}
html .form-input::placeholder,
html .form-textarea::placeholder{color:var(--muted)}
html .form-label{font-weight:500;color:var(--text-2);font-size:.8125rem}

/* برچسب‌ها و چیپ‌ها: نرم و بی‌سایه */
html .badge,
html .chip,
html .tag{border-radius:var(--zb-r-pill);font-weight:500;letter-spacing:0;box-shadow:none}
html .badge{background:var(--zb-accent-soft);color:var(--zb-accent-ink);border:1px solid transparent}
html .chip{background:transparent;border:1px solid var(--zb-hair);color:var(--text-2)}
html .chip:hover{border-color:var(--border-strong,var(--zb-hair));color:var(--text)}
html .chip.active,
html .chip.on,
html .chip[aria-pressed="true"]{background:var(--text);color:var(--bg);border-color:var(--text)}

/* جدول‌ها: هدرِ ریز و ساکت، خطِ مویینه، بدونِ زبرا */
html table.table,
html .table{border-collapse:collapse;width:100%}
html .table thead th{font-size:.75rem;font-weight:500;color:var(--muted);background:transparent;
    border-bottom:1px solid var(--zb-hair);padding:.7rem .9rem;text-align:start;letter-spacing:0}
html .table tbody td{padding:.85rem .9rem;border-bottom:1px solid var(--zb-hair);background:transparent}
html .table tbody tr:hover td{background:var(--surface-2)}
html .table-responsive{border:1px solid var(--zb-hair);border-radius:var(--zb-r-card);background:var(--surface)}

/* ناوبری و مودال */
html .navbar,
html .zh-nav,
html .zb-nav,
html header.nav{background:color-mix(in srgb,var(--bg) 82%,transparent);
    -webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);
    border-bottom:1px solid var(--zb-hair);box-shadow:none}
html .modal-panel,
html .modal-content{border-radius:20px;border:1px solid var(--zb-hair);
    box-shadow:0 0 0 1px color-mix(in srgb,#000 5%,transparent),0 8px 40px rgba(0,0,0,.10)}
html .modal-backdrop{background:color-mix(in srgb,var(--bg) 55%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
html .dropdown-menu{border:1px solid var(--zb-hair);border-radius:14px;
    box-shadow:0 0 0 1px color-mix(in srgb,#000 5%,transparent),0 4px 24px rgba(0,0,0,.08)}

/* هرچه سایه‌ی رنگی/درخشش داشت آرام‌تر */
/* کنترل‌های بومیِ مرورگر (اسلایدر، چک‌باکس، رادیو) هم رنگِ شخصیت */
:root{accent-color:var(--zb-accent)}
html input[type=range]{accent-color:var(--zb-accent)}
html .fr-group .btn{align-self:flex-end;min-height:44px}
html [class*="glow"]{filter:none}
html .shadow-glow,
html .zh-glow{box-shadow:none!important}

@media (prefers-reduced-motion:reduce){
    [data-reveal],[data-rv],.zb-reveal{transform:none;filter:none;transition:opacity .01s}
    .zbc-bubble,.zbc-tool{animation:none}
    .zbc-typing i{animation:none;opacity:.6}
    .zb-press,.btn{transition:none}
}