/* تطبيق المالك — كل الألوان من توكنات brand.css (ممنوع لون مكتوب مباشرة). */

*{box-sizing:border-box}
html,body{min-height:100%}
a{color:var(--accent);text-decoration:none}
h1,h2,p{margin:0}
.app{max-width:560px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column}

/* الشريط العلوي */
.topbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:calc(10px + env(safe-area-inset-top)) 18px 10px;background:var(--rail-bg);color:var(--on-accent)}
.topbar-title{display:flex;align-items:baseline;gap:10px;min-width:0}
.topbar .wordmark{font-size:18px}
.store{font-size:14px;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-actions{display:flex;gap:6px}
.icon-btn{position:relative;width:var(--tap);height:var(--tap);border-radius:999px;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;background:transparent;color:inherit}
.icon-btn:hover{background:rgba(255,255,255,.12)}
.icon-btn:focus-visible,.btn:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--accent-border);outline-offset:2px}
.spinning svg{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(-360deg)}}
@media (prefers-reduced-motion:reduce){.spinning svg{animation:none}}
.badge{position:absolute;top:6px;left:6px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;
  background:var(--danger);color:var(--on-accent);font-size:11px;font-weight:700;line-height:18px;text-align:center}

main{flex:1;padding:14px 16px 104px;display:flex;flex-direction:column;gap:14px}
.view{display:flex;flex-direction:column;gap:14px}
.stack{display:flex;flex-direction:column;gap:12px}
.view-head h1{font-size:22px;font-weight:700}
.view-head p{font-size:14px;color:var(--text-muted)}

/* حالة الاتصال */
.status{display:flex;align-items:center;gap:8px;align-self:flex-start;font-size:13px;font-weight:500;
  padding:6px 12px;border-radius:999px}
.status-dot{width:8px;height:8px;border-radius:999px;background:currentColor;flex-shrink:0}
.status-ok{background:var(--ok-weak);color:var(--ok)}
.status-stale{background:var(--warn-weak);color:var(--warn);border-radius:var(--radius-sm)}
.demo-note{font-size:12px;color:var(--text-muted)}

/* البطاقة الكبيرة */
.hero{background:var(--accent);color:var(--on-accent);border-radius:var(--radius-lg);padding:18px 20px;
  display:flex;flex-direction:column;gap:6px;box-shadow:var(--shadow)}
