@font-face {
  font-family: "Inter Variable";
  src: url("./assets/fonts/InterVariable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

/* ============================================================
   Claude UI v12 - prism asset overview, spectrum rail and route motion
   (2026-07-22). This block is scoped so V11 remains reproducible.
   ============================================================ */

/* Home: preserve the 194 x 92 target at the 430px reference viewport,
   while allowing narrower mobile screens to keep the same two-column grid. */
.stock-page-home .stock-quick-grid {
  gap: 10px;
}

.stock-page-home .stock-quick-grid .stock-tile {
  height: 92px;
  min-height: 92px;
  max-height: 92px;
  padding: 12px;
}

.stock-page-home .stock-tile-copy b {
  font-size: 16px;
  line-height: 1.15;
}

.stock-page-home .stock-tile-copy small {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.3;
}

.stock-page-home .stock-tile-art {
  right: 12px;
  bottom: 8px;
}

/* Requested Markets / Invest fragment only: a narrow continuously moving
   spectrum and its metadata. No page-wide cyan background is introduced. */
.stock-spectrum-rail {
  width: 100%;
  margin: 12px 0 10px;
  overflow: hidden;
}

.stock-spectrum-window {
  position: relative;
  width: 100%;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(154, 181, 190, 0.08);
}

.stock-spectrum-track {
  display: flex;
  width: 200%;
  height: 100%;
  will-change: transform;
  animation: stockSpectrumFlow 6.4s linear 1 forwards;
}

.stock-spectrum-track i {
  flex: 0 0 50%;
  height: 100%;
  background: linear-gradient(90deg, #25cdd8 0 17%, #397dff 25% 39%, #9189e9 47% 60%, #d9ad47 68% 81%, #d8dfe5 89% 94%, #25cdd8 100%);
  -webkit-mask: linear-gradient(90deg, #000 0 18%, transparent 18% 21%, #000 21% 40%, transparent 40% 43%, #000 43% 61%, transparent 61% 64%, #000 64% 82%, transparent 82% 85%, #000 85% 100%);
  mask: linear-gradient(90deg, #000 0 18%, transparent 18% 21%, #000 21% 40%, transparent 40% 43%, #000 43% 61%, transparent 61% 64%, #000 64% 82%, transparent 82% 85%, #000 85% 100%);
  filter: saturate(1.12) drop-shadow(0 0 5px rgba(58, 174, 214, 0.34));
}

.stock-spectrum-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 5px;
  color: rgba(143, 158, 157, 0.62);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 8px;
  font-weight: 750;
  letter-spacing: 0.09em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}

.stock-spectrum-meta b {
  color: #43d7e6;
  font-size: 8px;
  letter-spacing: 0.12em;
}

@keyframes stockSpectrumFlow {
  to { transform: translate3d(-50%, 0, 0); }
}

/* Assets: one invisible composition frame. Only the balance plane receives
   full Glass Prism treatment; allocation and actions remain structurally light. */
.stock-page-assets .stock-asset-overview {
  position: relative;
  isolation: isolate;
  width: 100%;
  margin: 0 0 12px;
  padding: 0 0 80px;
  background: transparent;
}

.stock-page-assets .stock-asset-prism {
  position: relative;
  min-height: 196px;
  overflow: hidden;
  padding: 16px;
  border: 1px solid rgba(213, 243, 220, 0.22);
  border-radius: 16px;
  background:
    radial-gradient(170px 116px at 88% 6%, rgba(221, 244, 145, 0.17), transparent 72%),
    linear-gradient(118deg, rgba(255, 255, 255, 0.12), transparent 35%),
    linear-gradient(154deg, rgba(48, 58, 43, 0.96), rgba(25, 37, 27, 0.98) 54%, rgba(10, 20, 14, 0.99));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -1px 0 rgba(0, 0, 0, 0.34),
    0 6px 8px rgba(0, 0, 0, 0.18);
}

.stock-page-assets .stock-asset-prism::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.06), transparent 36%, rgba(198, 229, 132, 0.05) 78%, transparent);
  pointer-events: none;
}

.stock-asset-prism-glare {
  position: absolute;
  top: -36%;
  bottom: -36%;
  left: -34%;
  z-index: 2;
  width: 18%;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.13), transparent);
  pointer-events: none;
  animation: stockPrismGlare 7s ease-in-out 1 forwards;
}

@keyframes stockPrismGlare {
  0%, 58% { transform: translate3d(0, 0, 0) skewX(-18deg); opacity: 0; }
  66% { opacity: 0.72; }
  82%, 100% { transform: translate3d(680%, 0, 0) skewX(-18deg); opacity: 0; }
}

.stock-asset-prism-copy {
  position: relative;
  z-index: 3;
  width: 73%;
  min-width: 0;
}

.stock-asset-prism-head {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 2px;
}

.stock-asset-prism-head > span {
  color: rgba(226, 238, 225, 0.76);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.01em;
}

.stock-asset-prism-head .stock-asset-privacy {
  display: grid;
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(225, 240, 226, 0.78);
}

.stock-asset-prism-head .stock-asset-privacy-icon {
  width: 18px;
  height: 18px;
}

.stock-asset-prism-value {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 2px;
  white-space: nowrap;
}

