/* Global layout styles. Page and feature styles live in sibling stylesheet files. */

/* Brand tokens: colors of the Анди logo. Change colors here, not in component styles. */
:root {
    --blue-50: #EEF6FF;
    --blue-100: #DCEBFF;
    --blue-200: #BBD9FF;
    --blue-300: #8BC1FF;
    --blue-400: #4FA0FF;
    --blue-500: #1F84FC;
    --blue-600: #096EFA;
    --blue-700: #0758D6;
    --blue-800: #0A48AB;
    --blue-900: #0E3D85;
    --blue-950: #0B2756;
    --brand-cyan: #00C2F5;
    --brand-blue: #096EFA;
    --brand-indigo: #2731FA;
    --brand-violet: #9346F8;
    --violet-500: #A267FA;
    --brand-gradient: linear-gradient(135deg, #00C2F5 0%, #096EFA 47%, #2731FA 100%);
    --brand-gradient-compact: linear-gradient(135deg, #096EFA, #2731FA);
    --pro-gradient: linear-gradient(135deg, #096EFA, #9346F8);
}


html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

* {
    box-sizing: border-box;
}

.app-screen,
.app-container {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.app-screen {
    min-height: 100vh;
    background:
            radial-gradient(
                    circle at top,
                    #ffffff,
                    #f8fafc 45%
            );
    padding: 16px 14px 120px;
}

.app-container {
    max-width: 1152px;
    width: 100%;
    margin: 0 auto;
}

/* Preserve existing compact layouts below desktop. */
.page-content {
    max-width: 576px;
    margin: 0 auto;
}

.page-content-wide {
    max-width: 768px;
    margin: 0 auto;
}

@media (min-width: 1024px) {
    .page-content,
    .page-content-wide {
        max-width: none;
    }

    /* The shell lines up with the header; the gray panel inside keeps its own inner padding. */
    .event-page-shell {
        padding-left: 0;
        padding-right: 0;
    }

    .page-content-inset {
        padding-left: 32px;
        padding-right: 32px;
        border-radius: 28px;
    }
}