.vscode-markdown {
  color: var(--vscode-text);
  line-height: 1.65;  /* 优化行高，提高行间距，增加可读性 */
  font-size: 16px;    /* 调整为更舒适的阅读大小 */
  letter-spacing: 0.01em; /* 微调字母间距，提高可读性 */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; /* 使用系统UI字体，提高可读性 */
}

.vscode-markdown h1,
.vscode-markdown h2,
.vscode-markdown h3,
.vscode-markdown h4,
.vscode-markdown h5,
.vscode-markdown h6 {
  color: var(--vscode-text);
  font-weight: 600;
  margin: 1.8em 0 0.9em; /* 进一步优化标题前后间距，增加前置空间 */
  position: relative;
  padding-left: 1.5em; /* 保持左内边距适中 */
  line-height: 1.4; /* 标题行高略微紧凑，但保持清晰 */
  letter-spacing: 0.01em; /* 微调标题字母间距 */
}

/* 为不同级别标题设置更小的字体大小 */
.vscode-markdown h1 {
  font-size: 1.8em; /* 原来一般为2em */
}

.vscode-markdown h2 {
  font-size: 1.5em; /* 原来一般为1.75em */
}

.vscode-markdown h3 {
  font-size: 1.3em; /* 原来一般为1.5em */
}

.vscode-markdown h4 {
  font-size: 1.1em; /* 原来一般为1.25em */
}

.vscode-markdown h5 {
  font-size: 1em; /* 原来一般为1em */
}

.vscode-markdown h6 {
  font-size: 0.9em; /* 原来一般为0.875em */
  color: var(--vscode-text-light); /* 稍微淡化最小标题 */
}

.vscode-markdown h1::before,
.vscode-markdown h2::before,
.vscode-markdown h3::before,
.vscode-markdown h4::before,
.vscode-markdown h5::before,
.vscode-markdown h6::before {
  content: '#';
  position: absolute;
  left: 0.4em; /* 微调位置使视觉平衡更好 */
  color: var(--vscode-link);
  font-weight: bold;
  font-size: 0.95em; /* 调整大小使其与文本更协调 */
  opacity: 0.75; /* 进一步降低不透明度，减少视觉干扰 */
  transform: translateY(0.05em); /* 微调垂直位置，与标题文本更加对齐 */
}

.vscode-markdown p {
  margin: 1em 0 1.2em; /* 增加段落间的垂直空间，特别是底部空间 */
  max-width: 70ch; /* 限制理想的行宽，大约为70个字符宽度，提高可读性 */
}

.vscode-markdown a {
  color: var(--vscode-link);
  text-decoration: none;
  border-bottom: 1px solid var(--vscode-selection);
  padding-bottom: 1px;
  transition: all 0.2s ease;
  font-weight: 500;
}

.vscode-markdown a:hover {
  color: var(--vscode-link-hover);
  border-bottom-color: var(--vscode-link-hover);
  background: var(--vscode-selection);
}

.vscode-markdown blockquote {
  border-left: 4px solid var(--vscode-link);
  margin: 1.5em 0 1.7em;
  padding: 0.8em 1.2em;
  background: var(--vscode-selection); /* 使用半透明的主题色作为背景 */
  color: var(--vscode-text); /* 略微提亮引用文字颜色 */
  border-radius: 0 4px 4px 0; /* 添加右侧圆角 */
  box-shadow: 0 2px 8px var(--vscode-shadow); /* 添加微妙阴影 */
  font-style: italic; /* 斜体强调引用文本 */
}

.vscode-markdown ul,
.vscode-markdown ol {
  padding-left: 2.2em;
  margin: 1.2em 0 1.4em;
}

.vscode-markdown li {
  margin: 0.4em 0 0.6em;
  padding-left: 0.3em;
  position: relative;
}

/* 优化列表项的视觉效果 */
.vscode-markdown ul li::marker {
  color: var(--vscode-link); /* 使列表符号带有主题色 */
  opacity: 0.8;
}

