/* Skeleton & Loading Utilities */

:root { --skeleton-bg: #edf2f7; --skeleton-shimmer: #f8fafc; --topbar-color: #0B80EE; }

.skeleton { position: relative; overflow: hidden; background: var(--skeleton-bg); border-radius: 10px; }
.skeleton.is-line { height: 14px; border-radius: 7px; }
.skeleton.is-rect { border-radius: 10px; }
.skeleton + .skeleton { margin-top: 10px; }
.skeleton.shimmer::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(100deg, transparent 20%, var(--skeleton-shimmer) 50%, transparent 80%);
  animation: shimmer 1.6s cubic-bezier(.4,0,.2,1) infinite;
}

@keyframes shimmer { 100% { transform: translateX(100%); } }

/* Subtle fade-in for skeleton blocks */
.skeleton { animation: sk-fade-in .2s ease; }
@keyframes sk-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Top progress bar */
.top-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 2000; pointer-events: none; opacity: 0; transition: opacity .15s ease; background: transparent; }
.top-progress .bar { width: 0%; height: 100%; background: var(--topbar-color); box-shadow: 0 1px 2px rgba(0,0,0,.08); transition: width .2s ease; }
.top-progress.show { opacity: 1; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .skeleton.shimmer::after { animation: none; }
  .top-progress .bar { transition: none; }
}

/* Small inline spinner for section loading hints */
.spinner-sm {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid #cbd5e1;
  border-top-color: var(--topbar-color);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  vertical-align: -2px;
  margin-right: 6px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Content fade-in when skeleton disappears */
.content-fade-in { animation: contentFade .18s ease both; }
@keyframes contentFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }