/* 头部（复用） */
.header{
  background:#0a0a0a;
  border-bottom:2px solid #d4af37;
  position:relative;
  top:0;
  z-index:999;
  width:100%;
  min-height:70px
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:70px;
  width:100%;
  position:relative;
  flex-wrap:nowrap
}

/* 头部右侧区域 */
.header-right{
  display:flex;
  align-items:center;
  gap:20px;
  flex:1;
  justify-content:flex-end
}

/* 搜索功能 */
.search-box{
  position:relative;
}

.search-input{
  background:#1a1a1a;
  border:1px solid #c0c0c0;
  border-radius:20px;
  padding:8px 40px 8px 15px;
  color:#ccc;
  font-size:14px;
  width:200px;
  transition:all 0.3s ease;
}

.search-input:focus{
  outline:none;
  border-color:#d4af37;
  width:250px;
}

.search-btn{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  background:none;
  border:none;
  color:#d4af37;
  cursor:pointer;
  font-size:14px;
  transition:all 0.3s ease;
}

.search-btn:hover{
  color:#c0c0c0;
}

/* 用户区域 */
.user-area{
  display:flex;
  gap:10px;
  align-items:center
}

.login-btn,
.register-btn{
  padding:6px 12px;
  border-radius:4px;
  font-weight:bold;
  transition:all 0.3s ease;
}

.login-btn{
  background:transparent;
  border:1px solid #d4af37;
  color:#d4af37;
}

.login-btn:hover{
  background:#d4af37;
  color:#000;
}

.register-btn{
  background:linear-gradient(135deg, #d4af37, #c0c0c0);
  color:#000;
  border:none;
}

.register-btn:hover{
  background:linear-gradient(135deg, #c0c0c0, #d4af37);
  transform:scale(1.05);
}
.logo-area{
  display:flex;
  align-items:center;
  gap:12px
}
header.logo-img{
  max-width:50px;
  max-height:50px;
  width:auto;
  height:auto;
  display:block
}

@media(max-width:480px){
  .logo-img{
    max-width:40px;
    max-height:40px;
  }
}
.site-title{
  font-size:20px;
  color:#d4af37;
  font-weight:bold;
  text-shadow:0 0 8px rgba(212, 175, 55, 0.6)
}
.site-description{
  font-size:12px;
  color:#c0c0c0
}
.nav{
  display:flex;
  gap:20px
}
.nav a{
  color:#d4af37;
  text-decoration:none;
  font-weight:bold;
  transition:all 0.3s
}
.nav a:hover{
  color:#c0c0c0;
  text-shadow:0 0 5px rgba(192,192,192,0.8)
}
.menu-btn{
  display:none;
  color:#d4af37
}
#menu-toggle{
  display:none
}
@media(max-width:768px){
  .header {
    position:relative;
    min-height:auto
  }

  .header-inner {
    flex-wrap:wrap;
    height:auto;
    padding:10px 0
  }

  .logo-area {
    width:100%;
    justify-content:space-between;
    margin-bottom:10px;
    position:relative;
    z-index:2
  }

  .header-right {
    flex-direction:column;
    align-items:flex-start;
    gap:15px;
    width:100%;
    background:#0a0a0a;
    padding:20px 0;
    border-top:1px solid #c0c0c0;
    display:none
  }

  .search-box {
    width:100%;
    margin-bottom:15px
  }

  .search-input {
    width:100%
  }

  .search-input:focus {
    width:100%
  }

  .nav {
    display:flex;
    flex-direction:column;
    gap:10px;
    width:100%
  }

  .user-area {
    width:100%;
    justify-content:space-between;
    order:3
  }

  .menu-btn {
    display:block;
    font-size:26px;
    cursor:pointer;
    position:absolute;
    right:15px;
    top:50%;
    transform:translateY(-50%);
    z-index:10
  }

  #menu-toggle:checked + .menu-btn + .header-right {
    display:flex
  }
}

@media(max-width:480px){
  .header {
    min-height:auto
  }

  .logo-area {
    flex-direction:column;
    gap:8px;
    align-items:flex-start
  }

  .site-title {
    font-size:18px
  }

  .site-description {
    font-size:11px
  }

  .header-right {
    padding:15px 0
  }

  .login-btn,
  .register-btn {
    padding:5px 10px;
    font-size:14px
  }

  .menu-btn {
    font-size:24px
  }
}