.vscode-markdown img {
  max-width: 100%;
  border: 1px solid var(--vscode-border);
  border-radius: 6px;
  margin: 1.5em auto;
  display: block;
  box-shadow: 0 3px 10px var(--vscode-shadow);
  transition: all 0.3s ease;
}

.vscode-markdown img:hover {
  transform: scale(1.01);
  box-shadow: 0 5px 15px var(--vscode-shadow);
}

/* 文章导航样式 */
.post-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 2em;
  padding-top: 2em;
  border-top: 1px solid var(--vscode-border);
}

.post-nav a {
  flex: 1;
  padding: 1em;
  color: var(--vscode-text);
  text-decoration: none;
  background: var(--vscode-active);
  border: 1px solid var(--vscode-border);
  border-radius: 4px;
  transition: all 0.2s ease;
}

.post-nav a:hover {
  background: var(--vscode-highlight);
  transform: translateY(-2px);
}

.post-nav .prev {
  margin-right: 1em;
}

.post-nav .next {
  text-align: right;
}

/* TOC样式优化 */
.toc {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.toc-child {
  list-style: none;
  padding-left: 1em;
}

.toc-link {
  display: block;
  padding: 4px 8px;
  color: var(--vscode-text);
  text-decoration: none;
  font-size: 13px;
  border-left: 2px solid transparent;
  transition: all 0.2s ease;
}

.toc-link:hover {
  background: var(--vscode-active);
  border-left-color: var(--vscode-link);
  color: var(--vscode-text);
}

.toc-link.active {
  background: var(--vscode-active);
  border-left-color: var(--vscode-link);
  color: var(--vscode-link);
}

/* 分类和标签垂直排列样式 */
.categories-list,
.tags-list {
  display: flex;
  flex-direction: column;
  margin-top: 0.5rem;
}

.categories-list ul,
.tags-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.categories-list li,
.tags-list li {
  margin-bottom: 0;
  margin-right: 5px;
}

.category-item-post a,
.tag-item-post a {
  display: inline-block;
  text-decoration: none;
  color: var(--vscode-text);
  padding: 0.3rem 0.5rem;
  transition: all 0.2s ease;
  border-left: 2px solid transparent;
}

.category-item-post a:hover,
.tag-item-post a:hover {
  background: var(--vscode-active);
  border-left-color: var(--vscode-link);
  color: var(--vscode-link);
}

/* 文章元信息样式优化 */
.post-meta {
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: row;  /* 修改为横向排列 */
  flex-wrap: wrap;      /* 添加换行，确保在小屏幕上也能正常显示 */
  gap: 1rem;            /* 增加间距，使横向排列时更美观 */
}

.post-meta > span {
  display: flex;
  align-items: center;
}

.post-meta i {
  margin-right: 0.5rem;
  margin-top: 0;        /* 移除顶部边距，因为现在是居中对齐 */
}

.post-meta .categories i {
  color: var(--vscode-warning);
}

.post-meta .tags i {
  color: var(--vscode-link);
}

/* 置顶文章指示器样式 */
.sticky-indicator {
  display: inline-flex;
  align-items: center;
  margin-left: 0.5rem;
  padding: 0.2rem 0.5rem;
  background: var(--vscode-active);
  border: 1px solid var(--vscode-border);
  border-radius: 3px;
  font-size: 0.75rem;
  color: var(--vscode-link);
  transition: all 0.2s ease;
}

.sticky-indicator i {
  font-size: 0.75rem;
  transform: rotate(45deg);
  margin-right: 0;
}

.sticky-indicator:hover {
  background: var(--vscode-bg-light);
  border-color: var(--vscode-link);
  box-shadow: 0 0 5px var(--vscode-selection);
}

/* 在文章卡片中的置顶指示器 */
.post-card .sticky-indicator {
  vertical-align: middle;
}

/* 在归档页面中的置顶指示器 */
.archive-posts .sticky-indicator,
.timeline-post .sticky-indicator {
  font-size: 0.7rem;
  padding: 0.1rem 0.3rem;
  margin-left: 0.3rem;
}

/* Password Protection Card - Shadcn Inspired */
#hexo-blog-encrypt {
  max-width: 640px;
  margin: 3rem auto;
  padding: 0;
  background-color: var(--vscode-editor-background);
  border: 1px solid var(--vscode-widget-border);
  border-radius: 0.75rem;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  font-family: var(--font-family);
  transition: all 0.3s ease;
}

