:root {

  --bu-pink: #ff0066;

  --bu-bg: #09090d;

  --bu-panel: #111115;

  --bu-border: #2d2f3a;

}

body {

  background: var(--bu-bg) !important;

  font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;

}

.bg-primary, .from-primary, [class*="bg-primary"] {

  background-color: var(--bu-pink) !important;

}

.text-primary, .border-primary {

  color: var(--bu-pink) !important;

  border-color: var(--bu-pink) !important;

}



/* ─── Explore: grid sidebar + main (no float — tokens stay on top) ─── */

@media (min-width: 768px) {

  body.bu-explore-page [class*="mt-[65px]"] {

    display: grid !important;

    grid-template-columns: 17.5rem minmax(0, 1fr) !important;

    grid-template-rows: auto auto minmax(0, 1fr) !important;

    gap: 1rem 1.25rem !important;

    align-items: start !important;

    max-width: 1480px !important;

    width: 100% !important;

    padding-left: 0 !important;

    float: none !important;

  }

  body.bu-explore-page [class*="mt-[65px]"] > :nth-child(1),

  body.bu-explore-page [class*="mt-[65px]"] > :nth-child(2) {

    grid-column: 1 / -1 !important;

  }

  body.bu-explore-page [class*="mt-[65px]"] > :nth-child(3) {

    grid-column: 1 !important;

    grid-row: 3 !important;

    display: flex !important;

    flex-direction: column !important;

    flex-wrap: nowrap !important;

    align-items: stretch !important;

    gap: 0.35rem !important;

    width: 100% !important;

    max-width: none !important;

    margin: 0 !important;

    float: none !important;

    background: #111114 !important;

    border: 1px solid var(--bu-border) !important;

    border-radius: 1rem !important;

    padding: 0.75rem !important;

    position: sticky !important;

    top: 5.5rem !important;

    max-height: calc(100vh - 6rem) !important;

    overflow-y: auto !important;

    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35) !important;

  }

  body.bu-explore-page [class*="mt-[65px]"] > :nth-child(3) > div {

    width: 100% !important;

    text-align: left !important;

    font-size: 0.78rem !important;

    font-weight: 700 !important;

    letter-spacing: 0.04em !important;

    padding: 0.6rem 0.85rem !important;

    border-radius: 0.75rem !important;

    border: 1px solid transparent !important;

  }

  body.bu-explore-page [class*="mt-[65px]"] > :nth-child(3) > div.text-primary,

  body.bu-explore-page [class*="mt-[65px]"] > :nth-child(3) > div[class*="border-primary"] {

    background: rgba(255, 0, 102, 0.12) !important;

    border-color: rgba(255, 0, 102, 0.4) !important;

  }

  body.bu-explore-page [class*="mt-[65px]"] > :nth-child(3) > div:hover {

    background: rgba(255, 255, 255, 0.04) !important;

  }

  body.bu-explore-page [class*="mt-[65px]"] > :nth-child(3) > div.bg-primary {

    margin-top: 0.35rem !important;

    text-align: center !important;

  }

  body.bu-explore-page [class*="mt-[65px]"] > :nth-child(4) {

    grid-column: 1 / -1 !important;

  }

  body.bu-explore-page [class*="mt-[65px]"] > :nth-child(n + 5) {

    grid-column: 2 !important;

    grid-row: 3 !important;

    min-width: 0 !important;

    width: 100% !important;

    align-self: start !important;

  }

}



/* Explore token summary cards */

body.bu-explore-page .bg-customGray {

  background: var(--bu-panel) !important;

  border: 1px solid var(--bu-border) !important;

  border-radius: 0.85rem !important;

  transition: border-color 0.15s ease, transform 0.15s ease !important;

}

body.bu-explore-page .bg-customGray:hover {

  border-color: rgba(255, 0, 102, 0.45) !important;

  transform: translateY(-1px) !important;

}

body.bu-explore-page [class*="grid-cols-2"][class*="gap-3"] {

  margin-top: 0 !important;

}



/* ─── Index: protocol sidebar + indexer tables ─── */

