:root {
  --clone-base: #cdccd2;
  --clone-panel: #c6c5cc;
  --clone-border: #bcbac2;
  --clone-text: #211f22;
  --clone-muted: #6c6876;
  --clone-accent: #ffa5c3;
}

html,
body {
  min-height: 100%;
  background: #d2d0d5;
}

#clone-layer {
  position: relative;
  z-index: 10000;
}

.clone-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgb(195 0 66/72%);
  backdrop-filter: blur(2px);
  animation: clone-fade-in 160ms ease-out;
}

.clone-overlay {
  position: fixed;
  z-index: 10001;
  color: var(--clone-text);
  background: var(--clone-panel);
  border: 1px solid var(--clone-border);
  box-shadow: 0 20px 60px rgb(0 0 0 / 48%);
  animation: clone-scale-in 170ms ease-out;
}

.clone-modal {
  top: 50%;
  left: 50%;
  width: min(800px, calc(100vw - 32px));
  max-height: min(680px, calc(100vh - 32px));
  overflow: auto;
  border-radius: 12px;
  transform: translate(-50%, -50%);
}

.clone-panel {
  top: 62px;
  right: 18px;
  width: 360px;
  max-width: calc(100vw - 32px);
  border-radius: 10px;
}

.clone-menu {
  width: 224px;
  min-width: 190px;
  padding: 6px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: color-mix(in srgb, var(--clone-panel) 88%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid rgb(255 255 255 / 26%);
  box-shadow:
    inset 0 1px 1px rgb(255 255 255 / 45%),
    0 2px 6px rgb(0 0 0 / 8%),
    0 16px 40px -8px rgb(0 0 0 / 24%);
  contain: layout paint;
  will-change: transform, opacity;
  transform-origin: top left;
  transform: translate3d(0, -4px, 0) scale(.94);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  animation: none;
  transition:
    transform .16s cubic-bezier(.34, 1.2, .35, 1),
    opacity .1s ease,
    visibility 0s .1s;
}

.clone-more-menu {
  width: 224px;
}

img[alt="menu"] {
  cursor: pointer;
}

.clone-menu[data-open] {
  transform: translate3d(0, 0, 0) scale(1);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    transform .16s cubic-bezier(.34, 1.2, .35, 1),
    opacity .1s ease;
}

.slate-menu-item,
.slate-menu-divider {
  opacity: 0;
  translate: 0 -4px;
  transition:
    opacity .12s ease,
    translate .14s cubic-bezier(.34, 1.2, .4, 1);
}

.clone-menu[data-open] .slate-menu-item,
.clone-menu[data-open] .slate-menu-divider {
  opacity: 1;
  translate: 0 0;
  transition-delay: calc(var(--i, 0) * .008s);
}

.clone-menu .slate-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 42px;
  min-height: 42px;
  padding: 0 12px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--clone-text);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition:
    opacity .12s ease,
    translate .14s cubic-bezier(.34, 1.2, .4, 1),
    background-color .12s ease,
    font-weight .12s ease;
}

.clone-menu .slate-menu-item:hover {
  color: var(--clone-text);
  background: rgb(255 255 255 / 24%);
  font-weight: 600;
}

.clone-menu .slate-menu-item:focus-visible {
  outline: 2px solid var(--clone-accent);
  outline-offset: -2px;
}

.slate-menu-icon {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  object-fit: contain;
}

.slate-menu-hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  color: var(--clone-muted);
  font-size: 11px;
  white-space: nowrap;
}

.slate-menu-hint .slate-menu-icon {
  width: 18px;
  height: 18px;
  flex-basis: 18px;
}

.slate-menu-item[role="menuitemcheckbox"]:not([data-checked]) .slate-menu-hint {
  opacity: 0;
}

.slate-menu-divider {
  display: block;
  height: 1px;
  margin: 4px 8px;
  background: rgb(0 0 0 / 8%);
}

.clone-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--clone-border);
  font-size: 17px;
  font-weight: 650;
}

.clone-content {
  padding: 18px 20px 22px;
}

.clone-close,
.clone-menu button,
.clone-option,
.clone-wallet,
.clone-chip {
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

/* The close every overlay shares: a ghost circle that only shows its chip on
   hover — same recipe as the wallet sheet, the deposit sheet and the toasts.
   (The old #c0bec5 block was the capture scaffold's placeholder grey.) */
.clone-close {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  color: #9aa1a9;
  font-size: 17px;
  line-height: 1;
  transition: background 0.15s ease, color 0.15s ease;
}

.clone-close:hover {
  color: #17181a;
  background: #ededec;
}

.clone-menu button,
.clone-option {
  display: flex;
  width: 100%;
  min-height: 40px;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 7px;
  color: #57545e;
  background: transparent;
  text-align: left;
}

.clone-menu button:hover,
.clone-option:hover,
.clone-option[aria-selected="true"] {
  color: white;
  background: #bebcc3;
}

.clone-divider {
  height: 1px;
  margin: 8px 0;
  background: var(--clone-border);
}

.clone-searchbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--clone-border);
}

