/* ------------------------------------
 * 经典蓝主题
 *
 * @author  看见如果
 * @version 1.3
 * @update  2025-01-22
 * --------------------------------- */

/* ------------------
 * Global style
 * --------------- */
:root {
  --primary-color: #1976D2;
  --primary-hover: #1565C0;
  --primary-light: #E3F2FD;
  --accent-color: #FF9800;
  --text-primary: #333333;
  --text-secondary: #666666;
  --text-muted: #999999;
  --bg-body: #F5F7FA;
  --bg-card: #FFFFFF;
  --border-color: #E0E0E0;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.1);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.12);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
}

/* 下拉菜单样式 */
.menu-item-has-children {
  position: relative;
  float: left;
}

.menu-item-has-children > a {
  display: inline-block;
  margin: 0;
  padding: 0 20px;
  border: none;
  height: 40px;
  line-height: 40px;
  color: #FFFFFF;
  transition: background 0.2s ease;
  border-radius: var(--radius-md);
}

.menu-item-has-children:hover > .sub-menu {
  display: block;
}

.sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 160px;
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  z-index: 1000;
  list-style: none;
  margin: 0;
  padding: 8px 0;
}

.sub-menu li {
  margin: 0;
  padding: 0;
  position: relative;
}

.sub-menu li a {
  display: block;
  padding: 10px 20px;
  color: var(--text-primary) !important;
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
}

/* 二级分类缩进样式 - 增强选择器优先级 */
.sub-menu li.sub-category a {
  padding: 10px 20px 10px 35px !important; /* 二级分类缩进 */
  position: relative;
}

.sub-menu li.sub-category a::before {
  content: "└";
  position: absolute;
  left: 20px;
  color: var(--text-muted);
  font-size: 0.9em;
}

/* 三级及更深级别分类的额外缩进 */
.sub-menu .sub-menu li a {
  padding-left: 45px; /* 三级分类缩进更多 */
}

.sub-menu .sub-menu .sub-menu li a {
  padding-left: 60px; /* 四级分类进一步缩进 */
}

/* 删除重复的样式定义 */

.sub-menu li a:hover {
  background: var(--primary-light);
  color: var(--primary-color) !important;
}

/* 二级分类悬停状态 - 增强选择器优先级 */
.sub-menu li.sub-category a:hover {
  padding: 10px 20px 10px 38px !important; /* 二级分类悬停时稍微增加缩进 */
}

/* 三级及以上层级的悬停样式 */

.sub-menu .sub-menu li a:hover {
  background: var(--primary-light);
  color: var(--primary-color) !important;
  padding-left: 50px; /* 三级分类悬停缩进 */
}

.sub-menu .sub-menu .sub-menu li a:hover {
  background: var(--primary-light);
  color: var(--primary-color) !important;
  padding-left: 65px; /* 四级分类悬停缩进 */
}

/* 移动端适配 */
@media (max-width: 767px) {
  .menu-item-has-children {
    float: none;
    display: block;
  }
  
  .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    display: none;
    width: 100%;
    margin-top: 4px;
    box-shadow: var(--shadow-md);
    background: var(--bg-card);
  }
  
  .menu-item-has-children:hover > .sub-menu {
    display: block;
  }
  
  .sub-menu li a {
    color: var(--text-primary) !important;
    padding: 8px 15px;
  }

  /* 移动端二级分类缩进 - 增强选择器优先级 */
  .sub-menu li.sub-category a {
    padding: 8px 15px 8px 35px !important;
    position: relative;
  }

  .sub-menu li.sub-category a::before {
    content: "└";
    position: absolute;
    left: 18px;
    color: var(--text-muted);
    font-size: 0.9em;
  }
  
  /* 移动端三级及更深级别分类的额外缩进 */
  .sub-menu .sub-menu li a {
    padding-left: 45px; /* 移动端三级分类缩进 */
  }
  
  .sub-menu .sub-menu .sub-menu li a {
    padding-left: 60px; /* 移动端四级分类进一步缩进 */
  }
  
  .sub-menu li a:hover {
    background: var(--primary-light);
    color: var(--primary-color) !important;
  }

  /* 移动端二级分类悬停状态 - 增强选择器优先级 */
  .sub-menu li.sub-category a:hover {
    padding: 8px 15px 8px 38px !important;
  }
  
  /* 移动端三级及以上层级的悬停样式 */
  .sub-menu .sub-menu li a:hover {
    background: var(--primary-light);
    color: var(--primary-color) !important;
    padding-left: 50px; /* 移动端三级分类悬停缩进 */
  }
  
  .sub-menu .sub-menu .sub-menu li a:hover {
    background: var(--primary-light);
    color: var(--primary-color) !important;
    padding-left: 65px; /* 移动端四级分类悬停缩进 */
  }

  /* 移动端标签页样式 */
  .tab-nav {
    gap: 5px;
  }

  .tab-nav li a {
    padding: 10px 16px;
    font-size: 0.9em;
  }
}

/* 评论区域间距 */
.respond {
  margin-top: 20px;
}

/* 首页标签页样式 */
.index-tab {
  margin-bottom: 20px;
}

.tab-nav {
  display: flex;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 2px solid var(--border-color);
}

.tab-nav li {
  margin: 0;
  padding: 0;
}

.tab-nav li a {
  display: inline-block;
  padding: 12px 24px;
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
}

.tab-nav li a:hover {
  color: var(--primary-color);
  background: var(--primary-light);
}

.tab-nav li.active a {
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
  background: var(--primary-light);
}

/* 时间轴样式 */
.timeline-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 20px;
}

.timeline-card {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  border: 1px solid var(--border-color);
}

.timeline-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.timeline-header {
  padding: 15px 20px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.timeline-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-left: auto;
}

.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: var(--accent-color);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  color: white;
  font-size: 0.85em;
  font-weight: 500;
}

.action-btn:hover {
  background: #F57C00;
  transform: translateY(-2px);
}

.action-btn svg {
  width: 16px;
  height: 16px;
}

.like-btn {
  background: var(--primary-color);
}

.like-btn:hover {
  background: var(--primary-hover);
}

.like-btn.liked {
  background: #E91E63;
  border-color: #E91E63;
}

.like-btn.liked svg {
  fill: white;
}

.like-count {
  font-weight: 600;
  min-width: 20px;
  text-align: center;
}

