/* ═══════════════════════════════════════════════════════════════════
   PRØXY — MASTER FIX + ULTRA ANIMATIONS v6.0
   Drop AFTER animations.css  ·  Replaces sidebar-fix.css entirely
   ═══════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════
   0. ROOT — single layout source of truth
   ══════════════════════════════════════════════════════ */
:root {
  --sidebar-w:           260px;
  --sidebar-width:       260px;
  --sidebar-collapsed-w: 68px;
}


/* ══════════════════════════════════════════════════════
   1. SIDEBAR FIXED POSITIONING — bulletproof
      The #1 reason a "fixed" sidebar scrolls away is a
      parent or the element itself having a transform/
      filter/will-change applied.  We strip every property
      that breaks fixed positioning and lock it down.
   ══════════════════════════════════════════════════════ */

.sidebar {
  /* Layout */
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  height: 100vh !important;
  width: var(--sidebar-w) !important;

  /* Visuals */
  background: linear-gradient(
    180deg,
    #0d0b1c 0%,
    #0a0914 40%,
    #0b0a18 70%,
    #080710 100%
  ) !important;
  border-right: 1px solid rgba(124,58,237,0.18) !important;
  z-index: 100 !important;

  /* Layout mode */
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;

  /* Transition only width — no transform, no filter on the container */
  transition: width 0.3s cubic-bezier(0.4,0,0.2,1) !important;

  /* CRITICAL: do NOT apply transform / filter / will-change here
     because they create a new stacking context and break position:fixed.
     Animations that need those must target a child wrapper, not .sidebar */
  transform: none !important;
  will-change: width !important;
}

/* Collapsed */
.sidebar.collapsed {
  width: var(--sidebar-collapsed-w) !important;
}

/* ── Fix: px-reveal animation breaks fixed positioning ─────────────
   Replace the translateX reveal with an opacity-only fade so
   position:fixed is never disturbed                                 */
.sidebar.px-reveal {
  animation: sidebarRevealSafe 0.9s cubic-bezier(0.16,1,0.3,1) both !important;
  transform: none !important;
}
@keyframes sidebarRevealSafe {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* ── Pseudo-elements: keep them non-fixed so they don't inherit ──── */
.sidebar::before,
.sidebar::after {
  position: absolute !important;  /* absolute inside the fixed sidebar = fine */
}


/* ══════════════════════════════════════════════════════
   2. MAIN CONTENT — zero gap, pixel-perfect flush
   ══════════════════════════════════════════════════════ */

.main-content {
  margin-left: var(--sidebar-w) !important;
  padding-left: 0 !important;
  border-left: none !important;
  box-sizing: border-box !important;
  /* Must match sidebar transition exactly */
  transition: margin-left 0.3s cubic-bezier(0.4,0,0.2,1) !important;
}
.main-content.sidebar-collapsed {
  margin-left: var(--sidebar-collapsed-w) !important;
}

/* Mobile: sidebar overlays, not pushes */
@media (max-width: 768px) {
  .main-content,
  .main-content.sidebar-collapsed {
    margin-left: 0 !important;
  }
}


/* ══════════════════════════════════════════════════════
   3. LOGO AREA — no clipping of "by Chams & PLK"
   ══════════════════════════════════════════════════════ */

.sidebar-logo {
  display: flex !important;
  align-items: center !important;
  padding: 20px 14px 18px !important;
  border-bottom: 1px solid rgba(124,58,237,0.15) !important;
  min-height: 80px !important;
  flex-shrink: 0 !important;
  gap: 8px !important;
  /* Never clip children — the fix is here */
  overflow: visible !important;
  position: relative !important;
}

.logo-container {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: visible !important;  /* was hidden — caused clipping */
}

.proxy-logo {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
}

/* "journal" + "by Chams & PLK" column */
.logo-sub {
  display: flex !important;
  flex-direction: column !important;
  flex-shrink: 1 !important;
  min-width: 0 !important;
  overflow: visible !important;  /* was hidden — caused clipping */
  gap: 1px !important;
}

.logo-subtitle,
.logo-creators {
  overflow: visible !important;
  white-space: nowrap !important;
  text-overflow: unset !important;
  display: block !important;
  transition: opacity 0.2s ease !important;
}

/* Toggle button stays at far right */
.sidebar-toggle-btn {
  flex-shrink: 0 !important;
  margin-left: auto !important;
  z-index: 2 !important;
  /* Never let a transform here break the parent fixed layout */
  position: relative !important;
}


/* ══════════════════════════════════════════════════════
   4. COLLAPSED STATE
   ══════════════════════════════════════════════════════ */

.sidebar.collapsed .sidebar-logo {
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 12px 0 10px !important;
  gap: 6px !important;
  overflow: hidden !important;
}
.sidebar.collapsed .logo-container {
  flex: unset !important;
  justify-content: center !important;
  width: 100% !important;
}
.sidebar.collapsed .proxy-logo {
  gap: 0 !important;
  justify-content: center !important;
}
.sidebar.collapsed .logo-sub {
  overflow: hidden !important;
  width: 0 !important;
  opacity: 0 !important;
}
.sidebar.collapsed .sidebar-toggle-btn {
  margin-left: 0 !important;
}

/* Clock in collapsed mode */
.sidebar.collapsed #px-clock {
  font-size: 0.55rem !important;
  letter-spacing: 0.5px !important;
  padding: 4px 2px 8px !important;
}

