body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #f8f9fa;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-top: 0; /* 移除顶部内边距 */
}

/* 添加固定导航栏的相关样式 */
.navbar-spacer {
  height: 60px; /* 与导航栏高度一致 */
}

/* 强制导航栏位于顶层 */
.navbar.fixed-top {
  z-index: 1030;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* 操作按钮组样式 */
.action-buttons {
  display: flex;
  flex-wrap: nowrap; /* 防止按钮换行 */
  align-items: center;
}

#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

/* 笔记列表样式 */
.note-card {
  transition: transform 0.2s, box-shadow 0.2s;
  border: 1px solid rgba(0,0,0,0.125);
}

.note-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.note-summary {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 4.8em;
}

/* 编辑器样式 */
.editor-container {
  height: calc(100vh - 200px);
  min-height: 400px;
  margin-left: -5px;
  margin-right: -5px;
}

.markdown-input, .markdown-preview {
  height: 100%;
}

.editor {
  height: calc(100% - 24px);
  font-family: monospace;
  resize: none;
  tab-size: 2;
}

.preview-card {
  height: 100%;
}

/* 确保预览框显示内容 */
.preview {
  overflow-y: visible; /* 改为可见溢出，使整个页面滚动 */
  padding: 1rem;
  background-color: white;
  min-height: auto; /* 取消最小高度限制 */
  height: auto; /* 自适应高度 */
  display: block; /* 强制显示 */
  visibility: visible; /* 确保可见性 */
}

.card-body.preview {
  padding: 1.25rem;
}

.flex-grow-1 {
  flex-grow: 1;
}

/* 调整预览区域的内容样式 */
.preview * {
  max-width: 100%;
}

.preview img {
  max-width: 100%;
  height: auto;
}

.preview {
  overflow-y: auto;
  padding: 1rem;
  background-color: white;
  height: 100%;
}

/* Markdown 样式 */
.preview h1, .preview h2 {
  border-bottom: 1px solid #eaecef;
  padding-bottom: 0.3em;
  margin-top: 1em;
}

.preview h1 {
  font-size: 1.8rem;
}

.preview h2 {
  font-size: 1.5rem;
}

.preview h3 {
  font-size: 1.3rem;
}

.preview code {
  background-color: rgba(27, 31, 35, 0.05);
  border-radius: 3px;
  padding: 0.2em 0.4em;
  font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
}

.preview pre code {
  display: block;
  overflow-x: auto;
  padding: 1em;
  background-color: #f6f8fa;
  border-radius: 3px;
}

.preview blockquote {
  padding: 0 1em;
  border-left: 0.25em solid #dfe2e5;
  color: #6a737d;
}

.preview table {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 1rem;
}

.preview table th, .preview table td {
  padding: 0.5rem;
  border: 1px solid #dfe2e5;
}

.preview table tr:nth-child(2n) {
  background-color: #f6f8fa;
}

/* 响应式布局调整 */
@media (max-width: 767.98px) {
  /* 导航栏响应式调整 */
  .navbar-spacer {
    height: 56px; /* 手机端导航栏通常更短 */
  }
  
  /* 内容区域响应式调整 */
  .editor-container {
    height: auto;
  }
  
  .markdown-input, .markdown-preview {
    height: auto;
  }
  
  .editor {
    height: 300px;
  }
  
  /* 修改预览区样式使其整页滚动 */
  .preview {
    height: auto;
    overflow-y: visible;
    max-height: none;
  }
  
  .content-card .preview {
    min-height: 200px; /* 给予内容区最小高度 */
  }
  
  .markdown-preview {
    margin-top: 20px;
  }
  
  .row > [class*="col-"] {
    margin-bottom: 1rem;
  }
  
  /* 确保操作按钮在手机端排版整齐 */
  .action-buttons {
    display: flex;
    flex-wrap: nowrap;
    margin-top: 0.5rem;
    width: 100%;
  }
  
  .action-buttons .btn {
    flex: 1;
    text-align: center;
    min-width: auto;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  /* 手机端编辑器和预览区统一高度 */
  .editor, .markdown-preview .preview {
    height: 300px; /* 手机端固定高度 */
    min-height: 300px;
    max-height: 300px;
  }
  
  .markdown-preview .card-body.preview {
    height: 300px; /* 确保预览区固定高度 */
    overflow-y: auto;
    padding: 1rem;
  }
  
  /* 修改预览区样式，只在查看页面使其整页滚动 */
  .content-card .preview {
    height: auto;
    overflow-y: visible;
    max-height: none;
  }

  /* 移动端编辑器样式调整，使其充满整个屏幕 */
  .editor-container {
    height: auto;
    margin-top: 0;
  }
  
  /* 隐藏标签，节省空间 */
  .markdown-input label, .markdown-preview label {
    display: none;
  }
  
  /* 覆盖之前的高度限制，使其充满屏幕 */
  .editor, .markdown-preview .preview {
    height: calc(100vh - 200px) !important; /* 考虑导航栏、切换按钮和页面边距 */
    min-height: 400px;
    max-height: none;
  }
  
  .markdown-preview .card-body.preview {
    height: auto;
    min-height: calc(100vh - 200px);
  }
  
  /* 移动端保持全宽 */
  .main-container {
    max-width: 100%;
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* KaTeX 相关调整 */
.katex-display {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.5em 0;
}

/* 分享链接样式 */
#shareUrl {
  background-color: #f8f9fa;
  cursor: text;
}

/* 修改预览样式，取消固定高度限制，改为自适应页面高度 */
.content-card {
  border: 1px solid rgba(0,0,0,0.125);
  margin-bottom: 2rem;
}

/* 编辑界面预览框样式调整 */
.markdown-preview .card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* 编辑器和预览区域内部滚动统一样式 */
.editor, .markdown-preview .preview {
  overflow-y: auto !important; /* 强制使用内部滚动 */
  height: 100%;
  min-height: 300px;
}

/* 预览区域在卡片内部填满空间 */
.markdown-preview .card-body.preview {
  flex: 1;
  overflow-y: auto !important; /* 强制内部滚动 */
  max-height: none; /* 移除可能存在的高度限制 */
}

/* 内容区预览样式（非编辑模式）- 这部分仍然允许页面滚动 */
.content-card {
  border: 1px solid rgba(0,0,0,0.125);
  margin-bottom: 2rem;
}

.content-card .preview {
  overflow-y: visible; /* 查看模式下允许页面滚动 */
  height: auto;
}

/* 移动端编辑/预览切换按钮样式 */
.mobile-toggle-container {
  position: sticky;
  top: 56px; /* 与导航栏高度一致 */
  z-index: 1000;
  background: white;
  padding: 8px 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 限制主内容区宽度 */
.main-container {
  max-width: 1100px; /* 限制最大宽度 */
  width: 100%;
  padding-left: 15px;
  padding-right: 15px;
}

/* 导航栏悬浮效果 - 修改背景色与主背景一致 */
.navbar-float {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); /* 扩大阴影范围并加深 */
  transform: translateY(-3px); /* 添加向上移动效果，类似笔记卡片 */
  transition: box-shadow 0.3s ease, transform 0.2s ease;
  background-color: #f8f9fa !important; /* 与主背景相同的颜色 */
}

/* 自定义导航栏颜色 */
.navbar.navbar-white {
  background-color: #f8f9fa !important; /* 确保与主背景颜色一致 */
}

/* 自定义灰色导航栏颜色 */
.navbar.bg-secondary {
  background-color: #f1f1f1cc !important; /* 非常浅的灰色 */
}

/* 由于背景变浅，调整导航栏文字颜色 */
.navbar-dark.bg-secondary {
  --bs-navbar-color: rgba(0, 0, 0, 0.75);
  --bs-navbar-hover-color: rgba(0, 0, 0, 0.9);
  --bs-navbar-active-color: rgba(0, 0, 0, 1);
}

.navbar-dark.bg-secondary .navbar-brand,
.navbar-dark.bg-secondary .navbar-nav .nav-link {
  color: rgba(0, 0, 0, 0.85);
}

.navbar-dark.bg-secondary .navbar-brand:hover,
.navbar-dark.bg-secondary .navbar-nav .nav-link:hover {
  color: rgba(0, 0, 0, 1);
}

.navbar-dark.bg-secondary .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* 笔记卡片在新容器宽度下的调整 */
@media (min-width: 992px) {
  .notes-list .row {
    margin-left: -10px;
    margin-right: -10px;
  }
  
  .notes-list .col {
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* 添加草书字体样式类 */
.cursive-text {
  font-family: 'Brush Script MT', cursive;
  font-size: 1.4em;
  font-weight: 500;
  letter-spacing: 0.5px;
}

/* 为导航栏标题特别设置样式 */
.navbar-brand.cursive-text {
  font-size: 1.8em;
  transform: rotate(-2deg); /* 微微倾斜，增加艺术感 */
  display: inline-block;
  padding: 0 5px;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

/* 页脚草书字体样式 */
footer .cursive-text {
  font-size: 1.3em;
  display: inline-block;
}

/* 页脚整体样式 */
.site-footer {
  color: #a5a5a5; /* Bootstrap 默认的 text-muted 颜色 */
  font-size: 0.9em;  /* 可以让整个页脚的字体略小一些，更显精致 */
}

/* 页脚内段落间距调整 */
.site-footer p {
  margin-bottom: 0.3rem; /* 设置段落间合适的间距 */
}

.site-footer p:last-child {
  margin-bottom: 0; /* 最后一个段落无下外边距 */
}

/* 页脚内链接样式 */
.site-footer a {
  color: #a5a5a5; /* 链接颜色与周围文本一致 */
  text-decoration: none; /* 默认无下划线 */
}

.site-footer a:hover {
  color: #7a7a7a; /* 鼠标悬停时颜色略深，或使用您的主题色 */
  /* text-decoration: underline; /* 鼠标悬停时显示下划线，提高可识别性 */
}

/* 备案号特定样式 (可选，如果需要进一步调整) */
.icp-info {
  font-size: 0.9em;
  letter-spacing: 0.5px;
}

/* 确保草书字体样式不受影响 */
.site-footer .cursive-text {
  font-family: 'Brush Script MT', cursive; /* 继承您已有的草书字体 */
  /* 其他草书字体相关样式会继续生效 */
}