.card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-soft);
  background: rgba(255, 255, 255, 0.01);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
  will-change: transform, border-color, box-shadow;
  transition:
    transform var(--duration-quick) var(--ease-standard),
    border-color var(--duration-quick) var(--ease-standard),
    box-shadow var(--duration-quick) var(--ease-standard);
}

/* Golden edge on hover */
.card:hover {
  transform: translateY(-3px);
  border-color: var(--color-accent-500);
  box-shadow: 0 26px 64px rgba(245, 209, 90, 0.18);
}

.card .meta {
  font-size: 0.9rem;
  color: var(--color-text-400);
}

.card .actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

/* Skeleton state */
.card.skeleton {
  border-style: dashed;
  opacity: 0.7;
}

.sk {
  border-radius: var(--radius-sm);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.06),
    rgba(255, 255, 255, 0.02),
    rgba(255, 255, 255, 0.06)
  );
  background-size: 200% 100%;
  animation: pulse 1.2s ease infinite;
}

.sk-title { height: 1.2rem; width: 60%; }
.sk-meta { height: 0.9rem; width: 90%; }
.sk-btn  { width: 120px; height: 2.2rem; border-radius: var(--radius-pill); }

@keyframes pulse {
  0%   { background-position: 0% 0%;   }
  100% { background-position: -200% 0%; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
  .sk { animation: none; }
}