@media (min-width: 768px) {

  body.bu-index-page [class*="mt-[65px]"][class*="max-w-"] {

    display: grid !important;

    grid-template-columns: 15rem minmax(0, 1fr) !important;

    grid-template-rows: auto 1fr !important;

    gap: 1rem 1.25rem !important;

    align-items: start !important;

    max-width: 1480px !important;

  }

  body.bu-index-page [class*="mt-[65px]"] > :nth-child(1) {

    grid-column: 1 !important;

    grid-row: 1 / span 2 !important;

    display: flex !important;

    flex-direction: column !important;

    flex-wrap: nowrap !important;

    gap: 0.25rem !important;

    background: #111114 !important;

    border: 1px solid var(--bu-border) !important;

    border-radius: 1rem !important;

    padding: 0.65rem !important;

    position: sticky !important;

    top: 5.5rem !important;

    max-height: calc(100vh - 6rem) !important;

    overflow-y: auto !important;

  }

  body.bu-index-page [class*="mt-[65px]"] > :nth-child(1) > div {

    width: 100% !important;

    text-align: left !important;

    font-size: 0.8rem !important;

    font-weight: 700 !important;

    padding: 0.55rem 0.75rem !important;

    border-radius: 0.65rem !important;

    border-bottom: none !important;

  }

  body.bu-index-page [class*="mt-[65px]"] > :nth-child(1) > div.text-primary {

    background: rgba(255, 0, 102, 0.12) !important;

    border: 1px solid rgba(255, 0, 102, 0.35) !important;

  }

  body.bu-index-page [class*="mt-[65px]"] > :nth-child(2) {

    grid-column: 1 / -1 !important;

  }

  body.bu-index-page [class*="mt-[65px]"] > :nth-child(n + 3) {

    grid-column: 2 !important;

    grid-row: 1 !important;

    min-width: 0 !important;

    width: 100% !important;

  }

}



body.bu-index-page table,

body.bu-index-page [class*="rounded"][class*="border"] table {

  border-collapse: separate !important;

  border-spacing: 0 !important;

  width: 100% !important;

}

body.bu-index-page table th {

  font-size: 0.68rem !important;

  letter-spacing: 0.08em !important;

  text-transform: uppercase !important;

  color: #71717a !important;

  background: #0d0d10 !important;

  padding: 0.65rem 0.75rem !important;

  border-bottom: 1px solid var(--bu-border) !important;

}

body.bu-index-page table td {

  padding: 0.7rem 0.75rem !important;

  border-bottom: 1px solid rgba(45, 47, 58, 0.6) !important;

  font-size: 0.85rem !important;

}

body.bu-index-page table tr:hover td {

  background: rgba(255, 0, 102, 0.04) !important;

}

body.bu-index-page [class*="overflow-x-auto"],

body.bu-index-page [class*="overflow-auto"] {

  background: var(--bu-panel) !important;

  border: 1px solid var(--bu-border) !important;

  border-radius: 1rem !important;

  padding: 0.5rem !important;

}



.bu-trade-panel,

.bu-market-panel {

  background: #111115;

  border: 1px solid var(--bu-border);

  border-radius: 1rem;

  padding: 1rem;

  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);

}

.bu-market-panel table,

.bu-trade-panel table {

  border-collapse: separate;

  border-spacing: 0;

  width: 100%;

}

.bu-market-panel th,

.bu-trade-panel th {

  font-size: 0.7rem !important;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  color: #71717a !important;

  border-bottom: 1px solid var(--bu-border) !important;

  padding: 0.65rem 0.75rem !important;

}

.bu-market-panel td,

.bu-trade-panel td {

  padding: 0.75rem !important;

  border-bottom: 1px solid rgba(45, 47, 58, 0.65) !important;

  font-size: 0.85rem !important;

}

.bu-market-panel tr:hover td,

.bu-trade-panel tr:hover td {

  background: rgba(255, 0, 102, 0.04);

}

.bu-market-card {

  background: #0d0d10 !important;

  border: 1px solid var(--bu-border) !important;

  border-radius: 0.85rem !important;

}



@media (max-width: 767px) {

  body.bu-explore-page [class*="mt-[65px]"],

  body.bu-index-page [class*="mt-[65px]"] {

    display: flex !important;

    flex-direction: column !important;

  }

  .bu-trade-panel,

  .bu-market-panel {

    padding: 0.65rem;

    border-radius: 0.85rem;

  }

}