/* Footer in collapsed mode */
.sidebar.collapsed .sidebar-footer {
  align-items: center !important;
  padding: 12px 0 16px !important;
}
.sidebar.collapsed .sf-btn {
  width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  justify-content: center !important;
  border-radius: 12px !important;
  position: relative !important;
}
.sidebar.collapsed .sf-btn::after {
  content: attr(data-tooltip) !important;
  position: absolute !important;
  left: calc(var(--sidebar-collapsed-w) + 10px) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: #1a1230 !important;
  border: 1px solid rgba(124,58,237,0.3) !important;
  color: #e2e8f0 !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  padding: 5px 12px !important;
  border-radius: 8px !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transition: opacity 0.15s ease !important;
  z-index: 300 !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5) !important;
}
.sidebar.collapsed .sf-btn:hover::after { opacity: 1 !important; }


/* ══════════════════════════════════════════════════════
   5. DEAD-ZONE FILL — nav empty space looks intentional
   ══════════════════════════════════════════════════════ */

.sidebar-nav {
  position: relative !important;
  overflow: visible !important;
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent 60%,
    rgba(124,58,237,0.025) 100%
  ) !important;
}
.sidebar-nav::before {
  content: '' !important;
  position: absolute !important;
  bottom: -40px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 140px !important;
  height: 140px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(124,58,237,0.06) 0%, transparent 70%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* All content above pseudo layers */
.sidebar-logo,
.sidebar-nav,
.sidebar-footer {
  position: relative !important;
  z-index: 1 !important;
}


/* ══════════════════════════════════════════════════════
   ██████████  ULTRA ANIMATIONS  ██████████
   ══════════════════════════════════════════════════════ */

/* ─ A1. LOGO ENTRANCE ─────────────────────────────────
   Use opacity + translateX on the CHILDREN, never on
   .sidebar itself (would break position:fixed)          */
@keyframes logoSlideIn {
  0%   { opacity: 0; transform: translateX(-20px); filter: blur(4px); }
  60%  { filter: blur(0); }
  100% { opacity: 1; transform: translateX(0); filter: blur(0); }
}
.sidebar-logo .logo-container {
  animation: logoSlideIn 0.75s cubic-bezier(0.16,1,0.3,1) 0.2s both;
}
.sidebar-logo .sidebar-toggle-btn {
  animation: logoSlideIn 0.7s cubic-bezier(0.16,1,0.3,1) 0.35s both;
}

/* ─ A2. NAV ITEM STAGGER ───────────────────────────── */
@keyframes navItemIn {
  0%   { opacity: 0; transform: translateX(-16px); }
  70%  { transform: translateX(2px); }
  100% { opacity: 1; transform: translateX(0); }
}
.sidebar-nav .nav-item:nth-child(1) { animation: navItemIn 0.5s cubic-bezier(0.16,1,0.3,1) 0.18s both; }
.sidebar-nav .nav-item:nth-child(2) { animation: navItemIn 0.5s cubic-bezier(0.16,1,0.3,1) 0.25s both; }
.sidebar-nav .nav-item:nth-child(3) { animation: navItemIn 0.5s cubic-bezier(0.16,1,0.3,1) 0.32s both; }
.sidebar-nav .nav-item:nth-child(4) { animation: navItemIn 0.5s cubic-bezier(0.16,1,0.3,1) 0.39s both; }
.sidebar-nav .nav-item:nth-child(5) { animation: navItemIn 0.5s cubic-bezier(0.16,1,0.3,1) 0.46s both; }
.sidebar-nav .nav-item:nth-child(6) { animation: navItemIn 0.5s cubic-bezier(0.16,1,0.3,1) 0.53s both; }
.sidebar-nav .nav-item:nth-child(7) { animation: navItemIn 0.5s cubic-bezier(0.16,1,0.3,1) 0.60s both; }

/* ─ A3. NAV HOVER — magnetic spring ───────────────── */
.nav-item {
  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.28s cubic-bezier(0.34,1.56,0.64,1),
    box-shadow 0.28s ease !important;
  overflow: hidden !important;
}
.nav-item:hover {
  transform: translateX(6px) !important;
  box-shadow: 0 4px 22px rgba(124,58,237,0.15) !important;
}
.nav-item.active:hover { transform: translateX(3px) !important; }

/* ─ A4. ACTIVE NAV — pulsing left accent bar ────────── */
.nav-item.active::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important; top: 15% !important; bottom: 15% !important;
  width: 3px !important;
  border-radius: 0 3px 3px 0 !important;
  background: linear-gradient(180deg, #c084fc, #7c3aed) !important;
  box-shadow: 0 0 14px rgba(124,58,237,0.9), 0 0 28px rgba(124,58,237,0.4) !important;
  animation: accentBarIn 0.45s cubic-bezier(0.34,1.56,0.64,1) both !important;
  z-index: 2 !important;
}
@keyframes accentBarIn {
  0%   { transform: scaleY(0); opacity: 0; }
  100% { transform: scaleY(1); opacity: 1; }
}

/* ─ A5. LOGO ICON — continuous glow pulse ────────────── */
@keyframes iconGlowPulse {
  0%,100% { filter: drop-shadow(0 0 6px rgba(124,58,237,0.7)); }
  50%      { filter: drop-shadow(0 0 22px rgba(168,85,247,1))
                     drop-shadow(0 0 44px rgba(124,58,237,0.55)); }
}
.proxy-logo i {
  animation: iconGlowPulse 3s ease-in-out infinite !important;
}

/* ─ A6. LOGO TEXT — gradient shimmer ─────────────────── */
@keyframes logoTextShimmer {
  0%,100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.logo-text {
  background: linear-gradient(
    135deg, #fff 0%, #e9d8fd 30%, #c4b5fd 55%, #7c3aed 100%
  ) !important;
  background-size: 250% 250% !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: logoTextShimmer 5s ease-in-out infinite !important;
}

/* ─ A7. LOGO BORDER GLOW LINE ────────────────────────── */
.sidebar-logo::after {
  content: '' !important;
  position: absolute !important;
  bottom: -1px !important; left: 12% !important; right: 12% !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(124,58,237,0.75), transparent) !important;
  animation: logoBorderPulse 3s ease-in-out infinite !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
@keyframes logoBorderPulse {
  0%,100% { opacity: 0.35; left: 18%; right: 18%; }
  50%      { opacity: 1;    left: 6%;  right: 6%; }
}

/* ─ A8. FOOTER BUTTON SHIMMER ────────────────────────── */
@keyframes btnShimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
.sf-btn-import:hover {
  background: linear-gradient(90deg,
    rgba(124,58,237,0.08) 0%, rgba(168,85,247,0.3) 50%, rgba(124,58,237,0.08) 100%
  ) !important;
  background-size: 200% auto !important;
  animation: btnShimmer 1.2s linear infinite !important;
  box-shadow: 0 0 28px rgba(124,58,237,0.22) !important;
  transform: translateY(-2px) !important;
}
.sf-btn-logout:hover {
  background: linear-gradient(90deg,
    rgba(239,68,68,0.06) 0%, rgba(239,68,68,0.26) 50%, rgba(239,68,68,0.06) 100%
  ) !important;
  background-size: 200% auto !important;
  animation: btnShimmer 1.2s linear infinite !important;
  box-shadow: 0 0 28px rgba(239,68,68,0.18) !important;
  transform: translateY(-2px) !important;
}

/* ─ A9. CLOCK GLOW ───────────────────────────────────── */
#px-clock {
  position: relative !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  transition: font-size 0.3s ease, letter-spacing 0.3s ease !important;
}
@keyframes clockGlow {
  0%,100% { text-shadow: 0 0 8px  rgba(167,139,250,0.25); }
  50%      { text-shadow: 0 0 18px rgba(167,139,250,0.7), 0 0 36px rgba(124,58,237,0.3); }
}
#px-clock { animation: clockGlow 2.2s ease-in-out infinite !important; }

/* ─ A10. TOGGLE BUTTON SPIN ──────────────────────────── */
@keyframes toggleSpin {
  0%   { transform: rotate(0deg)   scale(1); }
  40%  { transform: rotate(185deg) scale(0.78); }
  100% { transform: rotate(360deg) scale(1); }
}
.sidebar-toggle-btn.spinning {
  animation: toggleSpin 0.5s cubic-bezier(0.34,1.56,0.64,1) both !important;
}

/* ─ A11. SCANLINES on sidebar inner layer ────────────── */
.sidebar::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: repeating-linear-gradient(
    0deg,
    transparent, transparent 2px,
    rgba(124,58,237,0.012) 2px,
    rgba(124,58,237,0.012) 4px
  ) !important;
  pointer-events: none !important;
  z-index: 0 !important;
  opacity: 0.6 !important;
}

