html {
    height: 100%;
    background-color: #f3f4f6;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #f3f4f6;
    color: #111827;
    /* Fallback for var(--text-main) */
    margin: 0;
    min-height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

#app {
    width: 100%;
}

/* "Hidden until ready" pattern – views start invisible and
   fade in once their setup code has finished. */
#app.view-loading {
    opacity: 0;
}

#app.view-ready {
    opacity: 1;
    transition: opacity 0.25s ease;
}