/* jeyii.cn 前端细节修补 —— 在构建产物之上做的最小样式覆盖 */

/* ---------- 通用 ---------- */

/* 侧边栏筛选项的复选框：原生控件在深色背景下几乎看不见 */
input[type="checkbox"] {
  accent-color: #ea580c;
  width: 15px;
  height: 15px;
  border-radius: 4px;
  cursor: pointer;
}

/* 价格滑块统一成品牌橙 */
input[type="range"] {
  accent-color: #ea580c;
}

/* 滚动条在深色页面上更细 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(234, 88, 12, 0.6);
}

/* 图片加载过程中避免高度跳动 */
img {
  content-visibility: auto;
}

/* ---------- 移动端 ---------- */

@media (max-width: 768px) {
  /* 顶栏：原来 h-20 + px-8，在 390px 宽度下会把"登录/注册"挤出屏幕 */
  header.h-20 {
    height: 64px !important;
  }
  header > div {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  header .text-2xl {
    font-size: 17px !important;
    letter-spacing: 0 !important;
  }
  header .w-10.h-10 {
    width: 32px !important;
    height: 32px !important;
  }
  header .px-8.h-11 {
    padding-left: 14px !important;
    padding-right: 14px !important;
    height: 38px !important;
    font-size: 12px !important;
  }
  header span,
  header a,
  header button {
    white-space: nowrap;
  }

  /* 首屏标题 76px 太大，会折成两行并盖住按钮 */
  .text-\[76px\] {
    font-size: 38px !important;
    line-height: 1.08 !important;
  }
  .text-\[34px\] {
    font-size: 26px !important;
  }

  /* 首屏按钮 px-12 py-5 在窄屏会把文字挤成两行 */
  .px-12.py-5 {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 13px !important;
    padding-bottom: 13px !important;
    font-size: 14px !important;
  }

  /* 商品卡片在小屏保持两列就够，避免文字全被截断 */
  .grid-cols-2.md\:grid-cols-3.lg\:grid-cols-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ---------- 移动端：首屏高度 ---------- */

@media (max-width: 768px) {
  /* 首屏原本固定 680px，手机上会留出大片空白 */
  .h-\[680px\] {
    height: auto !important;
    min-height: 460px;
    padding-top: 40px;
    padding-bottom: 40px;
  }
}
/* ---------- 移动端：登录状态下的顶栏（余额 + 充值 + 头像） ---------- */

@media (max-width: 768px) {
  header .flex.items-center.gap-5 {
    gap: 8px !important;
  }
  header .text-\[15px\] {
    font-size: 12px !important;
  }
  header .w-11.h-full {
    width: 34px !important;
  }
  header .h-11 {
    height: 36px !important;
  }
  header .px-5 {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  header .w-11.h-11 {
    width: 34px !important;
    height: 34px !important;
  }
  /* 极窄屏（<=360px）先保住头像和充值按钮 */
  @media (max-width: 360px) {
    header .gap-10,
    header .gap-6 {
      gap: 8px !important;
    }
  }
}
/* ---------- 账户中心侧栏图标：用 CSS 遮罩替换原有字符 ---------- */
/* 不往模板里插标签，避免 Vue 运行时编译器报错；颜色跟随 currentColor */

.nav-ico {
  display: inline-block;
  width: 17px;
  height: 17px;
  font-size: 0;
  line-height: 0;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 17px 17px;
  mask-size: 17px 17px;
}

.nav-ico[data-ico="gear"] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E"); }

.nav-ico[data-ico="wallet"] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='6' width='19' height='13' rx='2.5'/%3E%3Cpath d='M2.5 10.5h19'/%3E%3Ccircle cx='17.5' cy='15' r='1.3' fill='%23000' stroke='none'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='6' width='19' height='13' rx='2.5'/%3E%3Cpath d='M2.5 10.5h19'/%3E%3Ccircle cx='17.5' cy='15' r='1.3' fill='%23000' stroke='none'/%3E%3C/svg%3E"); }

.nav-ico[data-ico="steam"] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2a10 10 0 0 0-9.96 9.06l5.35 2.21a2.83 2.83 0 0 1 1.6-.49h.14l2.38-3.44v-.05a3.77 3.77 0 1 1 3.77 3.77h-.09l-3.4 2.42v.11a2.84 2.84 0 1 1-5.66.26l-3.83-1.58A10 10 0 1 0 12 2zm-4.3 15.17 1.23.51a2.13 2.13 0 1 0 1.14-2.77l1.27.52a1.57 1.57 0 1 1-1.17 2.9l-2.47-1.16zm8.62-5.05a2.51 2.51 0 1 0 0-5.03 2.51 2.51 0 0 0 0 5.03z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2a10 10 0 0 0-9.96 9.06l5.35 2.21a2.83 2.83 0 0 1 1.6-.49h.14l2.38-3.44v-.05a3.77 3.77 0 1 1 3.77 3.77h-.09l-3.4 2.42v.11a2.84 2.84 0 1 1-5.66.26l-3.83-1.58A10 10 0 1 0 12 2zm-4.3 15.17 1.23.51a2.13 2.13 0 1 0 1.14-2.77l1.27.52a1.57 1.57 0 1 1-1.17 2.9l-2.47-1.16zm8.62-5.05a2.51 2.51 0 1 0 0-5.03 2.51 2.51 0 0 0 0 5.03z'/%3E%3C/svg%3E"); }

.nav-ico[data-ico="orders"] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M9 6h12M9 12h12M9 18h12'/%3E%3Ccircle cx='4' cy='6' r='1.2' fill='%23000' stroke='none'/%3E%3Ccircle cx='4' cy='12' r='1.2' fill='%23000' stroke='none'/%3E%3Ccircle cx='4' cy='18' r='1.2' fill='%23000' stroke='none'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M9 6h12M9 12h12M9 18h12'/%3E%3Ccircle cx='4' cy='6' r='1.2' fill='%23000' stroke='none'/%3E%3Ccircle cx='4' cy='12' r='1.2' fill='%23000' stroke='none'/%3E%3Ccircle cx='4' cy='18' r='1.2' fill='%23000' stroke='none'/%3E%3C/svg%3E"); }

.nav-ico[data-ico="box"] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8 12 3 3 8v8l9 5 9-5V8z'/%3E%3Cpath d='M3 8l9 5 9-5M12 13v8'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8 12 3 3 8v8l9 5 9-5V8z'/%3E%3Cpath d='M3 8l9 5 9-5M12 13v8'/%3E%3C/svg%3E"); }

.nav-ico[data-ico="cart"] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.4 11.2a2 2 0 0 0 2 1.6h7.9a2 2 0 0 0 2-1.6L21 7H6'/%3E%3Ccircle cx='9.5' cy='20' r='1.4'/%3E%3Ccircle cx='18' cy='20' r='1.4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.4 11.2a2 2 0 0 0 2 1.6h7.9a2 2 0 0 0 2-1.6L21 7H6'/%3E%3Ccircle cx='9.5' cy='20' r='1.4'/%3E%3Ccircle cx='18' cy='20' r='1.4'/%3E%3C/svg%3E"); }

.nav-ico[data-ico="dot"] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3C/svg%3E"); }

/* API 那个是文字，不加遮罩 */
.nav-ico[data-ico="api"] { background: none; }

/* ---------- 移动端：登录态顶栏再收一层 ---------- */
@media (max-width: 768px) {
  /* 余额数字占位太大，窄屏只留"充值 +"按钮，余额去钱包页看 */
  header .bg-\[\#0e0e0e\] > div:first-child {
    display: none !important;
  }
  header .bg-\[\#0e0e0e\] {
    padding: 0 !important;
  }
  header .bg-\[\#0e0e0e\] > button {
    width: 34px !important;
  }
}

/* ---------- 后台 admin.html 的移动端适配 ---------- */
@media (max-width: 900px) {
  /* 表格横向滚动，不要被压扁换行 */
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  thead, tbody, tr, th, td {
    white-space: nowrap;
  }

  /* 卡片与容器内边距收窄 */
  .p-8 { padding: 16px !important; }
  .px-8 { padding-left: 16px !important; padding-right: 16px !important; }
  .p-6 { padding: 14px !important; }
  .px-6 { padding-left: 14px !important; padding-right: 14px !important; }

  /* 统计卡片改成两列 */
  .grid.grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .grid.grid-cols-3 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }

  /* 侧边导航收成横向滚动条 */
  .w-\[220px\], .w-\[240px\], .w-64 {
    width: 100% !important;
    max-height: 64px;
    overflow-x: auto;
    overflow-y: hidden;
  }
}

/* ---------- 窄屏兜底：个别后台容器有固定最小宽度，避免出现横向黑边 ---------- */
@media (max-width: 900px) {
  html, body {
    overflow-x: hidden;
  }
}


/* ---------- 价格走势图 ---------- */
.ui-chart {
  margin: 0 0 14px;
  padding: 10px 12px 6px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.ui-chart-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 6px;
}
.ui-chart-head span {
  font-size: 12px;
  font-weight: 800;
  color: #e5e7eb;
}
.ui-chart-head em {
  font-style: normal;
  font-size: 10.5px;
  color: #6b7280;
}
.ui-chart svg {
  display: block;
  width: 100%;
  height: 96px;
}

/* ---------- 联系客服弹层 ---------- */
.ui-contact-mask {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(4px);
  display: grid;
  place-items: center;
  padding: 20px;
}
.ui-contact-box {
  position: relative;
  width: 100%;
  max-width: 400px;
  background: linear-gradient(180deg, rgba(26, 28, 31, 0.98), rgba(13, 14, 16, 0.99));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 26px 24px 20px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.75);
}
.ui-contact-box h3 {
  margin: 0 0 4px;
  font-size: 17px;
  color: #fff;
}
.ui-contact-sub {
  margin: 0 0 18px;
  font-size: 12px;
  color: #6b7280;
}
.ui-contact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
  font-size: 12.5px;
}
.ui-contact-row span { color: #6b7280; }
.ui-contact-row b { color: #e5e7eb; font-weight: 600; text-align: right; }
.ui-contact-tip {
  margin: 14px 0 0;
  font-size: 11.5px;
  color: #4b5563;
}
.ui-contact-x {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: #6b7280;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.ui-contact-x:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }