/* ============================================
   Header Fix — White Glassmorphism Edition
   ============================================ */

header#header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 99999 !important;
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(24px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.2) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  padding: 18px 0 !important;
  margin: 0 !important;
  float: none !important;
  clear: none !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

header#header.scrolled {
  background: rgba(255, 255, 255, 0.95) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(168, 85, 247, 0.04),
    inset 0 -1px 0 rgba(0, 0, 0, 0.03) !important;
  padding: 14px 0 !important;
}

header#header * {
  box-sizing: border-box !important;
}

header#header > div {
  align-items: center !important;
}

header#header .main-nav {
  float: none !important;
}

/* Logo image enhancement */
header#header img[alt="LikeAStar"] {
  filter: brightness(0.9) contrast(1.05);
  transition: filter 0.3s ease;
}
header#header img[alt="LikeAStar"]:hover {
  filter: brightness(0.7) contrast(1.1) drop-shadow(0 0 8px rgba(168, 85, 247, 0.3));
}

/* Nav menu links */
header#header .main-nav {
  display: flex !important;
  align-items: center !important;
  float: none !important;
}

header#header ul.sm-clean {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

header#header ul.sm-clean > li {
  padding-top: 0 !important;
}

header#header .menu-link {
  color: #1e293b !important;
  font-family: 'DingTalkJinBuTi', sans-serif !important;
  font-weight: 700 !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative !important;
}

header#header .menu-link:hover {
  color: #000 !important;
}

header#header .menu-link.active {
  color: #000 !important;
  position: relative !important;
}

header#header .menu-link.active::after {
  content: '' !important;
  position: absolute !important;
  bottom: -4px !important;
  left: 0 !important;
  width: 100% !important;
  height: 2px !important;
  background: #7c3aed !important;
  border-radius: 1px !important;
}

/* Header right section */
header#header .header-content-right {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  padding-top: 0 !important;
  position: relative !important;
}

header#header .header-content-right .user-info-wrap {
  display: flex !important;
  align-items: center !important;
}

header#header .header-content-right .user-trigger {
  display: flex !important;
  align-items: center !important;
}

/* Content area */
.content {
  padding-top: 100px !important;
}

html {
  overflow-y: scroll !important;
  scrollbar-gutter: stable !important;
}

/* === Global === */
body {
  background: var(--bg-deep, #f8fafc) !important;
}

.main-wrapper {
  min-height: 100vh;
}

/* === Footer === */
.footer {
  background: rgba(255, 255, 255, 0.8) !important;
  border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
  backdrop-filter: blur(12px) !important;
}

.footer-bottom {
  padding: 28px 0 !important;
}

.copyright-text {
  color: var(--text-muted, #64748b) !important;
  font-size: 12px !important;
  letter-spacing: 0.3px;
}

/* Logo footer */
.logo-footer img {
  filter: brightness(0.4) saturate(0.8);
  transition: filter 0.3s ease;
}
.logo-footer img:hover {
  filter: brightness(0.2) saturate(1);
}

/* ============================================
   Mobile Responsive
   ============================================ */
@media (max-width: 768px) {
  header#header {
    padding: 12px 0 !important;
  }
  header#header.scrolled {
    padding: 10px 0 !important;
  }
  header#header .header-clear {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 50px !important;
    overflow: visible !important;
  }
  header#header .header-content-left {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: auto !important;
    max-width: none !important;
    float: none !important;
    z-index: 2 !important;
  }
  header#header .header-content-left .logo img {
    height: 26px !important;
  }
  header#header .header-content-center {
    position: absolute !important;
    left: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: auto !important;
    flex: none !important;
    z-index: 2 !important;
  }
  header#header .main-menu-btn {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
  }
  header#header .main-menu-btn-icon {
    display: block !important;
    width: 20px !important;
    height: 2px !important;
    background: #1e293b !important;
    position: relative !important;
    transition: all 0.3s ease !important;
  }
  header#header .main-menu-btn-icon::before,
  header#header .main-menu-btn-icon::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    width: 100% !important;
    height: 2px !important;
    background: #1e293b !important;
    transition: all 0.3s ease !important;
  }
  header#header .main-menu-btn-icon::before { top: -6px !important; }
  header#header .main-menu-btn-icon::after { top: 6px !important; }
  header#header ul.sm-clean { display: none !important; }
  header#header ul.sm-clean.menu-active {
    display: block !important;
    position: fixed !important;
    top: 54px !important;
    left: 0 !important;
    right: 0 !important;
    background: rgba(255, 255, 255, 0.97) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    padding: 8px 0 !important;
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    width: 100vw !important;
    box-sizing: border-box !important;
    z-index: 100000 !important;
    max-height: calc(100vh - 54px) !important;
    overflow-y: auto !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1) !important;
  }
  header#header ul.sm-clean.menu-active li {
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
    width: 100% !important;
    display: block !important;
    list-style: none !important;
  }
  header#header ul.sm-clean.menu-active li:last-child { border-bottom: none !important; }
  header#header ul.sm-clean.menu-active li a {
    display: block !important;
    padding: 14px 24px !important;
    width: 100% !important;
    font-size: 15px !important;
    color: #1e293b !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
  }
  header#header ul.sm-clean.menu-active li a:hover {
    background: rgba(168, 85, 247, 0.06) !important;
    color: #000 !important;
  }
  header#header .header-content-right {
    position: absolute !important;
    right: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin-left: 0 !important;
    z-index: 2 !important;
  }
  header#header .header-content-right a {
    padding: 6px 14px !important;
    font-size: 13px !important;
  }
}