.loading-container{display:flex;justify-content:center;align-items:center;min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2);position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999}.loading-container.dark{background:linear-gradient(135deg,#2c3e50,#34495e)}.loading-content{text-align:center;padding:2rem;background:rgba(255,255,255,.95);border-radius:20px;box-shadow:0 20px 40px rgba(0,0,0,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2)}.loading-content.dark{background:rgba(44,62,80,.95);color:var(--white)}.loading-content.small{padding:1rem;min-width:150px}.loading-content.medium{padding:2rem;min-width:200px}.loading-content.large{padding:3rem;min-width:300px}.spinner-wrapper{margin-bottom:1.5rem;display:flex;justify-content:center}.spinner{width:50px;height:50px;border:4px solid #f3f3f3;border-top:4px solid var(--primary-color);border-radius:50%;animation:spin 1s linear infinite}.loading-content.small .spinner{width:30px;height:30px;border-width:3px}.loading-content.large .spinner{width:70px;height:70px;border-width:5px}.loading-message{margin:0;font-size:1.1rem;font-weight:500;color:#666;letter-spacing:.5px}.loading-content.dark .loading-message{color:#ecf0f1}.loading-content.small .loading-message{font-size:.9rem}.loading-content.large .loading-message{font-size:1.3rem}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.loading-container{animation:fadeIn .3s ease-in-out}.loading-content{animation:slideIn .5s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(-20px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}.spinner.pulse{animation:spin 1s linear infinite,pulse 2s ease-in-out infinite alternate}@keyframes pulse{0%{transform:scale(1)}to{transform:scale(1.1)}}.loading-content.logo{background:white}.logo-spinner{width:80px;height:80px;background:url(/images/logo.png) 50% no-repeat;background-size:contain;animation:logoSpin 2s ease-in-out infinite;margin:0 auto 1rem}@keyframes logoSpin{0%,to{transform:scale(1) rotate(0deg)}50%{transform:scale(1.1) rotate(180deg)}}