/* Tab Loading Mask */
.tab-loading-container { position: relative; height: 100%; }
.tab-loading-mask { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(255,255,255,0.9); display: flex; flex-direction: column; 
    align-items: center; justify-content: center; z-index: 9999; 
    opacity: 1; transition: opacity 0.3s; 
}
.tab-loading-mask.fade-out { opacity: 0; }
.tab-loading-mask.hidden { display: none; }

/* Loading Animation */
.loading-animation { position: relative; width: 60px; height: 60px; margin-bottom: 15px; }
.loading-spinner { 
    position: absolute; width: 100%; height: 100%; border-radius: 50%; 
    border: 3px solid #f3f3f3; border-top-color: #3498db; 
    animation: spin 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; 
}
.loading-spinner-inner { 
    position: absolute; width: 80%; height: 80%; top: 10%; left: 10%; 
    border-radius: 50%; border: 3px solid #f3f3f3; border-top-color: #e74c3c; 
    animation: spinReverse 1.5s cubic-bezier(0.5, 0, 0.5, 1) infinite; 
}
.loading-text { color: #555; font-size: 14px; font-weight: 500; letter-spacing: 1px; }
.loading-progress { 
    width: 120px; height: 4px; background: #eee; border-radius: 2px; 
    margin-top: 15px; overflow: hidden; 
}
.progress-bar { 
    height: 100%; width: 0%; background: linear-gradient(90deg, #3498db, #2ecc71); 
    transition: width 0.3s; 
}

/* Keyframes */
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes spinReverse { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); } }