.delete-btn {
  background: #f44336;
}

.delete-btn:hover {
  background: #d32f2f;
}

.edit-btn {
  background: var(--accent-color);
}

.edit-btn:hover {
  background: #F57C00;
}

/* 编辑表单样式 */
.timeline-edit-form {
  padding: 15px;
  background: var(--bg-body);
  border-radius: var(--radius-sm);
}

.edit-textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: 0.95em;
  resize: vertical;
  min-height: 100px;
  font-family: inherit;
  transition: border-color 0.2s ease;
}

.edit-textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
}

.edit-actions {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  justify-content: flex-end;
}

.btn-save,
.btn-cancel {
  padding: 8px 20px;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.9em;
  font-weight: 500;
  transition: all 0.2s ease;
}

.btn-save {
  background: var(--primary-color);
  color: white;
}

.btn-save:hover {
  background: var(--primary-hover);
}

.btn-cancel {
  background: var(--bg-card);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

.btn-cancel:hover {
  background: var(--bg-body);
}

/* Toast 消息提示 */
.toast {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 12px 20px;
  background: white;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  z-index: 9999;
  opacity: 0;
  transform: translateX(100px);
  transition: all 0.3s ease;
}

.toast.show {
  opacity: 1;
  transform: translateX(0);
}

.toast-success {
  border-left: 4px solid #4caf50;
  color: #2e7d32;
}

.toast-error {
  border-left: 4px solid #f44336;
  color: #c62828;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.avatar img {
  border-radius: 50%;
  border: 2px solid var(--primary-light);
  width: 40px;
  height: 40px;
  object-fit: cover;
}

.user-details {
  display: flex;
  flex-direction: column;
}

.username {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.95em;
}

.post-date {
  color: var(--text-muted);
  font-size: 0.85em;
}

.timeline-content {
  padding: 20px;
}

.timeline-title {
  margin: 0 0 12px 0;
  font-size: 1.2em;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
}

.timeline-text {
  color: var(--text-secondary);
  line-height: 1.6;
  font-size: 0.95em;
}

.timeline-footer {
  padding: 15px 20px;
  border-top: 1px solid var(--border-color);
  background-color: rgba(245, 247, 250, 0.4);
  display: flex;
  justify-content: flex-end;
}

.read-more {
  display: inline-block;
  padding: 6px 16px;
  background: var(--primary-color);
  color: white;
  border-radius: var(--radius-sm);
  font-size: 0.85714em;
  transition: background 0.2s ease, transform 0.2s ease;
  text-decoration: none;
}

.read-more:hover {
  background: var(--primary-hover);
  transform: translateX(3px);
  color: white;
}

.no-posts {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
  font-size: 1.1em;
}

/* 时间轴评论特定样式 */
.timeline-meta {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--border-color);
  color: var(--text-muted);
  font-size: 0.85em;
}

.badge {
  display: inline-block;
  padding: 2px 8px;
  background: var(--primary-color);
  color: white;
  border-radius: var(--radius-md);
  font-size: 0.75em;
  font-weight: 500;
}

.timeline-card.comment-type {
  border-left: 4px solid #4CAF50;
  background: linear-gradient(to bottom, #f1f8e9, #ffffff);
}

.timeline-card.post-type {
  border-left: 4px solid var(--primary-color);
}

/* 优化时间轴整体外观 */
.timeline-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 20px;
}

.timeline-card {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  border: 1px solid var(--border-color);
  position: relative;
}

.timeline-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.timeline-header {
  padding: 15px 20px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  background: linear-gradient(to right, var(--primary-light), #fff);
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.avatar img {
  border-radius: 50%;
  border: 2px solid var(--primary-light);
  width: 40px;
  height: 40px;
  object-fit: cover;
}

.user-details {
  display: flex;
  flex-direction: column;
}

.username {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.95em;
}

.post-date {
  color: var(--text-muted);
  font-size: 0.85em;
}

.timeline-content {
  padding: 20px;
}

.timeline-title {
  margin: 0 0 12px 0;
  font-size: 1.2em;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
}

.timeline-text {
  color: var(--text-secondary);
  line-height: 1.6;
  font-size: 0.95em;
}

.timeline-footer {
  padding: 15px 20px;
  border-top: 1px solid var(--border-color);
  background-color: rgba(245, 247, 250, 0.4);
  display: flex;
  justify-content: flex-end;
}

.read-more {
  display: inline-block;
  padding: 8px 16px;
  background: var(--primary-color);
  color: white;
  border-radius: var(--radius-sm);
  font-size: 0.85714em;
  transition: background 0.2s ease, transform 0.2s ease;
  text-decoration: none;
  border: none;
  cursor: pointer;
}

.read-more:hover {
  background: var(--primary-hover);
  transform: translateX(3px);
  color: white;
}

.no-posts {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
  font-size: 1.1em;
}

/* 特殊卡片样式 */
.timeline-card.comment-type {
  border-left: 4px solid #FF9800;
  background: linear-gradient(to bottom, #FFF3E0, #ffffff);
}

.timeline-card.page-type {
  border-left: 4px solid #2196F3;
  background: linear-gradient(to bottom, #E3F2FD, #ffffff);
}

.timeline-card.post-type {
  border-left: 4px solid var(--primary-color);
}

/* 时间轴元数据样式 */
.timeline-meta {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--border-color);
  color: var(--text-muted);
  font-size: 0.85em;
}

/* 发布动态表单样式 */
.comment-form-timeline {
  margin-top: 30px;
  padding: 20px;
  background: var(--bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
}

.comment-form-timeline .respond-title {
  margin: 0 0 15px;
  padding: 0;
  font-size: 1.2em;
  font-weight: 600;
  color: var(--primary-color);
  background: none;
  border-left: none;
  box-shadow: none;
}

.comment-form-timeline form p {
  margin-bottom: 15px;
}

.comment-form-timeline label {
  display: block;
  margin-bottom: 5px;
  font-weight: 600;
  color: var(--text-primary);
}

.comment-form-timeline textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: 0.95em;
  resize: vertical;
  min-height: 100px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.comment-form-timeline textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
}

.comment-form-timeline button.submit {
  padding: 10px 25px;
  background: var(--primary-color);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 1em;
  font-weight: 500;
  transition: background 0.2s ease;
}

.comment-form-timeline button.submit:hover {
  background: var(--primary-hover);
}

.comment-prompt {
  margin-top: 20px;
  padding: 15px;
  text-align: center;
  color: var(--text-muted);
  background: var(--primary-light);
  border-radius: var(--radius-sm);
}

/* 时间轴图片样式 - 九宫格布局 */
.timeline-images {
  display: grid;
  gap: 4px;
  margin-top: 15px;
  max-width: 100%;
}

/* 1张图片 */
.timeline-images:has(.timeline-image-item:only-child) {
  grid-template-columns: 1fr;
  max-width: 600px;
}

.timeline-images:has(.timeline-image-item:only-child) .timeline-image-item {
  aspect-ratio: auto;
  max-height: 500px;
}

/* 2张图片 */
.timeline-images:has(.timeline-image-item:nth-child(2):last-child) {
  grid-template-columns: repeat(2, 1fr);
}

/* 3-4张图片 */
.timeline-images:has(.timeline-image-item:nth-child(3):last-child),
.timeline-images:has(.timeline-image-item:nth-child(4):last-child) {
  grid-template-columns: repeat(2, 1fr);
}

/* 5-9张图片 - 九宫格 */
.timeline-images:has(.timeline-image-item:nth-child(5):last-child),
.timeline-images:has(.timeline-image-item:nth-child(6):last-child),
.timeline-images:has(.timeline-image-item:nth-child(7):last-child),
.timeline-images:has(.timeline-image-item:nth-child(8):last-child),
.timeline-images:has(.timeline-image-item:nth-child(9):last-child) {
  grid-template-columns: repeat(3, 1fr);
}

.timeline-image-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--bg-body);
  aspect-ratio: 1;
  cursor: pointer;
}

.timeline-image-item a {
  display: block;
  width: 100%;
  height: 100%;
}

.timeline-image-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.timeline-image-item:hover img {
  transform: scale(1.05);
}

/* 单张图片特殊处理 */
.timeline-images:has(.timeline-image-item:only-child) .timeline-image-item img {
  object-fit: contain;
  background: var(--bg-body);
}

/* 图片上传输入框样式 */
.timeline-image-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-body);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.timeline-image-input:hover {
  border-color: var(--primary-color);
  background: var(--primary-light);
}

