/* vboot 前台 · 现代科技风（深色） */
html { scroll-behavior: smooth; }
body { font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
[x-cloak] { display: none !important; }

.mono { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; }

.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* 渐变文字 */
.gradient-text {
  background: linear-gradient(92deg, #818cf8 0%, #c084fc 45%, #22d3ee 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* 科技网格背景 */
.tech-grid {
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
}

/* 光晕 */
.glow { filter: blur(90px); border-radius: 9999px; opacity: .5; }

/* 玻璃卡片 */
.glass { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.glass-hover { transition: border-color .25s, transform .25s, box-shadow .25s; }
.glass-hover:hover { border-color: rgba(129,140,248,.45); transform: translateY(-3px); box-shadow: 0 18px 50px -20px rgba(99,102,241,.45); }

/* 浮动动画 */
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.floaty { animation: floaty 7s ease-in-out infinite; }

/* 细滚动条 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0a0a12; }
::-webkit-scrollbar-thumb { background: #2a2a3a; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #3a3a4f; }

/* 科技感按钮：旋转渐变光边 + 辉光呼吸 */
.btn-tech {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: .6rem;
  padding: 1.05rem 2.6rem; border-radius: 16px;
  font-weight: 600; letter-spacing: .03em; color: #fff; font-size: 1.05rem;
  background: rgba(8, 10, 20, .55); backdrop-filter: blur(8px);
  transition: transform .25s ease, box-shadow .35s ease;
  animation: techGlow 3.2s ease-in-out infinite;
}
.btn-tech::before {
  content: ''; position: absolute; inset: -2px; border-radius: 18px; z-index: -2;
  background: linear-gradient(120deg, #22d3ee, #818cf8, #34d399, #22d3ee);
  background-size: 220% 220%;
  animation: techBorderShift 3.6s ease-in-out infinite;
}
.btn-tech::after {
  content: ''; position: absolute; inset: 0; border-radius: 16px; z-index: -1;
  background: rgba(8, 10, 20, .92);
}
.btn-tech:hover { transform: translateY(-3px) scale(1.02); }
.btn-tech .dot { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 10px #34d399; animation: techBlink 1.6s ease-in-out infinite; }
.btn-tech svg { transition: transform .25s ease; }
.btn-tech:hover svg { transform: translateX(4px); }
@keyframes techSpin { to { transform: rotate(360deg); } }
@keyframes techBorderShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes techGlow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(34,211,238,.25), 0 12px 40px -10px rgba(34,211,238,.45); }
  50% { box-shadow: 0 0 0 1px rgba(129,140,248,.45), 0 18px 60px -8px rgba(99,102,241,.7); }
}
@keyframes techBlink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* 中心暗角，突出按钮 */
.vignette { background: radial-gradient(ellipse 45% 40% at 50% 50%, rgba(6,6,11,.82) 0%, rgba(6,6,11,.35) 45%, transparent 80%); }

/* 动态边框光 */
.ring-grad { position: relative; }
.ring-grad::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(120deg, rgba(129,140,248,.6), rgba(34,211,238,.2), transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}