/* ==========================================================================
   ux.css — بهبودهای خوانایی و تجربهٔ کاربری (بعد از theme.css)
   ========================================================================== */

/* ---------- خوانایی: متن خاکستری با کنتراست استاندارد (۴.۵ به ۱) ---------- */
:root{ --ink-3:#67727E; --ink-4:#9AA6B2; }
.inp::placeholder,.search input::placeholder{color:var(--ink-4)}
.wheel-i{color:var(--ink-4)}
.r-s{font-size:13px}
.r-u,.badge.sm{font-size:11.5px}
.hint{font-size:12.5px}

/* ---------- پیام‌های کوتاه: همیشه پایین، روی عنوان شیت‌ها نمی‌افتند ---------- */
html.sheet-open .toasts{top:auto;bottom:calc(var(--safe-b) + 92px)}
.toast{font-size:13.5px;pointer-events:auto}
.toast button{font-weight:800;text-decoration:none;padding:4px 2px}

/* ---------- نوار پایین ۴ تبی: جای بیشتر، برچسب خواناتر ---------- */
.tabbar{grid-template-columns:repeat(4,1fr)}
.tab{font-size:12px;color:#66727D}
.tab .tl{height:16px;line-height:16px}

/* ---------- خانه: روند هزینه ---------- */
.hero .v.hv-up{color:var(--bad)}
.hero .v.hv-down{color:var(--ok)}
.hero .hv-sub{font-size:13px;color:var(--ink-2);margin-top:-2px}
.hero-stats small{font-size:11.5px}
.hero-stats b.hs-warn{color:var(--warn)}

/* ---------- کارت رسپی ---------- */
.row.dc .r-u.sell{margin-top:2px;color:var(--ink-2);font-weight:600}
.badge.trend{direction:ltr}

/* ---------- ویرایش رسپی: دو دکمهٔ افزودن کنار هم ---------- */
.add-row{display:flex;gap:8px}
.add-row .btn{flex:1;min-width:0;padding:0 10px;font-size:14px}
.add-row .btn:last-child{flex:0 0 auto}

/* ---------- اثر تغییر قیمت ---------- */
.imp-ings{display:flex;flex-wrap:wrap;gap:6px;margin:0 2px 12px}

/* ---------- لیست خرید متنی ---------- */
.shop-pre{white-space:pre-wrap;font:inherit;font-size:13.5px;line-height:1.9;background:var(--surface);border-radius:16px;padding:14px 16px;margin:0;max-height:52vh;overflow:auto;color:var(--ink)}