/* 添加基础容器样式 */
.image-container {
  position: relative;
  overflow: hidden;
}

.blur-image {
      filter: blur(15px);
      cursor: pointer;
      transition: filter 0.3s ease;
}
.blur-image:hover {
  filter: blur(12px);
}
.blur-overlay {
  position: relative;
}
.blur-overlay::after {
  content: "请登录或关闭广告屏蔽插件";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  z-index: 10;
  white-space: nowrap;
}

.top-bar {
      @apply fixed w-full top-0 left-0 bg-white shadow-sm;
      height: 60px;
}
	
.nav-content {
      @apply max-w-7xl mx-auto h-full flex items-center justify-between px-4 sm:px-6;
}

  /* 添加 Tailwind CSS 未包含的过渡效果 */
.nav-content {
    position: relative;
}
  /* 如果使用纯CSS方案可以添加：
  .group:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
  }
  */

/* 新增自定义样式 */

    /* hits徽章样式 */
    .hits-badge {
        position: absolute;
        bottom: 8px;
        left: 8px;
        background-color: rgba(0, 0, 0, 0.6);
        color: white;
        padding: 4px 8px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        font-size: 14px;
        line-height: 1;
    }

    /* 红心样式 */
    .heart {
        color: #ff0000;
        margin-right: 4px;
        font-size: 14px;
    }
    
    .comic-image-container {
      position: relative;
      /* padding-top: 150%; /* 高度是宽度的1.5倍 */ */
	  height: 260px; /* 设置为比缩略图高度(192px)稍大 */
      background-color: #f3f4f6;
      border-radius: 0.5rem 0.5rem 0 0;
      overflow: hidden;
    }
    .comic-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      transition: transform 0.3s ease;
    }
    .comic-info {
      padding: 0.75rem;
      flex-grow: 1;
    }
    .comic-title {
      font-weight: 600;
      color: #1f2937;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      max-height: 3em; /* 两行高度 */
      line-height: 1.5em; /* 行高 */
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 8px;
    }
    .comic-author {
      color: #6b7280;
      font-size: 0.875rem;
      margin-top: 0.25rem;
      white-space: nowrap;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    /* 调整网格布局 */
    #comicList {
      grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
      gap: 1.5rem;
    }
    
    @media (min-width: 640px) {
      #comicList {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 2rem;
      }
    }
    

    :root {
      /* ===== 护眼米黄配色（主推） ===== */
      --bg-primary: #DCE8DD;
      --bg-secondary: #EEF4EE;
      --bg-tertiary: #D0DED2;
      --border-color: #C2D4C4;
      --text-primary: #24322A;
      --text-secondary: #5A6B5E;
      
      --border-color: #DCD4C0;        /* 边框（暖灰） */
      --card-shadow: 0 4px 6px rgba(80, 70, 40, 0.08);
      --hover-scale: scale(1.02);

      /* 原 CSS 中未定义但被引用的变量补上，避免护眼模式下失灵 */
      --card-bg: var(--bg-secondary);
      --tag-bg: #E8E2D2;
      --tag-text: #3A3428;
      --shadow: 0 4px 6px rgba(80, 70, 40, 0.08);
    }

    .dark-mode {
      --bg-primary: #111827;
      --bg-secondary: #1f2937;
      --text-primary: #f3f4f6;
      --text-secondary: #d1d5db;
      --border-color: #374151;
      --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
      --hover-scale: scale(1.03);
    }

    body {
      background-color: var(--bg-primary);
      color: var(--text-primary);
      transition: background-color 0.3s ease, color 0.3s ease;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      margin: 0;
      padding: 0;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }

    /* 顶部导航栏 */
    .top-bar {
      padding: 15px 0;
      margin-bottom: 20px;
      border-bottom: 1px solid var(--border-color);
    }

    .nav-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    h1 {
      margin: 0;
      font-size: 28px;
      font-weight: 700;
      color: var(--text-primary);
    }

    /* 主题切换按钮 */
    .theme-switcher {
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 50%;
      width: 42px;
      height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: var(--card-shadow);
    }

    .theme-switcher:hover {
      transform: rotate(15deg);
      box-shadow: 0 0 15px rgba(100, 100, 255, 0.3);
    }

    .theme-switcher i {
      font-size: 20px;
      color: var(--text-primary);
    }

    /* 广告区域 */
    #ad-box {
      background-color: var(--bg-secondary);
      border-radius: 16px;
      overflow: hidden;
      margin: 20px auto;
      max-width: 800px;
      box-shadow: var(--card-shadow);
      height: 250px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }
	
	#ad-top {
      background-color: var(--bg-secondary);
      border-radius: 16px;
      overflow: hidden;
      margin: 20px auto;
      max-width: 800px;
      box-shadow: var(--card-shadow);
      height: 250px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    .ad-label {
      position: absolute;
      top: 10px;
      right: 10px;
      background: rgba(0,0,0,0.5);
      color: white;
      padding: 3px 8px;
      border-radius: 4px;
      font-size: 12px;
    }

    /* 加载动画 */
    #comicListLoading {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 30px;
    }

    .loading-spinner {
      width: 40px;
      height: 40px;
      border: 4px solid rgba(59, 130, 246, 0.2);
      border-top-color: #3b82f6;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }

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

    .loading-text {
      margin-left: 15px;
      font-size: 18px;
      color: var(--text-secondary);
    }

    /* 漫画网格布局 */
    #comicList {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      gap: 25px;
      margin-top: 20px;
    }

    @media (max-width: 768px) {
        #comicList {
          grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
          gap: 15px;
        }
        .nav-content {
          position: relative;
          padding-right: 50px;
        }
        
        .flex-1.min-w-\[200px\] {
          width: 100%;
        }
        
        .fuzzy-search-area {
          margin-top: 8px;
          padding-left: 0;
          justify-content: flex-start;
        }
        
        #themeSwitcher {
          position: absolute;
          top: 50%;
          right: 0;
          transform: translateY(-50%);
        }
        
        .fuzzy-search-area label {
          display: none;
        }
        
        .nav-content h1 {
          font-size: 1.3rem; /* 移动端更小字体 */
          max-width: 150px; /* 限制最大宽度 */
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
		.comic-image-container {
			height: 252px; /* 移动端容器高度，可按需求调 */
			overflow: hidden; /* 裁掉溢出的左右部分 */
			display: flex;
			justify-content: center; /* 图片水平居中 */
			align-items: center;     /* 保证图片上下居中 */
		  }

		  .comic-image {
			height: 100%;  /* 高度始终填满容器 */
			width: auto;   /* 宽度按比例缩放 */
			object-fit: none; /* 保证裁切的是左右 */
			object-position: center center; /* 水平居中裁切 */
		  }
		
                
    }
      
      #comicDetail .detail-container {
        width: 95% !important; /* 小屏幕上更宽 */
        max-height: 85vh; /* 小屏幕上高度更大 */
      }
      
      .footprint-icon {
        bottom: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
        font-size: 24px;
      }
    }

    /* 漫画卡片 */
    .comic-card {
      background-color: var(--bg-secondary);
      border-radius: 12px;
      overflow: hidden;
      box-shadow: var(--card-shadow);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      height: 100%;
      display: flex;
      flex-direction: column;
    }

    .comic-card:hover {
      transform: var(--hover-scale);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    }

    .comic-image-container {
      height: 252px;
      position: relative;
      overflow: hidden;
    }

    .comic-image {
      width: 100%;
      height: 252px;
      object-fit: contain;
	  object-position: center top;
      transition: transform 0.5s ease;
    }

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

    .comic-info {
      padding: 15px;
      flex-grow: 1;
    }

    .comic-title {
      font-weight: 600;
      font-size: 16px;
      margin: 0;
      color: var(--text-primary);
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      line-height: 1.4;
      height: 3.2em;
    }

    .comic-author {
      color: var(--text-secondary);
      font-size: 14px;
      margin-top: 8px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .comic-meta {
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
      font-size: 13px;
      color: var(--text-secondary);
    }

    /* 详情弹窗 */
    #comicDetail {
      position: fixed;
      top:0; /* 等同于 top: 0; left: 0; right: 0; bottom: 0; */
      /* bottom:100px; */
      z-index:999;
      background-color: rgba(0, 0, 0, 0.7);
      display: flex;
      justify-content: center;
      
      align-items: flex-start; /* 从顶部开始对齐 */
      padding-top: 2rem; /* 顶部留出空间 */
      /* padding-bottom: 4rem; /* 底部留出空间 */ */
      
      /* align-items: center; */
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
      /* max-height: 90vh; /* 防止超出视口 */ */
      overflow-y: auto; /* 内容溢出时滚动 */
      /* padding: 20px; */

      
    }

    #comicDetail.active {
      opacity: 1;
      visibility: visible;
    }

    .detail-container {
      background-color: var(--bg-secondary);
      border-radius: 16px;
      width: 90%;
      max-width: 800px;
      max-height: 90vh; /* 使用动态视口高度 */
      overflow-y:auto;
      /* overflow: hidden; */
      box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
      position: relative;
      padding: 5px; /* 安全区域 */
    }
    
   

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

    .detail-title {
      font-size: 24px;
      font-weight: 700;
      margin: 0;
      color: var(--text-primary);
    }

    .close-btn {
      background: none;
      border: none;
      font-size: 28px;
      cursor: pointer;
      color: var(--text-secondary);
      transition: color 0.2s;
    }

    .close-btn:hover {
      color: #ef4444;
    }

    .detail-content {
      padding: 20px;
      overflow-y: auto;
      max-height: calc(90vh - 150px);
    }

    .detail-image {
      width: 100%;
      max-height: 100px;
      object-fit: contain;
      border-radius: 8px;
      margin-bottom: 20px;
      background-color: rgba(0,0,0,0.05);
      transform: scale(0.5);
    }

    .detail-info {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 15px;
      margin-bottom: 20px;
    }

    .info-item {
      background-color: rgba(0,0,0,0.05);
      padding: 12px;
      border-radius: 8px;
    }

    .info-label {
      font-weight: 600;
      margin-bottom: 5px;
      color: var(--text-secondary);
    }

    .info-value {
      color: var(--text-primary);
    }

    .chapter-list {
      background-color: rgba(0,0,0,0.03);
      border-radius: 8px;
      padding: 15px;
    }

    .chapter-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 15px;
      color: var(--text-primary);
      padding-bottom: 10px;
      border-bottom: 1px solid var(--border-color);
    }

    .chapters {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
      gap: 10px;
    }

    .chapter-item {
      background-color: var(--bg-primary);
      border-radius: 6px;
      padding: 10px;
      text-align: center;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .chapter-item:hover {
      background-color: rgba(59, 130, 246, 0.2);
      transform: translateY(-2px);
    }
	
	/* 深色模式下的分页控件 */
    .dark-mode .pagination select,
    .dark-mode .pagination button {
      background-color: #2d3748; /* 深灰色背景 */
      color: #e2e8f0; /* 白色文字 */
      border-color: #4a5568; /* 深灰色边框 */
    }

    .dark-mode .pagination select:hover,
    .dark-mode .pagination button:hover {
      background-color: #4a5568; /* 悬停时稍亮的背景 */
    }
    
    /* 确保所有元素在深色模式下都有正确的颜色 */
    .dark-mode .comic-author,
    .dark-mode .comic-meta span,
    .dark-mode #detailAuthor,
    .dark-mode #detailScore,
    .dark-mode #detailUpdateTime {
      color: #d1d5db; /* 浅灰色文字 */
    }
    
    .dark-mode .comic-card {
      background-color: #1a202c; /* 更深的黑色背景 */
    }
    
    .dark-mode #comicDetail .bg-white {
      background-color: #2d3748; /* 深灰色背景 */
    }
    
    .dark-mode #comicDetail .text-gray-600,
    .dark-mode #comicDetail .text-gray-700 {
      color: #e2e8f0; /* 白色文字 */
    }
    
    .dark-mode #comicDetail .bg-gray-100 {
      background-color: #4a5568; /* 深灰色背景 */
    }
    
    .dark-mode .chapter-item {
      background-color: #4a5568; /* 深灰色背景 */
      color: #e2e8f0; /* 白色文字 */
    }
    
    .dark-mode .chapter-item:hover {
      background-color: #5a6778; /* 悬停时稍亮的背景 */
    }
	
	/* 深色模式下的搜索框 */
	.dark-mode #searchInput {
	  background-color: #2d3748 !important;
	  color: #e2e8f0 !important;
	  border-color: #4a5568 !important;
	}

	.dark-mode #searchInput::placeholder {
	  color: #a0aec0 !important;
	}

	/* 深色模式下的搜索图标 */
	.dark-mode .fa-search {
	  color: #a0aec0 !important;
	}

	/* 深色模式下的主题切换按钮 */
	.dark-mode .theme-switcher {
	  background-color: #2d3748;
	  border-color: #4a5568;
	}

	.dark-mode .theme-switcher i {
	  color: #e2e8f0;
	}
    
    /* 强制覆盖下拉框在深色模式下的样式 */
    .dark-mode select {
      background-color: #1f2937 !important; /* gray-800 */
      color: #f3f4f6 !important; /* gray-100 */
      border-color: #4b5563 !important; /* gray-600 */
    }

    /* 下拉选项的深色模式样式 */
    .dark-mode select option {
      background-color: #1f2937;
      color: #f3f4f6;
    }
    
    .loader {
      border: 4px solid #cbd5e0; /* 淡灰色边框 */
      border-top: 4px solid #3b82f6; /* 蓝色顶部 */
      border-radius: 50%;
      width: 32px;
      height: 32px;
      animation: spin 1s linear infinite;
      margin-right: 10px;
    }

    .loading-text {
      color: #374151; /* text-gray-700 */
      font-size: 16px;
    }

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

    .overflow-x-auto::-webkit-scrollbar {
        display: none;
      }
    
    .star {
        font-size: 20px;
        color: gold;
        cursor: pointer;
        user-select: none;
        font-size: 24px;
        display: inline-block;
        position: relative;
        color: lightgray; /* 默认颜色为空星 */  
    }
    
    .star.full::before,
    .star.half::before {
        content: '★';
        position: absolute;
        top: 0;
        left: 0;
        color: gold;
        font-size: 24px;
    }

    .star.full::before {
        width: 100%;
    }

    .star.half::before {
        width: 50%;
        overflow: hidden;
    }

    .star.empty::before {
        content: '☆';
        position: absolute;
        top: 0;
        left: 0;
        color: lightgray;
        font-size: 24px;
    }

    .star-number {
        font-size: 20px;
        
        color: gold;
        margin-left: 10px;
    }
    
    @keyframes marquee {
      0% {
        transform: translateX(100vw);
        left: 50%; /* 从中间位置出现 */
      }
      100% {
        transform: translateX(-100%);
      }
    }
    
    /* 最外层：横向排列、垂直居中 */
    .marquee-wrapper {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 12px;
      gap: 12px;
    }

    .marquee-container {
      width: 100%; /* 占据整个宽度 */
      overflow: hidden;
      position: relative;
      white-space: nowrap;
      height: 26px;
      flex-grow: 1; /* 占据剩余空间 */
    }
    
    .dark .marquee-container {
      color: #ddd; /* 深色模式下的文字颜色 */
    }

    
    /* 登录按钮容器 */
    .auth-button {
      flex-shrink: 0;
    }

    .marquee-content {
        overflow: hidden;
        white-space: nowrap;
        position: relative;
        width: 100%;
    }
    
    /* 悬停时暂停动画 */
    .marquee-content:hover .marquee-track {
        animation-play-state: paused !important;
    }

    .marquee-track {
        display: inline-block;
        white-space: nowrap;
        padding-right: 100%; /* 确保有足够空间滚动 */
        animation: marquee 300s linear infinite;
    }

    .marquee-track span {
        color: #999999;
        display: inline-block;
        padding: 0 15px; /* 增加间距 */
        position: relative;
    }
    
    /* 悬停时暂停动画 */
    /* .marquee-track:hover { */
      /* animation-play-state: paused; */
    /* } */

    /* 分类标签悬停效果 */
    .marquee-track span:hover {
        transform: scale(1.05);
        transition: transform 0.3s ease;
    }

    .marquee-track a.category-link {
      /* color: var(--text-primary); */
      text-decoration: none;
      transition: all 0.3s ease;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 16px;
      font-weight: 500;
      background-color: rgba(0, 0, 0, 0.05);
      display: inline-block;

    }

    .marquee-track span:hover {
      color: #007BFF;
      text-decoration: underline;
    }


    .marquee-track a.category-link:hover {
        color: #3182ce;
        background-color: rgba(49, 130, 206, 0.1);
        text-decoration: none;
        transform: scale(1.1);
        z-index: 2;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    /* 登录按钮样式 */
    .auth-button button {
      padding: 5px 12px;
      background-color: #007bff;
      border: none;
      border-radius: 4px;
      color: white;
      font-size: 14px;
      cursor: pointer;
    }

    .dark .auth-button button {
      background-color: #3399ff;
      padding: 6px 14px;
      background-color: #007bff;
      border: none;
      border-radius: 4px;
      color: white;
      font-size: 14px;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .w-full.sm\:w-1\/3 {
      max-width: 25%; /* 最大宽度为detail窗体的1/4 */
      max-height: 25vh; /* 最大高度为视口的1/4 */
    }

    /* 图片样式 */
    #detailImage {
      max-width: 100%; /* 图片不超过容器宽度 */
      max-height: 100%; /* 图片不超过容器高度 */
      object-fit: contain; /* 保持比例填充 */
    }

    /* 响应式调整：小屏幕下容器宽度100% */
    @media (max-width: 639px) {
      .w-full.sm\:w-1\/3 {
        max-width: 100%; 
        max-height: 25vh; /* 保持高度限制 */
      }
      
       #detailImage {
        max-width: 100%; /* 图片宽度占满容器 */
        max-height: 100%; /* 图片高度占满容器 */
        width: auto; /* 宽度自适应 */
        height: auto; /* 高度自适应 */
        object-fit: cover; /* 填充容器 */
        object-position: center; /* 居中显示 */
      }
      
       /* 优化布局 */
      .flex-col.sm\:flex-row {
        flex-direction: column;
      }
      
      /* 确保文本区域宽度100% */
      .flex-1.text-gray-700 {
        width: 100%;
      }
	  
	  .comic-image-container {
			height: 200px; /* 移动端容器高度，可按需求调 */
			overflow: hidden; /* 裁掉溢出的左右部分 */
			display: flex;
			justify-content: center; /* 图片水平居中 */
			align-items: center;     /* 保证图片上下居中 */
		  }

		  .comic-image {
			height: 100%;  /* 高度100%，上下完全显示 */
			width: auto;   /* 按比例缩放宽度 */
			object-fit: none; /* 禁用 cover/contain 的自动裁切逻辑 */
		  }
	  
    }
  
    .circular-image {
        width: 50px; /* 设定图片的宽度 */
        height: 50px; /* 设定图片的高度，与宽度相同以保证图片为正方形 */
        border-radius: 50%; /* 将图片的边框半径设置为宽度或高度的一半，以裁剪为圆形 */
        overflow: hidden; /* 隐藏超出边框的内容 */
    }

    .circular-image img {
        width: 100%; /* 图片宽度设为父容器的100% */
        height: auto; /* 图片高度自动调整以保持比例 */
    }

    /* 足迹图标样式 */
    .footprint-icon {
      position: fixed;
      bottom: 30px;
      right: 30px;
      width: 60px;
      height: 60px;
      background: linear-gradient(135deg, #3498db, #8e44ad);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 28px;
      cursor: pointer;
      box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
      z-index: 1000;
      transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
      animation: pulse 2s infinite;
    }
    
    .footprint-icon:hover {
      transform: scale(1.1) rotate(10deg);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
      animation: none;
    }
    
    .tooltip {
      position: absolute;
      top: -40px;
      background: rgba(0, 0, 0, 0.8);
      color: white;
      padding: 6px 12px;
      border-radius: 8px;
      font-size: 14px;
      white-space: nowrap;
      opacity: 0;
      transform: translateY(10px);
      transition: all 0.3s ease;
      pointer-events: none;
    }
    
    .footprint-icon:hover .tooltip {
      opacity: 1;
      transform: translateY(0);
    }

    /* 搜索建议样式 */
    #searchSuggestions {
        max-height: 300px;
        overflow-y: auto;
    }

    .suggestion-item {
        color: gray;
        padding: 8px 12px;
        cursor: pointer;
        border-bottom: 1px solid #eee;
    }

    .suggestion-item:hover {
        background-color: #f5f5f5;
    }

    .dark-mode .suggestion-item {
        border-bottom: 1px solid #333;
    }

    .dark-mode .suggestion-item:hover {
        background-color: #2d2d2d;
    }
    
    /* 模糊搜索复选框样式 */

    .search-container {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      max-width: 700px;
    }
    
    .search-box {
      flex: 1;
      min-width: 200px;
    }
    
    .top-search{
      flex-grow: 1;
      flex-shrink: 1;
      flex-basis: 0;
      min-width: 100px;
      max-width: 248px;
    }
    
    .relative {
      flex: 1;
      position: relative;
    }

    
   /* 模糊搜索区域样式 */
    .fuzzy-search-area {
      display: flex;
      align-items: center;
      padding: 0 8px;
      transition: all 0.2s;
    }

    .fuzzy-search-area label {
      cursor: pointer;
      transition: color 0.2s;
      font-size: 14px;
    }

    .fuzzy-search-area input:checked + label {
      color: #3b82f6;
      font-weight: 500;
    }

    @media (max-width: 430px) {
      .fuzzy-search-area label {
        font-size: 12px;
      }
      .nav-content h1 {
        font-size: 1.3rem;
      }
      .marquee-wrapper {
        flex-wrap: wrap;
      }
	  
	  .comic-image-container {
		height: 380px;       /* 移动端容器高度 */
		overflow: hidden;    /* 裁掉超出的左右部分 */
		display: flex;
		justify-content: center; /* 图片居中 */
		align-items: center;
	  }

	  .comic-image {
		height: 100%;  /* 高度100%，上下完全显示 */
		width: auto;   /* 按比例缩放宽度 */
		object-fit: none; /* 禁用 cover/contain 的自动裁切逻辑 */
	  }
	  
    }

    .loading-spinner {
        display: inline-block;
        width: 16px;
        height: 16px;
        border: 2px solid rgba(59, 130, 246, 0.3);
        border-top-color: #3b82f6;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        to { transform: rotate(360deg); }
    }
    
    
     /* 分页样式 - 根据提供的renderPagination函数实现 */
    .pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
        margin-top: 30px;
        flex-wrap: wrap;
    }
    
    .pagination button {
        padding: 10px 20px;
        border-radius: 10px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        border: none;
        font-size: 1rem;
        min-width: 100px;
    }
    
    .pagination button:disabled {
        background: #4a5568 !important;
        color: #a0aec0 !important;
        cursor: not-allowed;
    }
    
    .prev-btn {
        background: #2d3748;
        color: #e2e8f0;
    }
    
    .prev-btn:not(:disabled):hover {
        background: #3c4861;
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    }
    
    .next-btn {
        background: #4299e1;
        color: white;
    }
    
    .next-btn:not(:disabled):hover {
        background: #3182ce;
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(66, 153, 225, 0.4);
    }
    
    .page-selector {
        display: flex;
        align-items: center;
        gap: 12px;
        background: rgba(45, 55, 72, 0.7);
        padding: 8px 20px;
        border-radius: 12px;
    }
    
    .page-selector select {
        background: #1a202c;
        border: 1px solid #2d3748;
        padding: 8px 15px;
        font-size: 1.1rem;
        border-radius: 8px;
        cursor: pointer;
        color: #e2e8f0;
    }
    
    .total-pages {
        font-size: 1.1rem;
        color: #a0aec0;
    }
    
    .status-bar {
        display: none;
        text-align: center;
        margin-top: 20px;
        padding: 15px;
        background: rgba(26, 32, 44, 0.7);
        border-radius: 12px;
        font-size: 1.1rem;
    }
    
    .update_title {
        color: #999999;
        display: block; 
        white-space: nowrap; 
        overflow: hidden; 
        text-overflow: ellipsis; 
        max-width: 100%;
        font-size: smaller;
    }
    
    /* 展开/收缩按钮样式 */
    .toggle-tags-btn {
        background-color: var(--bg-primary);
        var(--text-primary);
        border: none;
        border-radius: 4px;
        padding: 5px 10px;
        cursor: pointer;
        margin-right: 10px;
        transition: background 0.3s;
        z-index: 100;
       
    }

    .toggle-tags-btn:hover {
        background: #2d3748;
    }

    /* 标签容器样式 */

    .tags-container.hidden {
        display: none;
    }


    /* 标签项样式 */
    .tag-item {
        background-color: var(--tag-bg);
        color: var(--tag-text);
        padding: 8px 16px;
        border-radius: 20px;
        font-size: 0.95rem;
        cursor: pointer;
        transition: all 0.3s;
        border: 1px solid var(--border-color);
        white-space: nowrap;
    }

    .tag-item:hover {
        background: #cbd5e0;
        transform: translateY(-2px);
    }
    
    .tags-container {
        background-color: var(--card-bg);
        border-radius: 12px;
        padding: 20px;
        box-shadow: var(--shadow);
        margin-top: 15px;
        max-height: 300px;
        overflow-y: auto;
    }

    .tags-container.hidden {
        display: none;
    }

    .tags-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
    }

     .language-active {
          color: #c77171; /* 深灰-亮色 */
          font-weight: 600;
      }
      
      .language-inactive {
          color: #9ca3af; /* 中灰-暗色 */
      }
      
      .dark .language-active {
          color: #f9fafb; /* 浅灰-亮色 */
      }
      
      .dark .language-inactive {
          color: #ccc; /* 深灰-暗色 */
      }

    /* 懒加载图片样式 */
      .lazy-image {
        filter: blur(5px);
        transition: filter 0.3s ease-in-out;
        background-color: #f3f4f6;
      }

      .lazy-image.loaded {
        filter: blur(0);
      }

      /* 占位图容器样式 */
      .comic-image-container {
        position: relative;
        background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
        background-size: 200% 100%;
        animation: 1.5s shine linear infinite;
      }

      @keyframes shine {
        to {
          background-position-x: -200%;
        }
      }

      /* 确保图片加载时平滑显示 */
      .comic-image-container img {
        transition: opacity 0.3s ease;
      }

      .comic-image-container img:not([src]) {
        opacity: 0;
      }

      .comic-image-container img[src] {
        opacity: 1;
      }