/* 图片预览容器 */
.image-preview-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.image-preview-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--bg-body);
  aspect-ratio: 1;
  border: 1px solid var(--border-color);
}

.image-preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-preview-remove {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 24px;
  height: 24px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  transition: background 0.2s ease;
}

.image-preview-remove:hover {
  background: rgba(220, 53, 69, 0.9);
}

body {
  background-color: var(--bg-body);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 87.5%;
  line-height: 1.6;
}

a {
  color: var(--primary-color);
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover, a:active {
  color: var(--primary-hover);
}
pre, code { 
  background: var(--primary-light);
  font-family: Menlo, Monaco, Consolas, "Lucida Console", "Courier New", monospace;
  font-size: .92857em;
  border-radius: var(--radius-sm);
}
code { padding: 2px 6px; color: #D32F2F; }
pre {
  padding: 12px;
  overflow: auto;
  max-height: 400px;
  border: 1px solid var(--border-color);
}
pre code {
  display: block;
  padding: 0;
  color: var(--text-primary);
  background: transparent;
}

blockquote {
  margin: 1.5em 0;
  padding: 12px 16px;
  border-left: 4px solid var(--primary-color);
  background: var(--primary-light);
  color: var(--text-secondary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

table {
  border: 1px solid var(--border-color);
  width: 100%;
  border-collapse: collapse;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
table th,
table td {
  padding: 10px 12px;
  border: 1px solid var(--border-color);
}
table th {
  background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
  color: white;
  font-weight: 600;
}
table tr:nth-child(even) {
  background: #FAFAFA;
}
table tr:hover {
  background: var(--primary-light);
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "WenQuanYi Micro Hei","Microsoft Yahei", sans-serif;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
textarea {
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  width: 100%;
  border-radius: var(--radius-sm);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
}
textarea {
  resize: vertical;
  min-height: 100px;
}


/* Special link style */
.post-meta a,
.post-content a,
.widget a,
.comment-content a {
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.post-meta a:hover,
.post-content a:hover,
.widget a:hover,
.comment-content a:hover {
  border-bottom-color: var(--primary-color);
}

/* ------------------
 * Header
 * --------------- */

#header {
  padding: 30px 0 20px;
  background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
  border-bottom: none;
  box-shadow: var(--shadow-md);
}

#logo {
  color: #FFFFFF;
  font-size: 2.2em;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transition: transform 0.2s ease;
}
#logo:hover {
  transform: translateY(-2px);
}
#logo img {
    max-height: 64px;
    border-radius: var(--radius-sm);
}

.description {
  margin: .5em 0 0;
  color: rgba(255,255,255,0.9);
  font-style: italic;
  font-size: 0.95em;
}

/* Navigation menu */
#nav-menu {
  margin: 20px 0 0;
  padding: 0;
  background: rgba(255,255,255,0.15);
  border-radius: var(--radius-md);
  display: inline-block;
  position: relative;
}
#nav-menu a {
  display: inline-block;
  margin: 0;
  padding: 0 20px;
  border: none;
  height: 40px;
  line-height: 40px;
  color: #FFFFFF;
  float: left;
  transition: background 0.2s ease;
  border-radius: var(--radius-md);
}
#nav-menu a:hover,
#nav-menu .current {
  background: rgba(255,255,255,0.25);
}

/* 清除浮动 */
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

/* Search */
#search {
  position: relative;
  margin-top: 20px;
}
#search input {
  padding-right: 40px;
  background: rgba(255,255,255,0.95);
  border: none;
  border-radius: var(--radius-md);
}
#search input:focus {
  background: #FFFFFF;
}
#search button {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  padding: 0;
  width: 28px;
  height: 28px;
  background: transparent url(img/icon-search.png) no-repeat center center;
  background-size: 20px 20px;
  direction: ltr;
  text-indent: -9999em;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}
#search button:hover {
  opacity: 1;
}

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) {
  #search button {
    background-image: url(img/icon-search@2x.png);
    -webkit-background-size: 24px 24px;
    -moz-background-size: 24px 24px;
    -o-background-size: 24px 24px;
    background-size: 24px 24px;
  }
}


