/* =====================================================================
   AvaPay — کارت بانکی داشبورد (موجودی کل + ولت‌ها + نمودار تغییرات)
   تم تیره: نیلی/بنفش عمیق · تم روشن: صدفی/یاسی
   اندازه‌ها با cqw (نسبت به عرض کارت) تا در هر عرضی متناسب بماند
   ===================================================================== */
.abc-wrap{margin:0 auto 14px;max-width:640px;perspective:1100px}
.abc{
  --t:#FFFFFF; --m:rgba(222,214,255,.72); --line:rgba(255,255,255,.14);
  --s1:#3B2BD9; --s2:#7C3AED; --s3:#6D28D9; --s4:#A855F7; --w3:rgba(129,140,248,.35);
  --bg:radial-gradient(120% 120% at 100% 0%,#5B21B6 0%,transparent 45%),radial-gradient(90% 100% at 0% 100%,#1E1B8F 0%,transparent 55%),linear-gradient(135deg,#120B4A 0%,#1A0E5C 45%,#2A1185 100%);
  --edge:rgba(167,139,250,.55); --shadow:0 30px 60px -28px rgba(76,29,149,.85),0 10px 24px -14px rgba(30,27,143,.6);
  --wd:1;
  position:relative;container-type:inline-size;box-sizing:border-box;direction:ltr;width:100%;aspect-ratio:1.62/1;min-height:190px;
  border-radius:clamp(20px,5cqw,30px);overflow:hidden;isolation:isolate;cursor:pointer;color:var(--t);
  background:var(--bg);border:1px solid var(--edge);box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 0 1px rgba(255,255,255,.04);
  font-family:"Inter","SF Pro Display","Segoe UI",Vazirmatn,system-ui,sans-serif;font-variant-numeric:tabular-nums;
  transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.9,.3,1),box-shadow .4s;-webkit-tap-highlight-color:transparent;outline:none}
html[data-theme="light"] .abc{
  --t:#170F3D; --m:#6B6191; --line:rgba(76,29,149,.14);
  --s1:#C4B5FD; --s2:#E9D5FF; --s3:#A78BFA; --s4:#DDD6FE; --w3:rgba(124,58,237,.25);
  --bg:radial-gradient(120% 120% at 100% 0%,#E9D5FF 0%,transparent 50%),radial-gradient(90% 100% at 0% 100%,#DBEAFE 0%,transparent 55%),linear-gradient(135deg,#FFFFFF 0%,#F5F3FF 45%,#EDE9FE 100%);
  --edge:rgba(139,92,246,.35); --shadow:0 28px 56px -30px rgba(76,29,149,.45),0 10px 22px -16px rgba(99,102,241,.35)}
.abc:focus-visible{box-shadow:var(--shadow),0 0 0 3px rgba(167,139,250,.6)}

/* پس‌زمینه: موج‌ها + نمودار */
.abc-bg{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.abc-s1{stop-color:var(--s1);stop-opacity:.0}.abc-s2{stop-color:var(--s2);stop-opacity:.55}
.abc-s3{stop-color:var(--s3);stop-opacity:.15}.abc-s4{stop-color:var(--s4);stop-opacity:.6}
.abc-wave1{opacity:.9;animation:abcWave 12s ease-in-out infinite alternate;transform-origin:50% 100%}
.abc-wave2{opacity:.8;animation:abcWave 9s ease-in-out infinite alternate-reverse;transform-origin:100% 100%}
.abc-wave3{stroke:var(--w3)}
@keyframes abcWave{to{transform:translateX(-14px) scaleY(1.05)}}
#abcLine{opacity:.8;stroke-dasharray:3000;stroke-dashoffset:3000;transition:stroke-dashoffset 2.2s cubic-bezier(.22,1,.36,1)}
.abc.drawn #abcLine{stroke-dashoffset:0}
#abcArea{opacity:0;transition:opacity 1.2s ease .8s}
.abc.drawn #abcArea{opacity:.7}
#abcDot{opacity:0;transition:opacity .4s ease 2s}
.abc.drawn #abcDot{opacity:1;animation:abcPulse 2s ease-in-out 2.4s infinite}
@keyframes abcPulse{50%{r:8;opacity:.6}}
.abc-shine{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.16) 45%,rgba(255,255,255,.04) 52%,transparent 60%);
  background-size:250% 100%;animation:abcShine 6s ease-in-out infinite}
html[data-theme="light"] .abc-shine{background-image:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.75) 45%,rgba(255,255,255,.2) 52%,transparent 60%)}
@keyframes abcShine{0%,55%{background-position:150% 0}100%{background-position:-60% 0}}

