/* 全局样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background: linear-gradient(180deg, #f1f8e9 0%, #e8f5e9 100%);
}

/* 顶部导航栏 */
.header {
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 0 20px;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    height: 60px;
}

.logo {
    font-size: 24px;
    font-weight: bold;
    color: #3a1c71;
}

.nav {
    display: flex;
    gap: 30px;
}

.nav a {
    text-decoration: none;
    color: #333;
    font-size: 14px;
    transition: color 0.3s;
}

.nav a:hover {
    color: #3a1c71;
}

.user-area {
    display: flex;
    gap: 15px;
}

.user-area a {
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 14px;
    transition: all 0.3s;
}

.user-area .login {
    color: #3a1c71;
    border: 1px solid #3a1c71;
}

.user-area .register {
    background: #3a1c71;
    color: #fff;
}

.user-area a:hover {
    opacity: 0.8;
}

/* 首屏banner */
.banner {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    text-align: center;
    padding: 100px 20px;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.banner-content {
    max-width: 800px;
    margin: 0 auto;
}

.banner-main {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 10px;
}

.banner-icon {
    font-size: 48px;
}

.banner h1 {
    font-size: 48px;
    margin: 0;
}

.banner h2 {
    font-size: 24px;
    margin-bottom: 10px;
    font-weight: normal;
}

.banner p {
    font-size: 16px;
    margin-bottom: 30px;
}

/* 搜索栏 */
.search-section {
    background: #f8f9fa;
    padding: 40px 20px;
}

.search-container {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.search-box {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 30px;
}

.search-box input {
    width: 400px;
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

.search-box button {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
}

.search-box .search-btn {
    background: #3a1c71;
    color: #fff;
}

.search-box .reset-btn {
    background: #ddd;
    color: #333;
}

.search-box button:hover {
    opacity: 0.8;
}

/* 分类标签栏 */
.categories {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: sticky;
    top: 160px;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 100;
    padding: 10px 20px;
}

/* 分类主容器 - 5列Grid布局，与素材网格一致 */
.categories-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

/* 分类列 - 占据前4列 */
.categories-col-categories {
    grid-column: 1 / span 4;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 搜索列 - 占据第5列 */
.categories-col-search {
    grid-column: 5 / span 1;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding-top: 5px;
    width: 100%;
}

/* 调整后的搜索容器 */
.categories-col-search .search-container {
    flex-shrink: 0;
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

/* 调整后的搜索框 */
.categories-col-search .search-box {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
}

.categories-col-search .search-box input {
    width: 280px;
    padding: 10px 15px;
    font-size: 14px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.categories-col-search .search-box .search-btn {
    padding: 10px 20px;
    font-size: 14px;
}

/* 一级标题容器：固定一行，横向排列 */
.category-tabs {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    overflow-x: auto !important;
    /* 强制隐藏滚动条 */
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}
.category-tabs::-webkit-scrollbar {
    display: none !important;
    width: 0px !important;
    height: 0px !important;
}
.category-tabs::-webkit-scrollbar-thumb {
    display: none !important;
}
.category-tabs::-webkit-scrollbar-track {
    display: none !important;
}

/* 二级标题容器：隐藏滚动条 */
.subcategories-wrapper {
    overflow-x: auto !important;
    /* 强制隐藏滚动条 */
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}
.subcategories-wrapper::-webkit-scrollbar {
    display: none !important;
    width: 0px !important;
    height: 0px !important;
}

/* 单个二级分类组：隐藏滚动条 */
.subcategories {
    overflow-x: auto !important;
    /* 强制隐藏滚动条 */
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}
.subcategories::-webkit-scrollbar {
    display: none !important;
    width: 0px !important;
    height: 0px !important;
}

/* 二级标题容器 */
.subcategories-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
}

/* 单个二级分类组 */
.subcategories {
    display: none;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
}

/* 第一个二级分类默认显示 */
.subcategories-wrapper > .subcategories:first-child {
    display: flex !important;
}

/* 一级标题按钮样式 - 去掉框 */
.category-tabs button.level1,
.category-tabs .level1 {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    margin: 0 12px !important;
    padding: 8px 16px !important;
    border-radius: 20px !important;
    border: none !important;
    background: transparent !important;
    color: #333 !important;
    cursor: pointer !important;
    font-size: 14px !important;
    transition: all 0.3s !important;
    line-height: 1.4 !important;
    height: auto !important;
    min-height: 36px !important;
}

/* 一级标题激活状态 */
.category-tabs button.level1.active,
.category-tabs .level1.active {
    background: transparent !important;
    color: #d81b60 !important;
    border: none !important;
    box-shadow: none !important;
    font-weight: bold !important;
}

/* 二级标题按钮样式 - 保留框，字体改成毛笔行楷 */
.subcategories button.level2,
.subcategories .level2 {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    margin: 0 12px !important;
    padding: 6px 14px !important;
    border-radius: 16px !important;
    border: 2px solid #DAA520 !important;
    background: linear-gradient(135deg, #FFF8DC 0%, #FFE4B5 100%) !important;
    color: #8B6914 !important;
    cursor: pointer !important;
    font-size: 13px !important;
    font-family: "KaiTi", "楷体", "STKaiti", "华文楷体", serif !important;
    transition: all 0.3s !important;
    line-height: 1.4 !important;
    height: auto !important;
    min-height: 32px !important;
}

/* 二级标题激活状态 */
.subcategories button.level2.active,
.subcategories .level2.active {
    background: linear-gradient(135deg, #FFD700 0%, #DAA520 100%) !important;
    color: #fff !important;
    border-color: #B8860B !important;
    box-shadow: 0 3px 10px rgba(218, 165, 32, 0.5) !important;
}

/* 兜底保障：确保按钮不被压缩 */
.category-tabs button,
.subcategories button {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

/* 素材列表 */
.materials {
    max-width: 1200px;
    margin: 0 auto 40px;
    padding: 0 20px;
}

.material-list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

.material-item {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s;
}

.material-item:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.material-preview {
    height: 150px;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #666;
}

.material-actions {
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.material-actions button {
    padding: 4px 8px;
    border: 1px solid #3a1c71;
    border-radius: 4px;
    background: #3a1c71;
    color: #fff;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.3s;
}

.material-actions button:hover {
    opacity: 0.8;
}

.material-actions span {
    font-size: 12px;
    color: #666;
}

/* 登录页面 */
.login-container {
    max-width: 400px;
    margin: 100px auto;
    padding: 30px;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.login-container h2 {
    text-align: center;
    margin-bottom: 20px;
    color: #3a1c71;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-size: 14px;
    color: #333;
}

.form-group input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

.login-container button {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 4px;
    background: #3a1c71;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s;
}

.login-container button:hover {
    opacity: 0.8;
}

.error-message {
    background: #ffebee;
    color: #c62828;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 15px;
    font-size: 14px;
}

/* 后台管理 */
.admin-container {
    display: flex;
    min-height: 100vh;
}

.admin-sidebar {
    width: 260px;
    background: linear-gradient(180deg, #fce4ec 0%, #f8bbd0 100%);
    color: #880e4f;
    padding: 20px;
}

.admin-sidebar h3 {
    margin-bottom: 20px;
    font-size: 18px;
    color: #ad1457;
}

.admin-sidebar ul {
    list-style: none;
}

.admin-sidebar ul li {
    margin-bottom: 10px;
}

.admin-sidebar ul li a {
    color: #880e4f;
    text-decoration: none;
    display: block;
    padding: 10px 12px;
    border-radius: 6px;
    transition: all 0.3s;
    font-weight: 500;
}

.admin-sidebar ul li a:hover {
    background: rgba(171, 20, 87, 0.1);
    color: #ad1457;
}

.admin-sidebar ul li a.active,
.admin-sidebar ul li a:target {
    background: linear-gradient(135deg, #d81b60 0%, #c2185b 100%);
    color: #fff;
    font-weight: 600;
    border-left: 4px solid #880e4f;
}

.admin-content {
    flex: 1;
    padding: 25px;
    background: linear-gradient(135deg, #fff5f8 0%, #fce4ec 50%, #f8bbd0 100%);
}

.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid #ddd;
}

.admin-header h2 {
    color: #ad1457;
}

.admin-user {
    display: flex;
    align-items: center;
    gap: 10px;
}

.admin-user span {
    font-size: 14px;
}

.admin-user a {
    color: #3a1c71;
    text-decoration: none;
    font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
    .material-list {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 992px) {
    .material-list {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .banner h1 {
        font-size: 36px;
    }
}

@media (max-width: 768px) {
    .header-container {
        flex-direction: column;
        height: auto;
        padding: 15px 0;
    }
    
    .nav {
        margin: 10px 0;
    }
    
    .material-list {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .banner h1 {
        font-size: 28px;
    }
    
    .search-box input {
        width: 300px;
    }
}

@media (max-width: 576px) {
    .material-list {
        grid-template-columns: 1fr;
    }
    
    .banner h1 {
        font-size: 24px;
    }
    
    .search-box input {
        width: 200px;
    }
    
    .category-tabs {
        flex-wrap: wrap;
    }
}

/* ========================================
   【最终方案】一级二级完全分离的HTML结构
   不再使用嵌套，彻底解决CSS冲突
======================================== */

/* 外层容器 */
.categories {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
}

/* 一级标题区域 */
.category-tabs {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  height: 60px !important;
  overflow-x: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border-bottom: 2px solid #e5e7eb !important;
  background: transparent !important;
}

/* 二级标题区域容器 */
.subcategories-wrapper {
  display: block !important;
  width: 100% !important;
  min-height: 60px !important;
  overflow-x: auto !important;
  padding: 10px 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

/* 单个二级分类组 */
.subcategories {
  display: none;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
}

/* 第一个二级分类默认显示 */
.subcategories-wrapper > .subcategories:first-child {
  display: flex !important;
}

/* 一级标题按钮 - 去掉框 */
.category-tabs .level1 {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  margin: 0 12px !important;
  padding: 8px 16px !important;
  border-radius: 20px !important;
  border: none !important;
  background: transparent !important;
  color: #333 !important;
  cursor: pointer !important;
  font-size: 14px !important;
  transition: all 0.3s !important;
  line-height: 1.4 !important;
  height: auto !important;
  min-height: 36px !important;
}

/* 一级标题激活状态 */
.category-tabs .level1.active {
  background: transparent !important;
  color: #d81b60 !important;
  border: none !important;
  font-weight: bold !important;
}

/* 二级标题按钮 - 保留框，字体改成毛笔行楷 */
.subcategories .level2 {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  margin: 0 8px !important;
  padding: 6px 14px !important;
  border-radius: 16px !important;
  border: 2px solid #DAA520 !important;
  background: linear-gradient(135deg, #FFF8DC 0%, #FFE4B5 100%) !important;
  color: #8B6914 !important;
  cursor: pointer !important;
  font-size: 13px !important;
  font-family: "KaiTi", "楷体", "STKaiti", "华文楷体", serif !important;
  transition: all 0.3s !important;
  line-height: 1.4 !important;
  height: auto !important;
  min-height: 32px !important;
}

/* 二级标题激活状态 */
.subcategories .level2.active {
  background: linear-gradient(135deg, #FFD700 0%, #DAA520 100%) !important;
  color: #fff !important;
  border-color: #B8860B !important;
  box-shadow: 0 3px 10px rgba(218, 165, 32, 0.5) !important;
}

/* ========================================
   素材展示区域
======================================== */

.materials-section {
  width: 100%;
  padding: 40px 0;
  background: linear-gradient(135deg, #e8f5e9 0%, #f1f8e9 50%, #e0f2f1 100%);
}

.materials-container {
  width: 90%;
  max-width: 1400px;
  margin: 0 auto;
}

.no-materials {
  text-align: center;
  padding: 80px 20px;
  color: #666;
  font-size: 16px;
}

.materials-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}

.material-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}

.material-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.material-preview {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  background: #f0f0f0;
  overflow: hidden;
}

.material-preview img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.preview-overlay-btn {
  position: absolute;
  bottom: 10px;
  right: 10px;
  padding: 6px 16px;
  background: #1976d2;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  z-index: 10;
  transition: background 0.3s;
}

.preview-overlay-btn:hover {
  background: #1565c0;
}

.material-preview .placeholder {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 48px;
  color: #999;
}

.material-preview .tag {
  position: absolute;
  top: 10px;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
  color: #fff;
}

.material-preview .tag.copyright {
  left: 10px;
  background: #ff6b6b;
}

.material-preview .tag.new {
  right: 10px;
  background: #4ecdc4;
}

.material-info {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.material-info h3 {
  font-size: 14px;
  color: #333;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preview-btn {
  padding: 6px 12px;
  background: #1976d2;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.3s;
}

.preview-btn:hover {
  background: #1565c0;
}

.download-btn:hover {
  background: #2d1659;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 30px;
}

.page-btn {
  padding: 8px 16px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  color: #333;
  text-decoration: none;
  font-size: 14px;
  transition: all 0.3s;
}

.page-btn:hover {
  background: #3a1c71;
  color: #fff;
  border-color: #3a1c71;
}

.page-btn.active {
  background: #3a1c71;
  color: #fff;
  border-color: #3a1c71;
}

/* 预览模态框样式 */
.preview-modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.9);
  justify-content: center;
  align-items: center;
}

.preview-modal-content {
  position: relative;
  max-width: 90%;
  max-height: 90vh;
  text-align: center;
}

.preview-image-wrapper {
  position: relative;
  display: inline-block;
}

.preview-image-wrapper img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
  display: block;
}

.preview-download-wrapper {
  position: absolute;
  bottom: 15px;
  right: 15px;
  z-index: 10;
}

.close-modal {
  position: absolute;
  top: -40px;
  right: 0;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}

.preview-title-bar {
  margin-top: 15px;
  text-align: center;
}

.preview-title {
  color: #fff;
  font-size: 18px;
}

.download-link-btn {
  padding: 10px 25px;
  background: #d32f2f;
  color: #fff;
  border: none;
  border-radius: 4px;
  text-decoration: none;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.3s;
  display: inline-block;
}

.download-link-btn:hover {
  background: #b71c1c;
}

/* ========================================
   素材展示区布局增强（追加样式，确保生效）
   ======================================== */

/* 1. 素材列表整体容器：90%宽度，居中 */
.materials-container {
  width: 90% !important;
  max-width: none !important;
  margin: 0 auto !important;
}

/* 2. 素材网格布局：一行固定5个 */
.materials-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 20px !important;
  margin-bottom: 40px !important;
}

/* 3. 单个素材卡片 */
.material-card {
  background: #fff !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  transition: transform 0.3s, box-shadow 0.3s !important;
}

.material-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
}

/* 4. 素材预览区：16:9封面比例（56.25% = 9/16） */
.material-preview {
  position: relative !important;
  width: 100% !important;
  padding-top: 56.25% !important;
  background: #f0f0f0 !important;
  overflow: hidden !important;
}

/* 5. 素材图片：适配16:9封面，不变形、不拉伸 */
.material-preview img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* 6. 占位符居中 */
.material-preview .placeholder {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: 48px !important;
  color: #999 !important;
}

/* 7. 标签定位 */
.material-preview .tag {
  position: absolute !important;
  top: 10px !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  font-weight: bold !important;
  color: #fff !important;
  z-index: 5 !important;
}

.material-preview .tag.copyright {
  left: 10px !important;
  background: #ff6b6b !important;
}

.material-preview .tag.new {
  right: 10px !important;
  background: #4ecdc4 !important;
}

/* 8. 预览按钮定位 */
.preview-overlay-btn {
  position: absolute !important;
  bottom: 10px !important;
  right: 10px !important;
  padding: 6px 16px !important;
  background: #1976d2 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  font-size: 13px !important;
  z-index: 10 !important;
  transition: background 0.3s !important;
}

.preview-overlay-btn:hover {
  background: #1565c0 !important;
}

/* 9. 素材信息区 */
.material-info {
  padding: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.material-info h3 {
  font-size: 14px !important;
  color: #333 !important;
  margin: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* ========================================
   素材展示区布局修正（追加，强制16:9生效）
   ======================================== */

/* 1. 素材列表容器：90%宽度居中 */
.materials-section .materials-container {
  width: 90% !important;
  max-width: none !important;
  margin: 0 auto !important;
}

/* 2. 素材网格：一行5个 */
.materials-section .materials-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 20px !important;
}

/* 3. 素材卡片容器 */
.materials-section .material-card {
  background: #fff !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* 4. 素材预览区：强制16:9横向长方形 */
.materials-section .material-card .material-preview {
  position: relative !important;
  width: 100% !important;
  padding-top: 56.25% !important; /* 9÷16=0.5625=56.25%，16:9横向比例 */
  background: #f0f0f0 !important;
  overflow: hidden !important;
}

/* 5. 素材图片：适配16:9，不变形不拉伸 */
.materials-section .material-card .material-preview img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* 6. 占位符 */
.materials-section .material-card .material-preview .placeholder {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: 48px !important;
  color: #999 !important;
}

/* 7. 标签 */
.materials-section .material-card .material-preview .tag {
  position: absolute !important;
  top: 10px !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  font-weight: bold !important;
  color: #fff !important;
  z-index: 5 !important;
}

.materials-section .material-card .material-preview .tag.copyright {
  left: 10px !important;
  background: #ff6b6b !important;
}

.materials-section .material-card .material-preview .tag.new {
  right: 10px !important;
  background: #4ecdc4 !important;
}

/* 8. 预览按钮 */
.materials-section .material-card .material-preview .preview-overlay-btn {
  position: absolute !important;
  bottom: 10px !important;
  right: 10px !important;
  padding: 6px 16px !important;
  background: #1976d2 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  font-size: 13px !important;
  z-index: 10 !important;
}

/* 9. 素材信息 */
.materials-section .material-card .material-info {
  padding: 12px !important;
}

.materials-section .material-card .material-info h3 {
  font-size: 14px !important;
  color: #333 !important;
  margin: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* ========================================
   素材展示区最终修正（100%匹配图一16:9比例）
   ======================================== */

/* 1. 素材列表容器：90%宽度居中 */
.materials-section .materials-container {
  width: 90% !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: 40px 0 !important;
}

/* 2. 素材网格布局：一行5个，间距20px */
.materials-section .materials-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 20px !important;
}

/* 3. 素材卡片：强制16:9横向长方形（1707×960比例） */
.materials-section .material-card {
  width: 100% !important;
  position: relative !important;
  overflow: visible !important;
  background: #fff !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* 4. 素材预览区：标准16:9比例（9÷16=56.25%） */
.materials-section .material-card .material-preview {
  position: relative !important;
  width: 100% !important;
  padding-top: 56.25% !important;
  height: 0 !important;
  background: #f0f0f0 !important;
  overflow: hidden !important;
  border-radius: 8px 8px 0 0 !important;
}

/* 5. 素材图片：绝对定位填充，16:9不变形 */
.materials-section .material-card .material-preview img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}

/* 6. 占位符居中 */
.materials-section .material-card .material-preview .placeholder {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: 48px !important;
  color: #999 !important;
  z-index: 1 !important;
}

/* 7. 标签定位 */
.materials-section .material-card .material-preview .tag {
  position: absolute !important;
  top: 10px !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  font-weight: bold !important;
  color: #fff !important;
  z-index: 5 !important;
}

.materials-section .material-card .material-preview .tag.copyright {
  left: 10px !important;
  background: #ff6b6b !important;
}

.materials-section .material-card .material-preview .tag.new {
  right: 10px !important;
  background: #4ecdc4 !important;
}

/* 8. 预览按钮 */
.materials-section .material-card .material-preview .preview-overlay-btn {
  position: absolute !important;
  bottom: 10px !important;
  right: 10px !important;
  padding: 6px 16px !important;
  background: #1976d2 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  font-size: 13px !important;
  z-index: 10 !important;
}

/* 9. 素材信息区 */
.materials-section .material-card .material-info {
  padding: 12px !important;
  background: #fff !important;
}

.materials-section .material-card .material-info h3 {
  font-size: 14px !important;
  color: #333 !important;
  margin: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* ========================================
   间距优化（100%纯增量，匹配banner到搜索框间距）
   ======================================== */

/* 1. 搜索框区域：缩小底部间距 */
.search-section {
  padding-top: 20px !important;
  padding-bottom: 15px !important;
}

/* 2. 分类区域：缩小顶部和底部间距 */
.categories {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}

/* 3. 二级分类区域：缩小最小高度和内边距 */
.subcategories-wrapper {
  min-height: 35px !important;
  padding-top: 3px !important;
  padding-bottom: 3px !important;
}

/* 4. 素材区域：缩小顶部间距 */
.materials-section {
  padding-top: 15px !important;
  padding-bottom: 30px !important;
}

/* ========================================
   账号显示样式（匹配图四深色导航栏）
   ======================================== */

/* 1. 头部导航栏淡粉色背景 */
.header {
  background: linear-gradient(135deg, #fce4ec 0%, #f8bbd0 100%) !important;
  box-shadow: 0 2px 8px rgba(216, 27, 96, 0.15) !important;
}

/* 2. 用户操作区样式 */
.user-actions {
  display: flex !important;
  align-items: center !important;
  gap: 15px !important;
}

/* 3. 欢迎文字样式 */
.user-actions .welcome-text {
  color: #880e4f !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  margin-right: 5px !important;
}

/* 4. 会员等级标签样式 */
.user-actions .member-badge {
  background: linear-gradient(135deg, #d81b60 0%, #c2185b 100%) !important;
  color: #ffffff !important;
  padding: 3px 10px !important;
  border-radius: 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  box-shadow: 0 2px 4px rgba(216, 27, 96, 0.3) !important;
}

/* 5. 退出登录链接样式 */
.user-actions .logout-link {
  color: #880e4f !important;
  font-size: 14px !important;
  text-decoration: none !important;
  padding: 4px 12px !important;
  border: 1px solid rgba(136, 14, 79, 0.3) !important;
  border-radius: 4px !important;
  transition: all 0.3s ease !important;
}

.user-actions .logout-link:hover {
  background: rgba(216, 27, 96, 0.1) !important;
  border-color: rgba(136, 14, 79, 0.5) !important;
}

/* 6. 导航链接统一样式 */
.nav a {
  color: #880e4f !important;
  text-decoration: none !important;
  padding: 8px 12px !important;
  transition: color 0.3s ease !important;
}

.nav a:hover {
  color: #d81b60 !important;
}

/* 7. Logo文字颜色 */
.logo h1 {
  color: #ad1457 !important;
}

/* ========================================
   Banner高度压缩（100%纯增量）
   ======================================== */

/* 压缩顶部Banner高度：从100px减少到25px */
.banner {
  padding-top: 25px !important;
  padding-bottom: 25px !important;
  min-height: auto !important;
}

/* 确保Banner内容居中紧凑 */
.banner .banner-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
}

/* Banner标题紧凑显示 */
.banner h2 {
  margin: 0 !important;
  margin-bottom: 5px !important;
}

/* Banner副标题紧凑显示 */
.banner p {
  margin: 0 !important;
  margin-bottom: 3px !important;
}

/* ========================================
   账号显示样式优化（匹配图二黑色长条栏）
   ======================================== */

/* 顶部账号栏粉色背景 */
.user-actions {
  background: linear-gradient(135deg, #fce4ec 0%, #f8bbd0 100%) !important;
  padding: 8px 20px !important;
  border-radius: 20px !important;
}

/* 欢迎文字样式 */
.user-actions .welcome-text {
  color: #880e4f !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  margin-right: 10px !important;
}

/* 会员等级标签样式 */
.user-actions .member-badge {
  background: linear-gradient(135deg, #d81b60 0%, #c2185b 100%) !important;
  color: #ffffff !important;
  padding: 3px 10px !important;
  border-radius: 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  margin-right: 15px !important;
  display: inline-block !important;
  box-shadow: 0 2px 4px rgba(216, 27, 96, 0.3) !important;
}

/* 退出登录链接样式 */
.user-actions .logout-link {
  color: #880e4f !important;
  font-size: 14px !important;
  text-decoration: none !important;
  margin-left: 5px !important;
  padding: 4px 12px !important;
  border: 1px solid rgba(136, 14, 79, 0.3) !important;
  border-radius: 4px !important;
  transition: all 0.3s ease !important;
}

.user-actions .logout-link:hover {
  background: rgba(216, 27, 96, 0.1) !important;
  border-color: rgba(136, 14, 79, 0.5) !important;
}

/* ========================================
   极致间距优化（100%纯增量，压平所有冗余空白）
   ======================================== */

/* 1. 搜索框外层section：压平底部间距，固定在顶部 */
.search-section {
  padding-bottom: 6px !important;
  position: sticky !important;
  top: 60px !important;
  z-index: 999 !important;
  background: #fafafa !important;
}

/* 隐藏旧的搜索框 */
.search-section .search-container {
  display: none;
}

/* 2. 搜索框内层容器：压平底部间距 */
.search-section .search-container {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* 3. 分类外层section：压平顶部间距 */
.categories {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

/* 4. 一级分类容器：极致缩小上下间距 */
.categories .category-tabs {
  margin-top: 0 !important;
  margin-bottom: 4px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 5. 二级分类容器：极致缩小上下间距 */
.categories .subcategories-wrapper {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: 30px !important;
}

/* 6. 单个二级分类组：极致缩小间距 */
.categories .subcategories {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 7. 素材区域外层section：压平顶部间距 */
.materials-section {
  padding-top: 4px !important;
  padding-bottom: 20px !important;
}

/* 8. 素材容器内层：压平顶部间距 */
.materials-section .materials-container {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ========================================
   间距修正（100%纯增量，匹配素材标准间距20px）
   ======================================== */

/* 1. 搜索框区域：大幅缩小底部间距，消除冗余空白 */
.search-section {
  padding-bottom: 10px !important;
}

/* 2. 分类区域：缩小顶部间距，衔接搜索框 */
.categories {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* 3. 二级分类容器：调整底部间距 */
.subcategories-wrapper {
  padding-bottom: 2px !important;
  min-height: 35px !important;
}

/* 4. 素材区域：顶部间距 = 素材之间的标准间距(20px) */
.materials-section {
  padding-top: 18px !important;
  padding-bottom: 20px !important;
}

/* ========================================
   功能修复样式（100%纯增量）
   ======================================== */

/* ========================================
   登录弹窗样式（匹配图三样式）
   ======================================== */

/* 弹窗遮罩层 */
.login-modal-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0, 0, 0, 0.5) !important;
  z-index: 9999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 弹窗容器 */
.login-modal-box {
  background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 50%, #a5d6a7 100%) !important;
  border-radius: 20px !important;
  padding: 40px !important;
  width: 850px !important;
  max-width: 95% !important;
  position: relative !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important;
  border: 3px solid #81c784 !important;
}

/* 顶部文字 */
.login-modal-top-text {
  text-align: center !important;
  font-size: 36px !important;
  font-weight: bold !important;
  color: #2e7d32 !important;
  margin-bottom: 30px !important;
  font-family: "KaiTi", "楷体", "STKaiti", "华文楷体", serif !important;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1) !important;
  letter-spacing: 8px !important;
}

/* 内容容器 */
.login-modal-content-wrapper {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 30px !important;
}

/* 左右两侧文字 */
.login-modal-side-text {
  flex: 1 !important;
  font-size: 28px !important;
  font-weight: bold !important;
  color: #1b5e20 !important;
  text-align: center !important;
  line-height: 1.8 !important;
  font-family: "KaiTi", "楷体", "STKaiti", "华文楷体", serif !important;
  min-height: 280px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.3) !important;
  border-radius: 15px !important;
  padding: 20px !important;
  transform: rotate(-3deg) !important;
  transition: transform 0.3s ease !important;
}

/* 左侧文字 */
.login-modal-left-text {
  border: 2px dashed #66bb6a !important;
  transform: rotate(-2deg) !important;
}

.login-modal-left-text:hover {
  transform: rotate(0deg) scale(1.05) !important;
}

/* 右侧文字 */
.login-modal-right-text {
  border: 2px dashed #66bb6a !important;
  transform: rotate(2deg) !important;
}

.login-modal-right-text:hover {
  transform: rotate(0deg) scale(1.05) !important;
}

/* 登录表单区域 */
.login-modal-form-wrapper {
  flex: 0 0 350px !important;
}

/* 关闭按钮 */
.login-modal-close {
  position: absolute !important;
  top: 15px !important;
  right: 20px !important;
  font-size: 32px !important;
  color: #2e7d32 !important;
  cursor: pointer !important;
  line-height: 1 !important;
  transition: color 0.3s, transform 0.2s !important;
  font-weight: bold !important;
}

.login-modal-close:hover {
  color: #1b5e20 !important;
  transform: scale(1.2) !important;
}

/* 弹窗标题 */
.login-modal-title {
  text-align: center !important;
  font-size: 24px !important;
  color: #2e7d32 !important;
  margin: 0 0 25px 0 !important;
  font-weight: 600 !important;
}

/* 表单字段 */
.login-modal-field {
  margin-bottom: 20px !important;
}

.login-modal-field label {
  display: block !important;
  margin-bottom: 8px !important;
  font-size: 15px !important;
  color: #1b5e20 !important;
  font-weight: 500 !important;
}

.login-modal-input {
  width: 100% !important;
  padding: 14px 18px !important;
  border: 2px solid #a5d6a7 !important;
  border-radius: 10px !important;
  font-size: 15px !important;
  box-sizing: border-box !important;
  transition: border-color 0.3s, box-shadow 0.3s !important;
  background: rgba(255, 255, 255, 0.9) !important;
}

.login-modal-input:focus {
  outline: none !important;
  border-color: #4caf50 !important;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2) !important;
}

/* 登录按钮 */
.login-modal-submit {
  width: 100% !important;
  padding: 14px !important;
  background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: opacity 0.3s, transform 0.2s !important;
  margin-top: 10px !important;
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3) !important;
}

.login-modal-submit:hover {
  opacity: 0.95 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(76, 175, 80, 0.4) !important;
}

.login-modal-submit:disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* ========================================
   账号显示样式（匹配图二黑色长条栏）
   ======================================== */

/* 用户操作区粉色背景 */
.user-actions {
  background: linear-gradient(135deg, #fce4ec 0%, #f8bbd0 100%) !important;
  padding: 10px 20px !important;
  border-radius: 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* 欢迎文字样式 */
.user-actions .welcome-text {
  color: #880e4f !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

/* 会员等级标签样式 */
.user-actions .member-badge {
  background: linear-gradient(135deg, #d81b60 0%, #c2185b 100%) !important;
  color: #ffffff !important;
  padding: 4px 12px !important;
  border-radius: 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  display: inline-block !important;
}

/* 退出登录链接样式 */
.user-actions .logout-link {
  color: #ffffff !important;
  font-size: 14px !important;
  text-decoration: none !important;
  padding: 4px 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 4px !important;
  transition: all 0.3s !important;
  margin-left: 5px !important;
}

.user-actions .logout-link:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  text-decoration: none !important;
}

/* Banner高度压缩 */
.banner {
  padding-top: 30px !important;
  padding-bottom: 30px !important;
}

.banner h2 {
  margin: 0 !important;
  margin-bottom: 8px !important;
}

.banner p {
  margin: 0 !important;
  margin-bottom: 5px !important;
}

/* ========================================
   导航栏终极修复：强制不换行、完整显示、支持左右滚动（100%纯增量）
   ======================================== */

/* 1. Header容器：保证最小宽度 */
.header {
  min-width: 1200px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: linear-gradient(135deg, #fce4ec 0%, #f8bbd0 100%) !important;
  box-shadow: 0 2px 8px rgba(216, 27, 96, 0.15) !important;
}

/* 2. Header内层容器：禁止横向滚动 */
.header-container {
  min-width: 1200px !important;
  overflow: visible !important;
}

/* 3. 导航栏容器：强制不换行 */
.nav {
  display: flex !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  gap: 25px !important;
  align-items: center !important;
  padding: 0 10px !important;
  flex-shrink: 0 !important;
}

/* 4. 单个导航链接：强制不换行，字体清晰 */
.nav a {
  display: inline-block !important;
  white-space: nowrap !important;
  font-size: 16px !important;
  color: #333 !important;
  text-decoration: none !important;
  padding: 0 8px !important;
  line-height: 1.5 !important;
  flex-shrink: 0 !important;
}

.nav a:hover {
  color: #667eea !important;
}

/* 5. 用户操作区：与导航项同排，保持间距 */
.user-actions {
  background: linear-gradient(135deg, #fce4ec 0%, #f8bbd0 100%) !important;
  padding: 8px 15px !important;
  border-radius: 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  margin-left: 15px !important;
}

/* 6. 欢迎文字：完整显示 */
.user-actions .welcome-text {
  color: #880e4f !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}

/* 7. 会员等级标签：正常显示 */
.user-actions .member-badge {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  color: #ffffff !important;
  padding: 3px 10px !important;
  border-radius: 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  display: inline-block !important;
}

/* 8. 退出登录链接：正常显示 */
.user-actions .logout-link {
  color: #ffffff !important;
  font-size: 14px !important;
  text-decoration: none !important;
  padding: 3px 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 4px !important;
  transition: all 0.3s !important;
  white-space: nowrap !important;
}

.user-actions .logout-link:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  text-decoration: none !important;
}

/* 9. Logo区域：不压缩 */
.logo {
  flex-shrink: 0 !important;
  margin-right: 20px !important;
}

.logo h1 {
  font-size: 20px !important;
  white-space: nowrap !important;
}

.logo img {
  max-height: 45px !important;
  width: auto !important;
}

/* ========================================
   【新增】彻底隐藏注册入口 + 登录入口醒目化
   遵循"不改新出旧"原则：100%纯增量，零修改原有代码
   ======================================== */

/* 1. 彻底隐藏所有注册相关元素（文字、按钮、链接） */
a[href*="register"],
.register-link,
.register-btn,
.nav-item a[href="/register"],
.user-area a[href="register.php"],
.dropdown-item[href="/register"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* 2. 登录入口样式：强制醒目化，高对比度，一眼可见 */
a[href*="login"],
.login-link,
.nav-item a[href="/login"],
.user-area a[href="login.php"],
.user-area a[href="views/login.php"] {
  color: #ffffff !important;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  padding: 8px 20px !important;
  border-radius: 6px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  margin-left: 10px !important;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4) !important;
  transition: all 0.3s ease !important;
  letter-spacing: 1px !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
}

/* 3. 登录 hover 效果，强化醒目度和交互反馈 */
a[href*="login"]:hover,
.login-link:hover,
.nav-item a[href="/login"]:hover,
.user-area a[href="login.php"]:hover,
.user-area a[href="views/login.php"]:hover {
  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6) !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
  text-decoration: none !important;
}

/* 4. 确保登录链接在导航栏中突出显示 */
.user-actions a[href*="login"],
.user-area a[href*="login"] {
  display: inline-block !important;
  vertical-align: middle !important;
}

/* 5. 针对Bootstrap导航栏中的登录链接特殊优化 */
.navbar-nav .nav-item a[href="/login"] {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;
  color: #ffffff !important;
  padding: 10px 24px !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  box-shadow: 0 4px 15px rgba(245, 87, 108, 0.4) !important;
  margin: 0 5px !important;
}

.navbar-nav .nav-item a[href="/login"]:hover {
  background: linear-gradient(135deg, #f5576c 0%, #f093fb 100%) !important;
  box-shadow: 0 6px 20px rgba(245, 87, 108, 0.6) !important;
  transform: translateY(-2px) scale(1.05) !important;
}

/* 确保categories在materials-container里正确显示 */
.materials-section .categories {
  max-width: none !important;
  margin: 0 0 20px 0 !important;
  padding: 10px 0 !important;
  position: static !important;
  top: auto !important;
  background: transparent !important;
  box-shadow: none !important;
  z-index: 100 !important;
}

.materials-section .categories-grid {
  width: 100% !important;
}