:root {
  color-scheme: light;
  --color-bg: 255 255 255;
  --color-bg-soft: 247 247 248;
  --color-bg-section: 251 251 252;
  --color-text: 18 18 20;
  --color-text-sub: 88 88 96;
  --color-text-sup: 130 130 138;
  --color-text-mute: 158 158 166;
  --color-line: 239 239 241;
  --color-line-solid: 224 224 228;
  --color-up: 0 179 122;
  --color-down: 242 79 91;
  --color-up-bg: 224 248 240;
  --color-down-bg: 255 235 238;
  --color-hover-bg: 243 243 245;
  --shadow-card: 0 1px 2px rgb(0 0 0 / 0.03), 0 8px 28px rgb(0 0 0 / 0.05);
  --shadow-pop: 0 24px 64px rgb(0 0 0 / 0.16);
  --shadow-pc-card: 0 16px 48px rgb(0 0 0 / 0.09);
  --enterprise-radius: 12px;
  --enterprise-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

html.dark {
  color-scheme: dark;
  --color-bg: 0 0 0;
  --color-bg-soft: 15 15 16;
  --color-bg-section: 7 7 8;
  --color-text: 245 245 247;
  --color-text-sub: 166 166 174;
  --color-text-sup: 116 116 124;
  --color-text-mute: 88 88 94;
  --color-line: 28 28 30;
  --color-line-solid: 43 43 46;
  --color-up: 0 192 135;
  --color-down: 246 70 93;
  --color-up-bg: 4 48 39;
  --color-down-bg: 57 20 29;
  --color-hover-bg: 22 22 24;
  --shadow-card: none;
  --shadow-pop: 0 28px 72px rgb(0 0 0 / 0.62);
  --shadow-pc-card: 0 18px 56px rgb(0 0 0 / 0.38);
}

html {
  background: rgb(var(--color-bg));
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body,
#root {
  min-height: 100%;
  background: rgb(var(--color-bg));
  color: rgb(var(--color-text));
}

body {
  margin: 0;
  overflow-x: hidden;
  font-family: Inter, "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont,
    "Segoe UI", "PingFang SC", "Microsoft YaHei", Helvetica, Arial, sans-serif;
  font-feature-settings: "kern" 1, "liga" 1, "tnum" 1;
  letter-spacing: -0.012em;
}

::selection {
  color: #fff;
  background: rgb(var(--color-up) / 0.72);
}

* {
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--color-line-solid)) transparent;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: rgb(var(--color-line-solid));
  background-clip: padding-box;
}

h1,
h2,
h3,
h4,
h5,
h6,
strong,
b {
  letter-spacing: -0.024em;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

button,
a {
  transition: color 160ms var(--enterprise-ease), background-color 160ms var(--enterprise-ease),
    border-color 160ms var(--enterprise-ease), opacity 160ms var(--enterprise-ease),
    transform 160ms var(--enterprise-ease), box-shadow 160ms var(--enterprise-ease);
}

button:active:not(:disabled),
a:active {
  transform: translateY(1px);
}

:where(button, a, input, select, textarea):focus-visible {
  outline: 2px solid rgb(var(--color-text));
  outline-offset: 3px;
}

input,
select,
textarea {
  border-color: rgb(var(--color-line-solid)) !important;
  background-color: rgb(var(--color-bg-soft)) !important;
  color: rgb(var(--color-text)) !important;
}

input::placeholder,
textarea::placeholder {
  color: rgb(var(--color-text-mute)) !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgb(var(--color-text-sub)) !important;
  box-shadow: 0 0 0 3px rgb(var(--color-text) / 0.07);
}

html.dark [class~="bg-white"] {
  background-color: rgb(var(--color-bg-section)) !important;
}

html.dark [class~="text-black"] {
  color: rgb(var(--color-text)) !important;
}

html.dark [class~="border-gray-100"],
html.dark [class~="border-gray-200"],
html.dark [class~="border-slate-100"],
html.dark [class~="border-slate-200"] {
  border-color: rgb(var(--color-line)) !important;
}

[class*="bg-bgSection"],
[class*="bg-bgSoft"] {
  border-color: rgb(var(--color-line)) !important;
}

[class*="rounded-"][class*="border-"] {
  box-shadow: var(--shadow-card);
}

html.dark [class*="rounded-"][class*="border-"] {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.018);
}

[class*="shadow-"] {
  --tw-shadow-color: rgb(0 0 0 / 0.16);
}

html.dark [class*="shadow-"] {
  --tw-shadow-color: rgb(0 0 0 / 0.58);
}

header,
[class~="sticky"][class~="top-0"] {
  border-color: rgb(var(--color-line)) !important;
  background-color: rgb(var(--color-bg) / 0.88) !important;
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
}

