/* تطبيق الزبائن — موبايل أولاً، RTL، ألوان من theme/tokens.css فقط. أهداف اللمس ≥ 48px. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.55;-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none}
[dir=ltr] .flip{transform:scaleX(-1)}
/* الفارسية والسورانية: خطّا الواجهة المحزومان (الجزء العربي) لا يحويان حروفاً مثل پ چ ژ گ ک ی ڕ ڵ ۆ ێ؛ ولو تُرك الرجوع الاحتياطي حرفاً بحرف لانقطع اتصال حروف الكلمة الواحدة بين خطين.
   لذلك نستعمل خط النظام وحده لهاتين اللغتين (Noto Sans Arabic/Segoe UI/Tahoma/SF)، ونطبّق الشيء نفسه على رقاقة اسم اللغة في منتقي اللغة أياً كانت لغة الواجهة. */
:root:lang(fa),:root:lang(ckb){--font-body:"Noto Sans Arabic","Segoe UI",Tahoma,"Geeza Pro","SF Arabic",system-ui,sans-serif;--font-display:"Noto Sans Arabic","Segoe UI",Tahoma,"Geeza Pro","SF Arabic",system-ui,sans-serif}
.chip:lang(fa),.chip:lang(ckb){font-family:"Noto Sans Arabic","Segoe UI",Tahoma,"Geeza Pro","SF Arabic",system-ui,sans-serif}
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:var(--font-display);margin:0;line-height:1.3}
p{margin:0}
.p{margin:6px 0}
.pre{white-space:pre-wrap;overflow-wrap:anywhere}
.muted{color:var(--muted)}
.fine{color:var(--muted);font-size:13px}
.center{text-align:center}
.grow{flex:1;min-width:0}
.pad{padding:16px}
.icon{flex:none}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* الإقلاع */
.boot{min-height:100dvh;display:grid;place-items:center}
.boot-logo{text-align:center}.boot-text{font-family:var(--font-display);font-size:22px;color:var(--brand-deep);margin-top:8px}

/* الهيكل */
.frame{display:flex;flex-direction:column;min-height:100dvh;max-width:640px;margin-inline:auto;background:var(--bg)}
.bar{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:56px 1fr 56px;align-items:center;min-height:calc(56px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top);background:var(--card);border-bottom:1px solid var(--line)}
.bar-title{font-size:18px;text-align:center;color:var(--brand-deep)}
.bar-slot{display:flex;justify-content:center}
.view{flex:1;padding:16px 16px calc(88px + env(safe-area-inset-bottom));outline:none}
.frame.bare .view{padding-bottom:calc(24px + env(safe-area-inset-bottom))}
.screen{display:block}
.stack{display:flex;flex-direction:column;gap:14px}
.stack.small-gap{gap:8px}
.tabbar{position:fixed;inset-inline:0;bottom:0;z-index:30;display:flex;max-width:640px;margin-inline:auto;background:var(--card);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);box-shadow:var(--soft-shadow)}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:60px;padding:6px 2px;background:none;border:0;color:var(--muted);font:inherit;font-size:12px;cursor:pointer}
.tab.on{color:var(--brand)}
.tab.on svg{stroke-width:2.3}
.icon-btn{position:relative;display:inline-grid;place-items:center;width:48px;height:48px;background:none;border:0;border-radius:var(--radius);color:var(--ink);cursor:pointer}
.icon-btn:active{background:var(--brand-soft)}
.bell .dot{position:absolute;top:6px;inset-inline-start:4px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--accent);color:var(--inverse);font-size:11px;line-height:20px;text-align:center}
.banner{display:flex;align-items:center;gap:8px;justify-content:center;padding:8px 12px;font-size:14px;text-align:center}
.banner.offline{background:var(--warn-soft);color:var(--warn)}
.banner.update{background:var(--info-soft);color:var(--info)}

