/* ══════════════════════════════════════════════════════════════════
   BASE — reset, body, app, skeleton
══════════════════════════════════════════════════════════════════ */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: 'Inter', sans-serif;
    background: var(--body-bg);
    background-size: cover;
    color: var(--text);
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
}

/* ══════════════════════════════════════════════════════════════════
   MAIN APP
══════════════════════════════════════════════════════════════════ */
#app {
    position: relative;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.5s ease;
}

#app.visible { opacity: 1; }

.skeleton {
    background: linear-gradient(90deg, var(--glass-bg) 25%, var(--glass-bg-strong) 50%, var(--glass-bg) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
    border-radius: 6px;
}

@keyframes shimmer {
    0%   { background-position:  200% 0; }
    100% { background-position: -200% 0; }
}