.clone-searchbar input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  color: white;
  background: transparent;
  font: inherit;
}

.clone-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.clone-chip {
  padding: 7px 12px;
  border-radius: 7px;
  color: var(--clone-muted);
  background: #c2c0c7;
}

.clone-chip.active {
  color: white;
  outline: 1px solid var(--clone-accent);
}

.clone-token-list,
.clone-wallet-grid,
.clone-setting-list {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.clone-token,
.clone-setting,
.clone-wallet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #c3c1c8;
}

.clone-token:hover,
.clone-wallet:hover {
  background: #bcbac2;
}

.clone-token-icon,
.clone-wallet-icon {
  display: inline-grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-items: center;
  border-radius: 50%;
  color: white;
  background: linear-gradient(135deg, #ff87b0, #ffa5c3);
  font-size: 11px;
  font-weight: 700;
}

.clone-token-main,
.clone-wallet-main {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 10px;
}

.clone-muted {
  color: var(--clone-muted);
}

.clone-empty {
  display: grid;
  min-height: 360px;
  place-items: center;
  padding: 40px;
  color: var(--clone-muted);
  text-align: center;
  background: #cecdd2;
  border-top: 1px solid var(--clone-border);
}

.clone-empty strong {
  display: block;
  margin-bottom: 8px;
  color: white;
  font-size: 16px;
}

.clone-hover-card,
.clone-tooltip {
  position: fixed;
  z-index: 10002;
  max-width: 340px;
  padding: 10px 12px;
  border: 1px solid var(--clone-border);
  border-radius: 8px;
  color: #28272c;
  background: #c3c1c8;
  box-shadow: 0 12px 36px rgb(0 0 0 / 42%);
  font-size: 12px;
  line-height: 1.55;
  pointer-events: none;
  animation: clone-fade-in 120ms ease-out;
}

.clone-hover-card {
  width: 300px;
  pointer-events: auto;
}

.clone-breakdown {
  display: grid;
  gap: 9px;
}

.clone-breakdown-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
}

