/* Full screen centering */
.loading-container {
    position: fixed; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    background: #FAFBFC; z-index: 9999;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    .loading-container { background: #0c0c0f; }
    .loading-text { color: #6b6b78; }
}

/* Logo + spinner wrapper */
.loading-logo-wrap {
    width: 92px; height: 92px;
    position: relative;
    display: grid; place-items: center;
}

/* Logo */
.loading-logo {
    width: 56%; height: 56%;
    background-image: url('../resources/images/appicon.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    animation: logo-breathe 2.4s ease-in-out infinite;
}

/* Elegant thin spinner ring */
.loading-logo-wrap::before {
    content: "";
    position: absolute; inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(17, 17, 27, 0.06);   /* faint track */
    border-top-color: #5b67f1;                   /* accent arc */
    animation: spin 0.9s cubic-bezier(0.5, 0.15, 0.4, 0.85) infinite;
}
@media (prefers-color-scheme: dark) {
    .loading-logo-wrap::before {
        border-color: rgba(255, 255, 255, 0.07);
        border-top-color: #7a86ff;
    }
}

/* Text */
.loading-text {
    margin-top: 26px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: #9a9aa5;
    font-weight: 600;
    animation: text-fade 2.4s ease-in-out infinite;
}

/* Animations */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes logo-breathe {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.04); opacity: .9; }
}
@keyframes text-fade {
    0%, 100% { opacity: .55; }
    50%      { opacity: 1; }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .loading-logo-wrap::before,
    .loading-logo,
    .loading-text { animation: none; }
}