/* TraderPro Mini App — v2.5.3 visual refinement layer.
   Loaded after plus3.css. Uses only existing brand tokens (brand-tokens.css). */

/* Tabular figures keep prices/amounts from jittering as they update */
.hero-number, .kpi, .kv, td, .mono, [data-num], .price, .pnl, .amount {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* Cards: layered depth + soft top highlight */
.card {
  border: 1px solid color-mix(in srgb, var(--divider) 80%, var(--gold) 6%);
  background-image: linear-gradient(180deg, color-mix(in srgb, #fff 4%, transparent), transparent 42%);
  box-shadow: 0 1px 0 color-mix(in srgb, #fff 6%, transparent) inset,
              0 1px 2px rgba(0,0,0,.18), 0 8px 24px -8px rgba(0,0,0,.38);
}
:root[data-theme="light"] .card, .light .card {
  background-image: linear-gradient(180deg, rgba(255,255,255,.7), transparent 50%);
  box-shadow: 0 1px 2px rgba(20,20,40,.06), 0 10px 26px -12px rgba(20,20,40,.18);
}

/* Floating glass tab bar with safe-area padding */
.tabbar {
  padding-bottom: max(6px, env(safe-area-inset-bottom));
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
  box-shadow: 0 -8px 30px -10px rgba(0,0,0,.45);
}
.tabbar button { letter-spacing: .1px; }
.tabbar button.active svg { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--gold) 55%, transparent)); }

/* Buttons: clearer depth, focus and disabled states */
.btn { border-radius: 14px; font-weight: 700; }
.btn--primary {
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--gold) 82%, #fff), var(--gold));
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 6px 16px -6px color-mix(in srgb, var(--gold) 70%, transparent);
}
.btn--sell {
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--danger) 82%, #fff), var(--danger));
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 6px 16px -6px color-mix(in srgb, var(--danger) 70%, transparent);
}
.btn:focus-visible, .chip:focus-visible, .tabbar button:focus-visible, .field:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--gold) 80%, transparent); outline-offset: 2px;
}

/* Inputs */
.field { border-radius: 12px; transition: border-color 140ms ease, box-shadow 140ms ease; }
.field:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent); }

/* Pills: crisper with a hairline ring */
.pill { box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 25%, transparent) inset; letter-spacing: .1px; }
.pill-open::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-inline-end: 5px;
  border-radius: 50%; background: currentColor; vertical-align: 1px; animation: p4pulse 1.8s ease-in-out infinite; }
@keyframes p4pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.7); } }

/* Bottom sheet: grab handle + stronger backdrop */
.sheet-backdrop { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sheet { position: relative; border-top: 1px solid color-mix(in srgb, var(--gold) 18%, var(--divider));
  box-shadow: 0 -16px 48px -12px rgba(0,0,0,.55); padding-bottom: max(16px, env(safe-area-inset-bottom)); }
.sheet::before { content: ""; display: block; width: 38px; height: 4px; margin: -4px auto 12px;
  border-radius: 4px; background: color-mix(in srgb, var(--muted) 45%, transparent); }

/* Skeleton shimmer smoother */
.skel { background-size: 220% 100%; animation-duration: 1.4s; border-radius: 8px; }

/* Typography and rendering */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg { max-width: 100%; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pill-open::before { animation: none; }
  .skel { animation: none; }
  .btn, .chip, .card { transition: none; }
}

/* ===== v2.5.4 — لایه‌ی دوم: فضای کلی، هیرو، آیکن‌ها، لیست‌ها ===== */
/* پس‌زمینه‌ی aurora ملایم پشت کل برنامه */
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 40% at 85% -5%, color-mix(in srgb, var(--gold) 14%, transparent), transparent 70%),
    radial-gradient(50% 35% at 5% 105%, color-mix(in srgb, var(--info, var(--gold)) 10%, transparent), transparent 70%);
}
/* مرز گرادیانی طلایی برای کارت‌های برجسته */
.lvlcard, .hero, .card.hero {
  position: relative; border-color: transparent;
  background-image: linear-gradient(var(--surface), var(--surface)),
    linear-gradient(135deg, color-mix(in srgb, var(--gold) 70%, transparent), transparent 40%, color-mix(in srgb, var(--gold) 35%, transparent));
  background-origin: border-box; background-clip: padding-box, border-box;
}
/* دکمه‌های آیکنی گرد با شیشه */
.iconbtn { background: color-mix(in srgb, var(--surface) 70%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 color-mix(in srgb, #fff 8%, transparent) inset, 0 4px 12px -6px rgba(0,0,0,.5); }
.iconbtn:hover { border-color: color-mix(in srgb, var(--gold) 45%, var(--divider)); }
/* ردیف‌های لیست: جداکننده‌ی محو و حالت فشردن */
.row, .list > * { transition: background-color 120ms ease; }
.row:active, .list > *:active { background: color-mix(in srgb, var(--gold) 8%, transparent); }
/* سود/زیان رنگی با درخشش خیلی ملایم */
.up, .profit, .pos { text-shadow: 0 0 14px color-mix(in srgb, var(--success) 35%, transparent); }
.down, .loss, .neg { text-shadow: 0 0 14px color-mix(in srgb, var(--danger) 30%, transparent); }
/* chips انتخاب‌شده */
.chip.active, .chip.on, .chip[aria-pressed="true"] {
  background: color-mix(in srgb, var(--gold) 22%, transparent);
  border-color: color-mix(in srgb, var(--gold) 65%, transparent); color: var(--gold-text);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 25%, transparent) inset;
}
/* اسکرول‌بار باریک */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--muted) 40%, transparent) transparent; }
::selection { background: color-mix(in srgb, var(--gold) 35%, transparent); }
/* ورود نرم صفحه‌ها */
.screen.active { animation: p4in 260ms cubic-bezier(.2,.8,.2,1) both; }
@keyframes p4in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* toast شیشه‌ای */
.toast { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-radius: 14px; }
@media (prefers-reduced-motion: reduce) { .screen.active { animation: none; } }

/* ===== v2.5.5 — نوار تخصیص موجودی + هیرو طلایی ===== */
.p4-alloc { display: flex; gap: 3px; height: 10px; margin: 10px 0 4px; direction: ltr; }
.p4-alloc i { display: block; height: 100%; border-radius: 6px; transition: width 500ms cubic-bezier(.2,.8,.2,1); }
.p4-alloc .a { width: var(--pa, 0%); background: linear-gradient(180deg, color-mix(in srgb, var(--success) 78%, #fff), var(--success));
  box-shadow: 0 0 12px -2px color-mix(in srgb, var(--success) 60%, transparent); }
.p4-alloc .l { width: var(--pl, 0%); background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 78%, #fff), var(--gold)); }
.p4-alloc.is-empty { background: var(--divider); border-radius: 6px; }
[dir="rtl"] .p4-alloc, :root[lang="fa"] .p4-alloc { direction: rtl; }
@media (prefers-reduced-motion: reduce) { .p4-alloc i { transition: none; } }