/* ===================================================================
   TraderCab — 3D HIGH-QUALITY CARD SURFACES (added on request)
   The later "HQ theme" block flattens .stat-card / .brokerage-strip
   (box-shadow:none, ::after hidden). This block restores real depth:
   layered gradient surface, top sheen + bevel, drop shadow, coloured
   top accent bar, corner glow and lit value text. It is placed LAST
   and uses !important so it wins the cascade, and it auto-softens
   under .perf-mode (mobile / low-power) so nothing janks.
   To revert, delete this whole <style nonce="kPmovXGkWTLUoADPvACT5w==" id="tc-3d-cards"> block.
   =================================================================== */
.stat-card,
.brokerage-strip{
  background:
    radial-gradient(125% 125% at 85% -12%, var(--tc-glow, rgba(124,92,252,.16)), transparent 55%),
    linear-gradient(180deg,#1b1b2c 0%,#121221 46%,#0c0c16 100%) !important;
  border:1px solid rgba(124,92,252,.16) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 2px 0 rgba(0,0,0,.5),
    0 22px 44px -20px rgba(0,0,0,.92),
    0 8px 20px -16px rgba(0,0,0,.8) !important;
  transition:transform .26s cubic-bezier(.2,.7,.2,1),box-shadow .26s ease,border-color .26s ease !important;
}
.stat-card:hover{
  transform:translateY(-4px) !important;
  border-color:rgba(124,92,252,.30) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 2px 0 rgba(0,0,0,.5),
    0 34px 60px -20px rgba(0,0,0,.95),
    0 0 0 1px rgba(124,92,252,.18) !important;
}
/* per-accent corner glow colour */
.stat-card.accent-green{  --tc-glow:rgba(52,227,154,.16); }
.stat-card.accent-red{    --tc-glow:rgba(255,90,106,.16); }
.stat-card.accent-blue,
.stat-card.accent-purple{ --tc-glow:rgba(124,92,252,.16); }
.stat-card.accent-yellow{ --tc-glow:rgba(255,207,92,.14); }
/* restore the coloured top accent bar the HQ theme had hidden */
.stat-card::after{
  display:block !important; content:'' !important;
  position:absolute !important; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--accent,#7C5CFC),transparent) !important;
  opacity:.7 !important;
}
.brokerage-strip::after{ display:block !important; }
/* lit / glowing value text (keeps each value's own colour) */
.stat-val,.brk-val{ text-shadow:0 0 22px currentColor; }
.brk-val{ font-weight:800 !important; }

/* ---- bottom summary strip: each item becomes a 3D premium chip ----
   Matches the quality of the top stat-card rows: layered gradient
   surface, top sheen + bevel, coloured top accent bar (driven by the
   value's semantic colour), corner glow and hover lift. */
.brokerage-strip{
  display:flex !important; flex-wrap:wrap !important; align-items:stretch !important;
  gap:14px !important; padding:16px !important;
}
.brk-divider{ display:none !important; }
.brk-item{
  position:relative !important; flex:1 1 0 !important; min-width:150px !important;
  display:flex !important; flex-direction:column !important; gap:4px !important;
  padding:16px 18px !important; border-radius:14px !important; isolation:isolate !important;
  background:
    radial-gradient(125% 125% at 82% -12%, var(--chip-glow, rgba(124,92,252,.18)), transparent 55%),
    linear-gradient(180deg, rgba(38,38,58,.55) 0%, rgba(22,22,38,.6) 48%, rgba(12,12,24,.78) 100%) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 2px 0 rgba(0,0,0,.45),
    0 14px 28px -16px rgba(0,0,0,.85),
    0 6px 14px -12px rgba(0,0,0,.7) !important;
  overflow:hidden !important;
  transition:transform .24s cubic-bezier(.2,.7,.2,1),box-shadow .24s ease,border-color .24s ease !important;
}
.brk-item::before{
  content:'' !important; position:absolute !important; top:0; left:0; right:0; height:2px !important;
  background:linear-gradient(90deg,transparent,var(--chip-accent,#7C5CFC),transparent) !important;
  opacity:.9 !important; z-index:1 !important;
}
.brk-item:hover{
  transform:translateY(-5px) !important;
  border-color:rgba(124,92,252,.32) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.12) inset,
    0 2px 0 rgba(0,0,0,.45),
    0 26px 48px -18px rgba(0,0,0,.92),
    0 10px 22px -14px var(--chip-glow, rgba(124,92,252,.5)) !important;
}
/* per-chip accent colour chosen by the value's semantic class */
.brk-item:has(.brk-blue){   --chip-accent:#8B6CFF; --chip-glow:rgba(124,92,252,.22); }
.brk-item:has(.brk-green){  --chip-accent:#34E39A; --chip-glow:rgba(52,227,154,.22); }
.brk-item:has(.brk-red){    --chip-accent:#FF5A6A; --chip-glow:rgba(255,90,106,.22); }
.brk-item:has(.brk-yellow){ --chip-accent:#FFCF5C; --chip-glow:rgba(255,207,92,.20); }
.brokerage-strip .brk-lbl{ font-size:10.5px !important; letter-spacing:.12em !important; font-weight:700 !important; }
/* Bottom-strip numbers = IDENTICAL premium treatment to the top stat-card
   numbers (font/size/weight/glow). Colours already share the same --hq tokens. */
.brokerage-strip .brk-val{ font-family:'JetBrains Mono',monospace !important; font-size:28px !important; font-weight:800 !important; line-height:1.1 !important; letter-spacing:-.01em !important; font-feature-settings:"zero" 1,"tnum" 1 !important; font-variant-numeric:slashed-zero tabular-nums !important; text-shadow:0 0 18px currentColor !important; }
.brokerage-strip .brk-sub{ font-size:10.5px !important; opacity:.75 !important; }
@media(max-width:768px){
  .brokerage-strip{ gap:10px !important; padding:12px !important; }
  .brk-item{ flex:1 1 42% !important; min-width:120px !important; padding:13px 14px !important; }
  .brokerage-strip .brk-val{ font-size:17px !important; }
}
.perf-mode .brk-item{ box-shadow:0 4px 14px rgba(0,0,0,.3) !important; transition:none !important; }
/* ============================================================================
   Bottom strip -> SEPARATE cards identical to the top stat-cards. It was one
   darker/muddy container (#131322->#0d0d18) with transparent cells; now each
   cell is its own card using the SAME per-theme surface as .stat-card (via the
   --hq-surface tokens), so it matches the rows above in every theme.
   ============================================================================ */
.brokerage-strip{ background:transparent !important; background-image:none !important; border:none !important; box-shadow:none !important; padding:0 !important; overflow:visible !important; grid-template-columns:repeat(5,minmax(0,1fr)) !important; gap:16px !important; align-items:stretch !important; }
.brokerage-strip::after{ display:none !important; }
.brk-divider{ display:none !important; }
html body .brokerage-strip > .brk-item.brk-item{ background:linear-gradient(160deg,var(--hq-surface-2),var(--hq-surface-1)) !important; background-image:linear-gradient(160deg,var(--hq-surface-2),var(--hq-surface-1)) !important; border:1px solid var(--hq-border) !important; border-radius:16px !important; padding:18px 18px !important; box-shadow:0 6px 22px rgba(0,0,0,0.28) !important; justify-content:center !important; }
@media(max-width:1040px){ .brokerage-strip{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; } }
@media(max-width:620px){ .brokerage-strip{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } }
.perf-mode .brk-item:hover{ transform:none !important; }

/* mrkt (pure-black market) theme flattens the strip chips to a dull solid.
   Lift them to the same premium 3D quality as the top stat-card rows:
   gradient surface, full-opacity coloured accent bar, corner glow, hover
   lift. Selector mirrors the theme rule's specificity (and sits later) so
   it wins the cascade. The per-chip --chip-accent/--chip-glow come from the
   theme-independent .brk-item:has(...) rules above. */
html[data-theme="mrkt"] body .brokerage-strip > .brk-item{
  background:
    radial-gradient(125% 125% at 82% -12%, var(--chip-glow, rgba(124,92,252,.20)), transparent 55%),
    linear-gradient(180deg,#181826 0%,#101019 52%,#0a0a12 100%) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:14px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.07) inset,
    0 2px 0 rgba(0,0,0,.5),
    0 16px 30px -16px rgba(0,0,0,.9) !important;
}
html[data-theme="mrkt"] body .brokerage-strip > .brk-item::before{
  opacity:.95 !important; height:2px !important;
  background:linear-gradient(90deg,transparent,var(--chip-accent,#7C5CFC),transparent) !important;
}
html[data-theme="mrkt"] body .brokerage-strip > .brk-item:hover{
  transform:translateY(-5px) !important;
  border-color:rgba(124,92,252,.34) !important;
  background:
    radial-gradient(125% 125% at 82% -12%, var(--chip-glow, rgba(124,92,252,.30)), transparent 55%),
    linear-gradient(180deg,#1d1d2e 0%,#131320 52%,#0c0c16 100%) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.1) inset,
    0 26px 46px -18px rgba(0,0,0,.95),
    0 10px 22px -14px var(--chip-glow, rgba(124,92,252,.5)) !important;
}

/* ---- performance / mobile: lighter, no jank ---- */
.perf-mode .stat-card,
.perf-mode .brokerage-strip{
  background:linear-gradient(180deg,#16161f 0%,#0e0e16 100%) !important;
  box-shadow:0 8px 20px -14px rgba(0,0,0,.85) !important;
}
.perf-mode .stat-card:hover{ transform:none !important; }
.perf-mode .stat-val,
.perf-mode .brk-val{ text-shadow:none !important; }
.perf-mode .stat-card::after{ opacity:.5 !important; }


.logout-modal-logo .logo-icon-img{
  width:40px;height:40px;object-fit:contain;display:block;
  transform-origin:center center;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.55)) drop-shadow(0 0 9px rgba(34,197,94,.35));
}
.logout-modal-backdrop.open .logout-modal-logo .logo-icon-img{
  animation:tcLogoIn .75s cubic-bezier(.34,1.56,.64,1) both, tcLogoFloat 3.6s ease-in-out .75s infinite;
}
@keyframes tcLogoIn{
  0%{opacity:0;transform:scale(.15) rotate(-170deg)}
  55%{opacity:1;transform:scale(1.14) rotate(10deg)}
  75%{transform:scale(.96) rotate(-3deg)}
  100%{opacity:1;transform:scale(1) rotate(0)}
}
@keyframes tcLogoFloat{
  0%,100%{transform:translateY(0) scale(1);filter:drop-shadow(0 2px 6px rgba(0,0,0,.55)) drop-shadow(0 0 8px rgba(34,197,94,.30))}
  50%{transform:translateY(-3px) scale(1.025);filter:drop-shadow(0 5px 11px rgba(0,0,0,.5)) drop-shadow(0 0 17px rgba(34,197,94,.6))}
}
@media (max-width:520px){.logout-modal-logo .logo-icon-img{width:34px;height:34px}}
@media (prefers-reduced-motion:reduce){
  .logout-modal-backdrop.open .logout-modal-logo .logo-icon-img{animation:tcLogoIn .01s both}
}