/* ============================================================
   亮色（护眼）模式覆盖：统一把硬编码的白色/浅灰替换为护眼色
   作用域限定在 body:not(.dark-mode)，不影响深色模式
   ============================================================ */

/* --- Tailwind 通用背景色覆盖 --- */
body:not(.dark-mode) .bg-white {
  background-color: var(--bg-secondary) !important;
}
body:not(.dark-mode) .bg-gray-50 {
  background-color: #F5F1E4 !important;
}
body:not(.dark-mode) .bg-gray-100 {
  background-color: #EDE7D7 !important;
}
body:not(.dark-mode) .bg-gray-200 {
  background-color: #E5DDC9 !important;
}

/* --- 顶部导航栏（原来是 @apply bg-white） --- */
/* 顶部导航栏：背景与页面主背景一致 */
body:not(.dark-mode) .top-bar {
  background-color: var(--bg-primary) !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--border-color) !important;
}
/* --- 搜索输入框 --- */
body:not(.dark-mode) #searchInput {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}
body:not(.dark-mode) #searchInput::placeholder {
  color: #A79E8A !important;
}
body:not(.dark-mode) #searchInput:focus {
  border-color: #7DA57D !important;
  box-shadow: 0 0 0 2px rgba(125, 165, 125, 0.25) !important;
}

