/* lizhen tokens */
:root {
  --bg-primary: #0b0f19;
  --bg-surface: #151b2b;
  --accent-cyan: #00f0ff;
  --accent-red: #ff2a6d;
  --accent-gold: #ffc800;
  --text-primary: #e0e6f1;
  --text-secondary: #5d6b8a;
  --border-color: #1e293b;
  --ok: #34d399;
  --radius-control: 8px;
  --radius-card: 12px;
  --font-sans: "PingFang SC", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;

  --bg: var(--bg-primary);
  --panel: var(--bg-surface);
  --line: var(--border-color);
  --text: var(--text-primary);
  --muted: var(--text-secondary);
  --accent: var(--accent-cyan);
  --danger: var(--accent-red);
  --neon: var(--accent-cyan);
  --atk: var(--accent-red);
  --warn: var(--accent-gold);
}

.bg-main {
  background-color: var(--bg-primary);
  background-image:
    radial-gradient(circle at 20% 40%, rgba(0, 240, 255, 0.04) 0%, transparent 50%),
    radial-gradient(circle at 85% 80%, rgba(255, 42, 109, 0.03) 0%, transparent 45%),
    linear-gradient(rgba(0, 240, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 240, 255, 0.025) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 40px 40px, 40px 40px;
  min-height: 100vh;
  color: var(--text-primary);
  font-family: var(--font-sans);
}

.lz-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: 1.25rem;
  color: var(--text-primary);
  text-decoration: none;
}
.lz-brand img {
  width: 36px;
  height: 36px;
  display: block;
}
.lz-brand span {
  color: var(--accent-cyan);
}

@media (prefers-reduced-motion: reduce) {
  .lz-float,
  .lz-pulse {
    animation: none !important;
  }
}