/* The market and module navigation move together at their natural height. */
.wallet-sticky-header {
  position: sticky;
  top: calc(var(--top) + 14px);
  z-index: 7;
  display: flow-root;
  min-width: 0;
}

/* No painted backdrop under the tabs. Scrolling content is clipped where it
   passes behind the sticky header, leaving the original wallpaper untouched. */

/* Separate filter glass and coin glass share one responsive row. */
.market-overview {
  position: relative;
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr);
  align-items: stretch;
  gap: 32px;
  min-width: 0;
  max-width: 100%;
  margin-bottom: 27px;
}

.market-strip {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 8px;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 20px;
  border: 0;
  border-radius: 22px;
  background: var(--bg);
  box-shadow: 0 0 0 1px #ffffff14,
    0 0 16px #ffffff21,
    0 0 32px color-mix(in srgb, var(--accent) 28.24%, transparent),
    0 0 80px color-mix(in srgb, var(--accent) 16.08%, transparent),
    0 24px 64px #00000040;
}

.market-overview > .market-categories {
  position: relative;
  grid-column: auto;
  align-self: stretch;
  min-width: 0;
  padding: 12px 8px;
  gap: 6px;
  justify-content: space-between;
  border: 0;
  border-radius: 18px;
  background: var(--bg);
  box-shadow: 0 0 0 1px #ffffff14, 0 0 16px #ffffff1a,
    0 0 32px color-mix(in srgb, var(--accent) 22%, transparent),
    0 18px 40px #00000040;
}

.market-overview > .market-categories button {
  width: 100%;
  min-height: 34px;
  padding: 6px 4px;
  font-size: 14px;
  line-height: 1.3;
}

