:root {   /* Color Scheme */   --primary-color: #11A84E;   --secondary-color: #22C768;   --button-gradient: linear-gradient(180deg, #2AD16F 0%, #13994A 100%);   --card-bg: #11271B;   --background-color: #08160F;   --text-main: #F2FFF6;   --text-secondary: #A7D9B8;   --border-color: #2E7A4E;   --glow-color: #57E38D;   --gold-color: #F2C14E;   --divider-color: #1E3A2A;   --deep-green-color: #0A4B2C;   /* Neon specific dynamic colors - based on primary/secondary/glow */   --neon-primary: var(--glow-color); /* #57E38D */   --neon-secondary: var(--secondary-color); /* #22C768 */   --neon-accent: var(--gold-color); /* #F2C14E */   /* Header offset for fixed header (marquee height + header-top height + main-nav height) */   /* Desktop: Marquee 44px + HeaderTop 68px + MainNav 52px = 164px. Adding 2px buffer = 166px */   --header-offset: 166px; } /* Base styles */ * {   box-sizing: border-box;   margin: 0;   padding: 0; } body {   font-family: 'Arial', sans-serif;   color: var(--text-main);   background-color: var(--background-color);   line-height: 1.6;   padding-top: var(--header-offset); /* Fixed header offset */   overflow-x: hidden; /* Prevent horizontal scroll */ } a {   color: inherit;   text-decoration: none; } ul {   list-style: none; } /* Animations for dynamic neon effects */ @keyframes rainbow-border {   0% { border-color: #ff0000; box-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000; }   16.6% { border-color: #ff8000; box-shadow: 0 0 10px #ff8000, 0 0 20px #ff8000; }   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: #8000ff; box-shadow: 0 0 10px #8000ff, 0 0 20px #8000ff; }   100% { border-color: #ff0000; box-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000; } } @keyframes hue-spin {   0% { filter: hue-rotate(0deg); box-shadow: 0 0 10px var(--neon-primary), 0 0 20px var(--neon-primary); }   100% { filter: hue-rotate(360deg); box-shadow: 0 0 10px var(--neon-primary), 0 0 20px var(--neon-primary); } } @keyframes alternate-colors {   0% { border-color: var(--neon-primary); box-shadow: 0 0 10px var(--neon-primary), 0 0 20px var(--neon-primary); }   100% { border-color: var(--neon-secondary); box-shadow: 0 0 10px var(--neon-secondary), 0 0 20px var(--neon-secondary); } } @keyframes gradient-flow {   0% { background-position: 0% 50%; box-shadow: 0 0 10px var(--neon-primary), 0 0 20px var(--neon-secondary); }   50% { background-position: 100% 50%; box-shadow: 0 0 10px var(--neon-secondary), 0 0 20px var(--neon-accent); }   100% { background-position: 0% 50%; box-shadow: 0 0 10px var(--neon-primary), 0 0 20px var(--neon-secondary); } } @keyframes random-glow {   0%, 100% { border-color: var(--neon-primary); box-shadow: 0 0 20px var(--neon-primary); }   25% { border-color: var(--neon-secondary); box-shadow: 0 0 20px var(--neon-secondary); }   50% { border-color: var(--neon-accent); box-shadow: 0 0 20px var(--neon-accent); }   75% { border-color: var(--glow-color); box-shadow: 0 0 20px var(--glow-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);   } } @keyframes neon-flicker {   0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; box-shadow: 0 0 10px currentColor, 0 0 20px currentColor, 0 0 30px currentColor, inset 0 0 15px currentColor; }   20%, 24%, 55% { opacity: 0.8; box-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor, inset 0 0 10px currentColor; } } @keyframes pulse-glow {   from { box-shadow: 0 0 5px currentColor, 0 0 10px currentColor; }   to { box-shadow: 0 0 15px currentColor, 0 0 30px currentColor, 0 0 45px currentColor; } } @keyframes led-blink {   0%, 50% { opacity: 1; }   51%, 100% { opacity: 0.3; } } @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(--text-main);   }   50% {     text-shadow:        0 0 5px var(--neon-secondary),       0 0 10px var(--neon-secondary),       0 0 15px var(--neon-secondary);     color: var(--text-main);   }   100% {     text-shadow:        0 0 5px var(--neon-accent),       0 0 10px var(--neon-accent),       0 0 15px var(--neon-accent);     color: var(--text-main);   } } /* Marquee Section Styles */ .marquee-section {   position: fixed;   top: 0;   left: 0;   width: 100%;   height: 44px;   box-sizing: border-box;   background: linear-gradient(135deg, #0a0a0a, #1a1a2e, #16213e); /* Dark background */   color: var(--text-main);   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(87, 227, 141, 0.1); /* Using glow-color for inset */   z-index: 1001; } .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)); } @keyframes marquee-pulse {   0%, 100% { transform: scale(1); opacity: 1; }   50% { transform: scale(1.15); opacity: 0.9; } } .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(--text-main);   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(--text-main); } .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); } @keyframes marquee-scroll {   0% { transform: translateX(0); }   100% { transform: translateX(-50%); } } /* Site Header Styles */ .site-header {   position: fixed;   top: 44px; /* Below marquee */   left: 0;   width: 100%;   z-index: 1000;   background: linear-gradient(135deg, #0a0a0a, #1a1a2e, #16213e); /* Dark background */   border-bottom: 2px solid;   animation: theme-colors 4s ease-in-out infinite; /* Dynamic border color */   box-shadow:      0 0 10px var(--neon-primary),     0 0 20px var(--neon-primary),     inset 0 0 10px rgba(87, 227, 141, 0.1); /* Using glow-color for inset */ } .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 var(--divider-color); /* Subtle divider */ } .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; } .logo {   font-size: 24px;   font-weight: bold;   color: var(--text-main); /* Regular color, no neon */   text-decoration: none;   display: block; /* Ensure it's not hidden */ } .logo img {   display: block;   max-width: 100%;   height: auto;   max-height: 60px;   object-fit: contain; } /* NO NEON EFFECTS FOR LOGO */ .logo, .logo * {   text-shadow: none !important;   box-shadow: none !important;   filter: none !important;   animation: none !important; } .desktop-nav-buttons {   display: flex;   gap: 10px;   align-items: center; } .mobile-nav-buttons {   display: none; /* Hidden on desktop */ } .btn {   position: relative;   background: var(--button-gradient);   padding: 12px 25px;   color: var(--text-main);   text-decoration: none;   border-radius: 5px;   border: 2px solid;   animation: theme-colors 4s ease-in-out infinite; /* Dynamic border color */   text-shadow:      0 0 5px var(--text-main),     0 0 10px var(--neon-primary);   transition: all 0.3s ease;   font-weight: bold;   cursor: pointer;   white-space: nowrap; /* Prevent text wrap for desktop buttons */ } .btn:hover {   animation-duration: 2s; /* Faster animation on hover */   transform: translateY(-2px);   box-shadow:      0 0 15px var(--neon-primary),     0 0 30px var(--neon-primary),     inset 0 0 15px rgba(87, 227, 141, 0.3); } .main-nav {   box-sizing: border-box;   min-height: 52px;   height: 52px;   display: flex;   align-items: center;   overflow: hidden;   background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460); /* Darker background for contrast */   border-top: 1px solid var(--divider-color); /* Subtle divider */   border-bottom: 2px solid;   animation: alternate-colors 4s ease-in-out infinite; /* Different dynamic border color */   box-shadow:      0 0 10px var(--neon-secondary),     0 0 20px var(--neon-secondary),     inset 0 0 10px rgba(34, 199, 104, 0.1); /* Using secondary-color for inset */ } .nav-container {   box-sizing: border-box;   width: 100%;   max-width: 1200px;   margin: 0 auto;   height: 100%;   display: flex;   align-items: center;   justify-content: center;   padding: 0 20px;   gap: 25px; /* Spacing between nav links */ } .nav-link {   font-size: 16px;   font-weight: 500;   color: var(--text-main);   padding: 8px 0;   transition: color 0.3s ease, text-shadow 0.3s ease;   white-space: nowrap; } .nav-link:hover, .nav-link.active {   color: var(--glow-color);   text-shadow: 0 0 5px var(--glow-color), 0 0 10px var(--glow-color); } .hamburger-menu {   display: none; /* Hidden on desktop */   background: none;   border: none;   cursor: pointer;   padding: 10px;   position: relative;   z-index: 1002; /* Above logo */ } .hamburger-icon {   display: block;   width: 25px;   height: 3px;   background-color: var(--neon-primary); /* Neon color */   border-radius: 2px;   position: relative;   transition: background-color 0.3s ease;   animation: text-glow-flow 3s ease-in-out infinite alternate; /* Dynamic glow */ } .hamburger-icon::before, .hamburger-icon::after {   content: '';   display: block;   width: 25px;   height: 3px;   background-color: var(--neon-primary); /* Neon color */   border-radius: 2px;   position: absolute;   transition: transform 0.3s ease, top 0.3s ease, animation 0.3s ease;   animation: text-glow-flow 3s ease-in-out infinite alternate; /* Dynamic glow */ } .hamburger-icon::before {   top: -8px; } .hamburger-icon::after {   top: 8px; } .hamburger-menu.active .hamburger-icon {   background-color: transparent;   animation: none; } .hamburger-menu.active .hamburger-icon::before {   top: 0;   transform: rotate(45deg);   animation: none; } .hamburger-menu.active .hamburger-icon::after {   top: 0;   transform: rotate(-45deg);   animation: none; } .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 menu, above content */   transition: opacity 0.3s ease;   opacity: 0; } .mobile-menu-overlay.visible {   display: block;   opacity: 1; } /* Footer Styles */ .site-footer {   background-color: var(--background-color);   color: var(--text-secondary);   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 var(--divider-color); } .footer-col {   display: flex;   flex-direction: column; } .footer-logo {   font-size: 20px;   font-weight: bold;   color: var(--text-main);   margin-bottom: 15px;   text-decoration: none; } .footer-description {   line-height: 1.6;   word-wrap: break-word;   overflow-wrap: break-word;   color: var(--text-secondary); } .footer-heading {   font-size: 16px;   color: var(--text-main);   margin-bottom: 15px;   font-weight: bold; } .footer-nav li {   margin-bottom: 8px; } .footer-nav a {   color: var(--text-secondary);   transition: color 0.3s ease; } .footer-nav a:hover {   color: var(--glow-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-dynamic-row {   max-width: 1200px;   margin: 0 auto 30px;   padding-bottom: 20px;   border-bottom: 1px solid var(--divider-color); } .footer-dynamic-row:last-of-type {   margin-bottom: 0;   border-bottom: none; } .footer-dynamic-row .footer-slot-anchor-inner {   display: flex;   flex-wrap: wrap;   flex-direction: row;   align-items: flex-start;   gap: 8px;   width: 100%; } .footer-dynamic-row .footer-slot-anchor-inner img {   max-height: 50px;   height: auto;   width: auto; } .footer-bottom {   text-align: center;   font-size: 13px;   color: var(--text-secondary);   max-width: 1200px;   margin: 0 auto;   padding-top: 20px; } .footer-bottom a { /* IMPORTANT: No links allowed in footer-bottom */   pointer-events: none;   cursor: default;   text-decoration: none;   color: inherit; } /* Responsive Styles */ @media (max-width: 768px) {   :root {     /* Mobile: Marquee 36px + HeaderTop 60px + MobileNavButtons 48px = 144px. Adding 2px buffer = 146px */     --header-offset: 146px;   }   body {     padding-top: var(--header-offset);   }   /* Mobile Marquee */   .marquee-section {     height: 36px !important;     padding-top: 0 !important;     padding-bottom: 0 !important;   }   .marquee-container {     gap: 10px !important;     padding: 0 12px !important;     height: 100% !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;   }   /* Mobile Header */   .site-header {     top: 36px; /* Below mobile marquee */   }   .header-top {     min-height: 60px !important;     height: 60px !important;   }   .header-container {     width: 100%;     max-width: none; /* No max-width on mobile */     padding: 0 15px;     justify-content: space-between; /* Hamburger left, Logo center, Right empty */   }   .logo {     flex: 1 !important;     display: flex !important;     justify-content: center !important;     align-items: center !important;     font-size: 20px;   }   .logo img {     max-height: 40px !important;   }   .hamburger-menu {     display: block; /* Show hamburger on mobile */     order: -1; /* Move to left */   }     .desktop-nav-buttons {     display: none; /* Hide desktop buttons on mobile */   }   /* Mobile Buttons Section */   .mobile-nav-buttons {     display: flex !important; /* Always visible on mobile */     min-height: 48px;     height: 48px;     width: 100%;     max-width: 100%;     box-sizing: border-box;     padding: 0 15px;     gap: 10px;     justify-content: center;     align-items: center;     background: linear-gradient(135deg, #0f3460, #16213e, #1a1a2e); /* Dark background */     border-bottom: 1px solid var(--divider-color);     box-shadow: 0 2px 5px rgba(0,0,0,0.3);     flex-wrap: nowrap; /* Ensure buttons stay in one line */   }   .mobile-nav-buttons .btn {     flex: 1;     min-width: 0;     max-width: calc(50% - 5px); /* 50% width minus half of gap */     padding: 8px 12px; /* Smaller padding */     font-size: 13px; /* Smaller font size */     text-align: center;     white-space: normal; /* Allow text wrap */     word-wrap: break-word;     overflow-wrap: break-word;   }   /* Mobile Main Navigation */   .main-nav {     display: none; /* Hidden by default, shown by JS */     position: fixed;     top: var(--header-offset); /* Position below fixed header and mobile buttons */     left: 0;     width: 80%; /* Sidebar width */     max-width: 300px;     height: calc(100% - var(--header-offset)); /* Fill remaining height */     flex-direction: column;     align-items: flex-start;     padding: 20px 0;     background: linear-gradient(135deg, #0a0a0a, #1a1a2e, #16213e); /* Dark background */     box-shadow: 2px 0 15px rgba(0, 0, 0, 0.5);     transform: translateX(-100%); /* Off-screen by default */     transition: transform 0.3s ease-in-out;     z-index: 1000; /* Above overlay */     border-right: 2px solid;     animation: theme-colors 4s ease-in-out infinite; /* Dynamic border color */   }   .main-nav.active {     display: flex; /* Show menu */     transform: translateX(0); /* Slide into view */   }   .nav-container {     flex-direction: column;     align-items: flex-start;     padding: 0 20px;     gap: 15px;     width: 100%;     max-width: none; /* No max-width on mobile */   }   .nav-link {     width: 100%;     padding: 10px 0;     border-bottom: 1px solid rgba(255, 255, 255, 0.1);     font-size: 16px;   }   .nav-link:last-child {     border-bottom: none;   }   /* Mobile Footer */   .site-footer {     padding: 30px 15px 15px;   }   .footer-top-grid {     grid-template-columns: 1fr; /* Single column layout for mobile */     gap: 25px;     margin-bottom: 30px;     padding-bottom: 25px;   }   .footer-col:not(:last-child) {     padding-bottom: 20px;     border-bottom: 1px solid var(--divider-color);   }   .footer-col:last-child {     padding-bottom: 0;     border-bottom: none;   }   .footer-heading {     margin-bottom: 10px;   }   .footer-dynamic-row {     margin-bottom: 25px;     padding-bottom: 20px;   }   .footer-bottom {     padding-top: 15px;   }   /* Mobile content overflow prevention */   .page-content img {     max-width: 100% !important;     height: auto !important;     display: block;   }   .page-content {     overflow-x: hidden;     max-width: 100%;   } }
/* 移动端内容区防溢出（系统追加，请勿删除） */
@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;
  }
}