body {
  margin: 0;
  background: #0f1325;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial;
  color: #fff;
}

header {
  width: 100%;
}

.banner {
  width: 100%;
  height: 180px;
}

.banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.notice {
  background: #161a30;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  position: relative;
}

.notice img {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

#notice-text {
  white-space: nowrap;
  position: absolute;
  left: calc(5% + 1rem);
  right: calc(5% + 1rem);
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  /* 确保文本在容器中居中对齐 */
  line-height: 1.5;
  overflow: hidden;
}

.scroll-wrapper {
  position: relative;
  white-space: nowrap;
  display: inline-block;
  animation: scrollLeft 20s linear infinite;
}

.scroll-content {
  display: inline-block;
}

/* 复制一份内容放在后面，实现无缝循环 */
.scroll-content+.scroll-content {
  margin-left: 150%;
  /* 内容之间的间距，确保足够宽的过渡 */
}

@keyframes scrollLeft {
  0% {
    transform: translateX(100%);
    /* 从右侧完全显示开始 */
  }

  100% {
    transform: translateX(-100%);
    /* 滚动到左侧完全隐藏 */
  }
}

.section-grid {
  display: flex;
  padding: 12px;
  gap: 12px;
}

.bg-box {
  background: #191E33;
}

.fast-icon {
  width: 2.8rem;
  height: 2.8rem;
}

.box-left .title {
  font-size: 1rem;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.2rem
}


.box-left .desc {
  font-size: .8rem;
}

.sub-icon {
  width: 1.5rem;
  height: 1.5rem;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}

thead {
  color: #CAD0E6;
  font-size: .9rem;
}

td {
  padding: .7rem;
}

.row {
  display: flex;
  align-items: center;
  gap: 10px;
}


.product-icon {
  width: 2.5rem;
  height: 2.5rem;
}

.status {
  color: #8e96b3;
}

.price {
  width: fit-content;
  padding: .3rem 0.8rem;
  font-size: 1rem;
  color: #fff;
  border-radius: .5rem;
}

.buy-up {
  background: #CC4F64;
}

.buy-down {
  background: #4fbf9f;
}

table {
  width: 100%;
  table-layout: fixed;
}

thead th {
  color: #8e96b3;
  text-align: left;
  padding: 1em;
}

thead th:nth-child(1),
tbody td:nth-child(1) {
  width: 45%;
}

thead th:nth-child(2),
tbody td:nth-child(2) {
  width: 20%;
}

thead th:nth-child(3),
tbody td:nth-child(3) {
  width: 35%;
}


/* Hero */
.hero {
  position: relative;
  overflow: hidden;
}

/* 轮播图容器 */
.carousel-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  height: 180px;
}

/* 轮播图滑动区域 */
.carousel-slides {
  display: flex;
  transition: transform 0.5s ease-in-out;
  width: 100%;
}

/* 单个轮播图 */
.carousel-slide {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* User info scroll */
.user-info-container {
  overflow: hidden;
  position: relative;
}

.user-info-scroller {
  position: absolute;
  width: 100%;
  transition: transform 0.3s ease-in-out;
}

.user-info-item {
  font-size: 0.9rem;
  padding: 0.5rem .75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}