/* TonSurge — round 3 component styles. Generated by tools/build-r3.py. */

/* ===== Border Glow (supplied CSS, verbatim) ===== */
.border-glow-card {
  --edge-proximity: 0;
  --cursor-angle: 45deg;
  --edge-sensitivity: 30;
  --color-sensitivity: calc(var(--edge-sensitivity) + 20);
  --border-radius: 28px;
  --glow-padding: 40px;
  --cone-spread: 25;

  position: relative;
  border-radius: var(--border-radius);
  isolation: isolate;
  transform: translate3d(0, 0, 0.01px);
  display: grid;
  border: 1px solid rgb(255 255 255 / 15%);
  background: var(--card-bg, #120F17);
  overflow: visible;
  box-shadow:
    rgba(0, 0, 0, 0.1) 0px 1px 2px,
    rgba(0, 0, 0, 0.1) 0px 2px 4px,
    rgba(0, 0, 0, 0.1) 0px 4px 8px,
    rgba(0, 0, 0, 0.1) 0px 8px 16px,
    rgba(0, 0, 0, 0.1) 0px 16px 32px,
    rgba(0, 0, 0, 0.1) 0px 32px 64px;
}

.border-glow-card--light {
  border-color: rgb(24 24 27 / 12%);
  box-shadow:
    rgb(24 24 27 / 4%) 0 1px 2px,
    rgb(24 24 27 / 5%) 0 8px 24px;
}

.border-glow-card--light::after,
.border-glow-card--light > .edge-light {
  mix-blend-mode: normal;
}

.border-glow-card::before,
.border-glow-card::after,
.border-glow-card > .edge-light {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transition: opacity 0.25s ease-out;
  z-index: -1;
}

.border-glow-card:not(:hover):not(.sweep-active)::before,
.border-glow-card:not(:hover):not(.sweep-active)::after,
.border-glow-card:not(:hover):not(.sweep-active) > .edge-light {
  opacity: 0;
  transition: opacity 0.75s ease-in-out;
}

/* colored mesh-gradient border */
.border-glow-card::before {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--card-bg, #120F17) 0 100%) padding-box,
    linear-gradient(rgb(255 255 255 / 0%) 0% 100%) border-box,
    var(--gradient-one, radial-gradient(at 80% 55%, hsla(268, 100%, 76%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-two, radial-gradient(at 69% 34%, hsla(349, 100%, 74%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-three, radial-gradient(at 8% 6%, hsla(136, 100%, 78%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-four, radial-gradient(at 41% 38%, hsla(192, 100%, 64%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-five, radial-gradient(at 86% 85%, hsla(186, 100%, 74%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-six, radial-gradient(at 82% 18%, hsla(52, 100%, 65%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-seven, radial-gradient(at 51% 4%, hsla(12, 100%, 72%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-base, linear-gradient(#c299ff 0 100%)) border-box;

  opacity: calc((var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));

  mask-image:
    conic-gradient(
      from var(--cursor-angle) at center,
      black calc(var(--cone-spread) * 1%),
      transparent calc((var(--cone-spread) + 15) * 1%),
      transparent calc((100 - var(--cone-spread) - 15) * 1%),
      black calc((100 - var(--cone-spread)) * 1%)
    );
}

/* colored mesh-gradient background fill near edges */
.border-glow-card::after {
  border: 1px solid transparent;
  background:
    var(--gradient-one, radial-gradient(at 80% 55%, hsla(268, 100%, 76%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-two, radial-gradient(at 69% 34%, hsla(349, 100%, 74%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-three, radial-gradient(at 8% 6%, hsla(136, 100%, 78%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-four, radial-gradient(at 41% 38%, hsla(192, 100%, 64%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-five, radial-gradient(at 86% 85%, hsla(186, 100%, 74%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-six, radial-gradient(at 82% 18%, hsla(52, 100%, 65%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-seven, radial-gradient(at 51% 4%, hsla(12, 100%, 72%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-base, linear-gradient(#c299ff 0 100%)) padding-box;

  mask-image:
    linear-gradient(to bottom, black, black),
    radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%),
    radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%),
    radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%),
    radial-gradient(ellipse at 66% 33%, black 5%, transparent 40%),
    radial-gradient(ellipse at 33% 66%, black 5%, transparent 40%),
    conic-gradient(from var(--cursor-angle) at center, transparent 5%, black 15%, black 85%, transparent 95%);

  mask-composite: subtract, add, add, add, add, add;
  opacity: calc(var(--fill-opacity, 0.5) * (var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
  mix-blend-mode: soft-light;
}

/* outer glow layer */
.border-glow-card > .edge-light {
  inset: calc(var(--glow-padding) * -1);
  pointer-events: none;
  z-index: 1;

  mask-image:
    conic-gradient(
      from var(--cursor-angle) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%
    );

  opacity: calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity)));
  mix-blend-mode: plus-lighter;
}

.border-glow-card > .edge-light::before {
  content: "";
  position: absolute;
  inset: var(--glow-padding);
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px var(--glow-color, hsl(40deg 80% 80% / 100%)),
    inset 0 0 1px 0 var(--glow-color-60, hsl(40deg 80% 80% / 60%)),
    inset 0 0 3px 0 var(--glow-color-50, hsl(40deg 80% 80% / 50%)),
    inset 0 0 6px 0 var(--glow-color-40, hsl(40deg 80% 80% / 40%)),
    inset 0 0 15px 0 var(--glow-color-30, hsl(40deg 80% 80% / 30%)),
    inset 0 0 25px 2px var(--glow-color-20, hsl(40deg 80% 80% / 20%)),
    inset 0 0 50px 2px var(--glow-color-10, hsl(40deg 80% 80% / 10%)),
    0 0 1px 0 var(--glow-color-60, hsl(40deg 80% 80% / 60%)),
    0 0 3px 0 var(--glow-color-50, hsl(40deg 80% 80% / 50%)),
    0 0 6px 0 var(--glow-color-40, hsl(40deg 80% 80% / 40%)),
    0 0 15px 0 var(--glow-color-30, hsl(40deg 80% 80% / 30%)),
    0 0 25px 2px var(--glow-color-20, hsl(40deg 80% 80% / 20%)),
    0 0 50px 2px var(--glow-color-10, hsl(40deg 80% 80% / 10%));
}

.border-glow-inner {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: auto;
  z-index: 1;
}

/* ===== Slide Commit (supplied CSS, verbatim) ===== */
.slide-commit {
  --sc-track: #262626;
  --sc-ink: #f5f5f5;
  --sc-ok: #22c55e;
  --sc-no: #e5484d;
  --sc-on-ink: #111111;
  --sc-on-ok: #111111;
  --sc-on-no: #ffffff;
  --sc-radius: 28px;
  --sc-grip-r: 24px;
  --sc-pad: 4px;
  --sc-font: 14px;

  position: relative;
  display: inline-block;
  vertical-align: middle;
  font-family: inherit;
}

.slide-commit[data-disabled] {
  opacity: 0.55;
  pointer-events: none;
}

.slide-commit__track {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--sc-radius);
  background: var(--sc-track);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.slide-commit[data-held] .slide-commit__track {
  cursor: grabbing;
}

.slide-commit[data-phase='pending'] .slide-commit__track,
.slide-commit[data-phase='done'] .slide-commit__track {
  cursor: default;
}

.slide-commit__label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  font-size: var(--sc-font);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.006em;
  white-space: nowrap;
}

.slide-commit__text {
  grid-area: 1 / 1;
  color: color-mix(in srgb, var(--sc-ink) 45%, transparent);
  transition:
    opacity 200ms ease,
    filter 200ms ease;
}

.slide-commit__text--error {
  color: var(--sc-no);
  opacity: 0;
  filter: blur(2px);
}

.slide-commit[data-phase='error'] .slide-commit__text--plain {
  opacity: 0;
  filter: blur(2px);
}

.slide-commit[data-phase='error'] .slide-commit__text--error {
  opacity: 1;
  filter: none;
}

.slide-commit__capsule {
  position: absolute;
  top: var(--sc-pad);
  left: var(--sc-pad);
  width: calc(100% - var(--sc-pad) * 2);
  height: calc(100% - var(--sc-pad) * 2);
  background: var(--sc-ink);
  color: var(--sc-on-ink);
  outline: none;
  transition:
    background-color 200ms ease,
    color 200ms ease;
}

.slide-commit[data-phase='done'] .slide-commit__capsule {
  background: var(--sc-ok);
  color: var(--sc-on-ok);
}

.slide-commit[data-phase='error'] .slide-commit__capsule {
  background: var(--sc-no);
  color: var(--sc-on-no);
}

.slide-commit__capsule:focus-visible {
  box-shadow: inset 0 0 0 2px var(--sc-track);
}

.slide-commit__content {
  position: absolute;
  inset: 0;
}

.slide-commit__arrow,
.slide-commit__spin,
.slide-commit__done {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  pointer-events: none;
  font-size: var(--sc-font);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.006em;
  white-space: nowrap;
}

.slide-commit__arrow svg,
.slide-commit__done svg,
.slide-commit__spinner {
  display: block;
}

.slide-commit__arrow,
.slide-commit__spin {
  transition: filter 200ms ease;
}

.slide-commit[data-phase='pending'] .slide-commit__arrow {
  filter: blur(2px);
}

.slide-commit:not([data-phase='pending']) .slide-commit__spin {
  filter: blur(2px);
}

.slide-commit__spinner {
  animation: slide-commit-spin 1s linear infinite;
  animation-play-state: paused;
}

.slide-commit[data-phase='pending'] .slide-commit__spinner {
  animation-play-state: running;
}

@keyframes slide-commit-spin {
  to {
    transform: rotate(360deg);
  }
}

.slide-commit__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .slide-commit__spinner {
    animation: slide-commit-breathe 1.4s ease-in-out infinite;
    animation-play-state: paused;
  }

  .slide-commit[data-phase='pending'] .slide-commit__spinner {
    animation-play-state: running;
  }

  @keyframes slide-commit-breathe {
    0%,
    100% {
      opacity: 1;
    }

    50% {
      opacity: 0.4;
    }
  }
}

/* ===== Light Rays (supplied CSS, verbatim) ===== */
.light-rays {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.light-rays__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* ===== Stepper (supplied CSS — the file ends mid-rule; complete rules only) ===== */
.stepper {
  --stepper-pad: 0px;
  --stepper-inset: 0px;
  --stepper-bleed: 8px;
  --stepper-well-radius: max(6px, calc(var(--stepper-radius) - 8px));
  --stepper-tile-radius: max(4px, calc(var(--stepper-well-radius) - 4px));
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(100%, var(--stepper-width));
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  border-radius: var(--stepper-radius);
  color: var(--stepper-ink);
  -webkit-tap-highlight-color: transparent;
}

/* ===== Pill Nav (supplied CSS, verbatim) ===== */
.pill-nav {
  --pn-roll: calc(var(--pn-inner) / 2 + 0.7em);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--pn-gap);
  max-width: 100%;
  font-size: var(--pn-font);
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}

.pill-nav[data-collapsed] {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.pill-nav[data-layout='joined'] {
  gap: 2px;
  padding: var(--pn-pad);
  border-radius: 999px;
}

.pill-nav__surface {
  background: var(--pn-surface);
  box-shadow: var(--pn-shadow);
  -webkit-backdrop-filter: var(--pn-blur);
  backdrop-filter: var(--pn-blur);
}

.pill-nav[data-layout='joined'][data-panel] {
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.pill-nav[data-panel] .pill-nav__rim--root {
  opacity: 0;
}

.pill-nav__rim {
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px var(--pn-edge),
    inset 0 1px 0 var(--pn-rim);
  pointer-events: none;
}

.pill-nav__logo {
  position: relative;
  z-index: 2;
  display: inline-grid;
  flex: none;
  place-items: center;
  width: var(--pn-h);
  height: var(--pn-h);
  border-radius: 999px;
}

.pill-nav__logo-link {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: inherit;
  color: var(--pn-strong);
  text-decoration: none;
  outline: none;
}

.pill-nav[data-layout='joined'] .pill-nav__logo {
  width: var(--pn-inner);
  height: var(--pn-inner);
}

.pill-nav__logo-link:focus-visible,
.pill-nav__toggle:focus-visible {
  outline: 2px solid var(--pn-ring);
  outline-offset: 2px;
}

.pill-nav__mark {
  display: grid;
  place-items: center;
  width: var(--pn-mark);
  height: var(--pn-mark);
}

.pill-nav__mark img,
.pill-nav__mark svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pill-nav__bar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  min-width: 0;
  height: var(--pn-h);
  padding: var(--pn-pad);
  border-radius: 999px;
  box-sizing: border-box;
}

.pill-nav[data-layout='joined'] .pill-nav__bar {
  height: var(--pn-inner);
  padding: 0;
}

.pill-nav__track {
  position: relative;
  height: 100%;
}

.pill-nav__list {
  display: flex;
  align-items: stretch;
  gap: var(--pn-item-gap, 2px);
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pill-nav__slot {
  display: flex;
}

.pill-nav__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 var(--pn-x);
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--pn-text);
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: 500;
  letter-spacing: -0.005em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.25s ease;
}

.pill-nav__slot[data-lit] .pill-nav__item,
.pill-nav__item[aria-current] {
  color: var(--pn-strong);
}

.pill-nav[data-items='pill'] {
  --pn-item-gap: 3px;
}

.pill-nav[data-items='pill'] .pill-nav__item {
  background: var(--pn-tile);
  box-shadow: var(--pn-tile-rim);
  color: var(--pn-strong);
}

.pill-nav__item:focus-visible,
.pill-nav__row:focus-visible {
  outline: 2px solid var(--pn-ring);
  outline-offset: -2px;
}

.pill-nav__face {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}

.pill-nav__face svg {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}

.pill-nav__face-alt {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  color: var(--pn-pill-ink);
  transform: translateY(var(--pn-roll));
  transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}

.pill-nav__face-alt svg {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}

.pill-nav__slot[data-on] .pill-nav__face,
.pill-nav__slot[data-hover] .pill-nav__face {
  transform: translateY(calc(var(--pn-roll) * -1));
  transition-duration: 0.5s;
}

.pill-nav__slot[data-on] .pill-nav__face-alt,
.pill-nav__slot[data-hover] .pill-nav__face-alt {
  transform: translateY(0);
  transition-duration: 0.5s;
}

.pill-nav__fill {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: -1;
  width: var(--pn-fill, 200%);
  height: var(--pn-fill, 200%);
  margin: calc(var(--pn-fill, 200%) / -2) 0 0 calc(var(--pn-fill, 200%) / -2);
  border-radius: 50%;
  background: var(--pn-pill);
  transform: scale(0);
  transition: transform 0.36s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.pill-nav__slot[data-on] .pill-nav__fill,
.pill-nav__slot[data-hover] .pill-nav__fill {
  transform: scale(1);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.pill-nav__glide {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  border-radius: 999px;
  background: var(--pn-pill);
  box-shadow: var(--pn-pill-shadow);
  opacity: 0;
  pointer-events: none;
  transform-origin: 50% 50%;
  will-change: transform, width, opacity;
}

.pill-nav[data-focus] .pill-nav__glide {
  box-shadow:
    var(--pn-pill-shadow),
    0 0 0 2px var(--pn-ring);
}

.pill-nav__ink {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: stretch;
  gap: var(--pn-item-gap, 2px);
  color: var(--pn-pill-ink);
  pointer-events: none;
  clip-path: inset(0 100% 0 0);
}

.pill-nav__ink-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  height: 100%;
  padding: 0 var(--pn-x);
  font-weight: 500;
  letter-spacing: -0.005em;
  white-space: nowrap;
}

.pill-nav__ink-item svg {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}

.pill-nav__dot {
  position: absolute;
  bottom: calc((var(--pn-inner) - var(--pn-font)) / 4 - 2px);
  left: 0;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 999px;
  background: var(--pn-dot);
  opacity: 0;
  pointer-events: none;
  transition: background-color 0.3s ease;
  will-change: transform, opacity;
}

.pill-nav[data-dot-lit] .pill-nav__dot {
  background: var(--pn-pill-ink);
}

.pill-nav__toggle {
  position: relative;
  z-index: 3;
  display: inline-grid;
  flex: none;
  place-items: center;
  width: var(--pn-h);
  height: var(--pn-h);
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: var(--pn-strong);
  cursor: pointer;
  outline: none;
}

.pill-nav__toggle--bare {
  background: transparent;
}

.pill-nav[data-layout='joined'] .pill-nav__toggle {
  width: var(--pn-inner);
  height: var(--pn-inner);
}

.pill-nav__burger {
  position: relative;
  width: 16px;
  height: 10px;
}

.pill-nav__line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    top 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.pill-nav__line--top {
  top: 1.5px;
}

.pill-nav__line--bottom {
  top: 7px;
}

.pill-nav[data-open] .pill-nav__line--top {
  top: 4.25px;
  transform: rotate(45deg);
}

.pill-nav[data-open] .pill-nav__line--bottom {
  top: 4.25px;
  transform: rotate(-45deg);
}

.pill-nav__panel {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  padding: calc(var(--pn-h) + 10px) 6px 6px;
  border-radius: 24px;
  box-sizing: border-box;
}

.pill-nav[data-layout='joined'] .pill-nav__panel {
  padding-top: calc(var(--pn-h) + 4px);
}

.pill-nav__menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pill-nav__row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: calc(var(--pn-h) + 2px);
  padding: 0 16px;
  border: 0;
  border-radius: 18px;
  box-sizing: border-box;
  background: none;
  color: var(--pn-strong);
  font-family: inherit;
  font-size: calc(var(--pn-font) + 1px);
  line-height: 1;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  transition: background-color 0.2s ease;
}

.pill-nav__row svg {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}

.pill-nav__row:hover {
  background: var(--pn-row-hover);
}

.pill-nav__row[aria-current] {
  background: var(--pn-pill);
  box-shadow: var(--pn-pill-shadow);
  color: var(--pn-pill-ink);
}

.pill-nav__measure {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  gap: 2px;
  visibility: hidden;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .pill-nav__face,
  .pill-nav__face-alt,
  .pill-nav__fill,
  .pill-nav__line,
  .pill-nav__item,
  .pill-nav__row {
    transition: none;
  }
}

/* ===== Counter (supplied CSS, verbatim) ===== */
.counter {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  line-height: 1;
  white-space: nowrap;
  direction: ltr;
  unicode-bidi: isolate;
}

.counter__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.counter__row {
  display: inline-flex;
  align-items: baseline;
  margin: 0 calc(var(--counter-gap, 0px) / -2);
  user-select: none;
  -webkit-user-select: none;
}

.counter__affix,
.counter__digit,
.counter__symbol {
  margin: 0 calc(var(--counter-gap, 0px) / 2 * var(--counter-shown, 1));
  opacity: var(--counter-shown, 1);
}

.counter__affix {
  white-space: pre;
}

.counter__digit {
  position: relative;
  display: inline-block;
  box-sizing: content-box;
  line-height: calc(1em + var(--counter-padding, 0px));
  text-align: center;
}

.counter__sizer {
  visibility: hidden;
}

.counter__window {
  position: absolute;
  top: calc(var(--counter-fade, 0em) * -1);
  right: 0;
  bottom: calc(var(--counter-fade, 0em) * -1);
  left: 0;
  overflow: hidden;
  pointer-events: none;
}

.counter__strip {
  position: absolute;
  inset: 0;
}

.counter__numeral {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
}

.counter__symbol {
  position: relative;
  display: inline-flex;
  justify-content: center;
  clip-path: inset(-0.5em 0);
}

.counter__symbol-text {
  display: inline-block;
  white-space: pre;
}

.counter__blur {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.counter__measure {
  position: absolute;
  top: 0;
  left: 0;
  height: 0;
  overflow: hidden;
  white-space: nowrap;
  visibility: hidden;
  pointer-events: none;
}

.counter__measure > span {
  display: inline-block;
}

/* ---- Stepper: styles missing from the supplied file (cut off), written in the site's theme ---- */
.stepper__header { position: relative; }
.stepper__track {
  position: relative; display: flex; align-items: center; gap: 4px; padding: 4px;
  border-radius: 999px; background: var(--stepper-well); box-shadow: inset 0 0 0 1px var(--stepper-track);
}
.stepper__glider {
  position: absolute; top: 0; left: 0; border-radius: 999px; background: var(--stepper-tile);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 4px 10px -4px rgba(0, 0, 0, 0.7);
  pointer-events: none; opacity: 0;
}
.stepper__segment {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 10px; border: 0; border-radius: 999px; background: none;
  color: var(--stepper-muted); font: inherit; font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer;
  transition: color 0.25s ease;
}
.stepper__segment:disabled { cursor: default; }
.stepper__segment:not(:disabled):hover { color: var(--stepper-ink); }
.stepper__segment[data-status='active'] { color: var(--stepper-ink); }
.stepper__segment:focus-visible { outline: 2px solid var(--stepper-ring); outline-offset: -2px; }
.stepper__badge {
  display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%;
  font-size: 12px; font-variant-numeric: tabular-nums; color: var(--stepper-muted);
  box-shadow: inset 0 0 0 1px var(--stepper-faint); transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.stepper__badge[data-status='active'] { background: var(--stepper-solid); color: var(--stepper-solid-ink); box-shadow: none; }
.stepper__badge[data-status='complete'] { background: rgba(255, 255, 255, 0.08); color: var(--stepper-ink); box-shadow: none; }
.stepper__check { display: grid; place-items: center; }
.stepper__text { display: inline-flex; min-width: 0; }
.stepper__text[hidden] { display: none; }
.stepper__title { overflow: hidden; text-overflow: ellipsis; }

.stepper__body { position: relative; }
.stepper__viewport { position: relative; overflow: hidden; }
.stepper__pane { padding: 22px 6px 6px; outline: none; }
.stepper__pane--leaving { position: absolute; top: 0; left: 0; right: 0; pointer-events: none; }

.stepper__footer-wrap { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease; }
.stepper__footer-wrap[data-hidden] { grid-template-rows: 0fr; opacity: 0; }
.stepper__footer-clip { min-height: 0; overflow: hidden; }
.stepper__footer { display: flex; justify-content: space-between; gap: 10px; padding: 18px 2px 2px; }
.stepper__button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; padding: 0 18px;
  border: 1px solid var(--line-2, rgba(255, 255, 255, 0.12)); border-radius: 999px; background: var(--s3, #1a1a1d);
  color: #fff; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
  transition: background-color 0.2s ease, opacity 0.2s ease, filter 0.2s ease;
}
.stepper__button i { display: inline-grid; font-style: normal; }
.stepper__button:hover { background: var(--s4, #222226); }
.stepper__button--back[data-hidden] { visibility: hidden; }
.stepper__button--next { margin-left: auto; border-color: transparent; background: var(--stepper-solid); color: var(--stepper-solid-ink); }
.stepper__button--next:hover { background: var(--stepper-solid); filter: brightness(1.06); }
.stepper__button:focus-visible { outline: 2px solid var(--stepper-ring); outline-offset: 2px; }
.stepper__rim { display: none; }

/* ---- StarBorder: host styles (the supplied file was cut off before its CSS; these place the
   component's canvas exactly where its engine draws: BLEED = 48px around the element) ---- */
.star-border {
  position: relative;
  isolation: isolate;
  border-radius: var(--star-border-radius);
}
.star-border > .star-border__canvas {
  position: absolute;
  top: -48px;
  left: -48px;
  width: calc(100% + 96px);
  height: calc(100% + 96px);
  pointer-events: none;
  z-index: 0;
}
.star-border > :not(.star-border__canvas) { position: relative; z-index: 1; }

/* ---- BlurText: the component's inline styles as classes ---- */
.blur-text { display: flex; flex-wrap: wrap; }
.blur-text__sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; user-select: none;
}
.blur-text__word { display: inline-flex; }
.blur-text__piece { display: inline-block; will-change: transform, filter, opacity; }

/* ===== TonSurge round 3: layout for the changes you pointed out ===== */

/* Address warning box removed (the line above it, "Testnet preview", stays) */
#origin-warn { display: none !important; }

/* Footer: start page only (before a wallet connects); hidden on every connected page */
body:not([data-view="landing"]) .foot { display: none !important; }

/* Header: start page shows a menu button at the far right; connected pages don't have one */
.top-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.top-nav { position: relative; flex: none; }
.top-nav.pill-nav[data-collapsed] { width: auto; display: none; }
body[data-view="landing"] .top-nav.pill-nav[data-collapsed] { display: inline-flex; }
.top-nav .pill-nav__toggle { width: 38px; height: 38px; }
.top-nav .pill-nav__panel {
  top: -6px; right: -6px; left: auto; width: min(280px, calc(100vw - 20px)); max-height: calc(100vh - 24px); overflow-y: auto;
  padding: 52px 6px 8px;
}
.top-nav .pill-nav__row { height: 44px; padding: 0 14px; font-size: 15px; }
.top-nav[data-open] { z-index: 2; }
.pill-nav__cta { list-style: none; padding: 8px 4px 2px; }
.menu-connect {
  display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; height: 46px; border: 0; border-radius: 999px;
  background: #30a1f5; color: #fff; font: inherit; font-size: 15px; font-weight: 500; cursor: pointer;
}
.menu-connect:hover { filter: brightness(1.06); }
.menu-connect img { width: 20px; height: 20px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.9); }

/* Header wallet: TON logo instead of the dot, copy button inside the same rectangle */
.wallet-pill { display: flex; align-items: center; min-width: 0; }
.wallet-pill.is-connected { gap: 2px; height: 38px; padding: 0 3px 0 4px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--s2); }
.wallet-pill.is-connected .btn-connect { height: 32px; padding: 0 6px 0 2px; border-color: transparent; background: transparent; }
.wallet-pill.is-connected .btn-connect:hover { background: transparent; }
.wallet-pill.is-connected .btn-connect::before { width: 22px; height: 22px; background: url(gram-logo.png) center / contain no-repeat; border-radius: 50%; }
.wallet-pill.is-connected #copy-btn { width: 30px; height: 30px; border: 0; background: var(--s3); }
.wallet-pill.is-connected #copy-btn:hover { background: var(--s4); }

/* Start page: light rays behind the emblem */
.hero { position: relative; }
.hero > * { position: relative; z-index: 1; }
.hero > .hero-rays {
  position: absolute; top: 0; left: 0; right: 0; height: 420px; z-index: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
}

/* "Genesis 95 is live now!" with a star border: the moving light replaces the static hairline */
.live-pill.star-border { border-color: transparent; }

/* Pass showcase: only "GENESIS IDENTITY" stays under the ring; no empty band before the next section */
.pass-info { margin-top: 2px; }
.passes + .about { margin-top: 30px; }
@media (min-width: 768px) { .passes + .about { margin-top: 40px; } }
@media (min-width: 768px) { .pass-info { margin-top: -10px; } }
@media (min-width: 1024px) { .pass-info { margin-top: -22px; } }

/* Benefit cards with a border glow: the inner box keeps the rounded clip, the scroller leaves room for the light */
.benefits { padding: 26px 0 30px; margin-top: -6px; margin-bottom: -26px; }
.benefit.border-glow-card { overflow: visible; border-color: rgba(255, 255, 255, 0.08); box-shadow: var(--sheen); display: block; }
.benefit.border-glow-card > .border-glow-inner { height: 100%; border-radius: inherit; overflow: hidden; }

/* Auction rules: stepper inside a border-glow card */
.rules-card { max-width: 820px; margin: 16px auto 0; padding: 14px; border-radius: 26px; scroll-margin-top: 80px; }
.rules-card { grid-template-columns: minmax(0, 1fr); }
.rules-card > .border-glow-inner { overflow: visible; min-width: 0; }
.rules-card .stepper { width: 100%; font-family: var(--font); }
.rules-card .stepper__pane h3 { font-size: 18px; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; }
.rules-card .stepper__pane p { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--t60); }
.rules-card .stepper__pane p.rule-note { font-size: 12.5px; color: var(--t46); }
.rule-facts { display: grid; gap: 1px; margin: 14px 0 0; padding: 0; list-style: none; border-radius: 14px; overflow: hidden; background: var(--line); }
.rule-facts li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; background: #101012; font-size: 13px; }
.rule-facts span { color: var(--t50); font-variant-numeric: tabular-nums; }
.rule-facts b { font-weight: 500; font-variant-numeric: tabular-nums; }
.rule-done { padding: 4px 2px 6px; text-align: center; }
.rule-again { margin-top: 14px; height: 40px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--s3); color: #fff; font-size: 13.5px; }
#passes, #about, #rules { scroll-margin-top: 80px; }

/* Bid sheet: slide to place a bid (the original button stays in the form for app.js, hidden) */
#bid-submit.bid-submit--slid { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; pointer-events: none; }
.bid-slide { margin-top: 14px; width: 100%; }
.bid-slide .slide-commit { display: block; }

/* Overview: live pill, status line and "Leading on" removed; empty timer reads 00:00 */
.ov-pill { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; padding: 0; border: 0; }
.ov-hero .ov-label { margin-top: 0; }
#live-sub, #st-mine-sub { display: none !important; }
.next-strip[disabled] .ns-clock { font-size: 0; }
.next-strip[disabled] .ns-clock::after { content: '00:00'; font-size: 22px; }

/* Winners: Top sale styled like the other figures; white until a sale, gold after */
.ov-stat.top-sale .stat-value { color: #fff; }
.ov-stat.top-sale .stat-value[data-sale] { color: var(--gold-ink); }

/* My Bids cards with a star border: the light stays inside the card edge, so nothing widens the page */
.bid-card.star-border { overflow: hidden; overflow: clip; overflow-clip-margin: 10px; }

/* ===== TonSurge round 4 ===== */

/* ---- Liquid glass reveal on load (visual only; never blocks taps) ---- */
.glass-splash {
  position: fixed; inset: 0; z-index: 100; background: #000; pointer-events: none;
  transition: opacity 0.5s ease; animation: glass-splash-out 0.4s ease 5.5s forwards;
}
.glass-splash.is-done { opacity: 0; }
.glass-splash__canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
@keyframes glass-splash-out { to { opacity: 0; visibility: hidden; } }

/* ---- Profile: pencil in the address row (dark), balance tiles like the address icons ---- */
.addr-row [data-act="edit-profile"] { color: var(--t80); }
.profile-actions .pill-info, .profile-actions .pill-btn {
  flex-direction: row; align-items: center; justify-content: flex-start; gap: 9px; height: 56px; padding: 0 11px;
  border: 1px solid var(--line-2); border-radius: 12px; background: var(--s3); color: #fff; text-align: left;
}
.profile-actions .pill-btn:hover { background: var(--s4); }
.profile-actions .pi-logo { width: 22px; height: 22px; flex: none; border-radius: 50%; }
.profile-actions .pill-btn .pi-logo { border-radius: 0; color: var(--t70); }
.profile-actions .pi-text { display: flex; flex-direction: column; min-width: 0; }
.profile-actions .pi-label { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
.profile-actions .pi-value { font-size: 14.5px; }
.profile-actions .pill-btn .pi-value { font-weight: 500; color: var(--t80); }
#me-usdt::before { content: '$'; }
/* two balance tiles side by side (room for the full figures), Disconnect underneath in the same style */
.profile-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.profile-actions .pill-btn { grid-column: 1 / -1; height: 46px; justify-content: center; }
.profile-actions .pill-btn .pi-logo { width: 18px; height: 18px; }
.profile-actions .pill-btn .pi-value { font-size: 14px; }

/* ---- Profile: bids summary with one clear hierarchy ---- */
.stats-v2 { padding: 18px 18px 6px; }
.stats-v2 .st-main { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 18px; align-items: stretch; }
.stats-v2 .st-total { display: flex; flex-direction: column; justify-content: center; padding-right: 18px; border-right: 1px solid var(--line); }
.stats-v2 .st-total .stat-value { margin-top: 4px; font-size: 52px; font-weight: 500; line-height: 1; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.stats-v2 .st-split { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.stats-v2 .st-split li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 9px 0; }
.stats-v2 .st-split li + li { border-top: 1px solid var(--line); }
.stats-v2 .st-split .stat-value { font-size: 18px; font-weight: 500; font-variant-numeric: tabular-nums; }
.stats-v2 .st-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--t30); }
.stats-v2 .st-dot[data-k="lead"] { background: var(--blue); }
.stats-v2 .st-dot[data-k="won"] { background: var(--gold); }
.stats-v2 .st-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 14px 0 12px; border-top: 1px solid var(--line); }
.stats-v2 .st-foot .stat-value { font-size: 20px; font-weight: 500; font-variant-numeric: tabular-nums; }
.stats-v2 .st-foot .unit { margin-left: 5px; font-size: 11px; color: var(--t40); letter-spacing: 0.06em; }

/* ---- Auction: header ---- */
.ids-head { text-align: center; }
.ids-eyebrow { font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--t46); }
.ids-title { margin-top: 8px; font-size: 34px; font-weight: 500; line-height: 1.1; letter-spacing: -0.03em; }
.ids-counts { display: flex; justify-content: center; gap: 0; margin-top: 12px; font-size: 12.5px; color: var(--t50); font-variant-numeric: tabular-nums; }
.ids-counts span { display: inline-flex; align-items: center; gap: 5px; padding: 0 12px; }
.ids-counts span + span { border-left: 1px solid var(--line-2); }
.ids-counts b { font-weight: 500; color: #fff; }
.ids-counts span:first-child b { color: var(--blue-ink); }
.ids .seg { margin-top: 22px; }
.ids .seg button[aria-pressed="true"] { background: #fff; color: #000; box-shadow: none; }
@media (min-width: 1024px) {
  .ids-head { text-align: left; }
  .ids-counts { justify-content: flex-start; }
  .ids-counts span:first-child { padding-left: 0; }
  .ids > #filters { margin-top: 26px; }
  .ids > .search-row { margin-top: 26px; }
}

/* ---- Blue for status and actions; cards stay dark ---- */
.status[data-tone="green"], .status[data-tone="amber"] { background: rgba(48, 161, 245, 0.12); color: var(--blue-ink); }
.bar i, .tile[data-phase="ending"] .bar i, .tile[data-phase="closing"] .bar i { background: var(--blue); }
.tile[data-phase="ending"] .m2, .tile[data-phase="closing"] .m2, .tile[data-mine="lead"] .m2 { color: var(--blue-ink); }
[data-urgency="soon"] { color: var(--blue-ink) !important; }
.ri-clock { color: var(--blue-ink); }
.ending-dot { background: var(--blue); }
.sheet-state[data-phase="ending"], .sheet-state[data-phase="closing"] { color: var(--blue-ink); }
.tile-btn, .tile[data-mine="lead"] .tile-btn { color: var(--blue-ink); }
.tile[data-mine="lead"] { border-color: var(--line-3); background: var(--surface); }
.rail-item[data-mine="true"], .bid-card[data-kind="leading"], .sheet-hero[data-mine="true"] { border-color: var(--line-3); }
@media (hover: hover) { .tile[data-mine="lead"]:hover, .rail-item[data-mine="true"]:hover { border-color: var(--line-3); } }
.sheet-actions .note[data-tone="held"] { background: var(--s2); border-color: var(--line-2); color: var(--t80); }

/* ---- How it works: auction rules — icons, visuals, lighter glow ---- */
.rule-head { display: flex; align-items: center; gap: 12px; }
.rule-ic, .rf-ic { display: grid; place-items: center; flex: none; border-radius: 10px; background: var(--s3); color: var(--t80); box-shadow: inset 0 0 0 1px var(--line); }
.rule-ic { width: 36px; height: 36px; }
.rule-ic svg { width: 19px; height: 19px; }
.rule-ic--done { margin: 0 auto 12px; width: 44px; height: 44px; color: var(--gold-ink); }
.rules-card .stepper__pane .rule-head h3 { font-size: 17px; }
.rule-facts li { align-items: center; }
.rule-facts li > span:not(.rf-ic) { flex: 1 1 auto; min-width: 0; }
.rule-facts .rf-ic { width: 28px; height: 28px; border-radius: 8px; margin-right: 2px; }
.rule-facts .rf-ic svg { width: 15px; height: 15px; }
.rule-facts li.rf-cap { padding: 8px 12px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.rule-facts li.rf-cap span { color: var(--t40); }
.rule-facts li.rf-key b { color: var(--blue-ink); }
.rule-timer { margin-top: 14px; }
.rt-track { position: relative; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.rt-track i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #30a1f5, rgba(48, 161, 245, 0.25)); }
.rt-labels { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12px; color: var(--t50); font-variant-numeric: tabular-nums; }
/* performance: the glow layers only exist while they are lit, and the stepper repaints on its own */
.rules-card::after { display: none; }
.border-glow-card:not(:hover):not(.sweep-active) > .edge-light { visibility: hidden; transition: opacity 0.75s ease-in-out, visibility 0s linear 0.75s; }
.border-glow-card:not(:hover):not(.sweep-active)::before { visibility: hidden; transition: opacity 0.75s ease-in-out, visibility 0s linear 0.75s; }
.rules-card .stepper__viewport { contain: layout paint; }

/* ---- Menu panel: real background blur ----
   The header already frosts the page with backdrop-filter, and an element with backdrop-filter is
   a "backdrop root": anything with its own backdrop-filter inside it (the menu panel) can only blur
   the header itself, not the page under it. The header's frosting moves to a pseudo-element (same
   colour, same blur), so the panel now blurs the page behind it. */
.top { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.top::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: rgba(0, 0, 0, 0.74); -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%);
}

/* ===== Round 5: Phosphor icon masks for icons app.js draws itself ===== */
:root {
  --ph-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23000'%3E%3Cpath d='M216,32H88a8,8,0,0,0-8,8V80H40a8,8,0,0,0-8,8V216a8,8,0,0,0,8,8H168a8,8,0,0,0,8-8V176h40a8,8,0,0,0,8-8V40A8,8,0,0,0,216,32ZM160,208H48V96H160Zm48-48H176V88a8,8,0,0,0-8-8H96V48H208Z'/%3E%3C/svg%3E");
  --ph-ext: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23000'%3E%3Cpath d='M200,64V168a8,8,0,0,1-16,0V83.31L69.66,197.66a8,8,0,0,1-11.32-11.32L172.69,72H88a8,8,0,0,1,0-16H192A8,8,0,0,1,200,64Z'/%3E%3C/svg%3E");
  --ph-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23000'%3E%3Cpath d='M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z'/%3E%3C/svg%3E");
  --ph-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23000'%3E%3Cpath d='M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
  --ph-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23000'%3E%3Cpath d='M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z'/%3E%3C/svg%3E");
  --ph-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23000'%3E%3Cpath d='M205.66,117.66a8,8,0,0,1-11.32,0L136,59.31V216a8,8,0,0,1-16,0V59.31L61.66,117.66a8,8,0,0,1-11.32-11.32l72-72a8,8,0,0,1,11.32,0l72,72A8,8,0,0,1,205.66,117.66Z'/%3E%3C/svg%3E");
  --ph-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23000'%3E%3Cpath d='M240,128v64a8,8,0,0,1-8,8H168a8,8,0,0,1,0-16h44.69L136,107.31l-34.34,34.35a8,8,0,0,1-11.32,0l-72-72A8,8,0,0,1,29.66,58.34L96,124.69l34.34-34.35a8,8,0,0,1,11.32,0L224,172.69V128a8,8,0,0,1,16,0Z'/%3E%3C/svg%3E");
  --ph-trophy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23000'%3E%3Cpath d='M232,64H208V48a8,8,0,0,0-8-8H56a8,8,0,0,0-8,8V64H24A16,16,0,0,0,8,80V96a40,40,0,0,0,40,40h3.65A80.13,80.13,0,0,0,120,191.61V216H96a8,8,0,0,0,0,16h64a8,8,0,0,0,0-16H136V191.58c31.94-3.23,58.44-25.64,68.08-55.58H208a40,40,0,0,0,40-40V80A16,16,0,0,0,232,64ZM48,120A24,24,0,0,1,24,96V80H48v32q0,4,.39,8Zm144-8.9c0,35.52-29,64.64-64,64.9a64,64,0,0,1-64-64V56H192ZM232,96a24,24,0,0,1-24,24h-.5a81.81,81.81,0,0,0,.5-8.9V80h24Z'/%3E%3C/svg%3E");
  --ph-pass: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23000'%3E%3Cpath d='M200,112a8,8,0,0,1-8,8H152a8,8,0,0,1,0-16h40A8,8,0,0,1,200,112Zm-8,24H152a8,8,0,0,0,0,16h40a8,8,0,0,0,0-16Zm40-80V200a16,16,0,0,1-16,16H40a16,16,0,0,1-16-16V56A16,16,0,0,1,40,40H216A16,16,0,0,1,232,56ZM216,200V56H40V200H216Zm-80.26-34a8,8,0,1,1-15.5,4c-2.63-10.26-13.06-18-24.25-18s-21.61,7.74-24.25,18a8,8,0,1,1-15.5-4,39.84,39.84,0,0,1,17.19-23.34,32,32,0,1,1,45.12,0A39.76,39.76,0,0,1,135.75,166ZM96,136a16,16,0,1,0-16-16A16,16,0,0,0,96,136Z'/%3E%3C/svg%3E");
  --ph-back: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23000'%3E%3Cpath d='M232,144a64.07,64.07,0,0,1-64,64H80a8,8,0,0,1,0-16h88a48,48,0,0,0,0-96H51.31l34.35,34.34a8,8,0,0,1-11.32,11.32l-48-48a8,8,0,0,1,0-11.32l48-48A8,8,0,0,1,85.66,45.66L51.31,80H168A64.07,64.07,0,0,1,232,144Z'/%3E%3C/svg%3E");
  --ph-tg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23000'%3E%3Cpath d='M228.88,26.19a9,9,0,0,0-9.16-1.57L17.06,103.93a14.22,14.22,0,0,0,2.43,27.21L72,141.45V200a15.92,15.92,0,0,0,10,14.83,15.91,15.91,0,0,0,17.51-3.73l25.32-26.26L165,220a15.88,15.88,0,0,0,10.51,4,16.3,16.3,0,0,0,5-.79,15.85,15.85,0,0,0,10.67-11.63L231.77,35A9,9,0,0,0,228.88,26.19Zm-61.14,36L78.15,126.35l-49.6-9.73ZM88,200V152.52l24.79,21.74Zm87.53,8L92.85,135.5l119-85.29Z'/%3E%3C/svg%3E");
  --ph-yt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23000'%3E%3Cpath d='M164.44,121.34l-48-32A8,8,0,0,0,104,96v64a8,8,0,0,0,12.44,6.66l48-32a8,8,0,0,0,0-13.32ZM120,145.05V111l25.58,17ZM234.33,69.52a24,24,0,0,0-14.49-16.4C185.56,39.88,131,40,128,40s-57.56-.12-91.84,13.12a24,24,0,0,0-14.49,16.4C19.08,79.5,16,97.74,16,128s3.08,48.5,5.67,58.48a24,24,0,0,0,14.49,16.41C69,215.56,120.4,216,127.34,216h1.32c6.94,0,58.37-.44,91.18-13.11a24,24,0,0,0,14.49-16.41c2.59-10,5.67-28.22,5.67-58.48S236.92,79.5,234.33,69.52Zm-15.49,113a8,8,0,0,1-4.77,5.49c-31.65,12.22-85.48,12-86,12H128c-.54,0-54.33.2-86-12a8,8,0,0,1-4.77-5.49C34.8,173.39,32,156.57,32,128s2.8-45.39,5.16-54.47A8,8,0,0,1,41.93,68c30.52-11.79,81.66-12,85.85-12h.27c.54,0,54.38-.18,86,12a8,8,0,0,1,4.77,5.49C221.2,82.61,224,99.43,224,128S221.2,173.39,218.84,182.47Z'/%3E%3C/svg%3E");
  --ph-xlogo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23000'%3E%3Cpath d='M214.75,211.71l-62.6-98.38,61.77-67.95a8,8,0,0,0-11.84-10.76L143.24,99.34,102.75,35.71A8,8,0,0,0,96,32H48a8,8,0,0,0-6.75,12.3l62.6,98.37-61.77,68a8,8,0,1,0,11.84,10.76l58.84-64.72,40.49,63.63A8,8,0,0,0,160,224h48a8,8,0,0,0,6.75-12.29ZM164.39,208,62.57,48h29L193.43,208Z'/%3E%3C/svg%3E");
  --ph-docs: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23000'%3E%3Cpath d='M232,48H160a40,40,0,0,0-32,16A40,40,0,0,0,96,48H24a8,8,0,0,0-8,8V200a8,8,0,0,0,8,8H96a24,24,0,0,1,24,24,8,8,0,0,0,16,0,24,24,0,0,1,24-24h72a8,8,0,0,0,8-8V56A8,8,0,0,0,232,48ZM96,192H32V64H96a24,24,0,0,1,24,24V200A39.81,39.81,0,0,0,96,192Zm128,0H160a39.81,39.81,0,0,0-24,8V88a24,24,0,0,1,24-24h64ZM160,88h40a8,8,0,0,1,0,16H160a8,8,0,0,1,0-16Zm48,40a8,8,0,0,1-8,8H160a8,8,0,0,1,0-16h40A8,8,0,0,1,208,128Zm0,32a8,8,0,0,1-8,8H160a8,8,0,0,1,0-16h40A8,8,0,0,1,208,160Z'/%3E%3C/svg%3E");
  --ph-support: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23000'%3E%3Cpath d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm39.1,131.79a47.84,47.84,0,0,0,0-55.58l28.5-28.49a87.83,87.83,0,0,1,0,112.56ZM96,128a32,32,0,1,1,32,32A32,32,0,0,1,96,128Zm88.28-67.6L155.79,88.9a47.84,47.84,0,0,0-55.58,0L71.72,60.4a87.83,87.83,0,0,1,112.56,0ZM60.4,71.72l28.5,28.49a47.84,47.84,0,0,0,0,55.58L60.4,184.28a87.83,87.83,0,0,1,0-112.56ZM71.72,195.6l28.49-28.5a47.84,47.84,0,0,0,55.58,0l28.49,28.5a87.83,87.83,0,0,1-112.56,0Z'/%3E%3C/svg%3E");
  --ph-community: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23000'%3E%3Cpath d='M244.8,150.4a8,8,0,0,1-11.2-1.6A51.6,51.6,0,0,0,192,128a8,8,0,0,1-7.37-4.89,8,8,0,0,1,0-6.22A8,8,0,0,1,192,112a24,24,0,1,0-23.24-30,8,8,0,1,1-15.5-4A40,40,0,1,1,219,117.51a67.94,67.94,0,0,1,27.43,21.68A8,8,0,0,1,244.8,150.4ZM190.92,212a8,8,0,1,1-13.84,8,57,57,0,0,0-98.16,0,8,8,0,1,1-13.84-8,72.06,72.06,0,0,1,33.74-29.92,48,48,0,1,1,58.36,0A72.06,72.06,0,0,1,190.92,212ZM128,176a32,32,0,1,0-32-32A32,32,0,0,0,128,176ZM72,120a8,8,0,0,0-8-8A24,24,0,1,1,87.24,82a8,8,0,1,0,15.5-4A40,40,0,1,0,37,117.51,67.94,67.94,0,0,0,9.6,139.19a8,8,0,1,0,12.8,9.61A51.6,51.6,0,0,1,64,128,8,8,0,0,0,72,120Z'/%3E%3C/svg%3E");
  --ph-copy2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23000'%3E%3Cpath d='M216,32H88a8,8,0,0,0-8,8V80H40a8,8,0,0,0-8,8V216a8,8,0,0,0,8,8H168a8,8,0,0,0,8-8V176h40a8,8,0,0,0,8-8V40A8,8,0,0,0,216,32ZM160,208H48V96H160Zm48-48H176V88a8,8,0,0,0-8-8H96V48H208Z'/%3E%3C/svg%3E");
}

/* =====================================================================================
   TonSurge round 5 — design system (recoloured in round 6 to the official black theme)
   • Depth from tone, not strokes: pure black → primary → secondary → elevated surfaces.
     Rectangles carry no outlines; nesting is shown by one step of tone. Hairlines remain only
     as dividers inside lists.
   • Glass is reserved for layers that float over content (header, navigation, menu, sheets,
     notifications, dropdowns, toasts). In-flow sections stay matte, which also keeps
     scrolling cheap: only a handful of backdrop-filter layers exist at any time.
   • Pure black page (#010101). Electric blue (#39a3f0) / action blue (#0d8cf0) are reserved for
     action, live state and focus; gold for ownership only.
   • Type leads: editorial section heads (index eyebrow · title · subheading), tabular figures,
     large numerals for the numbers that matter.
   • One icon family: Phosphor Icons 2.1.1 (MIT, Copyright (c) 2023 Phosphor Icons; licence text in
     licenses/phosphor-icons-MIT.txt) — regular for idle, fill for active. Paths are used unmodified.
   • Breakpoints: phones < 768, tablets 768–1023, desktop ≥ 1024 (wide ≥ 1280).
   ===================================================================================== */
:root {
  /* Official TonSurge theme (round 6): pure black, three surfaces, electric/action blue, 3 text tones */
  --bg: #010101;
  --p1: #0b0a0b;            /* primary surface */
  --p2: #121114;            /* secondary surface */
  --p3: #202023;            /* elevated surface */
  --p4: #29292d;            /* hover on elevated */
  --s1: var(--p1); --s2: var(--p2); --s3: var(--p3); --s4: var(--p4);
  --surface: var(--p1);
  --surface-raised: var(--p2);
  --text: #fbfbfc;
  --t80: #b9bbc3; --t70: #b9bbc3; --t60: #9c9ea6; --t50: #737378; --t46: #737378; --t40: #737378; --t30: #4d4d52;
  --border: #35343b;
  --line: rgba(53, 52, 59, 0.6);
  --line-2: #35343b;
  --line-3: #45444c;
  --sheen: none;
  --blue: #39a3f0;
  --blue-action: #0d8cf0;
  --blue-ink: #7cc2f5;
  --grad-button: linear-gradient(180deg, #39a3f0 0%, #0d8cf0 100%);
  --grad-connect: linear-gradient(180deg, #39a3f0 0%, #0d8cf0 100%);
  --fill-1: rgba(255, 255, 255, 0.035);
  --fill-2: rgba(255, 255, 255, 0.06);
  --fill-3: rgba(255, 255, 255, 0.09);
  --glass: rgba(18, 17, 20, 0.66);
  --glass-strong: rgba(11, 10, 11, 0.84);
  --glass-blur: blur(26px) saturate(150%);
  --glass-hi: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --navy-light: radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0) 60%);
  --float: 0 30px 80px -30px rgba(0, 0, 0, 0.9), 0 10px 30px -18px rgba(0, 0, 0, 0.8);
  --r-xl: 28px; --r-lg: 20px; --r-md: 16px; --r-sm: 12px;
  --side-w: 248px;
  --gutter: 16px;
  --bullet-w: 0.686em;
}
html { background: var(--bg); }
body { background: transparent; }
::selection { background: rgba(57, 163, 240, 0.35); }
.ph { flex: none; display: block; }
.top .brand { min-height: 44px; }

/* ---------- strokes off, tone on ---------- */
.card, .tile, .bid-card, .rail-item, .seg, .field, .dd-btn, .link-more, .next-strip, .chain-row, .mini-icon, .pill-info, .pill-btn,
.icon-btn, .close, .btn, .chip, .cta, .bchip, .live-pill, .hero-tags li, .amount, .edit-input, .flow, .facts, .sheet-hero, .won-box,
.panel, .pop-panel, .dd-list, .toast, .how-card, .benefit, .pass-card, .list-empty, .alert, .refund-card, .holder, .chip-gold,
.notes li, .wallet-pill.is-connected, .lead-note, .rules-card, .stats-card, .profile-card, .w-hero, .ov-hero, .list-card, .chain-card {
  border-color: transparent !important;
  box-shadow: none;
}
.card { background: var(--p1); }
.list-empty { background: var(--fill-1); border-style: none !important; }

/* ---------- typography ---------- */
.eyebrow {
  display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 11.5px; font-weight: 500; line-height: 1;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--blue-ink);
}
.eyebrow::after { content: ""; flex: 0 0 32px; height: 1px; background: currentColor; opacity: 0.5; }
.sec-head { text-align: center; }
.how-title, .how-rules, .about h2, .sec-big {
  margin: 0; font-size: clamp(32px, 8.4vw, 56px); font-weight: 500; line-height: 1.04; letter-spacing: -0.032em; text-align: center;
}
.how-sub, .sec-head .how-sub, .sec-sub { margin: 12px auto 0; max-width: 520px; font-size: clamp(14px, 3.7vw, 17px); line-height: 1.5; color: var(--t60); text-align: center; }
.about { text-align: center; }
.about > p#about-lede { margin: 12px auto 0; max-width: 520px; font-size: clamp(14px, 3.7vw, 17px); line-height: 1.55; color: var(--t60); }
.page-title { margin-top: 28px; font-size: clamp(30px, 7.6vw, 44px); line-height: 1.05; letter-spacing: -0.03em; }
.page-title.sub { margin-top: 40px; font-size: clamp(22px, 5.4vw, 28px); }
.page-sub { font-size: 14px; color: var(--t50); }
.section-title.small { margin-top: 44px; font-size: clamp(20px, 5vw, 24px); text-align: left; letter-spacing: -0.02em; }

/* ---------- status labels: no bullet, quiet tint ---------- */
/* app.js writes "• Open"; the bullet and its space are clipped (text-indent + overflow). */
.status {
  display: inline-block; height: 22px; padding: 0 9px 0 0; border: 0; border-left: 9px solid transparent; background-clip: border-box;
  line-height: 22px; overflow: hidden; text-indent: calc(-1 * var(--bullet-w)); letter-spacing: 0; font-size: 11px; font-weight: 500;
  background-color: var(--fill-2); color: var(--t70); vertical-align: middle;
}
.status[data-tone] { background-color: rgba(48, 161, 245, 0.13); color: var(--blue-ink); }
.status[data-tone="red"] { background-color: rgba(255, 107, 107, 0.12); color: var(--red-ink); }
.status[data-tone="gold"], .bid-card[data-kind="won"] .status { background-color: var(--gold-wash); color: var(--gold-ink); }
.status[data-tone="dim"] { background-color: var(--fill-2); color: var(--t60); }
.sheet-head .status { height: 24px; line-height: 24px; font-size: 11.5px; padding: 0 10px 0 0; border-left-width: 10px; }

/* ---------- header (glass) ---------- */
.top { border-bottom: 0; height: 60px; padding-left: max(18px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
.top::before { background: rgba(5, 7, 10, 0.62); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.05); }
.icon-btn { width: 38px; height: 38px; background: var(--fill-2); color: var(--t80); }
.icon-btn:hover { background: var(--fill-3); }
.icon-btn .ph { width: 19px; height: 19px; }
.wallet-pill.is-connected { background: var(--fill-2); height: 40px; }
.wallet-pill.is-connected #copy-btn { background: var(--fill-2); }
.wallet-pill.is-connected #copy-btn .ph { width: 16px; height: 16px; }
.notice { border-bottom: 0; background: transparent; color: var(--t46); }
.top-links, .top-cta { display: none; }
.tl { display: inline-flex; align-items: center; gap: 5px; height: 36px; padding: 0 12px; border-radius: var(--r-pill); font-size: 14px; color: var(--t60); text-decoration: none; }
.tl:hover { color: #fff; background: var(--fill-1); }
.tl-ext { width: 13px; height: 13px; opacity: 0.7; }
.top-cta {
  align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 10px; border: 0; border-radius: var(--r-pill);
  background: var(--blue); color: #fff; font-size: 14px; font-weight: 500; white-space: nowrap;
}
.top-cta img { width: 22px; height: 22px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.9); }
.top-cta:hover { filter: brightness(1.07); }

/* ---------- menu: Pill Nav (start page) ---------- */
.top-nav { display: none !important; }
body[data-view="landing"] .top-nav.pill-nav { display: inline-flex !important; }
.menu-connect {
  display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; height: 46px; border: 0; border-radius: 999px;
  background: var(--grad-button); color: #fff; font: inherit; font-size: 15px; font-weight: 500; cursor: pointer;
}
.menu-connect img { width: 20px; height: 20px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.9); }
.menu-connect:hover { filter: brightness(1.06); }

/* ---------- start page ---------- */
.hero { background: transparent; padding-top: 30px; }
.hero-title { font-size: clamp(56px, 17vw, 132px); letter-spacing: -0.045em; line-height: 0.98; }
.lede { font-size: clamp(14.5px, 3.75vw, 18px); color: var(--t60); text-wrap: balance; }
.live-pill { background: var(--fill-2); }
.hero-tags li { background: transparent; border: 0 !important; color: var(--t60); padding: 0 12px; position: relative; }
.hero-tags li + li::before { content: ""; position: absolute; left: -5px; top: 50%; width: 3px; height: 3px; margin-top: -1.5px; border-radius: 50%; background: var(--t30); }
.hero-tags { gap: 10px; }
.cta { background: var(--fill-2); height: 52px; border-radius: 18px; }
.cta:hover { background: var(--fill-3); }
.cta.primary { background: var(--blue); }
.pass-eyebrow { letter-spacing: 0.32em; color: var(--t46); }

.about h2 { margin-top: 0; }
.bchip { background: var(--fill-2); height: 38px; padding: 0 16px; font-size: 14px; color: var(--t70); }
.bchip[aria-selected="true"] { background: #fff; color: #05070a; }
.benefit { background: var(--p1); border-radius: 24px; }
.benefit-art { height: 168px; }
.benefit-body { padding: 24px 22px 26px; }

.how { background: linear-gradient(180deg, rgba(8, 10, 14, 0) 0%, rgba(8, 10, 14, 0.7) 18%, rgba(8, 10, 14, 0.7) 100%); border-top: 0; padding-top: 64px; }
.how .sec-head { max-width: 1240px; margin: 0 auto; }

/* Genesis Fund: open data visualisation, no container */
.fund { background: transparent !important; border: 0 !important; box-shadow: none !important; max-width: 1240px !important; padding: 28px 0 0 !important; margin-top: 44px !important; border-top: 1px solid var(--line) !important; border-radius: 0 !important; }
.fund-head h3 { font-size: clamp(22px, 5.6vw, 30px); letter-spacing: -0.025em; }
.fund-bar { height: 12px !important; gap: 4px !important; }
.fund-bar i { border-radius: 4px !important; }
.fund-legend b { font-size: clamp(22px, 5vw, 30px); letter-spacing: -0.03em; font-weight: 500; }

/* Auction rules */
.how .rules-head { margin: 72px auto 0; max-width: 1240px; scroll-margin-top: 76px; }
.rules-head .how-rules { text-align: left; }
.rules-card { margin-top: 28px; background: var(--p1); border-radius: 28px; }
.rules-card.border-glow-card { --card-bg: #0b0a0b; }

/* ---------- footer: editorial ---------- */
.foot { margin-top: 0; padding: 0; border-top: 0; background: transparent; }
body[data-view="landing"] .foot { padding: 0; background: linear-gradient(180deg, rgba(8, 10, 14, 0.7) 0%, #06080b 100%); }
.foot-inner { display: block; max-width: 1240px; margin: 0 auto; padding: 64px max(22px, env(safe-area-inset-left)) calc(28px + env(safe-area-inset-bottom)); }
.foot-top { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 24px; padding-bottom: 44px; }
.foot-brand { grid-column: 1 / -1; }
.foot-brand .wordmark { height: 30px; opacity: 1; }
.foot-tag { margin-top: 16px; max-width: 340px; font-size: 15px; line-height: 1.55; color: var(--t50); }
.foot-h { margin: 0 0 16px; font-size: 11.5px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--t40); }
.foot-col { display: flex; flex-direction: column; align-items: flex-start; gap: 13px; min-width: 0; }
.foot-col > a { font-size: 14.5px; color: var(--t70); text-decoration: none; }
.foot-col > a:hover { color: #fff; }
.foot-links { display: flex; flex-direction: column; align-items: flex-start; gap: 13px; padding: 0; }
.foot-links a, .foot-links span { gap: 10px; font-size: 14.5px; color: var(--t70); }
.foot-links a:hover { color: #fff; }
.foot-links svg, .foot-links img { display: none; }
.foot-links > *::before { content: ""; width: 16px; height: 16px; flex: none; background: currentColor; opacity: 0.8; -webkit-mask: var(--ph-tg) center / contain no-repeat; mask: var(--ph-tg) center / contain no-repeat; }
.foot-links > :nth-child(1)::before { -webkit-mask-image: var(--ph-support); mask-image: var(--ph-support); }
.foot-links > :nth-child(2)::before { -webkit-mask-image: var(--ph-yt); mask-image: var(--ph-yt); }
.foot-links > :nth-child(3)::before { -webkit-mask-image: var(--ph-community); mask-image: var(--ph-community); }
.foot-links > :nth-child(4)::before { -webkit-mask-image: var(--ph-tg); mask-image: var(--ph-tg); }
.foot-links > :nth-child(5)::before { -webkit-mask-image: var(--ph-xlogo); mask-image: var(--ph-xlogo); }
.foot-links > :nth-child(6)::before { -webkit-mask-image: var(--ph-docs); mask-image: var(--ph-docs); }
.foot-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.foot-bottom .copy { margin: 0; font-size: 12.5px; color: var(--t40); }
.foot-net { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 12.5px; color: var(--t40); }
.foot-net-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
html[data-network="mainnet"] .foot-net { display: none; }
.foot-up { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; height: 36px; padding: 0 14px; border-radius: var(--r-pill); background: var(--fill-2); font-size: 13px; color: var(--t80); text-decoration: none; }
.foot-up:hover { background: var(--fill-3); color: #fff; }
.foot-up .ph { width: 14px; height: 14px; }
.foot { content-visibility: auto; contain-intrinsic-size: auto 520px; }

/* ---------- connected: the old bottom bar (round 6), Support added ---------- */
.tab .ph { width: 26px; height: 26px; }
.side-label, .side-me, .side-ext { display: none; }
.toast { background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-hi), var(--float); bottom: calc(92px + env(safe-area-inset-bottom)); }

/* ---------- auction ---------- */
.ids-head { text-align: left; }
.ids-eyebrow { display: flex; align-items: center; gap: 10px; justify-content: flex-start; font-size: 11.5px; letter-spacing: 0.18em; color: var(--blue-ink); }
.ids-eyebrow::after { content: ""; flex: 0 0 32px; height: 1px; background: currentColor; opacity: 0.5; }
.ids-title { text-align: left; font-size: clamp(34px, 9vw, 56px); letter-spacing: -0.035em; line-height: 1.02; }
.ids-counts { justify-content: flex-start; }
.seg { background: var(--p2); }
.seg button[aria-pressed="true"] { box-shadow: none; }
.field, .dd-btn { background: var(--p2); }
.field:focus-within, .dd-btn[aria-expanded="true"] { box-shadow: 0 0 0 1.5px rgba(48, 161, 245, 0.55); }
.field input { font-size: 14px; }
.field.search .search-ic { width: 17px; height: 17px; color: var(--t40); }
.dd-btn .ph { width: 14px; height: 14px; color: var(--t46); transition: transform 0.2s ease; }
.dd-btn[aria-expanded="true"] .ph { transform: rotate(180deg); }
.dd-list { background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-hi), var(--float); }
.dd-list li::after { border: 0; width: 16px; height: 16px; background: transparent; }
.dd-list li[aria-selected="true"]::after { background: var(--blue); -webkit-mask: var(--ph-check) center / 16px no-repeat; mask: var(--ph-check) center / 16px no-repeat; }
.dd-list li:hover, .dd-list li.active { background: var(--fill-2); }
.link-more { background: var(--fill-2); }
.ending-title { gap: 8px; color: var(--t60); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }
.ending-title .ph { width: 16px; height: 16px; color: var(--blue-ink); }
.rail-item { background: var(--p1); border-radius: 18px; }
.rail-item:hover { background: var(--p2); }
.rail-item[data-mine="true"] { background: linear-gradient(160deg, rgba(48, 161, 245, 0.16), rgba(48, 161, 245, 0.03) 70%), var(--p2); }

/* Genesis ID tiles: one editorial composition, no outlines */
.grid { gap: 10px; }
.tile {
  min-height: 0; padding: 16px 16px 0; border-radius: 22px; background: var(--p1); transition: background-color 0.2s ease, transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tile:hover { background: var(--p2); }
.tile-id { font-size: 15.5px; letter-spacing: -0.01em; }
.tile-label { margin-top: 20px; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--t40); }
.tile .price { margin-top: 4px; font-size: clamp(21px, 6vw, 28px); letter-spacing: -0.03em; }
.tile-micro { margin-top: 10px; }
.tile .bar { height: 2px; margin: 16px -16px 0; border-radius: 0; background: rgba(255, 255, 255, 0.05); }
.tile-btn {
  height: 46px; margin: 0 -16px; padding: 0 12px 0 16px; border-top: 0; background: transparent; font-size: 13px; color: var(--t70);
}
.tile-btn::after {
  content: ""; width: 26px; height: 26px; margin: 0; border: 0; transform: none; opacity: 1; border-radius: 50%;
  background: var(--fill-2) center / 14px no-repeat;
  -webkit-mask: none; mask: none;
  background-image: none;
  box-shadow: none;
}
.tile-btn { position: relative; }
.tile-btn::before {
  content: ""; position: absolute; right: 18px; top: 50%; width: 14px; height: 14px; margin-top: -7px; background: currentColor;
  -webkit-mask: var(--ph-caret) center / contain no-repeat; mask: var(--ph-caret) center / contain no-repeat; z-index: 1;
}
.tile:hover .tile-btn { background: transparent; color: #fff; }
.tile:hover .tile-btn::after { background-color: var(--fill-3); }
.tile[data-mine="lead"] { background: linear-gradient(165deg, rgba(48, 161, 245, 0.18) 0%, rgba(48, 161, 245, 0.05) 46%, rgba(48, 161, 245, 0) 70%), var(--p2); }
.tile[data-mine="lead"][data-phase="sold"] { background: linear-gradient(165deg, rgba(216, 180, 106, 0.16) 0%, rgba(216, 180, 106, 0.04) 46%, rgba(216, 180, 106, 0) 70%), var(--p2); }
.tile[data-mine="lead"] .tile-btn, .tile[data-mine="lead"] .tile-btn::before { color: var(--blue-ink); }

/* ---------- overview ---------- */
.ov-hero, .w-hero { background: var(--navy-light), var(--p1); }
.next-strip { background: var(--fill-1); }
.next-strip:not([disabled]):hover { background: var(--fill-2); }
.ns-ic { background: var(--fill-2); color: var(--blue-ink); }
.ns-ic .ph { width: 18px; height: 18px; }
.ns-chev { width: 16px; height: 16px; }
.ov-stats { border-top: 1px solid var(--line); }
.bid-card { background: var(--p1); border-radius: 22px; }
.bid-card[data-kind="leading"] { background: linear-gradient(165deg, rgba(48, 161, 245, 0.14) 0%, rgba(48, 161, 245, 0) 55%), var(--p2); }
.bid-card[data-kind="won"] { background: linear-gradient(165deg, rgba(216, 180, 106, 0.14) 0%, rgba(216, 180, 106, 0) 55%), var(--p2); }
.bid-row { border-top: 1px solid var(--line); }
.bid-list > .list-empty { grid-column: 1 / -1; }
.bid-btns button, .bid-btns a { background: var(--fill-2); height: 44px; }
.bid-btns button:hover { background: var(--fill-3); }
.bid-btns .primary { background: var(--blue); }

/* on-chain details: one panel, label left · value right, hairline dividers */
.onchain .section-title { display: flex; align-items: center; gap: 10px; font-size: 11.5px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--t46); }
.chain-card { margin-top: 14px; padding: 4px 18px; border-radius: 22px; background: var(--p1); }
.chain { gap: 0; margin: 0; }
.chain-row { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 15px 0; border-radius: 0; background: transparent; border-top: 1px solid var(--line) !important; }
.chain-row:first-child { border-top: 0 !important; }
.chain-row dt { font-size: 12.5px; color: var(--t46); }
.chain-row dd { margin-top: 3px; font-size: 14.5px; font-weight: 500; }
.chain-row .mini-icon, .addr-row .mini-icon { background: var(--fill-2); color: var(--t80); }
.chain-row .mini-icon:hover, .addr-row .mini-icon:hover { background: var(--fill-3); }
.chain-row .mini-icon svg { display: none; }
.chain-row .mini-icon::before { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--ph-copy) center / contain no-repeat; mask: var(--ph-copy) center / contain no-repeat; }
.chain-row a.mini-icon::before { -webkit-mask-image: var(--ph-ext); mask-image: var(--ph-ext); }

/* ---------- winners ---------- */
.list-card { background: var(--p1); }
.winners li { border-top: 1px solid var(--line); }
.w-art { box-shadow: none; }

/* ---------- profile (reference: avatar · name · address tools, then balance pills) ---------- */
.profile-card { background: var(--navy-light), var(--p1); padding: 20px 16px 16px; }
.avatar { box-shadow: none; border-radius: 20px; background: var(--p3); }
.addr-row .mini-icon { width: 32px; height: 32px; border-radius: 11px; }
.addr-row .mini-icon .ph { width: 15px; height: 15px; }
.profile-actions { display: flex !important; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.profile-actions .pill-info, .profile-actions .pill-btn {
  flex: 0 1 auto; height: 44px; min-width: 0; padding: 0 12px 0 5px; gap: 7px; border-radius: var(--r-pill) !important;
  background: var(--fill-2) !important; color: #fff; flex-direction: row; align-items: center;
}
.profile-actions .pill-btn { flex: 1 0 auto; grid-column: auto; padding: 0 14px; justify-content: center; font-size: 14px; font-weight: 500; color: #fff; }
.profile-actions .pill-btn:hover { background: var(--fill-3) !important; }
.profile-actions .pi-logo { width: 30px; height: 30px; }
.profile-actions .pi-value { font-size: 14.5px; font-weight: 500; letter-spacing: -0.01em; }
.stats-v2 { background: var(--p1); }
.holder { background: radial-gradient(120% 70% at 50% 0%, rgba(216, 180, 106, 0.1) 0%, rgba(216, 180, 106, 0) 60%), var(--p1); }
.chip-gold { border: 0 !important; }

/* ---------- sheets (glass, no outlines) ---------- */
.sheet { background: rgba(3, 5, 8, 0.46); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
.panel { background: rgba(14, 18, 25, 0.86); box-shadow: var(--glass-hi), var(--float); }
.panel::before { background: rgba(255, 255, 255, 0.18); }
.close { width: 38px; height: 38px; padding: 0; background: var(--fill-2); color: var(--t80); }
.close .ph { width: 16px; height: 16px; }
.close:hover { background: var(--fill-3); }
.sheet-hero { background: var(--fill-1); border-radius: 20px; }
.sheet-hero[data-mine="true"] { background: linear-gradient(165deg, rgba(48, 161, 245, 0.16), rgba(48, 161, 245, 0.03) 60%), var(--fill-1); }
.sheet-hero[data-won="true"] { background: linear-gradient(165deg, rgba(216, 180, 106, 0.16), rgba(216, 180, 106, 0.03) 60%), var(--fill-1); }
.facts { padding: 2px 16px; border-radius: 20px; background: var(--fill-1); }
.facts div { border-top: 1px solid var(--line); }
.facts div:first-child { border-top: 0; }
.amount { background: var(--fill-1); border-radius: 18px; }
.amount:focus-within { box-shadow: 0 0 0 1.5px rgba(48, 161, 245, 0.55); }
.won-box { background: linear-gradient(165deg, rgba(216, 180, 106, 0.16), rgba(216, 180, 106, 0.05)); }
.sheet-actions .note, .sheet-actions .note[data-tone="held"] { padding: 13px 15px; border-radius: 18px; background: var(--fill-1) !important; border: 0 !important; color: var(--t80); }
.sheet-actions .note[data-tone="lost"] { background: rgba(255, 107, 107, 0.1) !important; color: #ffc4c4; }
.flow { background: var(--fill-1); }
.btn { background: var(--fill-2); }
.btn:hover { background: var(--fill-3); }
.btn.primary { background: var(--blue); }
.chip { background: var(--fill-2); }
.panel.pop { background: rgba(14, 18, 25, 0.9); }

/* edit profile: round photo with a camera button, name in one row */
.edit-photo { flex-direction: column; gap: 14px; margin-top: 20px; }
.edit-avatar-wrap { position: relative; }
.edit-avatar-wrap .avatar.big { width: 104px; height: 104px; border-radius: 50%; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08); }
.edit-cam { position: absolute; right: -4px; bottom: -2px; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: var(--blue); color: #fff; box-shadow: 0 0 0 3px rgba(14, 18, 25, 0.95); }
.edit-cam .ph { width: 18px; height: 18px; }
.edit-photo-btns { display: flex; gap: 8px; }
.edit-row { display: flex; align-items: center; gap: 12px; height: 56px; margin-top: 20px; padding: 0 18px; border-radius: 18px; background: var(--fill-1); cursor: text; }
.edit-row:focus-within { box-shadow: 0 0 0 1.5px rgba(48, 161, 245, 0.55); }
.edit-row .edit-label { margin: 0; flex: none; font-size: 15px; color: var(--t70); }
.edit-row .edit-input { flex: 1 1 auto; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; text-align: right; font-size: 16px; color: var(--t80); }
.edit-row .edit-input:focus { box-shadow: none; }

/* ---------- notifications (glass, no strokes) ---------- */
.overlay { background: rgba(3, 5, 8, 0.4); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
.pop-panel { background: rgba(16, 20, 28, 0.8); box-shadow: var(--glass-hi), var(--float); border-radius: 24px; padding: 16px 12px 12px; }
.notes li { border: 0 !important; border-radius: 16px; }
.notes li[data-read="false"] { background: var(--fill-1); }
.note-ic { background: var(--fill-2); border-radius: 12px; }
.note-ic svg { display: none; }
.note-ic::before { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--ph-up) center / contain no-repeat; mask: var(--ph-up) center / contain no-repeat; }
.note-ic[data-kind="outbid"]::before { -webkit-mask-image: var(--ph-down); mask-image: var(--ph-down); }
.note-ic[data-kind="won"]::before { -webkit-mask-image: var(--ph-trophy); mask-image: var(--ph-trophy); }
.note-ic[data-kind="pass"]::before { -webkit-mask-image: var(--ph-pass); mask-image: var(--ph-pass); }
.note-ic[data-kind="refund"]::before { -webkit-mask-image: var(--ph-back); mask-image: var(--ph-back); }

/* ---------- phones: balance pills compact enough to share one row with Disconnect ---------- */
@media (max-width: 429px) {
  .profile-actions { gap: 6px; }
  .profile-actions .pill-info { height: 40px; padding: 0 10px 0 4px; gap: 6px; }
  .profile-actions .pill-btn { height: 40px; padding: 0 12px; font-size: 13.5px; }
  .profile-actions .pi-logo { width: 26px; height: 26px; }
  .profile-actions .pi-value { font-size: 14px; }
}

/* ---------- phones: small widths ---------- */
@media (max-width: 374px) {
  body.app .top .brand { width: 24px; overflow: hidden; }
  .addr-row { flex-wrap: wrap; row-gap: 8px; }
  .profile-addr { flex: 1 0 100%; }
  body.app .top .wordmark { max-width: none; }
  .top { padding-left: 14px; padding-right: 10px; }
  .wordmark { height: 20px; }
  .icon-btn { width: 36px; height: 36px; }
  .wallet-pill.is-connected .btn-connect { max-width: 112px; }
  .tile { padding: 14px 13px 0; }
  .tile .bar { margin-inline: -13px; }
  .tile-btn { margin-inline: -13px; padding-left: 13px; }
  .tab { font-size: 10px; }
}

/* ---------- tablets 768–1023: intermediate grids, wider measure ---------- */
@media (min-width: 768px) {
  .view { max-width: 100%; padding-inline: 36px; }
  .top { height: 64px; padding-inline: 32px; }
  .hero { padding-top: 56px; }
  .about { max-width: none; }
  .benefits { grid-auto-columns: calc((100% - 12px) / 2); margin-inline: 0; }
  .benefit { scroll-snap-align: start; }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .foot-inner { padding-inline: 40px; }
  .foot-top { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); }
  .foot-brand { grid-column: auto; }
  .tabbar { width: 560px; margin-left: -280px; }
  .seg, .search-row { max-width: none; }
  .ids { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 12px; align-items: end; }
  .ids > * { grid-column: 1 / -1; }
  .ids > #filters { grid-column: 1; margin-top: 26px; }
  .ids > .search-row { grid-column: 2; margin-top: 26px; }
  .bid-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .view[data-view="profile"], .view[data-view="winners"], .view[data-view="overview"] { max-width: 100%; }
  .profile-card { padding: 24px 24px 22px; }
  .profile-actions .pill-btn { flex: 0 0 auto; padding: 0 20px; }
  .view[data-view="profile"] { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); column-gap: 16px; align-items: start; }
  .view[data-view="profile"] > * { grid-column: 1 / -1; }
  .view[data-view="profile"] > .profile-card { grid-column: 1; grid-row: 2; }
  .view[data-view="profile"] > .stats-v2 { grid-column: 2; grid-row: 2; margin-top: 20px; align-self: stretch; }
  .view[data-view="profile"]:has(#holder:not([hidden])) > .stats-v2 { grid-column: 1; grid-row: 3; margin-top: 12px; }
  .view[data-view="profile"]:has(#holder:not([hidden])) > #holder { grid-column: 2; grid-row: 2 / span 3; margin-top: 20px; }
  .chain-card { padding: 4px 22px; }
  .chain-row dd { white-space: nowrap; }
}

/* ---------- desktop ≥1024: deliberate compositions + sidebar navigation ---------- */
@media (min-width: 1024px) {
  .view { max-width: 1240px; padding-inline: 40px; }
  .top { padding-inline: 32px 28px; }

  /* hero: editorial split — words left, the emblem right */
  .hero {
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); column-gap: 40px; align-items: center; text-align: left;
    max-width: 1240px; margin-inline: auto; padding: 72px 40px 24px; min-height: min(720px, calc(100vh - 110px));
  }
  .hero > * { grid-column: 1; }
  .hero > .hero-rays { grid-column: 1 / -1; }
  .hero > .hero-mark { grid-column: 2; grid-row: 1 / span 5; width: min(360px, 100%); height: auto; aspect-ratio: 1; margin: 0 auto; }
  .hero > .live-pill { justify-self: start; grid-row: 1; }
  .hero > .hero-title { grid-row: 2; margin-top: 22px; font-size: clamp(84px, 8.2vw, 124px); }
  .hero > .lede { grid-row: 3; width: auto; max-width: 520px; margin: 18px 0 0; }
  .hero > .hero-tags { grid-row: 4; justify-content: flex-start; margin-top: 24px; }
  .hero > .cta-row { grid-row: 5; justify-self: start; width: 100%; max-width: 440px; margin: 32px 0 0; }
  .hero-tags li:first-child { padding-left: 0; }

  .how { padding-top: 88px; }
  .how .rules-head { margin-top: 96px; }
  .about { max-width: 1100px; margin-inline: auto; }
  .about > .benefits { grid-auto-columns: calc((100% - 24px) / 3); }
  .rules-card { max-width: 1240px; }
  .fund { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); column-gap: 56px; row-gap: 18px; align-items: start; }
  .fund > .fund-head { grid-column: 1; grid-row: 1 / span 2; }
  .fund > .fund-bar { grid-column: 2; grid-row: 1; margin: 6px 0 0; }
  .fund > .fund-legend { grid-column: 2; grid-row: 2; margin: 0; }
  .fund > .fund-note { grid-column: 2; grid-row: 3; margin: 6px 0 0; padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .fund-legend { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }

  .foot-inner { padding: 88px 40px 32px; }
  .foot-tag { font-size: 16px; }

  /* connected: sidebar navigation (the same tab links, presented vertically) */
  body.app { padding-bottom: 40px; }
  body.app main { margin-left: var(--side-w); }
  body.app .view { max-width: 1180px; }
  .tabbar {
    left: 16px; right: auto; top: 80px; bottom: 16px; width: calc(var(--side-w) - 32px); height: auto; transform: none;
    flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 2px; padding: 18px 12px 12px; border-radius: 26px;
    background: rgba(11, 10, 11, 0.72); border: 0; box-shadow: var(--glass-hi), var(--float); margin-left: 0;
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  }
  .tab::before { display: none !important; }
  .tab svg { width: 22px; height: 22px; }
  .tab[aria-current="page"] svg { color: var(--blue); }
  .side-label { display: block; margin: 6px 12px 10px; font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--t40); }
  .side-label--gen { margin-top: 22px; }
  .tab { flex: none; flex-direction: row; justify-content: flex-start; gap: 13px; height: 46px; padding: 0 12px; border-radius: 14px; font-size: 14.5px; letter-spacing: 0; color: var(--t60); max-width: none; }
  .tab:hover { background: var(--fill-1); color: #fff; }
  .tab[aria-current="page"] { background: var(--fill-2); }
  .side-ext { display: block; width: 14px; height: 14px; margin-left: auto; color: var(--t40); }
  .side-me {
    display: flex; align-items: center; gap: 12px; margin-top: auto; padding: 10px; border-radius: 18px; background: var(--fill-1); color: #fff; text-decoration: none;
  }
  .side-me:hover { background: var(--fill-2); }
  .side-me img { width: 40px; height: 40px; border-radius: 13px; object-fit: cover; background: var(--p3); flex: none; }
  .side-me-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
  .side-me-text b { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .side-me-text small { margin-top: 2px; font-family: var(--mono); font-size: 11.5px; color: var(--t46); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .side-me .ph { width: 16px; height: 16px; color: var(--t40); }
  .toast { bottom: 32px; left: calc(50% + var(--side-w) / 2); }

  /* auction: title + counts left, filters right; 3–4 columns */
  .ids { grid-template-columns: minmax(0, 1fr) auto; align-items: end; padding-top: 40px; }
  .ids > .ids-head { grid-column: 1 / -1; }
  .ids > #filters { grid-column: 1; max-width: 520px; }
  .ids > .search-row { grid-column: 2; width: 440px; justify-self: end; }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .tile { padding: 18px 18px 0; }
  .tile .bar { margin-inline: -18px; }
  .tile-btn { margin-inline: -18px; padding-left: 18px; }

  .bid-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .view[data-view="overview"] { max-width: 1180px; }
  .view[data-view="profile"], .view[data-view="profile"]:not(:has(#holder:not([hidden]))) { max-width: 1180px; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); }
  .view[data-view="profile"]:has(#holder:not([hidden])) > #holder { position: sticky; top: 92px; }
  .view[data-view="winners"] { grid-template-columns: 360px minmax(0, 1fr); column-gap: 24px; }
  .chain-card { padding: 4px 26px; }
  .chain-row { grid-template-columns: minmax(160px, 0.6fr) minmax(0, 1.4fr) auto; }
  .chain-row > div:first-child { display: contents; }
  .chain-row dt { align-self: center; font-size: 13.5px; }
  .chain-row dd { margin: 0; text-align: right; align-self: center; }
}

@media (min-width: 1280px) {
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bid-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- short landscape screens (phones turned sideways) ---------- */
@media (max-height: 520px) and (orientation: landscape) and (max-width: 1023px) {
  .tabbar { height: calc(56px + env(safe-area-inset-bottom)); }
  .tab { flex-direction: row; gap: 8px; font-size: 12px; }
  .tab svg { width: 22px; height: 22px; }
  body.app { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .hero { padding-top: 20px; }
}

/* =====================================================================================
   TonSurge round 6 — owner's fixes on top of round 5 (loaded last, so it wins)
   • Official black theme everywhere (no navy left in glass layers).
   • Centred section typography, like the old UI.
   • Neutral (white/grey) text in sheets: colour is kept for actions only.
   • Small rectangles are filled, not outlined.
   ===================================================================================== */

/* ---------- glass layers: black, not navy ---------- */
.top::before { background: rgba(1, 1, 1, 0.72); box-shadow: none; }
.sheet { background: rgba(1, 1, 1, 0.5); -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%); }
/* The sheet's own backdrop blur shows through the translucent panel (a nested backdrop-filter would only see the sheet). */
.panel { background: rgba(18, 17, 20, 0.62); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: var(--float); }
.panel.pop { background: rgba(18, 17, 20, 0.7); }
.overlay { background: rgba(1, 1, 1, 0.42); }
.pop-panel { background: rgba(18, 17, 20, 0.78); box-shadow: var(--float); }
.edit-cam { box-shadow: 0 0 0 3px rgba(18, 17, 20, 0.95); }
.how { background: linear-gradient(180deg, rgba(11, 10, 11, 0) 0%, rgba(11, 10, 11, 0.7) 18%, rgba(11, 10, 11, 0.7) 100%); }
.fund { border-top-color: var(--line) !important; }

/* ---------- ownership tints: neutral (blue is for actions only); won keeps a soft gold ---------- */
.tile[data-mine="lead"] { background: var(--p2); }
.tile[data-mine="lead"] .tile-btn { color: var(--text); }
.tile[data-mine="lead"][data-phase="sold"] { background: linear-gradient(165deg, rgba(216, 180, 106, 0.12) 0%, rgba(216, 180, 106, 0) 60%), var(--p1); }
.rail-item[data-mine="true"] { background: var(--p2); }
.bid-card[data-kind="leading"] { background: var(--p2); }
.bid-card[data-kind="won"] { background: linear-gradient(165deg, rgba(216, 180, 106, 0.1) 0%, rgba(216, 180, 106, 0) 55%), var(--p1); }
.sheet-hero[data-mine="true"] { background: var(--fill-2); }
.sheet-hero[data-won="true"] { background: linear-gradient(165deg, rgba(216, 180, 106, 0.1), rgba(216, 180, 106, 0) 60%), var(--fill-1); }

/* ---------- centred heads (old UI) ---------- */
.ids-head { text-align: center; }
.ids-eyebrow { justify-content: center; color: var(--t50); }
.ids-eyebrow::after { display: none; }
.ids-title { text-align: center; }
.ids-counts { justify-content: center; }
.page-title, .page-sub { text-align: center; padding-left: 0; }
.page-sub { max-width: 520px; margin-left: auto; margin-right: auto; }
.rules-head .how-rules, .rules-head, .how .sec-head { text-align: center; }
.sec-app { margin: 48px auto 20px; max-width: 640px; }
/* Blur Text lays its words out with flex, so centring needs justify-content, not text-align */
.blur-text { justify-content: center; }
.sec-app .sec-big { margin: 0; }
.sec-app .sec-sub { margin-top: 10px; }
#winners-list-head { margin-top: 44px; }
@media (min-width: 1024px) {
  .view[data-view="winners"] > #winners-list-head { grid-column: 2; grid-row: 3; margin: 22px 0 18px; max-width: none; }
  .view[data-view="winners"] > .list-card { grid-column: 2; grid-row: 4; }
  .view[data-view="winners"] > .w-hero { grid-row: 3 / span 2; }
}

/* ---------- hero: old pill tags and pill buttons ---------- */
.hero-tags { gap: 8px; }
.hero-tags li {
  height: 30px; display: grid; place-items: center; padding: 0 13px !important; border-radius: var(--r-pill);
  border: 1px solid var(--border) !important; background: transparent; font-size: 12.5px; color: var(--t70); white-space: nowrap;
}
.hero-tags li + li::before { display: none; }
.cta { height: 48px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--border) !important; background: var(--p2); color: #fff; font-size: 15px; font-weight: 500; }
.cta:hover { background: var(--p3); }
.cta.primary { background: var(--grad-button); border-color: transparent !important; }
.cta.primary:hover { background: var(--grad-button); filter: brightness(1.06); }
@media (max-width: 374px) { .hero-tags li { font-size: 12px; padding: 0 10px !important; } }

/* ---------- Genesis ID tiles: "View details" centred, no chevron ---------- */
.tile-btn { justify-content: center; padding-left: 16px !important; padding-right: 16px !important; }
.tile-btn::before, .tile-btn::after { display: none !important; }
/* filtered views: the extra tiles stay folded until "View all IDs" (ui.js sets data-more) */
#grid > .tile[data-more] { display: none !important; }
#ui-more { margin-top: 14px; }

/* ---------- overview: the chevron stays visible when nothing is running ---------- */
.next-strip[disabled] .ns-chev { opacity: 1; color: var(--t40); }

/* ---------- winners: one plain rectangle with "No winners yet" ---------- */
.winners .list-empty { background: transparent !important; border-top: 0 !important; padding: 30px 16px; text-align: center; color: var(--t50); }

/* ---------- profile: compact pills, inline address tools, settings in the corner ---------- */
.profile-card { position: relative; }
.prof-settings {
  position: absolute; top: 14px; right: 14px; z-index: 2; display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--t80); cursor: pointer;
}
.prof-settings:hover { background: var(--fill-2); color: #fff; }
.prof-settings svg { width: 21px; height: 21px; }
.profile-id { padding-right: 40px; min-width: 0; }
.addr-row { display: flex; align-items: center; gap: 4px; }
.addr-row .mini-icon {
  display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border-radius: 6px;
  background: transparent !important; color: var(--t50);
}
.addr-row .mini-icon:hover { background: transparent !important; color: #fff; }
.addr-row .mini-icon svg, .addr-row .mini-icon .ph { width: 14px; height: 14px; }
.addr-row .profile-addr { margin-right: 2px; }
.profile-actions { gap: 8px; }
.profile-actions .pill-info { height: 36px; padding: 0 12px 0 4px; gap: 7px; }
.profile-actions .pi-logo { width: 28px; height: 28px; }
.profile-actions .pi-value { font-size: 14px; }
.profile-actions .pill-btn { height: 36px; padding: 0 16px; font-size: 14px; }

/* ---------- bid sheet: neutral text (no blue/red), the panel is frosted glass ---------- */
.sheet-state, .sheet-state[data-phase] { color: var(--t60) !important; }
#sheet [data-urgency] { color: var(--text) !important; }
.sheet-head .status, .sheet-head .status[data-tone] { background-color: var(--fill-2); color: var(--t80); }
#sheet .sh-side .sh-value { color: var(--text); }

/* ---------- edit profile: just the round photo (camera button), name and Save ---------- */
.edit-photo-btns [data-act="pick-photo"] { display: none; }
.edit-photo-btns:has(#remove-photo[hidden]) { display: none; }
#edit-note:not([data-tone="error"]) { display: none; }

/* ---------- How it works bento: filled small rectangles, no outlines ---------- */
.g95-bento .magic-bento__tile, .g95-bento .magic-bento__well { background: var(--p2); box-shadow: none; }
.gb-facts li, .gb-marker, .gb-ticket, .gb-total, .gb-channels { border: 0 !important; background: var(--p2); box-shadow: none; }
.gb-lead { border: 0 !important; background: var(--p3); }
.gb-channels li + li { border-top-color: rgba(255, 255, 255, 0.05); }
.g95-bento:not(.is-mounted) .gb-body { background: var(--p1); border: 0; }

/* ---------- start-page menu (Pill Nav): black glass, no strokes, no gap above the first row ---------- */
.top-nav .pill-nav__panel { padding: 3px 6px 8px; }
.top-nav .pill-nav__menu > li:first-child { margin-right: 42px; }
.top-nav .pill-nav__rim { box-shadow: none !important; }
.top-nav .pill-nav__surface { box-shadow: var(--float); }
.top-nav .pill-nav__row { color: var(--text); }

/* ---------- connected: the old bottom bar, black glass, no stroke ---------- */
@media (max-width: 1023px) {
  .tabbar { background: rgba(1, 1, 1, 0.86); border: 0 !important; box-shadow: none; -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%); }
  .tab { color: var(--t50); }
  .tab svg, .tab .ph { width: 24px; height: 24px; }
  .tab[aria-current="page"] { color: #fff; }
  .side-label, .side-me, .side-ext { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .tabbar { background: rgba(11, 10, 11, 0.82); box-shadow: var(--float); }
}
@media (min-width: 1024px) { .tab svg, .tab .ph { width: 22px; height: 22px; } }

/* ---------- Support section ---------- */
.support { max-width: 760px; margin: 0 auto; padding: 88px 0 24px; scroll-margin-top: 64px; }
.sup-docs { display: grid; gap: 10px; margin-top: 28px; }
.sup-doc {
  display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 14px 16px; border-radius: 20px;
  background: var(--p1); color: var(--text); text-decoration: none; transition: background-color 0.2s ease;
}
.sup-doc:hover { background: var(--p2); }
.sup-doc-ic { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 14px; background: var(--p3); color: var(--text); }
.sup-doc-ic svg { width: 22px; height: 22px; }
.sup-doc-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; text-align: left; }
.sup-doc-text b { font-size: 16px; font-weight: 500; letter-spacing: -0.01em; }
.sup-doc-text small { margin-top: 3px; font-size: 13px; color: var(--t50); }
.sup-doc-go { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--grad-button); color: #fff; }
.sup-doc-go svg { width: 18px; height: 18px; }
.sup-h { margin: 44px 0 14px; font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--t50); text-align: center; }
.sup-guides { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sup-guides li { display: flex; align-items: flex-start; gap: 14px; padding: 16px; border-radius: 20px; background: var(--p1); text-align: left; }
.sup-step { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--p3); font-size: 14px; font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; }
.sup-guides b { display: block; margin-top: 5px; font-size: 15.5px; font-weight: 500; color: var(--text); }
.sup-guides p { margin: 5px 0 0; font-size: 14px; line-height: 1.5; color: var(--t70); }
.sup-faq { border-radius: 20px; background: var(--p1); overflow: hidden; text-align: left; }
.sup-q + .sup-q { border-top: 1px solid var(--line); }
.sup-q summary {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 56px; padding: 14px 18px;
  font-size: 15px; font-weight: 500; color: var(--text); cursor: pointer; list-style: none;
}
.sup-q summary::-webkit-details-marker { display: none; }
.sup-q summary:hover { background: var(--fill-1); }
.sup-q summary svg, .sup-caret { width: 16px; height: 16px; flex: none; color: var(--t50); transition: transform 0.2s ease; }
.sup-q[open] summary svg, .sup-q[open] .sup-caret { transform: rotate(90deg); }
.sup-q p { margin: 0; padding: 0 18px 16px; font-size: 14px; line-height: 1.55; color: var(--t70); }
.sup-contact {
  display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; max-width: 320px; height: 48px; margin: 28px auto 0;
  border-radius: var(--r-pill); background: var(--p2); color: var(--text); font-size: 15px; font-weight: 500; text-decoration: none;
}
.sup-contact[hidden] { display: none; }
.sup-contact:hover { background: var(--p3); }
.sup-contact svg { width: 18px; height: 18px; }
@media (min-width: 768px) {
  .sup-docs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sup-guides { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* the same content in a sheet on the connected pages */
.support-panel { max-width: 560px; }
.support-body .sup-docs { margin-top: 16px; }
.support-body .sup-h { margin-top: 28px; }
.support-body .sup-docs, .support-body .sup-guides { grid-template-columns: minmax(0, 1fr); }
.support-body .sup-doc, .support-body .sup-guides li, .support-body .sup-faq { background: var(--fill-1); }
.support-body .sup-doc-ic, .support-body .sup-step { background: var(--fill-2); }

/* ---------- footer ---------- */
.foot-tag { font-size: 13.5px; line-height: 1.5; color: var(--t50); }
.foot-up, .foot-bottom .copy { display: none !important; }

/* ---------- Telegram page: launch countdown (React Bits Counter digits) ---------- */
.launch-pill .pulse-dot { background: var(--blue); box-shadow: 0 0 0 3px rgba(57, 163, 240, 0.18); }
.launch-pill .launch-label { color: var(--text); }
.launch-clock { display: flex; justify-content: center; align-items: stretch; gap: 6px; width: min(100%, 460px); margin: 26px auto 0; }
.lc-unit { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1 1 0; min-width: 0; padding: 14px 4px 12px; border-radius: 20px; background: var(--p1); }
.lc-num { display: block; font-size: clamp(32px, 10vw, 52px); font-weight: 500; line-height: 1; letter-spacing: -0.02em; color: var(--text); }
.lc-cap { font-size: 10.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t50); }
.lc-sep { align-self: center; margin-top: -20px; font-size: 24px; font-weight: 500; color: var(--t30); }
.hero[data-state="live"] .launch-clock { opacity: 0.55; }
html.tg .hero { padding-bottom: 8px; }
html.tg .cta-row { margin-top: 28px; }
@media (min-width: 1024px) {
  html.tg .hero > .launch-clock { grid-row: 3; justify-self: start; margin: 28px 0 0; }
}
body[data-view="landing"] .foot { background: linear-gradient(180deg, rgba(11, 10, 11, 0.7) 0%, #010101 100%); }
.benefit-art .benefit-still { display: block; width: 124px; height: 124px; object-fit: contain; }