.arb { --arb-yes:#3D6BFF; --arb-no:#7C5CFF; --arb-gain:#12A97A; --arb-gain-ink:#0B8A63; --arb-warn:#B45309;
  grid-column:1/-1; position:relative; isolation:isolate; overflow:hidden; border:1px solid var(--line); border-radius:22px; background:var(--surface);
  box-shadow:0 1px 2px rgba(19,28,59,.04),0 34px 80px -46px rgba(19,28,59,.38); container-type:inline-size; }
.arb::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(520px 260px at 50% 58%,rgba(61,107,255,.08),transparent 70%),
    linear-gradient(rgba(61,107,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(61,107,255,.045) 1px,transparent 1px);
  background-size:auto,32px 32px,32px 32px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 55%,#000 30%,transparent 85%); mask-image:radial-gradient(ellipse 80% 70% at 50% 55%,#000 30%,transparent 85%); }
.arb.is-open::before { background:radial-gradient(520px 260px at 50% 58%,rgba(18,169,122,.12),transparent 70%),
    linear-gradient(rgba(18,169,122,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(18,169,122,.05) 1px,transparent 1px); background-size:auto,32px 32px,32px 32px; }

.arb-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px 28px; flex-wrap:wrap; padding:26px 28px 4px; }
.arb-intro { flex:1 1 420px; min-width:0; }
.arb-kicker { display:inline-flex; align-items:center; gap:10px; margin:0; font:600 11.5px/1.5 'JetBrains Mono',monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
html[lang="ar"] .arb-kicker,html[lang="hi"] .arb-kicker { letter-spacing:0; font-family:inherit; font-size:13px; text-transform:none; }
.arb-kicker i { width:8px; height:8px; border-radius:50%; background:var(--arb-gain); box-shadow:0 0 0 0 rgba(18,169,122,.5); animation:arbPing 2s ease-out infinite; }
@keyframes arbPing { 0% { box-shadow:0 0 0 0 rgba(18,169,122,.5); } 70%,100% { box-shadow:0 0 0 10px rgba(18,169,122,0); } }
.arb h2 { margin:8px 0 8px; font-size:clamp(22px,2.6cqi,30px); line-height:1.15; font-weight:650; letter-spacing:-.025em; color:var(--ink); }
.arb-lead { margin:0; max-width:64ch; font-size:15px; line-height:1.65; color:var(--ink-2); }
.arb-score { display:flex; gap:10px; margin:4px 0 0; }
.arb-score>div { min-width:112px; padding:10px 14px 9px; border:1px solid var(--line); border-radius:14px; background:var(--surface); }
.arb-score dt { font:600 10.5px/1.4 'JetBrains Mono',monospace; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
html[lang="ar"] .arb-score dt,html[lang="hi"] .arb-score dt { letter-spacing:0; font-family:inherit; font-size:12px; text-transform:none; }
.arb-score dd { margin:4px 0 0; font:700 24px/1.1 'JetBrains Mono',monospace; color:var(--ink); font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:isolate; }
.arb-score div+div dd { color:var(--arb-gain-ink); }

.arb-stage { position:relative; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; padding:18px 20px 6px; }
.arb-core { grid-column:1/-1; grid-row:2; }
.arb-links { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; z-index:0; }
.arb-link { fill:none; stroke-width:1.6; stroke-linecap:round; stroke-dasharray:2 9; opacity:.55; animation:arbFlow 1.1s linear infinite; transition:stroke .4s ease, opacity .4s ease; }
.arb-link-yes { stroke:var(--arb-yes); } .arb-link-no { stroke:var(--arb-no); }
.arb.is-open .arb-link { stroke:var(--arb-gain); opacity:.95; animation-duration:.45s; }
@keyframes arbFlow { to { stroke-dashoffset:-22; } }
.arb-lane { position:relative; z-index:1; min-width:0; padding:14px 14px 10px; border:1px solid var(--line); border-radius:18px; background:linear-gradient(180deg,var(--surface),var(--surface-alt)); transition:border-color .35s ease, box-shadow .35s ease, translate .9s cubic-bezier(.16,1,.3,1), opacity .7s ease; }
.arb-lane-top { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:31px; }
.arb-logo .x-pf-logo { margin:0; }
.arb-sim { display:inline-flex; align-items:center; gap:6px; font:500 10px/1.3 'JetBrains Mono',monospace; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); text-align:end; }
html[lang="ar"] .arb-sim,html[lang="hi"] .arb-sim { letter-spacing:0; font-family:inherit; font-size:11px; text-transform:none; }
.arb-sim::before { content:''; flex:none; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.6; }
.arb-lane-label { margin:14px 0 2px; font-size:13px; line-height:1.4; color:var(--ink-3); }
.arb-lane-label b { font-weight:700; letter-spacing:.02em; }
.arb-yes .arb-lane-label b { color:var(--arb-yes); } .arb-no .arb-lane-label b { color:var(--arb-no); }
.arb-price { display:flex; align-items:flex-start; margin:0; font:700 clamp(40px,6cqi,56px)/1 'JetBrains Mono',monospace; letter-spacing:-.04em; color:var(--ink); direction:ltr; transition:color .35s ease; }
.arb-price small { margin:.16em 0 0 .06em; font-size:.46em; font-weight:600; color:var(--ink-3); }
.arb-digits { display:inline-flex; }
.arb-d { display:inline-block; height:1.16em; overflow:hidden; -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent); mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent); }
.arb-col { display:block; transition:transform .42s cubic-bezier(.16,1,.3,1); }
.arb-col span { display:block; height:1.16em; line-height:1.16; text-align:center; }
.arb-spark { display:block; width:100%; height:64px; margin-top:8px; }
.arb.is-open .arb-lane { border-color:rgba(18,169,122,.55); box-shadow:0 0 0 4px rgba(18,169,122,.10),0 20px 40px -28px rgba(18,169,122,.6); }
.arb.is-open .arb-price { color:var(--arb-gain-ink); }

