/* Global Styles & CSS Variables */:root {  --primary-color: #26A9E0;  --secondary-color: #FFFFFF;  --login-color: #EA7C07;  --background-color: #FFFFFF;  --black-color: #000000;  /* Neon colors based on theme, with dynamic fallbacks */  --neon-primary: var(--primary-color, #26A9E0); /* Light blue */  --neon-secondary: #00FFFF; /* Cyan */  --neon-accent: #FF00FF; /* Magenta */  --neon-alt-1: #FFFF00; /* Yellow */  --neon-alt-2: #FF0000; /* Red */  --neon-alt-3: #FFA500; /* Orange */    /* Header offset with marquee */  --header-offset: 166px; /* Desktop: 44px (marquee) + 68px (header-top) + 52px (main-nav) + 2px */}body {  font-family: 'Arial', sans-serif;  margin: 0;  padding-top: var(--header-offset); /* Important for fixed header */  background-color: var(--background-color);  color: #333;  line-height: 1.6;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;  overflow-x: hidden; /* Prevent horizontal scroll */}a {  text-decoration: none;  color: inherit;}/* Neon Glow Animations (Dynamic Colors) */@keyframes theme-colors {  0%, 100% {    border-color: var(--neon-primary, #26A9E0);    box-shadow:       0 0 8px var(--neon-primary, #26A9E0),      0 0 16px var(--neon-primary, #26A9E0);  }  33% {    border-color: var(--neon-secondary, #00FFFF);    box-shadow:       0 0 8px var(--neon-secondary, #00FFFF),      0 0 16px var(--neon-secondary, #00FFFF);  }  66% {    border-color: var(--neon-accent, #FF00FF);    box-shadow:       0 0 8px var(--neon-accent, #FF00FF),      0 0 16px var(--neon-accent, #FF00FF);  }}@keyframes rainbow-border {  0% { border-color: #FF0000; box-shadow: 0 0 10px #FF0000, 0 0 20px #FF0000; }  16.6% { border-color: #FFA500; box-shadow: 0 0 10px #FFA500, 0 0 20px #FFA500; }  33.3% { border-color: #FFFF00; box-shadow: 0 0 10px #FFFF00, 0 0 20px #FFFF00; }  50% { border-color: #00FF00; box-shadow: 0 0 10px #00FF00, 0 0 20px #00FF00; }  66.6% { border-color: #0000FF; box-shadow: 0 0 10px #0000FF, 0 0 20px #0000FF; }  83.3% { border-color: #8A2BE2; box-shadow: 0 0 10px #8A2BE2, 0 0 20px #8A2BE2; }  100% { border-color: #FF0000; box-shadow: 0 0 10px #FF0000, 0 0 20px #FF0000; }}@keyframes text-glow-flow {  0% {    text-shadow:       0 0 4px var(--neon-primary, #26A9E0),      0 0 8px var(--neon-primary, #26A9E0),      0 0 12px var(--neon-primary, #26A9E0);    color: #ffffff;  }  50% {    text-shadow:       0 0 4px var(--neon-secondary, #00FFFF),      0 0 8px var(--neon-secondary, #00FFFF),      0 0 12px var(--neon-secondary, #00FFFF);    color: #ffffff;  }  100% {    text-shadow:       0 0 4px var(--neon-accent, #FF00FF),      0 0 8px var(--neon-accent, #FF00FF),      0 0 12px var(--neon-accent, #FF00FF);    color: #ffffff;  }}@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%); }}/* Marquee Section Styles */.marquee-section {  position: fixed;  top: 0;  left: 0;  width: 100%;  height: 44px; /* Desktop fixed height */  box-sizing: border-box;  background: linear-gradient(135deg, #0a0a0a, #1a1a2e, #16213e); /* Dark background */  color: #ffffff;  overflow: hidden;  border-bottom: 2px solid;  animation: theme-colors 4s ease-in-out infinite; /* Dynamic border color */  box-shadow:     0 0 10px var(--neon-primary, #26A9E0),    0 0 20px var(--neon-primary, #26A9E0),    0 0 30px var(--neon-primary, #26A9E0),    inset 0 0 20px rgba(38, 169, 224, 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;  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;  padding-right: 30px; /* Ensure space for seamless loop */}.marquee-text {  font-size: 16px;  font-weight: 600;  color: #ffffff;  text-decoration: none;  animation: text-glow-flow 3s ease-in-out infinite alternate;  line-height: 1.5;  display: inline-block;  vertical-align: middle;  cursor: pointer;  transition: all 0.3s ease;}.marquee-text:hover {  text-shadow:     0 0 8px var(--neon-primary, #26A9E0),    0 0 16px var(--neon-primary, #26A9E0),    0 0 24px var(--neon-primary, #26A9E0),    0 0 32px var(--neon-primary, #26A9E0);  transform: scale(1.05);  color: #ffffff;}.marquee-separator {  font-size: 16px;  color: rgba(255, 255, 255, 0.6);  margin: 0 15px;  text-shadow:     0 0 3px var(--neon-primary, #26A9E0),    0 0 6px var(--neon-primary, #26A9E0);}/* Header Section Styles */.site-header {  position: fixed;  top: 44px; /* Below marquee */  left: 0;  width: 100%;  z-index: 1000;  background: transparent; /* Background for entire header is handled by sub-components */}.header-top {  background: linear-gradient(135deg, #0a0a0a, #1a1a2e, #16213e); /* Dark background */  height: 68px; /* Desktop fixed height */  display: flex;  align-items: center;  box-sizing: border-box;  border-bottom: 2px solid;  animation: theme-colors 4s ease-in-out infinite; /* Dynamic border color */  box-shadow:     0 0 10px var(--neon-alt-1, #FFFF00),    0 0 20px var(--neon-alt-1, #FFFF00),    0 0 30px var(--neon-alt-1, #FFFF00),    inset 0 0 20px rgba(255, 255, 0, 0.1);}.header-container {  max-width: 1200px;  width: 100%;  margin: 0 auto;  display: flex;  justify-content: space-between;  align-items: center;  padding: 0 20px;  box-sizing: border-box;}.logo {  font-size: 28px;  font-weight: bold;  color: var(--secondary-color); /* Regular color for logo */  text-decoration: none;  /* NO NEON EFFECTS FOR LOGO */  transition: color 0.3s ease;}.logo:hover {  color: var(--primary-color);}.desktop-nav-buttons {  display: flex;  gap: 12px;  align-items: center;}.mobile-nav-buttons {  display: none; /* Hidden on desktop */}.btn {  position: relative;  padding: 12px 25px;  color: #ffffff;  text-decoration: none;  border-radius: 5px;  font-weight: 600;  background: linear-gradient(135deg, var(--neon-primary, #26A9E0), var(--neon-secondary, #00FFFF));  border: 2px solid;  animation: theme-colors 4s ease-in-out infinite; /* Dynamic border color */  text-shadow:     0 0 5px #ffffff,    0 0 10px var(--neon-primary, #26A9E0);  transition: all 0.3s ease;  cursor: pointer;  white-space: nowrap; /* Prevent button text from wrapping on desktop */}.btn:hover {  animation-duration: 2s; /* Faster animation on hover */  transform: translateY(-2px) scale(1.02);  box-shadow:     0 0 15px var(--neon-primary, #26A9E0),    0 0 30px var(--neon-primary, #26A9E0),    inset 0 0 15px rgba(38, 169, 224, 0.4);}.main-nav {  background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460); /* Darker gradient for main nav */  height: 52px; /* Desktop fixed height */  display: flex; /* Displayed on desktop */  align-items: center;  box-sizing: border-box;  border-top: 2px solid;  border-bottom: 2px solid;  animation: theme-colors 4s ease-in-out infinite reverse; /* Dynamic border color, reversed animation */  box-shadow:     0 0 10px var(--neon-alt-2, #FF0000),    0 0 20px var(--neon-alt-2, #FF0000),    0 0 30px var(--neon-alt-2, #FF0000),    inset 0 0 20px rgba(255, 0, 0, 0.1);}.nav-container {  max-width: 1200px;  width: 100%;  margin: 0 auto;  display: flex;  justify-content: center;  align-items: center;  padding: 0 20px;  height: 100%;  box-sizing: border-box;  overflow-x: auto; /* Allow horizontal scroll if nav items are too many */  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */  scrollbar-width: none; /* Hide scrollbar for Firefox */  -ms-overflow-style: none; /* Hide scrollbar for IE/Edge */}.nav-container::-webkit-scrollbar {  display: none; /* Hide scrollbar for Chrome/Safari/Opera */}.nav-link {  color: #ffffff;  font-size: 16px;  font-weight: 500;  padding: 10px 15px;  transition: all 0.3s ease;  white-space: nowrap;}.nav-link:hover, .nav-link.active {  color: var(--primary-color);  background-color: rgba(255, 255, 255, 0.1);  border-radius: 3px;  text-shadow: 0 0 5px var(--primary-color);}/* Hamburger Menu (Mobile Only) */.hamburger-menu {  display: none; /* Hidden on desktop */  flex-direction: column;  justify-content: space-around;  width: 30px;  height: 25px;  cursor: pointer;  z-index: 1002;  position: relative;  padding: 5px;  border-radius: 3px;  border: 1px solid transparent;  transition: all 0.3s ease;  animation: theme-colors 4s ease-in-out infinite; /* Dynamic border color */  box-shadow:     0 0 5px var(--neon-primary, #26A9E0),    0 0 10px var(--neon-primary, #26A9E0);}.hamburger-menu.active {  border-color: var(--neon-primary, #26A9E0);  box-shadow:     0 0 8px var(--neon-primary, #26A9E0),    0 0 16px var(--neon-primary, #26A9E0);}.hamburger-menu .bar {  width: 100%;  height: 3px;  background-color: #ffffff;  border-radius: 2px;  transition: all 0.3s ease;  text-shadow: 0 0 3px #ffffff, 0 0 6px var(--neon-primary, #26A9E0);}.hamburger-menu.active .bar:nth-child(1) {  transform: translateY(11px) rotate(45deg);}.hamburger-menu.active .bar:nth-child(2) {  opacity: 0;}.hamburger-menu.active .bar:nth-child(3) {  transform: translateY(-11px) rotate(-45deg);}.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 main-nav */  transition: opacity 0.3s ease;  opacity: 0;}.mobile-menu-overlay.active {  display: block;  opacity: 1;}/* Footer Styles */.site-footer {  background: linear-gradient(135deg, #16213e, #0f3460, #0a0a0a); /* Dark footer background */  color: #ffffff;  padding: 40px 20px 20px;  font-size: 15px;  line-height: 1.8;}.footer-top-grid {  max-width: 1200px;  margin: 0 auto 30px;  display: grid;  grid-template-columns: 2fr repeat(3, 1fr); /* First column wider for logo + description */  gap: 30px;  border-bottom: 1px solid rgba(255, 255, 255, 0.1);  padding-bottom: 30px;}.footer-col h3 {  font-size: 18px;  margin-bottom: 15px;  color: var(--primary-color);  text-transform: uppercase;}.footer-logo {  font-size: 24px;  font-weight: bold;  color: var(--secondary-color);  text-decoration: none;  display: block;  margin-bottom: 15px;}.footer-description {  color: rgba(255, 255, 255, 0.7);  word-wrap: break-word;  overflow-wrap: break-word;}.footer-nav {  list-style: none;  padding: 0;  margin: 0;}.footer-nav li {  margin-bottom: 8px;}.footer-nav a {  color: rgba(255, 255, 255, 0.7);  transition: color 0.3s ease;}.footer-nav a:hover {  color: var(--primary-color);}.footer-dynamic-col .footer-slot-anchor-inner,.footer-dynamic-row .footer-slot-anchor-inner {  display: flex;  flex-wrap: wrap;  flex-direction: row;  align-items: flex-start;  gap: 8px; /* Increased gap for better spacing */  width: 100%;}.footer-dynamic-row {  max-width: 1200px;  margin: 0 auto 20px;  padding-bottom: 20px;  border-bottom: 1px solid rgba(255, 255, 255, 0.1);}.footer-dynamic-row:last-of-type {    border-bottom: none;    margin-bottom: 0;    padding-bottom: 0;}.footer-bottom {  max-width: 1200px;  margin: 0 auto;  text-align: center;  color: rgba(255, 255, 255, 0.5);  padding-top: 20px;  border-top: 1px solid rgba(255, 255, 255, 0.1); /* Ensure border if above section had none */}.footer-bottom p {  margin: 0;}/* Responsive Styles */@media (max-width: 768px) {  :root {    --header-offset: 146px; /* Mobile: 36px (marquee) + 60px (header-top) + 48px (mobile-nav-buttons) + 2px */  }  /* Marquee Mobile */  .marquee-section {    height: 36px !important;  }  .marquee-container {    gap: 10px !important;    padding: 0 12px !important;  }  .marquee-icon {    width: 24px !important;    height: 24px !important;  }  .marquee-icon-emoji {    font-size: 18px !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;  }  /* Header Mobile */  .site-header {    top: 36px; /* Below mobile marquee */  }  .header-top {    height: 60px !important; /* Mobile fixed height */    padding: 0; /* No padding on header-top itself */  }  .header-container {    padding: 0 15px; /* Padding for mobile container */    justify-content: flex-start; /* Align hamburger left */  }  .hamburger-menu {    display: flex; /* Visible on mobile */    margin-right: auto; /* Push logo to center, but still on left */  }  .logo {    flex: 1 !important; /* Take remaining space */    display: flex !important;    justify-content: center !important; /* Center logo */    align-items: center !important;    font-size: 24px; /* Smaller logo text */  }  /* Fallback for image logo if needed, though text logo is used here. */  .logo img {    max-height: 40px; /* Adjust for mobile */  }  .desktop-nav-buttons {    display: none; /* Hidden on mobile */  }  .mobile-nav-buttons {    display: flex !important; /* Visible on mobile */    width: 100%;    max-width: 100%;    box-sizing: border-box;    padding: 10px 15px; /* Padding for the button row */    justify-content: center;    gap: 10px; /* Space between buttons */    background: linear-gradient(135deg, #0f3460, #16213e); /* Dark background */    border-bottom: 1px solid rgba(255,255,255,0.1);    box-shadow: 0 5px 15px rgba(0,0,0,0.3);  }  .mobile-nav-buttons .btn {    flex: 1; /* Distribute space evenly */    min-width: 0;    max-width: calc(50% - 5px); /* Account for gap */    padding: 8px 12px; /* Smaller padding */    font-size: 13px; /* Smaller font size */    text-align: center;    white-space: normal; /* Allow text to wrap */    word-wrap: break-word;    overflow-wrap: break-word;  }    .main-nav {    display: none; /* Hidden by default, toggled by JS */    position: fixed;    top: calc(var(--header-offset) - 48px); /* Position below mobile-nav-buttons */    left: 0;    width: 80%; /* Sidebar width */    height: calc(100% - (var(--header-offset) - 48px)); /* Fill remaining height */    flex-direction: column;    justify-content: flex-start;    align-items: flex-start;    padding: 20px 0;    background: linear-gradient(135deg, #0a0a0a, #1a1a2e); /* Dark sidebar background */    transform: translateX(-100%); /* Start off-screen */    transition: transform 0.3s ease;    box-shadow: 5px 0 15px rgba(0, 0, 0, 0.5);    z-index: 1000; /* Ensure it's above overlay */    border-right: 2px solid;    animation: theme-colors 4s ease-in-out infinite;  }  .main-nav.active {    display: flex; /* Show when active */    transform: translateX(0); /* Slide in */  }  .nav-container {    flex-direction: column;    align-items: flex-start;    padding: 0;    width: 100%;    max-width: none; /* No max-width on mobile */  }  .nav-link {    width: 100%;    padding: 12px 20px;    border-bottom: 1px solid rgba(255, 255, 255, 0.05);  }  .nav-link:last-child {    border-bottom: none;  }  .mobile-menu-overlay.active {    top: 0; /* Cover full screen */  }  /* Footer Mobile */  .site-footer {    padding: 30px 15px 15px;  }  .footer-top-grid {    grid-template-columns: 1fr; /* Single column layout */    gap: 20px;    padding-bottom: 20px;  }  .footer-col h3 {    margin-top: 15px;  }  .footer-col:first-child .footer-description {    margin-bottom: 20px;  }  .footer-dynamic-row {    margin-bottom: 15px;    padding-bottom: 15px;  }  .footer-bottom {    padding-top: 15px;  }  /* General mobile content overflow prevention */  .page-content img {    max-width: 100% !important;    height: auto !important;    display: block;  }  .page-content {    overflow-x: hidden;    max-width: 100%;  }  body {    overflow-x: hidden;  }}
/* 移动端内容区防溢出（系统追加，请勿删除） */
@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;
  }
}