/* ------------------
 * Main
 * --------------- */

.post-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.post-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  display: flex;
  flex-direction: row;
  min-height: 200px;
}

.post-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.post-card-image {
  position: relative;
  width: 280px;
  flex-shrink: 0;
  overflow: hidden;
  background: linear-gradient(135deg, #E3F2FD, #BBDEFB);
}

.post-card-image a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.post-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.post-card:hover .post-card-image img {
  transform: scale(1.05);
}

.post-card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-color);
  opacity: 0.5;
}

.post-card-placeholder svg {
  width: 64px;
  height: 64px;
}

.post-card-content {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.post-card-title {
  margin: 0 0 12px;
  font-size: 1.25em;
  font-weight: 600;
  line-height: 1.4;
}

.post-card-title a {
  color: var(--text-primary);
  transition: color 0.2s ease;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-card-title a:hover {
  color: var(--primary-color);
}

.post-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.85714em;
  color: var(--text-muted);
}

.meta-icon {
  width: 14px;
  height: 14px;
}

.meta-item a {
  color: var(--text-muted);
  transition: color 0.2s ease;
}

.meta-item a:hover {
  color: var(--primary-color);
}

.post-card-excerpt {
  flex: 1;
  line-height: 1.6;
  color: var(--text-secondary);
  font-size: 0.92857em;
  margin-bottom: 15px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
}

.post-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
}

.post-card-tags a {
  display: inline-block;
  padding: 4px 10px;
  background: var(--primary-light);
  color: var(--primary-color);
  border-radius: var(--radius-sm);
  font-size: 0.78571em;
  transition: background 0.2s ease, color 0.2s ease;
}

.post-card-tags a:hover {
  background: var(--primary-color);
  color: white;
}

.post-card-read-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--primary-color);
  color: white;
  border-radius: var(--radius-sm);
  font-size: 0.85714em;
  font-weight: 500;
  transition: background 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
}

.post-card-read-more svg {
  width: 14px;
  height: 14px;
  transition: transform 0.2s ease;
}

.post-card-read-more:hover {
  background: var(--primary-hover);
  color: white;
  transform: translateX(3px);
}

.post-card-read-more:hover svg {
  transform: translateX(2px);
}

/* 原有 post 样式保留，用于非首页 */
.post {
  padding: 20px;
  margin-bottom: 10px;
  border-bottom: none;
  background: var(--bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.post:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.post-title {
  margin: 0 0 12px;
  font-size: 1.5em;
  font-weight: 600;
}
.post-title a {
  color: var(--text-primary);
  transition: color 0.2s ease;
}
.post-title a:hover {
  color: var(--primary-color);
}
.post-meta {
  margin: 0 0 15px;
  padding: 10px 0;
  color: var(--text-muted);
  font-size: .85714em;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}
.post-meta li {
  display: inline-block;
  margin: 0 12px 0 0;
  padding-left: 12px;
  border-left: 1px solid var(--border-color);
}
.post-meta li:first-child {
  margin-left: 0;
  padding-left: 0;
  border: none;
}
.post-content {
  line-height: 1.8;
  color: var(--text-secondary);
}

.post-footer-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid var(--border-color);
}

.post .tags {
  /* clear: both; Removed for flex layout */
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0;
  padding-top: 0;
  border-top: none;
}
.post .tags a {
  display: inline-block;
  padding: 4px 12px;
  margin: 0;
  background: var(--primary-light);
  color: var(--primary-color);
  border-radius: var(--radius-sm);
  font-size: 0.85714em;
  transition: background 0.2s ease;
}
.post .tags a:hover {
    background: var(--primary-color);
    color: white;
}

/* 编辑文章按钮样式 */
.edit-article-button {
    margin: 0;
    padding: 0;
}

.btn-edit {
    display: inline-block;
    padding: 8px 16px;
    background: var(--accent-color);
    color: white !important;
    border-radius: var(--radius-sm);
    font-size: 0.85714em;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
    border: none;
    cursor: pointer;
}

.btn-edit:hover {
    background: #F57C00; /* 深一点的橙色 */
    transform: translateY(-2px);
    color: white !important;
}

.post-more {
  margin-top: 15px;
  text-align: right;
}
.read-more {
  display: inline-block;
  padding: 8px 20px;
  background: var(--primary-color);
  color: white;
  border-radius: var(--radius-sm);
  font-size: 0.92857em;
  transition: background 0.2s ease, transform 0.2s ease;
}
.read-more:hover {
  background: var(--primary-hover);
  transform: translateX(3px);
}

.post-near {
  list-style: none;
  margin: 30px 0;
  padding: 20px;
  background: var(--bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  color: var(--text-secondary);
}
.post-near li {
  margin: 10px 0;
  padding: 8px 0;
}
.post-near li a {
  color: var(--primary-color);
  font-weight: 500;
}

.archive-title {
  margin: 0 0 20px;
  padding: 15px 20px;
  color: var(--text-secondary);
  font-size: 1.1em;
  background: var(--bg-card);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--primary-color);
  box-shadow: var(--shadow-sm);
}
.more {
  text-align: center;
  margin: 30px 0;
}
.more a {
  border: none;
  display: inline-block;
  padding: 10px 30px;
  background: var(--primary-color);
  color: white;
  border-radius: var(--radius-md);
  transition: background 0.2s ease;
}
.more a:hover {
  background: var(--primary-hover);
}
.protected .text {
  width: 50%;
}

/* Page nav */

.page-navigator {
  list-style: none;
  margin: 30px 0;
  padding: 0;
  text-align: center;
}
.page-navigator li {
  display: inline-block;
  margin: 0 5px;
}
.page-navigator a {
  display: inline-block;
  padding: 0 15px;
  height: 36px;
  line-height: 36px;
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  transition: all 0.2s ease;
}
.page-navigator a:hover {
  background: var(--primary-color);
  color: white;
  text-decoration: none;
  box-shadow: var(--shadow-md);
}

.page-navigator .current a {
  color: white;
  background: var(--primary-color);
  box-shadow: var(--shadow-md);
}

/* ------------------
 * Comment list
 * --------------- */
#comments {
  padding-top: 20px;
}
.comments-title {
  margin: 0 0 20px;
  padding: 15px 20px;
  font-size: 1.2em;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-card);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--primary-color);
  box-shadow: var(--shadow-sm);
}
.respond-title {
  margin: 0 0 20px;
  padding: 15px 20px;
  font-size: 1.1em;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-card);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--accent-color);
  box-shadow: var(--shadow-sm);
}
.comments-closed {
  margin: 0 0 20px;
  padding: 15px 20px;
  font-size: 1.1em;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-card);
  border-radius: var(--radius-md);
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.login-info {
  padding: 12px 15px;
  background: var(--primary-light);
  border-radius: var(--radius-sm);
  color: var(--primary-color);
  margin-bottom: 15px;
}
.login-info a {
  color: var(--primary-color);
  font-weight: 600;
}
.comment-list, .comment-list ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.comment-list li {
  padding: 20px;
  margin-top: 15px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease;
}
.comment-list li:hover {
  box-shadow: var(--shadow-md);
}
.comment-list li.comment-level-odd {
  background: var(--bg-card);
}
.comment-list li.comment-level-even {
  background: #FAFBFC;
}
.comment-list li.comment-by-author {
  background: linear-gradient(135deg, #FFF9E8, #FFF3CD);
  border-color: #FFE082;
}
.comment-list li .comment-reply {
  text-align: right;
  font-size: .92857em;
  margin-top: 10px;
}
.comment-meta a {
  color: var(--text-muted);
  font-size: .85714em;
}
.comment-author {
  display: block;
  margin-bottom: 8px;
  color: var(--text-primary);
}
.comment-author .avatar {
  float: left;
  margin-right: 12px;
  border-radius: 50%;
  border: 2px solid var(--primary-light);
}
.comment-author cite {
  font-weight: 600;
  font-style: normal;
  color: var(--primary-color);
}

/* Comment reply */
.comment-list .respond {
  margin-top: 20px;
  padding: 20px;
  background: var(--bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.respond .cancel-comment-reply {
  float: right;
  margin-top: 10px;
  font-size: .92857em;
  color: var(--text-muted);
}
.respond .cancel-comment-reply:hover {
  color: var(--primary-color);
}
#comment-form label {
  display: block;
  margin-bottom: .5em;
  font-weight: 600;
  color: var(--text-secondary);
}
#comment-form .required:after {
  content: " *";
  color: #D32F2F;
}
#comment-form button[type="submit"] {
  padding: 10px 30px;
  background: var(--primary-color);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.2s ease;
}
#comment-form button[type="submit"]:hover {
  background: var(--primary-hover);
}