header > div {
  max-width: 1440px;
  margin-inline: auto;
}

header > div > div:first-child {
  min-width: 0;
  flex: 1 1 auto;
}

header > div > div:last-child {
  flex: 0 0 auto;
  margin-left: auto;
}

header nav {
  min-width: 0;
  align-items: center;
}

nav a,
nav button {
  letter-spacing: -0.01em;
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-variant-numeric: tabular-nums;
}

thead th {
  color: rgb(var(--color-text-sup));
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.025em;
  text-transform: none;
}

tbody tr {
  transition: background-color 140ms ease;
}

tbody tr:hover {
  background: rgb(var(--color-hover-bg) / 0.72);
}

td,
th {
  border-color: rgb(var(--color-line)) !important;
}

[class*="text-up"],
[class*="text-green"] {
  font-variant-numeric: tabular-nums;
}

[class*="text-down"],
[class*="text-red"] {
  font-variant-numeric: tabular-nums;
}

html.dark [class*="bg-primary"],
html.dark button[class*="bg-black"] {
  border-color: #f5f5f7 !important;
  background: #f5f5f7 !important;
  color: #050505 !important;
}

:root:not(.dark) [class*="bg-primary"],
:root:not(.dark) button[class*="bg-black"] {
  border-color: #111114 !important;
  background: #111114 !important;
  color: #fff !important;
}

img[src*="logo" i] {
  object-fit: contain;
}

[class*="coin"] img,
[class*="symbol"] img,
img[alt*="USDT" i],
img[alt*="BTC" i],
img[alt*="ETH" i] {
  border-radius: 50%;
  background: rgb(var(--color-bg-soft));
  box-shadow: 0 0 0 1px rgb(var(--color-line));
}

[role="dialog"],
[class*="popover" i],
[class*="dropdown" i] {
  border-color: rgb(var(--color-line-solid)) !important;
  box-shadow: var(--shadow-pop) !important;
}

[class*="toast" i] {
  border: 1px solid rgb(var(--color-line-solid));
  box-shadow: var(--shadow-pop);
  backdrop-filter: blur(18px);
}

@media (max-width: 1024px) {
  [class*="min-w-[1280px]"],
  [class*="min-w-[1200px]"] {
    min-width: 0 !important;
  }

  [class~="px-8"],
  [class~="px-10"],
  [class~="px-12"] {
    padding-right: 20px !important;
    padding-left: 20px !important;
  }

}

@media (max-width: 720px) {
  :root {
    --enterprise-radius: 10px;
  }

  body {
    font-size: 14px;
    padding-bottom: env(safe-area-inset-bottom);
  }

  header,
  [class~="sticky"][class~="top-0"] {
    min-height: 58px;
  }

  [class*="h-[70px]"] {
    height: 58px !important;
  }

  [class~="px-6"],
  [class~="px-8"],
  [class~="px-10"],
  [class~="px-12"] {
    padding-right: 14px !important;
    padding-left: 14px !important;
  }

  [class~="gap-8"],
  [class~="gap-10"],
  [class~="gap-12"] {
    gap: 16px !important;
  }

  button,
  [role="button"],
  input,
  select {
    min-height: 40px;
  }

  table {
    min-width: 680px;
  }

  [class*="overflow-x"] {
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  nav.fixed.bottom-0 {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: calc(74px + env(safe-area-inset-bottom)) !important;
    min-height: 74px !important;
    max-height: calc(90px + env(safe-area-inset-bottom)) !important;
    padding-top: 4px !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
    overflow: visible !important;
    border-color: rgb(var(--color-line)) !important;
    background: rgb(var(--color-bg) / 0.96) !important;
    backdrop-filter: blur(18px) saturate(145%);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    box-shadow: 0 -8px 28px rgb(0 0 0 / 0.06) !important;
  }

  html.dark nav.fixed.bottom-0 {
    box-shadow: 0 -8px 28px rgb(0 0 0 / 0.42) !important;
  }

  nav.fixed.bottom-0 > div {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    grid-template-rows: 66px !important;
    width: min(100%, 480px) !important;
    height: 66px !important;
    margin-inline: auto !important;
    padding: 0 10px 7px !important;
    gap: 0 !important;
  }

  nav.fixed.bottom-0 > div > a,
  nav.fixed.bottom-0 > div > button {
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 59px !important;
    padding: 0 2px !important;
    justify-content: flex-start !important;
    overflow: visible !important;
    white-space: nowrap;
  }

  nav.fixed.bottom-0 > div > :is(a, button) > span {
    margin-top: 4px !important;
    font-size: 11px !important;
    line-height: 14px !important;
  }

  main {
    padding-bottom: calc(82px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 440px) {
  h1 {
    font-size: clamp(28px, 9vw, 40px) !important;
    line-height: 1.08 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}