/* --- 搜索建议下拉 --- */
body:not(.dark-mode) #searchSuggestions {
  background-color: var(--bg-secondary) !important;
}
body:not(.dark-mode) .suggestion-item {
  color: var(--text-secondary) !important;
  border-bottom-color: var(--bg-tertiary) !important;
}
body:not(.dark-mode) .suggestion-item:hover {
  background-color: var(--bg-primary) !important;
}
body:not(.dark-mode) .suggestion-item .text-gray-500 {
  color: #8A8374 !important;
}

/* --- 广告位（保留深色/浅色对比但不刺眼） --- */
body:not(.dark-mode) #ad-box,
body:not(.dark-mode) #ad-top {
  background-color: var(--bg-secondary) !important;
}

/* --- 分页控件：白色底换成护眼色 --- */
body:not(.dark-mode) .nav-enabled {
  background: var(--bg-secondary) !important;
  border-color: #7DA57D !important;
  color: #5A7E5A !important;
}
body:not(.dark-mode) .nav-enabled:hover {
  background: #7DA57D !important;
  color: #fff !important;
}
body:not(.dark-mode) .page-inactive {
  background: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}
body:not(.dark-mode) .page-inactive:hover {
  border-color: #7DA57D !important;
  color: #5A7E5A !important;
}
body:not(.dark-mode) .jump-btn {
  background: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-secondary) !important;
}
body:not(.dark-mode) .jump-btn:hover {
  border-color: #7DA57D !important;
  color: #5A7E5A !important;
}
/* page-active 蓝色按钮保留，仅调整 hover 阴影 */
body:not(.dark-mode) .page-active {
  box-shadow: 0 4px 12px rgba(125, 165, 125, 0.4) !important;
}