#hexo-blog-encrypt.hbe-unlocked {
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.hbe-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--vscode-widget-border);
}

.hbe-header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.hbe-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--vscode-button-secondaryBackground);
  color: var(--vscode-button-secondaryForeground);
  border: 1px solid var(--vscode-widget-border);
  transition: all 0.3s ease;
}

/* Lock icon animation */
.hbe-lock-icon {
  position: relative;
}

.hbe-lock-icon .hbe-lock-closed,
.hbe-lock-icon .hbe-lock-open {
  transition: all 0.3s ease;
}

#hexo-blog-encrypt.hbe-unlocked .hbe-lock-icon .hbe-lock-closed {
  display: none;
}

#hexo-blog-encrypt.hbe-unlocked .hbe-lock-icon .hbe-lock-open {
  display: inline !important;
}

#hexo-blog-encrypt.hbe-unlocked .hbe-icon {
  background-color: var(--vscode-debugIcon-breakpointCurrentForeground, #4ade80);
  color: #fff;
  border-color: transparent;
  animation: hbe-pulse 0.5s ease-out;
}

.hbe-header-copy {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.hbe-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.65rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 999px;
  background: var(--vscode-button-secondaryBackground);
  color: var(--vscode-button-secondaryForeground);
  border: 1px solid var(--vscode-widget-border);
  width: fit-content;
}

.hbe-title {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0;
  color: var(--vscode-editor-foreground);
}

.hbe-description {
  font-size: 0.9rem;
  color: var(--vscode-descriptionForeground);
  margin: 0;
  line-height: 1.5;
}

.hbe-content-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.15rem 1.5rem 1.35rem;
}

.hbe-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--vscode-editor-foreground);
  margin-bottom: 0.1rem;
}

.hbe-input-container {
  display: flex;
  gap: 0.6rem;
  position: relative;
  align-items: center;
}

.hbe-input {
  flex: 1;
  height: 2.75rem;
  padding: 0.6rem 0.9rem;
  font-size: 0.95rem;
  border-radius: 0.5rem;
  border: 1px solid var(--vscode-input-border);
  background-color: var(--vscode-input-background);
  color: var(--vscode-input-foreground);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  outline: none;
}

.hbe-input:focus {
  border-color: var(--vscode-focusBorder);
  box-shadow: 0 0 0 2px rgba(86, 156, 214, 0.25);
}

/* Input wrapper for password toggle */
.hbe-input-wrapper {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 0; /* Prevent flex item from overflowing */
}

.hbe-input-wrapper .hbe-input {
  width: 100%;
  padding-right: 2.75rem;
  box-sizing: border-box;
}

.hbe-toggle-password {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0.35rem;
  color: var(--vscode-descriptionForeground);
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
  z-index: 1; /* Ensure toggle button is above input */
}

.hbe-toggle-password:hover {
  color: var(--vscode-editor-foreground);
  background-color: var(--vscode-button-secondaryBackground);
}

.hbe-toggle-password:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--vscode-focusBorder);
}

.hbe-toggle-password svg {
  width: 18px;
  height: 18px;
}

.hbe-toggle-password .hbe-eye-off-icon {
  display: none;
}

.hbe-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  height: 2.75rem;
  padding: 0 1.15rem;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 0.55rem;
  border: 1px solid var(--vscode-button-border, var(--vscode-button-background));
  background-color: var(--vscode-button-background);
  color: var(--vscode-button-foreground);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.hbe-button:hover {
  background-color: var(--vscode-button-hoverBackground);
  transform: translateY(-1px);
}

.hbe-button .hbe-arrow {
  margin-left: 0.5rem;
  width: 16px;
  height: 16px;
}

.hbe-button.loading {
  cursor: progress;
  opacity: 0.8;
  pointer-events: none;
}