/* ------------------
 * secondary
 * --------------- */
#secondary {
  padding-top: 20px;
  word-wrap: break-word;
}
.widget {
  margin-bottom: 10px;
  padding: 15px;
  background: var(--bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease;
}
.widget:hover {
  box-shadow: var(--shadow-md);
}
.widget-title {
  margin: 0 0 15px;
  padding-bottom: 10px;
  font-size: 1.1em;
  font-weight: 600;
  color: var(--text-primary);
  border-bottom: 2px solid var(--primary-color);
}
.widget-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.widget-list li {
  margin: 8px 0;
  line-height: 1.6;
  padding: 6px 0;
  border-bottom: 1px dashed var(--border-color);
}
.widget-list li:last-child {
  border-bottom: none;
}
.widget-list li a {
  color: var(--text-secondary);
  transition: color 0.2s ease, padding-left 0.2s ease;
  display: block;
}
.widget-list li a:hover {
  color: var(--primary-color);
  padding-left: 5px;
}

.widget-list li ul {
  margin-left: 15px;
  margin-top: 8px;
}


/* ------------------
 * Footer 
 * --------------- */
#footer {
  padding: 40px 0;
  margin-top: 40px;
  line-height: 1.6;
  text-align: center;
  color: var(--text-muted);
  background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
  color: rgba(255,255,255,0.9);
}
#footer a {
  color: rgba(255,255,255,0.9);
  border-bottom: 1px solid rgba(255,255,255,0.3);
}
#footer a:hover {
  color: white;
  border-bottom-color: white;
}


/* -----------------
 * Error page
 * -------------- */
.error-page {
  margin-top: 100px;
  margin-bottom: 100px;
}


/* -----------------
 * Content format
 *--------------- */
.post-content, .comment-content {
  line-height: 1.5;
  word-wrap: break-word;
}
.post-content h2, .comment-content h2 {
  font-size: 1.28571em;
}
.post-content img, .comment-content img,
.post-content video, .comment-content video {
  max-width: 100%;
}
.post-content a img,
.comment-content a img {
  background: #FFF;
  position: relative;
  bottom: -4px;  /* hidden img parent link border  */
}
.post-content hr, .comment-content hr {
  margin: 2em auto;
  width: 100px;
  border: 1px solid #E9E9E9;
  border-width: 2px 0 0 0;
}


/* -----------------
 * Misc
 *--------------- */
.aligncenter, div.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.alignleft {
  float: left;
}
.alignright {
  float: right;
}
img.alignleft {
  margin: 0 15px 0 0;
}
img.alignright {
  margin: 0 0 0 15px;
}


/* -----------------
 * Responsive
 *--------------- */