.stock-asset-prism-value h2 {
  margin: 0;
  color: #f3f8f1;
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.stock-asset-prism-value > strong {
  color: rgba(218, 230, 216, 0.76);
  font-size: 11px;
  font-weight: 900;
}

.stock-asset-prism-copy > p {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 10px 0 0;
}

.stock-asset-prism-copy > p b {
  color: #46e690;
  font-size: 12px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

.stock-asset-prism-copy > p span {
  color: rgba(178, 193, 180, 0.58);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.stock-asset-prism-id {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 15px;
  padding-top: 10px;
  border-top: 1px solid rgba(218, 239, 215, 0.13);
  color: rgba(195, 207, 196, 0.57);
  font-size: 8.5px;
  font-weight: 750;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.stock-asset-prism-id span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

.stock-asset-prism-id span:last-child {
  flex: 0 0 auto;
  color: rgba(227, 203, 120, 0.78);
}

.stock-asset-prism-wallet {
  position: absolute;
  top: 12px;
  right: 8px;
  z-index: 1;
  width: 94px;
  height: 96px;
  opacity: 0.76;
  filter: saturate(0.72) sepia(0.08) hue-rotate(8deg) brightness(0.92);
  pointer-events: none;
}

.stock-asset-prism-wallet svg {
  display: block;
  width: 100%;
  height: 100%;
}

.stock-page-assets .stock-asset-allocation {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  min-height: 124px;
  padding: 12px 8px 8px;
}

.stock-asset-donut {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--asset-donut);
  box-shadow: 0 0 8px rgba(62, 232, 174, 0.12);
}

.stock-asset-donut::after {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: inherit;
  background: rgba(4, 13, 9, 0.96);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.stock-asset-donut > span {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-content: center;
  text-align: center;
}

.stock-asset-donut b {
  color: #eef5ec;
  font-size: 18px;
  line-height: 1;
}

.stock-asset-donut small {
  margin-top: 4px;
  color: rgba(166, 181, 169, 0.52);
  font-size: 7.5px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.stock-asset-allocation-list {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.stock-asset-allocation-list > div {
  display: grid;
  grid-template-columns: 7px 28px 38px auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: rgba(194, 207, 197, 0.68);
  font-size: 9px;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.stock-asset-allocation-list i {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--asset-allocation);
  box-shadow: 0 0 7px color-mix(in srgb, var(--asset-allocation) 55%, transparent);
}

.stock-asset-allocation-list b {
  color: var(--asset-allocation);
  font-size: 9px;
  letter-spacing: 0.06em;
}

.stock-asset-allocation-list span {
  color: rgba(194, 207, 197, 0.56);
}

.stock-asset-allocation-list strong {
  overflow: hidden;
  color: rgba(239, 246, 238, 0.88);
  font-size: 9.5px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-asset-dock-line {
  position: absolute;
  right: 8px;
  bottom: 46px;
  left: 8px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(194, 225, 205, 0.22) 12%, rgba(194, 225, 205, 0.22) 88%, transparent);
}

.stock-asset-action-dock {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.stock-asset-action-dock button {
  display: grid;
  min-width: 0;
  min-height: 72px;
  place-items: start center;
  gap: 5px;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(232, 241, 231, 0.9);
}

.stock-asset-action-dock button > span {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 1px solid rgba(200, 230, 210, 0.22);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 18%, rgba(255, 255, 255, 0.18), transparent 35%),
    linear-gradient(160deg, rgba(39, 66, 48, 0.96), rgba(8, 24, 15, 0.99));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.17),
    inset 0 -1px 0 rgba(0, 0, 0, 0.42),
    0 4px 8px rgba(0, 0, 0, 0.24);
}

.stock-asset-action-dock button:first-child > span {
  border-color: rgba(218, 255, 178, 0.56);
  background:
    radial-gradient(circle at 35% 20%, rgba(255, 255, 255, 0.3), transparent 34%),
    linear-gradient(145deg, rgba(198, 243, 95, 0.96), rgba(66, 232, 174, 0.94));
  color: #07130d;
}

.stock-asset-action-dock .stock-asset-action-icon {
  width: 22px;
  height: 22px;
}

.stock-asset-action-dock b {
  font-size: 10px;
  font-weight: 850;
  line-height: 1.2;
}

.stock-asset-action-dock button:focus-visible > span {
  outline: 2px solid rgba(200, 243, 95, 0.86);
  outline-offset: 3px;
}

.stock-page-assets.is-asset-hidden .stock-asset-prism-wallet,
.stock-page-assets.is-asset-hidden .stock-asset-donut {
  filter: grayscale(0.65) opacity(0.72);
}

/* Route transitions: the page body slides, while the persistent nav remains
   visually anchored. View Transitions are enhanced progressively. */
.stock-page {
  view-transition-name: web3ex-page;
}

.stock-nav {
  view-transition-name: web3ex-nav;
}

.stock-route-enter-forward {
  animation: stockRouteEnterForward 240ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.stock-route-enter-backward {
  animation: stockRouteEnterBackward 240ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes stockRouteEnterForward {
  from { opacity: 0.7; transform: translate3d(26px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes stockRouteEnterBackward {
  from { opacity: 0.7; transform: translate3d(-26px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

::view-transition-old(root),
::view-transition-new(root),
::view-transition-old(web3ex-nav),
::view-transition-new(web3ex-nav) {
  animation: none;
  mix-blend-mode: normal;
}

html[data-stock-route-direction="forward"]::view-transition-old(web3ex-page) {
  animation: stockRouteExitForward 220ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

html[data-stock-route-direction="forward"]::view-transition-new(web3ex-page) {
  animation: stockRouteEnterForward 240ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

html[data-stock-route-direction="backward"]::view-transition-old(web3ex-page) {
  animation: stockRouteExitBackward 220ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

html[data-stock-route-direction="backward"]::view-transition-new(web3ex-page) {
  animation: stockRouteEnterBackward 240ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes stockRouteExitForward {
  from { opacity: 1; transform: translate3d(0, 0, 0); }
  to { opacity: 0.42; transform: translate3d(-22px, 0, 0); }
}

@keyframes stockRouteExitBackward {
  from { opacity: 1; transform: translate3d(0, 0, 0); }
  to { opacity: 0.42; transform: translate3d(22px, 0, 0); }
}

@media (max-width: 379px) {
  .stock-page-home .stock-quick-grid .stock-tile {
    height: 92px;
    min-height: 92px;
    max-height: 92px;
    padding: 12px;
  }

  .stock-page-home .stock-tile-copy b { font-size: 16px; }
  .stock-page-home .stock-tile-copy small { font-size: 11px; }

  .stock-asset-prism-value h2 { font-size: 30px; }
  .stock-asset-prism-wallet { width: 84px; height: 88px; }
  .stock-page-assets .stock-asset-allocation { grid-template-columns: 92px minmax(0, 1fr); gap: 12px; }
  .stock-asset-donut { width: 88px; height: 88px; }
  .stock-asset-allocation-list > div { grid-template-columns: 7px 25px 34px auto; justify-content: center; gap: 4px; }
}

@media (min-width: 420px) {
  .stock-asset-prism-wallet { width: 102px; height: 104px; }
  .stock-page-assets .stock-asset-allocation { grid-template-columns: 112px minmax(0, 1fr); }
  .stock-asset-donut { width: 104px; height: 104px; }
}

@media (prefers-reduced-motion: reduce) {
  .stock-spectrum-track,
  .stock-ticker-track,
  .stock-asset-prism-glare,
  .stock-route-enter-forward,
  .stock-route-enter-backward,
  ::view-transition-old(web3ex-page),
  ::view-transition-new(web3ex-page) {
    animation: none !important;
    transform: none !important;
  }
}

/* ============================================================
   2026-07-24 integrated flow repair
   Wallet status, account security, responsive activity filters,
   strategy purchase and trade-pair selection.
   ============================================================ */

.stock-page button,
.stock-page select,
.stock-page input,
.stock-page textarea {
  font-family: var(--stock-font-product);
}

.stock-top,
.stock-page-head {
  align-items: flex-start;
}

.stock-page-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: max-content;
}

.stock-wallet-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 92px;
  min-height: 40px;
  padding: 0 13px;
  border: 1px solid rgba(205, 242, 210, .18);
  border-radius: 999px;
  color: rgba(234, 245, 231, .76);
  background: rgba(8, 20, 13, .72);
  font-size: 11px;
  font-weight: 760;
}

.stock-wallet-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--stock-mint);
  box-shadow: 0 0 10px rgba(70, 230, 144, .72);
}

.stock-top .stock-wallet-status {
  margin-left: auto;
}

.stock-activity-chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  overflow: visible;
}

.stock-activity-chips button {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding-inline: 10px;
  font-size: 12px;
  font-weight: 760;
}

.stock-withdrawal-password-form {
  grid-column: 1 / -1;
  display: grid;
  gap: 12px;
  margin: -2px 10px 12px;
  padding: 16px;
  border: 1px solid rgba(200, 243, 95, .18);
  border-radius: 15px;
  background: rgba(4, 12, 8, .78);
}

.stock-withdrawal-password-form[hidden] { display: none; }
.stock-withdrawal-password-form label { display: grid; gap: 7px; color: var(--stock-dim); font-size: 11px; font-weight: 720; }
.stock-withdrawal-password-form input { width: 100%; min-height: 46px; padding: 0 13px; border: 1px solid rgba(216, 242, 217, .13); border-radius: 12px; color: var(--stock-ink); background: rgba(0, 0, 0, .28); font-size: 16px; letter-spacing: .16em; }
.stock-withdrawal-password-form > div { display: grid; grid-template-columns: .82fr 1.18fr; gap: 10px; }
.stock-withdrawal-password-form button { min-height: 44px; border-radius: 12px; color: var(--stock-ink); background: rgba(255,255,255,.06); font-size: 12px; font-weight: 800; }
.stock-withdrawal-password-form button[type="submit"] { color: #07110c; background: linear-gradient(100deg, var(--stock-lime), var(--stock-mint)); }
.stock-withdrawal-password-form p { margin: 0; color: var(--stock-muted); font-size: 10px; line-height: 1.45; }

.stock-page-trade .stock-pair {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.stock-pair-selector {
  display: grid;
  gap: 6px;
  min-width: 0;
  margin-bottom: 8px;
}

.stock-pair-selector span {
  color: var(--stock-muted);
  font-size: 9px;
  font-weight: 780;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.stock-pair-selector select {
  width: 82px;
  min-height: 40px;
  padding: 0 25px 0 9px;
  border: 1px solid rgba(200, 243, 95, .25);
  border-radius: 12px;
  color: var(--stock-ink);
  background: #0c1811;
  font-size: 10px;
  font-weight: 760;
}

.stock-pair-quote {
  min-width: 0;
  padding-left: 2px;
}

.stock-page-trade .stock-pair-quote h2 { font-size: 19px; }
.stock-page-trade .stock-pair-quote strong { font-size: 39px; }

/* One weight for every primary action in the app — 900, matching the reference
   button (.stock-copy-button).

   Every selector is scoped through .stock-page on purpose: `.stock-page button
   { font: inherit }` is a SHORTHAND at specificity (0,1,1), so an unscoped
   `.stock-account-submit` (0,1,0) lost to it and the weight silently reset to the
   inherited value. That is why every sub-page submit rendered thin. */
.stock-page .stock-ipo-allocate,
.stock-page .stock-best-strategy > button,
.stock-page .stock-strategy-purchase-form button[type="submit"],
.stock-page .stock-hero-actions button,
.stock-page .stock-account-submit,
.stock-page .stock-order-actions button,
.stock-page .stock-withdrawal-password-form button,
.stock-page .stock-security-link,
.stock-page .stock-max-button {
  font-family: var(--stock-font-product);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: -.015em;
}

/* Smaller controls keep their own size, only the weight is shared. */
.stock-page .stock-withdrawal-password-form button,
.stock-page .stock-security-link,
.stock-page .stock-max-button {
  font-size: 12px;
}

.stock-strategy[role="button"] {
  cursor: pointer;
}

.stock-strategy[role="button"]:focus-visible {
  outline: 2px solid rgba(200, 243, 95, .8);
  outline-offset: 2px;
}

.stock-strategy-purchase {
  display: grid;
  gap: 14px;
}

.stock-strategy-purchase > header {
  padding: 20px;
  border: 1px solid rgba(200, 243, 95, .2);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(32, 62, 39, .52), rgba(7, 17, 11, .86));
}

.stock-strategy-purchase > header > span { color: var(--stock-lime); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.stock-strategy-purchase h1 { margin: 9px 0 5px; font-size: 31px; line-height: 1.05; letter-spacing: -.035em; }
.stock-strategy-purchase > header p { margin: 0; color: var(--stock-muted); font-size: 12px; line-height: 1.5; }
.stock-strategy-purchase > header > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 18px; }
.stock-strategy-purchase > header strong { color: var(--stock-mint); font-size: 30px; }
.stock-strategy-purchase > header strong.down { color: var(--stock-red); }
.stock-strategy-purchase > header small { color: var(--stock-dim); font-size: 10px; }

.stock-strategy-purchase-chart {
  position: relative;
  min-height: 168px;
  padding: 18px 16px 30px;
  border: 1px solid rgba(207, 238, 210, .14);
  border-radius: 18px;
  background: rgba(9, 20, 13, .72);
}

.stock-strategy-purchase-chart svg { width: 100%; height: 120px; overflow: visible; }
.stock-strategy-purchase-chart .grid { fill: none; stroke: rgba(200, 243, 95, .09); stroke-dasharray: 2 7; }
.stock-strategy-purchase-chart .area { fill: rgba(70, 230, 144, .1); }
.stock-strategy-purchase-chart .line { fill: none; stroke: var(--stock-mint); stroke-width: 3; stroke-linecap: round; }
.stock-strategy-purchase-chart span,
.stock-strategy-purchase-chart > b { position: absolute; bottom: 12px; color: var(--stock-muted); font-size: 9px; }
.stock-strategy-purchase-chart span { left: 16px; }
.stock-strategy-purchase-chart > b { right: 16px; }

.stock-strategy-purchase-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stock-strategy-purchase-facts span { padding: 12px 9px; border: 1px solid rgba(208, 239, 210, .12); border-radius: 13px; background: rgba(255,255,255,.025); }
.stock-strategy-purchase-facts small,
.stock-strategy-purchase-facts b { display: block; }
.stock-strategy-purchase-facts small { margin-bottom: 5px; color: var(--stock-muted); font-size: 8px; text-transform: uppercase; }
.stock-strategy-purchase-facts b { font-size: 10px; }

.stock-strategy-purchase-form { display: grid; gap: 13px; padding: 18px; border: 1px solid rgba(200, 243, 95, .18); border-radius: 18px; background: rgba(4, 12, 8, .8); }
.stock-strategy-purchase-form > label:first-child { display: grid; gap: 8px; color: var(--stock-dim); font-size: 11px; font-weight: 740; }
.stock-strategy-purchase-form > label:first-child div { display: flex; align-items: center; min-height: 52px; padding: 0 13px; border: 1px solid rgba(216, 242, 217, .13); border-radius: 13px; background: rgba(0,0,0,.26); }
.stock-strategy-purchase-form input[type="number"] { flex: 1; min-width: 0; border: 0; outline: 0; color: var(--stock-ink); background: transparent; font-size: 17px; font-weight: 740; }
.stock-strategy-purchase-form > p { margin: 0; color: var(--stock-muted); font-size: 10px; }
.stock-strategy-purchase-form button[type="submit"] { min-height: 52px; border-radius: 999px; color: #061009; background: linear-gradient(100deg, var(--stock-lime), var(--stock-mint)); font-size: 14px; }

@media (max-width: 370px) {
  .stock-page-trade .stock-pair { grid-template-columns: 74px minmax(0, 1fr) auto; gap: 8px; }
  .stock-pair-selector select { width: 74px; }
  .stock-page-trade .stock-pair-quote strong { font-size: 34px; }
  .stock-strategy-purchase-facts { grid-template-columns: 1fr; }
}

:root {
  color-scheme: dark;
  --stock-bg: #050805;
  --stock-bg-2: #08100c;
  --stock-surface: rgba(14, 22, 18, 0.88);
  --stock-surface-2: rgba(18, 30, 24, 0.82);
  --stock-surface-3: rgba(26, 40, 32, 0.78);
  --stock-elevated: rgba(19, 31, 25, 0.94);
  --stock-stroke: rgba(215, 255, 222, 0.095);
  --stock-stroke-2: rgba(215, 255, 222, 0.17);
  --stock-stroke-hot: rgba(190, 247, 92, 0.44);
  --stock-ink: #f2f7ee;
  --stock-ink-2: #d6e0d2;
  --stock-muted: rgba(214, 224, 210, 0.66);
  --stock-dim: rgba(214, 224, 210, 0.42);
  --stock-faint: rgba(214, 224, 210, 0.22);
  --stock-lime: #c8f35f;
  --stock-lime-2: #a6e84e;
  --stock-mint: #46e690;
  --stock-mint-2: #1bbf73;
  --stock-red: #ff5f73;
  --stock-red-2: #d94d5c;
  --stock-gold: #e8b84c;
  --stock-gold-2: #ff9f43;
  --stock-graph: rgba(92, 255, 166, 0.1);
  --stock-shadow: 0 24px 80px rgba(0, 0, 0, 0.46);
  --stock-shadow-soft: 0 18px 48px rgba(0, 0, 0, 0.28);
  --stock-radius-lg: 24px;
  --stock-radius-md: 18px;
  --stock-radius-sm: 12px;
  --stock-nav-h: 86px;
  --stock-safe-bottom: env(safe-area-inset-bottom, 0px);
  --stock-font-product:
    "Inter Variable",
    Inter,
    "Segoe UI Variable",
    "SF Pro Text",
    system-ui,
    sans-serif;
  --stock-font-tv: var(--stock-font-product);
  font-family:
    var(--stock-font-product),
    "PingFang SC",
    "Microsoft YaHei";
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background:
    radial-gradient(900px 620px at 50% -18%, rgba(70, 230, 144, 0.1), transparent 58%),
    radial-gradient(680px 520px at 86% 100%, rgba(232, 184, 76, 0.055), transparent 62%),
    linear-gradient(160deg, #030503 0%, #08100c 54%, #030503 100%);
  color: var(--stock-ink);
}

.shell {
  display: grid;
  width: 100%;
  min-height: 100dvh;
  place-items: center;
  padding: 18px;
}

.phone {
  position: relative;
  isolation: isolate;
  width: min(430px, 100vw);
  height: min(932px, calc(100dvh - 36px));
  overflow: hidden;
  background:
    linear-gradient(rgba(200, 243, 95, 0.022) 1px, transparent 1px) 0 0 / 100% 36px,
    linear-gradient(90deg, rgba(200, 243, 95, 0.018) 1px, transparent 1px) 0 0 / 36px 100%,
    radial-gradient(520px 320px at 78% -12%, rgba(70, 230, 144, 0.18), transparent 66%),
    radial-gradient(420px 260px at 8% 8%, rgba(232, 184, 76, 0.075), transparent 62%),
    linear-gradient(180deg, #08110d 0%, #050805 44%, #040604 100%);
  box-shadow: 0 52px 140px rgba(0, 0, 0, 0.62);
}

.phone::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.05), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 16%, transparent 74%, rgba(0, 0, 0, 0.22));
}

.phone::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.42;
  background-image:
    linear-gradient(135deg, rgba(255, 255, 255, 0.025) 25%, transparent 25%),
    linear-gradient(315deg, rgba(255, 255, 255, 0.018) 25%, transparent 25%);
  background-position:
    0 0,
    8px 8px;
  background-size: 16px 16px;
  mix-blend-mode: screen;
}

@media (min-width: 480px) and (min-height: 980px) {
  .phone {
    border: 1px solid rgba(233, 255, 233, 0.1);
    border-radius: 44px;
    box-shadow:
      0 60px 130px rgba(0, 0, 0, 0.72),
      0 0 0 10px #080b08,
      0 0 88px rgba(70, 230, 144, 0.06);
  }
}

.stock-page {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow-x: hidden;
  overflow-y: auto;
  padding: calc(env(safe-area-inset-top, 0px) + 18px) 16px calc(var(--stock-nav-h) + var(--stock-safe-bottom) + 34px);
  color: var(--stock-ink);
  font-size: 14px;
  line-height: 1.35;
  scrollbar-width: none;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

.stock-page,
.stock-page * {
  max-width: 100%;
}

.stock-page::-webkit-scrollbar {
  display: none;
}

.stock-page button,
.stock-page input {
  max-width: 100%;
  font: inherit;
}

.stock-page button {
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease;
}

.stock-page button:active,
.stock-nav a:active {
  transform: translateY(1px) scale(0.99);
}

.stock-page button:focus-visible,
.stock-nav a:focus-visible,
.stock-search input:focus-visible {
  outline: 2px solid rgba(200, 243, 95, 0.82);
  outline-offset: 2px;
}

.stock-status {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 30;
  display: flex;
  height: 44px;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  color: rgba(245, 255, 244, 0.88);
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0.01em;
  pointer-events: none;
}

.stock-status span:last-child {
  display: flex;
  gap: 5px;
  opacity: 0.72;
}

.stock-top,
.stock-actions,
.stock-hero-actions,
.stock-section-head,
.stock-page-head,
.stock-market-row,
.stock-pair,
.stock-mini-tabs,
.stock-order-actions,
.stock-book p {
  display: flex;
  align-items: center;
}

.stock-top {
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 12px;
}

.stock-brand {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 11px;
  color: var(--stock-ink);
  font-size: 20px;
  letter-spacing: -0.02em;
}

.stock-brand span {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  width: 43px;
  height: 43px;
  place-items: center;
  border: 1px solid rgba(200, 243, 95, 0.42);
  border-radius: 15px;
  background:
    radial-gradient(circle at 26% 18%, rgba(255, 255, 255, 0.28), transparent 24px),
    linear-gradient(145deg, #d6ff6f 0%, #49df91 48%, #15271e 100%);
  color: #07110b;
  font-size: 17px;
  font-weight: 950;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.46),
    0 12px 28px rgba(70, 230, 144, 0.16);
}

.stock-brand b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-actions {
  flex: 0 0 auto;
  gap: 8px;
}

.stock-actions button,
.stock-page-head button,
.stock-section-head button,
.stock-tile,
.stock-grid-3 button {
  border: 1px solid var(--stock-stroke);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02)),
    var(--stock-surface);
  color: var(--stock-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
}

.stock-actions button {
  position: relative;
  display: grid;
  min-width: 43px;
  height: 43px;
  place-items: center;
  border-radius: 15px;
  color: var(--stock-ink-2);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.02em;
}

.stock-actions button:first-child {
  min-width: 56px;
  padding: 0 13px;
  border-color: rgba(200, 243, 95, 0.22);
  background: rgba(200, 243, 95, 0.09);
  color: var(--stock-lime);
}

.stock-actions button:last-child {
  width: 43px;
  color: transparent;
}

.stock-actions button:last-child::before,
.stock-page-head button::before {
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  border: 2px solid currentColor;
}

.stock-actions button:last-child::before {
  border-top-color: transparent;
  border-radius: 11px 11px 7px 7px;
  color: var(--stock-ink-2);
  transform: translateY(1px);
}

.stock-actions i {
  position: absolute;
  top: -5px;
  right: -5px;
  display: grid;
  min-width: 18px;
  height: 18px;
  place-items: center;
  border: 2px solid #07100c;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--stock-gold-2), var(--stock-red));
  color: #140904;
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
}

.stock-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 104px;
  min-height: 286px;
  gap: 12px;
  overflow: hidden;
  padding: 22px 18px;
  border: 1px solid rgba(200, 243, 95, 0.22);
  border-radius: var(--stock-radius-lg);
  background:
    linear-gradient(rgba(200, 243, 95, 0.09) 1px, transparent 1px) 0 0 / 100% 42px,
    radial-gradient(220px 180px at 100% 0%, rgba(200, 243, 95, 0.2), transparent 66%),
    radial-gradient(260px 220px at 2% 18%, rgba(70, 230, 144, 0.13), transparent 64%),
    linear-gradient(150deg, rgba(20, 34, 27, 0.98), rgba(6, 12, 8, 0.98) 58%, rgba(19, 27, 15, 0.98));
  color: var(--stock-ink);
  box-shadow:
    0 26px 60px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.075);
}

.stock-hero::before {
  content: "USDC";
  position: absolute;
  right: 18px;
  top: 18px;
  z-index: 0;
  padding: 5px 8px;
  border: 1px solid rgba(200, 243, 95, 0.18);
  border-radius: 999px;
  background: rgba(5, 8, 5, 0.36);
  color: rgba(200, 243, 95, 0.46);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.stock-hero::after {
  content: "";
  position: absolute;
  right: -36px;
  bottom: -72px;
  width: 184px;
  height: 184px;
  border: 1px solid rgba(200, 243, 95, 0.18);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(70, 230, 144, 0.1) 0 34%, transparent 35%),
    conic-gradient(from 120deg, rgba(200, 243, 95, 0.18), transparent 35%, rgba(232, 184, 76, 0.16), transparent 70%, rgba(70, 230, 144, 0.18));
  opacity: 0.9;
}

.stock-hero-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.stock-hero-copy span,
.stock-page-head span,
.stock-mover span,
.stock-pair span,
.stock-invest-hero span,
.stock-balance span,
.stock-offering span {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border: 1px solid rgba(200, 243, 95, 0.16);
  border-radius: 999px;
  background: rgba(200, 243, 95, 0.075);
  color: var(--stock-lime);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.stock-hero h1 {
  max-width: 252px;
  margin: 13px 0 10px;
  color: #f7fff3;
  font-size: clamp(28px, 7.4vw, 34px);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.035em;
}

.stock-hero p {
  max-width: 260px;
  margin: 0;
  color: var(--stock-muted);
  font-size: 13px;
  font-weight: 620;
  line-height: 1.42;
}

.stock-hero-actions {
  min-width: 0;
  gap: 9px;
  margin-top: 18px;
}

.stock-hero-actions button,
.stock-invest-hero button,
.stock-offering button {
  display: inline-flex;
  min-width: 0;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
  overflow: hidden;
  border-radius: 999px;
  color: #07110b;
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-hero-actions button:first-child,
.stock-invest-hero button,
.stock-offering button {
  border: 1px solid rgba(226, 255, 169, 0.35);
  background: linear-gradient(135deg, var(--stock-lime), var(--stock-mint));
  box-shadow: 0 12px 26px rgba(70, 230, 144, 0.16);
}

.stock-hero-actions button:last-child {
  border: 1px solid rgba(214, 224, 210, 0.14);
  background: rgba(255, 255, 255, 0.07);
  color: var(--stock-ink);
  box-shadow: none;
}

.stock-orbit {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 210px;
}

.stock-orbit::before {
  content: "";
  position: absolute;
  inset: 22px -10px 22px 2px;
  border: 1px solid rgba(200, 243, 95, 0.16);
  border-radius: 999px;
  transform: rotate(-16deg);
}

.stock-orbit b,
.stock-orbit i,
.stock-orbit em {
  position: absolute;
  display: grid;
  place-items: center;
  border: 1px solid rgba(200, 243, 95, 0.22);
  border-radius: 17px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
    rgba(4, 9, 6, 0.76);
  color: var(--stock-lime);
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 24px rgba(0, 0, 0, 0.26);
}

.stock-orbit b {
  right: 0;
  top: 45px;
  width: 82px;
  height: 58px;
}

.stock-orbit i {
  right: 30px;
  top: 120px;
  width: 70px;
  height: 48px;
  color: var(--stock-mint);
}

.stock-orbit em {
  right: 6px;
  bottom: 2px;
  width: 64px;
  height: 44px;
  color: var(--stock-gold);
}

.stock-ticker {
  display: flex;
  width: 100%;
  gap: 9px;
  overflow: hidden;
  margin: 14px 0;
  padding: 9px;
  border: 1px solid var(--stock-stroke);
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(200, 243, 95, 0.07), rgba(255, 255, 255, 0.025)),
    rgba(5, 10, 7, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.stock-ticker-track {
  display: flex;
  flex: 0 0 auto;
  width: max-content;
  /* Escapes the global `.stock-page * { max-width: 100% }` clamp so the track can overflow and scroll. */
  max-width: none;
  gap: 9px;
  animation: stock-ticker-marquee 42s linear infinite;
}

.stock-ticker:hover .stock-ticker-track {
  animation-play-state: paused;
}

@keyframes stock-ticker-marquee {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    /* Track holds two identical passes, so -50% lands on a seamless loop point. */
    transform: translate3d(calc(-50% - 4.5px), 0, 0);
  }
}

.stock-ticker span {
  flex: 0 0 auto;
  min-width: 0;
  padding: 0 9px;
  color: var(--stock-muted);
  font-size: 11px;
  white-space: nowrap;
}

.stock-ticker b {
  margin-right: 6px;
  color: var(--stock-ink);
  font-weight: 900;
}

.stock-ticker em {
  margin-left: 6px;
  font-style: normal;
  font-weight: 850;
}

.stock-page .up {
  color: var(--stock-mint);
}

.stock-page .down {
  color: var(--stock-red);
}

.stock-grid-2,
.stock-grid-3,
.stock-metrics,
.stock-order-wrap {
  display: grid;
  gap: 10px;
}

.stock-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.stock-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 14px;
}

.stock-tile,
.stock-grid-3 button {
  min-width: 0;
  min-height: 82px;
  align-content: center;
  border-radius: var(--stock-radius-md);
  padding: 13px;
  text-align: left;
}

.stock-tile {
  position: relative;
  overflow: hidden;
}

.stock-grid-3 button {
  position: relative;
  overflow: hidden;
}

.stock-tile::after,
.stock-grid-3 button::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 7px;
  height: 7px;
  border-right: 2px solid rgba(200, 243, 95, 0.5);
  border-bottom: 2px solid rgba(200, 243, 95, 0.5);
  transform: rotate(-45deg);
}

.stock-tile:hover,
.stock-grid-3 button:hover,
.stock-market-row:hover {
  border-color: var(--stock-stroke-2);
  background-color: rgba(255, 255, 255, 0.055);
}

.stock-tile b,
.stock-grid-3 b {
  display: block;
  overflow: hidden;
  color: var(--stock-ink);
  font-size: 15px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-tile span,
.stock-grid-3 span {
  display: block;
  margin-top: 6px;
  overflow: hidden;
  color: var(--stock-dim);
  font-size: 11px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-section-head,
.stock-page-head {
  justify-content: space-between;
  gap: 14px;
}

.stock-section-head {
  margin: 24px 2px 12px;
}

.stock-section-head h2,
.stock-page-head h1 {
  margin: 0;
  color: var(--stock-ink);
  letter-spacing: -0.025em;
}

.stock-section-head h2 {
  min-width: 0;
  overflow: hidden;
  font-size: 19px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-section-head button {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--stock-muted);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.stock-page-head {
  margin-bottom: 16px;
}

.stock-page-head > div {
  min-width: 0;
}

.stock-page-head h1 {
  margin-top: 8px;
  overflow: hidden;
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-page-head p {
  display: -webkit-box;
  max-width: 292px;
  margin: 9px 0 0;
  overflow: hidden;
  color: var(--stock-muted);
  font-size: 13px;
  line-height: 1.42;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.stock-page-head button {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  width: 43px;
  height: 43px;
  place-items: center;
  border-radius: 15px;
  color: transparent;
}

.stock-page-head button::before {
  width: 18px;
  height: 12px;
  border-width: 2px 0;
  border-radius: 0;
  color: var(--stock-ink-2);
  box-shadow: inset 0 5px 0 -3px currentColor;
}

.stock-list {
  display: grid;
  gap: 9px;
}

.stock-market-row {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 72px minmax(88px, auto);
  gap: 11px;
  min-height: 70px;
  align-items: center;
  overflow: hidden;
  padding: 10px 11px;
  border: 1px solid var(--stock-stroke);
  border-radius: var(--stock-radius-md);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.018)),
    rgba(9, 15, 12, 0.76);
  color: var(--stock-ink);
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.stock-market-row::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(200, 243, 95, 0.06), transparent 36%);
  opacity: 0;
  transition: opacity 160ms ease;
}

.stock-market-row:hover::after {
  opacity: 1;
}

.stock-icon {
  position: relative;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(200, 243, 95, 0.2);
  border-radius: 14px;
  background:
    radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.16), transparent 22px),
    linear-gradient(145deg, rgba(200, 243, 95, 0.2), rgba(70, 230, 144, 0.08) 52%, rgba(5, 8, 5, 0.78)) !important;
  color: var(--stock-lime);
  font-size: 16px;
  font-weight: 950;
  overflow: hidden;
}

.stock-icon img,
.stock-ai-market-icon img {
  position: absolute;
  /* Fills the tile edge to edge: the old 5px inset plus object-fit:contain left a
     visible blank ring on every logo. The slight scale defeats the transparent
     margin baked into favicon PNGs; the tile already clips with overflow:hidden. */
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: #0a1109;
  object-fit: cover;
  object-position: center;
  transform: scale(var(--stock-logo-zoom, 1.08));
}

/* Strategy glyphs are viewBox-tight SVGs — zooming them would crop the artwork. */
.stock-ai-market-icon img {
  --stock-logo-zoom: 1;
}

.stock-ai-market-icon {
  position: relative;
  overflow: hidden;
}

.stock-ai-market-icon img {
  background: rgba(7, 17, 11, 0.82);
}

.stock-name,
.stock-value {
  display: grid;
  min-width: 0;
}

.stock-name b,
.stock-value b {
  overflow: hidden;
  color: var(--stock-ink);
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-name small,
.stock-value small {
  margin-top: 4px;
  overflow: hidden;
  color: var(--stock-dim);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-value {
  justify-items: end;
  text-align: right;
}

.stock-value b {
  font-size: 15px;
}

.stock-market-spark {
  display: block;
  width: 72px;
  height: 38px;
  overflow: visible;
  color: var(--stock-mint);
  justify-self: center;
  margin-inline: auto;
}

.stock-market-spark .area {
  display: none;
}

.stock-market-spark .line {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.stock-market-spark.down {
  color: var(--stock-red);
}

.stock-market-spark.down .area,
.stock-market-spark.down .line {
  transform: scaleY(-1);
  transform-box: fill-box;
  transform-origin: center;
}

.stock-ai-market-row {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 72px minmax(76px, auto);
  gap: 11px;
  width: 100%;
  min-height: 78px;
  align-items: center;
  padding: 10px 11px;
  overflow: hidden;
  border: 1px solid var(--stock-stroke);
  border-radius: var(--stock-radius-md);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.018)),
    rgba(9, 15, 12, 0.76);
  color: var(--stock-ink);
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.stock-ai-market-row::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(200, 243, 95, 0.065), transparent 38%);
  opacity: 0;
  transition: opacity 160ms ease;
}

.stock-ai-market-row:hover::after {
  opacity: 1;
}

.stock-ai-market-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(200, 243, 95, 0.24);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(200, 243, 95, 0.92), rgba(70, 230, 144, 0.86));
  color: #07110b;
  font-size: 13px;
  font-weight: 950;
}

.stock-ai-market-copy,
.stock-ai-market-value {
  display: grid;
  min-width: 0;
}

.stock-ai-market-copy b,
.stock-ai-market-copy small,
.stock-ai-market-value strong,
.stock-ai-market-value small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-ai-market-copy b {
  display: -webkit-box;
  line-height: 1.15;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--stock-ink);
  font-weight: 850;
}

.stock-ai-market-copy small,
.stock-ai-market-value small {
  margin-top: 4px;
  color: var(--stock-dim);
  font-size: 10px;
}

.stock-ai-market-value {
  justify-items: end;
  text-align: right;
}

.stock-ai-market-value strong {
  color: var(--stock-mint);
  font-size: 15px;
  font-weight: 900;
}

.stock-ai-market-value strong.down {
  color: var(--stock-red);
}

.stock-risk {
  display: grid;
  gap: 5px;
  margin-top: 17px;
  padding: 12px 13px;
  border: 1px solid rgba(232, 184, 76, 0.24);
  border-radius: var(--stock-radius-sm);
  background:
    linear-gradient(90deg, rgba(232, 184, 76, 0.1), rgba(255, 159, 67, 0.035)),
    rgba(18, 14, 7, 0.56);
}

.stock-risk b {
  color: var(--stock-gold);
  font-size: 12px;
  font-weight: 900;
}

.stock-risk span {
  color: rgba(255, 235, 186, 0.68);
  font-size: 12px;
  line-height: 1.42;
}

.stock-search {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 52px;
  margin-bottom: 14px;
  padding: 0 15px;
  border: 1px solid var(--stock-stroke);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02)),
    rgba(8, 14, 11, 0.78);
  color: var(--stock-dim);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.stock-search span {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 50%;
  background: rgba(200, 243, 95, 0.08);
  color: var(--stock-lime);
  font-size: 12px;
}

.stock-search input {
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--stock-ink);
  outline: 0;
}

.stock-search input::placeholder {
  color: var(--stock-dim);
}

.stock-mover,
.stock-trade-card,
.stock-invest-hero,
.stock-balance,
.stock-offering,
.stock-order,
.stock-book,
.stock-strategy,
.stock-account {
  border: 1px solid var(--stock-stroke);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.017)),
    var(--stock-surface);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    var(--stock-shadow-soft);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
}

.stock-mover {
  position: relative;
  min-height: 168px;
  overflow: hidden;
  padding: 18px;
  border-radius: var(--stock-radius-lg);
}

.stock-mover::after {
  content: "";
  position: absolute;
  right: -28px;
  bottom: -62px;
  width: 172px;
  height: 172px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(70, 230, 144, 0.13) 0 34%, transparent 35%),
    conic-gradient(from 10deg, rgba(200, 243, 95, 0.22), transparent, rgba(232, 184, 76, 0.16), transparent);
}

.stock-mover canvas {
  position: absolute;
  inset: 0;
  opacity: 0.54;
}

.stock-mover div {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.stock-mover h2,
.stock-mover strong {
  display: block;
  margin: 8px 0 0;
  overflow: hidden;
  color: var(--stock-ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-mover h2 {
  font-size: 22px;
  font-weight: 880;
}

.stock-mover strong {
  font-size: 38px;
  font-weight: 930;
  letter-spacing: -0.04em;
}

.stock-mover em,
.stock-pair em {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  min-height: 30px;
  align-items: center;
  margin-top: 12px;
  padding: 0 11px;
  overflow: hidden;
  border: 1px solid rgba(70, 230, 144, 0.22);
  border-radius: 999px;
  background: rgba(70, 230, 144, 0.105);
  color: var(--stock-mint);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-market-leaders {
  position: relative;
  width: 100%;
  overflow: visible;
}

.stock-market-leader-track {
  position: relative;
  display: block;
  width: 100%;
  height: 252px;
  overflow: visible;
  outline: 0;
  perspective: 980px;
  touch-action: pan-y;
}

.stock-market-leader-card {
  display: grid;
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% - 44px);
  min-height: 212px;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid rgba(226, 255, 219, 0.22);
  border-radius: var(--stock-radius-lg);
  background:
    linear-gradient(142deg, rgba(238, 255, 233, 0.105), transparent 27%),
    radial-gradient(220px 150px at 98% 0%, rgba(93, 236, 153, 0.13), transparent 70%),
    linear-gradient(150deg, rgba(18, 37, 27, 0.86), rgba(4, 11, 7, 0.9));
  color: var(--stock-ink);
  cursor: pointer;
  pointer-events: auto;
  box-shadow:
    inset 0 1px 0 rgba(247, 255, 243, 0.19),
    inset 0 -1px 0 rgba(62, 201, 117, 0.08),
    0 7px 8px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(20px) saturate(142%);
  -webkit-backdrop-filter: blur(20px) saturate(142%);
  transform-origin: 0 0;
  will-change: transform, opacity;
  transition:
    transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 200ms ease,
    filter 200ms ease;
}

.stock-market-leader-card::before,
.stock-market-leader-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.stock-market-leader-card::before {
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(4, 10, 7, 0.97) 0%, rgba(4, 11, 7, 0.84) 43%, rgba(5, 12, 8, 0.32) 78%, rgba(5, 12, 8, 0.16) 100%),
    linear-gradient(0deg, rgba(2, 7, 4, 0.54), transparent 48%);
}

.stock-market-leader-card::after {
  z-index: 3;
  inset: 1px;
  border: 1px solid rgba(244, 255, 240, 0.055);
  border-radius: calc(var(--stock-radius-lg) - 1px);
  background: linear-gradient(112deg, rgba(255, 255, 255, 0.12), transparent 18%, transparent 72%, rgba(117, 255, 179, 0.055));
}

.stock-market-leader-card[data-deck-position="0"] {
  z-index: 5;
  opacity: 1;
  filter: none;
  transform: translate3d(var(--deck-drag-x, 0px), 0, 28px) rotate(var(--deck-drag-rotate, 0deg)) scale(1);
}

.stock-market-leader-card[data-deck-position="1"] {
  z-index: 4;
  opacity: 0.94;
  filter: saturate(0.94) brightness(0.96);
  transform: translate3d(11px, 8px, 6px) scale(0.993);
}

.stock-market-leader-card[data-deck-position="2"] {
  z-index: 3;
  opacity: 0.82;
  filter: saturate(0.86) brightness(0.9);
  transform: translate3d(22px, 16px, -16px) scale(0.986);
}

.stock-market-leader-card[data-deck-position="3"] {
  z-index: 2;
  opacity: 0.67;
  filter: saturate(0.76) brightness(0.83);
  transform: translate3d(33px, 24px, -38px) scale(0.979);
}

.stock-market-leader-card[data-deck-position="4"] {
  z-index: 1;
  opacity: 0.5;
  filter: saturate(0.66) brightness(0.76);
  transform: translate3d(44px, 32px, -60px) scale(0.972);
}

.stock-market-leader-card.is-dragging {
  transition: none;
}

.stock-market-leader-card.is-swipe-away {
  opacity: 0;
  transform: translate3d(var(--deck-exit-x), -8px, 62px) rotate(var(--deck-exit-rotate)) scale(0.98);
  transition:
    transform 210ms cubic-bezier(0.4, 0, 1, 1),
    opacity 180ms ease;
}

.stock-market-leader-card canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.88;
}

.stock-market-leader-copy {
  position: relative;
  z-index: 2;
  display: grid;
  min-width: 0;
  align-content: start;
  padding: 17px 18px 16px;
}

.stock-market-leader-kicker {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.stock-market-leader-kicker span {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  padding: 0 10px;
  border: 1px solid rgba(200, 243, 95, 0.22);
  border-radius: 999px;
  background: rgba(200, 243, 95, 0.1);
  color: var(--stock-lime);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.07em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.stock-market-leader-kicker small {
  color: rgba(228, 240, 229, 0.62);
  font-size: 10px;
  font-weight: 760;
  white-space: nowrap;
}

.stock-market-leader-copy h2 {
  margin: 15px 0 0;
  color: var(--stock-ink);
  font-size: 31px;
  font-weight: 920;
  letter-spacing: -0.035em;
  line-height: 0.94;
}

.stock-market-leader-copy p {
  display: grid;
  width: fit-content;
  max-width: 64%;
  margin: 8px 0 0;
  color: rgba(238, 248, 238, 0.82);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.22;
}

.stock-market-leader-copy p small {
  margin-top: 4px;
  color: rgba(191, 207, 194, 0.52);
  font-size: 9.5px;
  font-weight: 680;
  letter-spacing: 0.025em;
}

.stock-market-leader-value {
  display: flex;
  min-width: 0;
  align-items: flex-end;
  gap: 12px;
  margin-top: 17px;
}

.stock-market-leader-value strong {
  overflow: hidden;
  color: var(--stock-ink);
  font-size: 34px;
  font-weight: 930;
  letter-spacing: -0.045em;
  line-height: 0.9;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-market-leader-value em {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 0 10px;
  border: 1px solid rgba(85, 240, 162, 0.28);
  border-radius: 999px;
  background: rgba(32, 146, 91, 0.19);
  color: var(--stock-mint);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.stock-market-leader-value em.down {
  border-color: rgba(255, 101, 123, 0.28);
  background: rgba(154, 38, 57, 0.19);
  color: var(--stock-red);
}

.stock-market-leader-footer {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 4px;
}

.stock-market-leader-footer > span {
  color: var(--stock-dim);
  font-size: 10px;
  font-weight: 760;
  letter-spacing: 0.035em;
  white-space: nowrap;
}

.stock-market-leader-dots {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
}

.stock-market-leader-dots button {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  place-items: center;
  padding: 0;
  background: transparent;
}

.stock-market-leader-dots button span {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(220, 235, 222, 0.26);
}

.stock-market-leader-dots button.on span {
  width: 17px;
  background: var(--stock-lime);
}

.stock-market-leader-skeleton {
  padding: 18px;
}

.stock-market-leader-skeleton i,
.stock-market-leader-skeleton b,
.stock-market-leader-skeleton strong,
.stock-market-leader-skeleton em {
  position: relative;
  z-index: 4;
  display: block;
  border-radius: 999px;
  background: rgba(210, 232, 213, 0.09);
}

.stock-market-leader-skeleton i {
  width: 116px;
  height: 26px;
}

.stock-market-leader-skeleton b {
  width: 92px;
  height: 28px;
  margin-top: 18px;
}

.stock-market-leader-skeleton strong {
  width: 148px;
  height: 36px;
  margin-top: 16px;
}

.stock-market-leader-skeleton em {
  width: 72px;
  height: 24px;
  margin-top: 14px;
}

.stock-market-leaders.is-loading .stock-market-leader-skeleton > * {
  animation: stock-market-leader-pulse 1.2s ease-in-out infinite alternate;
}

@keyframes stock-market-leader-pulse {
  to { opacity: 0.46; }
}

.stock-market-leader-error {
  display: grid;
  min-height: 168px;
  place-content: center;
  justify-items: center;
  gap: 8px;
  padding: 20px;
  border: 1px solid var(--stock-stroke);
  border-radius: var(--stock-radius-lg);
  background: rgba(8, 14, 11, 0.78);
  text-align: center;
}

.stock-market-leader-error strong {
  color: var(--stock-ink);
  font-size: 15px;
}

.stock-market-leader-error span {
  color: var(--stock-muted);
  font-size: 11px;
}

.stock-market-leader-error button {
  min-height: 44px;
  margin-top: 4px;
  padding: 0 18px;
  border: 1px solid rgba(200, 243, 95, 0.3);
  border-radius: 999px;
  background: rgba(200, 243, 95, 0.1);
  color: var(--stock-lime);
  font-weight: 850;
}

.stock-chips {
  display: flex;
  width: 100%;
  gap: 8px;
  margin: 14px 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 1px;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}

.stock-chips::-webkit-scrollbar {
  display: none;
}

.stock-chips button {
  flex: 0 0 auto;
  min-width: 0;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--stock-stroke);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--stock-muted);
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
  scroll-snap-align: start;
}

.stock-chips button.on {
  border-color: rgba(200, 243, 95, 0.46);
  background: linear-gradient(135deg, var(--stock-lime), var(--stock-mint));
  color: #07110b;
  box-shadow: 0 10px 26px rgba(70, 230, 144, 0.14);
}

.stock-page-markets .stock-chips[data-tabs="markets"] {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  overflow: visible;
  padding-bottom: 0;
  scroll-snap-type: none;
}

.stock-page-markets .stock-chips[data-tabs="markets"] button {
  width: 100%;
  min-height: 46px;
  padding: 0 8px;
  border: 1px solid rgba(220, 255, 208, 0.16);
  background:
    linear-gradient(145deg, rgba(226, 255, 218, 0.105), rgba(67, 193, 122, 0.075) 48%, rgba(4, 12, 7, 0.64)),
    rgba(11, 23, 15, 0.72);
  color: rgba(220, 233, 222, 0.7);
  line-height: 1.08;
  white-space: normal;
  box-shadow:
    inset 0 1px 0 rgba(249, 255, 246, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.42),
    0 8px 20px rgba(0, 0, 0, 0.13);
  backdrop-filter: blur(14px) saturate(126%);
  -webkit-backdrop-filter: blur(14px) saturate(126%);
}

.stock-page-markets .stock-chips[data-tabs="markets"] button.on {
  border-color: rgba(225, 255, 211, 0.48);
  background:
    linear-gradient(150deg, rgba(230, 255, 213, 0.9), rgba(156, 239, 128, 0.82) 45%, rgba(71, 219, 139, 0.78)),
    rgba(85, 230, 143, 0.66);
  color: #07110b;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    inset 0 -12px 22px rgba(10, 81, 40, 0.12),
    0 11px 24px rgba(70, 230, 144, 0.12);
}

/* Title block only. Unscoped, this also hit .stock-page-head-actions, so the wallet
   chip's container claimed the full 349px header row and squeezed the title to zero. */
.stock-page-markets .stock-page-head > div:first-child {
  width: 100%;
}

.stock-page-markets .stock-page-head p {
  max-width: 340px;
}

.stock-page-markets .stock-market-row .stock-name small {
  color: rgba(205, 219, 207, 0.52);
}

.stock-page-markets .stock-market-row .stock-value small {
  margin-top: 3px;
}

.stock-tab-panel {
  display: none;
}

.stock-tab-panel.on {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .stock-market-leaders.is-loading .stock-market-leader-skeleton > * {
    animation: none;
  }

  .stock-market-leader-track {
    scroll-behavior: auto;
  }

  .stock-market-leader-card {
    transition: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .stock-market-leader-card {
    background: #102018;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .stock-page-markets .stock-chips[data-tabs="markets"] button {
    background: #102018;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .stock-page-markets .stock-chips[data-tabs="markets"] button.on {
    background: #9ce985;
  }
}

.stock-trade-card {
  display: grid;
  gap: 13px;
  overflow: hidden;
  padding: 15px;
  border-radius: var(--stock-radius-lg);
}

.stock-page-trade {
  background: #050505;
  font-family: var(--stock-font-product);
  font-feature-settings: "liga" 1, "calt" 1, "tnum" 1;
}

.stock-trade-screen {
  width: 100%;
}

.stock-page-trade .stock-trade-card {
  gap: 4px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.stock-page-trade .stock-pair {
  min-height: 90px;
  align-items: flex-end;
  padding: 2px 4px 4px;
}

.stock-page-trade .stock-pair h2 {
  margin: 0;
  font-size: 21px;
  font-weight: 650;
  letter-spacing: -0.025em;
}

.stock-page-trade .stock-pair strong {
  margin-top: 6px;
  font-size: 42px;
  font-weight: 620;
  line-height: 1;
  letter-spacing: -0.04em;
}

.stock-page-trade .stock-pair em {
  min-width: 96px;
  min-height: 44px;
  align-self: flex-end;
  justify-content: center;
  margin: 0 0 8px;
  padding: 0 20px;
  border-color: rgba(70, 230, 144, 0.3);
  background: rgba(20, 92, 59, 0.2);
  font-size: 15px;
  font-weight: 680;
}

.stock-pair {
  justify-content: space-between;
  gap: 14px;
}

.stock-pair > div {
  min-width: 0;
}

.stock-pair h2,
.stock-pair strong {
  margin: 5px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-market-source {
  display: block;
  margin-top: 5px;
  color: #7f8c83;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.25;
}

.stock-security-tabs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 17px 0 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.085);
}

.stock-security-tabs button {
  position: relative;
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: var(--stock-dim);
  font-family: var(--stock-font-product);
  font-size: 13px;
  font-weight: 620;
  letter-spacing: -0.01em;
  transition: color 160ms ease;
}

.stock-security-tabs button::after {
  position: absolute;
  right: 18%;
  bottom: -1px;
  left: 18%;
  height: 2px;
  border-radius: 999px 999px 0 0;
  background: var(--stock-lime);
  content: "";
  opacity: 0;
  transform: scaleX(0.5);
  transition: opacity 160ms ease, transform 160ms ease;
}

.stock-security-tabs button.on {
  color: var(--stock-ink);
}

.stock-security-tabs button.on::after {
  opacity: 1;
  transform: scaleX(1);
}

.stock-security-tabs button:focus-visible {
  outline: 2px solid rgba(200, 243, 95, 0.62);
  outline-offset: -3px;
}

.stock-security-panel[hidden] {
  display: none !important;
}

.stock-security-panel.on {
  animation: stock-sec-panel-in 160ms ease-out both;
}

@keyframes stock-sec-panel-in {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

.stock-security-panel[data-security-panel="financials"],
.stock-security-panel[data-security-panel="company"] {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  min-height: 420px;
  padding: 2px 2px 8px;
}

.stock-sec-heading,
.stock-sec-section-title,
.stock-sec-foot,
.stock-sec-metric > div,
.stock-sec-filing,
.stock-sec-former p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.stock-sec-heading {
  align-items: flex-start;
  padding: 10px 2px 18px;
}

.stock-sec-heading > div {
  min-width: 0;
}

.stock-sec-eyebrow {
  display: block;
  margin-bottom: 5px;
  color: var(--stock-dim);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.stock-sec-heading h3,
.stock-sec-section-title h4 {
  margin: 0;
  color: var(--stock-ink);
  font-weight: 680;
  letter-spacing: -0.025em;
}

.stock-sec-heading h3 {
  overflow: hidden;
  font-size: 18px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-sec-company-heading p {
  margin: 6px 0 0;
  color: var(--stock-muted);
  font-size: 11px;
}

.stock-sec-source {
  flex: 0 0 auto;
  padding: 6px 9px;
  border: 1px solid rgba(200, 243, 95, 0.2);
  border-radius: 999px;
  background: rgba(200, 243, 95, 0.065);
  color: var(--stock-lime);
  font-size: 9px;
  font-weight: 720;
  letter-spacing: 0.035em;
}

.stock-sec-periods {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 4px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.035);
}

.stock-sec-periods button {
  min-height: 38px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--stock-dim);
  font-family: var(--stock-font-product);
  font-size: 11px;
  font-weight: 680;
}

.stock-sec-periods button.on {
  background: rgba(255, 255, 255, 0.075);
  color: var(--stock-ink);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.055);
}

.stock-sec-categories {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 9px;
}

.stock-sec-categories button {
  min-height: 44px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--stock-dim);
  font-family: var(--stock-font-product);
  font-size: 10px;
  font-weight: 670;
  line-height: 1.2;
  text-wrap: balance;
}

.stock-sec-categories button.on {
  border-color: rgba(200, 243, 95, 0.42);
  background: rgba(200, 243, 95, 0.085);
  color: var(--stock-lime);
  box-shadow: inset 0 0 0 1px rgba(200, 243, 95, 0.035);
}

.stock-sec-card-grid {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  overflow: visible;
  padding: 1px;
}

.stock-sec-filings-grid::-webkit-scrollbar {
  display: none;
}

.stock-sec-metric,
.stock-sec-company-grid > div,
.stock-sec-share-card {
  border: 1px solid rgba(255, 255, 255, 0.065);
  background: rgba(255, 255, 255, 0.032);
}

.stock-sec-metric {
  display: flex;
  height: 146px;
  flex-direction: column;
  overflow: hidden;
  padding: 13px;
  border-radius: 15px;
}

.stock-sec-metric small,
.stock-sec-metric span,
.stock-sec-company-grid dt,
.stock-sec-share-card small,
.stock-sec-share-card > span,
.stock-sec-section-title span,
.stock-sec-filing small,
.stock-sec-former span,
.stock-sec-foot {
  color: var(--stock-dim);
  font-size: 9px;
}

.stock-sec-metric em {
  font-size: 9px;
  font-style: normal;
  font-weight: 720;
}

.stock-sec-metric em.up { color: var(--stock-mint); }
.stock-sec-metric em.down { color: var(--stock-red); }

.stock-sec-metric strong {
  display: block;
  margin: 8px 0 3px;
  overflow: hidden;
  color: var(--stock-ink);
  font-size: 18px;
  font-weight: 670;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-sec-metric > span {
  display: block;
  min-height: 12px;
  line-height: 1.3;
}

.stock-sec-metric.is-empty { opacity: 0.58; }

.stock-sec-spark {
  display: flex;
  height: 25px;
  align-items: flex-end;
  gap: 3px;
  margin-top: auto;
  padding-top: 8px;
  border-bottom: 1px solid rgba(70, 230, 144, 0.13);
}

.stock-sec-spark i {
  min-width: 3px;
  height: var(--sec-bar);
  flex: 1;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, rgba(70, 230, 144, 0.8), rgba(70, 230, 144, 0.2));
}

.stock-sec-trend em {
  color: var(--stock-dim);
}

.stock-sec-selector {
  display: grid;
  width: 100%;
  min-width: 0;
  gap: 6px;
  margin-bottom: 8px;
}

.stock-sec-selector-financial {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.stock-sec-selector-analysis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.stock-sec-selector button {
  min-width: 0;
  min-height: 38px;
  overflow: hidden;
  padding: 0 4px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--stock-dim);
  font-family: var(--stock-font-product);
  font-size: 8.5px;
  font-weight: 660;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.stock-sec-selector-analysis button {
  font-size: 9px;
}

.stock-sec-selector button.on {
  border-color: rgba(200, 243, 95, 0.48);
  background: rgba(200, 243, 95, 0.1);
  color: var(--stock-lime);
}

.stock-sec-selector button:disabled {
  cursor: not-allowed;
  opacity: 0.38;
}

.stock-sec-focus-picker {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  margin-bottom: 8px;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.stock-sec-focus-picker::-webkit-scrollbar {
  display: none;
}

.stock-sec-focus-picker button {
  min-height: 32px;
  flex: 0 0 auto;
  padding: 0 11px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--stock-dim);
  font-family: var(--stock-font-product);
  font-size: 9px;
  font-weight: 660;
}

.stock-sec-focus-picker button.on {
  border-color: rgba(200, 243, 95, 0.42);
  background: rgba(200, 243, 95, 0.09);
  color: var(--stock-lime);
}

.stock-sec-focus-card {
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.032);
}

.stock-sec-focus-card > div:first-child,
.stock-sec-focus-card footer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.stock-sec-focus-card > div:first-child span {
  color: var(--stock-dim);
  font-size: 10px;
  font-weight: 650;
}

.stock-sec-focus-card > div:first-child strong {
  color: var(--stock-ink);
  font-size: 19px;
  font-weight: 680;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}

.stock-sec-focus-card > p {
  margin: 6px 0 0;
  color: var(--stock-dim);
  font-size: 9px;
  line-height: 1.45;
}

.stock-sec-focus-card .stock-sec-spark {
  height: 76px;
  margin-top: 12px;
  padding-top: 0;
  gap: 7px;
}

.stock-sec-focus-card .stock-sec-spark i {
  min-width: 12px;
  max-width: 44px;
}

.stock-sec-focus-card footer {
  margin-top: 8px;
  color: var(--stock-dim);
  font-size: 8px;
}

.stock-sec-focus-card footer em {
  font-style: normal;
  text-align: center;
}

.stock-sec-company-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.stock-sec-company-grid > div {
  display: flex;
  min-height: 94px;
  flex-direction: column;
  padding: 12px;
  border-radius: 14px;
}

.stock-sec-company-grid dd {
  margin: 8px 0 0;
  overflow-wrap: anywhere;
  color: var(--stock-ink-2);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
}

.stock-sec-company-grid > div > small {
  display: block;
  margin-top: auto;
  padding-top: 7px;
  color: var(--stock-dim);
  font-size: 8px;
  line-height: 1.3;
}

.stock-sec-share-card {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-top: 8px;
  padding: 14px;
  border-radius: 15px;
}

.stock-sec-share-card strong {
  display: block;
  margin-top: 4px;
  color: var(--stock-ink);
  font-size: 22px;
  font-weight: 660;
  letter-spacing: -0.03em;
}

.stock-sec-share-card > span {
  max-width: 42%;
  text-align: right;
}

.stock-sec-section {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  margin-top: 18px;
}

.stock-sec-section-compact {
  margin-top: 14px;
}

.stock-sec-section-expanded {
  margin-top: 15px;
  overflow: visible;
}

.stock-sec-section-title {
  margin-bottom: 7px;
}

.stock-sec-section-title h4 {
  font-size: 13px;
}

.stock-sec-filings {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.stock-sec-filings-grid {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 1px 1px 5px;
  border-top: 0;
}

.stock-sec-filing {
  min-height: 48px;
  padding: 7px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: inherit;
  text-decoration: none;
}

.stock-sec-filings-grid .stock-sec-filing {
  min-height: 50px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.026);
  scroll-snap-align: start;
}

.stock-sec-filing span {
  display: grid;
  gap: 2px;
}

.stock-sec-filing b {
  color: var(--stock-ink-2);
  font-size: 11px;
}

.stock-sec-filing em {
  color: var(--stock-lime);
  font-size: 14px;
  font-style: normal;
}

.stock-sec-former {
  margin-top: 12px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.026);
}

.stock-sec-company-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 12px;
}

.stock-sec-company-tabs button {
  min-height: 38px;
  padding: 0 8px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--stock-dim);
  font-family: var(--stock-font-product);
  font-size: 10px;
  font-weight: 660;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.stock-sec-company-tabs button.on {
  border-color: rgba(70, 230, 144, 0.46);
  background: rgba(70, 230, 144, 0.09);
  color: var(--stock-mint);
}

.stock-sec-description {
  margin-bottom: 8px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.026);
}

.stock-sec-company-profile {
  margin-top: 8px;
}

.stock-sec-description > span {
  color: var(--stock-dim);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.065em;
}

.stock-sec-description p {
  margin: 8px 0 7px;
  color: var(--stock-ink-2);
  font-size: 11px;
  line-height: 1.55;
}

.stock-sec-description small {
  color: var(--stock-dim);
  font-size: 9px;
  line-height: 1.4;
}

.stock-sec-company-body {
  min-height: 250px;
}

.stock-sec-actions {
  display: grid;
  gap: 8px;
}

.stock-sec-actions article,
.stock-sec-action-empty {
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.026);
}

.stock-sec-actions article > div,
.stock-sec-actions article p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.stock-sec-actions article > div strong {
  color: var(--stock-ink);
  font-size: 14px;
}

.stock-sec-actions article > div span,
.stock-sec-actions article p span,
.stock-sec-action-empty p {
  color: var(--stock-dim);
  font-size: 9px;
}

.stock-sec-actions article p {
  margin: 10px 0 0;
}

.stock-sec-actions article p b {
  color: var(--stock-ink-2);
  font-size: 10px;
  font-weight: 620;
}

.stock-sec-action-note {
  display: block;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.055);
  color: var(--stock-dim);
  font-size: 9px;
  line-height: 1.45;
}

.stock-sec-action-empty {
  min-height: 180px;
  display: grid;
  align-content: center;
  text-align: center;
}

.stock-sec-action-empty strong {
  color: var(--stock-ink-2);
  font-size: 12px;
}

.stock-sec-action-empty p {
  max-width: 280px;
  margin: 8px auto 0;
  line-height: 1.5;
}

.stock-sec-former summary {
  min-height: 44px;
  padding: 14px 0;
  color: var(--stock-ink-2);
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
}

.stock-sec-former p {
  margin: 0;
  padding: 9px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.055);
  font-size: 10px;
}