/* محتوا */
.abc>div{position:relative;z-index:2}
.abc-top{position:absolute !important;top:7cqw;left:7cqw;right:6cqw;display:flex;align-items:flex-start;justify-content:space-between}
.abc-logo{display:flex;align-items:center;gap:2.2cqw}
.abc-logo svg{width:9cqw;height:auto;filter:drop-shadow(0 4px 10px rgba(139,92,246,.55))}
.abc-logo span{font-size:6.4cqw;font-weight:800;letter-spacing:-.04em;line-height:1}
.abc-logo b{font-weight:800;color:var(--t)}
.abc-logo i{font-style:normal;margin-left:1.2cqw;background:linear-gradient(135deg,#C4B5FD,#8B5CF6);-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-theme="light"] .abc-logo i{background-image:linear-gradient(135deg,#8B5CF6,#5B21B6)}
.abc-gpc{display:flex;align-items:center;gap:2.4cqw;color:var(--m)}
.abc-gpc span{font-size:1.75cqw;font-weight:600;letter-spacing:.22em;white-space:nowrap}
.abc-gpc svg{width:3.6cqw;color:var(--t);opacity:.9}

.abc-mid{position:absolute !important;top:19cqw;left:7cqw;right:6cqw;display:flex;align-items:center;justify-content:space-between}
.abc-chip{width:12.5cqw;filter:drop-shadow(0 4px 8px rgba(0,0,0,.35))}
.abc-chip svg{display:block;width:100%}
.abc .abc-eye{all:unset;width:7cqw;height:7cqw;min-width:28px;min-height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:max(11px,2.4cqw);color:var(--t);background:rgba(255,255,255,.1);border:1px solid var(--line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer}
html[data-theme="light"] .abc .abc-eye{background:rgba(255,255,255,.7)}

.abc-total{position:absolute !important;left:7cqw;right:24cqw;bottom:7cqw}
.abc-tl{display:flex;align-items:center;gap:1.8cqw;color:var(--m)}
.abc-tl svg{width:3.6cqw;color:var(--t);opacity:.9}
.abc-tl span{font-size:2.15cqw;font-weight:600;letter-spacing:.2em;white-space:nowrap}
.abc-chg{font-style:normal;font-size:1.8cqw;font-weight:800;letter-spacing:0;padding:.5cqw 1.6cqw;border-radius:2cqw;white-space:nowrap;opacity:0;transform:translateY(4px);transition:opacity .5s ease 1.2s,transform .5s ease 1.2s,color .3s,background .3s}
.abc.drawn .abc-chg{opacity:1;transform:none}
.abc-chg.up{color:#4ADE80;background:rgba(34,197,94,.16)}.abc-chg.dn{color:#FB7185;background:rgba(244,63,94,.16)}.abc-chg.flat{color:var(--m);background:rgba(255,255,255,.08)}
html[data-theme="light"] .abc-chg.up{color:#15803D}html[data-theme="light"] .abc-chg.dn{color:#BE123C}
.abc-amt{display:flex;align-items:center;margin-top:1.6cqw;height:10cqw;min-height:30px}
#abcTotal{font-size:8.6cqw;font-weight:700;letter-spacing:-.02em;line-height:1;white-space:nowrap;text-shadow:0 4px 18px rgba(0,0,0,.25)}
html[data-theme="light"] #abcTotal{text-shadow:none}
.abc-caret{display:inline-block;width:.45cqw;min-width:2px;height:7cqw;margin-left:.8cqw;border-radius:2px;background:var(--t);animation:abcBlink .9s steps(1) infinite}
.abc.typed .abc-caret{animation:abcBlink .9s steps(1) 3 forwards;opacity:0}
@keyframes abcBlink{50%{opacity:0}}

/* هولوگرام (به‌جای لوگوی شبکه‌ی کارت) */
.abc-holo{position:absolute !important;right:7cqw;bottom:8cqw;width:12cqw;height:8.5cqw;border-radius:1.8cqw;overflow:hidden;
  background:conic-gradient(from var(--abc-h,0deg),#A78BFA,#F0ABFC,#67E8F9,#86EFAC,#FDE68A,#A78BFA);opacity:.9;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),0 6px 14px -6px rgba(0,0,0,.45);animation:abcHolo 6s linear infinite}
.abc-holo span{position:absolute;inset:18%;border-radius:50%;border:1.5px solid rgba(255,255,255,.7);box-shadow:0 0 0 2cqw rgba(255,255,255,.12)}
@property --abc-h{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes abcHolo{to{--abc-h:360deg}}

/* حالت مخفی */
body.ava-hidden-bal .abc .abc-amt{filter:blur(clamp(7px,2.2cqw,13px));opacity:.85;user-select:none}
.abc .abc-amt{transition:filter .45s ease,opacity .45s ease}
@media (hover:hover){.abc:hover{box-shadow:var(--shadow),0 0 0 1px rgba(196,181,253,.35)}}
@media (prefers-reduced-motion:reduce){.abc *{animation:none !important;transition:none !important}.abc{transition:none}}

/* حاشیه‌ی شیشه‌ای روی همه‌ی لایه‌ها */
.abc::after{content:"";position:absolute;inset:0;z-index:5;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px var(--edge),inset 0 1px 0 rgba(255,255,255,.22)}
/* خوانایی اعداد روی نمودار */
.abc-wt b,.abc-wt small{text-shadow:0 1px 8px rgba(10,5,40,.55)}
html[data-theme="light"] .abc-wt b,html[data-theme="light"] .abc-wt small{text-shadow:0 1px 6px rgba(255,255,255,.9)}

/* برچسب ارز در حال نمایش */
.abc-cur-ic{flex:0 0 auto;width:4.6cqw;height:4.6cqw;min-width:18px;min-height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-size:max(10px,2.5cqw);font-weight:800;color:#fff;background:linear-gradient(135deg,#34D399,#059669);transition:background .4s;box-shadow:0 4px 10px -4px rgba(0,0,0,.5)}
.abc-cur-ic.eur{background:linear-gradient(135deg,#60A5FA,#2563EB)}
.abc-cur-ic.usdt{background:linear-gradient(135deg,#2DD4BF,#0F9F84)}
.abc-cur-ic.irr{background:linear-gradient(135deg,#C084FC,#7C3AED)}
#abcCurLbl{min-width:0;font-size:max(9px,2.15cqw);transition:opacity .25s}
.abc-dots{display:flex;gap:1.2cqw;margin-top:1.6cqw}
.abc-dots i{width:1.4cqw;height:1.4cqw;min-width:5px;min-height:5px;border-radius:2cqw;background:var(--m);opacity:.35;transition:.35s}
.abc-dots i.on{width:4.5cqw;opacity:1;background:linear-gradient(90deg,#C4B5FD,#8B5CF6)}
.abc.typed .abc-caret{animation:abcBlink .9s steps(1) infinite;opacity:1}

/* ---- حس کارت واقعی: گوشه‌های گرد استاندارد کارت بانکی، بدون کادر ---- */
.abc{border:0 !important;border-radius:5.2% / 8.4% !important;
  box-shadow:0 26px 50px -24px rgba(40,20,120,.75),0 8px 18px -10px rgba(20,10,70,.55) !important}
html[data-theme="light"] .abc{box-shadow:0 24px 46px -26px rgba(76,29,149,.45),0 8px 16px -12px rgba(76,29,149,.3) !important}
.abc::after{box-shadow:inset 0 1px 0 rgba(255,255,255,.16) !important}
html[data-theme="light"] .abc::after{box-shadow:inset 0 1px 0 rgba(255,255,255,.9) !important}

/* چشم کنار برچسب ارز */
.abc .abc-eye{width:5.4cqw;height:5.4cqw;min-width:24px;min-height:24px;font-size:max(10px,2cqw);margin-left:.6cqw}
.abc-tl{flex-wrap:nowrap}

/* دکمه‌های کوچک شارژ / تسویه — شیشه‌ای، کنار هم */
.abc-acts{display:flex;gap:1.8cqw}
.abc .abc-act{all:unset;display:inline-flex;align-items:center;gap:1.3cqw;height:6.6cqw;min-height:26px;padding:0 2.6cqw 0 2cqw;border-radius:99px;cursor:pointer;
  font-family:Vazirmatn,system-ui,sans-serif;font-size:max(10px,2.25cqw);font-weight:800;color:var(--t);direction:rtl;white-space:nowrap;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 6px 14px -8px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.18);transition:transform .15s,background .2s}
.abc .abc-act:active{transform:scale(.94)}
.abc .abc-act i{width:4cqw;height:4cqw;min-width:16px;min-height:16px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:max(8px,1.7cqw);color:#fff}
.abc .abc-act.top i{background:linear-gradient(135deg,#8B5CF6,#6366F1)}
.abc .abc-act.set i{background:linear-gradient(135deg,#34D399,#059669)}
@media (hover:hover){.abc .abc-act:hover{background:rgba(255,255,255,.2)}}
html[data-theme="light"] .abc .abc-act{background:rgba(255,255,255,.72);border-color:rgba(124,58,237,.16);box-shadow:0 6px 14px -10px rgba(76,29,149,.45)}

/* موج‌ها هنگام حرکت از لبه‌ی راست جدا نشوند */
.abc-bg{width:calc(100% + 40px) !important;left:0;right:auto}

/* هیچ کادر/پس‌زمینه‌ای پشت کارت نباشد (استایل‌های عمومی بخش‌ها اینجا اثر نکنند) */
html body .abc-wrap,html[data-theme] body .abc-wrap{background:none !important;border:0 !important;box-shadow:none !important;outline:0 !important;padding:0 !important;border-radius:0 !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important}
html body .abc-wrap::before,html body .abc-wrap::after{content:none !important;display:none !important}