html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: #0d0f12;
    color: #f8fafc;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

#app {
    display: block;
    width: 100%;
    height: 100%;
    cursor: default;
}

#app:active {
    cursor: none;
}

#loader {
    position: fixed;
    left: 50%;
    top: 50%;
    display: flex;
    width: min(360px, calc(100vw - 32px));
    transform: translate(-50%, -50%);
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid rgb(255 255 255 / 16%);
    border-radius: 8px;
    background: rgb(13 15 18 / 78%);
    box-shadow: 0 18px 60px rgb(0 0 0 / 36%);
    backdrop-filter: blur(16px);
}

#loader[data-hidden='true'] { display: none; }

.loader-mark {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    border: 2px solid rgb(255 255 255 / 22%);
    border-top-color: #f8fafc;
    border-radius: 50%;
    animation: loader-spin 0.9s linear infinite;
}

#loader[data-state='error'] .loader-mark {
    border-color: #f87171;
    animation: none;
}

.loader-copy { min-width: 0; flex: 1; }
.loader-title { color: #fff; font-size: 14px; font-weight: 650; line-height: 1.2; }
.loader-message { margin-top: 3px; color: rgb(248 250 252 / 72%); font-size: 13px; line-height: 1.35; }
.loader-progress { height: 3px; margin-top: 10px; overflow: hidden; border-radius: 999px; background: rgb(255 255 255 / 12%); }
#loader-progress-bar { width: 100%; height: 100%; transform: scaleX(0); transform-origin: left center; background: #8dd7ff; transition: transform 160ms ease; }

@keyframes loader-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}