/* 顶部 Logo 卡片区域 */
.logo-card {
  background-color: #ffffff;
  border-radius: 20px;
  padding: 12px 20px;
  margin: 10px 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  display: flex ;;
  align-items: center;
  box-sizing: border-box;
}

/* logo 图片样式 */
.logo-card-img {
  height: 32px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

/* 包裹右侧三个图标的容器 */
.logo-right-icons {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  margin-left: auto;
  gap: clamp(24px, 4vw, 80px);
  flex-shrink: 0;
  min-width: 0;
}

/* 客服图标 */
.customer-icon {
  height: 25px;
  width: 25px;
  color: #0a67ca;
  cursor: pointer;
  flex-shrink: 0;
}

/* 语言图标 */
.language-icon {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  height: 25px;
  width: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0a67ca;
  cursor: pointer;
  flex-shrink: 0;
}

.language-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: currentColor; /* 保底保障 fill 正常 */
}

.language-menu {
  position: absolute;
  top: 54px;                      /* 你可以微调这个数值，使菜单紧贴语言图标下方 */
  right: 16px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  padding: 6px 0;
  z-index: 999;
  min-width: 130px;
  font-size: 14px;
}

.lang-item {
  padding: 10px 16px;
  cursor: pointer;
  color: #333;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}

.lang-item:hover {
  background-color: #f0f4fb;
}

.hidden {
  display: none;
}

.flag-icon {
  width: 20px;
  height: 14px;
  margin-right: 8px;
  vertical-align: middle;
  object-fit: contain;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

/* 注册按钮 */
.register-button {
  display: flex;                         /* ✅ 使用 Flex 实现内容居中 */
  align-items: center;                  /* ✅ 垂直居中 */
  justify-content: center;              /* ✅ 水平居中 */
  padding: 8px 20px;                    /* ✅ 内边距更大更稳 */
  background-color: #0a67ca;
  color: white;
  border: none;
  border-radius: 999px;
  font-size: 15px;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s;
  text-decoration: none;                /* ✅ 去掉链接下划线 */
}

.register-button:hover {
  background-color: #005bb5;
}

/* 媒体查询：适配手机屏 */
@media screen and (max-width: 480px) {
  .logo-card {
    padding: 10px 16px;
    min-height: 56px;
  }

  .logo-card-img {
    height: 26px;
  }

  .logo-right-icons {
    gap: clamp(12px, 4vw, 20px);
  }

  .customer-icon,
  .language-icon {
    width: 24px;
    height: 24px;
  }

  .register-button {
    height: 32px;
    line-height: 32px;
    font-size: 14px;
    padding: 0 14px;
  }
}

/* 欢迎区域 */
.fullwidth-welcome {
  width: 100%;
  box-sizing: border-box;        
  padding: 50px 16px 36px 16px;  /* ✅ 上下 padding 调大（原来是 32 和 24）*/
  text-align: center;
  background: transparent;       
  overflow: hidden;
}

/* 欢迎主标题 */
.welcome-title {
  font-size: 20px;
  font-weight: 600;
  color: #222222;
  margin-bottom: 8px;
}

/* 副标题 */
.welcome-subtitle {
  font-size: 14px;
  color: #666666;
  margin-bottom: 20px;
}

/* 注册/登录按钮 */
.welcome-button {
  display: inline-block;         /* 不再 width: 100%，避免撑出 */
  padding: 10px 32px;            /* 内边距控制宽度 */
  font-size: 16px;
  font-weight: bold;
  color: white;
  background: linear-gradient(to right, #4b6efc, #00c6ff);
  border: none;
  border-radius: 30px;
  box-shadow: 0 3px 8px rgba(0, 153, 255, 0.3);
  max-width: 90vw;               /* 保证不会超出屏幕 */
  text-decoration: none;         /* 去掉链接下划线 */
  transform: translateY(25px);  /* ✅ 让按钮在原地稍微下移，不撑开容器 */
}

/* ✅ 轮播容器样式 */
.luxury-carousel {
  position: relative;
  width: 100%;
  height: 150px;
  margin: 16px auto;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

/* ✅ 每张轮播图 */
.luxury-slide {
  position: absolute;                                     /* 层叠定位以实现切换 */
  top: 0;
  left: 0;
  width: 92%;                                             /* 两边保留空间，避免顶格 */
  height: 100%;
  margin: 0 auto;
  right: 0;
  background-size: cover;                                 /* 背景图自适应填充 */
  background-position: center;                            /* 背景图居中显示 */
  border-radius: 25px;                                    /* 每张图自己也加圆角 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);             /* 比原来更柔的阴影 */
  opacity: 0;                                              /* 默认隐藏 */
  transition: opacity 1.2s ease;                          /* 淡入淡出效果 */
}

/* ✅ 当前显示的图片 */
.luxury-slide.active {
  opacity: 1;
  z-index: 1;
}

/* ✅ 左上角文字 */
.luxury-text.top-left {
  position: absolute;
  top: 16px;
  left: 16px;
  color: white;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
}

.luxury-text h2 {
  font-size: 18px;
  font-weight: bold;
  margin: 0;
}

.luxury-text p {
  font-size: 13px;
  margin: 6px 0 0 0;
  opacity: 0.9;
}

/* ✅ 右下角按钮（文字 + 箭头） */
.luxury-action {
  position: absolute;
  bottom: 16px;
  right: 16px;
  background: rgba(224, 224, 224, 0.9);
  padding: 2px 8px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 12px;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.luxury-action:hover {
  background-color: white;
}

.luxury-action-text {
  color: #333;
  margin-right: 6px;
}

.luxury-arrow {
  color: #0a67ca;
  font-size: 18px;
  transition: transform 0.3s ease;
}

.luxury-action:hover .luxury-arrow {
  transform: translateX(4px);
}

/* ✅ 底部圆点导航 */
.luxury-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 10;
}

.luxury-dots .dot {
  width: 8px;                                   /* ✅ 由 6px 调整为 8px，略大 */
  height: 8px;
  border-radius: 50%;                          /* ✅ 圆形 */
  background-color: rgba(255, 255, 255, 0.6);   /* ✅ 微亮白色底 */
  border: 1px solid rgba(0, 0, 0, 0.12);        /* ✅ 细灰边，保持立体感 */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);     /* ✅ 柔和阴影 */
  transition: all 0.3s ease;
  cursor: pointer;
}

.luxury-dots .dot.active {
  background-color: #ffffff;                   /* ✅ 激活状态更纯白 */
  border-color: #0a67ca;                       /* ✅ 主色边框强调 */
  transform: scale(1.4);                       /* ✅ 轻微放大突出感 */
}


/* 卡片区域布局不变 */
.coin-grid {
  display: flex;
  gap: 5px;                        /* 卡片间隔 */
  padding: 0 7px;                   /* 两侧留白 */
  box-sizing: border-box;
  overflow-x: hidden;               /* 禁止横滑 */
}

/* 每张币种卡片 */
.coin-card {
  flex: 1 1 calc((100% - 24px) / 3); /* ✅ 3张卡 + 2个gap，自动撑满 */
  height: 100px;
  border-radius: 19px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: #885353;
  box-shadow: 0 3px 3px rgba(5, 2, 2, 0.1);
  color: #111;
  box-sizing: border-box;
  transition: transform 0.3s ease;
  position: relative;
  min-width: 0;                     /* ✅ 防止在某些浏览器撕裂换行 */
}

.coin-center {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px; /* ✅ 这行让价格和涨幅之间有“自然呼吸” */
}

/* 移动端按压感 */
.coin-card:active {
  transform: scale(0.97);
}

/* 币种头部行 */
.coin-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.coin-name {
  font-size: 14px;
  font-weight: 600;
  color: #222;
}

.coin-icon {
  width: 24px;
  height: 24px;
}

/* 涨跌幅 */
.coin-change {
  font-size: 13px;
  font-weight: 600;
  opacity: 0.9; /* 稍微柔和一点 */
}

.coin-change.up {
  color: #29c180;
}

.coin-change.down {
  color: #f75c5c;
}

/* 当前价格 */
.coin-price {
  font-size: 15px;
  font-weight: bold;
  color: #29c180;
  opacity: 0.95;
}

/* 主题文字 */
.coin-section-title {
  font-size: 18px;
  font-weight: 700;
  color: #111111;
  margin-bottom: 16px;
  letter-spacing: 0.3px;
  padding-left: 20px;
  position: relative;
  line-height: 1.2;
}

/* 左侧渐变竖线（高感设计） */
.coin-section-title::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 2px;
  width: 4px;
  height: 18px;
  border-radius: 9px;
  background: linear-gradient(to bottom, #4b6efc, #00c6ff); /* 渐变蓝 */
  opacity: 1;
}

/* 渐变背景升级：更深+更斜，增强立体感 */
.bg-btc {
  background: linear-gradient(135deg, #ebeef5, #f7931a);
}

.bg-eth {
  background: linear-gradient(135deg, #e5dff1, #8e9eab);
}

.bg-trump {
  background: linear-gradient(135deg, #ebeef5, #66a6ff);
}


/* 热门币种整体模块 */
.hot-token-section {
  margin: 24px 12px 80px;
}

/* 标题加粗+左侧高光条 */
.hot-token-title {
  font-size: 18px;
  font-weight: 700;
  color: #111111;
  margin-bottom: 16px;
  letter-spacing: 0.3px;
  padding-left: 10px;
  position: relative;
  line-height: 1.2;
}

.hot-token-title::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 0;
  width: 4px;
  height: 18px;
  border-radius: 2px;
  background: linear-gradient(to bottom, #fc466b, #3f5efb);
}

/* 币种列表 */
.hot-token-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 卡片变厚，内边距更宽松，圆角加大 */
.hot-token-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

/* 图标更大 */
.hot-token-icon {
  width: 28px;
  height: 28px;
  margin-right: 12px;
}

/* 名字字体加粗加大 */
.hot-token-name {
  flex: 1;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

/* 当前价格 */
.hot-token-price {
  font-size: 15px;
  font-weight: bold;
  color: #222;
  min-width: 80px;
  text-align: right;
}

/* 移动端按压感 */
.hot-token-row {
  transition: transform 0.2s ease;
  cursor: pointer; /* 鼠标悬停时显示手型 */
}

.hot-token-row:active {
  transform: scale(0.97);
}

/* 涨跌幅，字体更明显 */
.hot-token-change {
  font-size: 15px;
  font-weight: 700;
  min-width: 70px;
  text-align: right;
}

/* 涨跌颜色 */
.hot-token-change.up {
  color: #29c180;
}
.hot-token-change.down {
  color: #f75c5c;
}

/* BTC：亮金橙 */
.hot-btc {
  background: linear-gradient(135deg, #f9f5ef, #f7931a1a); /* 金色淡化 */
}

/* ETH：冷银灰蓝 */
.hot-eth {
  background: linear-gradient(135deg, #f4f8fb, #3c3c3d1f); /* 银黑主调 */
}

/* SOL：蓝紫渐变 */
.hot-sol {
  background: linear-gradient(135deg, #f1f5fb, #9945ff1a); /* 紫蓝光感 */
}

/* DOGE：卡通黄橙 */
.hot-doge {
  background: linear-gradient(135deg, #fff9ed, #c2a6332b); /* 狗狗币金黄 */
}

/* BNB：亮黄金色 */
.hot-bnb {
  background: linear-gradient(135deg, #fffcf0, #f3ba2f2a); /* Binance黄 */
}

/* BCH：绿色 */
.hot-bch {
  background: linear-gradient(135deg, #f2fbf6, #8dc3512a); /* 浅绿柔和 */
}

/* ADA：宝蓝 + 白灰 */
.hot-ada {
  background: linear-gradient(135deg, #f4f8ff, #0033ad20); /* 深蓝科技感 */
}

/* XRP：黑银极简 */
.hot-xrp {
  background: linear-gradient(135deg, #f7f7f7, #00000018); /* 黑白科技极简 */
}


/* ========== 首页顶部栏：左 logo + 右公告入口 ========== */

.home-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;                   /* 稍大内边距更舒适 */
  background: transparent;
  margin-top: 1px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); /* 微弱阴影 */
}

/* 左侧 LOGO 区域 */
.topbar-left {
  display: flex;
  align-items: center;
}

.topbar-logo {
  height: 35px;
  object-fit: contain;
}

/* ========== 首页公告入口：右上角 ========== */
.topbar-right {
  display: flex;
  align-items: center;
  gap: 8px; /* 🔧 间距稍大，呼吸感更好 */
  cursor: pointer;
  padding-right: 6px; /* 🔧 不紧贴边缘 */
}

/* 公告图标：柔和科技蓝 + 微光 */
.notice-icon {
  width: 20px;
  height: 20px;
  color: #28C0DC; /* 🔧 与 logo 蓝一致 */
  filter: drop-shadow(0 0 3px rgba(40, 192, 220, 0.3)); /* 🔆 柔和光感 */
}

/* 公告文字样式 */
.notice-title {
  font-size: 15px;
  font-weight: 600;
  color: #223344; /* 🔧 深蓝灰，沉稳聚焦 */
  letter-spacing: 0.4px;
}






/* ========== 首页资产总览卡片区域 ========== */
.asset-summary-card {
  background: linear-gradient(120deg, #eaf1ffcc 85%, #e4f3ff88 100%); /* 更柔渐变 + 透明感 */
  border-radius: 20px;
  padding: 22px 18px 20px 18px;  /* 上左右下 */
  margin: 14px 14px 16px 14px;
  box-shadow: 0 4px 18px 1px rgba(46,94,202,0.07), 0 1.5px 7px rgba(0,153,255,0.10);
  border: 1.5px solid #d1e7ff55; /* 微光蓝边框 */
  backdrop-filter: blur(3px);
  position: relative;
  overflow: hidden;
  /* 让资产区和按钮区风格融合 */
}

/* 标题文字：资产总估值 */
.asset-summary-top {
  font-size: 16px;
  font-weight: 600;
  color: #2562a3;
  margin-bottom: 6px;
  letter-spacing: 0.3px;
}

/* 数字金额 */
.asset-balance {
  font-size: 2.1rem;
  font-weight: 700;
  margin-top: 0;
  color: #0da6fd;
  letter-spacing: 1px;
  margin-bottom: 10px;
  filter: drop-shadow(0 2px 6px rgba(36, 148, 245, 0.07));
  font-family: "DIN Alternate", "Helvetica Neue", Arial, sans-serif;
  /* 气质更金融/科技 */
}

/* ========== 卡片内充币 / 提币按钮 ========== */
.asset-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  gap: 12px;
}

.asset-actions button {
  flex: 1 1 0;
  padding: 11px 0;
  border-radius: 32px;
  background: linear-gradient(90deg, #00cfff 50%, #0073ff 100%);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  border: none;
  box-shadow: 0 3px 12px rgba(0,178,255,0.09);
  transition: transform 0.13s, box-shadow 0.22s;
  cursor: pointer;
  letter-spacing: 0.2px;
  outline: none;
}
.asset-actions button:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 6px 16px rgba(13,166,253,0.16);
  background: linear-gradient(90deg, #02e4ff 30%, #489eff 100%);
}

/* ========== 卡片下方四个功能按钮 ========== */
.asset-tools {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 16px 10px 0 10px;
}

.asset-tools .tool-btn {
  background: linear-gradient(110deg, #f5faffcc 85%, #e2ecff88 100%);
  border-radius: 17px;
  padding: 12px 0 8px 0;
  text-align: center;
  color: #2562a3;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 1px 5px rgba(15,119,255,0.06);
  transition: box-shadow 0.2s, transform 0.15s;
  border: 1px solid #eaf4ffbb;
  position: relative;
  cursor: pointer;
  user-select: none;
}
.asset-tools .tool-btn:hover {
  box-shadow: 0 3px 14px rgba(46,114,255,0.13);
  background: linear-gradient(110deg, #e8f6ff 70%, #e0e9ff 100%);
  transform: translateY(-2px) scale(1.03);
}

.asset-tools .tool-btn svg {
  width: 25px;
  height: 25px;
  margin-bottom: 4px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  fill: #007aff;        /* 让普通SVG都变主色蓝 */
  /* 不加 stroke: none; 不动你的转换按钮 */
}

/* 如果想让最后一个“退出”按钮为红色，可以这样单独写 */
.asset-tools .tool-btn:last-child svg {
  fill: #fe6161;
}

.asset-tools .tool-btn:nth-child(2) svg {
  fill: none !important;
  stroke: #007aff !important;
}

/* 功能按钮文字 */
.asset-tools .tool-btn div {
  margin-top: 2px;
  font-size: 13px;
  font-weight: 500;
  color: #2562a3;
  letter-spacing: 0.03em;
}

/* 响应式优化，手机小屏幕调整 */
@media (max-width: 480px) {
  .asset-summary-card {
    padding: 15px 6px 15px 6px;
    border-radius: 14px;
    margin: 10px 4px 10px 4px;
  }
  .asset-balance {
    font-size: 1.3rem;
  }
  .asset-actions button {
    font-size: 13px;
    border-radius: 18px;
    padding: 9px 0;
  }
  .asset-tools {
    gap: 8px;
    margin: 14px 0 0 0;
  }
  .asset-tools .tool-btn {
    padding: 10px 0 7px 0;
    border-radius: 13px;
    font-size: 12px;
  }
  .asset-tools .tool-btn svg {
    width: 20px;
    height: 20px;
    margin-bottom: 2px;
  }
  .asset-tools .tool-btn div {
    font-size: 12px;
  }
}


.asset-summary-card {
  position: relative; /* 让右上角按钮能绝对定位！ */
}

/* 小眼睛按钮右上角悬浮 */
.eye-btn {
  position: absolute;
  top: 10px;    /* 距离卡片顶部距离，可微调 */
  right: 22px;  /* 距离卡片右边距离，可微调 */
  background: none;
  border: none;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  padding: 3px;
  opacity: 0.88;
  transition: opacity 0.15s;
}
.eye-btn:hover { opacity: 1; }
.eye-btn svg { width: 22px; height: 22px; }