/* عناصر */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px;box-shadow:var(--soft-shadow)}
.card.info{display:flex;gap:12px;align-items:flex-start;background:var(--info-soft);border-color:transparent;color:var(--info)}
.card.info .p{color:var(--ink)}
.card.cta,.card.install{display:flex;gap:12px;align-items:center}
.card.install{background:var(--brand-tint)}
.card.ok-card{background:var(--ok-soft);border-color:transparent}
.tile{display:block;width:100%;text-align:start;font:inherit;color:inherit;cursor:pointer}
.tile-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.tile-head .price{margin-inline-start:auto;font-weight:700;color:var(--brand-deep)}
.section{margin-block:6px}
.section-title{font-size:16px;color:var(--brand-deep);margin:4px 0 10px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:48px;padding:10px 18px;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--card);color:var(--ink);font:inherit;font-weight:600;cursor:pointer;text-decoration:none}
.btn:hover{text-decoration:none}
.btn.primary{background:var(--brand);border-color:var(--brand);color:var(--inverse)}
.btn.primary:active{background:var(--brand-deep)}
.btn.danger{background:var(--danger);border-color:var(--danger);color:var(--inverse)}
.btn.danger-outline{border-color:var(--danger);color:var(--danger);background:var(--card)}
.btn.block{display:flex;width:100%}
.btn.small{min-height:40px;padding:6px 14px;font-size:14px}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn.busy{opacity:.7}
.link-btn{background:none;border:0;padding:10px;min-height:44px;color:var(--brand);font:inherit;cursor:pointer}
.row-actions{display:flex;gap:10px}.row-actions .btn{flex:1}
.badge{display:inline-block;padding:2px 10px;border-radius:999px;background:var(--brand-soft);color:var(--brand-deep);font-size:12px;font-weight:600;white-space:nowrap}
.badge.ok{background:var(--ok-soft);color:var(--ok)}.badge.warn{background:var(--warn-soft);color:var(--warn)}.badge.danger{background:var(--danger-soft);color:var(--danger)}.badge.info{background:var(--info-soft);color:var(--info)}.badge.accent{background:var(--accent);color:var(--inverse)}
.level{display:inline-flex;align-items:center;gap:4px;padding:4px 12px;border-radius:999px;background:var(--accent-soft);color:var(--accent-deep);font-weight:700;font-size:14px}

/* نماذج */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-weight:600;font-size:14px}
.req{color:var(--danger)}
input,select,textarea{width:100%;min-height:48px;padding:10px 14px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--card);color:var(--ink);font:inherit}
input[type=checkbox]{width:22px;height:22px;min-height:22px;accent-color:var(--brand);flex:none}
textarea{resize:vertical}
input.invalid,select.invalid,textarea.invalid{border-color:var(--danger)}
.field-error{color:var(--danger);font-size:13px}
.hint{color:var(--muted);font-size:13px}
.check{display:flex;align-items:center;gap:10px;min-height:44px}
.auth{display:flex;flex-direction:column;gap:18px;padding-top:12px}
.brand{text-align:center}.brand h1{font-size:26px;color:var(--brand-deep);margin-top:6px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip,.chip-card{padding:8px 14px;min-height:44px;border:1px solid var(--line-strong);border-radius:999px;background:var(--card);color:var(--ink);font:inherit;cursor:pointer}
.chip.on{background:var(--brand);border-color:var(--brand);color:var(--inverse)}
.lang-picker{justify-content:center}
.chip-card{display:flex;flex-direction:column;border-radius:var(--radius);cursor:default;min-width:140px}
.offers .chips{overflow-x:auto;flex-wrap:nowrap}
.segmented{display:flex;background:var(--brand-soft);border-radius:var(--radius);padding:4px;gap:4px;margin-bottom:12px}
.seg{flex:1;min-height:44px;border:0;border-radius:calc(var(--radius) - 4px);background:none;color:var(--brand-deep);font:inherit;font-weight:600;cursor:pointer}
.seg.on{background:var(--card);box-shadow:var(--soft-shadow)}

/* قوائم وصفوف */
.list{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.row{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:10px 14px;background:none;border:0;border-bottom:1px solid var(--line);color:var(--ink);font:inherit;text-align:start;cursor:pointer}
.row:last-child{border-bottom:0}
.row.static{cursor:default}
.row-ico{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--brand-soft);color:var(--brand-deep);flex:none}
.row-main{display:flex;flex-direction:column;flex:1;min-width:0}
.row-title{font-weight:600;overflow-wrap:anywhere}
.row-sub{color:var(--muted);font-size:13px}.row-sub.wrap{white-space:normal}
.row-trail{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.row-chev{color:var(--faint)}
.row.unread{background:var(--brand-tint)}
.dot-unread{width:10px;height:10px;border-radius:50%;background:var(--accent);flex:none}
.pos{color:var(--ok);font-weight:700}.neg{color:var(--danger);font-weight:700}
.kv{display:flex;justify-content:space-between;gap:12px;padding:4px 0;border-bottom:1px dashed var(--line)}
.bullets{margin:6px 0;padding-inline-start:20px}

/* الرئيسية */
.hero{background:linear-gradient(135deg,var(--brand),var(--brand-deep));color:var(--inverse);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.hero .muted,.hero .fine{color:var(--inverse);opacity:.85}
.hero-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.hello{font-family:var(--font-display);font-size:20px}
.points{display:flex;align-items:baseline;gap:8px;margin:14px 0 8px}
.points-val{font-family:var(--font-display);font-size:42px;line-height:1}
.points-lbl{opacity:.9}
.progress{height:10px;border-radius:5px;background:var(--brand-ink);overflow:hidden}
.progress .fill{height:100%;background:var(--accent)}
.progress-wrap .fine{margin-top:6px}
.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.quick-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:84px;padding:8px 4px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);color:var(--brand-deep);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.balances{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.balances.compact{gap:8px}
.bal-val{overflow-wrap:anywhere}
.bal{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:12px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius)}
.bal-ico{color:var(--accent-deep)}.bal-val{font-family:var(--font-display);font-size:20px;color:var(--ink)}.bal-lbl{color:var(--muted);font-size:13px}
.card .bal{background:var(--card-2)}
.balance-line{display:flex;justify-content:space-between;align-items:center;gap:12px}
.big{font-family:var(--font-display);font-size:30px;color:var(--brand-deep)}
.reward-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:10px}
.cost{color:var(--accent-deep);font-size:18px}
.profile-head{display:flex;align-items:center;gap:14px}
.avatar{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--brand);color:var(--inverse);font-family:var(--font-display);font-size:24px;flex:none}

/* محادثة وسلاسل */
.thread{display:flex;flex-direction:column;gap:8px}
.bubble{max-width:88%;padding:10px 14px;border-radius:var(--radius);overflow-wrap:anywhere}
.bubble.me{align-self:flex-start;background:var(--brand-soft);color:var(--brand-ink)}
.bubble.staff{align-self:flex-end;background:var(--card);border:1px solid var(--line)}
.chat-form{display:flex;gap:8px;align-items:flex-end;position:sticky;bottom:calc(72px + env(safe-area-inset-bottom));background:var(--bg);padding-block:8px}
.chat-form .field{flex:1}.chat-form label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.stars{display:flex;gap:6px;justify-content:center}
.star{background:none;border:0;padding:6px;color:var(--line-strong);cursor:pointer}
.star.on{color:var(--gold)}
.star.on svg{fill:currentColor}

/* حالات */
.state{display:flex;flex-direction:column;align-items:center;gap:10px;padding:32px 16px;color:var(--muted);text-align:center}
.state.error{color:var(--danger)}
.spinner{width:28px;height:28px;border:3px solid var(--line);border-top-color:var(--brand);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation-duration:2s}}

/* ورقة سفلية + تنبيهات */
.sheet{width:100%;max-width:640px;margin:auto auto 0;padding:0;border:0;border-radius:var(--radius) var(--radius) 0 0;background:var(--card);color:var(--ink);max-height:90dvh;overflow:auto}
.sheet::backdrop{background:color-mix(in srgb,var(--brand-ink) 55%,transparent)}
.sheet-head{display:flex;justify-content:space-between;align-items:center;padding:8px 8px 0 16px;position:sticky;top:0;background:var(--card)}
.sheet-head h2{font-size:18px}
.sheet-body{padding:8px 16px 16px}
.sheet-foot{display:flex;gap:10px;padding:0 16px calc(16px + env(safe-area-inset-bottom))}.sheet-foot .btn{flex:1}
video.scan{width:100%;border-radius:var(--radius);background:var(--brand-ink);max-height:50dvh}
.toasts{position:fixed;inset-inline:0;bottom:calc(84px + env(safe-area-inset-bottom));z-index:100;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.toast{pointer-events:auto;max-width:min(92vw,520px);padding:12px 18px;border-radius:var(--radius);background:var(--ink);color:var(--bg);box-shadow:var(--shadow)}
.toast.ok{background:var(--ok);color:var(--inverse)}.toast.danger{background:var(--danger);color:var(--inverse)}.toast.warn{background:var(--warn);color:var(--inverse)}
@media (min-width:700px){.frame{border-inline:1px solid var(--line)}}