:root {
  /* 颜色变量定义 */
  --ion-color-primary: #4b0082; /* 深紫色 */
  --ion-color-secondary: #800080; /* 紫色 */
  --ion-color-tertiary: #ee82ee; /* 浅紫色 */
  --ion-color-light-bg: #f8f0ff; /* 中等亮度的浅紫色背景 */
  --ion-color-input-bg: rgba(255, 255, 255, 0.9); /* 纯白色背景，稍微减少透明度 */
  --ion-color-border: #dddddd; /* 较浅的灰色边框 */
  --ion-color-text: #333333; /* 深灰色文本 */
  --ion-color-title-bg: #e0d4ff; /* 稍微加深的标题背景条颜色 */
}

body {
  font-family: '思源黑体', '微软雅黑', '苹方', sans-serif;
  background-color: var(--ion-color-light-bg);
  color: var(--ion-color-text);
}

/* Header 样式 */
ion-header {
  --background: var(--ion-color-primary);
  color: #ffffff; /* 确保文字为白色，提升对比度 */
}

ion-toolbar {
  --background: transparent;
}

ion-title {
  font-size: 1.6rem; /* 微调字号 */
  font-weight: bold; /* 保持加粗 */
  display: flex;
  align-items: center;
  background: var(--ion-color-title-bg); /* 添加稍微加深的背景条 */
  padding: 12px 20px; /* 增加内边距 */
  border-radius: 8px; /* 保持圆角 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加轻微阴影 */
}

ion-title ion-icon {
  margin-right: 10px; /* 微调图标与标题的间距 */
  font-size: 2rem; /* 增大图标尺寸 */
}

/* Content 样式 */
ion-content {
  --background: none;
  background: linear-gradient(to bottom, #4b0082, #800080, #ee82ee); /* 保持原有渐变 */
  position: relative;
  padding: 24px; /* 增加内边距 */
}

ion-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2); /* 减少透明度，避免过暗 */
  pointer-events: none;
  z-index: 2;
}

ion-content > * {
  position: relative;
  z-index: 3;
}

/* 输入框样式 */
ion-item {
  --background: var(--ion-color-input-bg); /* 纯白色背景 */
  border: 1px solid var(--ion-color-border); /* 添加浅灰色边框 */
  border-radius: 8px; /* 保持圆角 */
  margin-bottom: 20px; /* 保持底部间距 */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); /* 添加轻微阴影 */
}

ion-input,
ion-textarea {
  --padding-start: 16px; /* 增加内边距 */
  --padding-end: 16px; /* 增加内边距 */
  font-size: 1rem; /* 保持字体大小 */
  color: var(--ion-color-text); /* 深灰色文本 */
}

ion-input:focus,
ion-textarea:focus {
  border-color: var(--ion-color-secondary); /* 聚焦时边框颜色 */
  box-shadow: 0 0 5px var(--ion-color-secondary); /* 聚焦时阴影 */
}

/* 按钮样式 */
ion-button {
  --background: var(--ion-color-secondary); /* 紫色按钮 */
  --border-radius: 8px; /* 圆角 */
  --padding-vertical: 12px; /* 微调垂直内边距 */
  --padding-horizontal: 20px; /* 保持水平内边距 */
  font-weight: bold; /* 保持加粗 */
  color: #ffffff; /* 白色文字 */
  font-size: 1.2rem; /* 增大字号 */
  margin-top: 24px; /* 增加顶部间距 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* 添加中等阴影 */
  transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease; /* 添加过渡效果 */
}

ion-button:hover {
  --background: #a64fc1; /* 调整悬停颜色，保持与原有颜色协调 */
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.25); /* 增大阴影 */
}

ion-button:active {
  --background: #663399; /* 调整激活颜色，保持与原有颜色协调 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); /* 减小阴影 */
  transform: scale(0.98); /* 点击时略微缩小 */
}

/* 加载动画容器 */
.loading-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-top: 24px; /* 增加顶部间距 */
  color: var(--ion-color-secondary);
}

.response-container {
  background-color: rgba(255, 255, 255, 0.9); /* 保持稍微透明的纯白色背景 */
  border-radius: 8px; /* 圆角 */
  padding: 20px; /* 增加内边距 */
  margin-top: 24px; /* 增加顶部间距 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* 增加阴影 */
}

/* Markdown 预览样式 */
fm-markdown-preview {
  font-size: 1rem;
  line-height: 1.6;
  color: #444444; /* 深灰色文本 */
}

/* 底部导航栏样式（如果有的话） */
ion-footer {
  --background: #ffffff; /* 纯白色背景 */
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影 */
}

ion-tab-bar {
  height: 60px; /* 增加高度 */
}

ion-tab-button {
  font-size: 1rem; /* 增大文字 */
  color: #666666; /* 浅灰色文字 */
}

ion-tab-button[aria-selected="true"] {
  color: var(--ion-color-secondary); /* 选中项高亮 */
}

ion-tab-button ion-icon {
  font-size: 1.5rem; /* 增大图标 */
}

ion-tab-button ion-label {
  margin-top: 4px;
}