/* ─ A12. AMBIENT ORB ─────────────────────────────────── */
.sidebar::after {
  content: '' !important;
  position: absolute !important;
  width: 240px !important; height: 240px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(124,58,237,0.09) 0%, transparent 70%) !important;
  bottom: 6% !important; right: -100px !important;
  pointer-events: none !important;
  z-index: 0 !important;
  animation: sidebarOrbDrift 15s ease-in-out infinite !important;
}
@keyframes sidebarOrbDrift {
  0%,100% { transform: translate(0,0) scale(1); }
  33%      { transform: translate(-18px,-30px) scale(1.18); }
  66%      { transform: translate(10px, 20px) scale(0.86); }
}

/* ─ A13. NAV RIPPLE ON CLICK ─────────────────────────── */
.nav-item .nav-ripple {
  position: absolute !important;
  border-radius: 50% !important;
  background: rgba(124,58,237,0.25) !important;
  transform: scale(0) !important;
  animation: rippleOut 0.6s linear forwards !important;
  pointer-events: none !important;
}
@keyframes rippleOut { to { transform: scale(6); opacity: 0; } }

/* ─ A14. PAGE SWAP ───────────────────────────────────── */
@keyframes pageSwipeIn {
  0%   { opacity: 0; transform: translateY(22px); filter: blur(3px); }
  60%  { filter: blur(0); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.page.active {
  animation: pageSwipeIn 0.44s cubic-bezier(0.16,1,0.3,1) both !important;
}

/* ─ A15. STAT CARDS — staggered rise ────────────────── */
@keyframes cardRise {
  0%   { opacity: 0; transform: translateY(32px) scale(0.95); filter: blur(4px); }
  65%  { filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.stat-card, .dashboard-card, .metric-card {
  animation: cardRise 0.6s cubic-bezier(0.16,1,0.3,1) both !important;
}
.stat-card:nth-child(1),.dashboard-card:nth-child(1) { animation-delay: 0.04s !important; }
.stat-card:nth-child(2),.dashboard-card:nth-child(2) { animation-delay: 0.12s !important; }
.stat-card:nth-child(3),.dashboard-card:nth-child(3) { animation-delay: 0.20s !important; }
.stat-card:nth-child(4),.dashboard-card:nth-child(4) { animation-delay: 0.28s !important; }
.stat-card:nth-child(5),.dashboard-card:nth-child(5) { animation-delay: 0.36s !important; }
.stat-card:nth-child(6),.dashboard-card:nth-child(6) { animation-delay: 0.44s !important; }

/* ─ A16. CARD 3D HOVER ───────────────────────────────── */
.card, .account-card {
  transition:
    transform 0.32s cubic-bezier(0.34,1.56,0.64,1),
    border-color 0.3s ease,
    box-shadow 0.3s ease !important;
}
.card:hover {
  transform: translateY(-6px) scale(1.008) !important;
  border-color: rgba(124,58,237,0.4) !important;
  box-shadow:
    0 24px 50px rgba(0,0,0,0.38),
    0 0 0 1px rgba(124,58,237,0.18),
    inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

/* ─ A17. TOPBAR TITLE GLOW ───────────────────────────── */
@keyframes titleGlow {
  0%,100% { text-shadow: none; }
  50%      { text-shadow: 0 0 30px rgba(167,139,250,0.35); }
}
#topbarTitle { animation: titleGlow 4s ease-in-out infinite !important; }

/* ─ A18. BUTTON HAPTIC PRESS ─────────────────────────── */
.btn-primary:active, .sf-btn:active, .nav-item:active {
  transform: scale(0.95) !important;
  transition-duration: 0.08s !important;
}

/* ─ A19. TABLE ROWS ──────────────────────────────────── */
/* IMPORTANT: never set opacity:0 as a base style on tr —
   rows rendered dynamically after load would stay invisible.
   The animation uses `both` fill-mode which handles the
   start state; rows beyond nth-child simply have no delay. */
@keyframes rowIn {
  0%   { opacity: 0; transform: translateX(-14px); }
  100% { opacity: 1; transform: translateX(0); }
}
.trades-table tbody tr {
  /* No opacity:0 here — animation fill-mode handles it */
  animation: rowIn 0.35s cubic-bezier(0.16,1,0.3,1) both !important;
  transition: background 0.2s ease, transform 0.22s cubic-bezier(0.34,1.56,0.64,1) !important;
}
/* Stagger first 20 rows; anything beyond plays immediately */
.trades-table tbody tr:nth-child(1)  { animation-delay: 0.02s !important; }
.trades-table tbody tr:nth-child(2)  { animation-delay: 0.05s !important; }
.trades-table tbody tr:nth-child(3)  { animation-delay: 0.08s !important; }
.trades-table tbody tr:nth-child(4)  { animation-delay: 0.11s !important; }
.trades-table tbody tr:nth-child(5)  { animation-delay: 0.14s !important; }
.trades-table tbody tr:nth-child(6)  { animation-delay: 0.17s !important; }
.trades-table tbody tr:nth-child(7)  { animation-delay: 0.19s !important; }
.trades-table tbody tr:nth-child(8)  { animation-delay: 0.21s !important; }
.trades-table tbody tr:nth-child(9)  { animation-delay: 0.23s !important; }
.trades-table tbody tr:nth-child(10) { animation-delay: 0.25s !important; }
.trades-table tbody tr:nth-child(11) { animation-delay: 0.27s !important; }
.trades-table tbody tr:nth-child(12) { animation-delay: 0.29s !important; }
.trades-table tbody tr:nth-child(13) { animation-delay: 0.31s !important; }
.trades-table tbody tr:nth-child(14) { animation-delay: 0.33s !important; }
.trades-table tbody tr:nth-child(15) { animation-delay: 0.35s !important; }
.trades-table tbody tr:nth-child(n+16) { animation-delay: 0s !important; }
.trades-table tbody tr:hover {
  transform: translateX(7px) !important;
  background: rgba(124,58,237,0.08) !important;
}

/* ─ A20. MODAL SPRING POP ────────────────────────────── */
@keyframes modalPop {
  0%   { opacity: 0; transform: scale(0.86) translateY(28px); filter: blur(6px); }
  70%  { filter: blur(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}
.modal { animation: modalPop 0.42s cubic-bezier(0.34,1.56,0.64,1) both !important; }

/* ─ A21. WIN CIRCLE GLOW ─────────────────────────────── */
#winCircle {
  transition: stroke-dashoffset 1.4s cubic-bezier(0.16,1,0.3,1) !important;
  animation: circleGlow 3s ease-in-out infinite !important;
}
@keyframes circleGlow {
  0%,100% { filter: drop-shadow(0 0 6px  rgba(16,185,129,0.5)); }
  50%      { filter: drop-shadow(0 0 16px rgba(16,185,129,0.9))
                     drop-shadow(0 0 30px rgba(16,185,129,0.4)); }
}

/* ─ A22. CALENDAR CELLS ──────────────────────────────── */
.cal-day {
  transition:
    transform 0.22s cubic-bezier(0.34,1.56,0.64,1),
    border-color 0.2s ease,
    box-shadow 0.2s ease !important;
}
.cal-day:hover {
  transform: scale(1.06) translateY(-3px) !important;
  border-color: rgba(124,58,237,0.5) !important;
  box-shadow: 0 10px 28px rgba(124,58,237,0.22) !important;
  z-index: 2 !important; position: relative !important;
}

/* ─ A23. ACCOUNT CARDS ───────────────────────────────── */
.account-card {
  animation: cardRise 0.55s cubic-bezier(0.16,1,0.3,1) both !important;
}
.account-card:hover {
  transform: translateY(-8px) scale(1.015) !important;
  box-shadow:
    0 28px 56px rgba(0,0,0,0.38),
    0 0 0 1px rgba(124,58,237,0.28) !important;
}

/* ─ A24. FILTER INPUTS ───────────────────────────────── */
.filter-group { transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1) !important; }
.filter-group:hover { transform: translateY(-2px) !important; border-color: rgba(124,58,237,0.4) !important; }
.filter-group:focus-within { border-color: rgba(124,58,237,0.65) !important; box-shadow: 0 0 0 3px rgba(124,58,237,0.15) !important; }

/* ─ A25. TOAST ────────────────────────────────────────── */
@keyframes toastSlideUp {
  0%   { opacity: 0; transform: translateX(-50%) translateY(20px) scale(0.9); }
  70%  { transform: translateX(-50%) translateY(-4px) scale(1.02); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
.toast.show, .toast:not(:empty) {
  animation: toastSlideUp 0.45s cubic-bezier(0.34,1.56,0.64,1) both !important;
}

/* ─ A26. PROGRESS BAR SHIMMER ────────────────────────── */
.progress-bar, .progress-win, .progress-loss {
  position: relative !important; overflow: hidden !important;
  transition: width 1.1s cubic-bezier(0.16,1,0.3,1) !important;
}
.progress-bar::after, .progress-win::after, .progress-loss::after {
  content: '' !important; position: absolute !important; inset: 0 !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent) !important;
  animation: progressShimmer 2s ease-in-out infinite !important;
}
@keyframes progressShimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

/* ─ A27. DRAWDOWN BANNER ─────────────────────────────── */
#drawdownWarning {
  animation: warningSlide 0.5s cubic-bezier(0.16,1,0.3,1) both !important;
  position: relative !important; overflow: hidden !important;
}
#drawdownWarning::before {
  content: '' !important; position: absolute !important;
  left: 0 !important; top: 0 !important; bottom: 0 !important; width: 3px !important;
  background: linear-gradient(180deg, #f59e0b, #ef4444) !important;
  box-shadow: 0 0 14px rgba(245,158,11,0.8) !important;
}
@keyframes warningSlide {
  0%   { opacity: 0; transform: translateY(-28px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ─ A28. SCROLLBAR ───────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(124,58,237,0.32); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(124,58,237,0.65); }

/* ─ A29. REDUCED MOTION ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ══════════════════════════════════════════════════════
   CRITICAL OVERRIDE — animations.css line 808 sets
   opacity:0 on ALL tbody tr as a base style which hides
   every row that doesn't get an nth-child animation.
   This rule wins (later in cascade) and restores visibility.
   ══════════════════════════════════════════════════════ */
.trades-table tbody tr {
  opacity: 1 !important;
}
/* The animation's from-state (opacity:0) still works because
   CSS animations override the cascaded value during playback. */