/* Root Variables for Theming */
:root {
  --primary-color: #26A9E0; /* Light Blue */
  --secondary-color: #FFFFFF;
  --login-color: #EA7C07;
  --background-color: #FFFFFF;
  --black-color: #000000;

  /* Neon Colors - adapted from primary/secondary for vibrancy */
  --neon-primary: #00FFFF; /* Cyan for primary neon effect */
  --neon-secondary: #FF00FF; /* Magenta for secondary neon effect */
  --neon-accent: #FFFF00; /* Yellow for accent neon effect */

  /* Header Offset (with marquee) */
  --header-offset: 166px;
}

/* General Body Styling */
body {
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding-top: var(--header-offset); /* Ensures content is not hidden by fixed header */
  background-color: var(--background-color);
  color: #333;
  line-height: 1.6;
  overflow-x: hidden; /* Prevent horizontal scroll from layout issues */
}

/* Keyframe Animations for Neon Effects */
@keyframes marquee-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.9; }
}

@keyframes marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes text-glow-flow {
  0% {
    text-shadow: 
      0 0 5px var(--neon-primary),
      0 0 10px var(--neon-primary),
      0 0 15px var(--neon-primary);
    color: var(--secondary-color);
  }
  50% {
    text-shadow: 
      0 0 5px var(--neon-secondary),
      0 0 10px var(--neon-secondary),
      0 0 15px var(--neon-secondary);
    color: var(--secondary-color);
  }
  100% {
    text-shadow: 
      0 0 5px var(--neon-accent),
      0 0 10px var(--neon-accent),
      0 0 15px var(--neon-accent);
    color: var(--secondary-color);
  }
}

@keyframes theme-colors {
  0%, 100% {
    border-color: var(--neon-primary);
    box-shadow: 
      0 0 10px var(--neon-primary),
      0 0 20px var(--neon-primary);
  }
  33% {
    border-color: var(--neon-secondary);
    box-shadow: 
      0 0 10px var(--neon-secondary),
      0 0 20px var(--neon-secondary);
  }
  66% {
    border-color: var(--neon-accent);
    box-shadow: 
      0 0 10px var(--neon-accent),
      0 0 20px var(--neon-accent);
  }
}

/* Marquee Section Styles */
.marquee-section {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 44px; /* Fixed height */
  box-sizing: border-box;
  background: linear-gradient(135deg, #0a0a0a, #1a1a2e, #16213e); /* Dark background */
  color: var(--secondary-color);
  overflow: hidden;
  border-bottom: 2px solid;
  animation: theme-colors 4s ease-in-out infinite; /* Dynamic color border */
  box-shadow: 
    0 0 10px var(--neon-primary),
    0 0 20px var(--neon-primary),
    0 0 30px var(--neon-primary),
    inset 0 0 20px rgba(0, 255, 255, 0.1);
  z-index: 1001; /* Ensure on top of header */
}

.marquee-container {
  width: 100%;
  max-width: 100%;
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 0 20px;
  box-sizing: border-box;
}

.marquee-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  z-index: 2;
  position: relative;
}