.arb-core { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; min-width:0; }
.arb-dial { position:relative; width:100%; max-width:360px; }
.arb-gauge { display:block; width:100%; height:auto; overflow:visible; direction:ltr; }
.arb-track { fill:none; stroke:var(--surface-alt); stroke-width:18; stroke-linecap:round; }
.arb-zone { fill:none; stroke:rgba(18,169,122,.16); stroke-width:18; stroke-linecap:round; }
.arb-cost { fill:none; stroke:url(#arbCost); stroke-width:18; stroke-linecap:round; opacity:.9; }
.arb-gap { fill:none; stroke:var(--arb-gain); stroke-width:18; stroke-linecap:round; }
.arb-gap-glow { fill:none; stroke:var(--arb-gain); stroke-width:22; stroke-linecap:round; opacity:.45; }
.arb-tick { stroke:var(--line-2); stroke-width:1.2; stroke-linecap:round; }
.arb-tick.is-major { stroke:var(--ink-3); stroke-width:1.6; }
.arb-tick.is-limit { stroke:var(--arb-gain); stroke-width:2.4; }
.arb-tick.is-pay { stroke:var(--accent); stroke-width:2.4; }
.arb-tl { font:600 12px 'JetBrains Mono',monospace; fill:var(--ink-3); text-anchor:middle; }
.arb-tl.is-limit { fill:var(--arb-gain-ink); }
.arb-tl.is-pay { fill:var(--accent); }
.arb-tl.is-end { font-size:10.5px; font-weight:500; }
.arb-tl.is-start { text-anchor:start; }
.arb-tl.is-stop { text-anchor:end; }
.arb-knob-halo { fill:rgba(61,107,255,.16); transition:fill .35s ease; }
.arb-knob-dot { fill:var(--surface); stroke:var(--accent); stroke-width:4; transition:stroke .35s ease; }
.arb.is-open .arb-knob-halo,.arb.is-locked .arb-knob-halo { fill:rgba(18,169,122,.22); }
.arb.is-open .arb-knob-dot,.arb.is-locked .arb-knob-dot { stroke:var(--arb-gain); }
.arb-read { position:absolute; left:50%; bottom:4%; translate:-50% 0; width:62%; text-align:center; pointer-events:none; transition:opacity .3s ease; }
.arb-total { margin:0; font:700 clamp(34px,5cqi,46px)/1 'JetBrains Mono',monospace; letter-spacing:-.04em; color:var(--ink); direction:ltr; unicode-bidi:isolate; font-variant-numeric:tabular-nums; }
.arb-total-k { margin:6px 0 0; font-size:12.5px; line-height:1.35; color:var(--ink-3); }
.arb-state { margin:8px 0 0; }
.arb-state span { display:inline-block; padding:4px 11px; border-radius:999px; font:600 11.5px/1.4 'JetBrains Mono',monospace; letter-spacing:.02em; color:var(--ink-3); background:var(--surface-alt); border:1px solid var(--line); transition:color .3s, background .3s, border-color .3s; }
html[lang="ar"] .arb-state span,html[lang="hi"] .arb-state span { font-family:inherit; font-size:12.5px; }
.arb.is-open .arb-state span { color:#fff; background:var(--arb-gain); border-color:var(--arb-gain); }
.arb.is-open .arb-total { color:var(--arb-gain-ink); }
.arb-go { position:relative; margin:10px 0 4px; min-height:52px; padding:0 30px; border:0; border-radius:999px; cursor:pointer; font:inherit; font-size:15px; font-weight:650; letter-spacing:-.005em; color:#fff;
  background:linear-gradient(90deg,#3D6BFF,#5B7CFF); box-shadow:0 14px 30px -14px rgba(61,107,255,.8); transition:translate .2s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, background .3s ease; -webkit-tap-highlight-color:transparent; }
.arb-go:hover { translate:0 -1px; box-shadow:0 18px 36px -14px rgba(61,107,255,.9); }
.arb-go:active { translate:0 1px; }
.arb-go:focus-visible,.arb-auto:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.arb.is-open .arb-go { background:linear-gradient(90deg,#0E9A72,#19C08A); box-shadow:0 14px 34px -12px rgba(18,169,122,.9); animation:arbCall .9s ease-in-out infinite; }
@keyframes arbCall { 50% { box-shadow:0 0 0 8px rgba(18,169,122,.16),0 14px 34px -12px rgba(18,169,122,.9); scale:1.03; } }
.arb-go.is-shake { animation:arbShake .45s cubic-bezier(.36,.07,.19,.97); }
@keyframes arbShake { 20%,60% { translate:-6px 0; } 40%,80% { translate:6px 0; } }
.arb.is-locked .arb-go { opacity:.5; pointer-events:none; animation:none; }

.arb-result { position:absolute; inset:-6px -4px 0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; border-radius:20px;
  opacity:0; scale:.96; pointer-events:none; transition:opacity .3s ease, scale .45s cubic-bezier(.16,1,.3,1); }
.arb.is-locked .arb-result { opacity:1; scale:1; }
.arb.is-locked .arb-read { opacity:0; }
.arb-gauge { transition:opacity .35s ease; }
.arb.is-locked .arb-gauge { opacity:.1; }
.arb-pair { display:flex; align-items:center; gap:10px; direction:ltr; }
.arb-slot { display:grid; min-width:76px; min-height:52px; place-items:center; }
.arb-t { display:inline-flex; flex-direction:column; align-items:center; gap:2px; min-width:72px; padding:8px 14px 9px; border-radius:10px; background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--arb-yes); box-shadow:0 12px 26px -16px rgba(19,28,59,.45); font:600 11px/1.2 'JetBrains Mono',monospace; letter-spacing:.06em; color:var(--ink-3); white-space:nowrap; }
.arb-t b { font-size:20px; letter-spacing:-.03em; color:var(--ink); }
.arb-t-no { border-top-color:var(--arb-no); }
.arb-t.is-flying { position:absolute; left:0; top:0; z-index:6; will-change:transform; }
.arb-fly { position:absolute; inset:0; pointer-events:none; z-index:6; }
.arb.is-locked:not(.is-landed) .arb-slot .arb-t { opacity:0; }
.arb.is-landed .arb-slot .arb-t { animation:arbLand .5s cubic-bezier(.16,1,.3,1); }
@keyframes arbLand { from { scale:1.18; } }
.arb-lock { display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--surface-alt); border:1px solid var(--line); color:var(--ink-3); transition:background .3s, color .3s, border-color .3s; position:relative; }
.arb-lock svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; overflow:visible; }
.arb-shackle { transition:transform .35s cubic-bezier(.34,1.56,.64,1); transform:translateY(-3px); }
.arb.is-landed .arb-shackle { transform:none; }
.arb.is-landed .arb-lock { background:var(--arb-gain); border-color:var(--arb-gain); color:#fff; }
.arb-lock::after { content:''; position:absolute; inset:-2px; border-radius:50%; border:2px solid var(--arb-gain); opacity:0; }
.arb.is-landed .arb-lock::after { animation:arbBurst .8s ease-out; }
@keyframes arbBurst { from { opacity:.9; scale:1; } to { opacity:0; scale:2.4; } }
.arb-outcome { display:flex; align-items:center; gap:10px; max-width:94%; opacity:0; translate:0 8px; transition:opacity .35s ease, translate .45s cubic-bezier(.16,1,.3,1); }
.arb.is-resolved .arb-outcome { opacity:1; translate:none; }
.arb-outcome p { margin:0; font-size:13px; line-height:1.4; color:var(--ink-2); text-align:start; }
.arb-coin { position:relative; flex:none; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#FFB547,#F7931A 60%,#D9780C); color:#fff; font:800 17px/1 Inter,sans-serif; box-shadow:0 6px 14px -6px rgba(217,120,12,.7); }
.arb.is-resolved .arb-coin { animation:arbFlip .6s cubic-bezier(.16,1,.3,1); }
@keyframes arbFlip { from { transform:rotateY(540deg) scale(.6); } }
.arb-coin i { position:absolute; right:-6px; bottom:-4px; width:17px; height:17px; border-radius:50%; background:var(--arb-gain); border:2px solid var(--surface); }
.arb-coin i::before { content:''; position:absolute; left:50%; top:50%; width:0; height:0; border:4px solid transparent; translate:-50% -75%; border-bottom:5px solid #fff; }
.arb.is-down .arb-coin i { background:var(--ink-3); }
.arb.is-down .arb-coin i::before { translate:-50% -25%; border-bottom:4px solid transparent; border-top:5px solid #fff; }
.arb.is-resolved.is-up .arb-slot-yes .arb-t,.arb.is-resolved.is-down .arb-slot-no .arb-t { border-color:var(--arb-gain); box-shadow:0 0 0 3px rgba(18,169,122,.18),0 14px 28px -14px rgba(18,169,122,.7); }
.arb.is-resolved.is-up .arb-slot-yes .arb-t b,.arb.is-resolved.is-down .arb-slot-no .arb-t b { color:var(--arb-gain-ink); }
.arb.is-resolved.is-up .arb-slot-no .arb-t,.arb.is-resolved.is-down .arb-slot-yes .arb-t { opacity:.45; }
.arb-sum { display:flex; align-items:baseline; flex-wrap:wrap; justify-content:center; gap:4px 10px; margin:0; font-size:12.5px; color:var(--ink-3); opacity:0; translate:0 8px; transition:opacity .35s ease .35s, translate .45s cubic-bezier(.16,1,.3,1) .35s; }
.arb.is-resolved .arb-sum { opacity:1; translate:none; }
.arb-sum b { font:700 15px 'JetBrains Mono',monospace; color:var(--ink); direction:ltr; unicode-bidi:isolate; }
.arb-plus { padding:3px 10px; border-radius:999px; background:var(--arb-gain); color:#fff; font:700 15px 'JetBrains Mono',monospace; direction:ltr; unicode-bidi:isolate; }
.arb-op { color:var(--ink-3); }
[dir="rtl"] .arb-op:first-of-type { display:inline-block; transform:scaleX(-1); }

.arb-foot { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px 20px; margin-top:14px; padding:14px 22px 16px; border-top:1px solid var(--line); background:var(--surface-alt); }
.arb-msg { flex:1 1 300px; min-height:1.55em; margin:0; font-size:14px; line-height:1.55; color:var(--ink-2); }
.arb-msg.is-good { color:var(--arb-gain-ink); font-weight:550; }
.arb-msg.is-warn { color:var(--arb-warn); }
.arb-times { display:flex; flex-wrap:wrap; gap:6px 16px; margin:0; font-size:12.5px; color:var(--ink-3); }
.arb-times b { font:700 13px 'JetBrains Mono',monospace; color:var(--ink); direction:ltr; unicode-bidi:isolate; }
.arb-auto { min-height:40px; padding:0 18px; border:1px solid var(--line-2); border-radius:999px; background:var(--surface); color:var(--ink); font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; transition:border-color .2s, color .2s, background .2s; }
.arb-auto:hover { border-color:var(--accent); color:var(--accent); }
.arb-auto[aria-pressed="true"] { background:var(--ink); border-color:var(--ink); color:var(--surface); }

.arb:not(.arb-on) .arb-lane { opacity:0; }
.arb:not(.arb-on) .arb-yes { translate:-28px 0; }
.arb:not(.arb-on) .arb-no { translate:28px 0; }
[dir="rtl"] .arb:not(.arb-on) .arb-yes { translate:28px 0; }
[dir="rtl"] .arb:not(.arb-on) .arb-no { translate:-28px 0; }
.arb-track { stroke-dasharray:100; stroke-dashoffset:0; transition:stroke-dashoffset 1.2s cubic-bezier(.16,1,.3,1); }
.arb:not(.arb-on) .arb-track { stroke-dashoffset:100; }
.arb-tick,.arb-tl { transition:opacity .4s ease calc(var(--i,0) * 30ms + .2s); }
.arb:not(.arb-on) :is(.arb-tick,.arb-tl,.arb-zone,.arb-knob,.arb-read) { opacity:0; }
.arb-zone,.arb-knob,.arb-read { transition:opacity .6s ease .5s; }

@container (min-width:760px) {
  .arb-stage { grid-template-columns:minmax(0,1fr) minmax(300px,360px) minmax(0,1fr); align-items:center; gap:30px; padding:22px 28px 8px; }
  .arb-core { grid-column:auto; grid-row:auto; }
  .arb-lane { padding:16px 16px 12px; }
  .arb-spark { height:78px; }
  .arb-foot { padding:14px 28px 18px; }
}
@container (max-width:520px) {
  .arb-head { padding:22px 18px 2px; }
  .arb-stage { padding:14px 14px 4px; gap:10px; }
  .arb-lane { padding:12px 12px 8px; border-radius:14px; }
  .arb-lane-top { flex-direction:column; align-items:flex-start; gap:6px; }
  .arb-score { width:100%; }
  .arb-score>div { flex:1; min-width:0; }
  .arb-foot { padding:12px 16px 14px; }
  .arb-go { width:100%; }
  .arb-t { min-width:64px; padding:7px 10px 8px; }
  .arb-t b { font-size:17px; }
}

@media (prefers-reduced-motion:reduce) {
  .arb *,.arb::before { animation:none!important; transition:none!important; }
}
@media print { .arb { display:none!important; } }