/* liuyao-fix.css - pan-ui-fix 六爻排盘 */
/* 排盘结果方格线 */
#one table { border-collapse: collapse; }
#one th, #one td {
  border: 1px solid #999;
  padding: 6px 4px;
  text-align: center;
  font-size: clamp(13px, 4.3vw, 16px);
}

/* 移动端响应式调整 */
@media (max-width: 480px) {
  #one th, #one td { padding: 4px 2px; }
}

/* ===== 模式标签 - pill 风格 ===== */
.mode-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  border-bottom: none;
  padding-bottom: 0;
  background: var(--bg3, #f7f8fa);
  border-radius: 10px;
  padding: 6px;
}
.mode-tab {
  display: inline-block;
  flex: 1;
  min-width: 60px;
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text2, #666);
  font-size: clamp(13px, 3.8vw, 15px);
  text-align: center;
  text-decoration: none;
  transition: all 0.25s ease;
  user-select: none;
  border: 1px solid transparent;
  background: transparent;
  white-space: nowrap;
}
.mode-tab:hover {
  color: var(--gold, #8B6914);
  background: rgba(139,105,20,0.06);
  border-color: rgba(139,105,20,0.15);
}
.mode-tab.active {
  background: linear-gradient(135deg, #8B6914, #7a5a10);
  color: #fff !important;
  font-weight: bold;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(139,105,20,0.3);
}

/* 移动端标签适配 */
@media (max-width: 480px) {
  .mode-tabs {
    gap: 6px;
    padding: 5px;
  }
  .mode-tab {
    padding: 9px 10px;
    font-size: clamp(12px, 3.5vw, 14px);
  }
}