/* ITMO Deadlines PWA & App Styles */
:root {
    --bg-color: #0F0F12;
    --text-color: #FFFFFF;
    --accent-blue: #0056D2;
    --subtle-text: #8E8E93;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: var(--bg-color);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--text-color);
    user-select: none;
    -webkit-user-select: none;
}

/* Enable virtual keyboard and text selection for Avalonia inputs on mobile */
input, textarea, .avalonia-input-element {
    -webkit-user-select: text !important;
    user-select: text !important;
    touch-action: auto !important;
    font-size: 16px !important; /* Prevent iOS Safari auto-zooming on focus */
}

#out {
    width: 100%;
    height: 100%;
    position: relative;
}

/* Splash screen shown while WebAssembly runtime compiles and boots */
.avalonia-splash {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 99999;
    transition: opacity 350ms cubic-bezier(0.4, 0, 0.2, 1), visibility 350ms ease;
    pointer-events: none;
}

.splash-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.splash-icon {
    width: 96px;
    height: 96px;
    border-radius: 22px;
    box-shadow: 0 12px 32px rgba(0, 86, 210, 0.28);
    animation: splash-pulse 2.2s ease-in-out infinite alternate;
}

@keyframes splash-pulse {
    0% {
        transform: scale(0.98);
        box-shadow: 0 8px 24px rgba(0, 86, 210, 0.2);
    }
    100% {
        transform: scale(1.03);
        box-shadow: 0 16px 40px rgba(0, 86, 210, 0.45);
    }
}

.splash-title {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin: 0;
    color: #FFFFFF;
}

.splash-subtitle {
    font-size: 0.85rem;
    color: var(--subtle-text);
    margin: 0;
}

.splash-progress-bar {
    width: 160px;
    height: 3px;
    background-color: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
    margin-top: 8px;
}

.splash-progress-inner {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 45%;
    background: linear-gradient(90deg, #0056D2, #0091FF);
    border-radius: 999px;
    animation: splash-indeterminate 1.6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes splash-indeterminate {
    0% {
        left: -45%;
    }
    100% {
        left: 100%;
    }
}

/* Avalonia automatically applies .splash-close when first frame renders */
.avalonia-splash.splash-close {
    opacity: 0;
    visibility: hidden;
}