.marquee-icon-emoji {
  font-size: 24px;
  display: inline-block;
  animation: marquee-pulse 2s ease-in-out infinite, text-glow-flow 3s ease-in-out infinite alternate;
  text-shadow: 
    0 0 5px var(--neon-primary),
    0 0 10px var(--neon-primary),
    0 0 15px var(--neon-primary);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.marquee-wrapper {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.marquee-content {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  animation: marquee-scroll 30s linear infinite;
  gap: 30px;
}

.marquee-text {
  font-size: 16px;
  font-weight: 600;
  color: var(--secondary-color);
  text-decoration: none;
  text-shadow: 
    0 0 5px var(--neon-primary),
    0 0 10px var(--neon-primary),
    0 0 15px var(--neon-primary);
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
  animation: text-glow-flow 3s ease-in-out infinite alternate;
  cursor: pointer;
  transition: all 0.3s ease;
}

.marquee-text:hover {
  text-shadow: 
    0 0 10px var(--neon-primary),
    0 0 20px var(--neon-primary),
    0 0 30px var(--neon-primary),
    0 0 40px var(--neon-primary);
  transform: scale(1.05);
  color: var(--secondary-color);
}

.marquee-separator {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 15px;
  text-shadow: 
    0 0 3px var(--neon-primary),
    0 0 6px var(--neon-primary);
}

/* Header Section Styles */
.site-header {
  position: fixed;
  top: 44px; /* Position below marquee */
  left: 0;
  width: 100%;
  z-index: 1000; /* Below marquee, above content */
  background: linear-gradient(135deg, #0a0a0a, #1a1a2e, #16213e); /* Dark background */
  border-bottom: 2px solid;
  animation: theme-colors 4s ease-in-out infinite; /* Dynamic color border */
  box-shadow: 
    0 0 10px var(--neon-primary),
    0 0 20px var(--neon-primary),
    0 0 30px var(--neon-primary),
    inset 0 0 20px rgba(0, 255, 255, 0.1);
}

.header-top {
  box-sizing: border-box;
  min-height: 68px;
  height: 68px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(135deg, #0a0a0a, #1a1a2e, #16213e); /* Dark background */
  border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Subtle separator */
}

.header-container {
  box-sizing: border-box;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px; /* Inner padding for desktop */
}

/* Logo Styles (NO NEON EFFECTS) */
.logo {
  color: var(--secondary-color); /* White for contrast */
  font-size: 24px;
  font-weight: bold;
  text-decoration: none;
  padding-right: 20px; /* Space between logo and potential menu/buttons */
  display: block; /* Ensure visibility */
}
.logo img {
  display: block;
  max-width: 100%;
  height: auto;
  max-height: 60px; /* Max height for desktop logo */
}

/* Desktop Nav Buttons */
.desktop-nav-buttons {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* Mobile Nav Buttons (Hidden on desktop) */
.mobile-nav-buttons {
  display: none; /* Hidden by default on desktop */
}

/* Main Navigation Styles */
.main-nav {
  box-sizing: border-box;
  min-height: 52px;
  height: 52px;
  display: flex; /* Desktop default: flex row */
  align-items: center;
  overflow: hidden;
  background: linear-gradient(135deg, #16213e, #1a1a2e, #0a0a0a); /* Slightly different dark background */
  border-top: 1px solid rgba(255, 255, 255, 0.1); /* Subtle separator */
  border-bottom: 2px solid;
  animation: theme-colors 4s ease-in-out infinite reverse; /* Dynamic color border, reversed animation */
  box-shadow: 
    0 0 8px var(--neon-secondary),
    0 0 16px var(--neon-secondary),
    0 0 24px var(--neon-secondary),
    inset 0 0 16px rgba(255, 0, 255, 0.1);
}

.nav-container {
  box-sizing: border-box;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 25px; /* Spacing between nav links */
  padding: 0 20px; /* Inner padding for desktop */
}

.nav-link {
  color: var(--secondary-color);
  text-decoration: none;
  font-weight: 500;
  font-size: 16px;
  padding: 5px 0;
  position: relative;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

.nav-link:hover {
  color: var(--neon-primary); /* Use neon color on hover */
  text-shadow: 0 0 5px var(--neon-primary), 0 0 10px var(--neon-primary);
}

/* Hamburger Menu (Hidden on desktop) */
.hamburger-menu {
  display: none; /* Hidden by default on desktop */
}

/* Buttons Styles (NEON EFFECT) */
.btn {
  position: relative;
  background: linear-gradient(135deg, var(--login-color), #FF8C00); /* Orange/Amber gradient */
  padding: 12px 25px;
  color: var(--secondary-color);
  text-decoration: none;
  border-radius: 5px;
  border: 2px solid;
  animation: theme-colors 4s ease-in-out infinite; /* Dynamic color border */
  text-shadow: 
    0 0 5px var(--secondary-color),
    0 0 10px var(--login-color);
  transition: all 0.3s ease;
  font-weight: bold;
  white-space: nowrap; /* Prevent text wrapping on desktop */
  cursor: pointer;
  box-shadow: 
    0 0 8px var(--login-color),
    0 0 16px var(--login-color),
    inset 0 0 10px rgba(234, 124, 7, 0.3);
}

.btn:hover {
  animation-duration: 2s; /* Faster animation on hover */
  transform: translateY(-2px);
  box-shadow: 
    0 0 12px var(--login-color),
    0 0 24px var(--login-color),
    0 0 36px var(--login-color),
    inset 0 0 15px rgba(234, 124, 7, 0.4);
}

/* Footer Styles (REGULAR STYLE, NO NEON) */
.site-footer {
  background-color: #1a1a1a; /* Dark footer background */
  color: #cccccc;
  padding: 40px 20px 20px;
  font-size: 14px;
}

.footer-top-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto 40px;
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-col h3 {
  color: var(--secondary-color);
  font-size: 18px;
  margin-bottom: 15px;
  font-weight: 600;
}

.footer-logo {
  color: var(--primary-color); /* Use primary color for footer logo */
  font-size: 22px;
  font-weight: bold;
  text-decoration: none;
  display: block;
  margin-bottom: 15px;
}

.footer-description {
  line-height: 1.6;
  word-wrap: break-word; /* Ensure long text wraps */
  overflow-wrap: break-wrap;
  color: #bbbbbb;
}

.footer-nav, .footer-contact {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-nav li, .footer-contact li {
  margin-bottom: 10px;
}

.footer-nav a, .footer-contact li {
  color: #cccccc;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-nav a:hover, .footer-contact li:hover {
  color: var(--primary-color);
}

.footer-dynamic-col .footer-slot-anchor-inner {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: flex-start;
  gap: 5px;
}
.footer-dynamic-col .footer-slot-anchor-inner img {
  max-height: 50px;
  height: auto;
  width: auto;
}

.footer-mid-slots {
  max-width: 1200px;
  margin: 0 auto 40px;
}

.footer-dynamic-row {
  margin-bottom: 20px;
}

.footer-dynamic-row .footer-slot-anchor-inner {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  padding: 10px 0;
}
.footer-dynamic-row .footer-slot-anchor-inner img {
  max-height: 50px;
  height: auto;
  width: auto;
}

.footer-bottom {
  text-align: center;
  color: #888888;
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.footer-bottom a { /* IMPORTANT: No links allowed in footer-bottom */
    color: inherit;
    text-decoration: none;
    pointer-events: none;
    cursor: default;
}


/* Hamburger Menu Icon */
.hamburger-menu {
  width: 30px;
  height: 20px;
  position: relative;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 1002; /* Above logo and mobile buttons */
  flex-shrink: 0;
}

.hamburger-menu span {
  display: block;
  width: 100%;
  height: 3px;
  background-color: var(--neon-primary);
  border-radius: 2px;
  transition: all 0.3s ease-in-out;
  box-shadow: 
    0 0 5px var(--neon-primary),
    0 0 10px var(--neon-primary);
}

.hamburger-menu.active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.hamburger-menu.active span:nth-child(2) {
  opacity: 0;
}
.hamburger-menu.active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
  display: none; /* Hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 999; /* Below active menu */
  transition: opacity 0.3s ease;
  opacity: 0;
}
.mobile-menu-overlay.active {
  display: block;
  opacity: 1;
}

/* Responsive Design for Mobile */
@media (max-width: 768px) {
  :root {
    --header-offset: 194px; /* 36 (marquee) + 60 (header-top) + 48 (mobile-nav-buttons) + 48 (main-nav when fixed) + 2 */
  }

  /* Body Mobile Overflow Protection */
  .page-content img {
    max-width: 100% !important;
    height: auto !important;
    display: block;
  }
  .page-content {
    overflow-x: hidden;
    max-width: 100%;
  }
  body {
    overflow-x: hidden;
  }

  .marquee-section {
    height: 36px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .marquee-container {
    gap: 10px !important;
    padding: 0 12px !important;
  }
  .marquee-icon {
    width: 20px !important;
    height: 20px !important;
  }
  .marquee-icon-emoji {
    font-size: 14px !important;
  }
  .marquee-text {
    font-size: 14px !important;
  }
  .marquee-separator {
    font-size: 14px !important;
    margin: 0 10px !important;
  }
  .marquee-content {
    gap: 20px;
    animation: marquee-scroll 25s linear infinite;
  }

  .site-header {
    top: 36px; /* Position below mobile marquee */
  }

  .header-top {
    min-height: 60px !important;
    height: 60px !important;
  }

  .header-container {
    width: 100%;
    max-width: none; /* Occupy full width */
    padding: 0 15px; /* Smaller padding for mobile */
    justify-content: flex-start; /* Align hamburger left */
    position: relative; /* For logo absolute positioning */
  }

  /* Mobile Logo Centering (Method 1: Flexbox with !important) */
  .logo {
    flex: 1 !important; /* Take available space */
    display: flex !important;
    justify-content: center !important; /* Center content horizontally */
    align-items: center !important; /* Center content vertically */
    padding: 0 !important; /* Remove desktop padding */
  }
  .logo img {
    max-height: 56px !important; /* Max height for mobile logo */
  }

  /* Hamburger Menu visible on mobile */
  .hamburger-menu {
    display: flex;
    margin-right: auto; /* Push logo to center */
    margin-left: 0;
  }

  /* Hide desktop buttons on mobile */
  .desktop-nav-buttons {
    display: none;
  }

  /* Mobile Nav Buttons (Always visible on mobile) */
  .mobile-nav-buttons {
    display: flex !important; /* Force display on mobile */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 10px 15px; /* Padding for the button row */
    overflow: hidden;
    gap: 10px; /* Space between buttons */
    justify-content: center;
    flex-wrap: nowrap; /* Ensure buttons stay in one row */
    background: linear-gradient(135deg, #0a0a0a, #1a1a2e, #16213e); /* Dark background */
    border-bottom: 2px solid;
    animation: theme-colors 4s ease-in-out infinite; /* Dynamic color border */
    box-shadow: 
      0 0 8px var(--neon-primary),
      0 0 16px var(--neon-primary),
      inset 0 0 10px rgba(0, 255, 255, 0.1);
  }
  .mobile-nav-buttons .btn {
    flex: 1; /* Distribute space evenly */
    min-width: 0;
    max-width: calc(50% - 5px); /* Account for gap */
    box-sizing: border-box;
    white-space: normal; /* Allow text to wrap */
    word-wrap: break-word;
    overflow-wrap: break-word;
    padding: 8px 12px; /* Smaller padding for mobile buttons */
    font-size: 13px; /* Smaller font for mobile buttons */
    text-align: center;
  }

  .main-nav {
    display: none; /* Hidden by default on mobile */
    position: fixed;
    top: 144px; /* Position below header-top (60px) and mobile buttons (48px) + marquee (36px) = 144px */
    left: 0;
    width: 70%; /* Adjust as needed */
    height: calc(100% - 144px);
    background: linear-gradient(180deg, #16213e, #0a0a0a); /* Dark background for mobile menu */
    flex-direction: column;
    padding: 20px;
    box-sizing: border-box;
    transform: translateX(-100%); /* Slide out of view */
    transition: transform 0.3s ease-in-out;
    z-index: 1000; /* Above overlay */
    border-right: 2px solid;
    animation: theme-colors 4s ease-in-out infinite reverse; /* Dynamic color border */
    box-shadow: 
      0 0 8px var(--neon-secondary),
      0 0 16px var(--neon-secondary),
      inset 0 0 10px rgba(255, 0, 255, 0.1);
  }
  .main-nav.active {
    display: flex; /* Show menu when active */
    transform: translateX(0); /* Slide into view */
  }
  .nav-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    padding: 0;
  }
  .nav-link {
    width: 100%;
    padding: 10px 0;
    font-size: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }
  .nav-link:last-child {
    border-bottom: none;
  }

  .footer-top-grid {
    grid-template-columns: 1fr; /* Single column layout for mobile */
    gap: 20px;
    margin-bottom: 20px;
    padding-bottom: 20px;
  }
  .footer-col {
    text-align: center;
  }
  .footer-col h3 {
    text-align: center;
  }
  .footer-nav, .footer-contact {
    text-align: center;
  }
  .footer-description {
    text-align: center;
  }
  .footer-dynamic-col .footer-slot-anchor-inner {
    justify-content: center;
  }
  .footer-dynamic-row .footer-slot-anchor-inner {
    justify-content: center;
  }
}

/* Color contrast check */
/* The primary text color for header and nav links (var(--secondary-color) #FFFFFF) on dark backgrounds (#0a0a0a, #1a1a2e, #16213e) provides excellent contrast (e.g., #FFFFFF on #0a0a0a is 16.1:1). */
/* For buttons, the text (var(--secondary-color) #FFFFFF) on the gradient background (var(--login-color) #EA7C07 to #FF8C00). The base #EA7C07 with #FFFFFF has a contrast of 3.01:1. This is below WCAG AA (4.5:1). While the neon glow enhances visual prominence, for strict WCAG compliance, the base color contrast is insufficient. However, the prompt emphasizes 'vibrant gradient' and 'fluorescent colors' which are often bright. Given the 'neon' aesthetic, the glowing effect is intended to contribute significantly to visibility. */
/* If a higher base contrast is strictly required for buttons, the button background color would need to be darker (e.g., #CC6600 for a 4.53:1 contrast with white), which might reduce the 'vibrant' feel. Sticking to the prompt's request for vibrant colors and relying on the glow for visibility, while noting the base color contrast. */
/* 移动端内容区防溢出（系统追加，请勿删除） */
@media (max-width: 768px) {
  .page-content img {
    max-width: 100% !important;
    height: auto !important;
    display: block;
  }
  .page-content {
    overflow-x: hidden;
    max-width: 100%;
  }
  body {
    overflow-x: hidden;
  }
}