.stock-sec-foot {
  align-items: flex-start;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.055);
  line-height: 1.45;
}

.stock-sec-foot span { max-width: 66%; }
.stock-sec-foot a { color: var(--stock-lime); text-decoration: none; }

.stock-sec-loading,
.stock-sec-error {
  min-height: 330px;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
}

.stock-sec-loading {
  grid-template-columns: repeat(3, 7px);
  gap: 6px;
}

.stock-sec-loading i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--stock-lime);
  animation: stock-sec-pulse 900ms ease-in-out infinite alternate;
}

.stock-sec-loading i:nth-child(2) { animation-delay: 150ms; }
.stock-sec-loading i:nth-child(3) { animation-delay: 300ms; }
.stock-sec-loading p { grid-column: 1 / -1; color: var(--stock-dim); font-size: 10px; }

@keyframes stock-sec-pulse {
  to { opacity: 0.25; transform: translateY(-3px); }
}

.stock-sec-error span { color: var(--stock-ink); font-weight: 680; }
.stock-sec-error p { max-width: 280px; color: var(--stock-dim); font-size: 11px; }
.stock-sec-error button {
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid rgba(200, 243, 95, 0.34);
  border-radius: 999px;
  background: rgba(200, 243, 95, 0.1);
  color: var(--stock-lime);
  font-family: var(--stock-font-product);
  font-weight: 680;
}

.stock-pair h2 {
  color: var(--stock-ink);
  font-size: 20px;
  font-weight: 850;
}

.stock-pair strong {
  display: block;
  color: var(--stock-ink);
  font-size: 34px;
  font-weight: 930;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.stock-value b,
.stock-metrics b,
.stock-order input,
.stock-book p {
  font-variant-numeric: tabular-nums;
}

.stock-pair em {
  flex: 0 1 auto;
  margin-top: 0;
}

.stock-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.stock-metrics span {
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid rgba(255, 255, 255, 0.045);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--stock-dim);
  font-size: 11px;
}

.stock-metrics b {
  display: block;
  overflow: hidden;
  margin-bottom: 3px;
  color: var(--stock-ink);
  font-size: 13px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-trade-card > canvas,
.stock-balance canvas {
  display: block;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: var(--stock-radius-md);
  background:
    linear-gradient(rgba(200, 243, 95, 0.06) 1px, transparent 1px) 0 0 / 100% 25%,
    linear-gradient(90deg, rgba(200, 243, 95, 0.035) 1px, transparent 1px) 0 0 / 20% 100%,
    rgba(0, 0, 0, 0.2);
}

.stock-chart-shell {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: var(--stock-radius-md);
  background: #0b120e;
}

.stock-chart-stage {
  min-width: 0;
  background: #050505;
}

.stock-page-trade .stock-chart-shell {
  border: 0;
  border-radius: 12px;
  background: #050505;
}

.stock-tv-chart {
  position: relative;
  width: 100%;
  height: 248px;
  min-height: 248px;
  overscroll-behavior: contain;
}

.stock-page-trade .stock-tv-chart {
  height: clamp(340px, 52dvh, 460px);
  min-height: 320px;
}

.stock-page-trade .stock-tv-chart[data-oscillators="1"] {
  height: clamp(420px, 62dvh, 540px);
}

.stock-page-trade .stock-tv-chart[data-oscillators="2"] {
  height: clamp(500px, 72dvh, 640px);
}

.stock-chart-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin-top: 8px;
}

.stock-page-trade .stock-chart-toolbar {
  gap: 10px;
  margin-top: 2px;
  padding: 0 2px 4px;
}

.stock-chart-indicators {
  display: flex;
  width: 100%;
  gap: 5px;
  overflow-x: auto;
  padding-bottom: 1px;
  scrollbar-width: none;
}

.stock-chart-indicators::-webkit-scrollbar {
  display: none;
}

.stock-chart-indicators button {
  flex: 1 0 auto;
  min-width: 52px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--stock-stroke);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--stock-dim);
  font-family: var(--stock-font-product);
  font-size: 10px;
  font-weight: 650;
}

.stock-ma-periods {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.stock-ma-periods[hidden] {
  display: none;
}

.stock-ma-periods > span {
  flex: 0 0 auto;
  color: var(--stock-dim);
  font-family: var(--stock-font-product);
  font-size: 10px;
  font-weight: 700;
}

.stock-ma-periods > div {
  display: grid;
  min-width: 0;
  flex: 1;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
}

.stock-ma-periods button {
  display: inline-flex;
  min-width: 0;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 4px;
  border: 1px solid var(--stock-stroke);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--stock-dim);
  font-family: var(--stock-font-product);
  font-size: 9px;
  font-weight: 700;
}

.stock-ma-periods button::before {
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--ma-color);
  content: "";
  opacity: 0.42;
}

.stock-ma-periods button.on {
  border-color: color-mix(in srgb, var(--ma-color) 42%, transparent);
  background: color-mix(in srgb, var(--ma-color) 10%, transparent);
  color: var(--stock-ink);
}

.stock-ma-periods button.on::before {
  opacity: 1;
  box-shadow: 0 0 8px color-mix(in srgb, var(--ma-color) 45%, transparent);
}

.stock-kbar {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 4px;
  margin: 0;
  overflow: visible;
  padding-bottom: 0;
}

.stock-kbar button {
  width: 100%;
  min-height: 32px;
  padding: 0 3px;
  font-size: 10px;
}

.stock-page-trade .stock-kbar button,
.stock-page-trade .stock-chart-modes button,
.stock-page-trade .stock-chart-actions button,
.stock-page-trade .stock-chart-indicators button {
  font-family: var(--stock-font-product);
  font-weight: 650;
}

.stock-trade-mode-tabs {
  margin-top: 18px;
}

.stock-trade-mode-tabs button {
  min-width: 112px;
  font-weight: 700;
}

.stock-chart-tool-row,
.stock-chart-tools,
.stock-chart-modes,
.stock-chart-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.stock-chart-tool-row {
  justify-content: space-between;
  min-width: 0;
}

.stock-chart-tools {
  flex: none;
}

.stock-chart-history-status {
  min-width: 0;
  overflow: hidden;
  color: var(--stock-dim);
  font-size: 10px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-chart-modes button,
.stock-chart-actions button {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--stock-stroke);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--stock-muted);
  font-size: 11px;
  font-weight: 850;
}

.stock-chart-actions button {
  min-width: 32px;
  padding: 0 8px;
}

.stock-chart-actions button[data-chart-action="zoom-in"],
.stock-chart-actions button[data-chart-action="zoom-out"] {
  font-size: 16px;
  line-height: 1;
}

.stock-chart-modes button.on {
  border-color: rgba(200, 243, 95, 0.46);
  background: rgba(200, 243, 95, 0.15);
  color: var(--stock-lime);
}

.stock-chart-actions button.on,
.stock-chart-indicators button.on {
  border-color: rgba(200, 243, 95, 0.42);
  background: rgba(200, 243, 95, 0.13);
  color: var(--stock-lime);
}

.stock-chart-stage:fullscreen,
.stock-chart-stage.is-chart-fullscreen {
  display: flex;
  width: 100vw;
  height: 100dvh;
  flex-direction: column;
  padding: max(10px, env(safe-area-inset-top)) 12px max(10px, env(safe-area-inset-bottom));
  background: #050505;
}

.stock-chart-stage:fullscreen .stock-chart-shell,
.stock-chart-stage.is-chart-fullscreen .stock-chart-shell {
  min-height: 0;
  flex: 1 1 auto;
}

.stock-chart-stage:fullscreen .stock-tv-chart,
.stock-chart-stage.is-chart-fullscreen .stock-tv-chart {
  width: 100%;
  height: 100% !important;
  min-height: 0;
}

.stock-chart-stage:fullscreen .stock-chart-toolbar,
.stock-chart-stage.is-chart-fullscreen .stock-chart-toolbar {
  flex: 0 0 auto;
  padding-top: 8px;
}

.stock-chart-history-status[data-state="loading"] {
  color: var(--stock-lime);
}

.stock-leverage {
  display: grid;
  gap: 8px;
}

.stock-leverage[hidden] {
  display: none;
}

.stock-leverage > span {
  color: var(--stock-dim);
  font-size: 12px;
  font-weight: 850;
}

.stock-leverage > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.stock-leverage button {
  min-height: 36px;
  padding: 0 8px;
  border: 1px solid var(--stock-stroke);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--stock-muted);
  font-weight: 900;
}

.stock-leverage button.on {
  border-color: rgba(200, 243, 95, 0.48);
  background: rgba(200, 243, 95, 0.15);
  color: var(--stock-lime);
}

.stock-order-wrap {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  margin-top: 12px;
}

.stock-order,
.stock-book {
  min-width: 0;
  padding: 13px;
  border-radius: var(--stock-radius-md);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.stock-order h3,
.stock-book h3 {
  margin: 0 0 11px;
  overflow: hidden;
  color: var(--stock-ink);
  font-size: 15px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-mini-tabs {
  gap: 6px;
  margin-bottom: 10px;
}

.stock-mini-tabs button {
  flex: 1;
  min-width: 0;
  min-height: 32px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--stock-muted);
  font-size: 11px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-mini-tabs button.on {
  border-color: rgba(200, 243, 95, 0.44);
  background: rgba(200, 243, 95, 0.14);
  color: var(--stock-lime);
}

.stock-order label {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  color: var(--stock-dim);
  font-size: 11px;
  font-weight: 760;
}

.stock-order input {
  min-width: 0;
  min-height: 42px;
  padding: 0 11px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--stock-radius-sm);
  background: rgba(0, 0, 0, 0.24);
  color: var(--stock-ink);
  outline: 0;
}

.stock-order input::placeholder {
  color: var(--stock-faint);
}

.stock-order-actions {
  gap: 8px;
  margin-top: 12px;
}

.stock-order-actions button {
  flex: 1;
  min-width: 0;
  min-height: 42px;
  overflow: hidden;
  border-radius: var(--stock-radius-sm);
  color: #07110b;
  font-size: 13px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-order-actions button:first-child {
  background: linear-gradient(135deg, var(--stock-lime), var(--stock-mint));
}

.stock-order-actions button:last-child {
  background: linear-gradient(135deg, #ffb057, var(--stock-red));
  color: #180706;
}

/* Spot hides the sell side, so the remaining button centres and takes the whole
   row instead of sitting in half of a two-up grid. `hidden` needs the explicit
   display:none because the button rule above would otherwise keep it laid out. */
.stock-order-actions button[hidden] {
  display: none;
}

.stock-order-actions.is-single {
  justify-content: center;
}

.stock-order-actions.is-single button {
  flex: 1 1 100%;
  max-width: 100%;
}

.stock-book p {
  justify-content: space-between;
  gap: 8px;
  min-height: 23px;
  margin: 0;
  overflow: hidden;
  font-size: 11px;
}

.stock-book p + p {
  border-top: 1px solid rgba(255, 255, 255, 0.045);
}

.stock-book b,
.stock-book span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-book b {
  color: var(--stock-muted);
  font-weight: 750;
  text-align: right;
}

.stock-trade-activity {
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid rgba(218, 255, 224, 0.12);
  border-radius: var(--stock-radius-lg);
  background:
    linear-gradient(145deg, rgba(238, 255, 233, 0.065), transparent 30%),
    rgba(9, 17, 12, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.stock-trade-activity-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 7px;
  border-bottom: 1px solid rgba(218, 255, 224, 0.08);
}

.stock-trade-activity-tabs button {
  min-width: 0;
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--stock-muted);
  font-size: 12px;
  font-weight: 850;
}

.stock-trade-activity-tabs button.on {
  border-color: rgba(223, 255, 213, 0.3);
  background:
    linear-gradient(150deg, rgba(234, 255, 226, 0.17), rgba(74, 218, 135, 0.11)),
    rgba(15, 34, 22, 0.82);
  color: var(--stock-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.stock-trade-activity-panel {
  min-height: 112px;
  padding: 13px;
}

.stock-trade-activity-panel[hidden] {
  display: none;
}

.stock-trade-activity-empty {
  display: grid;
  min-height: 84px;
  place-content: center;
  justify-items: center;
  gap: 5px;
  text-align: center;
}

.stock-trade-activity-empty strong {
  color: var(--stock-ink-2);
  font-size: 13px;
  font-weight: 850;
}

.stock-trade-activity-empty span {
  color: var(--stock-dim);
  font-size: 10.5px;
}

.stock-trade-position-list {
  display: grid;
  gap: 8px;
}

.stock-trade-activity [data-trade-activity-content] {
  display: grid;
  gap: 8px;
}

.stock-trade-position {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(218, 255, 224, 0.1);
  border-radius: 14px;
  background: rgba(3, 9, 6, 0.48);
}

.stock-trade-position.is-targeted {
  border-color: rgba(177, 255, 113, 0.58);
  box-shadow: 0 0 0 2px rgba(177, 255, 113, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.stock-trade-position-main,
.stock-trade-position-value {
  display: grid;
  min-width: 0;
}

.stock-trade-position-main b,
.stock-trade-position-value strong {
  overflow: hidden;
  color: var(--stock-ink);
  font-size: 13px;
  font-weight: 880;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-trade-position-main span,
.stock-trade-position > small {
  margin-top: 3px;
  overflow: hidden;
  color: var(--stock-dim);
  font-size: 9.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-trade-position-value {
  justify-items: end;
  text-align: right;
}

.stock-trade-position-value em {
  margin-top: 3px;
  color: var(--stock-mint);
  font-size: 10px;
  font-style: normal;
  font-weight: 820;
}

.stock-trade-position-value em.down {
  color: var(--stock-red);
}

.stock-trade-position-value button {
  min-height: 30px;
  margin-top: 5px;
  padding: 0 12px;
  border: 1px solid rgba(255, 112, 112, 0.34);
  border-radius: 999px;
  background: rgba(255, 82, 91, 0.09);
  color: #ff8b91;
  font-size: 10px;
  font-weight: 850;
}

.stock-position-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 7px;
}

.stock-position-actions button,
.stock-position-limit-form > button {
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid rgba(218, 255, 224, 0.16);
  border-radius: 11px;
  background: rgba(225, 255, 218, 0.055);
  color: var(--stock-ink-2);
  font-size: 10.5px;
  font-weight: 850;
  transition: transform 140ms ease, border-color 140ms ease, background-color 140ms ease;
}

.stock-position-actions button:active,
.stock-position-limit-form > button:active {
  transform: translateY(1px) scale(0.985);
}

.stock-position-actions button:focus-visible,
.stock-position-limit-form > button:focus-visible {
  outline: 2px solid rgba(177, 255, 113, 0.72);
  outline-offset: 2px;
}

.stock-position-actions button:hover,
.stock-position-limit-form > button:hover {
  border-color: rgba(177, 255, 113, 0.42);
  color: var(--stock-ink);
}

.stock-position-actions .stock-position-action-primary,
.stock-position-limit-form > button[type="submit"] {
  border-color: rgba(177, 255, 113, 0.36);
  background: linear-gradient(135deg, rgba(181, 255, 91, 0.18), rgba(57, 224, 137, 0.12));
  color: var(--stock-lime);
}

.stock-position-limit-form {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: end;
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px solid rgba(218, 255, 224, 0.08);
}

.stock-position-limit-form[hidden] {
  display: none;
}

.stock-position-limit-form label {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.stock-position-limit-form label span {
  color: var(--stock-dim);
  font-size: 9px;
  font-weight: 800;
}

.stock-position-limit-form input {
  width: 100%;
  min-width: 0;
  height: 38px;
  padding: 0 11px;
  border: 1px solid rgba(218, 255, 224, 0.14);
  border-radius: 11px;
  outline: 0;
  background: rgba(1, 8, 4, 0.76);
  color: var(--stock-ink);
  font: inherit;
  font-size: 11px;
  font-weight: 760;
}

.stock-position-limit-form input:focus {
  border-color: rgba(177, 255, 113, 0.62);
  box-shadow: 0 0 0 2px rgba(177, 255, 113, 0.1);
}

.stock-position-close-pending {
  grid-column: 1 / -1;
  display: grid;
  gap: 2px;
  margin-top: 7px;
  padding: 9px 11px;
  border: 1px solid rgba(255, 207, 87, 0.2);
  border-radius: 11px;
  background: rgba(255, 207, 87, 0.055);
}

.stock-position-close-pending span {
  color: #f1cf77;
  font-size: 10px;
  font-weight: 850;
}

.stock-position-close-pending small {
  color: var(--stock-dim);
  font-size: 8.5px;
}

@media (max-width: 460px) {
  .stock-position-limit-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stock-position-limit-form label {
    grid-column: 1 / -1;
  }
}

.stock-order-confirm-backdrop {
  position: fixed;
  z-index: 130;
  inset: 0;
  display: grid;
  place-items: end center;
  padding: 18px 14px calc(96px + env(safe-area-inset-bottom));
  background: rgba(0, 8, 4, 0.7);
  -webkit-backdrop-filter: blur(14px) saturate(0.8);
  backdrop-filter: blur(14px) saturate(0.8);
}

.stock-order-confirm-backdrop[hidden] {
  display: none;
}

.stock-order-confirm {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  width: min(100%, 430px);
  max-height: min(76vh, 650px);
  overflow: auto;
  padding: 20px;
  border: 1px solid rgba(198, 255, 99, 0.3);
  border-radius: 28px;
  background:
    radial-gradient(260px 160px at 90% 0, rgba(72, 229, 142, 0.15), transparent 70%),
    linear-gradient(150deg, rgba(25, 40, 29, 0.99), rgba(5, 13, 8, 0.99));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    0 30px 80px rgba(0, 0, 0, 0.62);
}

.stock-order-confirm-mark {
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  border: 1px solid rgba(195, 255, 89, 0.42);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(195, 255, 89, 0.18), rgba(8, 22, 12, 0.88));
  color: var(--stock-lime);
  font-size: 18px;
  font-weight: 950;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.stock-order-confirm-heading {
  min-width: 0;
}

.stock-order-confirm-heading span {
  color: var(--stock-dim);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.stock-order-confirm-heading h3 {
  margin: 4px 0 0;
  color: var(--stock-ink);
  font-size: 24px;
  line-height: 1.05;
}

.stock-order-confirm dl,
.stock-order-confirm > p,
.stock-order-confirm-actions {
  grid-column: 1 / -1;
}

.stock-order-confirm dl {
  display: grid;
  gap: 0;
  margin: 2px 0 0;
  overflow: hidden;
  border: 1px solid rgba(218, 255, 224, 0.1);
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.22);
}

.stock-order-confirm dl > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 13px;
}

.stock-order-confirm dl > div + div {
  border-top: 1px solid rgba(218, 255, 224, 0.07);
}

.stock-order-confirm dt,
.stock-order-confirm dd {
  margin: 0;
  font-size: 12px;
}

.stock-order-confirm dt {
  color: var(--stock-dim);
}

.stock-order-confirm dd {
  color: var(--stock-ink);
  font-weight: 850;
  text-align: right;
}

.stock-order-confirm dl .total {
  background: rgba(194, 255, 91, 0.06);
}

.stock-order-confirm dl .total dd {
  color: var(--stock-lime);
}

.stock-order-confirm > p {
  margin: 0;
  color: var(--stock-dim);
  font-size: 11px;
  line-height: 1.5;
}

.stock-order-confirm-status[data-state="loading"] {
  color: var(--stock-lime);
}

.stock-order-confirm-status[data-state="error"] {
  color: var(--stock-red);
}

.stock-order-confirm-actions {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 9px;
}

.stock-order-confirm-actions button {
  min-height: 48px;
  border: 1px solid rgba(218, 255, 224, 0.12);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--stock-ink-2);
  font-weight: 900;
}

.stock-order-confirm-actions button:last-child {
  border-color: rgba(194, 255, 91, 0.45);
  background: linear-gradient(135deg, var(--stock-lime), var(--stock-mint));
  color: #06110a;
}

body.stock-modal-open {
  overflow: hidden;
}

.stock-account-confirm-backdrop {
  position: fixed;
  z-index: 132;
  inset: 0;
  display: grid;
  place-items: end center;
  padding: 18px 14px calc(96px + env(safe-area-inset-bottom));
  background: rgba(0, 8, 4, 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(0.8);
  backdrop-filter: blur(14px) saturate(0.8);
}

.stock-account-confirm-backdrop[hidden] {
  display: none;
}

.stock-account-confirm {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  width: min(100%, 430px);
  padding: 20px;
  border: 1px solid rgba(255, 119, 125, 0.3);
  border-radius: 28px;
  background:
    radial-gradient(240px 150px at 92% 0, rgba(255, 85, 96, 0.12), transparent 72%),
    linear-gradient(150deg, rgba(35, 34, 25, 0.99), rgba(6, 13, 8, 0.99));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 30px 80px rgba(0, 0, 0, 0.62);
}

.stock-account-confirm-mark {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid rgba(255, 119, 125, 0.4);
  border-radius: 16px;
  background: rgba(255, 79, 91, 0.09);
  color: #ff8d93;
  font-size: 20px;
  font-weight: 950;
}

.stock-account-confirm span {
  color: var(--stock-dim);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.stock-account-confirm h3 {
  margin: 4px 0 0;
  color: var(--stock-ink);
  font-size: 22px;
}

.stock-account-confirm p,
.stock-account-confirm-actions {
  grid-column: 1 / -1;
}

.stock-account-confirm p {
  margin: 3px 0;
  color: var(--stock-ink-2);
  font-size: 12px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.stock-account-confirm-actions {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 9px;
}

.stock-account-confirm-actions button {
  min-height: 48px;
  border: 1px solid rgba(218, 255, 224, 0.12);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--stock-ink-2);
  font-weight: 900;
}

.stock-account-confirm-actions button:last-child {
  border-color: rgba(255, 119, 125, 0.4);
  background: linear-gradient(135deg, #ff9a77, #ff5368);
  color: #190507;
}

.stock-trade-position > small {
  grid-column: 1 / -1;
}

.stock-invest-hero,
.stock-offering {
  display: grid;
  gap: 10px;
  padding: 18px;
  border-radius: var(--stock-radius-lg);
}

.stock-invest-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(220px 160px at 85% 8%, rgba(232, 184, 76, 0.16), transparent 68%),
    linear-gradient(135deg, rgba(200, 243, 95, 0.075), transparent 38%),
    var(--stock-surface);
}

.stock-invest-hero::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 86px;
  height: 86px;
  border: 1px solid rgba(232, 184, 76, 0.24);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 184, 76, 0.12) 0 32%, transparent 34%);
}

.stock-invest-hero h2 {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--stock-ink);
  font-size: 48px;
  font-weight: 930;
  line-height: 1;
  letter-spacing: -0.045em;
}

.stock-invest-hero p,
.stock-offering p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--stock-muted);
  line-height: 1.42;
}

.stock-invest-hero button,
.stock-offering button {
  position: relative;
  z-index: 1;
  width: fit-content;
}

.stock-strategy {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 66px;
  gap: 11px;
  align-items: center;
  min-height: 78px;
  padding: 11px;
  border-radius: var(--stock-radius-md);
}

.stock-strategy > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(232, 184, 76, 0.22);
  border-radius: 14px;
  background: rgba(232, 184, 76, 0.11);
  color: var(--stock-gold);
  font-size: 13px;
  font-weight: 930;
}

.stock-strategy div,
.stock-account div {
  min-width: 0;
}

.stock-strategy b,
.stock-strategy small,
.stock-account b,
.stock-account span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-strategy b,
.stock-account b {
  color: var(--stock-ink);
  font-weight: 850;
}

.stock-strategy small,
.stock-account span {
  margin-top: 4px;
  color: var(--stock-dim);
  font-size: 11px;
}

.stock-strategy i,
.stock-account i {
  display: block;
  height: 4px;
  overflow: hidden;
  margin-top: 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.075);
}

.stock-strategy em,
.stock-account em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--stock-lime), var(--stock-mint));
}

.stock-strategy strong {
  overflow: hidden;
  color: var(--stock-mint);
  font-size: 13px;
  font-weight: 900;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-strategy strong.down {
  color: var(--stock-red);
}

.stock-strategy [data-strategy-followers] {
  display: inline;
}

.stock-offering {
  margin-bottom: 12px;
}

.stock-offering h3 {
  margin: 4px 0;
  overflow: hidden;
  color: var(--stock-ink);
  font-size: 21px;
  font-weight: 880;
  letter-spacing: -0.025em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-ipo-intro,
.stock-ipo-empty {
  display: grid;
  gap: 6px;
  margin: 4px 0 14px;
  padding: 15px 16px;
  border: 1px solid rgba(200, 243, 95, 0.12);
  border-radius: 18px;
  background: rgba(200, 243, 95, 0.035);
}

.stock-ipo-intro b,
.stock-ipo-empty b {
  color: var(--stock-ink);
  font-size: 14px;
}

.stock-ipo-intro span,
.stock-ipo-empty span {
  color: var(--stock-muted);
  font-size: 12px;
  line-height: 1.5;
}

.stock-ipo-card {
  gap: 14px;
  border: 1px solid rgba(215, 255, 222, 0.1);
  background:
    radial-gradient(180px 110px at 100% 0, rgba(61, 245, 147, 0.09), transparent 68%),
    var(--stock-surface);
}

.stock-ipo-card-main {
  position: relative;
  display: grid;
  gap: 5px;
}

.stock-ipo-card-main > span,
.stock-ipo-detail header span {
  width: fit-content;
  padding: 5px 9px;
  border: 1px solid rgba(200, 243, 95, 0.2);
  border-radius: 999px;
  color: var(--stock-lime);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.stock-ipo-card-main > i {
  position: absolute;
  top: 0;
  right: 0;
  color: var(--stock-mint);
  font-size: 9px;
  font-style: normal;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.stock-ipo-card-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 7px;
}

.stock-ipo-card-facts small {
  min-width: 0;
  padding: 9px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--stock-dim);
  font-size: 9px;
}

.stock-ipo-card-facts b {
  display: block;
  overflow: hidden;
  margin-bottom: 3px;
  color: var(--stock-ink);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-offering button:disabled,
.stock-ipo-allocate:disabled {
  border-color: rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.045);
  color: var(--stock-dim);
  cursor: not-allowed;
  opacity: 0.72;
}

.stock-ipo-back {
  width: fit-content;
  margin: 2px 0 12px;
  color: var(--stock-muted);
}

.stock-ipo-detail {
  display: grid;
  gap: 18px;
  padding: 18px;
  border: 1px solid rgba(215, 255, 222, 0.11);
  border-radius: var(--stock-radius-lg);
  background:
    radial-gradient(240px 160px at 100% 0, rgba(61, 245, 147, 0.105), transparent 70%),
    var(--stock-surface);
}

.stock-ipo-detail header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.stock-ipo-detail h1 {
  margin: 9px 0 5px;
  color: var(--stock-ink);
  font-size: 29px;
  line-height: 1.04;
  letter-spacing: -0.045em;
}

.stock-ipo-detail header p,
.stock-ipo-detail footer {
  margin: 0;
  color: var(--stock-muted);
  font-size: 12px;
  line-height: 1.5;
}

.stock-ipo-detail header > i {
  padding: 7px 9px;
  border: 1px solid rgba(61, 245, 147, 0.2);
  border-radius: 999px;
  color: var(--stock-mint);
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.stock-ipo-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.stock-ipo-detail-grid article {
  display: grid;
  gap: 7px;
  min-height: 82px;
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.028);
}

.stock-ipo-detail-grid span,
.stock-ipo-form-head small,
.stock-ipo-form-status {
  color: var(--stock-dim);
  font-size: 10px;
}

.stock-ipo-detail-grid b {
  align-self: end;
  color: var(--stock-ink);
  font-size: 13px;
  line-height: 1.35;
}

.stock-ipo-form {
  display: grid;
  gap: 12px;
  padding: 15px;
  border: 1px solid rgba(200, 243, 95, 0.13);
  border-radius: 18px;
  background: rgba(2, 9, 5, 0.42);
}

.stock-ipo-form-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.stock-ipo-form-head span,
.stock-ipo-form-head b {
  display: block;
}

.stock-ipo-form-head span {
  color: var(--stock-dim);
  font-size: 9px;
  text-transform: uppercase;
}

.stock-ipo-form-head b {
  margin-top: 3px;
  color: var(--stock-ink);
  font-size: 16px;
}

.stock-ipo-form > label:not(.stock-ipo-terms) > span {
  display: block;
  margin-bottom: 6px;
  color: var(--stock-muted);
  font-size: 10px;
}

.stock-ipo-form > label > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.28);
}

.stock-ipo-form input[type="number"] {
  min-width: 0;
  padding: 13px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--stock-ink);
  font: inherit;
  font-weight: 820;
}

.stock-ipo-form > label > div b {
  padding-right: 12px;
  color: var(--stock-lime);
  font-size: 11px;
}

.stock-ipo-form > p {
  margin: -4px 0 0;
  color: var(--stock-muted);
  font-size: 10px;
}

.stock-ipo-terms {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  color: var(--stock-muted);
  font-size: 10px;
  line-height: 1.45;
}

.stock-ipo-terms input {
  accent-color: var(--stock-mint);
}

.stock-ipo-allocate {
  width: 100%;
  min-height: 46px;
  border-radius: 15px;
  background: linear-gradient(135deg, var(--stock-lime), var(--stock-mint));
  color: #07110a;
  font-weight: 930;
}

.stock-ipo-loading {
  min-height: 180px;
  place-content: center;
  text-align: center;
}

.stock-balance {
  position: relative;
  display: grid;
  gap: 12px;
  overflow: hidden;
  padding: 20px;
  border-radius: var(--stock-radius-lg);
  background:
    radial-gradient(220px 160px at 100% -10%, rgba(200, 243, 95, 0.18), transparent 68%),
    linear-gradient(135deg, rgba(70, 230, 144, 0.105), rgba(255, 255, 255, 0.02) 46%),
    var(--stock-elevated);
}

.stock-balance::after {
  content: "";
  position: absolute;
  right: -42px;
  top: 46px;
  width: 168px;
  height: 168px;
  border: 1px solid rgba(200, 243, 95, 0.16);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 243, 95, 0.08) 0 34%, transparent 36%);
}

.stock-balance > * {
  position: relative;
  z-index: 1;
}

.stock-balance > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.stock-balance > div:first-child button {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 0 13px;
  border: 1px solid rgba(200, 243, 95, 0.25);
  border-radius: 999px;
  background: rgba(200, 243, 95, 0.1);
  color: var(--stock-lime);
  font-size: 12px;
  font-weight: 900;
}

.stock-balance h2,
.stock-balance p {
  margin: 0;
}

