.c-primary {
  background-color: #3a4a5fe0;
  /* (26,43,76)	导航栏/页眉/主要按钮	近似于故宫琉璃瓦的暮色，象征智慧深度；低明度提升专业信任感 */
}

.c-background {
  background-color: #52472f;
  /* (248,247,243)	页面底色/卡片容器	模拟宣纸泛黄效果，缓解纯白刺眼感；提升文字可读性 */
}

.c-text {
  /* color: #333333 !important; */
  /* (51,51,51)	正文主体/次要信息	高密度内容首选，与背景对比度达4.5:1以上 */
  font-family: 'Bookman Old Style', Garamond, Caslon, Baskerville, 'Old English Text MT', 'French Script MT', 'Times New Roman', serif;
}

.is-selected {
  background-color: #3A4A5F !important;
}

/* 针对右侧的下拉菜单，使其向左展开 */
.navbar-item.has-dropdown.is-right .navbar-dropdown {
  left: auto;
  right: 0;
  transform-origin: top right;
}

/* 确保在小屏幕上也能正确显示 */
@media screen and (max-width: 1023px) {
  .navbar-item.has-dropdown.is-right .navbar-dropdown {
    left: 0;
    right: auto;
    transform-origin: top left;
  }
}

body {
  min-height: 100vh;
}

/* Canvas背景样式 - 关键设置 */
#canvas {
  position: fixed; /* 固定定位，相对于视口 */
  top: 0;
  left: 0;
  z-index: -1; /* 置于最下层 */
  display: block; /* 消除默认inline元素的间隙 */
}

.all-content {
  padding-bottom: 20px;
  min-height: 850px;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: top center;
  margin-top: -24px;
}

.all-content-index {
  /* 1. 确保容器相对定位，让伪元素（遮罩）能绝对定位在其内部 */
  position: relative;
  
  padding-bottom: 20px;
  min-height: 850px;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: top center;
  margin-top: -24px;
}

/* 4. 伪元素实现深色遮罩 */
.all-content-index::before {
  content: ""; /* 伪元素必须有 content（空值也可） */
  position: absolute; /* 绝对定位，覆盖整个容器 */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* 5. 深色半透明：rgba(0,0,0, 透明度)，透明度0~1之间（值越大越暗） */
  background-color: rgba(0, 0, 0, 0.7); /* 示例：50%透明度的黑色遮罩 */
  /* 6. 确保遮罩在图片上方、内容下方（z-index 需小于容器内容的 z-index） */
  z-index: 1;
}

/* 7. 容器内部的内容（如文字、按钮）需放在遮罩上方，避免被遮罩盖住 */
.all-content-index .content-inner {
  position: relative; /* 相对定位，提升层级 */
  z-index: 10; /* 大于遮罩的 z-index（1） */
  color: #fff; /* 内容文字建议用白色，避免被深色遮罩影响可读性 */
}

.container {
  padding-top: 76px !important;
  padding-left: 4px;
  padding-right: 4px;
}

.box {
  background-color: #3a4a5f5c;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.card {
  background-color: #3a4a5f5c;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.footer {
  background-color: #3a4a5f5c;
  color: #fff;
  font-size: 0.875rem;
  text-align: center;
  padding: 20px;
  line-height: 24px;
}

.auth-button {
  color:#3A4A5F;
  background-color: azure;
  font-size: 0.8rem;
  width: 100%;
}

#index-ul-1 {
  list-style-type: none !important;
  padding-left: 10px !important;
}

#index-ul-1 li {
  padding-left: 10px !important;
}

#index-ul-1 li::marker {
  content: '✔️' !important;
}

#index-ul-2 {
  list-style-type: none !important;
  padding-left: 10px !important;
}

#index-ul-2 li {
  padding-left: 10px !important;
}

#index-ul-2 li::marker {
  content: '✅' !important;
}

#article-index-published-ul {
  list-style-type: '-' !important;
  padding-left: 10px !important;
}

#article-index-published-ul li {
  padding-left: 10px !important;
}

#article-index-title-ul {
  list-style-type: circle !important;
  padding-left: 20px !important;
}

#article-index-title-ul li {
  padding-left: 0px !important;
}

#tomorrow-button {
  font-size: 2rem;
  font-weight: 900;
  height: 100%;
  text-align: center;
  background-color: #3a4a5fe0;
  border-radius: 4px;
}

#tomorrow-button:hover {
  background-color: #4a5b71;
}

#today-button {
  font-size: 2rem;
  font-weight: 900;
  height: 100%;
  text-align: center;
  background-color: #3a4a5fe0;
  border-radius: 4px;
}

#today-button:hover {
  background-color: #4a5b71;
}

.scroll-container {
  overflow: hidden; /* 隐藏滚动条 */
  position: relative;
}
.scroll-content {
  position: absolute;
}

/* 可选：添加一些动画平滑度 */
[x-transition] {
  transition-timing-function: linear;
}

#shipan_box_a {
  width: 320px; 
  height: 320px; 
  position: relative; 
  overflow: hidden;
  border-radius: 36px;
}

#shipan_a {
  width: 320px;
  height: 320px;
  object-fit: cover;
}

#shipan_b {
  width: 166px; 
  height: 162px; 
  position: absolute; 
  top: 24.9%; 
  left: 24.2%;
}

.mobile-tabs-select {
  display: none;
  width: 100%;
}

@media screen and (max-width: 768px) {
  .tabs ul {
    display: none;
  }
       
  .mobile-tabs-select {
    display: block;
  }
}

.subscription-ul {
  list-style-type: none !important;
  padding-left: 10px !important;
}

.subscription-ul li {
  padding-left: 10px !important;
}

.subscription-ul li::marker {
  content: '✔️' !important;
}

.tongbao-box {
  width: 48px;
  height: 48px;
  border-radius: 24px;
  overflow: hidden; /* 截断超出容器的部分 */
  position: relative;
}

.tongbao-img {
  max-width: 60px;
  width: 60px;
  height: 60px;
  object-fit: contain;
  /* border-radius: 32px; */
  object-position: center; /* 居中显示 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 确保居中对齐 */
}

.gua-box {
  display:flex;
  align-items:center;
  justify-content:center;
}

.countdown-overlay {
  display: flex;
  justify-content: center;
  /* align-items: center; */
}

.countdown-ring {
  width:  150px;
  height: 150px;
  border: 20px solid #3498db; /* 蓝色圆环 */
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.countdown-number {
  margin-top: -10px;
  color: white;
  font-size: 64px;
  font-weight: bold;
}

.compass-image {
  /* box-shadow: 2px 2px 10px rgba(134, 134, 134, 0.5); */
  border-radius: 10px;
}

.compass-desc {
  font-size: 1.1rem;
}

.order-td {
  font-weight: 800;
  text-align: right !important;
}

#order.table td {
  color: black !important;
}

.compass-card .card-content ul {
  list-style-type: circle !important;
  padding-left: 20px !important;
}

.compass-card .card-content ul li {
  padding-left: 0px !important;
}

.compass-card .card-header {
  padding: 10px;
}

.compass-card .card-content {
  padding: 10px;
  font-size: 0.8rem;
}

#compass-history {
  background-color: #3a4a5f5c;;
}