.hero-compact{gap:12px;padding:16px}
.hero-label{font-size:13px;color:rgba(255,255,255,.78)}
.hero-amount{display:flex;align-items:baseline;gap:8px}
.hero-num{font-size:36px;font-weight:700;line-height:1.2}
.hero-cur{font-size:15px;color:rgba(255,255,255,.78)}
.hero-row{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.hero-sub{font-size:13px;color:rgba(255,255,255,.78)}
.hero-title{font-size:16px;font-weight:700}
.hero-chip{font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;
  background:rgba(255,255,255,.14)}
.hero-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.hero-split>div{display:flex;flex-direction:column;gap:2px}
.hero-mid{font-size:19px;font-weight:700}
.spark{width:100%;height:56px;margin-top:6px}
.spark-line{fill:none;stroke:rgba(255,255,255,.70);stroke-width:2.5;
  stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}

/* المربعات */
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tile{background:var(--surface);border-radius:var(--radius);padding:14px;display:flex;flex-direction:column;gap:2px;box-shadow:var(--shadow-sm)}
.tile-strong{background:var(--accent);color:var(--on-accent)}
.tile-strong .tile-label,.tile-strong .tile-extra{color:rgba(255,255,255,.78)}
.tile-label{font-size:12px;color:var(--text-muted)}
.tile-num{font-size:21px;font-weight:700}
.tile-extra{font-size:12px;color:var(--text-muted)}
.tile-soon{font-size:14px;color:var(--text-muted);padding:4px 0}

/* القوائم */
.block{display:flex;flex-direction:column;gap:8px}
.block-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.block-head h2,.sub-title{font-size:16px;font-weight:700}
.block-head a{font-size:14px;font-weight:500;min-height:var(--tap);display:flex;align-items:center}
.card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.card.empty,.list .empty{padding:18px 16px;color:var(--text-muted);font-size:14px}
.card.error{padding:14px 16px;background:var(--danger-weak);color:var(--danger);font-weight:500}
.list{list-style:none;margin:0;padding:0}
.list>li+li{border-top:1px solid var(--border-soft)}
.row{display:flex;align-items:center;gap:12px;padding:13px 14px;color:inherit;min-height:56px}
a.row:hover{background:var(--surface-2)}
.row-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.row-title{font-size:15px;font-weight:700}
.row-sub{font-size:12px;color:var(--text-muted)}
.row-note{font-size:12px;color:var(--text-muted);font-style:italic}
.row-amount{font-size:15px;font-weight:700;white-space:nowrap}
.row-icon{width:36px;height:36px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.avatar{width:40px;height:40px;border-radius:999px;background:var(--accent-weak);color:var(--accent);
  font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dot{width:10px;height:10px;border-radius:999px;flex-shrink:0}
.pairs{margin:0;padding:4px 0}
.pair{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;font-size:14px}
.pair+.pair{border-top:1px solid var(--border-soft)}
.pair dt{color:var(--text-muted)}
.pair dd{margin:0;font-weight:700}
.hint{font-size:12px;color:var(--text-muted)}

/* الألوان حسب الحالة */
.pill{font-size:12px;font-weight:700;padding:5px 10px;border-radius:999px;white-space:nowrap;flex-shrink:0}
.tone-danger{background:var(--danger-weak);color:var(--danger)}
.tone-warn{background:var(--warn-weak);color:var(--warn)}
.tone-ok{background:var(--ok-weak);color:var(--ok)}
.tone-neutral{background:var(--accent-weak);color:var(--accent)}
.dot.tone-danger{background:var(--danger)}
.dot.tone-warn{background:var(--warn)}
.dot.tone-neutral{background:var(--accent-border)}
.tone-text-ok{color:var(--ok)}
.tone-text-warn{color:var(--warn)}

/* المخزون */
.search{display:flex;align-items:center;gap:10px;height:var(--tap);padding:0 16px;background:var(--surface);
  border:1px solid var(--border);border-radius:999px;color:var(--text-muted)}
.search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:15px;color:var(--text)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{min-height:var(--tap);padding:0 16px;border-radius:999px;display:flex;align-items:center;gap:4px;
  background:var(--surface);border:1px solid var(--border);color:var(--text);font-size:14px;font-weight:500}
.chip[aria-current="page"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:700}
.row-stock{align-items:flex-start}
.meter{display:block;height:6px;border-radius:999px;background:var(--surface-3);overflow:hidden;margin:4px 0 2px}
.meter-fill{display:block;height:100%;border-radius:999px}
.meter-fill.tone-danger{background:var(--danger)}
.meter-fill.tone-warn{background:var(--warn)}

/* أزرار التبويب */
.segmented{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;padding:4px;border-radius:999px;background:var(--surface-3)}
.segmented a{min-height:40px;display:flex;align-items:center;justify-content:center;border-radius:999px;
  color:var(--text-muted);font-size:14px;font-weight:500}
.segmented a[aria-current="page"]{background:var(--surface);color:var(--accent);font-weight:700;box-shadow:var(--shadow-sm)}

.btn{min-height:var(--tap);padding:0 22px;border:0;border-radius:999px;background:var(--accent);color:var(--on-accent);
  font:inherit;font-weight:700;cursor:pointer;align-self:flex-start}

/* الشريط السفلي */
.tabbar{position:fixed;bottom:0;inset-inline:0;z-index:5;max-width:560px;margin:0 auto;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));background:var(--surface);
  border-top:1px solid var(--border);padding-bottom:env(safe-area-inset-bottom)}
.tabbar a{min-height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  font-size:11px;font-weight:500;color:var(--text-muted)}
.tabbar a[aria-current="page"]{color:var(--accent);font-weight:700}

/* الدخول */
.login{min-height:100vh;display:flex;flex-direction:column;justify-content:center;gap:28px;padding:32px 20px calc(32px + env(safe-area-inset-bottom))}
.login-brand{display:flex;flex-direction:column;align-items:center;gap:4px}
.login-wordmark{font-size:34px;color:var(--accent)}
.login-by{font-size:13px;color:var(--text-muted)}
.login-card{background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:24px 20px;display:flex;flex-direction:column;gap:12px}
.login-card h1{font-size:22px;font-weight:700}
.login-sub{font-size:14px;color:var(--text-muted);margin-bottom:6px}
.field-label{font-size:14px;font-weight:500}
.field{display:flex;align-items:center;height:52px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);padding-inline:14px 4px}
.field:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}
.field input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:17px;color:var(--text);letter-spacing:.08em}
.reveal{width:var(--tap);height:var(--tap);border:0;background:transparent;color:var(--text-muted);border-radius:999px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.reveal[aria-pressed="true"]{color:var(--accent)}
.field-error{font-size:14px;font-weight:500;color:var(--danger)}
.btn-wide{align-self:stretch;margin-top:6px;font-size:16px}
.btn[disabled]{opacity:.65;cursor:progress}

/* التقارير */
.profit{padding:16px;display:flex;flex-direction:column;gap:8px}
.profit-main{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.profit-main>div{display:flex;flex-direction:column;gap:2px}
.profit-num{font-size:26px;font-weight:700;color:var(--ok)}
.profit .pairs{padding:0}
.profit .pair{padding:8px 0}
.profit-warn{font-size:13px;color:var(--warn);background:var(--warn-weak);border-radius:var(--radius-sm);padding:8px 12px}
.chart{padding:16px 12px 12px;display:flex;flex-direction:column;gap:10px}
.bars{display:flex;align-items:flex-end;gap:4px;height:140px}
.bar-col{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;align-items:center;gap:4px}
.bar-track{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center}
.bar{display:block;width:100%;max-width:22px;border-radius:6px 6px 2px 2px;background:var(--accent-border)}
.bar-peak{background:var(--accent)}
.bar-label{font-size:10px;color:var(--text-muted);font-variant-numeric:tabular-nums}
.chart-note{font-size:13px;color:var(--text-muted)}
.ranked{list-style:none}
.rank{width:28px;height:28px;border-radius:999px;background:var(--surface-3);color:var(--text-muted);font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.amount{white-space:nowrap}

/* الدخول بالسحابة */
.btn-google{background:var(--surface);color:var(--text);border:1px solid var(--border);box-shadow:var(--shadow-sm)}
.btn-google:hover{background:var(--surface-2)}
.or{display:flex;align-items:center;gap:12px;color:var(--text-muted);font-size:13px;margin:6px 0}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--border-soft)}
.stack-tight{display:flex;flex-direction:column;gap:10px}
#pair-code{letter-spacing:.18em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.link-btn{align-self:center;min-height:var(--tap);padding:0 12px;border:0;background:transparent;color:var(--accent);font:inherit;font-size:14px;cursor:pointer}
.btn-scan{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--accent-weak);color:var(--accent)}

