/* ============================================================
   Braiden Posting Bot — Admin Panel
   Utilities: flex helpers, animations, empty state, toast
   ============================================================ */

.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.gap-4 { gap: 4px; } .gap-6 { gap: 6px; } .gap-8 { gap: 8px; }
.gap-10 { gap: 10px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-20 { gap: 20px; }
.between { justify-content: space-between; }
.center { align-items: center; }
.wrap { flex-wrap: wrap; }
.muted { color: var(--ink-4); }
.dim { color: var(--ink-3); }
.strong { font-weight: 600; color: var(--ink); }
.mono { font-family: var(--mono); }
.grow { flex: 1; }
.nowrap { white-space: nowrap; }

/* fade/slide entrance — transform only (never animate opacity), so content
   stays visible even if the animation timeline is throttled/frozen */
@keyframes fadeUp { from { transform: translateY(9px); } to { transform: none; } }
.fade-up { animation: fadeUp .32s ease; }

/* shimmer + spin */
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.shimmer {
  background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 50%, var(--surface-3) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.3s ease-in-out infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 1.1s linear infinite; }

/* empty state */
.empty {
  text-align: center; padding: 48px 20px; color: var(--ink-4);
}
.empty .e-ico { width: 52px; height: 52px; border-radius: 14px; background: var(--surface-2); display: grid; place-items: center; margin: 0 auto 14px; color: var(--ink-4); }

/* toast */
@keyframes toastIn { from { transform: translate(-50%, 16px); opacity: .4; } to { transform: translate(-50%, 0); opacity: 1; } }
.toast-pop { animation: toastIn .28s cubic-bezier(.22,.8,.3,1); transform: translateX(-50%); }