.hbe-button.loading .hbe-arrow {
  opacity: 0;
}

.hbe-button.loading::after {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--vscode-button-foreground);
  border-right-color: transparent;
  animation: hbe-spin 0.8s linear infinite;
}

/* Spinner SVG in button */
.hbe-button .hbe-spinner {
  display: none;
  width: 16px;
  height: 16px;
  animation: hbe-spin 0.8s linear infinite;
}

.hbe-button.loading .hbe-spinner {
  display: inline;
}

.hbe-hint {
  margin: 0.1rem 0 0.25rem;
  font-size: 0.85rem;
  color: var(--vscode-descriptionForeground);
}

.hbe-message {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: var(--vscode-errorForeground);
  min-height: 1.2em;
}

.hbe-message:empty {
  display: none;
}

.hbe-message.hbe-error {
  color: var(--vscode-errorForeground, #f87171);
}

.hbe-message.hbe-success {
  color: var(--vscode-debugIcon-breakpointCurrentForeground, #4ade80);
}

.hbe-actions {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.1rem;
  background: var(--vscode-editorWidget-background);
  border-top: 1px solid var(--vscode-widget-border);
}

.hbe-success-note {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--vscode-descriptionForeground);
  font-size: 0.9rem;
}

#hexo-blog-encrypt.hbe-unlocked .hbe-actions {
  display: flex;
}

.hbe-ghost-button,
.hbe-hide-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1rem;
  min-height: 2.4rem;
  background: transparent;
  color: var(--vscode-button-foreground);
  border: 1px solid var(--vscode-button-border, var(--vscode-input-border));
  border-radius: 0.55rem;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.9rem;
  font-weight: 500;
}

.hbe-ghost-button svg,
.hbe-hide-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.hbe-ghost-button:hover,
.hbe-hide-btn:hover {
  background: var(--vscode-button-secondaryBackground);
  color: var(--vscode-button-secondaryForeground);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.hbe-floating {
  margin: 1rem auto 0;
  width: fit-content;
  min-width: 180px;
}

#hexo-blog-encrypt > .hbe-button {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1rem;
  background: transparent;
  color: var(--vscode-button-foreground);
  border: 1px solid var(--vscode-button-border, var(--vscode-input-border));
  border-radius: 0.55rem;
  margin: 1.25rem auto;
  width: fit-content;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

#hexo-blog-encrypt > .hbe-button:hover {
  background: var(--vscode-button-secondaryBackground);
  color: var(--vscode-button-secondaryForeground);
  transform: translateY(-1px);
}

/* Shake Animation */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

.shake {
  animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
  border-color: #f87171 !important;
}

@keyframes hbe-spin {
  to { transform: rotate(360deg); }
}

@keyframes hbe-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* Fade-in animation for messages and actions */
@keyframes hbe-fade-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Success unlock animation */
@keyframes hbe-unlock-slide {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hbe-fade-in {
  animation: hbe-fade-in 0.3s ease-out;
}

#hexo-blog-encrypt.hbe-unlocked > div:not(.hbe-card):not(.hbe-header):not(.hbe-content-wrapper):not(.hbe-actions) {
  animation: hbe-unlock-slide 0.4s ease-out;
}

/* Hide password form elements when unlocked */
#hexo-blog-encrypt.hbe-unlocked .hbe-header,
#hexo-blog-encrypt.hbe-unlocked .hbe-content-wrapper {
  display: none;
}

/* Mobile responsive improvements */
@media (max-width: 600px) {
  .hbe-input-container {
    flex-direction: column;
    gap: 0.75rem;
  }

  .hbe-input-wrapper {
    width: 100%;
  }

  .hbe-button {
    width: 100%;
    justify-content: center;
  }

  .hbe-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .hbe-icon {
    width: 48px;
    height: 48px;
  }

  .hbe-actions {
    flex-direction: column;
    gap: 0.75rem;
  }

  .hbe-ghost-button,
  .hbe-hide-btn {
    width: 100%;
    justify-content: center;
  }
}