.loading-grid { display: grid; }
.loading-panel { overflow: hidden; }
.loading-body { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(260px, 0.9fr); gap: 16px; padding: 18px; }
.loading-stack,
.loading-side { display: grid; gap: 14px; }
.loading-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.skeleton { position: relative; overflow: hidden; display: block; border-radius: 12px; background: linear-gradient(90deg, rgba(14, 23, 31, 0.95), rgba(20, 33, 42, 0.98), rgba(14, 23, 31, 0.95)); }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(83, 217, 255, 0.14), transparent); animation: skeleton-shimmer 1.25s ease-in-out infinite; }
.skeleton-line { height: 14px; }
.skeleton-line-lg { width: min(520px, 88%); height: 18px; }
.skeleton-line-md { width: 56%; }
.skeleton-line-sm { width: 68%; }
.skeleton-block { min-height: 72px; }
.skeleton-chart { min-height: 320px; }
.skeleton-bar { min-height: 46px; }
.skeleton-chip { min-height: 58px; }

html[data-theme="light"] .loading-panel .skeleton { border-color: rgba(108, 146, 173, 0.22); background: var(--soft-panel); color: var(--text); }

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

@media (max-width: 1200px) {
  .loading-body { grid-template-columns: 1fr; }
}

html[data-theme="light"] .skeleton { background: linear-gradient(90deg, rgba(231, 239, 246, 0.95), rgba(245, 249, 252, 0.98), rgba(231, 239, 246, 0.95)); }
html[data-theme="light"] .skeleton::after { background: linear-gradient(90deg, transparent, rgba(108, 146, 173, 0.16), transparent); }

@media (max-width: 760px) {
  .loading-metrics { grid-template-columns: 1fr; }
}