@media (max-width: 767px) {
  body {
    font-size: 81.25%;
  }
  #nav-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background: transparent;
  }
  #nav-menu a {
    float: none;
    display: inline-block;
    margin: 2px;
    background: rgba(255,255,255,0.15);
  }
  #header {
    padding: 20px 0;
  }
  #logo {
    font-size: 1.8em;
  }
  .post {
    padding: 20px;
  }
  .widget {
    padding: 15px;
  }
  .post-near {
    padding: 15px;
  }
  .comment-list li {
    padding: 15px;
  }
  .respond {
    padding: 15px;
  }
  
  /* 卡片布局响应式 */
  .post-grid {
    gap: 15px;
  }
  
  .post-card {
    flex-direction: column;
    min-height: auto;
  }
  
  .post-card-image {
    width: 100%;
    padding-top: 56.25%;
    height: 0;
  }
  
  .post-card-content {
    padding: 15px;
  }
  
  .post-card-footer {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  
  .post-card-read-more {
    width: auto;
    padding: 6px 12px;
    font-size: 0.8em;
    justify-content: center;
  }
  
  /* 时间轴图片移动端适配 - 九宫格 */
  .timeline-images {
    gap: 3px;
  }
  
  /* 移动端1张图片 */
  .timeline-images:has(.timeline-image-item:only-child) {
    grid-template-columns: 1fr;
    max-width: 100%;
  }
  
  .timeline-images:has(.timeline-image-item:only-child) .timeline-image-item {
    max-height: 400px;
  }
  
  /* 移动端2-4张图片 */
  .timeline-images:has(.timeline-image-item:nth-child(2):last-child),
  .timeline-images:has(.timeline-image-item:nth-child(3):last-child),
  .timeline-images:has(.timeline-image-item:nth-child(4):last-child) {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* 移动端5-9张图片 - 九宫格 */
  .timeline-images:has(.timeline-image-item:nth-child(5):last-child),
  .timeline-images:has(.timeline-image-item:nth-child(6):last-child),
  .timeline-images:has(.timeline-image-item:nth-child(7):last-child),
  .timeline-images:has(.timeline-image-item:nth-child(8):last-child),
  .timeline-images:has(.timeline-image-item:nth-child(9):last-child) {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .image-preview-container {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 8px;
  }
  
  .timeline-image-input {
    padding: 8px;
    font-size: 0.9em;
  }
  
  /* 时间轴操作按钮移动端适配 */
  .timeline-actions {
    gap: 4px;
  }
  
  .action-btn {
    padding: 4px 8px;
    font-size: 0.8em;
  }
  
  .action-btn svg {
    width: 14px;
    height: 14px;
  }
  
  .like-count {
    font-size: 0.85em;
  }
  
  .toast {
    right: 10px;
    left: 10px;
    top: 10px;
  }
}

@media (max-width: 768px) {
  #header,
  .post-title,
  .post-meta {
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px 12px;
  }
  .post-meta li {
    display: block;
    margin: 0;
    padding-left: 0;
    border-left: none;
    white-space: nowrap;
  }
  .site-search {
    display: none;
  }
  .post-more {
    text-align: center;
  }
  .read-more {
    width: auto;
    padding: 6px 14px;
    font-size: 0.8em;
    text-align: center;
  }
  
  /* 时间轴页面移动端优化 */
  .timeline-footer {
    padding: 12px 15px;
  }
  
  .timeline-card .read-more {
    padding: 6px 12px;
    font-size: 0.8em;
  }
}

@media (min-width: 992px) {

}

@media (min-width: 1200px) {
  .container {
    max-width: 952px;
  }
}


/*
* Hide from both screenreaders and browsers: h5bp.com/u
*/
.hidden {
  display: none !important;
  visibility: hidden; }

/*
* Hide only visually, but have it available for screenreaders: h5bp.com/v
*/
.sr-only {
  border: 0;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }

/*
* Extends the .sr-only class to allow the element to be focusable
* when navigated to via the keyboard: h5bp.com/p
*/
.sr-only.focusable:active,
.sr-only.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto; }

/*
* Hide visually and from screenreaders, but maintain layout
*/
.invisible {
   visibility: hidden; }

/* 友情链接页面样式 */
.links-container {
  margin-top: 20px;
}

.card {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  border: 1px solid var(--border-color);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.card-header {
  padding: 20px;
  background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
  color: white;
  border-bottom: 1px solid var(--border-color);
}

.card-header h2 {
  margin: 0;
  font-size: 1.4em;
  font-weight: 600;
  color: white;
}

.card-body {
  padding: 25px;
}

/* Links插件输出的链接样式调整 */
.links-container .card .card-body {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 10px !important;
  padding: 25px !important;
}

.links-container .card .card-body ul,
.links-container .card .card-body ol {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 10px !important;
}

.links-container .card .card-body li {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 15px !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-md) !important;
  transition: all 0.3s ease !important;
  box-shadow: var(--shadow-sm) !important;
  break-inside: avoid !important;
}

.links-container .card .card-body li:hover {
  background: var(--primary-light) !important;
  border-color: var(--primary-color) !important;
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-3px) !important;
  padding: 18px !important;
}

.links-container .card .card-body a {
  color: var(--text-primary) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
}

.links-container .card .card-body li:hover a {
  color: var(--primary-color) !important;
}

.links-container .card .card-body img {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid var(--border-color) !important;
  transition: all 0.3s ease !important;
  flex-shrink: 0 !important;
}

.links-container .card .card-body li:hover img {
  border-color: var(--primary-color) !important;
  transform: scale(1.1) !important;
}

.links-container .card .card-body span {
  font-size: 0.95em !important;
  transition: all 0.3s ease !important;
  color: var(--text-secondary) !important;
  flex-grow: 1 !important;
}

.links-container .card .card-body li:hover span {
  color: var(--primary-color) !important;
  font-weight: 600 !important;
}

/* 响应式设计 */
@media (max-width: 767px) {
  .links-container .card .card-body {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  .links-container .card .card-body ul,
  .links-container .card .card-body ol {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  .links-container .card .card-body li {
    padding: 12px !important;
  }
  
  .links-container .card .card-body li:hover {
    padding: 15px !important;
  }
  
  .links-container .card .card-body img {
    width: 40px !important;
    height: 40px !important;
  }
}

@media (max-width: 480px) {
  .links-container .card .card-body {
    grid-template-columns: 1fr !important;
  }
  
  .links-container .card .card-body ul,
  .links-container .card .card-body ol {
    grid-template-columns: 1fr !important;
  }
}

/* -----------------
 * Post Author Avatar
 *--------------- */
.post-title-with-avatar {
  display: flex;
  align-items: center;
  gap: 15px;
}

.post-title-avatar {
  border-radius: 50%;
  border: 3px solid var(--primary-color);
  box-shadow: var(--shadow-md);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  flex-shrink: 0;
}

.post-title-avatar:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-lg);
}

.post-title-with-avatar a {
  flex: 1;
  min-width: 0;
}

@media (max-width: 767px) {
  .post-title-with-avatar {
    gap: 12px;
  }
  
  .post-title-avatar {
    width: 50px !important;
    height: 50px !important;
  }
}


/* -----------------
 * 浮动按钮样式
 *--------------- */
.float-buttons {
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 999;
}

.float-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--primary-color);
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
  visibility: hidden;
  transform: scale(0.8) translateY(20px);
  pointer-events: none;
}

