* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  width: 100%; height: 100%; font-family: Arial, sans-serif;
  background: url('http://jiduo.hostingem.ru/1.jpg') center/cover no-repeat fixed;
}

body::before {
  content: ""; position: fixed; inset: 0;
  background: rgba(255,255,255,0.85); z-index: -1;
}

.banner-full {
  color: #48c0a4; font-size: clamp(24px, 6vw, 40px); font-weight: bold;
  padding: 20px 16px; text-align: center;
}

.marquee-full {
  padding: 10px 16px; margin: 0 8%; overflow: hidden; text-align: center;
}

.marquee-text {
  display: inline-block; white-space: nowrap; font-weight: bold;
  font-size: clamp(18px, 5vw, 32px);
  background: linear-gradient(90deg, #ff4d4d, #ffcc00, #00e676, #40c4ff, #ff4d4d);
  background-size: 400% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  animation: shimmerText 6s linear infinite, scroll-left 12s linear infinite;
}

#interface-list {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  max-width: 1200px; margin: 20px auto; padding: 0 16px;
}

/* 玻璃质感：趋向透明 */
.grid-item, .boxed-link {
  display: flex; justify-content: center; align-items: center;
  border-radius: 12px; 
  border: 1px solid rgba(255, 77, 255, 0.2); 
  background: rgba(255, 255, 255, 0.08); 
  backdrop-filter: blur(2px); 
  -webkit-backdrop-filter: blur(2px);
  transition: transform 0.2s;
}

.grid-item { aspect-ratio: 1 / 1; cursor: pointer; position: relative; overflow: hidden; }

/* 变色文字：初始即定义颜色，彻底解决黑色启动问题 */
.glow-text {
  font-weight: 800;
  color: #ff4d4d; /* 初始显示红色 */
  text-shadow: 0 0 8px rgba(255,77,77,0.7);
  animation: glowAnimation 4s infinite ease-in-out;
}

.grid-item span { font-size: clamp(18px, 4.5vw, 30px); }

.grid-item:active { transform: scale(0.92); background: rgba(255, 255, 255, 0.2); }

.footer {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  max-width: 960px; margin: 30px auto; padding: 0 16px;
}

.boxed-link { padding: 12px 2px; text-decoration: none; border: 1px solid rgba(0,0,0,0.03); cursor: pointer; }
.boxed-link span { font-size: 14px; }

/* 变色动画关键帧 */
@keyframes glowAnimation {
  0%, 100% { color: #ff4d4d; text-shadow: 0 0 10px rgba(255,77,77,0.7); }
  25% { color: #ffcc00; text-shadow: 0 0 10px rgba(255,204,0,0.7); }
  50% { color: #00e676; text-shadow: 0 0 10px rgba(0,230,118,0.7); }
  75% { color: #40c4ff; text-shadow: 0 0 10px rgba(64,196,255,0.7); }
}

.toast {
  position: fixed; top: 15%; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,0.85); color: #fff; padding: 10px 25px;
  border-radius: 20px; font-size: 18px; z-index: 9999; opacity: 0; transition: 0.3s;
}

@keyframes shimmerText { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes scroll-left { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } }
@keyframes ripple { to { transform: scale(4); opacity: 0; } }