.stock-balance h2 {
  overflow: hidden;
  color: var(--stock-ink);
  font-size: clamp(36px, 9.2vw, 42px);
  font-weight: 930;
  line-height: 1;
  letter-spacing: -0.045em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-money {
  color: var(--stock-ink);
}

.stock-balance p {
  color: var(--stock-muted);
  font-weight: 760;
}

.stock-balance p b {
  color: var(--stock-mint);
}

.stock-account {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(86px, auto);
  gap: 7px 13px;
  min-height: 84px;
  padding: 13px;
  border-radius: var(--stock-radius-md);
}

.stock-account strong {
  overflow: hidden;
  color: var(--stock-ink);
  font-weight: 850;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-account small {
  overflow: hidden;
  color: var(--stock-muted);
  font-size: 12px;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-account i {
  grid-column: 1 / -1;
}

/* Assets v2: overview first, detailed positions second. */
.stock-page-assets {
  padding-right: 14px;
  padding-left: 14px;
}

.stock-asset-hero {
  position: relative;
  display: grid;
  gap: 14px;
  overflow: hidden;
  padding: 22px;
  border: 1px solid rgba(221, 255, 224, 0.14);
  border-radius: 30px;
  background:
    radial-gradient(240px 190px at 98% 0%, rgba(200, 243, 95, 0.2), transparent 70%),
    radial-gradient(260px 180px at -6% 108%, rgba(70, 230, 144, 0.18), transparent 72%),
    linear-gradient(145deg, rgba(31, 53, 41, 0.96), rgba(13, 24, 18, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 22px 50px rgba(0, 0, 0, 0.24);
}

.stock-asset-hero::after {
  content: "";
  position: absolute;
  right: -48px;
  bottom: -84px;
  width: 210px;
  height: 210px;
  border: 1px solid rgba(200, 243, 95, 0.13);
  border-radius: 50%;
  box-shadow: 0 0 0 34px rgba(70, 230, 144, 0.025);
  pointer-events: none;
}

.stock-asset-hero > * {
  position: relative;
  z-index: 1;
}

.stock-asset-hero-head,
.stock-asset-hero p,
.stock-asset-trend header,
.stock-asset-trend footer,
.stock-asset-section-head,
.stock-asset-group-head,
.stock-asset-group-head > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.stock-asset-hero-head > span {
  color: var(--stock-ink-2);
  font-size: 13px;
  font-weight: 820;
  letter-spacing: 0.02em;
}

.stock-asset-hero-head button {
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid rgba(200, 243, 95, 0.22);
  border-radius: 999px;
  background: rgba(200, 243, 95, 0.1);
  color: var(--stock-ink);
  font-size: 12px;
  font-weight: 900;
}

.stock-asset-hero-head button i {
  margin-left: 4px;
  color: var(--stock-lime);
  font-style: normal;
}

.stock-asset-hero h2 {
  margin: 2px 0 0;
  color: var(--stock-ink);
  font-size: clamp(40px, 10.8vw, 48px);
  font-weight: 890;
  line-height: 0.96;
  letter-spacing: -0.052em;
}

.stock-asset-hero p {
  justify-content: flex-start;
  margin: -2px 0 0;
  color: var(--stock-muted);
  font-size: 12px;
  font-weight: 720;
}

.stock-asset-hero p b {
  color: var(--stock-mint);
  font-weight: 860;
}

.stock-asset-primary-actions {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 10px;
  margin-top: 4px;
}

.stock-asset-primary-actions button {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 16px;
  font-weight: 900;
}

.stock-asset-primary-actions button:first-child {
  background: linear-gradient(135deg, var(--stock-lime), var(--stock-mint));
  color: #07110a;
  box-shadow: 0 14px 28px rgba(70, 230, 144, 0.14);
}

.stock-asset-primary-actions button:last-child {
  border: 1px solid rgba(230, 255, 234, 0.15);
  background: rgba(255, 255, 255, 0.06);
  color: var(--stock-ink);
}

.stock-asset-primary-actions button span {
  font-size: 18px;
  line-height: 1;
}

.stock-asset-shortcuts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-top: 12px;
}

.stock-asset-shortcuts button {
  display: grid;
  min-height: 92px;
  place-items: center;
  gap: 4px;
  padding: 12px 8px;
  border: 1px solid rgba(221, 255, 224, 0.1);
  border-radius: 21px;
  background: linear-gradient(180deg, rgba(24, 38, 31, 0.9), rgba(11, 17, 14, 0.96));
  color: var(--stock-ink);
}

.stock-asset-shortcuts button > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(70, 230, 144, 0.28);
  border-radius: 13px;
  background: rgba(70, 230, 144, 0.08);
  color: var(--stock-mint);
  font-size: 18px;
  font-weight: 700;
}

.stock-asset-shortcuts b {
  font-size: 12px;
  font-weight: 850;
}

.stock-asset-shortcuts small {
  color: var(--stock-dim);
  font-size: 9px;
  white-space: nowrap;
}

.stock-asset-action-feedback {
  display: grid;
  gap: 3px;
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(200, 243, 95, 0.18);
  border-radius: 15px;
  background: rgba(200, 243, 95, 0.055);
}

.stock-asset-action-feedback[hidden] {
  display: none;
}

.stock-asset-action-feedback b {
  color: var(--stock-lime);
  font-size: 11px;
}

.stock-asset-action-feedback span {
  color: var(--stock-muted);
  font-size: 10px;
  line-height: 1.5;
}

.stock-asset-trend {
  margin-top: 12px;
  padding: 17px 16px 12px;
  border: 1px solid rgba(221, 255, 224, 0.1);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(17, 26, 21, 0.94), rgba(7, 12, 9, 0.98));
}

.stock-asset-trend header > div {
  display: grid;
  gap: 2px;
}

.stock-asset-trend header span,
.stock-asset-section-head span {
  color: var(--stock-dim);
  font-size: 9px;
  font-weight: 820;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.stock-asset-trend header b {
  font-size: 14px;
  font-weight: 880;
}

.stock-asset-trend header > strong {
  color: var(--stock-mint);
  font-size: 12px;
  font-weight: 850;
  text-align: right;
}

.stock-asset-trend canvas {
  display: block;
  width: 100%;
  height: 128px;
  margin-top: 7px;
}

.stock-asset-trend footer {
  color: var(--stock-dim);
  font-size: 9px;
  font-weight: 720;
}

.stock-asset-section-head {
  align-items: end;
  margin: 22px 2px 10px;
}

.stock-asset-section-head > div {
  display: grid;
  gap: 2px;
}

.stock-asset-section-head h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.025em;
}

.stock-asset-section-head > small {
  color: var(--stock-muted);
  font-size: 10px;
  font-weight: 760;
}

.stock-asset-position-groups {
  display: grid;
  gap: 11px;
}

.stock-asset-position-group {
  overflow: hidden;
  border: 1px solid rgba(221, 255, 224, 0.11);
  border-radius: 24px;
  background: linear-gradient(155deg, rgba(20, 32, 26, 0.94), rgba(9, 15, 12, 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.stock-asset-group-head {
  min-height: 54px;
  padding: 0 15px;
  border-bottom: 1px solid rgba(221, 255, 224, 0.08);
}

.stock-asset-group-head > div {
  justify-content: flex-start;
  min-width: 0;
}

.stock-asset-group-head i {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--asset-dot, var(--stock-mint));
  box-shadow: 0 0 14px color-mix(in srgb, var(--asset-dot, var(--stock-mint)) 48%, transparent);
}

.stock-asset-group-head b {
  overflow: hidden;
  font-size: 13px;
  font-weight: 860;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-asset-group-head strong {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 870;
}

.stock-asset-position-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) minmax(78px, auto);
  gap: 11px;
  align-items: center;
  min-height: 78px;
  padding: 13px 15px;
}

.stock-asset-position-row + .stock-asset-position-row {
  border-top: 1px solid rgba(221, 255, 224, 0.075);
}

.stock-asset-avatar {
  position: relative;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  overflow: hidden;
  border-radius: 14px;
  color: #06110a;
  font-size: 12px;
  font-weight: 920;
}

.stock-asset-avatar.has-market-icon img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: #0a1109;
  object-fit: cover;
  object-position: center;
  transform: scale(var(--stock-logo-zoom, 1.08));
}

.stock-asset-avatar.mint {
  background: linear-gradient(135deg, var(--stock-lime), var(--stock-mint));
}

.stock-asset-avatar.blue {
  background: linear-gradient(135deg, #7cc8ff, #6678ff);
}

.stock-asset-avatar.violet {
  background: linear-gradient(135deg, #cf8cff, #8357f2);
}

.stock-asset-avatar.gold {
  background: linear-gradient(135deg, #ffe38b, #e8aa3f);
}

.stock-asset-position-copy,
.stock-asset-position-value {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.stock-asset-position-copy b {
  overflow-wrap: anywhere;
  color: var(--stock-ink);
  font-size: 12px;
  font-weight: 850;
}

.stock-asset-position-copy small,
.stock-asset-position-value small {
  color: var(--stock-muted);
  font-size: 9.5px;
  font-weight: 680;
  line-height: 1.35;
}

.stock-asset-position-copy b i {
  display: inline-flex;
  margin-left: 4px;
  padding: 3px 6px;
  border: 1px solid rgba(70, 230, 144, 0.26);
  border-radius: 7px;
  background: rgba(70, 230, 144, 0.08);
  color: var(--stock-mint);
  font-size: 8px;
  font-style: normal;
  text-transform: capitalize;
  vertical-align: 1px;
}

.stock-asset-position-copy b i.short {
  border-color: rgba(255, 95, 115, 0.3);
  background: rgba(255, 95, 115, 0.09);
  color: var(--stock-red);
}

.stock-asset-position-value {
  justify-items: end;
  text-align: right;
}

.stock-asset-position-value strong {
  color: var(--stock-ink);
  font-size: 12px;
  font-weight: 870;
  white-space: nowrap;
}

.stock-asset-position-value small.up,
.stock-asset-position-value strong.up {
  color: var(--stock-mint);
}

.stock-asset-position-value small.down,
.stock-asset-position-value strong.down {
  color: var(--stock-red);
}

@media (max-width: 355px) {
  .stock-market-row,
  .stock-ai-market-row {
    grid-template-columns: 40px minmax(0, 1fr) 56px minmax(70px, auto);
    gap: 7px;
    padding-right: 9px;
    padding-left: 9px;
  }

  .stock-market-row .stock-icon,
  .stock-ai-market-icon {
    width: 38px;
    height: 38px;
  }

  .stock-market-spark {
    width: 56px;
    height: 34px;
  }

  .stock-page-markets .stock-chips[data-tabs="markets"] button {
    padding: 0 4px;
    font-size: 10px;
  }

  .stock-asset-hero {
    padding: 19px;
  }

  .stock-asset-hero h2 {
    font-size: 38px;
  }

  .stock-asset-position-row {
    grid-template-columns: 38px minmax(0, 1fr) minmax(68px, auto);
    gap: 8px;
    padding-right: 12px;
    padding-left: 12px;
  }

  .stock-asset-avatar {
    width: 38px;
    height: 38px;
  }
}

.stock-nav {
  position: absolute;
  right: 18px;
  bottom: calc(14px + var(--stock-safe-bottom));
  left: 18px;
  z-index: 40;
  display: flex;
  gap: 4px;
  height: 66px;
  overflow: hidden;
  padding: 6px;
  border: 1px solid rgba(215, 255, 222, 0.14);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.035)),
    rgba(11, 16, 13, 0.82);
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
}

.stock-nav a {
  display: grid;
  flex: 1 1 0;
  min-width: 0;
  place-items: center;
  overflow: hidden;
  border-radius: 999px;
  color: rgba(242, 247, 238, 0.6);
  font-size: 0;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 160ms ease,
    background 160ms ease,
    color 160ms ease;
}

.stock-nav b {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 930;
  line-height: 1;
}

.stock-nav a.on {
  display: flex;
  flex: 1.8 0 0;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  padding: 0 8px;
  background: linear-gradient(135deg, var(--stock-lime), var(--stock-mint));
  color: #07110b;
  font-size: 12px;
  font-weight: 950;
  box-shadow: 0 10px 24px rgba(70, 230, 144, 0.18);
}

.stock-nav a.on b {
  flex: 0 0 auto;
  width: 23px;
  height: 23px;
  border-radius: 9px;
  background: rgba(7, 17, 11, 0.9);
  color: var(--stock-lime);
  font-size: 10px;
}

.stock-nav span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-menu {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: end center;
  padding: 18px;
  background: rgba(0, 0, 0, 0.38);
  opacity: 0;
  pointer-events: none;
  transition: 180ms ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.stock-menu.open {
  opacity: 1;
  pointer-events: auto;
}

.stock-menu-card {
  display: grid;
  width: 100%;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--stock-stroke-2);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.03)),
    rgba(8, 12, 10, 0.96);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
  transform: translateY(20px);
  transition: 180ms ease;
}

.stock-menu.open .stock-menu-card {
  transform: translateY(0);
}

.stock-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.stock-menu-head b {
  font-size: 18px;
}

.stock-menu-head button {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--stock-ink);
  font-weight: 800;
}

.stock-menu-card a {
  min-height: 46px;
  padding: 12px;
  border: 1px solid var(--stock-stroke);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--stock-ink);
  text-decoration: none;
  font-weight: 800;
}

.stock-menu-card a.on {
  border-color: rgba(61, 245, 147, 0.28);
  background: rgba(61, 245, 147, 0.12);
  color: #dfffe9;
}

.stock-menu-card p {
  margin: 4px 2px 0;
  color: var(--stock-muted);
  font-size: 12px;
  line-height: 1.45;
}

.stock-menu-card .stock-menu-legal {
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 10px;
}

.stock-menu-card .stock-menu-legal a {
  display: inline;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--stock-muted);
  font-weight: 650;
  text-decoration: underline;
}

/* Toast reads as part of the product: lime status dot, brand-tinted rim and the
   same pill geometry as the app's other floating surfaces. It floats above the
   bottom nav rather than colliding with it. */
#toast {
  position: fixed;
  left: 50%;
  bottom: 96px;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: min(360px, calc(100vw - 36px));
  padding: 13px 32px;
  border: 1px solid rgba(200, 243, 95, 0.26);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(200, 243, 95, 0.07), rgba(255, 255, 255, 0.02)),
    rgba(10, 16, 12, 0.95);
  color: var(--stock-ink);
  font-family: var(--stock-font-product);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: -0.005em;
  line-height: 1.35;
  overflow-wrap: anywhere;
  text-align: center;
  text-wrap: balance;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 18px 46px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(0, 0, 0, 0.35);
  transform: translate(-50%, 14px) scale(0.97);
  opacity: 0;
  pointer-events: none;
  transition: transform 220ms cubic-bezier(0.22, 0.9, 0.24, 1), opacity 180ms ease;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

#toast::before {
  position: absolute;
  top: 50%;
  left: 15px;
  content: "";
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--stock-lime);
  box-shadow: 0 0 10px rgba(200, 243, 95, 0.75);
  transform: translateY(-50%);
}

#toast.show {
  transform: translate(-50%, 0) scale(1);
  opacity: 1;
}

@media (max-width: 480px) {
  .shell {
    padding: 0;
  }

  .phone {
    width: 100vw;
    height: 100dvh;
  }
}

@media (max-width: 390px) {
  .stock-page {
    padding-right: 13px;
    padding-left: 13px;
  }

  .stock-hero {
    grid-template-columns: minmax(0, 1fr) 84px;
    padding: 20px 15px;
  }

  .stock-hero h1 {
    font-size: 28px;
  }

  .stock-hero-actions {
    flex-wrap: wrap;
  }

  .stock-hero-actions button {
    flex: 1 1 118px;
  }

  .stock-order-wrap {
    grid-template-columns: minmax(0, 1fr);
  }

  .stock-grid-3 {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .stock-page *,
  .stock-nav a,
  #toast {
    transition: none !important;
  }
}

/* Home v3: mobile-first tokenized US equities overview. */
.stock-page-home {
  background:
    radial-gradient(300px 250px at 104% 2%, rgba(70, 230, 144, 0.12), transparent 68%),
    linear-gradient(180deg, rgba(7, 14, 10, 0.98), rgba(3, 7, 5, 0.99));
}

.stock-page-home .stock-top {
  justify-content: flex-start;
  margin: 0 4px 17px;
}

.stock-page-home .stock-brand {
  gap: 12px;
  font-size: 21px;
  font-weight: 820;
}

.stock-page-home .stock-brand span {
  border-radius: 13px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.46),
    0 6px 8px rgba(70, 230, 144, 0.14);
}

.stock-page-home .stock-hero {
  position: relative;
  display: block;
  min-height: 326px;
  overflow: hidden;
  padding: 22px;
  border: 1px solid rgba(200, 243, 95, 0.2);
  border-radius: 16px;
  background: #07100b;
  box-shadow: none;
  isolation: isolate;
}

.stock-page-home .stock-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(4, 10, 7, 0.98) 0%, rgba(4, 10, 7, 0.9) 48%, rgba(4, 10, 7, 0.26) 74%, transparent 100%);
  pointer-events: none;
}

.stock-page-home .stock-hero::after {
  content: none;
}

.stock-page-home .stock-hero-motion {
  position: absolute;
  inset: -38px -72px -42px 43%;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  transform: rotate(-7deg);
}

.stock-page-home .stock-hero-motion::before {
  content: "";
  position: absolute;
  inset: 12px 8px 8px 4px;
  border-radius: 48% 52% 46% 54% / 54% 43% 57% 46%;
  background:
    radial-gradient(circle at 42% 24%, rgba(255, 255, 255, 0.92) 0 3%, rgba(216, 255, 115, 0.68) 8%, transparent 22%),
    radial-gradient(circle at 60% 40%, rgba(216, 255, 115, 0.88), rgba(70, 230, 144, 0.72) 32%, rgba(15, 104, 57, 0.42) 58%, transparent 74%);
  filter: blur(1px) saturate(1.2);
  opacity: 0.9;
  transform-origin: 54% 52%;
  animation: stock-home-aura-drift 11s cubic-bezier(0.45, 0, 0.55, 1) 2 alternate forwards;
}

.stock-page-home .stock-hero-motion::after {
  content: "";
  position: absolute;
  inset: 24px 18px 16px 14px;
  border: 2px solid transparent;
  border-top-color: rgba(255, 255, 255, 0.9);
  border-right-color: rgba(216, 255, 115, 0.7);
  border-radius: 48% 52% 46% 54% / 54% 43% 57% 46%;
  filter: blur(0.5px) drop-shadow(0 0 8px rgba(216, 255, 115, 0.44));
  opacity: 0.84;
  animation: stock-home-caustic-turn 14s linear 1 forwards;
}

.stock-page-home .stock-hero-motion i {
  position: absolute;
  display: block;
  border-radius: 50%;
  pointer-events: none;
}

.stock-page-home .stock-hero-motion i:nth-child(1) {
  right: 8%;
  bottom: 13%;
  width: 118px;
  height: 118px;
  background: radial-gradient(circle, rgba(70, 230, 144, 0.5), transparent 68%);
  filter: blur(9px);
  animation: stock-home-glow-breathe 8s ease-in-out 2 alternate forwards;
}

.stock-page-home .stock-hero-motion i:nth-child(2) {
  top: 22%;
  left: 20%;
  width: 9px;
  height: 9px;
  background: #ffffff;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.9), 0 0 28px rgba(216, 255, 115, 0.72);
  animation: stock-home-glint 5.5s ease-in-out 1 forwards;
}

.stock-page-home .stock-hero-motion i:nth-child(3) {
  right: 26%;
  top: 13%;
  width: 36px;
  height: 12px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.72), transparent);
  filter: blur(2px);
  transform: rotate(18deg);
  animation: stock-home-glint 7s 1.2s ease-in-out 1 forwards;
}

.stock-page-home .stock-hero-copy {
  position: relative;
  z-index: 2;
  width: min(278px, 78%);
}

.stock-page-home .stock-hero-copy .stock-hero-kicker {
  display: inline-flex;
  min-height: 0;
  align-items: center;
  gap: 9px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(242, 247, 238, 0.72);
  font-size: 10.5px;
  font-weight: 760;
  letter-spacing: 0.105em;
  line-height: 1.2;
  text-transform: uppercase;
}

.stock-page-home .stock-hero-copy .stock-hero-kicker::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--stock-lime);
  box-shadow: 0 0 10px rgba(200, 243, 95, 0.68);
}

