/* 这三个 tailwind指令告诉 Tailwind CSS 注入三类样式： */
/*  基础样式重置（如 margin、padding 的默认值）*/
@tailwind base;
/*  组件样式（如按钮、输入框等）*/
@tailwind components;
/*  工具类样式（如 bg-blue-500、flex、p-4 等）*/
@tailwind utilities;

body {
  /* min-height: 1024px; */
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.circle-button {
  width: 120px;
  height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.circle-button:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}

.circle-button i {
  font-size: 32px;
  margin-bottom: 8px;
}

.circle-button span {
  font-weight: 500;
}

.user-info {
  background-color: #f9fafb;
  padding: 8px 16px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
}

.action-btn {
  padding: 8px 16px;
  border-radius: 9999px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.action-btn:hover {
  opacity: 0.9;
}