@keyframes clone-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes clone-scale-in {
  from { opacity: 0; transform: translate(-50%, -48%) scale(.985); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes clone-slide-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 767px) {
  /* .clone-modal is deliberately NOT here. Pinning it to the bottom edge set
     top/left/right at once, and the explicit width in the shared
     .clone-overlay.clone-modal rule then beat `right`, leaving the modal 16px
     off-centre. Its desktop centring (top/left 50% + translate) is already
     viewport-relative, so it just works on a phone; only the margins shrink,
     below. .clone-panel has no competing width, so it stays a sheet. */
  .clone-panel {
    top: auto;
    right: 8px;
    bottom: 8px;
    left: 8px;
    width: auto;
    max-width: none;
    max-height: min(78vh, 640px);
    border-radius: 12px;
    transform: none;
    animation-name: clone-slide-up;
  }

  /* a centred modal on a phone wants thinner side margins and more height than
     the 800px/680px desktop box allows */
  .clone-overlay.clone-modal {
    width: min(420px, calc(100vw - 24px));
    max-height: calc(100vh - 48px);
  }

  .clone-menu[data-open] {
    transform: none;
  }

  .clone-content {
    padding: 14px;
  }

  .clone-wallet-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .clone-menu,
  .slate-menu-item,
  .slate-menu-divider {
    transition-duration: .01s !important;
    transition-delay: 0s !important;
  }
}

/* ===== Silo: slate / macOS-style redesign ===== */
body,
button,
input {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Helvetica Neue", sans-serif !important;
}

.bg-v2-header-gradient { height: 90px !important; }
body { background: #ffffff !important; }

/* main tabs -> fluid inset track with sliding pink thumb (thumb injected by silo-ui.js) */
[role="tablist"] { margin-bottom: 2px; }
[role="tablist"] > div:first-child:not(.silo-tab-thumb) {
  position: relative;
  background: #e3e8ee;
  border-radius: 999px;
  padding: 4px;
  gap: 0 !important;
  align-items: center !important;
}
[role="tab"] {
  position: relative;
  z-index: 1;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #55606e !important;
  opacity: 1 !important;
  white-space: nowrap;
  background: transparent !important;
  border: none !important;
  transition: color 0.2s ease;
}
[role="tab"]:hover { color: #0f172a !important; }
[role="tab"][data-state="active"] {
  color: #fff !important;
  box-shadow: none !important;
}
.silo-tab-thumb {
  position: absolute;
  top: 4px;
  bottom: 4px;
  z-index: 0;
  border-radius: 999px;
  background: #ff80ab;
  box-shadow: 0 2px 8px rgba(255, 128, 171, 0.45);
  transition: left 0.28s cubic-bezier(0.25, 1, 0.4, 1), width 0.28s cubic-bezier(0.25, 1, 0.4, 1);
}
.silo-tab-thumb[data-instant] { transition: none; }

/* toolbar -> quiet soft-fill chips (fluid functionalism style) */
div[role="button"][class*="min-w-[266px]"],
button[class*="h-9"][class*="rounded-md"],
button[aria-label="Columns"] > div {
  background: #e9edf2 !important;
  border: none !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  color: #3f4854 !important;
  transition: background 0.2s ease, color 0.2s ease;
}
div[role="button"][class*="min-w-[266px]"] { min-width: 210px !important; padding-left: 14px !important; }
div[role="button"][class*="min-w-[266px]"]:hover,
button[class*="h-9"][class*="rounded-md"]:hover,
button[aria-label="Columns"]:hover > div {
  /* neutral grey, one step darker than the chip's own fill — the old #dde3ea
     was a bluish slate that read as a different material on hover */
  background: #e2e2e0 !important;
  color: #17181a !important;
}
button[aria-label="Columns"] { border: 0 !important; background: transparent !important; box-shadow: none !important; }
button[aria-label="Columns"] > div { height: 36px; width: 36px; }
/* filter count badge */
button[class*="rounded-md"] [class*="bg-v2-danger"],
button[class*="rounded-md"] .bg-v2-danger-primary {
  background-color: #ff80ab !important;
  color: #fff !important;
  box-shadow: 0 0 0 2px #fff;
}

/* Ape In column hidden (control removed from toolbar) */
table:not(.sm-table) thead th:last-child,
table:not(.sm-table) tbody td:last-child { display: none !important; }

/* neutrals shift from warm gray to slate in panels, chips and rows */
.bg-v2-base--1 { background-color: #e9edf2 !important; }
.bg-v2-base--2 { background-color: #e1e7ee !important; }
.bg-v2-base-0 { background-color: #dfe5ec !important; }
.bg-v2-base-1 { background-color: #d8dfe8 !important; }
.bg-v2-base-2 { background-color: #ccd5e0 !important; }
.group:hover .group-hover\:bg-v2-base-1 { background-color: #f0f3f7 !important; }
[class*="border-v2-border"] { border-color: #c3ccd8 !important; }
table:not(.sm-table) td,
table:not(.sm-table) th { border-color: #d3dae2 !important; }

/* legacy pool-type selector removed */
[data-sentry-source-file="SlidingButtonGroup.tsx"],
[data-sentry-component="PercentSlidingGroup"] { display: none !important; }

/* mobile tablist (tabs are direct children, horizontally scrollable) */
[role="tablist"][class*="overflow-x-auto"] {
  position: relative;
  background: #e3e8ee;
  border-radius: 999px;
  padding: 4px !important;
  gap: 2px !important;
  margin: 0 14px 6px;
}

/* ===== Silo: slate-style modal + wallet list ===== */
.clone-overlay.clone-modal {
  background: #fff !important;
  border: none !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22) !important;
  width: min(400px, calc(100vw - 32px));
}
.clone-overlay.clone-modal .clone-heading {
  font-weight: 700;
  font-size: 16px;
  border: none !important;
}
.clone-overlay.clone-modal .clone-muted {
  font-size: 12.5px;
  line-height: 1.5;
  color: #7c8694;
}
.clone-wallet-grid {
  display: flex !important;
  flex-direction: column;
  gap: 6px;
  max-height: 46vh;
  overflow-y: auto;
}
.clone-wallet {
  background: #f2f4f8 !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  transition: background 0.15s ease;
}
.clone-wallet:hover { background: #e7ebf1 !important; }
.clone-wallet-main {
  gap: 12px !important;
  align-items: center;
  font-weight: 600;
  font-size: 14px;
  color: #0f172a;
}
.clone-wallet-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 10px !important;
  background: #ffe3ed !important;
  color: #e0447c !important;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.clone-backdrop {
  background: rgba(15, 23, 42, 0.45) !important;
  backdrop-filter: blur(3px);
}

.search-pal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 13vh 20px 20px;
  background: rgba(31, 30, 27, 0.28);
  backdrop-filter: blur(6px);
  animation: search-fade 140ms ease both;
}

@keyframes search-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.search-pal {
  --paper: #faf9f7;
  --soft: #efeeeb;
  --soft-deep: #e8e7e3;
  --soft-hover: #f3f2ef;
  --text: #121210;
  --muted: #6f6e69;
  display: flex;
  width: 560px;
  max-width: 100%;
  max-height: min(560px, 74vh);
  flex-direction: column;
  border-radius: 18px;
  background: var(--paper);
  color: var(--text);
  box-shadow: 0 32px 90px -12px rgba(18, 18, 16, 0.35);
  overflow: hidden;
  animation: search-rise 180ms cubic-bezier(0.3, 1.1, 0.4, 1) both;
}

@keyframes search-rise {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

.search-pal-field {
  display: flex;
  flex: none;
  align-items: center;
  gap: 11px;
  padding: 16px 18px 13px;
}

.search-pal-field svg {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--muted);
}

.search-pal-field input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 16px;
  font-weight: 540;
  outline: none;
}

.search-pal-field input::placeholder {
  color: #b3b0a8;
}

.search-pal kbd {
  flex: none;
  padding: 3px 7px;
  border-radius: 6px;
  background: var(--soft-hover);
  color: var(--muted);
  font-family: inherit;
  font-size: 10px;
  font-weight: 620;
}

.search-pal-chips {
  display: flex;
  flex: none;
  gap: 5px;
  padding: 0 14px 12px;
  overflow-x: auto;
}

.search-pal-chips button {
  display: inline-flex;
  height: 26px;
  flex: none;
  align-items: center;
  padding: 0 11px;
  border: 0;
  border-radius: 999px;
  background: var(--soft-hover);
  color: #55534e;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  font-weight: 550;
  white-space: nowrap;
  transition: background 130ms ease, color 130ms ease;
}

.search-pal-chips button:hover {
  background: var(--soft);
}

.search-pal-chips button.is-active {
  background: var(--soft-deep);
  color: var(--text);
  font-weight: 650;
}

.search-pal-results {
  flex: 1;
  min-height: 120px;
  padding: 4px 8px 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.search-pal-row {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

.search-pal-row:hover,
.search-pal-row.is-hot {
  background: var(--soft-hover);
}

.search-pal-logo {
  display: flex;
  width: 34px;
  flex: 0 0 34px;
  align-items: center;
}

.search-pal-logo img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--paper);
  object-fit: cover;
}

.search-pal-logo img + img {
  margin-left: -10px;
}

.search-pal-name {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
}

.search-pal-name strong {
  overflow: hidden;
  font-size: 13px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-pal-name small {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-pal-return {
  flex: none;
  padding: 3px 8px;
  border-radius: 7px;
  background: var(--soft-hover);
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.search-pal-row.is-hot .search-pal-return {
  background: var(--paper);
}

.search-pal-price {
  display: flex;
  min-width: 64px;
  flex: none;
  flex-direction: column;
  align-items: flex-end;
}

.search-pal-price strong {
  font-size: 12.5px;
  font-weight: 640;
  font-variant-numeric: tabular-nums;
}

.search-pal-price small {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 600;
}

.search-pal-empty {
  padding: 44px 0;
  color: var(--muted);
  font-size: 12.5px;
  text-align: center;
}

.search-pal-foot {
  display: flex;
  flex: none;
  gap: 16px;
  padding: 9px 16px;
  background: var(--soft-hover);
  color: var(--muted);
  font-size: 10.5px;
}

.search-pal-foot span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.search-pal-foot kbd {
  background: var(--paper);
}

@media (max-width: 480px) {
  .search-pal-overlay {
    padding: 72px 10px 10px;
  }

  .search-pal {
    max-height: calc(100dvh - 82px);
  }

  .search-pal-return {
    display: none;
  }

  .search-pal-foot {
    gap: 10px;
    padding-inline: 12px;
    font-size: 9.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .search-pal-overlay,
  .search-pal {
    animation-duration: .01s;
  }
}

/* ===== Silo: slate pass 2 ===== */
/* 1) toolbar strip must not share the chip fill */
div[class*="lg:bg-transparent"] { background: transparent !important; }

/* 2) markets area: outlined card, white inside, hairline rows */
div:has(> table) {
  background: #fff;
  border: 1px solid #d9dee6;
  border-radius: 14px !important;
}
.bg-v2-base--1 { background-color: #fff !important; }
thead .bg-v2-base-0 { background-color: #fbfcfd !important; }
table:not(.sm-table) td { border-color: #eceff3 !important; }
table:not(.sm-table) th { border-color: #e3e7ed !important; }
.group:hover .group-hover\:bg-v2-base-1 { background-color: #f4f6f9 !important; }

/* 3) dropdown menus -> native macOS style */
.clone-overlay.clone-menu,
.clone-overlay.clone-more-menu {
  background: rgba(252, 252, 253, 0.9) !important;
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 12px !important;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16), 0 2px 8px rgba(15, 23, 42, 0.08) !important;
  padding: 5px !important;
  min-width: 220px;
}
.clone-menu .slate-menu-item,
.clone-menu button {
  border-radius: 8px !important;
  padding: 7px 10px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #1f2530 !important;
  gap: 10px !important;
  background: transparent !important;
  transition: background 0.1s ease, color 0.1s ease;
}
.clone-menu .slate-menu-item:hover,
.clone-menu button:hover {
  background: #ff80ab !important;
  color: #fff !important;
}
.clone-menu .slate-menu-item:hover .slate-menu-hint { color: #fff !important; }
.clone-menu .slate-menu-divider {
  height: 1px !important;
  background: rgba(15, 23, 42, 0.08) !important;
  margin: 4px 8px !important;
}
.slate-menu-hint { color: #9aa3af; }
.slate-menu-icon { width: 18px; height: 18px; object-fit: contain; }

/* ===== Silo: folder-tab tabs + floating toolbar (per sketch) ===== */
/* header row: transparent, tab block bottom-aligned to the card edge */
div[class*="lg:gap-2.5"][class*="justify-between"] {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
  align-items: flex-end !important;
}
[role="tablist"] { margin-bottom: 0 !important; }

/* the tab strip is a folder tab attached to the card's top-left */
[role="tablist"] > div:first-child:not(.silo-tab-thumb) {
  position: relative;
  z-index: 2;
  background: #fff;
  border: 1px solid #d9dee6;
  border-bottom: none;
  border-radius: 14px 14px 0 0;
  padding: 6px;
  margin-bottom: -1px;
}
[role="tablist"][class*="overflow-x-auto"] {
  position: relative;
  z-index: 2;
  background: #fff !important;
  border: 1px solid #d9dee6;
  border-bottom: none;
  border-radius: 14px 14px 0 0;
  padding: 6px !important;
  margin: 0 !important;
}

/* markets card keeps its own outline; tab overlaps the border seam */
div:has(> table) { border-radius: 0 14px 14px 14px !important; }

/* toolbar floats above the card, right-aligned */
div[class*="lg:bg-transparent"] { margin-bottom: 8px; }
div[class*="md:mt-2"][class*="flex-col"] { margin-top: 0 !important; }

.clone-menu .slate-menu-item:hover,
.clone-menu button:hover {
  background: rgba(15, 23, 42, 0.06) !important;
  color: #1f2530 !important;
}

.clone-menu .slate-menu-item:hover .slate-menu-hint {
  color: #6c7480 !important;
}

.clone-menu .slate-menu-item:focus-visible {
  outline-color: #7c8694;
}

.clone-token-menu {
  width: 280px;
  max-width: calc(100vw - 16px);
}

@media (max-width: 767px) {
  .clone-menu:not(.clone-more-menu) {
    width: auto !important;
  }
}

/* ===== Silo: compact liquidity-first markets table + squircle tabs ===== */
/* page white, markets card a soft slate tint */
div:has(> table) {
  background: #f7f9fb;
  border-color: #e3e8ec;
}
.bg-v2-base--1 { background-color: #f7f9fb !important; }
thead .bg-v2-base-0 { background-color: #f7f9fb !important; }
table:not(.sm-table) td { border-color: #e9edf1 !important; }
table:not(.sm-table) th { border-color: #e2e7ec !important; }
.group:hover .group-hover\:bg-v2-base-1 { background-color: #eef2f6 !important; }

/* folder tab merges with the card tint */
[role="tablist"] > div:first-child:not(.silo-tab-thumb),
[role="tablist"][class*="overflow-x-auto"] {
  background: #f7f9fb !important;
  border-color: #e3e8ec;
}

/* squircle active-tab indicator, soft pink */
.silo-tab-thumb {
  border-radius: 9px;
  background: #ffd9e7;
  box-shadow: none;
}
[role="tab"] {
  border-radius: 9px;
  padding: 6px 14px;
}
[role="tab"][data-state="active"] { color: #e0447c !important; }

/* only the stats that matter for a liquidity protocol:
   market, price trend, price, TVL, fees, volume */
table:not(.sm-table) :is(th, td):is(:nth-child(4), :nth-child(5), :nth-child(8), :nth-child(10),
  :nth-child(n+12):nth-child(-n+22)) { display: none !important; }
table { min-width: 0 !important; }

/* compact rows */
table:not(.sm-table) td { padding-top: 8px !important; padding-bottom: 8px !important; }
table:not(.sm-table) thead th { padding-top: 8px !important; padding-bottom: 8px !important; }
table:not(.sm-table) canvas { height: 32px !important; width: 84px !important; }
table:not(.sm-table) div[class*="h-[50px]"] { height: 32px !important; width: 84px !important; }
table:not(.sm-table) td { font-size: 13px !important; }

/* ===== Silo: navbar search — centered grey squircle ===== */
/* give the header's three zones equal flex so the search zone sits at the
   true center of the bar (left keeps links at start, right keeps wallet at end) */
@media (min-width: 768px) {
  div[class*="h-[45px]"][class*="justify-between"] > div { flex: 1 1 0 !important; }
  div[class*="h-[45px]"][class*="justify-between"] > div:last-child { justify-content: flex-end !important; }
  div[class*="flex-1"][class*="md:justify-end"] { justify-content: center !important; }
}

/* the trigger itself: soft grey squircle instead of the outlined white pill */
button:has(> svg[data-sentry-source-file="UniversalSearch.tsx"]) {
  background: #ededec !important; /* same grey as Filter Token / toolbar chips */
  border: none !important;
  border-radius: 12px !important;
  corner-shape: squircle;
  padding-left: 12px !important;
  transition: background 0.2s ease;
}
button:has(> svg[data-sentry-source-file="UniversalSearch.tsx"]):hover {
  background: #e2e2e0 !important;
}
button:has(> svg[data-sentry-source-file="UniversalSearch.tsx"]) span {
  color: #55606e !important;
}
button:has(> svg[data-sentry-source-file="UniversalSearch.tsx"]) > svg {
  color: #7c8694 !important;
}
button:has(> svg[data-sentry-source-file="UniversalSearch.tsx"]) kbd {
  background: #d9d9d6 !important; /* darker grey chip on the grey field */
  color: #4b5563 !important;
  border-radius: 5px !important;
  box-shadow: none !important;
}

/* ===== Silo: Slate design language pass ===== */
body { background: #f4f4f2 !important; }

/* one flat rounded card: header row is the card top, table:not(.sm-table) the body */
div[class*="lg:gap-2.5"][class*="justify-between"] {
  background: #fcfcfb !important;
  border: none !important;
  border-radius: 20px 20px 0 0 !important;
  padding: 18px 20px 8px !important;
  margin-bottom: 0 !important;
  align-items: center !important;
  gap: 12px !important;
}
div:has(> table) {
  background: #fcfcfb !important;
  border: none !important;
  border-radius: 0 0 20px 20px !important;
}
.silo-card-title {
  font-family: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #17181a;
  margin-right: auto;
}
div[class*="lg:gap-2.5"] > [role="tablist"] { order: 3; }
div[class*="lg:bg-transparent"] { order: 2; margin-bottom: 0 !important; }

/* compact segmented tabs: gray track, white squircle chip, pink active label */
[role="tablist"] > div:first-child:not(.silo-tab-thumb),
[role="tablist"][class*="overflow-x-auto"] {
  background: #ededec !important;
  border: none !important;
  border-radius: 11px !important;
  padding: 3px !important;
  margin: 0 !important;
}
[role="tab"] {
  padding: 5px 12px !important;
  font-size: 12.5px !important;
  border-radius: 8px !important;
}
.silo-tab-thumb {
  background: #fff;
  border-radius: 8px;
  top: 3px;
  bottom: 3px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(15, 23, 42, 0.05);
}
[role="tab"][data-state="active"] { color: #e0447c !important; }

/* toolbar chips match the track tone */
/* width is set alongside the chip's clear button in silo-toolbar.css */
div[role="button"][class*="min-w-[266px]"] { background: #ededec !important; }
button[class*="h-9"][class*="rounded-md"] { background: #ededec !important; }
button[aria-label="Columns"] > div { background: #ededec !important; }

/* table: flat card surface, hairline row separators only */
.bg-v2-base--1 { background-color: #fcfcfb !important; }
thead .bg-v2-base-0 { background-color: #fcfcfb !important; }
table:not(.sm-table) td { border-color: #ececea !important; }
table:not(.sm-table) th { border-color: #e5e5e3 !important; }
.group:hover .group-hover\:bg-v2-base-1 { background-color: #f3f4f2 !important; }
table:not(.sm-table) thead th { font-size: 11px !important; color: #9aa1a9 !important; }
table:not(.sm-table) td { padding-top: 10px !important; padding-bottom: 10px !important; }

/* strip row noise: protocol chips, warning/feature hover icons */
table:not(.sm-table) td span[class*="text-3xs"] { display: none !important; }
table:not(.sm-table) td button[data-slot="hover-card-trigger"] { display: none !important; }

/* ===== Silo: title font (sans) + liquid-glass tab selector ===== */
.silo-card-title {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Helvetica Neue", sans-serif !important;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* segmented track restored; labels stay gray — pink is revealed by the lens mask */
[role="tab"][data-state="active"] { color: #55606e !important; }
[role="tab"] { z-index: 1; }

/* pink text layer, clipped to the lens rect */
.silo-tab-pink {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  transition: clip-path 0.32s cubic-bezier(0.25, 1, 0.4, 1);
}
.silo-tab-pink span {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  color: #e0447c;
}

/* the lens: iOS-style liquid glass sliding above the labels */
.silo-tab-thumb {
  display: block !important;
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.09);
  backdrop-filter: url(#silo-glass-distortion) saturate(1.15);
  -webkit-backdrop-filter: saturate(1.15);
  will-change: transform;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 0 rgba(255, 255, 255, 0.25),
    inset 1px 0 0 rgba(255, 255, 255, 0.3),
    inset -1px 0 0 rgba(255, 255, 255, 0.3),
    0 2px 8px rgba(15, 23, 42, 0.18);
  transition: transform 0.32s cubic-bezier(0.25, 1, 0.4, 1);
}
.silo-tab-thumb[data-instant],
.silo-tab-pink[data-instant] { transition: none !important; }

/* deep inset well for the tab track */
[role="tablist"] > div:first-child:not(.silo-tab-thumb),
[role="tablist"][class*="overflow-x-auto"] {
  background: #e6e6e4 !important;
  box-shadow:
    inset 0 2px 4px rgba(15, 23, 42, 0.16),
    inset 0 1px 1px rgba(15, 23, 42, 0.10),
    inset 0 -1px 0 rgba(255, 255, 255, 0.75),
    inset 0 0 0 1px rgba(15, 23, 42, 0.03);
}

/* ===== Silo: search palette docks to the navbar search bar ===== */
.search-pal-overlay.is-docked {
  display: block;
  padding: 0;
}
.search-pal.is-docked {
  position: fixed;
  margin: 0;
  animation: none; /* Motion drives the expand/collapse morph */
  transform-origin: top center;
  will-change: left, width, height;
}

/* ===== Slate menu contract ===== */
.clone-overlay.clone-menu,
.clone-overlay.clone-more-menu,
.clone-overlay.clone-token-menu {
  width: 224px !important;
  min-width: 224px !important;
  max-width: calc(100vw - 16px) !important;
  padding: 6px !important;
  border: 1px solid rgba(0, 0, 0, .06) !important;
  border-radius: 20px !important;
  gap: 2px !important;
  background: color-mix(in srgb, #fff 88%, transparent) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.5) !important;
  backdrop-filter: blur(18px) saturate(1.5) !important;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .5),
    0 2px 6px rgba(0, 0, 0, .06),
    0 16px 40px -8px rgba(0, 0, 0, .18) !important;
  contain: none;
  transform-origin: top right !important;
  transform: scale(.86) translateY(-6px) !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    transform .38s cubic-bezier(.34, 1.35, .35, 1),
    opacity .22s ease,
    visibility 0s .22s !important;
}

.clone-overlay.clone-menu[data-open] {
  transform: scale(1) translateY(0) !important;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    transform .38s cubic-bezier(.34, 1.35, .35, 1),
    opacity .18s ease !important;
}

.clone-menu .slate-menu-item,
.clone-menu .slate-menu-divider {
  opacity: 0;
  translate: 0 -4px;
  transition:
    opacity .24s ease,
    translate .3s cubic-bezier(.34, 1.3, .4, 1);
}

.clone-menu[data-open] .slate-menu-item,
.clone-menu[data-open] .slate-menu-divider {
  opacity: 1;
  translate: 0;
  transition-delay: calc(.05s + var(--i, 0) * .035s);
}

.clone-menu .slate-menu-item,
.clone-menu button.slate-menu-item {
  display: flex;
  align-items: center;
  gap: 10px !important;
  width: 100%;
  height: 40px;
  min-height: 40px;
  padding: 0 12px !important;
  border: 0;
  border-radius: 14px !important;
  background: transparent !important;
  color: #100f0f !important;
  font-size: 14px !important;
  font-weight: 480 !important;
  font-variation-settings: "wght" 480;
  letter-spacing: -.22px;
  text-decoration: none;
  text-align: left;
  white-space: nowrap;
  transition:
    background-color .15s ease,
    font-variation-settings .25s ease;
}

.clone-menu .slate-menu-item > span:not(.slate-menu-hint) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.clone-menu .slate-menu-item:hover,
.clone-menu button.slate-menu-item:hover {
  background: rgba(0, 0, 0, .05) !important;
  color: #100f0f !important;
  font-variation-settings: "wght" 560;
}

.clone-menu .slate-menu-item:focus-visible {
  outline: 2px solid #1a7fd4 !important;
  outline-offset: -2px;
}

.clone-menu .slate-menu-icon {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
}

.clone-menu .slate-menu-hint,
.clone-menu .slate-menu-item:hover .slate-menu-hint {
  margin-left: auto;
  color: #918e8e !important;
}

.clone-menu .slate-menu-hint .slate-menu-icon {
  width: 16px !important;
  height: 16px !important;
  flex-basis: 16px !important;
}

.clone-menu .slate-menu-divider {
  height: 1px !important;
  margin: 4px 8px !important;
  background: rgba(0, 0, 0, .06) !important;
}

/* ===== Silo: liquid glass v2 — refracting rim, clear center, gel spring ===== */
.silo-tab-thumb {
  display: block !important;
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: 9px;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  will-change: transform;
  transition: transform 0.42s cubic-bezier(0.34, 1.45, 0.5, 1) !important;
}
.silo-lens-inner {
  position: absolute;
  inset: 0;
  border-radius: 9px;
}
/* rim: thin ring that bends the light under the lens edge — always on, like iOS */
.silo-lens-rim {
  position: absolute;
  inset: 0;
  border-radius: 9px;
  padding: 3.5px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  backdrop-filter: url(#silo-glass-distortion) blur(0.4px) saturate(1.3) brightness(1.05);
  -webkit-backdrop-filter: blur(1.5px) saturate(1.3) brightness(1.05);
}
/* clear glass center: crisp text beneath, slight tint + specular highlights */
.silo-lens-body {
  position: absolute;
  inset: 0;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: saturate(1.12);
  -webkit-backdrop-filter: saturate(1.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 0 rgba(255, 255, 255, 0.25),
    inset 1px 0 0 rgba(255, 255, 255, 0.3),
    inset -1px 0 0 rgba(255, 255, 255, 0.3),
    0 2px 8px rgba(15, 23, 42, 0.16);
}
.silo-tab-pink { transition: clip-path 0.42s cubic-bezier(0.34, 1.45, 0.5, 1) !important; }
.silo-tab-thumb[data-instant],
.silo-tab-pink[data-instant] { transition: none !important; }

/* glass v3: center is pure pass-through (no plate look); refraction only on the
   curved side edges, so no ghosting above/below the label */
.silo-lens-body {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(255, 255, 255, 0.18),
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.28),
    0 2px 6px rgba(15, 23, 42, 0.14) !important;
}
.silo-lens-rim {
  padding: 0 !important;
  -webkit-mask: linear-gradient(to right, #000 0 7px, transparent 10px calc(100% - 10px), #000 calc(100% - 7px) 100%) !important;
  mask: linear-gradient(to right, #000 0 7px, transparent 10px calc(100% - 10px), #000 calc(100% - 7px) 100%) !important;
  -webkit-mask-composite: source-over !important;
  mask-composite: add !important;
  backdrop-filter: url(#silo-glass-distortion) saturate(1.15) !important;
  -webkit-backdrop-filter: blur(1px) saturate(1.15) !important;
}

/* flat track: depth/inset shadows removed */
[role="tablist"] > div:first-child:not(.silo-tab-thumb),
[role="tablist"][class*="overflow-x-auto"] {
  background: #ededec !important;
  box-shadow: none !important;
}

/* pull the markets card up toward the navbar */
[data-sentry-component="Home"] { margin-top: 6px !important; }
div[class*="min-h-[calc"] { margin-top: 0 !important; }
div[class*="md:mt-7"] { margin-top: 8px !important; }

/* markets card fills to the viewport bottom; only the table scrolls */
body { overflow: hidden; }
div:has(> table) {
  height: calc(100vh - var(--silo-top, 126px)) !important;
  max-height: none !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* higher-specificity fill (a base rule pins max-height with !important) */
div[class*="overflow-auto"][class*="max-h-[calc"] {
  height: calc(100vh - var(--silo-top, 126px)) !important;
  max-height: none !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* ===== Silo: Slate-style rows ===== */
/* no rank / star column */
table:not(.sm-table) :is(th, td):nth-child(1) { display: none !important; }

/* one large token icon, Slate-style */
td span[data-sentry-component="TokenLogo"] ~ span[data-sentry-component="TokenLogo"] { display: none !important; }
td span[data-sentry-component="TokenLogo"] img {
  width: 34px !important;
  height: 34px !important;
}

/* clean single-line values: drop the sub-percentages */
tbody td .text-v2-success-primary,
tbody td .text-v2-danger-primary { display: none !important; }

/* airy rows, stronger primary values */
table:not(.sm-table) td { padding-top: 14px !important; padding-bottom: 14px !important; font-size: 13.5px !important; }
tbody td { color: #232830 !important; }

/* trailing chevron like Slate */
tbody td:nth-child(11) { position: relative; padding-right: 40px !important; }
tbody td:nth-child(11)::after {
  content: "›";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 17px;
  color: #b3bac2;
}
tbody tr:hover td:nth-child(11)::after { color: #6b7280; }

/* hide rank+star blocks (desktop and mobile variants) */
tbody td div.flex.flex-col.items-center.justify-center.gap-1 { display: none !important; }
tbody td button[class*="-m-1"] { display: none !important; }
/* single token icon: hide the second token wrapper in the pool logo */
tbody td div[data-sentry-component="renderLogo"] > div:not(:first-child) { display: none !important; }
tbody td [data-sentry-component="TokenLogo"],
tbody td [data-sentry-component="TokenLogo"] span {
  width: 34px !important;
  height: 34px !important;
}
/* neutral 0% sublines */
tbody td span[class*="text-[11px]"] { display: none !important; }
@media (max-width: 767px) {
  table :is(th, td):nth-child(1) { display: table-cell !important; }
}

/* ===== Silo: Slate-clean pass on re-rendered rows ===== */
/* no rank column / star, no delta sublines — single clean values like Slate */
.sm-c-rank { display: none !important; }
.sm-d { display: none !important; }
td.sm-c { padding-top: 15px !important; padding-bottom: 15px !important; }
table :is(th, td).sm-c-rank { display: none !important; }
@media (max-width: 720px) {
  .sm-c-price { width: 106px !important; }
  .sm-c-tvl { width: 86px !important; }
  .sm-pair { font-size: 12.5px !important; }
}

/* token filter: sized to its content, centered under the chip */
.clone-overlay.clone-token-menu {
  width: 182px !important;
  min-width: 0 !important;
}
/* token filter menu: the asset-type text hints crushed the labels; keep only
   glyph hints (the check, and the icons the token rows are gaining) */
.clone-token-menu .slate-menu-hint { font-size: 0; letter-spacing: 0; }
.clone-token-menu .slate-menu-hint :is(svg, img) { font-size: initial; }