/* ================================================================ اللمس والحركة */
html{-webkit-tap-highlight-color:transparent}
body{touch-action:manipulation;overscroll-behavior-y:contain}
.tabbar,.chips,.segmented,.topbar,.btn,.tile-label,.hero-label{-webkit-user-select:none;user-select:none}
:root{--ease-out:cubic-bezier(.2,.8,.2,1);--ease-spring:cubic-bezier(.34,1.4,.64,1)}

/* ضغط فوري: كل شي بينكبس بيصغر شوي وبيرجع بنطّة */
a,button,.press{transition:transform .22s var(--ease-spring),background-color .2s,box-shadow .2s,color .2s}
.is-pressed{transition-duration:.08s}
.hero-link.is-pressed,.tile-link.is-pressed{transform:scale(.965)}
a.row.is-pressed{background:var(--surface-2);transform:scale(.985)}
.chip.is-pressed,.segmented a.is-pressed,.btn.is-pressed{transform:scale(.94)}
.icon-btn.is-pressed{background:rgba(255,255,255,.18);transform:scale(.9)}
.block-head a.is-pressed{opacity:.6}

/* بطاقات قابلة للكبس */
.hero-link{color:var(--on-accent);text-decoration:none}
.tile-link{color:inherit;text-decoration:none}
.tile-label,.hero-label{display:flex;align-items:center;justify-content:space-between;gap:6px}
.go{display:inline-flex;opacity:.45}
.hero .go{opacity:.7}
.tile-warn .tile-num{color:var(--warn)}