/* --- 详情弹窗 --- */
body:not(.dark-mode) #comicDetail .bg-white,
body:not(.dark-mode) #comicLoading .bg-white {
  background-color: var(--bg-secondary) !important;
}
body:not(.dark-mode) #comicDetail .bg-gray-100 {
  background-color: var(--bg-tertiary) !important;
}
body:not(.dark-mode) #comicDetail .bg-gray-100:hover {
  background-color: #DDD5BE !important;
}
body:not(.dark-mode) #detailContent,
body:not(.dark-mode) #detailAuthor,
body:not(.dark-mode) #detailScore,
body:not(.dark-mode) #detailUpdateTime {
  color: var(--text-primary) !important;
}
body:not(.dark-mode) #detailTitle {
  color: var(--text-primary) !important;
}

/* --- 章节列表链接（详情弹窗里的蓝色链接保持，但底色已随容器变化） --- */
body:not(.dark-mode) #chapterList .bg-gray-100 {
  background-color: var(--bg-tertiary) !important;
}

/* --- 头像下拉菜单 --- */
body:not(.dark-mode) #dropdown {
  background-color: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
}
body:not(.dark-mode) #dropdown a {
  color: var(--text-primary) !important;
}
body:not(.dark-mode) #dropdown a:hover {
  background-color: var(--bg-primary) !important;
}

/* --- 分类标签（展开后的 tag 网格） --- */
body:not(.dark-mode) .tag-item {
  background-color: var(--tag-bg);
  color: var(--tag-text);
  border-color: var(--border-color);
}
body:not(.dark-mode) .tag-item:hover {
  background-color: #DDD5BE;
  transform: translateY(-2px);
}

/* --- 跑马灯分类标签底色 --- */
body:not(.dark-mode) .marquee-track a.category-link {
  background-color: rgba(100, 90, 60, 0.08);
  color: var(--text-primary);
}

/* --- 主题切换按钮（保留但改为护眼底） --- */
body:not(.dark-mode) .theme-switcher {
  background-color: var(--bg-secondary);
  border-color: var(--border-color);
}

/* --- Toast（保持黑底白字，无需改；仅示意保持对比） --- */

/* --- 走马灯容器背景（保持透明即可） --- */