/* ===== WORLD-CLASS ENHANCEMENTS ===== */
/* Skeleton loading */
.skeleton { background: linear-gradient(90deg, var(--card-bg) 25%, var(--card-hover) 50%, var(--card-bg) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 8px; }
.skeleton-text { height: 16px; margin-bottom: 8px; width: 80%; }
.skeleton-title { height: 24px; margin-bottom: 12px; width: 60%; }
.skeleton-card { height: 200px; border-radius: 16px; }
.skeleton-avatar { width: 48px; height: 48px; border-radius: 50%; }
/* Breadcrumb */
.breadcrumb { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--text-secondary); margin-bottom: 16px; }
.breadcrumb a { color: var(--text-secondary); }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb span { color: var(--text); }
/* Page transitions */
#page-content { animation: fadeSlideIn 0.3s ease; }
@keyframes fadeSlideIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
/* Advanced filter bar */
.filter-bar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; padding: 12px 0; margin-bottom: 12px; }
.filter-bar select, .filter-bar input { min-width: 140px; }
.filter-tag { padding: 6px 14px; border-radius: 20px; background: rgba(201,162,91,0.08); border: 1px solid rgba(201,162,91,0.15); color: var(--text); font-size: 13px; cursor: pointer; transition: all 0.2s; }
.filter-tag:hover, .filter-tag.active { background: rgba(201,162,91,0.18); border-color: var(--gold); color: var(--gold); }
/* Quick stats bar */
.quick-stats { display: flex; gap: 24px; padding: 12px 0; border-bottom: 1px solid var(--border); margin-bottom: 16px; flex-wrap: wrap; }
.quick-stat { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); }
.quick-stat b { color: var(--gold); }
/* Sorting indicator */
.sort-arrow { display: inline-block; transition: transform 0.2s; }
.sort-arrow.desc { transform: rotate(180deg); }
/* Enhanced tooltip */
[data-tooltip] { position: relative; }
[data-tooltip]:hover::after { content: attr(data-tooltip); position: absolute; bottom: 120%; left: 50%; transform: translateX(-50%); background: var(--card-bg); color: var(--text); padding: 6px 12px; border-radius: 6px; font-size: 12px; white-space: nowrap; border: 1px solid var(--border); z-index: 100; }