/* الشريط السفلي: كبسولة خلف الأيقونة النشطة */
.tabbar a{gap:4px}
.tab-pill{display:flex;align-items:center;justify-content:center;width:56px;height:30px;border-radius:999px;position:relative}
.tab-pill::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;background:var(--accent-weak);
  transform:scaleX(.3);opacity:0;transition:transform .32s var(--ease-spring),opacity .2s}
.tab-pill svg{position:relative;transition:transform .32s var(--ease-spring)}
.tabbar a[aria-current="page"] .tab-pill::before{transform:scaleX(1);opacity:1}
.tabbar a[aria-current="page"] .tab-pill svg{transform:translateY(-1px) scale(1.08)}
.tabbar a.is-pressed .tab-pill{transform:scale(.9)}
.tab-pill{transition:transform .2s var(--ease-spring)}

/* أزرار التبويب والفلاتر: انتقال ناعم للون */
.chip,.segmented a{transition:transform .22s var(--ease-spring),background-color .25s,color .25s,border-color .25s,box-shadow .25s}

/* دخول الشاشة: البطاقات بتطلع ورا بعض */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
main.enter .view>*,main.enter>.status{animation:rise .42s var(--ease-out) both}
main.enter .view>*:nth-child(1){animation-delay:.02s}
main.enter .view>*:nth-child(2){animation-delay:.06s}
main.enter .view>*:nth-child(3){animation-delay:.1s}
main.enter .view>*:nth-child(4){animation-delay:.14s}
main.enter .view>*:nth-child(5){animation-delay:.18s}
main.enter .view>*:nth-child(n+6){animation-delay:.22s}
main.enter .tiles>*{animation:rise .42s var(--ease-out) both}
main.enter .tiles>*:nth-child(2){animation-delay:.05s}
main.enter .tiles>*:nth-child(3){animation-delay:.1s}
main.enter .tiles>*:nth-child(4){animation-delay:.15s}
main.enter .tiles>*:nth-child(5){animation-delay:.2s}
main.enter .tiles>*:nth-child(6){animation-delay:.25s}

