footer { margin-top: auto; padding: 25px; background-color: #f8f9fa; text-align: center; } #footer-text { margin: -5px; font-family:monospace; font-size: small; } #footer-copy { margin: -5px; font-family:monospace; font-size: smaller; padding-top: 10px; } #copy { text-decoration: none; } /* Simple, clean loading indicator (no spinner spam) */ .loading-indicator { display: flex; justify-content: center; align-items: center; gap: 0.35rem; padding: 2rem 0; } .loading-dots { display: inline-flex; gap: 0.15rem; } .loading-dots span { display: inline-block; opacity: 0.2; transform: translateY(-1px); animation: loading-dot 1.1s infinite ease-in-out; } .loading-dots span:nth-child(2) { animation-delay: 0.15s; } .loading-dots span:nth-child(3) { animation-delay: 0.30s; } @keyframes loading-dot { 0%, 80%, 100% { opacity: 0.2; } 40% { opacity: 1; } } /* Full-page loader overlay (blur + progress bar) */ body.page-loading { overflow: hidden; } .page-loader-overlay { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: opacity 200ms ease; opacity: 1; } .page-loader-overlay.page-loader-hide { opacity: 0; pointer-events: none; } .page-loader-card { width: min(520px, 92vw); background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 16px; padding: 18px 18px 14px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12); } .page-loader-title { margin: 0 0 10px 0; font-weight: 700; font-size: 1rem; color: #111; } .page-loader-subtitle { margin: 0 0 12px 0; font-size: 0.9rem; color: rgba(0, 0, 0, 0.7); } .page-loader-progress { height: 10px; border-radius: 999px; overflow: hidden; background: rgba(0, 0, 0, 0.08); } .page-loader-bar { height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, #ff4d4d 0%, #ffb200 50%, #4cd964 100%); transition: width 220ms ease; } .page-loader-actions { margin-top: 12px; display: flex; justify-content: flex-end; gap: 10px; }