.market-categories .market-filter-label { min-width: 0; white-space: normal; }
.market-categories .market-sort-direction { flex: 0 0 12px; width: 12px; font-size: 14px; }
.market-metadata .market-metric-demo { margin-left: 6px; color: #91b9d9; font-size: 14px; font-weight: 400; }

/* A continuous white glass rim, brightest toward the upper-left light source. */
.market-strip::before,
.market-overview > .market-categories::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  padding: 1.25px;
  border-radius: inherit;
  background: linear-gradient(135deg, #fffffff0 0%, #ffffffa6 18%,
    #ffffff66 52%, #ffffff94 78%, #ffffff80 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

@supports ((backdrop-filter: blur(18px)) or (-webkit-backdrop-filter: blur(18px))) {
  .market-strip,
  .market-overview > .market-categories {
    background: radial-gradient(ellipse at top left, #ffffff14, #ffffff00 58%),
      linear-gradient(135deg, #ffffff0a, #ffffff00),
      color-mix(in srgb, var(--bg) 58%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(125%);
    backdrop-filter: blur(18px) saturate(125%);
  }
}

/* The carousel and promo sit inside the coin glass without extra panel shells. */
.market-strip > :is(.market-carousel-block, .market-promo) {
  min-width: 0;
  border: 0;
  border-radius: 14px;
  background: transparent;
  box-shadow: none;
}

.market-strip > .market-promo {
  border-left: 1px solid #ffffff12;
  border-radius: 0;
}

.market-strip > .market-carousel-block {
  min-width: 0;
  max-width: 100%;
}

.market-strip .market-carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(280px, 24vw, 320px);
  align-items: stretch;
  gap: 24px;
  min-width: 0;
  max-width: 100%;
  /* Balanced visible inset, including the card's 6px side / 8px base. */
  padding: 6px 12px 14px 6px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 6px 12px;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  border-radius: 14px;
}

.market-strip .market-carousel::-webkit-scrollbar { display: none; }

.market-strip .market-carousel:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* The pin floats over the corner, leaving the existing header geometry intact. */
:root body .market-strip .market-carousel > .market-card > .market-pin[data-market-pin] {
  position: absolute;
  z-index: 3;
  top: -8px;
  left: -8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--accent);
  animation: none;
}

.market-strip .market-pin svg { width: 24px; height: 24px; flex-shrink: 0; transform: rotate(45deg); }

.market-strip .market-details {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  min-width: 28px;
  height: 30px;
  min-height: 30px;
  padding: 5px;
}

.market-strip .market-collapse-toggle {
  position: absolute;
  z-index: 3;
  left: calc(50% - 22px);
  bottom: -16px;
  grid-column: 1 / -1;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 32px;
  min-height: 32px;
  padding: 4px 8px;
  font-size: 14px;
  line-height: 1;
}

:root body .market-strip .market-collapse-toggle:not(:hover):not(:active) {
  background: var(--bg);
}

/* Quiet edge controls do not add a footer or consume any card/glass space. */
:root body .market-strip .market-side-arrow {
  position: absolute;
  z-index: 4;
  top: calc(50% - 22px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  min-width: 32px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: var(--bg);
  color: #fff;
  box-shadow: inset 0 0 0 1px #ffffff47, 0 3px 12px #00000029;
  font-size: 14px;
  line-height: 1;
}

:root body .market-strip .market-side-arrow[data-market-scroll="-1"] { left: -16px; }
:root body .market-strip .market-side-arrow[data-market-scroll="1"] { right: -16px; }
:root body .market-strip .market-side-arrow:disabled { opacity: .28; }

.market-strip .market-card-head {
  flex-wrap: nowrap;
  gap: 10px;
}

.market-strip .market-card-head .account-name > span { min-width: 0; }
.market-strip .market-card-head .account-name strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.market-strip .market-empty {
  align-self: center;
  padding: 28px 12px;
  min-height: 150px;
  font-size: 14px;
  line-height: 1.6;
}

.market-strip .market-carousel:has(.market-empty) {
  grid-auto-columns: 100%;
}

/* Tangible raised price tiles: a six-pixel side and eight-pixel base are painted
   outside the existing box, leaving text, chart geometry and grid sizing intact. */
.market-strip .market-carousel > .market-card {
  position: relative;
  scroll-snap-align: start;
  border: 0;
  border-radius: 16px;
  background:
    radial-gradient(ellipse at 5% 0%, #ffffff30, transparent 58%),
    linear-gradient(145deg, color-mix(in srgb, var(--accent) 30%, transparent), transparent 50%, #00000040),
    color-mix(in srgb, var(--bg) 86%, transparent);
  box-shadow:
    inset 0 2px 0 #ffffff57,
    inset 2px 0 0 #ffffff1f,
    inset -2px -2px 4px #00000057,
    1px 1px 0 #285d88,
    2px 2px 0 #224f78,
    3px 3px 0 #1c466d,
    4px 4px 0 #173d62,
    5px 5px 0 #123458,
    6px 6px 0 #0f2b4b,
    6px 7px 0 #0b233e,
    6px 8px 0 #081b32,
    7px 9px 0 #7cbeee29,
    9px 18px 22px #00000066;
  transition: transform .2s ease, box-shadow .2s ease;
}

.market-strip .market-carousel > .market-card::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  padding: 2px;
  border-radius: inherit;
  background: linear-gradient(135deg, #ffffffb8 0%,
    color-mix(in srgb, var(--accent) 75%, #fff) 15%,
    color-mix(in srgb, var(--accent) 34%, transparent) 40%,
    #ffffff08 65%, #ffffff38 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* A broad tapered light wraps around the rim. Only its angle and arc length
   animate; the border mask and the approved card geometry remain stationary. */
@property --market-edge-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --market-edge-length { syntax: "<angle>"; inherits: false; initial-value: 150deg; }
.market-strip .market-card > .market-edge {
  --edge-color: #34ef6d;
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--edge-color) 45%, transparent));
}
.market-strip .market-card > .market-edge[data-trend="loser"] { --edge-color: #ff334a; }
.market-edge-light {
  position: absolute;
  inset: 0;
  padding: 3px;
  border-radius: inherit;
  background: conic-gradient(from var(--market-edge-angle),
    transparent 0deg,
    color-mix(in srgb, var(--edge-color) 10%, transparent) calc(var(--market-edge-length) * .16),
    color-mix(in srgb, var(--edge-color) 55%, transparent) calc(var(--market-edge-length) * .42),
    var(--edge-color) calc(var(--market-edge-length) * .72),
    color-mix(in srgb, var(--edge-color) 82%, #fff) var(--market-edge-length),
    transparent calc(var(--market-edge-length) + 2deg));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation: market-edge-travel var(--edge-duration, 14s) cubic-bezier(.45,.2,.55,.8) var(--edge-delay, 0s) infinite;
}
@keyframes market-edge-travel {
  0%   { --market-edge-angle: 0deg;   --market-edge-length: 150deg; }
  13%  { --market-edge-angle: 25deg;  --market-edge-length: 205deg; }
  29%  { --market-edge-angle: 122deg; --market-edge-length: 95deg; }
  47%  { --market-edge-angle: 148deg; --market-edge-length: 170deg; }
  68%  { --market-edge-angle: 274deg; --market-edge-length: 235deg; }
  83%  { --market-edge-angle: 310deg; --market-edge-length: 115deg; }
  100% { --market-edge-angle: 360deg; --market-edge-length: 150deg; }
}
/* Keep the explicitly requested motion gentler for reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  .market-edge-light { animation-duration: calc(var(--edge-duration, 14s) * 1.6); }
  .market-strip .market-card > .market-edge { filter: none; }
}

.market-strip .market-carousel > .market-card .coin-icon {
  background:
    linear-gradient(145deg, #ffffff30, transparent 48%, #00000038),
    color-mix(in srgb, var(--coin) 22%, var(--bg));
  box-shadow: inset 0 2px 0 #ffffff66,
    inset 1px 0 0 #ffffff26,
    inset 0 -2px 0 #0000004d,
    1px 1px 0 color-mix(in srgb, var(--coin) 40%, #0a172a),
    2px 2px 0 color-mix(in srgb, var(--coin) 33%, #0a172a),
    3px 3px 0 color-mix(in srgb, var(--coin) 26%, #0a172a),
    3px 4px 0 color-mix(in srgb, var(--coin) 18%, #0a172a),
    4px 7px 10px #00000066;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .market-strip .market-carousel > .market-card:hover {
    transform: translateY(-2px);
    box-shadow:
      inset 0 2px 0 #ffffff70,
      inset 2px 0 0 #ffffff2e,
      inset -2px -2px 4px #00000057,
      1px 1px 0 #326e9e,
      2px 2px 0 #295d8a,
      3px 3px 0 #214f79,
      4px 4px 0 #1a456c,
      5px 5px 0 #143b5e,
      6px 6px 0 #102f50,
      6px 7px 0 #0b2644,
      6px 8px 0 #081d36,
      7px 9px 0 #7cbeee38,
      10px 22px 27px #00000073;
  }
}

@media (prefers-reduced-motion: reduce) {
  .market-strip .market-carousel > .market-card {
    transition: none;
    transform: none;
  }
}

.market-strip .market-footer {
  border-top-color: #ffffff12;
}

/* Replace the old 30px action + 10px inset + border without growing the card. */
.market-strip .market-metadata {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: start;
  gap: 8px;
  height: 41px;
  padding-top: 4px;
}

.market-strip .market-metadata > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.market-strip .market-metadata :is(span, strong) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  line-height: 1.2;
}

/* Every market label remains readable; values and larger headings keep their scale. */
.market-strip :is(.market-card-head strong, .market-card-head small,
  .market-value span, .market-value small, .market-footer, .market-footer span,
  .market-promo .eyebrow, .market-promo a) {
  font-size: 14px;
}

.market-strip .market-footer > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.market-strip .market-promo a {
  gap: 8px;
  flex-wrap: wrap;
}

@media (max-width: 1180px) {
  .market-strip {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Expanded markets scroll normally where pinning them would consume the view.
   Compact markets and navigation-only headers remain available while scrolling. */
@media (max-width: 700px), (max-height: 649px) {
  .wallet-sticky-header:has(.market-overview:not(.market-is-collapsed)) {
    position: relative;
    top: auto;
  }
}

@media (max-width: 700px) {
  .wallet-sticky-header { top: calc(var(--top) + 8px); }

  .market-overview {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin-bottom: 19px;
  }

  .market-strip {
    grid-template-columns: minmax(0, 1fr);
    padding: 14px;
    border-radius: 18px;
  }

  .market-overview > .market-categories {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 12px;
  }

  .market-overview > .market-categories button { width: auto; }

  .market-strip .market-carousel {
    grid-auto-columns: min(320px, calc(100vw - 88px));
    padding-right: 12px;
  }

}

/* Compact mode is only icon, name and price, with the single bottom toggle. */
.market-overview.market-is-collapsed {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.market-overview.market-is-collapsed > .market-categories,
.market-strip.market-is-collapsed :is(.market-promo, .market-details, .market-footer,
  .market-card-head small, .market-value span, .sparkline) {
  display: none;
}

:root body .market-strip.market-is-collapsed .market-carousel > .market-card > .market-pin[data-market-pin] {
  display: none;
}

.market-strip.market-is-collapsed {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: 12px 16px 8px;
}

.market-strip.market-is-collapsed .market-carousel {
  grid-auto-columns: max-content;
  padding: 4px 18px 14px 4px;
  scroll-padding-inline: 4px 18px;
}

.market-strip.market-is-collapsed .market-carousel > .market-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 11px;
  background: linear-gradient(145deg, #ffffff0c, #ffffff00),
    color-mix(in srgb, var(--bg) 72%, transparent);
  box-shadow: inset 0 1px 0 #ffffff29, 0 2px 5px #00000026;
  transform: none;
}

.market-strip.market-is-collapsed .market-carousel > .market-card::before {
  padding: 1px;
  opacity: .55;
}

/* The compact ticker keeps the same motion, with a finer, quieter edge. */
.market-strip.market-is-collapsed .market-card > .market-edge { opacity: .7; filter: none; }
.market-strip.market-is-collapsed .market-edge-light { padding: 1.5px; }

.market-strip.market-is-collapsed .market-carousel > .market-card .coin-icon {
  box-shadow: inset 0 1px 0 #ffffff30, 0 2px 3px #00000024;
}

.market-strip.market-is-collapsed .market-card-head { display: contents; }
.market-strip.market-is-collapsed .account-name { gap: 8px; }
.market-strip.market-is-collapsed .account-name strong { white-space: nowrap; }
.market-strip.market-is-collapsed .coin-icon {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  font-size: 18px;
}

.market-strip.market-is-collapsed .market-value {
  display: block;
  min-height: 0;
  margin: 0;
}

.market-strip.market-is-collapsed .market-value strong {
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: 0;
}

.market-strip.market-is-collapsed .market-empty {
  min-height: 40px;
  padding: 4px;
}