.stock-page-home .stock-hero h1 {
  max-width: none;
  margin: 17px 0 14px;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.stock-page-home .stock-hero h1 em,
.stock-page-home .stock-hero h1 strong {
  display: block;
  color: #f7fff3;
  font-size: 40px;
  font-style: normal;
  font-weight: 690;
  line-height: 0.96;
}

.stock-page-home .stock-hero h1 strong {
  margin-top: 5px;
  color: var(--stock-lime);
  font-size: 44px;
  font-weight: 840;
}

.stock-page-home .stock-hero p {
  max-width: 254px;
  color: rgba(214, 224, 210, 0.75);
  font-size: 13px;
  font-weight: 560;
  line-height: 1.5;
  text-wrap: pretty;
}

.stock-page-home .stock-hero-actions {
  gap: 9px;
  margin-top: 18px;
  flex-wrap: nowrap;
}

.stock-page-home .stock-hero-actions button {
  min-height: 45px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 820;
}

.stock-page-home .stock-hero-actions button:first-child {
  border: 1px solid rgba(235, 255, 204, 0.42);
  background: linear-gradient(130deg, #c8f35f, #46e690);
  box-shadow: 0 6px 8px rgba(70, 230, 144, 0.16);
}

.stock-page-home .stock-hero-actions button:last-child {
  border-color: rgba(242, 247, 238, 0.18);
  background: rgba(242, 247, 238, 0.075);
  color: #f2f7ee;
}

.stock-page-home .stock-ticker {
  margin: 12px 0 21px;
  padding: 10px 7px;
  border-color: rgba(215, 255, 222, 0.11);
  border-radius: 12px;
  background: rgba(8, 14, 10, 0.82);
  box-shadow: none;
}

.stock-page-home .stock-ticker span {
  padding: 0 8px;
}

.stock-quick-head {
  margin: 0 2px 11px;
}

.stock-quick-head h2 {
  margin: 0;
  color: var(--stock-ink);
  font-size: 19px;
  font-weight: 820;
  letter-spacing: -0.025em;
}

.stock-page-home .stock-quick-grid {
  gap: 10px;
}

.stock-page-home .stock-quick-grid .stock-tile {
  position: relative;
  display: block;
  min-height: 116px;
  overflow: hidden;
  padding: 16px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(20, 31, 24, 0.94), rgba(7, 13, 9, 0.98));
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.stock-page-home .stock-quick-grid .stock-tile::after {
  content: "↗";
  position: absolute;
  top: 12px;
  right: 13px;
  bottom: auto;
  width: auto;
  height: auto;
  border: 0;
  color: rgba(242, 247, 238, 0.42);
  font-size: 13px;
  font-weight: 700;
  transform: none;
}

.stock-page-home .stock-quick-grid .stock-tile:hover {
  background-color: transparent;
  transform: translateY(-1px);
}

.stock-page-home .stock-tile-trade {
  background:
    radial-gradient(104px 84px at 100% 100%, rgba(70, 230, 144, 0.2), transparent 68%),
    linear-gradient(145deg, rgba(19, 32, 24, 0.96), rgba(6, 12, 8, 0.99)) !important;
}

.stock-page-home .stock-tile-portfolio {
  background:
    radial-gradient(112px 88px at 100% 100%, rgba(232, 184, 76, 0.15), transparent 70%),
    linear-gradient(145deg, rgba(20, 30, 22, 0.96), rgba(7, 12, 8, 0.99)) !important;
}

.stock-page-home .stock-tile-strategies {
  background:
    radial-gradient(112px 88px at 100% 100%, rgba(200, 243, 95, 0.18), transparent 70%),
    linear-gradient(145deg, rgba(18, 30, 22, 0.96), rgba(6, 12, 8, 0.99)) !important;
}

.stock-page-home .stock-tile-deposit {
  background:
    radial-gradient(112px 88px at 100% 100%, rgba(70, 230, 144, 0.24), transparent 70%),
    linear-gradient(145deg, rgba(17, 31, 23, 0.96), rgba(5, 12, 8, 0.99)) !important;
}

.stock-page-home .stock-tile-copy {
  position: relative;
  z-index: 2;
  display: block;
  width: 76%;
  margin: 0;
  color: inherit;
}

.stock-page-home .stock-tile-copy b {
  font-size: 15px;
  font-weight: 830;
}

.stock-page-home .stock-tile-copy small {
  display: block;
  margin-top: 7px;
  overflow: hidden;
  color: rgba(214, 224, 210, 0.68);
  font-size: 10.5px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-page-home .stock-tile-art {
  position: absolute;
  right: 12px;
  bottom: 8px;
  z-index: 1;
  display: block;
  width: 60px;
  height: 58px;
  margin: 0;
  overflow: visible;
}

.stock-page-home .stock-tile-art i {
  position: absolute;
  display: block;
}

.stock-page-home .stock-tile-trade .stock-tile-art i {
  bottom: 9px;
  width: 7px;
  border-radius: 999px;
  background: linear-gradient(180deg, #f8fff4, #46e690);
  box-shadow: 0 0 9px rgba(70, 230, 144, 0.48);
}

.stock-page-home .stock-tile-trade .stock-tile-art i:nth-child(1) { right: 35px; height: 21px; }
.stock-page-home .stock-tile-trade .stock-tile-art i:nth-child(2) { right: 23px; height: 39px; }
.stock-page-home .stock-tile-trade .stock-tile-art i:nth-child(3) { right: 11px; height: 29px; background: linear-gradient(180deg, #ffffff, #ff5f73); }

.stock-page-home .stock-tile-portfolio .stock-tile-art i {
  right: 7px;
  bottom: 6px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: conic-gradient(var(--stock-lime) 0 34%, var(--stock-mint) 34% 68%, var(--stock-gold) 68% 100%);
  box-shadow: 0 0 11px rgba(200, 243, 95, 0.2);
}

.stock-page-home .stock-tile-portfolio .stock-tile-art i::after {
  content: "";
  position: absolute;
  inset: 11px;
  border-radius: 50%;
  background: #0a120d;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.stock-page-home .stock-tile-strategies .stock-tile-art i {
  width: 27px;
  height: 27px;
  border-radius: 7px;
  background: linear-gradient(145deg, rgba(247, 255, 243, 0.94), rgba(70, 230, 144, 0.8));
  box-shadow: 0 0 10px rgba(70, 230, 144, 0.2);
  transform: rotate(18deg);
}

.stock-page-home .stock-tile-strategies .stock-tile-art i:nth-child(1) { right: 28px; bottom: 8px; opacity: 0.36; }
.stock-page-home .stock-tile-strategies .stock-tile-art i:nth-child(2) { right: 17px; bottom: 15px; opacity: 0.66; }
.stock-page-home .stock-tile-strategies .stock-tile-art i:nth-child(3) { right: 6px; bottom: 22px; }

.stock-page-home .stock-tile-deposit .stock-tile-art i {
  right: 6px;
  bottom: 20px;
  width: 48px;
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(180deg, #f7fff3, #46e690);
  box-shadow: 0 0 11px rgba(70, 230, 144, 0.32);
  transform: rotate(-9deg);
}

.stock-page-home .stock-tile-deposit .stock-tile-art i::before {
  content: "";
  position: absolute;
  top: -17px;
  left: 17px;
  width: 14px;
  height: 48px;
  border-radius: 4px;
  background: inherit;
}

.stock-page-home .stock-home-market-head {
  margin-top: 23px;
}

.stock-page-home .stock-home-market-head h2 {
  font-size: 20px;
  font-weight: 830;
}

.stock-page-home .stock-home-market-head button {
  min-height: 30px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.stock-page-home .stock-home-market-list {
  gap: 0;
  overflow: hidden;
  border-radius: 14px;
  background: rgba(9, 16, 11, 0.78);
}

.stock-home-market-row {
  display: flex;
  min-height: 68px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 13px;
  border-bottom: 1px solid rgba(215, 255, 222, 0.07);
  color: var(--stock-ink);
  text-decoration: none;
  transition: background 170ms ease, transform 170ms ease;
}

.stock-home-market-row:last-child {
  border-bottom: 0;
}

.stock-home-market-row:hover {
  background: rgba(200, 243, 95, 0.05);
}

.stock-home-market-row:active {
  transform: scale(0.992);
}

.stock-home-market-row:focus-visible {
  outline: 2px solid rgba(200, 243, 95, 0.82);
  outline-offset: -2px;
}

.stock-home-market-main {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 11px;
}

.stock-page-home .stock-home-market-row .stock-icon {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 11px;
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.32), transparent 42%),
    linear-gradient(145deg, rgba(216, 255, 115, 0.92), rgba(70, 230, 144, 0.72) 54%, rgba(7, 18, 11, 0.94)) !important;
  color: #07100b;
  font-size: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.stock-page-home .stock-home-market-row .stock-name b {
  font-size: 14px;
  font-weight: 810;
}

.stock-page-home .stock-home-market-row .stock-name small {
  margin-top: 3px;
  color: rgba(214, 224, 210, 0.68);
  font-size: 10.5px;
}

.stock-page-home .stock-home-market-row .stock-value b {
  font-size: 14.5px;
  font-weight: 770;
}

.stock-page-home .stock-home-market-row .stock-value small {
  margin-top: 3px;
  font-size: 11px;
}

.stock-page-home .stock-home-market-row .stock-value small em {
  font-style: normal;
  font-weight: 780;
}

@keyframes stock-home-aura-drift {
  0% { transform: translate3d(-4px, 3px, 0) rotate(-4deg) scale(0.98); }
  52% { transform: translate3d(7px, -5px, 0) rotate(3deg) scale(1.03); }
  100% { transform: translate3d(-1px, 7px, 0) rotate(7deg) scale(1.01); }
}

@keyframes stock-home-caustic-turn {
  from { transform: rotate(0deg) scale(0.98); }
  to { transform: rotate(360deg) scale(1.03); }
}

@keyframes stock-home-glow-breathe {
  from { opacity: 0.48; transform: scale(0.9); }
  to { opacity: 0.86; transform: scale(1.12); }
}

@keyframes stock-home-glint {
  0%, 100% { opacity: 0.25; transform: translate3d(-5px, 4px, 0) scale(0.75); }
  48% { opacity: 1; transform: translate3d(7px, -6px, 0) scale(1.08); }
}

@media (max-width: 390px) {
  .stock-page-home .stock-hero {
    min-height: 318px;
    padding: 19px 17px;
  }

  .stock-page-home .stock-hero-copy {
    width: 82%;
  }

  .stock-page-home .stock-hero h1 em,
  .stock-page-home .stock-hero h1 strong {
    font-size: 37px;
  }

  .stock-page-home .stock-hero h1 strong {
    font-size: 41px;
  }

  .stock-page-home .stock-hero-actions {
    flex-wrap: nowrap;
  }

  .stock-page-home .stock-hero-actions button {
    flex: 1 1 0;
    padding: 0 10px;
  }

  .stock-page-home .stock-quick-grid .stock-tile {
    min-height: 110px;
    padding: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stock-page-home .stock-hero-motion::before,
  .stock-page-home .stock-hero-motion::after,
  .stock-page-home .stock-hero-motion i {
    animation: none !important;
  }
}

/* Home v4: preserve the original market language and use compact static glass actions. */
.stock-page-home .stock-quick-grid .stock-tile {
  min-height: 94px;
  padding: 13px 14px;
  border: 1px solid rgba(232, 255, 226, 0.2);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(249, 255, 246, 0.52),
    inset 0 -1px 0 rgba(146, 230, 155, 0.16),
    0 5px 8px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(18px) saturate(118%);
  -webkit-backdrop-filter: blur(18px) saturate(118%);
}

.stock-page-home .stock-quick-grid .stock-tile::after {
  content: none;
}

.stock-page-home .stock-quick-grid .stock-tile:hover {
  border-color: rgba(232, 255, 226, 0.34);
  background-color: rgba(18, 42, 27, 0.88);
  transform: none;
}

.stock-page-home .stock-quick-grid .stock-tile:active {
  background-color: rgba(21, 50, 31, 0.92);
  transform: scale(0.988);
}

.stock-page-home .stock-tile-trade {
  background:
    radial-gradient(92px 68px at 100% 100%, rgba(70, 230, 144, 0.18), transparent 70%),
    linear-gradient(180deg, rgba(235, 255, 229, 0.13), rgba(151, 221, 147, 0.05) 48%, rgba(27, 76, 48, 0.14)),
    rgba(10, 23, 15, 0.86) !important;
}

.stock-page-home .stock-tile-portfolio {
  background:
    radial-gradient(92px 68px at 100% 100%, rgba(232, 184, 76, 0.13), transparent 70%),
    linear-gradient(180deg, rgba(235, 255, 229, 0.13), rgba(151, 221, 147, 0.05) 48%, rgba(71, 67, 28, 0.12)),
    rgba(10, 23, 15, 0.86) !important;
}

.stock-page-home .stock-tile-strategies {
  background:
    radial-gradient(92px 68px at 100% 100%, rgba(200, 243, 95, 0.16), transparent 70%),
    linear-gradient(180deg, rgba(235, 255, 229, 0.13), rgba(151, 221, 147, 0.05) 48%, rgba(62, 81, 28, 0.13)),
    rgba(10, 23, 15, 0.86) !important;
}

.stock-page-home .stock-tile-deposit {
  background:
    radial-gradient(92px 68px at 100% 100%, rgba(70, 230, 144, 0.2), transparent 70%),
    linear-gradient(180deg, rgba(235, 255, 229, 0.13), rgba(151, 221, 147, 0.05) 48%, rgba(24, 91, 57, 0.14)),
    rgba(10, 23, 15, 0.86) !important;
}

.stock-page-home .stock-tile-copy b {
  font-size: 14.5px;
}

.stock-page-home .stock-tile-copy small {
  margin-top: 5px;
}

.stock-page-home .stock-tile-art {
  right: 10px;
  bottom: 4px;
  width: 52px;
  height: 50px;
}

.stock-page-home .stock-tile-trade .stock-tile-art i:nth-child(2) {
  right: 22px;
  height: 34px;
}

.stock-page-home .stock-tile-trade .stock-tile-art i:nth-child(3) {
  right: 10px;
  height: 26px;
}

.stock-page-home .stock-tile-portfolio .stock-tile-art i {
  right: 5px;
  bottom: 5px;
  width: 41px;
  height: 41px;
}

.stock-page-home .stock-tile-portfolio .stock-tile-art i::after {
  inset: 10px;
}

.stock-page-home .stock-home-market-head {
  margin-top: 23px;
}

.stock-page-home .stock-home-market-head h2 {
  font-size: 23px;
  font-weight: 860;
}

.stock-page-home .stock-home-market-head button {
  min-width: 48px;
  min-height: 48px;
  padding: 0 12px;
  border: 1px solid rgba(218, 255, 224, 0.14);
  border-radius: 14px;
  background: rgba(9, 17, 12, 0.82);
  color: rgba(222, 232, 218, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.stock-page-home .stock-home-market-list {
  gap: 9px;
  overflow: visible;
  border-radius: 0;
  background: transparent;
}

.stock-page-home .stock-home-market-card:active {
  transform: scale(0.992);
}

.stock-page-home .stock-home-market-card:focus-visible {
  outline: 2px solid rgba(200, 243, 95, 0.82);
  outline-offset: 2px;
}

.stock-page-home .stock-home-market-card .stock-name small,
.stock-page-home .stock-home-market-card .stock-value small {
  color: rgba(214, 224, 210, 0.62);
}

.stock-page-home .stock-home-market-card .stock-value small {
  margin-top: 5px;
}

.stock-page-home .stock-home-market-card .stock-value small em {
  font-style: normal;
  font-weight: 820;
}

@media (max-width: 390px) {
  .stock-page-home .stock-quick-grid .stock-tile {
    min-height: 94px;
    padding: 13px;
  }
}

/* Shared 16px pixel field. Keep the page identity while restoring one visual substrate everywhere. */
.phone:has(> .stock-page)::after {
  opacity: 0;
}

.stock-page {
  background:
    linear-gradient(135deg, rgba(225, 255, 226, 0.018) 25%, transparent 25%) 0 0 / 16px 16px,
    linear-gradient(315deg, rgba(190, 247, 92, 0.012) 25%, transparent 25%) 8px 8px / 16px 16px;
}

.stock-page-home {
  background:
    linear-gradient(135deg, rgba(225, 255, 226, 0.018) 25%, transparent 25%) 0 0 / 16px 16px,
    linear-gradient(315deg, rgba(190, 247, 92, 0.012) 25%, transparent 25%) 8px 8px / 16px 16px,
    radial-gradient(300px 250px at 104% 2%, rgba(70, 230, 144, 0.12), transparent 68%),
    linear-gradient(180deg, rgba(7, 14, 10, 0.98), rgba(3, 7, 5, 0.99));
}

.stock-page-trade {
  background:
    linear-gradient(135deg, rgba(225, 255, 226, 0.018) 25%, transparent 25%) 0 0 / 16px 16px,
    linear-gradient(315deg, rgba(190, 247, 92, 0.012) 25%, transparent 25%) 8px 8px / 16px 16px,
    linear-gradient(180deg, rgba(5, 7, 5, 0.985), rgba(3, 5, 4, 0.99));
}

/* Invest v5: keep the comparison chart focused and move the best strategy into its own action card. */
.stock-invest-hero {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.stock-invest-hero::after {
  content: none;
}

.stock-best-strategy {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-width: 0;
  margin-top: 12px;
  padding: 16px;
  overflow: hidden;
  border: 1px solid var(--stock-stroke);
  border-radius: var(--stock-radius-lg);
  background:
    radial-gradient(150px 100px at 100% 0%, rgba(70, 230, 144, 0.1), transparent 72%),
    linear-gradient(150deg, rgba(220, 255, 208, 0.065), rgba(8, 19, 12, 0.22)),
    var(--stock-surface);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.065),
    0 8px 18px rgba(0, 0, 0, 0.14);
}

.stock-best-strategy-copy {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.stock-best-strategy-copy > span {
  color: var(--stock-lime);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.stock-best-strategy-heading {
  display: flex;
  min-width: 0;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.stock-best-strategy-heading h2 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--stock-ink);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-best-strategy-heading strong {
  flex: none;
  color: var(--stock-mint);
  font-size: 24px;
  font-weight: 930;
  letter-spacing: -0.035em;
  line-height: 1;
}

.stock-best-strategy-heading strong.down {
  color: var(--stock-red);
}

.stock-best-strategy-copy p {
  margin: 0;
  color: var(--stock-muted);
  font-size: 10.5px;
  line-height: 1.4;
}

.stock-best-strategy-copy small {
  overflow: hidden;
  color: var(--stock-dim);
  font-size: 9px;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-best-strategy > button {
  min-width: 96px;
  min-height: 42px;
  padding: 0 15px;
  border: 1px solid rgba(225, 255, 211, 0.44);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--stock-lime), var(--stock-mint));
  color: #07110b;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.58),
    0 7px 8px rgba(70, 230, 144, 0.14);
}

.stock-ai-coordinate-chart {
  display: grid;
  min-width: 0;
  gap: 7px;
}

.stock-ai-coordinate-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  padding-left: 38px;
}

.stock-ai-coordinate-head b {
  color: var(--stock-ink-2);
  font-size: 10px;
  font-weight: 850;
}

.stock-ai-coordinate-head small {
  color: var(--stock-dim);
  font-size: 8px;
  font-weight: 720;
}

.stock-ai-coordinate-body {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 6px;
  min-width: 0;
}

.stock-ai-coordinate-y,
.stock-ai-coordinate-plot {
  position: relative;
  height: 150px;
}

.stock-ai-coordinate-y output {
  position: absolute;
  top: calc(var(--tick-ratio) * 100%);
  right: 0;
  color: rgba(214, 224, 210, 0.52);
  font-size: 7px;
  font-weight: 700;
  line-height: 1;
  transform: translateY(-50%);
  white-space: nowrap;
}

.stock-ai-coordinate-plot {
  margin-bottom: 15px;
  border-bottom: 1px solid rgba(220, 235, 218, 0.28);
  border-left: 1px solid rgba(220, 235, 218, 0.28);
}

.stock-ai-coordinate-plot::before,
.stock-ai-coordinate-plot::after {
  content: "";
  position: absolute;
  z-index: 3;
  pointer-events: none;
}

.stock-ai-coordinate-plot::before {
  top: -3px;
  left: -3px;
  border-right: 2.5px solid transparent;
  border-bottom: 5px solid rgba(220, 235, 218, 0.5);
  border-left: 2.5px solid transparent;
}

.stock-ai-coordinate-plot::after {
  right: -3px;
  bottom: -3px;
  border-top: 2.5px solid transparent;
  border-bottom: 2.5px solid transparent;
  border-left: 5px solid rgba(220, 235, 218, 0.5);
}

.stock-ai-coordinate-grid,
.stock-ai-coordinate-columns {
  position: absolute;
  inset: 0;
}

.stock-ai-coordinate-grid i {
  position: absolute;
  top: calc(var(--tick-ratio) * 100%);
  right: 0;
  left: 0;
  height: 1px;
  background: rgba(219, 239, 218, 0.075);
  transform: translateY(-0.5px);
}

.stock-ai-coordinate-zero {
  position: absolute;
  top: calc(var(--zero-ratio) * 100%);
  right: 0;
  left: 0;
  z-index: 1;
  height: 1px;
  background: rgba(223, 242, 217, 0.32);
  transform: translateY(-0.5px);
}

.stock-ai-coordinate-columns {
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  padding: 0 5px;
}

.stock-ai-coordinate-column {
  position: relative;
  min-width: 0;
}

.stock-ai-coordinate-column > i {
  position: absolute;
  top: calc(var(--bar-top) * 100%);
  left: 50%;
  width: min(13px, 54%);
  height: max(2px, calc(var(--bar-height) * 100%));
  border-radius: 3px 3px 1px 1px;
  background: linear-gradient(180deg, var(--stock-lime), var(--stock-mint));
  box-shadow: 0 0 7px rgba(70, 230, 144, 0.22);
  transform: translateX(-50%);
}

.stock-ai-coordinate-column.down > i {
  border-radius: 1px 1px 3px 3px;
  background: linear-gradient(180deg, #ff9b6f, var(--stock-red));
  box-shadow: 0 0 7px rgba(255, 95, 115, 0.18);
}

.stock-ai-coordinate-column > output {
  position: absolute;
  top: max(1px, calc(var(--bar-end) * 100% - 12px));
  left: 50%;
  color: var(--stock-mint);
  font-size: 6.5px;
  font-weight: 820;
  line-height: 1;
  transform: translateX(-50%);
  white-space: nowrap;
}

.stock-ai-coordinate-column.down > output {
  top: min(calc(100% - 8px), calc(var(--bar-end) * 100% + 4px));
  color: var(--stock-red);
}

.stock-ai-coordinate-column > b {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  overflow: hidden;
  color: rgba(220, 231, 217, 0.64);
  font-size: 7px;
  font-weight: 780;
  letter-spacing: 0.03em;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Only these two binary mode selectors inherit the market category glass language. */
.stock-page-trade .stock-trade-mode-tabs,
.stock-page-invest .stock-chips[data-tabs="invest"] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  overflow: visible;
  padding-bottom: 0;
  scroll-snap-type: none;
}

.stock-page-trade .stock-trade-mode-tabs button,
.stock-page-invest .stock-chips[data-tabs="invest"] button {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 0 10px;
  border: 1px solid rgba(220, 255, 208, 0.16);
  background:
    linear-gradient(145deg, rgba(226, 255, 218, 0.105), rgba(67, 193, 122, 0.075) 48%, rgba(4, 12, 7, 0.64)),
    rgba(11, 23, 15, 0.72);
  color: rgba(220, 233, 222, 0.7);
  line-height: 1.08;
  white-space: normal;
  box-shadow:
    inset 0 1px 0 rgba(249, 255, 246, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.42),
    0 8px 20px rgba(0, 0, 0, 0.13);
  backdrop-filter: blur(14px) saturate(126%);
  -webkit-backdrop-filter: blur(14px) saturate(126%);
}

.stock-page-trade .stock-trade-mode-tabs button.on,
.stock-page-invest .stock-chips[data-tabs="invest"] button.on {
  border-color: rgba(225, 255, 211, 0.48);
  background:
    linear-gradient(150deg, rgba(230, 255, 213, 0.9), rgba(156, 239, 128, 0.82) 45%, rgba(71, 219, 139, 0.78)),
    rgba(85, 230, 143, 0.66);
  color: #07110b;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    inset 0 -12px 22px rgba(10, 81, 40, 0.12),
    0 11px 24px rgba(70, 230, 144, 0.12);
}

@media (max-width: 370px) {
  .stock-invest-hero {
    padding: 15px;
  }

  .stock-best-strategy {
    grid-template-columns: minmax(0, 1fr);
  }

  .stock-best-strategy > button {
    width: 100%;
  }

  .stock-ai-coordinate-y,
  .stock-ai-coordinate-plot {
    height: 138px;
  }
}

/* Invest + Assets v6: measured spacing, privacy-safe values and restrained green glass. */
.stock-page-invest .stock-invest-hero {
  gap: 0;
  padding: 40px 16px 28px;
}

.stock-page-invest .stock-ai-coordinate-chart {
  gap: 8px;
}

.stock-page-invest .stock-ai-coordinate-head {
  padding-left: 40px;
}

.stock-page-invest .stock-ai-coordinate-body {
  gap: 8px;
}

.stock-page-invest .stock-ai-coordinate-plot {
  margin-bottom: 16px;
}

.stock-page-invest .stock-ai-coordinate-columns {
  padding: 0 4px;
}

.stock-page-invest .stock-ai-coordinate-y output,
.stock-page-invest .stock-ai-coordinate-column > b,
.stock-page-invest .stock-ai-coordinate-column > output {
  font-size: 8px;
}

.stock-page-invest .stock-best-strategy {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  min-height: 176px;
  margin-top: 16px;
  padding: 24px;
}

.stock-page-invest .stock-best-strategy-copy {
  gap: 8px;
}

.stock-page-invest .stock-best-strategy-copy > span {
  font-size: 14px;
  letter-spacing: 0.06em;
}

.stock-page-invest .stock-best-strategy-heading h2 {
  font-size: 24px;
}

.stock-page-invest .stock-best-strategy-heading strong {
  font-size: 32px;
}

.stock-page-invest .stock-best-strategy-copy p {
  font-size: 12px;
  line-height: 1.45;
}

.stock-page-invest .stock-best-strategy-copy small {
  font-size: 10px;
}

.stock-page-invest .stock-best-strategy > button {
  width: min(184px, 100%);
  min-width: 160px;
  min-height: 48px;
  padding: 0 20px;
  font-size: 13px;
  transition: transform 160ms cubic-bezier(0.16, 1, 0.3, 1), border-color 160ms ease;
}

.stock-page-invest .stock-best-strategy > button:active {
  transform: scale(0.98);
}

.stock-page-invest .stock-chips[data-tabs="invest"] {
  margin: 24px 0 16px;
}

.stock-page-assets {
  padding-right: 16px;
  padding-left: 16px;
}

.stock-page-assets .stock-asset-hero {
  gap: 16px;
  padding: 24px;
  border-radius: 24px;
}

.stock-page-assets .stock-asset-hero-head {
  align-items: center;
}

.stock-asset-title,
.stock-asset-head-controls,
.stock-asset-action-label {
  display: flex;
  align-items: center;
}

.stock-asset-title {
  min-width: 0;
  gap: 8px;
}

.stock-asset-title > span {
  color: var(--stock-ink-2);
  font-size: 13px;
  font-weight: 820;
  letter-spacing: 0.02em;
}

.stock-asset-title > small {
  color: var(--stock-lime);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.stock-asset-head-controls {
  flex: 0 0 auto;
  gap: 8px;
}

.stock-asset-currency,
.stock-page-assets .stock-asset-privacy {
  display: grid;
  min-height: 44px;
  place-items: center;
  border: 1px solid rgba(222, 255, 218, 0.16);
  background:
    linear-gradient(145deg, rgba(235, 255, 227, 0.11), rgba(73, 206, 132, 0.06) 52%, rgba(2, 11, 6, 0.38)),
    rgba(10, 24, 15, 0.7);
  color: var(--stock-ink-2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(14px) saturate(126%);
  -webkit-backdrop-filter: blur(14px) saturate(126%);
}

.stock-asset-currency {
  min-width: 64px;
  padding: 0 12px;
  border-radius: 16px;
  font-size: 11px;
  font-weight: 900;
}

.stock-page-assets .stock-asset-privacy {
  position: relative;
  width: 44px;
  min-width: 44px;
  padding: 0;
  border-radius: 16px;
  transition: transform 160ms cubic-bezier(0.16, 1, 0.3, 1), border-color 160ms ease;
}

.stock-page-assets .stock-asset-privacy:active {
  transform: scale(0.96);
}

.stock-page-assets .stock-asset-privacy:focus-visible,
.stock-page-assets .stock-asset-primary-actions button:focus-visible,
.stock-page-assets .stock-asset-shortcuts button:focus-visible,
.stock-page-invest .stock-best-strategy > button:focus-visible {
  outline: 2px solid var(--stock-lime);
  outline-offset: 3px;
}

.stock-asset-privacy-icon {
  width: 21px;
  height: 21px;
  filter: drop-shadow(0 2px 4px rgba(61, 245, 147, 0.18));
}

.stock-page-assets .stock-asset-privacy.is-hidden::after {
  content: "";
  position: absolute;
  width: 24px;
  height: 2px;
  border-radius: 999px;
  background: var(--stock-lime);
  box-shadow: 0 0 8px rgba(200, 243, 95, 0.32);
  transform: rotate(-42deg);
}

.stock-page-assets .stock-asset-hero h2 {
  margin: 0;
}

.stock-page-assets .stock-asset-hero p {
  margin: 0;
}

.stock-page-assets .stock-asset-primary-actions {
  grid-template-columns: minmax(0, 1.618fr) minmax(112px, 1fr);
  gap: 8px;
  margin-top: 8px;
}

.stock-page-assets .stock-asset-primary-actions button {
  min-height: 56px;
  padding: 0 12px;
  overflow: hidden;
  border: 1px solid rgba(235, 255, 226, 0.28);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(239, 255, 230, 0.88), rgba(166, 243, 131, 0.78) 43%, rgba(67, 225, 143, 0.74)),
    rgba(90, 232, 148, 0.66);
  color: #06110a;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    inset 0 -12px 22px rgba(4, 64, 30, 0.12),
    0 10px 22px rgba(41, 181, 103, 0.13);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  transition: transform 160ms cubic-bezier(0.16, 1, 0.3, 1), border-color 160ms ease;
}

.stock-page-assets .stock-asset-primary-actions button:last-child {
  border-color: rgba(230, 255, 234, 0.18);
  background:
    linear-gradient(145deg, rgba(229, 255, 220, 0.11), rgba(56, 174, 109, 0.065) 52%, rgba(3, 12, 7, 0.42)),
    rgba(13, 28, 19, 0.72);
  color: var(--stock-ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.17),
    inset 0 -1px 0 rgba(0, 0, 0, 0.38),
    0 10px 22px rgba(0, 0, 0, 0.13);
}

.stock-page-assets .stock-asset-primary-actions button:active {
  transform: scale(0.98);
}

.stock-asset-action-label {
  justify-content: center;
  gap: 8px;
  width: 100%;
  line-height: 1;
}

.stock-asset-action-label b {
  font-size: 14px;
  font-weight: 900;
}

.stock-asset-action-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.18));
}

.stock-page-assets .stock-asset-trend {
  margin-top: 8px;
  padding: 24px 0 0;
  border: 0;
  border-top: 1px solid rgba(224, 255, 221, 0.12);
  border-radius: 0;
  background: none;
}

.stock-page-assets .stock-asset-trend canvas {
  margin-top: 16px;
}

.stock-page-assets .stock-asset-shortcuts {
  gap: 12px;
  margin-top: 16px;
}

.stock-page-assets .stock-asset-shortcuts button {
  grid-template-rows: 44px auto auto;
  min-height: 120px;
  align-content: start;
  justify-items: center;
  gap: 8px;
  padding: 24px 8px 16px;
  border: 1px solid rgba(222, 255, 218, 0.16);
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(232, 255, 224, 0.105), rgba(63, 190, 119, 0.065) 52%, rgba(3, 12, 7, 0.5)),
    rgba(10, 24, 15, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -1px 0 rgba(0, 0, 0, 0.38),
    0 10px 24px rgba(0, 0, 0, 0.14);
  backdrop-filter: blur(16px) saturate(126%);
  -webkit-backdrop-filter: blur(16px) saturate(126%);
  transition: transform 160ms cubic-bezier(0.16, 1, 0.3, 1), border-color 160ms ease;
}

.stock-page-assets .stock-asset-shortcuts button:active {
  transform: scale(0.97);
}

.stock-page-assets .stock-asset-shortcuts .stock-asset-shortcut-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(83, 241, 157, 0.3);
  border-radius: 16px;
  background:
    radial-gradient(circle at 34% 18%, rgba(239, 255, 232, 0.28), transparent 30%),
    linear-gradient(145deg, rgba(70, 230, 144, 0.2), rgba(5, 42, 22, 0.35));
  color: var(--stock-mint);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 8px 14px rgba(14, 101, 53, 0.18);
}

.stock-asset-shortcut-svg {
  width: 23px;
  height: 23px;
}

.stock-page-assets .stock-asset-shortcuts b {
  font-size: 12px;
}

.stock-page-assets .stock-asset-shortcuts small {
  font-size: 10px;
}

.stock-page-assets [data-private-value] {
  position: relative;
}

.stock-page-assets.is-asset-hidden [data-private-value] {
  color: transparent !important;
  text-shadow: none !important;
}

.stock-page-assets.is-asset-hidden [data-private-value] > * {
  opacity: 0;
}

.stock-page-assets.is-asset-hidden [data-private-value]::after {
  content: "••••••";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: var(--stock-ink-2);
  font-size: 14px;
  font-weight: 850;
  letter-spacing: 0.1em;
}

.stock-page-assets.is-asset-hidden .stock-asset-group-head [data-private-value]::after,
.stock-page-assets.is-asset-hidden .stock-asset-position-value [data-private-value]::after,
.stock-page-assets.is-asset-hidden .stock-asset-trend header [data-private-value]::after,
/* Allocation share + amount are right-aligned when visible, so their masked dots
   must be too — otherwise toggling the eye makes the numbers jump left. */
.stock-page-assets.is-asset-hidden .stock-asset-allocation-list [data-private-value]::after {
  justify-content: flex-end;
}

/* The chip normally hugs its number, so a single digit ("9") produced a pill far
   narrower than the six masking dots and they spilled past the border. Fixing a
   minimum width in the hidden state makes every chip mask identically. */
.stock-page-assets.is-asset-hidden .stock-asset-position-copy .qty {
  min-width: 46px;
  justify-content: center;
}

.stock-page-assets.is-asset-hidden .stock-asset-position-copy .qty::after {
  justify-content: center;
  font-size: 9px;
  letter-spacing: 0.05em;
}

@media (max-width: 340px) {
  .stock-page-invest .stock-best-strategy > button {
    width: 100%;
  }

  .stock-page-assets .stock-asset-hero {
    padding: 20px;
  }

  .stock-page-assets .stock-asset-primary-actions {
    grid-template-columns: minmax(0, 1fr) minmax(104px, 0.86fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .stock-page-invest .stock-best-strategy > button,
  .stock-page-assets .stock-asset-privacy,
  .stock-page-assets .stock-asset-primary-actions button,
  .stock-page-assets .stock-asset-shortcuts button {
    transition: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .stock-asset-currency,
  .stock-page-assets .stock-asset-privacy,
  .stock-page-assets .stock-asset-primary-actions button,
  .stock-page-assets .stock-asset-shortcuts button {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Assets v7: original typography, dark-green metal cards and compact in-card controls. */
.stock-page-assets .stock-page-head p {
  display: block;
  max-width: none;
  overflow: visible;
  font-size: clamp(10px, 2.2vw, 13px);
  line-height: 1.35;
  text-overflow: clip;
  white-space: nowrap;
  -webkit-line-clamp: initial;
}

.stock-page-assets .stock-asset-hero,
.stock-page-assets .stock-asset-trend {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(226, 255, 222, 0.17);
  border-radius: 22px;
  background:
    radial-gradient(circle at 76% 8%, rgba(184, 255, 206, 0.13), transparent 28%),
    linear-gradient(116deg, rgba(255, 255, 255, 0.055), transparent 28% 58%, rgba(59, 173, 105, 0.055)),
    linear-gradient(148deg, rgba(38, 79, 54, 0.97), rgba(13, 34, 22, 0.99) 48%, rgba(6, 19, 12, 1));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
    0 7px 8px rgba(0, 12, 6, 0.24);
}

.stock-page-assets .stock-asset-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.618fr) minmax(118px, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 16px 18px;
  min-height: clamp(320px, 59vw, 420px);
  overflow: clip;
  padding: clamp(22px, 4.4vw, 30px);
}

.stock-asset-card-light {
  position: absolute;
  z-index: -1;
  top: -46%;
  left: 47%;
  width: 24%;
  height: 188%;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, rgba(236, 255, 236, 0.13), transparent);
  filter: blur(18px);
  opacity: 0.72;
  pointer-events: none;
  transform: rotate(18deg);
}

.stock-asset-card-main {
  position: relative;
  z-index: 2;
  display: grid;
  min-width: 0;
  align-content: start;
  gap: clamp(16px, 3.2vw, 24px);
}

.stock-page-assets .stock-asset-title {
  display: flex;
  width: calc(161.8% + 18px);
  min-width: 0;
  align-items: center;
  gap: 5px;
  color: var(--stock-ink-2);
}

.stock-page-assets .stock-asset-title > span {
  color: inherit;
  font-size: clamp(13px, 2.35vw, 16px);
  font-weight: 820;
  letter-spacing: 0;
  white-space: nowrap;
}

.stock-page-assets .stock-asset-privacy {
  display: grid;
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  margin: -10px -5px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--stock-ink-2);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.stock-asset-privacy-icon {
  width: 22px;
  height: 22px;
  filter: none;
}

.stock-page-assets .stock-asset-uid {
  display: inline-flex;
  min-width: max-content;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  overflow: visible;
  color: rgba(229, 241, 230, 0.64);
  font-size: clamp(9px, 1.75vw, 11px);
  font-weight: 760;
  letter-spacing: 0.02em;
  text-overflow: clip;
  text-transform: none;
  white-space: nowrap;
}

.stock-asset-balance-row {
  display: flex;
  position: relative;
  z-index: 3;
  width: calc(161.8% + 18px);
  min-width: calc(161.8% + 18px);
  align-items: baseline;
  gap: 8px;
  justify-self: start;
}

.stock-page-assets .stock-asset-hero h2 {
  flex: 0 0 max-content;
  width: max-content;
  min-width: max-content;
  max-width: none;
  overflow: visible;
  color: var(--stock-ink);
  font-size: clamp(38px, 6.7vw, 48px);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.038em;
  line-height: 0.96;
  text-overflow: clip;
  white-space: nowrap;
}

.stock-page-assets .stock-asset-currency {
  display: inline;
  flex: 0 0 auto;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: rgba(236, 247, 237, 0.78);
  font-size: clamp(15px, 2.5vw, 18px);
  font-weight: 860;
  letter-spacing: -0.01em;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.stock-page-assets .stock-asset-card-main > p {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 7px;
  color: rgba(221, 235, 222, 0.58);
  font-size: clamp(11px, 2vw, 13px);
  font-weight: 760;
}

.stock-page-assets .stock-asset-card-main > p b {
  color: var(--stock-mint);
  font-variant-numeric: tabular-nums;
  font-weight: 860;
}

.stock-asset-card-art {
  position: relative;
  z-index: 1;
  display: grid;
  min-width: 0;
  align-self: center;
  justify-self: end;
  place-items: center;
  transform: translate(8px, 34px);
}

.stock-asset-card-art svg {
  display: block;
  width: min(100%, 186px);
  height: auto;
  filter: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.35));
}

.stock-asset-card-chip {
  position: absolute;
  z-index: 2;
  top: 46%;
  left: clamp(22px, 4.4vw, 30px);
  width: 34px;
  height: 25px;
  border-radius: 6px;
  background:
    linear-gradient(90deg, transparent 46%, rgba(94, 59, 7, 0.45) 47% 51%, transparent 52%),
    linear-gradient(0deg, transparent 46%, rgba(94, 59, 7, 0.42) 47% 51%, transparent 52%),
    linear-gradient(145deg, #f4dc90, #cda23f 55%, #a67c22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.52), 0 3px 6px rgba(0, 0, 0, 0.28);
}

.stock-asset-card-mark {
  position: absolute;
  z-index: 1;
  right: clamp(22px, 4.4vw, 30px);
  bottom: clamp(104px, 17vw, 126px);
  color: rgba(238, 255, 236, 0.1);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.2em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.46);
}

.stock-asset-card-actions {
  position: relative;
  z-index: 3;
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(7px, 1.6vw, 11px);
  padding-top: clamp(14px, 2.5vw, 18px);
  border-top: 1px solid rgba(226, 255, 222, 0.11);
}

.stock-asset-card-actions button {
  display: grid;
  min-width: 0;
  min-height: clamp(66px, 10.5vw, 78px);
  align-content: center;
  justify-items: center;
  gap: 7px;
  padding: 8px 4px;
  border: 1px solid rgba(229, 255, 227, 0.15);
  border-radius: 16px;
  background:
    radial-gradient(circle at 28% 8%, rgba(242, 255, 238, 0.16), transparent 28%),
    linear-gradient(145deg, rgba(218, 255, 216, 0.105), rgba(35, 117, 68, 0.09) 55%, rgba(3, 14, 8, 0.48)),
    rgba(9, 27, 16, 0.72);
  color: var(--stock-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -1px 0 rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(14px) saturate(125%);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
  transition: transform 160ms cubic-bezier(0.16, 1, 0.3, 1), background-color 160ms ease;
}

.stock-asset-card-actions button:active {
  transform: scale(0.965);
}

.stock-asset-card-actions button:focus-visible,
.stock-page-assets .stock-asset-group-head:focus-visible {
  outline: 2px solid var(--stock-lime);
  outline-offset: 3px;
}

.stock-asset-card-actions button > span {
  display: grid;
  min-height: 26px;
  place-items: center;
}

.stock-asset-card-actions .stock-asset-action-icon {
  width: 25px;
  height: 25px;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.24));
}

.stock-asset-card-actions button b {
  overflow: hidden;
  max-width: 100%;
  font-size: clamp(9px, 1.8vw, 12px);
  font-weight: 850;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-page-assets .stock-asset-trend {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  height: clamp(252px, 50vw, 356px);
  margin-top: 16px;
  padding: clamp(20px, 4vw, 28px);
}

.stock-page-assets .stock-asset-trend header,
.stock-page-assets .stock-asset-trend footer {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.stock-page-assets .stock-asset-trend header > span {
  color: rgba(224, 239, 225, 0.6);
  font-size: clamp(10px, 1.8vw, 12px);
  font-weight: 840;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.stock-page-assets .stock-asset-trend header > strong {
  color: var(--stock-mint);
  font-size: clamp(11px, 2.2vw, 14px);
  font-variant-numeric: tabular-nums;
  font-weight: 860;
  white-space: nowrap;
}

.stock-page-assets .stock-asset-trend canvas {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 154px;
  margin: 0;
}

.stock-page-assets .stock-asset-trend footer {
  color: rgba(219, 233, 220, 0.52);
  font-size: clamp(9px, 1.7vw, 11px);
  font-weight: 740;
}

.stock-page-assets .stock-asset-action-feedback {
  margin-top: 12px;
  border-color: rgba(226, 255, 222, 0.13);
  background: rgba(10, 26, 16, 0.78);
}

.stock-page-assets .stock-asset-position-groups {
  gap: 14px;
}

.stock-page-assets .stock-asset-position-group {
  display: grid;
  gap: 9px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none;
}

.stock-page-assets .stock-asset-group-head {
  display: flex;
  width: 100%;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 18px;
  border: 1px solid rgba(226, 255, 222, 0.14);
  border-radius: 16px;
  background:
    radial-gradient(circle at 24% 0%, rgba(238, 255, 232, 0.11), transparent 32%),
    linear-gradient(145deg, rgba(193, 244, 196, 0.09), rgba(22, 65, 39, 0.1) 54%, rgba(5, 17, 10, 0.5)),
    rgba(10, 27, 16, 0.84);
  color: var(--stock-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.36);
  backdrop-filter: blur(16px) saturate(124%);
  -webkit-backdrop-filter: blur(16px) saturate(124%);
  text-align: left;
  transition: transform 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

.stock-page-assets .stock-asset-group-head:active {
  transform: scale(0.985);
}

.stock-page-assets .stock-asset-group-title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
}

.stock-page-assets .stock-asset-group-title > i {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--asset-dot, var(--stock-mint));
  box-shadow: 0 0 10px color-mix(in srgb, var(--asset-dot, var(--stock-mint)) 42%, transparent);
}

.stock-page-assets .stock-asset-group-title > b {
  min-width: 0;
  overflow: hidden;
  font-size: clamp(12px, 2.2vw, 15px);
  font-weight: 860;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-asset-group-chevron {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  place-items: center;
  color: rgba(229, 240, 230, 0.58);
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.stock-asset-group-chevron svg {
  width: 17px;
  height: 17px;
}

.stock-page-assets .stock-asset-group-head > strong {
  flex: 0 0 auto;
  color: var(--stock-ink);
  font-size: clamp(12px, 2.2vw, 15px);
  font-variant-numeric: tabular-nums;
  font-weight: 880;
  white-space: nowrap;
}

.stock-asset-group-body {
  display: grid;
  grid-template-rows: 1fr;
  min-height: 0;
  transition: grid-template-rows 220ms cubic-bezier(0.16, 1, 0.3, 1), opacity 180ms ease;
}

.stock-asset-group-body > div {
  min-height: 0;
  overflow: hidden;
}

.stock-asset-position-group.is-collapsed .stock-asset-group-body {
  grid-template-rows: 0fr;
  opacity: 0;
}

.stock-asset-position-group.is-collapsed .stock-asset-group-chevron {
  transform: rotate(-90deg);
}

.stock-page-assets .stock-asset-position-row {
  border-radius: 16px;
}

@media (max-width: 480px) {
  .stock-page-assets {
    padding-right: 14px;
    padding-left: 14px;
  }

  .stock-page-assets .stock-asset-hero {
    grid-template-columns: minmax(0, 1fr);
    min-height: 310px;
    padding: 20px;
  }

  .stock-asset-card-main {
    grid-column: 1;
    grid-row: 1;
    gap: 18px;
  }

  .stock-asset-card-art {
    position: absolute;
    z-index: 0;
    top: 27px;
    right: -20px;
    width: 48%;
    opacity: 0.38;
    transform: none;
  }

  .stock-asset-card-chip,
  .stock-asset-card-mark {
    display: none;
  }

  .stock-asset-card-actions {
    grid-column: 1;
    grid-row: 2;
  }

  .stock-page-assets .stock-asset-hero h2 {
    font-size: clamp(34px, 10.2vw, 42px);
  }

  .stock-page-assets .stock-asset-currency {
    font-size: 15px;
  }

  .stock-page-assets .stock-asset-uid {
    font-size: 9px;
  }

  .stock-page-assets .stock-asset-trend {
    height: 252px;
    padding: 20px;
  }

  .stock-page-assets .stock-asset-group-head {
    min-height: 60px;
    padding: 0 14px;
  }
}

@media (max-width: 350px) {
  .stock-page-assets .stock-page-head p {
    font-size: 9.5px;
  }

  .stock-page-assets .stock-asset-title {
    gap: 2px;
  }

  .stock-asset-card-actions {
    gap: 5px;
  }

  .stock-asset-card-actions button {
    border-radius: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stock-asset-card-actions button,
  .stock-page-assets .stock-asset-group-head,
  .stock-asset-group-chevron,
  .stock-asset-group-body {
    transition: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .stock-asset-card-actions button,
  .stock-page-assets .stock-asset-group-head {
    background-color: rgba(10, 27, 16, 0.98);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Assets v8: merge the approved stacked-card study into the live Assets route. */
.stock-page-assets .stock-asset-stack {
  position: relative;
  margin-bottom: 18px;
  padding-top: 2px;
}

.stock-page-assets .stock-asset-identity,
.stock-page-assets .stock-asset-balance {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(225, 255, 226, 0.22);
  border-radius: 18px;
}

.stock-page-assets .stock-asset-identity {
  width: calc(100% - 18px);
  height: 164px;
  margin: 0 auto;
  padding: 24px 22px;
  background:
    radial-gradient(160px 140px at 90% 28%, rgba(104, 244, 160, 0.18), transparent 68%),
    linear-gradient(122deg, rgba(255, 255, 255, 0.07), transparent 34% 62%, rgba(53, 207, 116, 0.08)),
    linear-gradient(146deg, #184729, #0c2b19 58%, #07170e);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
    0 8px 8px rgba(0, 13, 6, 0.24);
}

.stock-page-assets .stock-asset-identity::after {
  content: "";
  position: absolute;
  right: -30px;
  bottom: -96px;
  width: 218px;
  height: 190px;
  border: 1px solid rgba(200, 243, 95, 0.13);
  border-radius: 50%;
  pointer-events: none;
  transform: rotate(-19deg);
}

.stock-asset-identity-copy {
  position: relative;
  z-index: 3;
  width: 61.8%;
  min-width: 0;
}

.stock-asset-identity-label {
  display: block;
  margin-bottom: 11px;
  color: rgba(226, 240, 225, 0.55);
  font-size: 9px;
  font-weight: 760;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.stock-asset-email-line {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}

.stock-asset-email-line > strong {
  min-width: 0;
  overflow: hidden;
  color: var(--stock-ink);
  font-size: clamp(12px, 3.4vw, 14px);
  font-weight: 760;
  letter-spacing: -0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-asset-email-chevron {
  display: grid;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(230, 255, 233, 0.16);
  border-radius: 50%;
  background: rgba(4, 15, 8, 0.28);
  color: rgba(238, 248, 235, 0.76);
}

.stock-asset-email-chevron svg {
  width: 11px;
  height: 11px;
}

.stock-page-assets .stock-asset-identity .stock-asset-uid {
  display: block;
  margin-top: 9px;
  color: rgba(222, 235, 222, 0.62);
  font-size: 10px;
  font-weight: 680;
  letter-spacing: 0.035em;
}

.stock-asset-identity-art {
  position: absolute;
  z-index: 2;
  top: -10px;
  right: -4px;
  width: 41%;
  max-width: 154px;
  opacity: 0.96;
  transform: rotate(2deg);
}

.stock-asset-identity-art svg {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 7px rgba(0, 0, 0, 0.34));
}

.stock-page-assets .stock-asset-balance {
  z-index: 4;
  min-height: 304px;
  margin-top: -56px;
  padding: 24px 22px 20px;
  background:
    radial-gradient(190px 160px at 96% 12%, rgba(122, 211, 134, 0.14), transparent 70%),
    linear-gradient(112deg, rgba(255, 255, 255, 0.055), transparent 30% 63%, rgba(52, 172, 101, 0.055)),
    linear-gradient(148deg, #173b25, #0c2718 49%, #07170f);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.42),
    0 8px 8px rgba(0, 12, 6, 0.28);
}

.stock-page-assets .stock-asset-balance::before {
  content: "";
  position: absolute;
  top: -80px;
  right: -52px;
  width: 210px;
  height: 210px;
  border: 1px solid rgba(199, 243, 95, 0.1);
  border-radius: 50%;
  pointer-events: none;
}

.stock-page-assets .stock-asset-balance-head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
}

.stock-page-assets .stock-asset-balance-head > span {
  color: var(--stock-ink-2);
  font-size: 15px;
  font-weight: 790;
  letter-spacing: -0.015em;
}

.stock-page-assets .stock-asset-balance-head .stock-asset-privacy {
  width: 28px;
  min-width: 28px;
  min-height: 28px;
  margin: 0;
}

.stock-page-assets .stock-asset-balance-row {
  z-index: 2;
  width: auto;
  min-width: 0;
  max-width: 100%;
  gap: 7px;
  margin-top: 22px;
  white-space: nowrap;
}

.stock-page-assets .stock-asset-balance h2 {
  position: relative;
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  overflow: visible;
  color: var(--stock-ink);
  font-size: clamp(37px, 10.4vw, 47px);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  line-height: 0.94;
  white-space: nowrap;
}

.stock-page-assets .stock-asset-balance .stock-asset-currency {
  color: rgba(235, 246, 235, 0.78);
  font-size: clamp(14px, 4vw, 17px);
  font-weight: 850;
  letter-spacing: -0.02em;
}

.stock-page-assets .stock-asset-balance > p {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 7px;
  margin: 20px 0 0;
}

.stock-page-assets .stock-asset-balance > p > span {
  color: rgba(220, 235, 221, 0.59);
  font-size: 12px;
  font-weight: 720;
}

.stock-page-assets .stock-asset-balance > p > b {
  position: relative;
  color: var(--stock-mint);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 860;
}

.stock-page-assets .stock-asset-balance .stock-asset-card-actions {
  position: absolute;
  right: 20px;
  bottom: 20px;
  left: 20px;
  z-index: 2;
  gap: 8px;
  padding-top: 16px;
}

.stock-page-assets .stock-asset-balance .stock-asset-card-actions button {
  min-height: 72px;
  padding: 8px 3px;
  border-radius: 14px;
}

.stock-page-assets .stock-asset-trend {
  margin-top: 0;
}

@media (max-width: 350px) {
  .stock-page-assets .stock-asset-identity {
    height: 156px;
    padding-right: 17px;
    padding-left: 17px;
  }

  .stock-page-assets .stock-asset-balance {
    min-height: 296px;
    padding-right: 17px;
    padding-left: 17px;
  }

  .stock-page-assets .stock-asset-balance .stock-asset-card-actions {
    right: 15px;
    left: 15px;
    gap: 5px;
  }

  .stock-page-assets .stock-asset-balance h2 {
    font-size: 34px;
  }
}

/* ============================================================
   Claude UI v9 — refinement pass (2026-07-22)
   Scope: EX monogram logo · Quick Action tiles · centered market
   sparklines · session-leader coverflow · invest card art · Assets
   golden-ratio typography · accent-tinted position groups · account
   sub-pages (Deposit / Withdraw / Activity / Security) · micro polish.
   The bottom navigation pill (approved) is intentionally untouched.
   ============================================================ */

/* 1) Brand mark: adopt the EX monogram from the navigation pill. */
.stock-brand span {
  border: 1px solid rgba(200, 243, 95, 0.5);
  background:
    radial-gradient(circle at 30% 16%, rgba(214, 255, 111, 0.2), transparent 54%),
    linear-gradient(155deg, #142a1c 0%, #07120b 58%, #050c07 100%);
  color: var(--stock-lime);
  font-size: 13px;
  font-weight: 950;
  letter-spacing: 0.015em;
  text-shadow: 0 0 14px rgba(200, 243, 95, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45),
    0 10px 26px rgba(70, 230, 144, 0.2),
    0 0 0 4px rgba(200, 243, 95, 0.045);
}

.stock-brand b {
  font-weight: 900;
  letter-spacing: -0.015em;
}

/* 2) Quick Action tiles: clearer hierarchy, art seated bottom-right,
      tile proportions close to the golden section (≈194×120). */
.stock-page-home .stock-quick-grid {
  gap: 11px;
}

.stock-page-home .stock-quick-grid .stock-tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 120px;
  padding: 15px 15px 13px;
}

.stock-page-home .stock-tile-copy {
  width: 100%;
}

.stock-page-home .stock-tile-copy b {
  font-size: 16px;
  font-weight: 850;
  letter-spacing: -0.015em;
}

.stock-page-home .stock-tile-copy small {
  margin-top: 6px;
  color: rgba(214, 224, 210, 0.64);
  font-size: 11px;
  letter-spacing: 0.005em;
}

.stock-page-home .stock-tile-art {
  position: relative;
  right: auto;
  bottom: auto;
  width: 58px;
  height: 38px;
  align-self: flex-end;
  margin: 8px 2px 0 0;
}

.stock-page-home .stock-tile-trade .stock-tile-art i {
  bottom: 0;
  width: 7px;
}

.stock-page-home .stock-tile-trade .stock-tile-art i:nth-child(1) { right: 32px; height: 17px; }
.stock-page-home .stock-tile-trade .stock-tile-art i:nth-child(2) { right: 20px; height: 34px; }
.stock-page-home .stock-tile-trade .stock-tile-art i:nth-child(3) { right: 8px; height: 25px; }

.stock-page-home .stock-tile-portfolio .stock-tile-art {
  width: 62px;
}

.stock-page-home .stock-tile-portfolio .stock-tile-art svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 9px rgba(70, 230, 144, 0.28));
}

.stock-page-home .stock-tile-strategies .stock-tile-art i {
  width: 23px;
  height: 23px;
  border-radius: 7px;
}

.stock-page-home .stock-tile-strategies .stock-tile-art i:nth-child(1) { right: 28px; bottom: 0; opacity: 0.35; }
.stock-page-home .stock-tile-strategies .stock-tile-art i:nth-child(2) { right: 15px; bottom: 6px; opacity: 0.65; }
.stock-page-home .stock-tile-strategies .stock-tile-art i:nth-child(3) { right: 2px; bottom: 12px; opacity: 1; }

.stock-page-home .stock-tile-deposit .stock-tile-art i {
  right: 8px;
  bottom: 13px;
  width: 38px;
  height: 11px;
  border-radius: 4px;
}

.stock-page-home .stock-tile-deposit .stock-tile-art i::before {
  top: -13.5px;
  left: 13.5px;
  width: 11px;
  height: 38px;
}

@media (max-width: 390px) {
  .stock-page-home .stock-quick-grid .stock-tile {
    min-height: 112px;
    padding: 14px 13px 12px;
  }

  .stock-page-home .stock-tile-copy b {
    font-size: 15px;
  }
}

/* 3) Market rows: the sparkline now sits centered in the free band
      between the name column and the price column. */
.stock-market-row {
  grid-template-columns: 46px minmax(0, 1fr) 72px minmax(88px, 1fr);
}

.stock-ai-market-row {
  grid-template-columns: 46px minmax(0, 1fr) 72px minmax(76px, 1fr);
}

/* 4) Previous-session leaders: stacked deck becomes an auto-playing
      coverflow — focused card center, neighbours peeking and tilted. */
.stock-market-leader-track {
  height: 232px;
  perspective: 1150px;
}

.stock-market-leader-card {
  left: 50%;
  width: min(calc(100% - 92px), 322px);
  min-height: 214px;
  transform-origin: 50% 50%;
  transform: translate3d(-50%, 0, 0);
  transition:
    transform 560ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 420ms ease,
    filter 420ms ease;
}

.stock-market-leader-card[data-deck-slot="0"] {
  z-index: 6;
  opacity: 1;
  filter: none;
  transform: translate3d(calc(-50% + var(--deck-drag-x, 0px)), 0, 46px) rotate(var(--deck-drag-rotate, 0deg));
}

.stock-market-leader-card[data-deck-slot="1"] {
  z-index: 4;
  opacity: 0.62;
  filter: blur(1.4px) saturate(0.88) brightness(0.8);
  transform: translate3d(calc(-50% + 86%), 9px, -85px) rotateY(-14deg) scale(0.9);
}

.stock-market-leader-card[data-deck-slot="-1"] {
  z-index: 4;
  opacity: 0.62;
  filter: blur(1.4px) saturate(0.88) brightness(0.8);
  transform: translate3d(calc(-50% - 86%), 9px, -85px) rotateY(14deg) scale(0.9);
}

.stock-market-leader-card[data-deck-slot="2"] {
  z-index: 2;
  opacity: 0;
  filter: blur(2.6px) brightness(0.7);
  transform: translate3d(calc(-50% + 150%), 16px, -170px) rotateY(-17deg) scale(0.84);
}

.stock-market-leader-card[data-deck-slot="-2"] {
  z-index: 2;
  opacity: 0;
  filter: blur(2.6px) brightness(0.7);
  transform: translate3d(calc(-50% - 150%), 16px, -170px) rotateY(17deg) scale(0.84);
}

.stock-market-leader-card[data-deck-slot="1"] canvas,
.stock-market-leader-card[data-deck-slot="-1"] canvas {
  opacity: 0.55;
}

.stock-market-leader-skeleton {
  min-height: 214px;
}

@media (prefers-reduced-motion: reduce) {
  .stock-market-leader-card {
    transition: none;
  }
}

/* 5) Best-strategy card: quiet generative chart art fills the empty
      right field without competing with the return figure. */
.stock-best-strategy-art {
  position: absolute;
  right: -8px;
  bottom: -10px;
  z-index: 0;
  display: block;
  width: 178px;
  height: 132px;
  opacity: 0.5;
  pointer-events: none;
  mask-image: linear-gradient(100deg, transparent 3%, #000 42%);
  -webkit-mask-image: linear-gradient(100deg, transparent 3%, #000 42%);
}

.stock-best-strategy-art svg {
  display: block;
  width: 100%;
  height: 100%;
}

.stock-best-strategy-copy,
.stock-best-strategy > button {
  position: relative;
  z-index: 1;
}

/* 6) Assets: measured type ramp (≈ ×1.25 golden-adjacent steps) and
      Fibonacci spacing rhythm (8 / 13 / 21) inside the two metal cards. */
.stock-page-assets .stock-page-head h1 {
  font-size: 33px;
  letter-spacing: -0.03em;
}

.stock-page-assets .stock-page-head p {
  margin-top: 8px;
  color: rgba(214, 224, 210, 0.62);
  letter-spacing: 0.005em;
}

.stock-asset-identity-label {
  margin-bottom: 12px;
  color: rgba(226, 240, 225, 0.6);
  font-size: 10px;
  letter-spacing: 0.12em;
}

.stock-asset-email-line > strong {
  font-size: clamp(13px, 3.5vw, 15px);
  font-weight: 800;
}

.stock-page-assets .stock-asset-identity .stock-asset-uid {
  margin-top: 8px;
  color: rgba(222, 235, 222, 0.66);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.045em;
}

.stock-page-assets .stock-asset-balance-head > span {
  font-size: 14px;
  font-weight: 830;
  letter-spacing: 0.01em;
}

.stock-page-assets .stock-asset-balance-row {
  gap: 8px;
  margin-top: 21px;
}

.stock-page-assets .stock-asset-balance h2 {
  font-size: clamp(36px, 10vw, 44px);
  letter-spacing: -0.045em;
}

.stock-page-assets .stock-asset-balance .stock-asset-currency {
  color: rgba(235, 246, 235, 0.72);
  font-size: clamp(13px, 3.6vw, 16px);
}

.stock-page-assets .stock-asset-balance > p {
  gap: 8px;
  margin-top: 13px;
}

.stock-page-assets .stock-asset-balance > p > span {
  font-size: 11.5px;
  letter-spacing: 0.015em;
}

.stock-page-assets .stock-asset-balance > p > b {
  font-size: 13.5px;
}

.stock-page-assets .stock-asset-balance .stock-asset-card-actions {
  gap: 9px;
}

.stock-page-assets .stock-asset-balance .stock-asset-card-actions button {
  min-height: 74px;
  border-radius: 16px;
  gap: 8px;
}

.stock-asset-card-actions .stock-asset-action-icon {
  width: 23px;
  height: 23px;
}

.stock-asset-card-actions button b {
  font-size: 11.5px;
  letter-spacing: 0.01em;
}

.stock-page-assets .stock-asset-trend {
  gap: 13px;
}

.stock-page-assets .stock-asset-trend header > span {
  font-size: 11px;
  letter-spacing: 0.1em;
}

.stock-page-assets .stock-asset-trend header > strong {
  font-size: 13.5px;
}

.stock-page-assets .stock-asset-trend footer {
  font-size: 10.5px;
  letter-spacing: 0.035em;
}

.stock-page-assets .stock-asset-group-head {
  min-height: 62px;
}

.stock-page-assets .stock-asset-group-title > b {
  font-size: clamp(13px, 2.5vw, 14.5px);
  letter-spacing: -0.01em;
}

.stock-page-assets .stock-asset-group-head > strong {
  font-size: clamp(13px, 2.5vw, 14.5px);
}

.stock-page-assets .stock-asset-position-row {
  gap: 12px;
  min-height: 74px;
  padding: 12px 14px;
}

.stock-asset-position-copy b {
  font-size: 12.5px;
}

.stock-asset-position-copy small,
.stock-asset-position-value small {
  font-size: 10px;
}

.stock-asset-position-value strong {
  font-size: 13px;
}

/* 7) Position groups: children now carry the same hue and frame tone
      as their parent header (green / blue / violet / gold families). */
.stock-page-assets .stock-asset-group-head {
  border-color: color-mix(in srgb, var(--asset-accent, #9ff3c0) 22%, rgba(226, 255, 222, 0.06));
  background:
    radial-gradient(150px 60px at 18% 0%, color-mix(in srgb, var(--asset-accent, #9ff3c0) 12%, transparent), transparent 74%),
    linear-gradient(145deg, color-mix(in srgb, var(--asset-accent, #9ff3c0) 7%, rgba(18, 34, 24, 0.35)), rgba(6, 15, 9, 0.62)),
    rgba(10, 25, 15, 0.84);
}

.stock-page-assets .stock-asset-group-body > div {
  display: grid;
  gap: 8px;
}

.stock-page-assets .stock-asset-position-row {
  border: 1px solid color-mix(in srgb, var(--asset-accent, #3df593) 24%, rgba(12, 22, 16, 0.3));
  background:
    radial-gradient(150px 70px at 100% 0%, color-mix(in srgb, var(--asset-accent, #3df593) 12%, transparent), transparent 74%),
    linear-gradient(150deg, color-mix(in srgb, var(--asset-accent, #3df593) 8%, rgba(15, 26, 20, 0.94)), rgba(7, 14, 10, 0.97));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--asset-accent, #ffffff) 16%, rgba(255, 255, 255, 0.04));
}

.stock-page-assets button.stock-asset-position-link {
  width: 100%;
  margin: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 150ms ease, border-color 150ms ease, filter 150ms ease;
}

.stock-page-assets button.stock-asset-position-link:hover,
.stock-page-assets button.stock-asset-position-link:focus-visible {
  border-color: color-mix(in srgb, var(--asset-accent, #3df593) 58%, rgba(255, 255, 255, 0.12));
  filter: brightness(1.05);
}

.stock-page-assets button.stock-asset-position-link:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--asset-accent, #3df593) 72%, transparent);
  outline-offset: 2px;
}

.stock-page-assets button.stock-asset-position-link:active {
  transform: translateY(1px) scale(0.99);
}

.stock-page-assets .stock-asset-position-value strong {
  color: color-mix(in srgb, var(--asset-accent, #f2f7ee) 30%, var(--stock-ink));
}

/* 8) Account sub-pages: Deposit · Withdraw · Activity · Security. */
.stock-account-head {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin-bottom: 18px;
}

.stock-account-back {
  display: grid;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--stock-stroke);
  border-radius: 15px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02)),
    var(--stock-surface);
  color: var(--stock-ink-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 140ms ease, border-color 140ms ease, background-color 140ms ease;
}

.stock-account-back:hover,
.stock-account-back:focus-visible {
  border-color: rgba(200, 243, 95, 0.4);
  color: var(--stock-ink);
}

.stock-account-back:focus-visible {
  outline: 2px solid rgba(200, 243, 95, 0.66);
  outline-offset: 2px;
}

.stock-account-back:active {
  transform: translateY(1px) scale(0.96);
}

.stock-account-back-icon {
  width: 17px;
  height: 17px;
}

.stock-account-head-copy {
  min-width: 0;
}

.stock-account-head-copy > span {
  color: var(--stock-lime);
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.stock-account-head-copy h1 {
  margin: 7px 0 0;
  color: var(--stock-ink);
  font-size: 27px;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
}

.stock-account-head-copy p {
  margin: 8px 0 0;
  color: var(--stock-muted);
  font-size: 12px;
  line-height: 1.4;
}

.stock-account-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 18px 16px;
  border: 1px solid rgba(225, 255, 226, 0.17);
  border-radius: 22px;
  background:
    radial-gradient(220px 130px at 92% 0%, rgba(104, 244, 160, 0.1), transparent 70%),
    linear-gradient(116deg, rgba(255, 255, 255, 0.05), transparent 30% 62%, rgba(53, 207, 116, 0.05)),
    linear-gradient(150deg, rgba(23, 52, 34, 0.92), rgba(9, 25, 16, 0.96) 52%, rgba(5, 14, 9, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
    0 8px 10px rgba(0, 12, 6, 0.24);
  backdrop-filter: blur(18px) saturate(124%);
  -webkit-backdrop-filter: blur(18px) saturate(124%);
}

.stock-account-card-label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 16px 2px 10px;
}

.stock-account-card-label:first-child {
  margin-top: 0;
}

.stock-account-card-label span {
  color: var(--stock-lime);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.stock-account-card-label b {
  color: var(--stock-ink-2);
  font-size: 13px;
  font-weight: 820;
}

.stock-network-pills {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.stock-network-pills button {
  display: grid;
  gap: 4px;
  min-height: 56px;
  align-content: center;
  justify-items: center;
  padding: 6px 4px;
  border: 1px solid var(--stock-stroke);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--stock-ink-2);
}

.stock-network-pills button b {
  overflow: hidden;
  max-width: 100%;
  font-size: 12px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-network-pills button small {
  color: var(--stock-dim);
  font-size: 9.5px;
  font-weight: 700;
}

.stock-network-pills button.on {
  border-color: rgba(200, 243, 95, 0.48);
  background:
    radial-gradient(80px 40px at 50% 0%, rgba(200, 243, 95, 0.16), transparent 78%),
    rgba(200, 243, 95, 0.09);
  color: var(--stock-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 8px 20px rgba(70, 230, 144, 0.12);
}

.stock-network-pills button.on small {
  color: var(--stock-lime);
}

.stock-deposit-address {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(200, 243, 95, 0.2);
  border-radius: 18px;
  background:
    linear-gradient(140deg, rgba(200, 243, 95, 0.06), transparent 46%),
    rgba(5, 13, 8, 0.66);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.stock-deposit-qr {
  display: grid;
  width: 96px;
  height: 96px;
  place-items: center;
  border: 1px solid rgba(226, 255, 222, 0.2);
  border-radius: 14px;
  background:
    radial-gradient(60px 60px at 50% 0%, rgba(200, 243, 95, 0.1), transparent 80%),
    rgba(6, 15, 9, 0.92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.stock-deposit-qr svg {
  width: 74px;
  height: 74px;
}

.stock-deposit-qr rect {
  fill: none;
  stroke: rgba(214, 255, 158, 0.85);
  stroke-width: 2.4;
}

.stock-deposit-qr .fill,
.stock-deposit-qr .fill rect {
  fill: rgba(214, 255, 158, 0.85);
  stroke: none;
}

.stock-deposit-address-copy {
  display: grid;
  min-width: 0;
  gap: 8px;
  justify-items: start;
}

.stock-deposit-address-copy > span {
  color: var(--stock-dim);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.stock-deposit-address-copy code {
  overflow-wrap: anywhere;
  color: var(--stock-ink);
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.45;
}

.stock-copy-button {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  gap: 7px;
  padding: 0 13px;
  border: 1px solid rgba(235, 255, 204, 0.4);
  border-radius: 999px;
  background: linear-gradient(130deg, var(--stock-lime), var(--stock-mint));
  color: #07110b;
  font-size: 11.5px;
  font-weight: 900;
  box-shadow: 0 8px 20px rgba(70, 230, 144, 0.18);
}

.stock-copy-button.is-copied {
  filter: saturate(1.2) brightness(1.06);
}

.stock-copy-icon {
  width: 14px;
  height: 14px;
}

.stock-account-notes {
  display: grid;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.stock-account-notes li {
  position: relative;
  padding-left: 16px;
  color: var(--stock-muted);
  font-size: 11px;
  line-height: 1.45;
}

.stock-account-notes li::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(200, 243, 95, 0.55);
}

.stock-account-notes b {
  color: var(--stock-ink-2);
  font-weight: 800;
}

.stock-account-list-head {
  margin: 22px 2px 11px;
}

.stock-account-list-head h2 {
  margin: 0;
  color: var(--stock-ink);
  font-size: 16px;
  font-weight: 850;
  letter-spacing: -0.015em;
}

.stock-account-activity {
  display: grid;
  gap: 8px;
}

.stock-account-activity-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 68px;
  padding: 11px 13px;
  border: 1px solid var(--stock-stroke);
  border-radius: 16px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)),
    rgba(9, 15, 12, 0.76);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.stock-account-activity-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(200, 243, 95, 0.18);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(200, 243, 95, 0.14), rgba(70, 230, 144, 0.06) 55%, rgba(5, 10, 6, 0.6));
  color: var(--stock-lime);
}

.stock-account-activity-icon.is-withdraw {
  border-color: rgba(232, 184, 76, 0.24);
  background: linear-gradient(145deg, rgba(232, 184, 76, 0.16), rgba(232, 184, 76, 0.05) 55%, rgba(10, 8, 4, 0.6));
  color: var(--stock-gold);
}

.stock-account-activity-icon.is-trade {
  border-color: rgba(118, 215, 255, 0.22);
  background: linear-gradient(145deg, rgba(118, 215, 255, 0.14), rgba(118, 215, 255, 0.05) 55%, rgba(4, 9, 12, 0.6));
  color: #8fd6ff;
}

.stock-account-activity-icon.is-strategy,
.stock-account-activity-icon.is-allocation {
  border-color: rgba(163, 108, 255, 0.24);
  background: linear-gradient(145deg, rgba(163, 108, 255, 0.15), rgba(163, 108, 255, 0.05) 55%, rgba(8, 5, 13, 0.6));
  color: #c9a4ff;
}

.stock-account-activity-glyph {
  width: 19px;
  height: 19px;
}

.stock-account-activity-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.stock-account-activity-copy b {
  overflow: hidden;
  color: var(--stock-ink);
  font-size: 12.5px;
  font-weight: 830;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-account-activity-copy small {
  overflow: hidden;
  color: var(--stock-dim);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-account-activity-value {
  display: grid;
  gap: 4px;
  justify-items: end;
  text-align: right;
}

.stock-account-activity-value strong {
  color: var(--stock-ink);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  font-weight: 870;
  white-space: nowrap;
}

.stock-account-activity-value strong.up {
  color: var(--stock-mint);
}

.stock-account-activity-value small {
  color: var(--stock-dim);
  font-size: 9.5px;
  white-space: nowrap;
}

.stock-account-empty {
  display: grid;
  gap: 6px;
  justify-items: center;
  padding: 30px 16px;
  border: 1px dashed rgba(215, 255, 222, 0.17);
  border-radius: 16px;
  color: var(--stock-muted);
  text-align: center;
}

.stock-account-empty b {
  color: var(--stock-ink-2);
  font-size: 13px;
}

.stock-account-empty span {
  font-size: 11px;
}

.stock-activity-chips {
  margin-top: 0;
}

/* Withdraw */
.stock-withdraw-balance {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 15px;
  padding: 13px 15px;
  border: 1px solid rgba(200, 243, 95, 0.18);
  border-radius: 15px;
  background:
    linear-gradient(120deg, rgba(200, 243, 95, 0.07), transparent 55%),
    rgba(5, 13, 8, 0.6);
}

.stock-withdraw-balance span {
  color: var(--stock-dim);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.stock-withdraw-balance b {
  color: var(--stock-ink);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.stock-withdraw-form {
  display: grid;
  gap: 4px;
}

.stock-withdraw-form > label {
  display: grid;
  gap: 8px;
  margin: 10px 0;
}

.stock-withdraw-form > label > span {
  color: var(--stock-ink-2);
  font-size: 12px;
  font-weight: 820;
}

.stock-withdraw-form > label > div {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 52px;
  padding: 0 14px;
  border: 1px solid var(--stock-stroke-2);
  border-radius: 15px;
  background: rgba(4, 10, 6, 0.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.stock-withdraw-form > label > div:focus-within {
  border-color: rgba(200, 243, 95, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 0 0 3px rgba(200, 243, 95, 0.08);
}

.stock-withdraw-form input {
  min-width: 0;
  flex: 1 1 auto;
  border: 0;
  background: transparent;
  color: var(--stock-ink);
  font-size: 13.5px;
  font-weight: 700;
  outline: 0;
}

.stock-withdraw-form input::placeholder {
  color: var(--stock-dim);
  font-weight: 600;
}

.stock-withdraw-form > label b {
  flex: 0 0 auto;
  color: var(--stock-muted);
  font-size: 12px;
  font-weight: 850;
}

.stock-max-button {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 0 11px;
  border: 1px solid rgba(200, 243, 95, 0.32);
  border-radius: 999px;
  background: rgba(200, 243, 95, 0.1);
  color: var(--stock-lime);
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.stock-withdraw-meta {
  display: grid;
  gap: 7px;
  margin: 8px 2px 14px;
}

.stock-withdraw-meta p {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
}

.stock-withdraw-meta span {
  color: var(--stock-dim);
  font-size: 11px;
  font-weight: 720;
}

.stock-withdraw-meta b {
  color: var(--stock-ink-2);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 850;
}

.stock-account-submit {
  min-height: 52px;
  border: 1px solid rgba(235, 255, 204, 0.42);
  border-radius: 999px;
  background: linear-gradient(130deg, var(--stock-lime), var(--stock-mint));
  color: #07110b;
  font-size: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 10px 26px rgba(70, 230, 144, 0.2);
}

.stock-account-submit:active {
  transform: translateY(1px) scale(0.99);
}

.stock-account-form-status {
  margin: 12px 2px 0;
  color: var(--stock-dim);
  font-size: 10.5px;
  line-height: 1.45;
}

/* Security */
.stock-security-score {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 15px;
  align-items: center;
  margin-bottom: 4px;
  padding: 16px;
  border: 1px solid rgba(200, 243, 95, 0.2);
  border-radius: 20px;
  background:
    radial-gradient(180px 90px at 0% 0%, rgba(200, 243, 95, 0.1), transparent 70%),
    linear-gradient(150deg, rgba(23, 52, 34, 0.9), rgba(7, 18, 11, 0.95));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.stock-security-score-ring {
  position: relative;
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
}

.stock-security-score-ring svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.stock-security-score-ring .track {
  fill: none;
  stroke: rgba(215, 255, 222, 0.12);
  stroke-width: 5;
}

.stock-security-score-ring .value {
  fill: none;
  stroke: var(--stock-mint);
  stroke-dasharray: 82 100;
  stroke-linecap: round;
  stroke-width: 5;
  filter: drop-shadow(0 0 6px rgba(70, 230, 144, 0.5));
}

.stock-security-score-ring b {
  position: relative;
  color: var(--stock-ink);
  font-size: 19px;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
}

.stock-security-score-copy {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.stock-security-score-copy b {
  color: var(--stock-ink);
  font-size: 14.5px;
  font-weight: 850;
}

.stock-security-score-copy small {
  color: var(--stock-muted);
  font-size: 11px;
  line-height: 1.4;
}

.stock-security-list {
  display: grid;
  gap: 8px;
}

.stock-security-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 68px;
  padding: 12px 13px;
  border: 1px solid var(--stock-stroke);
  border-radius: 16px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)),
    rgba(9, 15, 12, 0.76);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.stock-security-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(200, 243, 95, 0.18);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(200, 243, 95, 0.13), rgba(70, 230, 144, 0.05) 55%, rgba(5, 10, 6, 0.6));
  color: var(--stock-lime);
}

.stock-security-glyph {
  width: 19px;
  height: 19px;
}

.stock-security-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.stock-security-copy b {
  overflow: hidden;
  color: var(--stock-ink);
  font-size: 12.5px;
  font-weight: 830;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-security-copy small {
  overflow: hidden;
  color: var(--stock-dim);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-security-state,
.stock-page button.stock-security-state {
  flex: 0 0 auto;
  padding: 5px 10px;
  border: 1px solid rgba(70, 230, 144, 0.3);
  border-radius: 999px;
  background: rgba(70, 230, 144, 0.1);
  color: var(--stock-mint);
  font-family: inherit;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.stock-security-toggle {
  position: relative;
  display: block;
  width: 46px;
  height: 27px;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid var(--stock-stroke-2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
}

.stock-security-toggle i {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: rgba(242, 247, 238, 0.85);
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1), background 200ms ease;
}

.stock-security-toggle.on {
  border-color: rgba(200, 243, 95, 0.5);
  background: linear-gradient(130deg, var(--stock-lime), var(--stock-mint));
}

.stock-security-toggle.on i {
  background: #07110b;
  transform: translateX(19px);
}

.stock-security-link {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  gap: 5px;
  padding: 0 6px 0 12px;
  border: 1px solid var(--stock-stroke);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--stock-ink-2);
  font-size: 11.5px;
  font-weight: 850;
}

.stock-security-chevron {
  width: 13px;
  height: 13px;
  opacity: 0.6;
}

.stock-security-detail-links {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}

.stock-security-detail-link {
  display: grid;
  width: 100%;
  min-height: 68px;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 13px;
  border: 1px solid var(--stock-stroke);
  border-radius: 16px;
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012)),
    rgba(9, 15, 12, 0.82);
  color: var(--stock-ink);
  font-family: inherit;
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 9px 22px rgba(0, 5, 2, 0.16);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 145ms ease, border-color 145ms ease, background-color 145ms ease, box-shadow 145ms ease;
}

.stock-security-detail-link > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.stock-security-detail-link b {
  font-size: 12.5px;
  font-weight: 850;
}

.stock-security-detail-link small {
  overflow: hidden;
  color: var(--stock-dim);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-security-detail-link:hover,
.stock-security-detail-link:focus-visible {
  border-color: rgba(200, 243, 95, 0.36);
  background: rgba(16, 29, 20, 0.92);
}

.stock-security-detail-link:focus-visible {
  outline: 2px solid rgba(200, 243, 95, 0.65);
  outline-offset: 2px;
}

.stock-security-detail-link:active {
  transform: translateY(1px) scale(0.985);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.32);
}

.stock-security-notice {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 18px 3px 0;
  color: var(--stock-dim);
  font-size: 10px;
  line-height: 1.5;
}

.stock-security-notice-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--stock-lime);
}

.stock-security-dialog {
  box-sizing: border-box;
  width: min(398px, calc(100vw - 32px));
  max-width: min(398px, calc(100vw - 32px));
  max-height: min(82dvh, 720px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: transparent;
  color: var(--stock-ink);
  overflow: visible;
}

.stock-security-dialog::backdrop {
  background: rgba(0, 8, 4, 0.76);
  -webkit-backdrop-filter: blur(12px) saturate(0.82);
  backdrop-filter: blur(12px) saturate(0.82);
}

.stock-security-dialog-card {
  display: grid;
  box-sizing: border-box;
  width: 100%;
  max-height: min(82dvh, 720px);
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(200, 243, 95, 0.2);
  border-radius: 22px;
  background: linear-gradient(155deg, rgba(19, 35, 24, 0.99), rgba(5, 12, 8, 0.995));
}

.stock-security-dialog-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(218, 255, 224, 0.1);
}

.stock-security-dialog-card > header > div {
  display: grid;
  gap: 4px;
}

.stock-security-dialog-card > header small {
  color: var(--stock-lime);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.stock-security-dialog-card > header h2 {
  margin: 0;
  color: var(--stock-ink);
  font-size: 20px;
  letter-spacing: -0.025em;
}

.stock-security-dialog-card > header button {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  padding: 0;
  border: 1px solid var(--stock-stroke);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.055);
  color: var(--stock-ink-2);
  font-size: 23px;
  line-height: 1;
}

.stock-security-dialog-body {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 14px;
  overflow-y: auto;
}

.stock-security-event {
  display: grid;
  min-height: 64px;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 11px 12px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.045);
}

.stock-security-event-icon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 13px;
  background: rgba(70, 230, 144, 0.09);
  color: var(--stock-mint);
}

.stock-security-event.is-warning .stock-security-event-icon {
  background: rgba(255, 119, 125, 0.1);
  color: #ff8d93;
}

.stock-security-event-glyph {
  width: 18px;
  height: 18px;
}

.stock-security-event > div {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.stock-security-event b {
  color: var(--stock-ink);
  font-size: 12px;
  font-weight: 820;
}

.stock-security-event small {
  color: var(--stock-dim);
  font-size: 10px;
}

.stock-security-dialog-loading,
.stock-security-empty {
  display: grid;
  min-height: 220px;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 28px;
  color: var(--stock-dim);
  text-align: center;
}

.stock-security-dialog-loading.is-error {
  color: #ff9ca2;
}

.stock-security-empty > span {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 15px;
  background: rgba(70, 230, 144, 0.08);
  color: var(--stock-mint);
}

.stock-security-empty-icon {
  width: 21px;
  height: 21px;
}

.stock-security-empty b {
  color: var(--stock-ink);
  font-size: 14px;
}

.stock-security-empty small {
  max-width: 32ch;
  font-size: 10.5px;
  line-height: 1.5;
}

.stock-security-status-list {
  display: grid;
  gap: 1px;
  padding: 10px 14px 16px;
  overflow-y: auto;
}

.stock-security-status-list article {
  display: grid;
  gap: 8px;
  padding: 16px 2px;
  border-bottom: 1px solid rgba(218, 255, 224, 0.09);
}

.stock-security-status-list article:last-child {
  border-bottom: 0;
}

.stock-security-status-list span {
  color: var(--stock-dim);
  font-size: 10px;
}

.stock-security-status-list b,
.stock-security-status-list code {
  color: var(--stock-ink);
  font-family: inherit;
  font-size: 12px;
  font-weight: 780;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: no-preference) {
  .stock-security-dialog[open] .stock-security-dialog-card {
    animation: stock-security-sheet-in 220ms cubic-bezier(0.16, 1, 0.3, 1);
  }
}

@keyframes stock-security-sheet-in {
  from { opacity: 0; transform: translateY(8px) scale(0.975); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 360px) {
  .stock-deposit-address {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }

  .stock-deposit-address-copy {
    justify-items: center;
  }

  .stock-network-pills button b {
    font-size: 11px;
  }
}

/* 9) Micro polish: focus glow on search, softer section buttons. */
.stock-search:focus-within {
  border-color: rgba(200, 243, 95, 0.36);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 0 0 3px rgba(200, 243, 95, 0.07);
}

.stock-section-head button:hover,
.stock-page-home .stock-home-market-head button:hover {
  border-color: rgba(200, 243, 95, 0.34);
  color: var(--stock-lime);
}

.stock-chips button:hover {
  border-color: var(--stock-stroke-2);
  color: var(--stock-ink-2);
}

.stock-chips button.on:hover {
  color: #07110b;
}

/* v9 fix: constrain position groups to the page column on narrow screens. */
.stock-page-assets .stock-asset-position-groups,
.stock-page-assets .stock-asset-position-group,
.stock-page-assets .stock-asset-group-body {
  grid-template-columns: minmax(0, 1fr);
}

.stock-page-assets .stock-asset-position-group,
.stock-page-assets .stock-asset-group-body,
.stock-page-assets .stock-asset-group-body > div,
.stock-page-assets .stock-asset-position-row {
  min-width: 0;
}

/* v9 narrow screens: keep the coverflow and rows legible at 320-370px. */
@media (max-width: 380px) {
  .stock-market-leader-card {
    width: calc(100% - 52px);
  }

  .stock-market-leader-kicker small {
    display: none;
  }

  .stock-market-leader-copy h2 {
    font-size: 26px;
  }

  .stock-market-leader-value strong {
    font-size: 25px;
  }

  .stock-market-leader-value em {
    min-height: 26px;
    padding: 0 8px;
    font-size: 11px;
  }

  .stock-market-leader-dots button {
    width: 34px;
    flex-basis: 34px;
  }

  .stock-market-leader-footer > span {
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 360px) {
  .stock-market-row {
    grid-template-columns: 42px minmax(0, 1fr) 56px minmax(84px, 1fr);
    gap: 9px;
  }

  .stock-market-row .stock-market-spark {
    width: 56px;
  }

  .stock-ai-market-row {
    grid-template-columns: 42px minmax(0, 1fr) 56px minmax(72px, 1fr);
    gap: 9px;
  }

  .stock-ai-market-row .stock-market-spark {
    width: 56px;
  }
}

/* ============================================================
   Claude UI v10 - compact card rhythm and explicit deck affordance
   (2026-07-22). This block intentionally layers on top of v9 so the
   previous iteration remains reproducible in its own directory.
   ============================================================ */

/* Home: lift and enlarge the existing artwork so the lower half of
   each quick action feels composed rather than left vacant. */
.stock-page-home .stock-quick-grid {
  gap: 10px;
}

.stock-page-home .stock-quick-grid .stock-tile {
  --tile-glow: rgba(70, 230, 144, 0.18);
  min-height: 112px;
  padding: 14px;
}

.stock-page-home .stock-quick-grid .stock-tile::before {
  content: "";
  position: absolute;
  right: -18px;
  bottom: -34px;
  z-index: 0;
  width: 128px;
  height: 104px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--tile-glow) 0%, transparent 68%);
  pointer-events: none;
}

.stock-page-home .stock-tile-portfolio {
  --tile-glow: rgba(242, 200, 91, 0.16);
}

.stock-page-home .stock-tile-strategies {
  --tile-glow: rgba(200, 243, 95, 0.2);
}

.stock-page-home .stock-tile-copy,
.stock-page-home .stock-tile-art {
  position: relative;
  z-index: 1;
}

.stock-page-home .stock-tile-art {
  width: 64px;
  height: 44px;
  margin: 2px 0 0;
  transform: translate3d(-2px, -12px, 0) scale(1.08);
  transform-origin: 100% 50%;
}

.stock-page-home .stock-tile-strategies .stock-tile-art {
  width: 70px;
}

/* Markets: the active coverflow card already advances on click; these
   states make that interaction discoverable without adding visual copy. */
.stock-market-leader-track {
  cursor: pointer;
  user-select: none;
}

.stock-market-leader-track:focus-visible {
  outline: 2px solid rgba(200, 243, 95, 0.78);
  outline-offset: 4px;
  border-radius: 18px;
}

.stock-market-leader-track:active .stock-market-leader-card[data-deck-slot="0"] {
  filter: brightness(1.07);
}

/* Assets: the identity, balance and trend panels now share one compact
   208px frame. The overlap remains, but no card wins through bulk alone. */
.stock-page-assets .stock-asset-stack {
  margin-bottom: 12px;
}

.stock-page-assets .stock-asset-identity,
.stock-page-assets .stock-asset-balance,
.stock-page-assets .stock-asset-trend {
  box-sizing: border-box;
  width: 100%;
  height: 208px;
  min-height: 208px;
  border-radius: 18px;
}

.stock-page-assets .stock-asset-identity {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 22px 20px;
}

.stock-asset-identity-copy {
  width: 58%;
  transform: translateY(-4px);
}

.stock-asset-identity-label {
  margin-bottom: 10px;
  font-size: 9.5px;
}

.stock-asset-email-line > strong {
  font-size: clamp(12.5px, 3.45vw, 14.5px);
}

.stock-page-assets .stock-asset-identity .stock-asset-uid {
  width: fit-content;
  margin-top: 10px;
  color: #f2c85b;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-shadow: 0 0 13px rgba(242, 200, 91, 0.26);
}

.stock-asset-identity-art {
  top: 1px;
  right: -2px;
  width: 46%;
  max-width: 168px;
}

.stock-page-assets .stock-asset-balance {
  margin-top: -28px;
  padding: 18px 20px 16px;
}

.stock-page-assets .stock-asset-balance-head > span {
  font-size: 13px;
}

.stock-page-assets .stock-asset-balance-head .stock-asset-privacy {
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  margin: -8px 0 -8px -6px;
}

.stock-page-assets .stock-asset-balance-head .stock-asset-privacy-icon {
  width: 18px;
  height: 18px;
}

.stock-page-assets .stock-asset-balance-row {
  gap: 6px;
  margin-top: 11px;
}

.stock-page-assets .stock-asset-balance h2 {
  font-size: clamp(33px, 9.8vw, 41px);
  letter-spacing: -0.038em;
}

.stock-page-assets .stock-asset-balance .stock-asset-currency {
  font-size: clamp(12px, 3.4vw, 14px);
}

.stock-page-assets .stock-asset-balance > p {
  gap: 6px;
  margin-top: 9px;
}

.stock-page-assets .stock-asset-balance > p > span {
  font-size: 10.5px;
}

.stock-page-assets .stock-asset-balance > p > b {
  font-size: 12px;
}

.stock-page-assets .stock-asset-balance .stock-asset-card-actions {
  right: 18px;
  bottom: 14px;
  left: 18px;
  gap: 7px;
  padding-top: 0;
}

.stock-page-assets .stock-asset-balance .stock-asset-card-actions button {
  min-height: 58px;
  gap: 5px;
  padding: 6px 2px;
  border-radius: 13px;
}

.stock-asset-card-actions .stock-asset-action-icon {
  width: 20px;
  height: 20px;
}

.stock-asset-card-actions button b {
  font-size: 10.5px;
}

.stock-page-assets .stock-asset-trend {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 8px;
  margin-top: 0;
  padding: 16px;
}

.stock-page-assets .stock-asset-trend canvas {
  width: 100%;
  height: 126px;
  margin-top: 0;
}

.stock-page-assets .stock-asset-trend header > span {
  font-size: 10px;
}

.stock-page-assets .stock-asset-trend header > strong {
  font-size: 12px;
}

.stock-page-assets .stock-asset-trend footer {
  font-size: 9.5px;
}

@media (max-width: 350px) {
  .stock-page-assets .stock-asset-identity,
  .stock-page-assets .stock-asset-balance,
  .stock-page-assets .stock-asset-trend {
    height: 204px;
    min-height: 204px;
  }

  .stock-page-assets .stock-asset-identity,
  .stock-page-assets .stock-asset-balance {
    padding-right: 16px;
    padding-left: 16px;
  }

  .stock-page-assets .stock-asset-balance .stock-asset-card-actions {
    right: 14px;
    left: 14px;
    gap: 5px;
  }

  .stock-page-assets .stock-asset-balance h2 {
    font-size: 33px;
  }

  .stock-asset-card-actions button b {
    font-size: 10px;
  }
}

/* ============================================================
   Claude UI v11 - cropped quick actions and tighter asset stack
   (2026-07-22). V10 remains intact in its own iteration folder.
   ============================================================ */

/* Home: remove the unused lower third. Artwork is raised into the
   text band while every tile remains comfortably larger than 44px. */
.stock-page-home .stock-quick-grid {
  gap: 10px;
}

.stock-page-home .stock-quick-grid .stock-tile {
  height: 92px;
  min-height: 92px;
  max-height: 92px;
  justify-content: flex-start;
  padding: 12px 13px;
}

.stock-page-home .stock-tile-copy {
  width: 74%;
}

.stock-page-home .stock-tile-copy b {
  font-size: 14.5px;
  line-height: 1.12;
}

.stock-page-home .stock-tile-copy small {
  margin-top: 4px;
  font-size: 10.25px;
  line-height: 1.25;
}

.stock-page-home .stock-tile-art {
  position: absolute;
  right: 11px;
  bottom: 9px;
  width: 54px;
  height: 38px;
  margin: 0;
  transform: none;
  transform-origin: 50% 50%;
}

.stock-page-home .stock-tile-strategies .stock-tile-art {
  width: 58px;
}

.stock-page-home .stock-quick-grid .stock-tile::before {
  right: -14px;
  bottom: -28px;
  width: 104px;
  height: 82px;
}

/* Assets: the back card carries the brighter emerald plane; the
   front balance card is deliberately deeper so the overlap reads. */
.stock-page-assets .stock-asset-stack {
  margin-bottom: 10px;
}

.stock-page-assets .stock-asset-identity {
  height: 150px;
  min-height: 150px;
  align-items: flex-start;
  padding: 16px 18px;
  border-color: rgba(151, 222, 169, 0.34);
  border-radius: 16px;
  background:
    radial-gradient(150px 108px at 86% 8%, rgba(91, 215, 135, 0.2), transparent 70%),
    linear-gradient(145deg, rgba(24, 82, 49, 0.99), rgba(10, 56, 34, 0.99) 56%, rgba(6, 39, 24, 0.99));
  box-shadow: inset 0 1px 0 rgba(238, 255, 243, 0.12);
}

.stock-page-assets .stock-asset-identity-copy {
  width: 65%;
  transform: none;
}

.stock-page-assets .stock-asset-identity-label {
  margin-bottom: 6px;
  font-size: 9px;
}

.stock-page-assets .stock-asset-email-line > strong {
  font-size: 13px;
}

.stock-page-assets .stock-asset-identity .stock-asset-uid {
  margin-top: 7px;
  font-size: 10.5px;
}

.stock-page-assets .stock-asset-identity-art {
  top: -2px;
  right: 6px;
  width: 36%;
  max-width: 128px;
}

.stock-page-assets .stock-asset-balance {
  height: 176px;
  min-height: 176px;
  margin-top: -38px;
  padding: 14px 16px 12px;
  border-color: rgba(194, 235, 205, 0.28);
  border-radius: 16px;
  background:
    radial-gradient(190px 132px at 100% 0%, rgba(48, 135, 76, 0.14), transparent 72%),
    linear-gradient(155deg, rgba(16, 57, 35, 0.99), rgba(7, 38, 24, 0.995) 62%, rgba(4, 26, 16, 0.998));
  box-shadow:
    inset 0 1px 0 rgba(237, 255, 243, 0.1),
    0 -5px 8px rgba(0, 0, 0, 0.18);
}

.stock-page-assets .stock-asset-balance-head > span {
  font-size: 12.5px;
}

.stock-page-assets .stock-asset-balance-head .stock-asset-privacy {
  margin: -10px 0 -10px -7px;
}

.stock-page-assets .stock-asset-balance-row {
  gap: 5px;
  margin-top: 3px;
}

.stock-page-assets .stock-asset-balance h2 {
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}

.stock-page-assets .stock-asset-balance .stock-asset-currency {
  font-size: 11.5px;
}

.stock-page-assets .stock-asset-balance > p {
  margin-top: 5px;
}

.stock-page-assets .stock-asset-balance > p > span {
  font-size: 10px;
}

.stock-page-assets .stock-asset-balance > p > b {
  font-size: 11px;
}

.stock-page-assets .stock-asset-balance .stock-asset-card-actions {
  right: 14px;
  bottom: 10px;
  left: 14px;
  gap: 8px;
}

.stock-page-assets .stock-asset-balance .stock-asset-card-actions button {
  height: 48px;
  min-height: 48px;
  gap: 3px;
  padding: 4px 2px;
  border-radius: 11px;
}

.stock-page-assets .stock-asset-card-actions .stock-asset-action-icon {
  width: 18px;
  height: 18px;
}

.stock-page-assets .stock-asset-card-actions button b {
  font-size: 9.5px;
}

@media (max-width: 350px) {
  .stock-page-home .stock-quick-grid .stock-tile {
    height: 88px;
    min-height: 88px;
    max-height: 88px;
    padding: 11px;
  }

  .stock-page-home .stock-tile-copy b {
    font-size: 14px;
  }

  .stock-page-home .stock-tile-copy small {
    font-size: 9.75px;
  }

  .stock-page-home .stock-tile-art {
    right: 9px;
    bottom: 8px;
    width: 50px;
    height: 34px;
  }

  .stock-page-home .stock-tile-strategies .stock-tile-art {
    width: 54px;
  }

  .stock-page-assets .stock-asset-identity {
    height: 144px;
    min-height: 144px;
    padding: 14px 15px;
  }

  .stock-page-assets .stock-asset-email-line > strong {
    font-size: 12.5px;
  }

  .stock-page-assets .stock-asset-identity-art {
    right: 4px;
    max-width: 116px;
  }

  .stock-page-assets .stock-asset-balance {
    height: 172px;
    min-height: 172px;
    margin-top: -36px;
    padding-right: 14px;
    padding-left: 14px;
  }

  .stock-page-assets .stock-asset-balance h2 {
    font-size: 31px;
  }

  .stock-page-assets .stock-asset-balance .stock-asset-card-actions {
    right: 12px;
    left: 12px;
    gap: 8px;
  }

  .stock-page-assets .stock-asset-balance .stock-asset-card-actions button {
    height: 46px;
    min-height: 46px;
  }

  .stock-page-assets .stock-asset-card-actions button b {
    font-size: 9px;
  }
}

/* V12 final cascade: restore the requested medium Home typography after
   the preserved V10/V11 compatibility blocks above. */
.stock-page-home .stock-quick-grid {
  gap: 10px;
}

.stock-page-home .stock-quick-grid .stock-tile {
  height: 92px;
  min-height: 92px;
  max-height: 92px;
  padding: 12px;
}

.stock-page-home .stock-tile-copy b {
  font-size: 16px;
  line-height: 1.15;
}

.stock-page-home .stock-tile-copy small {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.3;
}

.stock-page-home .stock-tile-art {
  right: 12px;
  bottom: 8px;
}

@media (max-width: 350px) {
  .stock-page-home .stock-quick-grid .stock-tile {
    height: 92px;
    min-height: 92px;
    max-height: 92px;
    padding: 12px;
  }

  .stock-page-home .stock-tile-copy b { font-size: 16px; }
  .stock-page-home .stock-tile-copy small { font-size: 11px; }
}

/* ============================================================
   Claude UI v13 - measured market alignment and asset command frame
   (2026-07-23). This layer is intentionally scoped over V12 so the
   previous iteration remains reproducible in its own directory.
   ============================================================ */

/* Keep the approved Home typography and 194 x 92 reference cards. */
.stock-page-home .stock-quick-grid {
  gap: 10px;
}

/* Market rows: reserve a deliberate trailing gutter and center the
   sparkline inside the band between identity and price. */
.stock-market-row {
  grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr);
  column-gap: 12px;
  padding: 10px 16px;
}

.stock-ai-market-row {
  grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr);
  column-gap: 12px;
  padding: 10px 16px;
}

.stock-market-leading {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.stock-market-row .stock-market-spark,
.stock-ai-market-row .stock-market-spark {
  width: 72px;
  justify-self: center;
  margin-inline: auto;
}

.stock-market-row .stock-value,
.stock-ai-market-row .stock-ai-market-value {
  width: 100%;
  justify-self: stretch;
  padding-right: 8px;
}

/* The focused leader is itself the primary next-card control. */
.stock-market-leader-card[data-deck-slot="0"] {
  cursor: pointer;
  touch-action: pan-y;
}

.stock-market-leader-card[data-deck-slot="0"]:focus-visible {
  outline: 2px solid rgba(200, 243, 95, 0.82);
  outline-offset: 3px;
}

/* Equal-width spectrum cells. Two identical, content-sized groups run
   edge-to-edge, so the seam never exposes the empty window beneath. */
.stock-spectrum-rail {
  margin: 12px 0 8px;
}

.stock-spectrum-window {
  height: 5px;
  background: rgba(154, 181, 190, 0.1);
}

.stock-spectrum-track {
  width: max-content;
  min-width: 200%;
  animation: stockSpectrumFlowV13 5.6s linear 1 forwards;
}

.stock-spectrum-track i {
  display: flex;
  flex: 0 0 auto;
  gap: 6px;
  width: max-content;
  padding-right: 6px;
  background: none;
  filter: none;
  -webkit-mask: none;
  mask: none;
}

.stock-spectrum-track i span {
  display: block;
  width: clamp(30px, 8vw, 34px);
  height: 5px;
  flex: 0 0 auto;
  border-radius: 999px;
  box-shadow: 0 0 6px currentColor;
}

.stock-spectrum-track .cyan { color: #34ced8; background: #34ced8; }
.stock-spectrum-track .blue { color: #4f86ff; background: #4f86ff; }
.stock-spectrum-track .violet { color: #9a94e9; background: #9a94e9; }
.stock-spectrum-track .gold { color: #d4ad52; background: #d4ad52; }
.stock-spectrum-track .silver { color: #cbd3d6; background: #cbd3d6; }
.stock-spectrum-track .mint { color: #45dfb6; background: #45dfb6; }

.stock-spectrum-meta {
  margin-top: 4px;
}

@keyframes stockSpectrumFlowV13 {
  to { transform: translate3d(-50%, 0, 0); }
}

/* Assets: one quiet graphite-olive command frame contains the approved
   prism summary, a distinct allocation surface, and the action dock. */
.stock-page-assets .stock-asset-overview {
  width: calc(100% - 8px);
  margin: 0 auto 12px;
  padding: 12px 12px 88px;
  overflow: hidden;
  border: 1px solid rgba(211, 228, 205, 0.16);
  border-radius: 20px;
  background:
    radial-gradient(230px 160px at 12% 0%, rgba(215, 235, 182, 0.08), transparent 72%),
    linear-gradient(155deg, rgba(38, 43, 36, 0.84), rgba(17, 24, 20, 0.94) 58%, rgba(9, 15, 12, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.42),
    0 10px 24px rgba(0, 0, 0, 0.18);
}

.stock-page-assets .stock-asset-prism {
  min-height: 184px;
  padding: 16px;
  border-color: rgba(226, 238, 216, 0.23);
  border-radius: 16px;
  background:
    radial-gradient(170px 120px at 90% 4%, rgba(215, 231, 143, 0.16), transparent 70%),
    linear-gradient(118deg, rgba(255, 255, 255, 0.11), transparent 36%),
    linear-gradient(154deg, rgba(55, 60, 48, 0.96), rgba(31, 39, 31, 0.98) 54%, rgba(16, 23, 18, 0.99));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
    0 8px 18px rgba(0, 0, 0, 0.2);
}

.stock-asset-prism-copy {
  width: 100%;
}

.stock-asset-prism-head,
.stock-asset-prism-copy > p {
  width: 74%;
}

.stock-asset-prism-head {
  gap: 4px;
}

.stock-asset-prism-value {
  gap: 4px;
  margin-top: 4px;
}

.stock-asset-prism-copy > p {
  gap: 8px;
  margin: 8px 0 0;
}

.stock-asset-prism-id {
  gap: 8px;
  margin-top: 16px;
  padding-top: 8px;
}

.stock-asset-prism-wallet {
  top: 10px;
  right: 8px;
  width: 88px;
  height: 90px;
  opacity: 0.7;
}

.stock-page-assets .stock-asset-allocation {
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 12px;
  min-height: 120px;
  margin-top: 12px;
  padding: 12px;
  overflow: hidden;
  border: 1px solid rgba(207, 225, 204, 0.16);
  border-radius: 16px;
  background:
    radial-gradient(150px 92px at 8% 0%, rgba(96, 198, 144, 0.08), transparent 76%),
    linear-gradient(145deg, rgba(42, 48, 41, 0.84), rgba(18, 25, 21, 0.94));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    inset 0 -1px 0 rgba(0, 0, 0, 0.36);
}

.stock-asset-donut {
  width: 88px;
  height: 88px;
}

.stock-asset-allocation-list {
  gap: 4px;
}

.stock-asset-allocation-list > div {
  grid-template-columns: 7px 28px 38px auto;
  justify-content: center;
  gap: 4px;
}

.stock-asset-dock-line {
  right: auto;
  bottom: 44px;
  left: 50%;
  width: 280px;
  transform: translateX(-50%);
}

.stock-asset-action-dock {
  right: auto;
  bottom: 4px;
  left: 50%;
  width: 280px;
  grid-template-columns: repeat(4, 64px);
  gap: 8px;
  transform: translateX(-50%);
}

.stock-asset-action-dock button {
  width: 64px;
  min-height: 76px;
  gap: 4px;
}

.stock-asset-action-dock button > span {
  width: 56px;
  height: 56px;
  border-color: rgba(204, 219, 199, 0.27);
  background:
    radial-gradient(circle at 32% 18%, rgba(255, 255, 255, 0.2), transparent 34%),
    linear-gradient(160deg, rgba(58, 67, 56, 0.96), rgba(20, 30, 24, 0.99));
}

.stock-asset-action-dock b {
  font-size: 10.5px;
}

/* Extend the upper card's restrained graphite/olive material down the
   page. Semantic chart and account accents stay intact. */
.stock-page-assets .stock-asset-trend {
  width: calc(100% - 8px);
  margin-right: auto;
  margin-left: auto;
  border-color: rgba(211, 226, 205, 0.2);
  background:
    radial-gradient(210px 120px at 10% 0%, rgba(215, 232, 181, 0.09), transparent 74%),
    linear-gradient(150deg, rgba(48, 54, 45, 0.96), rgba(25, 33, 27, 0.98) 58%, rgba(13, 20, 16, 0.99));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
    0 8px 18px rgba(0, 0, 0, 0.18);
}

.stock-page-assets .stock-asset-position-groups {
  width: calc(100% - 8px);
  margin-right: auto;
  margin-left: auto;
  gap: 12px;
}

/* Integrated mobile interaction floor. These controls are dense, but their
   vertical hit areas remain large enough for one-handed use. */
.stock-page-trade .stock-kbar button,
.stock-page-trade .stock-chart-modes button,
.stock-page-trade .stock-chart-actions button,
.stock-page-trade .stock-chart-indicators button,
.stock-page-trade .stock-leverage button,
.stock-page-trade .stock-mini-tabs button,
.stock-page-trade .stock-order input,
.stock-page-trade .stock-order-actions button,
.stock-page-trade .stock-trade-activity-tabs button,
.stock-page-invest .stock-offering button,
.stock-page-invest .stock-best-strategy > button {
  min-height: 44px;
}

.stock-page-trade button:disabled,
.stock-page-trade input:disabled,
.stock-page-invest button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.stock-page-trade [data-order-preview-status][data-state="loading"] {
  color: var(--stock-lime);
}

.stock-page-trade [data-order-preview-status][data-state="success"] {
  color: var(--stock-mint);
}

.stock-page-trade [data-order-preview-status][data-state="error"] {
  color: var(--stock-red);
}

.stock-page-assets .stock-asset-group-head {
  border-color: color-mix(in srgb, var(--asset-accent, #9ff3c0) 18%, rgba(214, 226, 208, 0.1));
  background:
    linear-gradient(150deg, rgba(45, 51, 43, 0.94), rgba(20, 28, 23, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    inset 0 -1px 0 rgba(0, 0, 0, 0.36);
}

.stock-page-assets .stock-asset-position-row {
  background:
    linear-gradient(150deg, rgba(45, 51, 43, 0.94), rgba(20, 28, 23, 0.98));
}

@media (max-width: 379px) {
  .stock-market-row {
    grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr);
    column-gap: 8px;
    padding: 10px 12px;
  }

  .stock-ai-market-row {
    grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr);
    column-gap: 8px;
    padding: 10px 12px;
  }

  .stock-market-leading {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 8px;
  }

  .stock-market-row .stock-market-spark,
  .stock-ai-market-row .stock-market-spark {
    width: 56px;
  }

  .stock-page-assets .stock-asset-overview,
  .stock-page-assets .stock-asset-trend,
  .stock-page-assets .stock-asset-position-groups {
    width: calc(100% - 4px);
  }

  .stock-page-assets .stock-asset-overview {
    padding: 8px 8px 84px;
  }

  .stock-asset-prism-value h2 {
    font-size: 29px;
  }

  .stock-asset-prism-wallet {
    width: 78px;
    height: 80px;
  }

  .stock-page-assets .stock-asset-allocation {
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 8px;
    padding: 8px;
  }

  .stock-asset-donut {
    width: 80px;
    height: 80px;
  }

  .stock-asset-action-dock button > span {
    width: 54px;
    height: 54px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stock-spectrum-track {
    animation: none !important;
    transform: none !important;
  }
}

/* ============================================================
   Claude UI v14 - content-slot market alignment, balanced chart
   insets, slower spectrum cadence, and asset frame-line actions.
   (2026-07-23). V13 remains untouched in its own directory.
   ============================================================ */

/* The sparkline belongs to the free slot between the identity block
   and price block. A wider leading fraction moves that slot right of
   the card midpoint without relying on a viewport-specific offset. */
.stock-market-row,
.stock-ai-market-row {
  grid-template-columns: minmax(0, 1.38fr) 72px minmax(88px, 1fr);
  column-gap: 12px;
}

.stock-market-row .stock-value,
.stock-ai-market-row .stock-ai-market-value {
  padding-right: 12px;
}

/* Keep both duplicate colour groups in view while making the movement
   calm enough to read as ambient market telemetry. */
.stock-spectrum-track {
  animation-duration: 9.2s;
}

/* Fixed +40 / -30 strategy chart with visually even outer breathing
   room. Internal y-axis labels are accounted for separately. */
.stock-page-invest .stock-invest-hero {
  width: calc(100% - 8px);
  margin-right: auto;
  margin-left: auto;
  padding: 20px;
}

.stock-page-invest .stock-ai-coordinate-chart {
  gap: 7px;
}

.stock-page-invest .stock-ai-coordinate-head {
  padding-left: 34px;
}

.stock-page-invest .stock-ai-coordinate-body {
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 6px;
}

.stock-page-invest .stock-ai-coordinate-plot {
  margin-bottom: 14px;
}

.stock-page-invest .stock-ai-coordinate-columns {
  padding: 0 10px 0 6px;
}

/* The frame ends through the centre of the circular actions. Labels
   remain below the frame, matching the requested dock construction. */
.stock-page-assets .stock-asset-overview {
  margin-bottom: 72px;
  padding: 12px 12px 28px;
  overflow: visible;
}

.stock-page-assets .stock-asset-prism {
  min-height: 184px;
  padding: 14px 16px 16px;
}

.stock-asset-prism-head {
  min-height: 36px;
  gap: 4px;
}

.stock-asset-prism-head > span {
  font-size: 15px;
}

.stock-asset-prism-head .stock-asset-privacy {
  margin-top: -4px;
}

.stock-asset-prism-value {
  gap: 9px;
  margin-top: 2px;
}

.stock-asset-prism-value h2 {
  font-size: clamp(27px, 7.2vw, 29px);
}

.stock-asset-prism-value > strong {
  font-size: 13px;
}

.stock-asset-prism-id {
  font-size: 10.5px;
  font-weight: 760;
}

.stock-asset-prism-id span:last-child {
  font-size: 10.5px;
  font-weight: 850;
}

.stock-asset-prism-wallet {
  top: 10px;
  right: 16px;
  width: 96px;
  height: 98px;
}

.stock-asset-dock-line {
  display: none;
}

.stock-asset-action-dock {
  bottom: -48px;
}

@media (max-width: 379px) {
  .stock-market-row,
  .stock-ai-market-row {
    grid-template-columns: minmax(0, 1.38fr) 56px minmax(78px, 1fr);
    column-gap: 8px;
  }

  .stock-market-row .stock-value,
  .stock-ai-market-row .stock-ai-market-value {
    padding-right: 8px;
  }

  .stock-page-invest .stock-invest-hero {
    width: calc(100% - 4px);
    padding: 18px;
  }

  .stock-page-assets .stock-asset-overview {
    padding: 8px 8px 28px;
  }

  .stock-asset-prism-wallet {
    right: 12px;
    width: 90px;
    height: 92px;
  }
}

/* ============================================================
   Claude UI v15 - unified semantic account surfaces, restored
   market breadth, and calibrated asset/invest spacing.
   (2026-07-23). V14 remains untouched in its own directory.
   ============================================================ */

/* Home: preserve the approved type scale and 194 x 92 card geometry.
   Only the artwork grows and rises into the unused lower-right space. */
.stock-page-home .stock-tile-art {
  right: 14px;
  bottom: 13px;
  width: 61px;
  height: 43px;
}

.stock-page-home .stock-tile-strategies .stock-tile-art {
  width: 65px;
}

/* Invest: the fixed +40 / -30 axis is unchanged. Raising the heading
   creates a stable top safety lane for the +36.9% value label. */
.stock-page-invest .stock-ai-coordinate-head {
  transform: translateY(-6px);
}

.stock-page-invest .stock-ai-coordinate-chart {
  gap: 9px;
}

/* Assets: keep one neutral graphite/olive material for all account rows.
   The account colour now communicates through its border, dot, avatar and
   values instead of a rectangular coloured wash behind the rounded row. */
.stock-page-assets .stock-asset-group-body > div {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.stock-page-assets .stock-asset-group-head,
.stock-page-assets .stock-asset-position-row {
  border-color: color-mix(in srgb, var(--asset-accent, #9ff3c0) 24%, rgba(214, 226, 208, 0.09));
  background:
    linear-gradient(150deg, rgba(45, 51, 43, 0.95), rgba(20, 28, 23, 0.985));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    inset 0 -1px 0 rgba(0, 0, 0, 0.36);
}

.stock-page-assets .stock-asset-overview {
  margin-bottom: 82px;
}

.stock-asset-prism-copy > p {
  margin-top: 12px;
}

.stock-asset-prism-copy > p span {
  font-size: 11px;
}

.stock-asset-prism-id {
  margin-top: 22px;
  padding-top: 10px;
  font-size: 12px;
}

.stock-asset-prism-id span:last-child {
  font-size: 12px;
}

/* A separate rounded backing plate gives the lower chart the same inset
   logic, corner family and material hierarchy as the balance prism. */
.stock-page-assets .stock-asset-trend-base {
  box-sizing: border-box;
  width: calc(100% - 8px);
  margin: 0 auto;
  padding: 12px;
  border: 1px solid rgba(211, 228, 205, 0.16);
  border-radius: 20px;
  background:
    radial-gradient(230px 160px at 12% 0%, rgba(215, 235, 182, 0.08), transparent 72%),
    linear-gradient(155deg, rgba(38, 43, 36, 0.84), rgba(17, 24, 20, 0.94) 58%, rgba(9, 15, 12, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.42),
    0 10px 24px rgba(0, 0, 0, 0.18);
}

.stock-page-assets .stock-asset-trend-base .stock-asset-trend {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  border-radius: 16px;
}

@media (max-width: 379px) {
  .stock-page-home .stock-tile-art {
    right: 11px;
    bottom: 12px;
    width: 56px;
    height: 39px;
  }

  .stock-page-home .stock-tile-strategies .stock-tile-art {
    width: 60px;
  }

  .stock-page-assets .stock-asset-trend-base {
    width: calc(100% - 4px);
    padding: 8px;
  }

  .stock-asset-prism-id,
  .stock-asset-prism-id span:last-child {
    font-size: 11.5px;
  }
}

/* ============================================================
   Claude UI v16 - the action dock mechanically joins the upper
   overview frame and lower trend frame at one-third crossings.
   (2026-07-23). V15 remains untouched in its own directory.
   ============================================================ */

.stock-page-assets {
  --asset-action-circle: 56px;
  --asset-action-block: 76px;
  --asset-frame-cross: calc(var(--asset-action-circle) / 3);
  --asset-trend-inner-anchor: 94px;
}

/* The upper frame keeps its V15 box geometry. Only its following
   gap and local stacking role change. */
.stock-page-assets .stock-asset-overview {
  z-index: 2;
  margin-bottom: var(--asset-frame-cross);
}

/* Dock top = upper edge - one third of the circle. The existing
   76px action block and 56px circle remain unchanged. */
.stock-page-assets .stock-asset-action-dock {
  bottom: calc(var(--asset-frame-cross) - var(--asset-action-block));
}

/* The lower frame begins one third below the upper frame edge.
   Its added top reserve exactly cancels that upward movement, so
   the approved inner trend card keeps the V15 absolute anchor. */
.stock-page-assets .stock-asset-trend-base {
  position: relative;
  z-index: 1;
  padding: calc(var(--asset-trend-inner-anchor) - var(--asset-frame-cross)) 12px 12px;
}

@media (max-width: 379px) {
  .stock-page-assets {
    --asset-trend-inner-anchor: 90px;
  }

  .stock-page-assets .stock-asset-action-dock button > span {
    width: var(--asset-action-circle);
    height: var(--asset-action-circle);
  }

  .stock-page-assets .stock-asset-trend-base {
    padding-right: 8px;
    padding-bottom: 8px;
    padding-left: 8px;
  }
}

/* ============================================================
   Integrated mobile trade header.
   Keep pair selection, live quote and change in three stable
   columns so tabular prices never truncate against the edge.
   ============================================================ */

.stock-page-trade .stock-pair {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) 88px;
  align-items: end;
  gap: 8px;
  min-height: 104px;
  padding: 8px 8px 10px;
}

.stock-page-trade .stock-pair-selector {
  position: relative;
  display: grid;
  align-self: end;
  gap: 5px;
  min-width: 0;
  margin: 0 0 4px;
}

.stock-page-trade .stock-pair-selector span {
  /* Matches the standard WEB3EX eyebrow (see .stock-page-head span): centred, lime, 10px/900. */
  justify-content: center;
  padding: 0 9px;
  color: var(--stock-lime);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.stock-page-trade .stock-pair-selector::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: 16px;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--stock-lime);
  border-bottom: 1.5px solid var(--stock-lime);
  transform: rotate(45deg) translateY(-2px);
  pointer-events: none;
}

.stock-page-trade .stock-pair-selector select {
  width: 88px;
  min-height: 44px;
  padding: 0 22px 0 8px;
  overflow: hidden;
  border: 1px solid rgba(200, 243, 95, .28);
  border-radius: 13px;
  appearance: none;
  /* The popup list is painted by the OS, not by page CSS. Chromium only renders it dark when the
     control has a real used background-COLOR, so the shorthand is split; color-scheme covers the
     popup scrollbar and platforms (iOS/Safari) that ignore option styling entirely. */
  color-scheme: dark;
  color: var(--stock-ink);
  background-color: #0c1811;
  background-image:
    linear-gradient(145deg, rgba(33, 59, 40, .62), rgba(6, 16, 10, .92));
  font-family: var(--stock-font-product);
  font-size: 9px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-page-trade .stock-pair-selector select option,
.stock-page-trade .stock-pair-selector select optgroup {
  background-color: #0c1811;
  color: var(--stock-ink);
  font-size: 13px;
  font-weight: 700;
}

.stock-page-trade .stock-pair-selector select option:checked,
.stock-page-trade .stock-pair-selector select option[selected] {
  background-color: #16301f;
  color: var(--stock-lime);
}

.stock-page-trade .stock-pair-quote {
  display: grid;
  align-content: end;
  min-width: 0;
  padding: 0;
}

.stock-page-trade .stock-pair-quote h2 {
  margin: 0;
  overflow: hidden;
  color: var(--stock-ink);
  font-size: clamp(15px, 4.2vw, 18px);
  font-weight: 700;
  letter-spacing: -.025em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-page-trade .stock-pair-quote strong {
  display: block;
  max-width: 100%;
  margin: 5px 0 0;
  overflow: hidden;
  color: var(--stock-ink);
  font-size: clamp(28px, 8.2vw, 36px);
  font-weight: 670;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.035em;
  line-height: 1;
  text-overflow: clip;
  white-space: nowrap;
}

.stock-page-trade .stock-market-source {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  color: #7f8c83;
  font-size: 10px;
  font-weight: 650;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-page-trade .stock-pair > em {
  display: inline-flex;
  width: 88px;
  min-width: 0;
  min-height: 44px;
  align-self: end;
  align-items: center;
  justify-content: center;
  margin: 0 0 4px;
  padding: 0 10px;
  border-color: rgba(70, 230, 144, .3);
  border-radius: 999px;
  background: rgba(20, 92, 59, .2);
  font-size: 14px;
  font-weight: 720;
  white-space: nowrap;
}

@media (max-width: 379px) {
  .stock-page-trade .stock-pair {
    grid-template-columns: 78px minmax(0, 1fr) 84px;
    gap: 6px;
    padding-right: 4px;
    padding-left: 4px;
  }

  .stock-page-trade .stock-pair-selector select {
    width: 78px;
    padding-right: 22px;
    padding-left: 8px;
    font-size: 9px;
  }

  .stock-page-trade .stock-pair > em {
    width: 84px;
    padding: 0 7px;
    font-size: 13px;
  }
}

/* Account activity filters stay readable on the mobile canvas.
   Five choices form a deliberate 3 + 2 grid instead of clipping
   into a single horizontal rail. */
.stock-page-activity .stock-activity-chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  overflow: visible;
  padding: 0;
}

.stock-page-activity .stock-activity-chips button {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0 8px;
  font-size: 11px;
  text-align: center;
}

/* ---------------------------------------------------------------------------
   Watchlist star (outline = not starred, filled = starred).
   Positioned absolutely inside the row so no existing grid track has to change;
   .stock-market-row is already position:relative with overflow:hidden.
   --------------------------------------------------------------------------- */
.stock-favourite {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--stock-dim);
  cursor: pointer;
}

.stock-favourite svg {
  width: 17px;
  height: 17px;
}

.stock-favourite.on {
  color: var(--stock-lime);
}

.stock-favourite:focus-visible {
  outline: 2px solid rgba(200, 243, 95, 0.82);
  outline-offset: 2px;
}

/* Widen the tap target past the 30px box without disturbing the row grid. */
.stock-favourite::before {
  content: "";
  position: absolute;
  inset: -7px;
}

.stock-market-row .stock-favourite {
  position: absolute;
  top: 50%;
  right: 4px;
  z-index: 1;
  transform: translateY(-50%);
}

/* The star occupies the old right gutter, so the price column steps left. */
.stock-market-row .stock-value {
  padding-right: 34px;
}

/* Shared raised-glass material for the exchange mark and every front-end market
   or strategy logo. Uploaded artwork stays untouched underneath this layer. */
.stock-brand > span,
.stock-icon,
.stock-ai-market-icon {
  isolation: isolate;
  overflow: hidden;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.24),
    inset -2px -3px 6px rgba(0, 0, 0, 0.46),
    0 1px 0 rgba(200, 243, 95, 0.12),
    0 8px 18px rgba(0, 0, 0, 0.24);
}

/* The tile and its letters are separate layers. This keeps the two-letter mark
   mathematically centred instead of letting font metrics pull it to one side. */
.stock-brand > span > .web3ex-ex-glyph {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: inherit;
  font: inherit;
  font-style: normal;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: 1;
  text-align: center;
}

.stock-brand > span::before,
.stock-icon::before,
.stock-ai-market-icon::before {
  position: absolute;
  top: 7%;
  left: 13%;
  z-index: 2;
  width: 68%;
  height: 34%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.04) 62%, transparent);
  content: "";
  opacity: 0.72;
  pointer-events: none;
  transform: rotate(-7deg);
}

.stock-brand > span::after,
.stock-icon::after,
.stock-ai-market-icon::after {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.14), transparent 34%),
    radial-gradient(ellipse at 78% 105%, rgba(0, 0, 0, 0.5), transparent 58%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 -2px 3px rgba(0, 0, 0, 0.34);
  content: "";
  pointer-events: none;
}

.stock-icon img,
.stock-ai-market-icon img {
  z-index: 1;
}

/* Home and Trade use the exact same EX material; only the Trade size variant is
   larger so it can anchor the market summary. */
.stock-page-home .stock-brand > span,
.stock-page-trade .stock-trade-brand > span {
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.24),
    inset -2px -3px 6px rgba(0, 0, 0, 0.46),
    0 1px 0 rgba(200, 243, 95, 0.12),
    0 8px 18px rgba(0, 0, 0, 0.24);
}

/* Trade header: the Home EX mark anchors the left column. The market selector
   and watchlist action share one 44px centre line; price and change form the
   second line without returning the removed Trading title. */
.stock-page-trade .stock-pair {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: start;
  column-gap: 24px;
  min-height: 0;
  margin-bottom: 4px;
  padding: 22px 40px 0;
}

.stock-page-trade .stock-trade-brand {
  align-self: start;
  gap: 0;
  margin: -5px 0 0;
}

.stock-page-trade .stock-trade-brand > span {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  font-size: 21px;
}

.stock-page-trade .stock-pair-side {
  display: grid;
  align-content: center;
  justify-items: end;
  gap: 9px;
  min-width: 0;
}

.stock-page-trade .stock-pair-picker {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.stock-page-trade .stock-pair-selector {
  align-self: center;
  margin-bottom: 0;
}

.stock-page-trade .stock-pair-quote {
  display: flex;
  align-self: center;
  align-items: center;
  gap: 9px;
  min-width: 0;
  transform: translateX(-18px);
}

.stock-page-trade .stock-pair-quote strong {
  flex: 0 1 auto;
  min-width: 0;
  align-self: center;
  margin: 0;
  overflow: visible;
  font-size: 31px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-overflow: clip;
  white-space: nowrap;
}

.stock-page-trade .stock-pair-quote strong[data-price-scale="md"] {
  font-size: 27px;
}

.stock-page-trade .stock-pair-quote strong[data-price-scale="sm"] {
  font-size: 22px;
}

@media (max-width: 379px) {
  .stock-page-trade .stock-pair {
    grid-template-columns: 54px minmax(0, 1fr);
    column-gap: 18px;
    padding-right: 28px;
    padding-left: 28px;
  }

  .stock-page-trade .stock-pair-quote strong {
    font-size: 28px;
  }

  .stock-page-trade .stock-pair-quote strong[data-price-scale="md"] {
    font-size: 24px;
  }

  .stock-page-trade .stock-pair-quote strong[data-price-scale="sm"] {
    font-size: 19px;
  }

  .stock-page-trade .stock-security-tabs {
    margin-right: 28px;
    margin-left: 28px;
  }
}

.stock-page-trade .stock-pair-quote em {
  flex: 0 0 auto;
  min-width: 0;
  min-height: 0;
  align-self: center;
  justify-content: center;
  width: auto;
  margin: 0;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 850;
  font-style: normal;
  line-height: 1.15;
  transform: translate(18px, 6px);
}

/* Slow chart responses must never let the chart surface paint over the quote.
   The pair owns the upper layer; every chart child is clipped to the chart box. */
.stock-page-trade .stock-security-panel[data-security-panel="chart"] {
  position: relative;
  z-index: 0;
  min-width: 0;
  overflow: hidden;
}

.stock-page-trade .stock-chart-stage,
.stock-page-trade .stock-chart-shell {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.stock-page-trade .stock-chart-shell {
  contain: paint;
}

.stock-page-trade .stock-pair-picker .stock-favourite {
  position: relative;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
}

.stock-page-trade .stock-pair-picker .stock-favourite svg {
  width: 28px;
  height: 28px;
}

.stock-page-trade .stock-pair-selector select,
.stock-page-trade .stock-pair-selector select option {
  font-size: 14px;
  font-weight: 800;
}

.stock-page-trade .stock-pair-selector select {
  width: 116px;
  min-height: 44px;
  padding: 0 24px 0 13px;
}

.stock-page-trade .stock-pair-selector::after {
  top: 50%;
  bottom: auto;
  transform: translateY(-65%) rotate(45deg);
}

.stock-page-trade .stock-security-tabs {
  margin: 18px 40px 12px;
}

/* Search filter support: the rows' author-level display:grid beats the UA
   [hidden] rule, so the hide must be restated explicitly — same pattern as the
   other [hidden] overrides in this file. Without this the Markets search box
   filtered the DOM but nothing visibly disappeared. */
.stock-market-row[hidden],
.stock-ai-market-row[hidden] {
  display: none;
}

/* Share count reads as data, not as prose — mint chip separates it from the
   grey entry/mark line beneath. */
.stock-asset-position-copy b .qty {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 2px 8px;
  border: 1px solid rgba(70, 230, 144, 0.32);
  border-radius: 999px;
  background: rgba(70, 230, 144, 0.13);
  color: var(--stock-mint);
  font-size: 10.5px;
  font-style: normal;
  font-weight: 850;
  letter-spacing: 0.01em;
  line-height: 1.3;
  vertical-align: middle;
  white-space: nowrap;
}

/* Strategy rows get a dedicated action column so a long, wrapping strategy name
   never pushes the button onto its own line. Everything centres vertically. */
.stock-asset-position-row.stock-asset-strategy-row {
  grid-template-columns: 42px minmax(0, 1fr) 76px minmax(96px, 112px);
  column-gap: 12px;
  align-items: center;
}

/* The name is allowed to wrap; the progress and allocated lines stack beneath. */
.stock-asset-strategy-row .stock-asset-position-copy b {
  white-space: normal;
  line-height: 1.25;
}

.stock-asset-strategy-row .stock-asset-position-copy small {
  display: block;
  line-height: 1.35;
}

/* "Allocated $100,000.00" is one unit — without nowrap a long figure broke onto
   a fifth line, leaving the label stranded. */
.stock-asset-position-copy small .alloc {
  display: block;
  white-space: nowrap;
}

/* Masked principal keeps the inline flow of its line. */
.stock-asset-position-copy small [data-private-value] {
  font-style: normal;
}

.stock-page-assets.is-asset-hidden .stock-asset-position-copy small [data-private-value] {
  display: inline-block;
  min-width: 62px;
}

.stock-page-assets.is-asset-hidden .stock-asset-position-copy small [data-private-value]::after {
  font-size: 11px;
  letter-spacing: 0.06em;
}

/* Solid gradient pill matching the app's primary CTA (e.g. "AI Stock Strategies"),
   recoloured to the strategy accent so it belongs to this row. */
/* Selector is scoped through .stock-page so it outranks `.stock-page button
   { font: inherit }` — that shorthand was resetting the size back to 14px. */
.stock-page .stock-asset-redeem {
  position: relative;
  left: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Sits in the middle slot: copy | REDEEM | figures. */
  align-self: center;
  width: 72px;
  min-height: 34px;
  margin: 0;
  padding: 0 10px;
  border: 1px solid rgba(232, 216, 255, 0.6);
  border-radius: 999px;
  /* Wide lightness spread so the gradient actually reads — the previous pair of
     mid-purples was too close in value to show. */
  background: linear-gradient(130deg, #e6d4ff 0%, #b98cff 45%, #7c4dff 100%);
  color: #17082e;
  font-family: var(--stock-font-product);
  /* Small caps read as a secondary action next to the 15px figures. */
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 8px 20px rgba(124, 77, 255, 0.28);
}

.stock-page .stock-asset-redeem:active:not(:disabled) {
  transform: translateY(1px) scale(0.97);
}

.stock-page .stock-asset-redeem:focus-visible {
  outline: 2px solid rgba(232, 216, 255, 0.82);
  outline-offset: 2px;
}

@media (max-width: 360px) {
  .stock-security-dialog {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
  }

  .stock-security-dialog-card > header {
    padding: 16px 14px 13px;
  }

  .stock-security-dialog-body {
    padding: 12px;
  }

  .stock-asset-position-row.stock-asset-strategy-row {
    grid-template-columns: 38px minmax(0, 1fr) 66px minmax(84px, 96px);
    column-gap: 8px;
  }

  .stock-page .stock-asset-redeem {
    left: 8px;
    width: 64px;
    padding-inline: 7px;
    font-size: 9px;
  }
}

.stock-page .stock-asset-redeem.is-state {
  border-color: rgba(214, 224, 210, 0.2);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(224, 236, 222, 0.62);
  box-shadow: none;
  cursor: default;
}

/* ---------------------------------------------------------------------------
   Wallet chip parity across pages.
   Home renders the chip inside .stock-top; Markets/Trade/Invest/Assets render it
   inside .stock-page-head, where generic `.stock-page-head button` and
   `.stock-page-head span` rules were restyling it into a stacked uppercase block.
   These rules re-assert the Home appearance for the page-head ancestry.
   --------------------------------------------------------------------------- */
.stock-page-head .stock-wallet-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: auto;
  min-width: 92px;
  height: auto;
  min-height: 40px;
  padding: 0 13px;
  border: 1px solid rgba(205, 242, 210, 0.18);
  border-radius: 999px;
  background: rgba(8, 20, 13, 0.72);
  color: rgba(234, 245, 231, 0.76);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0;
  box-shadow: none;
}

.stock-page-head .stock-wallet-status::before {
  content: none;
}

/* The status dot is a flex item with the default flex-shrink:1, so once the
   nowrap address filled the chip it was being squeezed to width:0 and vanished.
   Pinning the basis keeps it identical on every page. */
.stock-wallet-status i {
  flex: 0 0 7px;
}

.stock-page-head .stock-wallet-status span {
  display: inline;
  width: auto;
  max-width: none;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0;
  line-height: 1;
  text-transform: none;
  /* The shortened address is one atom — it must never break across two lines. */
  white-space: nowrap;
}

/* Chip sits level with the page title, not pinned to the top of the header block.
   The offset clears the WEB3EX eyebrow so the chip centres on the <h1> letterforms.
   flex-shrink:0 is what makes Markets / Invest / Assets identical: without it the
   container was squeezed by a different amount on each page (longer titles stole
   more room), so the same chip rendered 99px / 109px / 123px wide. */
.stock-page-head-actions {
  align-self: flex-start;
  flex: 0 0 auto;
  margin-top: 30px;
}

.stock-page-head .stock-wallet-status {
  flex: 0 0 auto;
}

/* Title block yields space to the fixed-width chip rather than pushing it out of
   the header; it still keeps its own content width via the flex base size. */
.stock-page-head > div:first-child {
  min-width: 0;
  flex: 1 1 auto;
}

/* ---------------------------------------------------------------------------
   Allocation card rhythm (donut / code / share / amount)
   Consolidated here because the layout was previously split across four
   breakpoint layers that fought each other. Kept last so it is the single
   source of truth for this card's spacing.

   Proportions: the donut keeps a real margin off the card edge, and the
   amount column ends flush with the same inset on the right, so the block
   reads as one balanced unit instead of two clumps with dead space between.
   --------------------------------------------------------------------------- */
.stock-page-assets .stock-asset-allocation {
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 16px;
  padding: 14px 16px 13px;
}

.stock-asset-donut {
  justify-self: center;
  width: 88px;
  height: 88px;
}

.stock-asset-donut b {
  font-size: 19px;
}

.stock-asset-donut small {
  /* Must clear the 64px inner hole; 0.11em tracking used to push it past the ring. */
  margin-top: 3px;
  font-size: 6.8px;
  letter-spacing: 0.055em;
}

.stock-asset-allocation-list {
  gap: 7px;
}

/* Columns are sized to the widest real string (measured: CTR 33.8px, 22.8% 48.8px,
   $12,845.20 83.9px) so there is no phantom space inflating the visual gaps.
   Gaps are NOT uniform — they step 1 : 1.2 : 2.4 so the eye groups them correctly:
   swatch+name read as one unit, and the share sits ~33% of the way between the
   name and the amount rather than floating midway. */
.stock-asset-allocation-list > div {
  grid-template-columns: 8px 34px 49px minmax(0, 1fr);
  justify-content: normal;
  column-gap: 0;
}

.stock-asset-allocation-list b {
  margin-left: 5px;
}

.stock-asset-allocation-list span {
  margin-left: 6px;
}

.stock-asset-allocation-list strong {
  margin-left: 12px;
}

/* Column alignment contract:
   - code  (STK/CTR/AI/IPO) flush LEFT, anchored to its colour swatch
   - share (58.3%)          flush RIGHT, so every % sign sits on one axis
   - amount ($32,840.18)    flush RIGHT, so the final digits line up
   tabular-nums (set on the row) keeps digit widths equal so the decimals stack. */
.stock-asset-allocation-list b {
  text-align: left;
}

.stock-asset-allocation-list span,
.stock-asset-allocation-list strong {
  text-align: right;
}

@media (max-width: 379px) {
  .stock-page-assets .stock-asset-allocation {
    grid-template-columns: 90px minmax(0, 1fr);
    gap: 12px;
    padding: 13px 10px 12px;
  }

  .stock-asset-donut {
    width: 82px;
    height: 82px;
  }

  .stock-asset-allocation-list > div {
    grid-template-columns: 8px 34px 49px minmax(0, 1fr);
  }

  .stock-asset-allocation-list b { margin-left: 4px; }
  .stock-asset-allocation-list span { margin-left: 5px; }
  .stock-asset-allocation-list strong { margin-left: 10px; }
}

@media (min-width: 420px) {
  .stock-page-assets .stock-asset-allocation {
    grid-template-columns: 114px minmax(0, 1fr);
    gap: 20px;
    padding: 17px 19px 16px;
  }

  .stock-asset-donut {
    width: 104px;
    height: 104px;
  }

  .stock-asset-donut small {
    font-size: 7.4px;
  }

  .stock-asset-allocation-list {
    gap: 9px;
  }

  .stock-asset-allocation-list > div {
    /* Measured text widths at this breakpoint: code 20.2px, share 28.8px.
       The old 38px / 49px columns were roughly double that, and because both
       cells are right-aligned the surplus became invisible padding that pushed
       the share far from the code. Columns now match the real strings. */
    /* Column = text width + its own margin-left, since the margin is drawn inside
       the track: code 20.2 + 6 = 27, share 28.8 + 8 = 37 (rounded up by 1). */
    grid-template-columns: 9px 28px 38px minmax(0, 1fr);
  }

  .stock-asset-allocation-list b { margin-left: 6px; }
  .stock-asset-allocation-list span { margin-left: 8px; }
  .stock-asset-allocation-list strong { margin-left: 16px; }
}

/* ============================================================
   Markets / Home rows after the watchlist star landed (2026-08-01)
   ============================================================ */

/* Balance the sparkline between identity and price while reserving a hard price
   lane for BTC-scale figures plus the watchlist star. The price is never
   ellipsized; narrow screens yield space from the name column first. */
.stock-market-row,
.stock-ai-market-row {
  grid-template-columns: minmax(0, 1.18fr) 72px minmax(122px, 1fr);
}

.stock-market-row .stock-value {
  min-width: 122px;
}

.stock-market-row .stock-value b {
  overflow: visible;
  text-overflow: clip;
}

/* A market row may legitimately have no sub-label (the USDC settlement row).
   Without this the empty <small> still claims a line and the ticker sits high
   instead of centred against the icon. */
.stock-name small:empty,
.stock-value small:empty {
  display: none;
}

/* ============================================================
   Withdrawal whitelist (2026-08-03)
   ============================================================ */

/* Switch row reads as a statement plus its control, like the Security rows. */
.stock-whitelist-switch {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}

.stock-whitelist-switch-copy b {
  display: block;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
}

.stock-whitelist-switch-copy small {
  display: block;
  margin-top: 4px;
  color: var(--stock-dim);
  font-size: 11.5px;
  line-height: 1.45;
}

.stock-whitelist-list {
  display: grid;
  gap: 8px;
}

.stock-whitelist-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--stock-line);
  border-radius: 16px;
  background: var(--stock-card);
}

.stock-whitelist-copy {
  min-width: 0;
}

.stock-whitelist-copy b {
  display: block;
  font-size: 13px;
  font-weight: 800;
}

/* The address is the identity here, so it stays monospaced and never wraps
   into an unreadable ladder — it truncates instead. */
.stock-whitelist-copy code {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: var(--stock-dim);
  font-family: var(--stock-mono, "SFMono-Regular", Consolas, monospace);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-whitelist-copy small {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  font-weight: 700;
}

.stock-whitelist-copy small.is-live {
  color: var(--stock-mint);
}

.stock-whitelist-copy small.is-pending {
  color: var(--stock-gold, #f0c24c);
}

.stock-whitelist-remove {
  padding: 7px 12px;
  border: 1px solid rgba(255, 99, 117, 0.34);
  border-radius: 999px;
  background: rgba(255, 99, 117, 0.12);
  color: #ff8a97;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* The whitelist picker replaces a text input, so it has to match that field's
   metrics exactly or the form visibly reflows when the switch is turned on. */
.stock-withdraw-form select[data-withdraw-whitelist-select] {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--stock-ink);
  font: inherit;
}

/* Same button standard as the .stock-chips tabs: 38px tall, 12px/850 text,
   pill radius. It used to be a 52px slab in its own colours, which made the one
   control that repeats on every market group the loudest thing on the page. */
.stock-market-more {
  width: 100%;
  min-height: 38px;
  margin-top: 10px;
  border: 1px solid var(--stock-stroke);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--stock-muted);
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.stock-market-empty {
  padding: 28px 18px;
  border: 1px dashed rgba(177, 255, 84, .18);
  border-radius: 18px;
  color: rgba(223, 247, 223, .54);
  text-align: center;
}

/* The support bubble comes from the separate customer-service widget
   (/customer/widget.js), which exposes no label option. The button keeps its
   aria-label, so hiding the caption costs nothing for assistive tech. Its 136px
   width is authored around that caption, so the mark has to be collapsed to a
   circle too or the pill keeps its empty half.
   The `body` prefix is load-bearing: the widget injects its own #ls-chat-btn
   rule at runtime, so it lands after this file and wins on source order at
   equal specificity. */
body #ls-chat-btn .ak-label {
  display: none;
}

body #ls-chat-btn {
  width: 56px;
  padding: 0;
  gap: 0;
  justify-content: center;
  border-radius: 50%;
}