.float-btn.show {
  opacity: 1;
  visibility: visible;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

.float-btn:active {
  transform: scale(0.95);
}

.float-btn svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* 主题切换按钮始终显示 */
#themeToggle {
  opacity: 1;
  visibility: visible;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

/* 管理员按钮样式 */
.admin-btn {
  opacity: 1;
  visibility: visible;
  transform: scale(1) translateY(0);
  pointer-events: auto;
  background: var(--accent-color);
}

/* 登录按钮样式 */
.login-btn {
  opacity: 1;
  visibility: visible;
  transform: scale(1) translateY(0);
  pointer-events: auto;
  background: #4CAF50;
}

/* 个人设置按钮样式 */
.profile-btn {
  opacity: 1;
  visibility: visible;
  transform: scale(1) translateY(0);
  pointer-events: auto;
  background: #9c27b0;
}

/* 桌面端悬停效果 */
@media (hover: hover) and (pointer: fine) {
  .float-btn:hover {
    background: var(--primary-hover);
    transform: scale(1.1) translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  }
  
  .float-btn.show:hover {
    transform: scale(1.1) translateY(-3px);
  }
  
  .admin-btn:hover {
    background: #F57C00;
    transform: scale(1.1) translateY(-3px);
  }
  
  .login-btn:hover {
    background: #45a049;
    transform: scale(1.1) translateY(-3px);
  }

  .profile-btn:hover {
    background: #7b1fa2;
    transform: scale(1.1) translateY(-3px);
  }
}

/* -----------------
  * 发动态浮动窗口样式
  *--------------- */
.moment-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.moment-modal.show {
  display: flex;
  opacity: 1;
}

.moment-modal-content {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

.moment-modal.show .moment-modal-content {
  transform: scale(1);
}

.moment-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid var(--border-color);
  background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
  color: white;
}

.moment-modal-header h3 {
  margin: 0;
  font-size: 1.3em;
  font-weight: 600;
}

.moment-modal-close {
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.moment-modal-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

.moment-modal-close svg {
  width: 20px;
  height: 20px;
}

.moment-form-group {
  padding: 20px;
  border-bottom: 1px solid var(--border-color);
}

.moment-form-group:last-child {
  border-bottom: none;
}

.moment-form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.95em;
}

.moment-form-group textarea {
  width: 100%;
  padding: 12px;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-body);
  color: var(--text-primary);
  font-size: 0.95em;
  font-family: inherit;
  resize: vertical;
  min-height: 120px;
  transition: border-color 0.2s ease;
}

.moment-form-group textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
}

.moment-form-group input[type="file"] {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-body);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
  font-size: 0.9em;
  color: var(--text-secondary);
}

.moment-form-group input[type="file"]:hover {
  border-color: var(--primary-color);
  background: var(--primary-light);
}

.moment-image-preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
  margin-top: 15px;
}

.moment-preview-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  aspect-ratio: 1;
  border: 1px solid var(--border-color);
}

