.page-title{ color:#000; margin:0 0 12px; }

/* 统一去掉所有链接下划线 */
a, a:hover, a:focus, a:active, a:visited{
  text-decoration:none !important;
}

/* ===== Tabs (9列) ===== */
.tabs{
  width:700px;
  margin:0 auto 12px auto;
  display:grid;
  grid-template-columns: repeat(9, 1fr);
  gap:4px;
}
.tab{
  background:#eee;
  color:#333;
  border:1px solid #ccc;
  border-radius:6px;
  padding:6px 0;
  cursor:pointer;
  transition:background .2s ease, color .2s ease, transform .1s ease;
  text-align:center;
  font-size:14px;
}
.tab:hover{ background:#ddd; color:#000; transform: translateY(-1px); }
.tab.is-active{ background:#ffd166; color:#222; border-color:#e0b14f; }

/* ===== 卡片网格容器 ===== */
.grid-tiles{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px 16px;
  width:700px;
  margin:20px auto;

  position:relative;
  left:5px; /* 👈 只让卡片网格整体右移 5px */
}

/* ===== 卡片整体（线框版） ===== */
.card{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:120px;
  cursor:pointer;

  border-radius:8px;
  overflow:hidden;
  border:1px solid #ccc;
  background:transparent;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease, border-color .25s ease;

  text-decoration:none;
}

/* 悬停整体效果 */
.card:hover,
.card:focus-within{
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 12px 22px rgba(0,0,0,0.15);
  filter: brightness(1.05) saturate(1.08);
  border-color:#6496C7;
}

/* ===== 图片区：A/B图统一靠下 ===== */
.tile{
  width:100%;
  height:154px;
  position:relative;
  background:none;
  overflow:hidden;
}
.tile::after{
  content: var(--img-a);
  display:block;
  position:absolute;
  bottom:6px;
  left:50%;
  transform:translateX(-50%);
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
}
.card:hover .tile::after{
  content: var(--img-b);
}

/* ===== 标题条 ===== */
.caption{
  width:100%;
  height:24px;
  line-height:24px;
  background:#6496C7;
  color:#fff;
  font-size:14px;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  position:relative;

  text-decoration:none !important;
}
.caption::before{ content: attr(aria-label); }
.card:hover .caption,
.card:focus-within .caption{
  color:#ffd166;
}
.card:hover .caption::before,
.card:focus-within .caption::before{
  content: attr(data-title);
}

/* ===== Tooltip ===== */
.tooltip{
  position:fixed;
  display:none;
  flex-direction:row;
  background:#fff;
  color:#000;
  border:1px solid #ccc;
  border-radius:6px;
  font-size:13px;
  line-height:1.5;
  box-shadow:0 2px 8px rgba(0,0,0,0.15);
  z-index:999;
  width:auto;
  max-width:280px;
  padding:8px;
}
.tooltip-icon-wrap{
  flex:0 0 60px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-right:1px solid #eee;
  margin-right:8px;
  position:relative;
}
.tooltip-icon{
  width:40px;
  height:40px;
  position:relative;
  z-index:1;
}
.tooltip-icon-wrap::before{
  content:"";
  position:absolute;
  width:46px;
  height:46px;
  left:50%; top:50%;
  transform: translate(-50%,-50%);
  border-radius:0;
  background: conic-gradient(red, orange, yellow, green, cyan, blue, violet, red);
  padding:3px;
  box-sizing:border-box;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  z-index:0;
}
.tooltip-content{
  flex:1;
  display:flex;
  flex-direction:column;
  text-align:left;
  padding-left:4px;
}
.tooltip-title{
  font-weight:bold;
  font-size:14px;
  color:#ff6600;
  margin-bottom:4px;
  border-bottom:1px solid #eee;
  padding-bottom:2px;
  text-align:left;
}
.tooltip-desc{
  font-size:13px;
  color:#000;
  white-space:pre-line;
  text-align:left;
}

/* ===== 动画优化 ===== */
@media (prefers-reduced-motion: reduce){
  .card{ transition:none !important; }
}