/* Native hidden must keep its meaning even when a component declares display. */
[hidden] { display: none !important; }
.ui-loading { padding: 24px 0; width: 100%; min-width: 0; }
.ui-loading-label { display: flex; align-items: center; gap: 10px; color: var(--text-soft); font: 12px/1.6 var(--font-ui); margin-bottom: 18px; }
.ui-spinner { display: inline-block; flex: none; width: 15px; height: 15px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: ui-spin .8s linear infinite; }
.ui-skeleton-list { display: grid; gap: 12px; }
.ui-skeleton-card { border: 1px solid var(--border); background: var(--card); border-radius: 10px; padding: 20px; display: grid; gap: 11px; overflow: hidden; }
.ui-skeleton-card > span { display: block; width: 75%; height: 9px; border-radius: 4px; background: linear-gradient(100deg, var(--bg-soft) 20%, var(--border) 48%, var(--bg-soft) 76%); background-size: 250% 100%; animation: ui-shimmer 1.7s ease-in-out infinite; }
.ui-skeleton-card > span:first-child { width: 46%; height: 13px; }
.ui-skeleton-card > span:last-child { width: 60%; }
#network-loading { position: fixed; z-index: 1200; top: 14px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 9px; max-width: calc(100vw - 32px); padding: 10px 15px; border: 1px solid var(--border); border-radius: 9px; background: var(--card); color: var(--text); box-shadow: var(--shadow-2); font: 12px/1.5 var(--font-ui); pointer-events: none; }
/* The review page already explains its pending work; background startup reads
   must not put a second spinner above that page-owned indicator. */
body:has(#commit-reviews-pane:not(.hidden) > .ui-loading, #commit-reviews-pane:not(.hidden) > .cr-loading-refresh, #commit-reviews-pane:not(.hidden) #cr-settings-area > .ui-loading) #network-loading { display: none; }
.dialog-network-loading { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 9px; margin-top: 12px; padding: 11px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text-soft); font: 12px/1.5 var(--font-ui); pointer-events: none; }
#file-list > .ui-loading { padding: 16px; }
.project-grid > .ui-loading { grid-column: 1 / -1; }
#analytics-loading { display: block; padding: 0; }
#analytics-loading > .ui-loading { max-width: 1100px; margin-inline: auto; }
.document-loading { position: absolute; inset: 0; z-index: 8; background: var(--bg); padding: 30px clamp(20px, 4vw, 65px); overflow: hidden; }
#doc-pane { position: relative; }
.cr-loading-refresh { position: sticky; top: 0; z-index: 6; background: var(--bg); padding: 12px 0; margin: 0; }
.cr-loading-refresh .ui-loading-label { margin: 0; }
@keyframes ui-spin { to { transform: rotate(360deg); } }
@keyframes ui-shimmer { from { background-position: 140% 0; } to { background-position: -140% 0; } }
@media (prefers-reduced-motion: reduce) { .ui-spinner, .ui-skeleton-card > span { animation: none; } }