.moment-preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.moment-preview-remove {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 24px;
  height: 24px;
  background: rgba(244, 67, 54, 0.9);
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.moment-preview-remove:hover {
  background: #d32f2f;
  transform: scale(1.1);
}

.moment-preview-remove svg {
  width: 16px;
  height: 16px;
}

.moment-form-actions {
  display: flex;
  gap: 10px;
  padding: 20px;
  justify-content: flex-end;
  background: var(--bg-body);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* 暗黑主题下的浮动窗口样式 */
[data-theme="dark"] .moment-modal-content {
  background: var(--bg-card);
  border-color: var(--border-color);
}

[data-theme="dark"] .moment-modal-header {
  background: linear-gradient(135deg, #1A237E, #0D47A1);
}

[data-theme="dark"] .moment-form-group label {
  color: var(--text-primary);
}

[data-theme="dark"] .moment-form-group textarea,
[data-theme="dark"] .moment-form-group input[type="file"] {
  background: var(--bg-card);
  border-color: var(--border-color);
  color: var(--text-primary);
}

[data-theme="dark"] .moment-form-group textarea:focus,
[data-theme="dark"] .moment-form-group input[type="file"]:hover {
  border-color: var(--primary-color);
  background: var(--primary-light);
}

[data-theme="dark"] .moment-form-actions {
  background: var(--bg-card);
}

/* 移动端浮动窗口适配 */
@media (max-width: 767px) {
  .moment-modal-content {
    width: 95%;
    max-height: 95vh;
  }
  
  .moment-modal-header {
    padding: 15px;
  }
  
  .moment-modal-header h3 {
    font-size: 1.1em;
  }
  
  .moment-form-group {
    padding: 15px;
  }
  
  .moment-form-group textarea {
    min-height: 100px;
    font-size: 0.9em;
  }
  
  .moment-image-preview {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  
  .moment-form-actions {
    padding: 15px;
  }
  
  .btn-save,
  .btn-cancel {
    padding: 8px 16px;
    font-size: 0.85em;
  }
}

/* 主题切换图标 */
.sun-icon {
  display: block;
}

.moon-icon {
  display: none;
}

[data-theme="dark"] .sun-icon {
  display: none;
}

[data-theme="dark"] .moon-icon {
  display: block;
}

/* 暗黑主题样式 */
[data-theme="dark"] {
  --primary-color: #42A5F5;
  --primary-hover: #1E88E5;
  --primary-light: #1E3A5F;
  --accent-color: #FFB74D;
  --text-primary: #E0E0E0;
  --text-secondary: #B0B0B0;
  --text-muted: #808080;
  --bg-body: #121212;
  --bg-card: #1E1E1E;
  --border-color: #333333;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.4);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.5);
}

[data-theme="dark"] body {
  background-color: var(--bg-body);
  color: var(--text-primary);
}

[data-theme="dark"] #header {
  background: linear-gradient(135deg, #1A237E, #0D47A1);
}

[data-theme="dark"] .post-card,
[data-theme="dark"] .post,
[data-theme="dark"] .widget,
[data-theme="dark"] .comment-list li {
  background: var(--bg-card);
  border-color: var(--border-color);
}

[data-theme="dark"] .post-card-title a,
[data-theme="dark"] .post-title a,
[data-theme="dark"] .widget-title {
  color: var(--text-primary);
}

[data-theme="dark"] .post-card-excerpt,
[data-theme="dark"] .post-content,
[data-theme="dark"] .comment-content {
  color: var(--text-secondary);
}

[data-theme="dark"] code {
  background: var(--primary-light);
  color: #FFB74D;
}

[data-theme="dark"] pre {
  background: #0D1117;
  border-color: var(--border-color);
}

[data-theme="dark"] blockquote {
  background: var(--primary-light);
  border-left-color: var(--primary-color);
}

[data-theme="dark"] table th {
  background: linear-gradient(135deg, #1565C0, #0D47A1);
}

[data-theme="dark"] table tr:nth-child(even) {
  background: #252525;
}

[data-theme="dark"] table tr:hover {
  background: var(--primary-light);
}

[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] textarea {
  background: var(--bg-card);
  border-color: var(--border-color);
  color: var(--text-primary);
}

[data-theme="dark"] .timeline-card {
  background: var(--bg-card);
  border-color: var(--border-color);
}

[data-theme="dark"] .timeline-header {
  background: linear-gradient(to right, var(--primary-light), var(--bg-card));
}

[data-theme="dark"] .sub-menu {
  background: var(--bg-card);
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

[data-theme="dark"] .sub-menu li a {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .sub-menu li a:hover {
  background: var(--primary-light);
  color: var(--primary-color) !important;
}

/* 移动端适配 */
@media (max-width: 767px) {
  .float-buttons {
    right: 15px;
    bottom: 15px;
    gap: 10px;
  }
  
  .float-btn {
    width: 46px;
    height: 46px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  }
  
  .float-btn svg {
    width: 22px;
    height: 22px;
  }
  
  /* 移动端点击反馈 */
  .float-btn:active {
    transform: scale(0.9);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  }
  
  #themeToggle:active {
    transform: scale(0.9);
  }
}

/* 图片灯箱样式 */
.image-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.image-lightbox.show {
  display: flex;
  opacity: 1;
}

.image-lightbox img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

.image-lightbox.show img {
  transform: scale(1);
}

.image-lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 50%;
  color: white;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.image-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

.image-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 50%;
  color: white;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.image-lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.3);
}

.image-lightbox-prev {
  left: 20px;
}

.image-lightbox-next {
  right: 20px;
}

.image-lightbox-counter {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  font-size: 14px;
  background: rgba(0, 0, 0, 0.5);
  padding: 5px 15px;
  border-radius: 20px;
}

/* 移动端灯箱适配 */
@media (max-width: 767px) {
  .image-lightbox img {
    max-width: 95%;
    max-height: 95%;
  }
  
  .image-lightbox-close {
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    font-size: 20px;
  }
  
  .image-lightbox-nav {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
  
  .image-lightbox-prev {
    left: 10px;
  }
  
  .image-lightbox-next {
    right: 10px;
  }
  
  .image-lightbox-counter {
    bottom: 10px;
    font-size: 12px;
    padding: 4px 12px;
  }
}

/* 编辑表单图片样式 */
.edit-existing-images,
.edit-new-images {
  margin-top: 15px;
  padding: 15px;
  background: var(--bg-body);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
}

.edit-existing-images h4,
.edit-new-images h4 {
  margin: 0 0 10px;
  font-size: 0.95em;
  font-weight: 600;
  color: var(--text-primary);
}

.edit-existing-images {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
}

.edit-image-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  aspect-ratio: 1;
  border: 1px solid var(--border-color);
}

.edit-image-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.btn-remove-image {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 24px;
  height: 24px;
  background: rgba(244, 67, 54, 0.9);
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  transition: all 0.2s ease;
}

.btn-remove-image:hover {
  background: #d32f2f;
  transform: scale(1.1);
}

.edit-image-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
  font-size: 0.9em;
}

.edit-image-input:hover {
  border-color: var(--primary-color);
  background: var(--primary-light);
}

.edit-image-preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.edit-image-preview-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  aspect-ratio: 1;
  border: 1px solid var(--border-color);
}

.edit-image-preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.btn-remove-new-image {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 24px;
  height: 24px;
  background: rgba(244, 67, 54, 0.9);
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  transition: all 0.2s ease;
}

.btn-remove-new-image:hover {
  background: #d32f2f;
  transform: scale(1.1);
}

/* 移动端编辑表单图片样式适配 */
@media (max-width: 767px) {
  .edit-existing-images,
  .edit-image-preview {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  
  .edit-existing-images h4,
  .edit-new-images h4 {
    font-size: 0.9em;
  }
  
  .edit-image-input {
    padding: 8px;
    font-size: 0.85em;
  }
  
  .edit-image-item,
  .edit-image-preview-item {
    aspect-ratio: 1;
    min-height: 80px;
  }
  
  .btn-remove-image,
  .btn-remove-new-image {
    width: 20px;
    height: 20px;
    font-size: 12px;
  }
}

/* ------------------
 * Timeline Comments Style
 * --------------- */
.timeline-comments-area {
  margin-top: 15px;
  background-color: #f7f7f7;
  border-radius: var(--radius-sm);
  padding: 15px;
  position: relative;
  border: 1px solid #eee;
}

.timeline-comments-arrow {
  position: absolute;
  top: -6px;
  left: 30px;
  width: 10px;
  height: 10px;
  background-color: #f7f7f7;
  border-left: 1px solid #eee;
  border-top: 1px solid #eee;
  transform: rotate(45deg);
}

.comments-list {
  margin-bottom: 15px;
}

.comment-item {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e5e5e5;
}

.comment-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.comment-avatar img {
  border-radius: 4px;
  object-fit: cover;
}

.comment-body {
  flex: 1;
  font-size: 13px;
}

.comment-header {
  margin-bottom: 4px;
}

.comment-author {
  font-weight: 600;
  color: #576b95; /* Wechat moments blue */
}

.comment-content {
  color: var(--text-primary);
  line-height: 1.5;
}

.timeline-comment-form {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.comment-input {
  flex: 1;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 13px;
}

.comment-input:focus {
  border-color: var(--primary-color);
  outline: none;
}

.comment-submit-btn {
  background-color: var(--primary-color);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 0 15px;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.2s;
}

.comment-submit-btn:hover {
  background-color: var(--primary-hover);
}

.action-btn.comment-btn {
    cursor: pointer;
}