/* 六智宝库 - 解读页上下页导航（卡片风格） */

.topic-nav {
  max-width: 1100px;
  margin: 2rem auto 0;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
  align-items: stretch;
}

.topic-nav-btn {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: 1rem 1.2rem;
  border-radius: 12px;
  border: 1px solid #D4C4B0;
  background: #FCF6E7;
  text-decoration: none;
  color: #2C1F18;
  font-size: .88rem;
  font-weight: 500;
  box-shadow: 0 1px 4px rgba(44,31,18,.08), 0 8px 20px -14px rgba(44,31,18,.12);
  transition: all .25s;
  position: relative;
  overflow: hidden;
}

/* 顶部红色色条 */
.topic-nav-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(to right, #C73E2A, #E8A090);
  opacity: 0;
  transition: opacity .25s;
}

/* hover 时上浮 */
.topic-nav-btn:hover {
  border-color: #C73E2A;
  transform: translateY(-3px);
  box-shadow: 0 8px 24px -8px rgba(199, 62, 42, .25);
  color: #C73E2A;
}

.topic-nav-btn:hover::before {
  opacity: 1;
}

.topic-nav-btn .nav-arrow {
  font-size: 1.3rem;
  line-height: 1;
  opacity: .5;
  transition: all .25s;
}

.topic-nav-btn.prev:hover .nav-arrow {
  opacity: 1;
  transform: translateX(-4px);
}

/* 下一条按钮样式（绿色） */
.topic-nav-btn.next {
  flex-direction: row-reverse;
  text-align: right;
}

.topic-nav-btn.next::before {
  background: linear-gradient(to left, #1E6B6E, #7FB5B8);
}

.topic-nav-btn.next:hover {
  border-color: #1E6B6E;
  color: #1E6B6E;
  box-shadow: 0 8px 24px -8px rgba(30, 107, 110, .25);
}

.topic-nav-btn.next:hover .nav-arrow {
  opacity: 1;
  transform: translateX(4px);
}

/* 中间状态卡 */
.topic-nav-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  padding: .8rem 1rem;
  border-radius: 12px;
  border: 1px solid #D4C4B0;
  background: #FAF1DC;
  box-shadow: 0 1px 4px rgba(44,31,18,.06);
}

.topic-nav-hint {
  font-size: .72rem;
  color: #6F5A47;
  font-weight: 500;
  white-space: nowrap;
}

.topic-nav-empty {
  font-size: .66rem;
  color: #8B7355;
  padding: .15rem .5rem;
  border-radius: 999px;
  background: #F2E8D2;
  border: 1px dashed #C4B09A;
}

/* 禁用态 */
.topic-nav-btn[style*="pointer-events:none"] {
  opacity: .35;
  cursor: not-allowed;
  filter: grayscale(.3);
}

.topic-nav-btn[style*="pointer-events:none"]:hover {
  transform: none;
  box-shadow: 0 1px 4px rgba(44,31,18,.08);
}

/* ── 响应式 ── */
@media (max-width: 768px) {
  .topic-nav {
    grid-template-columns: 1fr;
    gap: .75rem;
  }
  
  .topic-nav-center {
    flex-direction: row;
    order: -1;
  }
  
  .topic-nav-btn {
    justify-content: center;
    padding: .85rem 1rem;
  }
  
  .topic-nav-btn.next {
    flex-direction: row;
  }
}