/* الرسمات: الأعمدة بتطلع من تحت، والخط بينرسم */
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.bar{transform-origin:bottom}
main.enter .bar{animation:grow .6s var(--ease-spring) both;animation-delay:calc(.15s + var(--i,0) * 35ms)}
@keyframes draw{from{stroke-dashoffset:2000}to{stroke-dashoffset:0}}
main.enter .spark-line{stroke-dasharray:2000;animation:draw 1.2s var(--ease-out) .15s both}
.meter-fill{transform-origin:right}
main.enter .meter-fill{animation:growX .7s var(--ease-out) .2s both}
@keyframes growX{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* لمعة على القسم يلي وصلتلو من الرئيسية */
[id^="sec-"]{scroll-margin-top:84px;border-radius:var(--radius)}
@keyframes flash{0%{box-shadow:0 0 0 0 var(--accent-border)}30%{box-shadow:0 0 0 4px var(--accent-border)}100%{box-shadow:0 0 0 0 transparent}}
.flash{animation:flash 1.3s var(--ease-out) .25s}

/* الانتقال بين التبويبات: الشريطين ثابتين والمحتوى بينزلق حسب الاتجاه */
.topbar{view-transition-name:topbar}
.tabbar{view-transition-name:tabbar}
main{view-transition-name:page}
::view-transition-old(root),::view-transition-new(root){animation:none}
::view-transition-group(page){animation-duration:.32s;animation-timing-function:var(--ease-out)}
@keyframes out-to-right{to{opacity:0;transform:translateX(18%)}}
@keyframes out-to-left{to{opacity:0;transform:translateX(-18%)}}
@keyframes in-from-left{from{opacity:0;transform:translateX(-22%)}}
@keyframes in-from-right{from{opacity:0;transform:translateX(22%)}}
@keyframes fade-out{to{opacity:0}}
@keyframes fade-in{from{opacity:0}}
/* بالعربي التبويب «يلي بعدو» على اليسار، فالصفحة الجديدة بتجي من اليسار */
:root[data-nav="fwd"]::view-transition-old(page){animation:out-to-right .26s var(--ease-out) both}
:root[data-nav="fwd"]::view-transition-new(page){animation:in-from-left .34s var(--ease-out) both}
:root[data-nav="back"]::view-transition-old(page){animation:out-to-left .26s var(--ease-out) both}
:root[data-nav="back"]::view-transition-new(page){animation:in-from-right .34s var(--ease-out) both}
:root[data-nav="same"]::view-transition-old(page){animation:fade-out .16s ease both}
:root[data-nav="same"]::view-transition-new(page){animation:fade-in .24s ease both}

/* اسحب للتحديث */
.ptr{position:fixed;top:calc(64px + env(safe-area-inset-top));left:50%;z-index:6;width:40px;height:40px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;background:var(--surface);color:var(--accent);box-shadow:var(--shadow);
  transform:translate(-50%,-48px);opacity:0;pointer-events:none}
.ptr.ready{background:var(--accent);color:var(--on-accent)}
.ptr.settle{transition:transform .26s var(--ease-out),opacity .26s}

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

/* ================================================================ الميزات الإضافية */
.goal,.rate{display:flex;align-items:center;gap:12px;padding:14px;color:inherit}
.goal-icon{width:40px;height:40px;border-radius:12px;background:var(--accent-weak);color:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.goal-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.goal-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.goal-pct{font-size:17px;font-weight:700;color:var(--accent)}
.goal-meter{height:8px;margin:2px 0}
.goal-meter .meter-fill{background:var(--accent)}
.meter-fill.fill-ok{background:var(--ok)}
.rate-now{font-weight:700}
.rate-pill{margin-inline-start:8px}
.tone-text-danger{color:var(--danger)}
.back{display:inline-flex;align-items:center;gap:4px;min-height:var(--tap);font-size:14px;font-weight:500;align-self:flex-start}
.back svg{transform:scaleX(-1)}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
.btn-wa{background:var(--ok);color:var(--on-accent)}
.btn-soft{background:var(--accent-weak);color:var(--accent)}
.tips{margin:0;padding:0 18px 0 0;display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--text-muted)}
.tips strong{color:var(--text)}
.segmented.seg-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.segmented button{min-height:40px;border:0;border-radius:999px;background:transparent;color:var(--text-muted);font:inherit;font-size:14px;font-weight:500;cursor:pointer}
.segmented button[aria-pressed="true"]{background:var(--surface);color:var(--accent);font-weight:700;box-shadow:var(--shadow-sm)}
.segmented button.is-pressed{transform:scale(.94)}
.staff-card{padding:14px;display:flex;flex-direction:column;gap:12px}
.staff-head{display:flex;align-items:center;gap:12px}
.staff-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;margin:0}
.staff-grid div{display:flex;flex-direction:column;gap:2px}
.staff-grid dt{font-size:12px;color:var(--text-muted)}
.staff-grid dd{margin:0;font-weight:700;font-size:15px}
.flags{list-style:none;margin:0;padding:0;display:flex;gap:6px;flex-wrap:wrap}
.settings-card{padding:16px;display:flex;flex-direction:column;gap:10px}
.settings-title{display:flex;align-items:center;gap:8px;color:var(--accent)}
.settings-title h2{font-size:16px;font-weight:700;color:var(--text)}
.goal-form{display:flex;gap:8px;align-items:stretch}
.goal-form .field{flex:1}
.goal-form .btn{align-self:stretch}
.field-cur{color:var(--text-muted);padding-inline:8px}
.field-error:empty{display:none}
.toggles{list-style:none;margin:0;padding:0}
.toggles li+li{border-top:1px solid var(--border-soft)}
.toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;font-size:14px;cursor:pointer;position:relative}
.toggle input{position:absolute;opacity:0;width:1px;height:1px}
.switch{width:46px;height:28px;border-radius:999px;background:var(--surface-3);position:relative;flex-shrink:0;transition:background-color .25s}
.switch::after{content:"";position:absolute;top:3px;right:3px;width:22px;height:22px;border-radius:999px;background:var(--surface);box-shadow:var(--shadow-sm);transition:transform .3s var(--ease-spring)}
.toggle input:checked+.switch{background:var(--accent)}
.toggle input:checked+.switch::after{transform:translateX(-18px)}
.toggle input:focus-visible+.switch{outline:3px solid var(--accent-border);outline-offset:2px}
.center{text-align:center}
.ok-card{border:1px solid var(--ok-weak)}
.topbar a.icon-btn{color:inherit}

