.login, .username {
    font-style: normal;
}

.banner {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 80px; /* 微调降低顶部留白，更适配移动端 */
  overflow: hidden; /* 防止图片溢出容器 */
  background-color:rgba(255, 173, 0, 1);
  background-image: url(/static/images/dark-tire.png);
}


/* 左侧文字区域 */
.banner-text {
  flex: 0.55;
  padding:10px 10vw;
}

.banner-text h3 {
  color: #F7F9FC;
  font-size: clamp(12px,1.5vw,25px);
  font-weight: 500;
}

.banner-text h2 {
  padding-top: 10px;
  font-size:  clamp(24px,3vw,50px);
  font-style: italic;
  color: #F7F9FC;
}

/* 手机平板小屏适配 */
@media (max-width: 768px) {
  .banner {
    flex-direction: column;
  }
  /* 移动端取消50%宽度，铺满整行 */

  .banner-text {
    order: 1; 
    padding: 0;
  }  

  .banner-img {
    order: 2;
  }
}


/* 图片容器&图片优化 */
.banner-img {
  flex: 0.45;
  height: 100%;
}

@media (max-width: 768px) {
  .banner-img {
    flex: 1;
    object-fit:cover;
  }
}

.category-container {
  display: block;
  padding: 15px 5vw;
  background-color: aliceblue;
}

.category-container ul {
  display: flex;
  gap: 10px;       /* 分类之间间距10px */
  list-style: none;/* 清除默认小圆点 */
  margin: 0;       /* 清除ul默认外边距 */
  padding: 0;      /* 清除ul默认内边距 */
  overflow-x: auto;/* 分类太多时横向滚动，防止挤爆 */
}

/* 单个分类项 */
.category-container ul li {
  white-space: nowrap; /* 文字不换行 */
}

/* 分类链接样式 */
.category-container ul li a {
  display: inline-block;
  padding: 6px 14px;
  text-decoration: none;
  color: #333333;
  border-radius: 20px;
  transition: 0.2s;
}

/* 选中高亮active */
.category-container ul li.active a {
  background: rgba(255, 173, 0, 1);
  color: #333;
}

/* hover悬浮效果 */
.category-container ul li a:hover:not(.active) {
  background: #d0e6f9;
}


.picture-container {
  /* 分列：桌面3列，可自行修改数字 */
  column-count: 3;
  /* 图片之间横向间距 */
  column-gap: 16px;
  padding: 1vh 3vw;
}

/* 每个图片卡片，必须设置break-inside防止截断 */
.pic-item {
  /* 垂直上下间距 */
  margin-bottom: 16px;
  /* 关键：禁止图片被分列切割 */
  break-inside: avoid;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 5px 5px 5px rgba(0, 0, 0, 0.2); /* 悬浮时阴影更明显 */ 
  position: relative;
}

/* 图片自适应宽度 */
.parallax-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 15px;
  transition: transform 0.3s ease;
}

/* hover放大效果可选 */
.pic-item a:hover .parallax-img {
  transform: scale(1.05);
}

/* 响应式适配，屏幕变小自动减少列数 */
@media (max-width: 1200px) {
  .picture-container {
    column-count: 3;
  }
}
@media (max-width: 768px) {
  .picture-container {
    column-count: 2;
  }
}
@media (max-width: 480px) {
  .picture-container {
    column-count: 1;
  }
}

.pic-info {
    position: absolute;
    left: 10px;
    bottom: 10px;
    background: rgba(0,0,0,0.6);
    color: white;
    padding: 15px;
    opacity: 0;
    transition: opacity 0.3s;
}
.pic-item a:hover .pic-info {
    opacity: 1;
}

.pagination {
    display: block;
    text-align: center;
    margin: 20px 0;
    border-bottom: 1px dotted #333333;
}

.show_page {
    padding: 10px;
}

.pagination a {
    border: 1px solid rgba(255, 173, 0, 1);
    color: rgba(255, 173, 0, 1) ;
    border-radius: 30px;
    padding: 10px 20px;
}

.pagination a:hover {
    font-weight: 800;
}

.pagination .current {
    color: black;
    background-color:  rgba(255, 173, 0, 1) ;
    border-radius: 30px;
    padding: 10px 20px;
}

.turn_page {
    padding: 20px;
}


.workbench {
    display: flex;
    flex-direction: column;
    align-items: left;
    margin-top: 100px;
    padding: 20px;
    border: 2px dotted #222222;
}

.workbench .info {
    color: rgba(255, 173, 0, 1);
}

.workbench p {
    margin-bottom: 15px;
}
.workbench input {
    width: 100%;
    padding: 8px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.workbench button {
    background: rgba(255, 173, 0, 1);
    color:  #222222;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

h2 {
    font-style: normal;
}

.visitor_count {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    padding-right: 2rem;
    color: #333333;
}