@keyframes matrix-pulse {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 0.35; }
}

/* 网格移动动画：用于模拟数据的流动 */
@keyframes grid-move {
  0% { background-position: 0 0; }
  100% { background-position: 100px 100px; }
}

#ai-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* 确保背景在最底层 */
  /* 基础径向渐变：中心略亮，边缘深邃 */
  background: radial-gradient(circle at center, #1a202c 0%, #0d131f 70%);
}

/* 使用伪元素创建动态网格层 */
#ai-background::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 创建一个微妙的网格/对角线图案 */
  background-image: linear-gradient(0deg, transparent 95%, #3e485e40 98%),
  linear-gradient(90deg, transparent 95%, #3e485e40 98%);
  background-size: 50px 50px;
  opacity: 0.2;
  /* 结合缓慢的移动和轻微的脉冲动画 */
  animation: grid-move 60s linear infinite, matrix-pulse 5s ease-in-out infinite;
}
/* --- AI/Tech Dynamic Background Styles End --- */


body {
  font-family: 'Inter', sans-serif;
  background-color: #0c101a; /* 调整为更深的底色，以突出背景动画 */
  color: #e5e7eb;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 20px; /* Add padding for mobile view */
}
/* Main card optimization */
.main-card {
  background-color: #1a202c; /* Darker main card for contrast */
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.8); /* 增强阴影，让卡片浮动感更强 */
  border-color: #374151; /* Subtle border */
  position: relative; /* 启用 Z 轴定位 */
  z-index: 10; /* 确保卡片在背景动画之上 */
}

/* Custom styles for high-impact buttons using the Amber accent color */
.btn-option {
  transition: all 0.3s ease;
  background: linear-gradient(145deg, #2d3748, #3e485e); /* Enhanced dark gradient */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
  border: 1px solid #4b5563;
}
.btn-option:hover {
  transform: scale(1.05);
  background: #fcd34d; /* Amber background on hover */
  color: #111827; /* DARK text on amber for the whole button */
  border-color: #f59e0b;
  box-shadow: 0 10px 20px rgba(251, 191, 36, 0.7);
}
/* --- FIX: Ensure the inner amber spans also turn dark on hover --- */
.btn-option:hover span {
  color: #111827 !important; /* Force the span text to be dark black/slate */
}
.cta-amber-btn {
  background-color: #f59e0b; /* Amber 600 */
  color: #1f2937;
  font-weight: 700;
  transition: all 0.3s ease;
}
.cta-amber-btn:hover {
  background-color: #fbbf24; /* Lighter amber on hover */
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(251, 191, 36, 0.7);
}
.spinner {
  border-top-color: transparent;
  border-right-color: transparent;
  animation: spin 1s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* Style for the reusable content modal */
#info-modal-content {
  max-height: 80vh; /* Limit modal height */
  overflow-y: auto; /* Enable scrolling for long content */
}
/* Style for footer links */
.footer-link {
  color: #9ca3af; /* Gray text for footer */
  transition: color 0.2s;
}
.footer-link:hover {
  color: #fcd34d; /* Amber on hover */
}