/* ================================================================ المورّدون */
.view-head-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.btn-sm{min-height:40px;padding:0 14px;font-size:14px}
.supplier-head{display:flex;align-items:center;gap:14px;padding:16px}
.avatar-lg{width:56px;height:56px;font-size:24px}
.supplier-name{font-size:20px;font-weight:700;margin:0 0 4px}
.supplier-phone{font-size:17px;font-weight:600;color:var(--accent);text-decoration:none;display:inline-block}
.supplier-products{padding:12px}
.block-head h2 a{color:inherit;text-decoration:underline;text-decoration-color:var(--border-strong);text-underline-offset:4px}
.radio{width:22px;height:22px;border-radius:999px;border:2px solid var(--border-strong);flex-shrink:0;position:relative;transition:border-color .2s}
.radio::after{content:"";position:absolute;top:4px;right:4px;bottom:4px;left:4px;border-radius:999px;background:var(--accent);transform:scale(0);transition:transform .25s var(--ease-spring)}
.toggle input:checked+.radio{border-color:var(--accent)}
.toggle input:checked+.radio::after{transform:scale(1)}

/* ================================================================ نسخة الويب */
.gsi-slot{display:flex;justify-content:center;min-height:44px}
.install-hint{background:var(--accent-weak);border-radius:var(--radius);padding:12px 14px;font-size:13px;color:var(--text)}
.install-hint strong{display:block;margin-bottom:4px;color:var(--accent)}
.install-hint ol{margin:0;padding-inline-start:18px;display:flex;flex-direction:column;gap:2px}
.share-glyph{display:inline-block;transform:rotate(-90deg)}

/* ================================================================ موبايلات قديمة (WebView قبل كروم 84: ما في gap بالـflex) */
.no-flexgap .view>*+*,.no-flexgap .stack>*+*,.no-flexgap .settings-card>*+*,.no-flexgap .staff-card>*+*,
.no-flexgap .login-card>*+*,.no-flexgap .goal-main>*+*,.no-flexgap .row-main>*+*{margin-top:12px}
.no-flexgap .row>*+*,.no-flexgap .topbar-actions>*+*,.no-flexgap .actions>*+*,.no-flexgap .chips>*,
.no-flexgap .goal>*+*,.no-flexgap .rate>*+*,.no-flexgap .staff-head>*+*,.no-flexgap .supplier-head>*+*,
.no-flexgap .btn>*+*,.no-flexgap .tile-label>*+*,.no-flexgap .flags>*{margin-inline-start:10px}
.no-flexgap .chips>*,.no-flexgap .flags>*{margin-bottom:8px}