/* ==========================================
   APPLICATION LAYOUT
========================================== */

:root {
    --app-content-width: 430px;
    --app-page-padding: 16px;
    --app-header-height: 68px;
    --app-bottom-nav-height: 76px;
}

html {
    min-height: 100%;
    background: #E2E8F0;
}

body {
    min-height: 100vh;
    margin: 0;
    background: #E2E8F0;
    color: var(--text,#0F172A);
}

.app-shell {
    position: relative;
    width: 100%;
    max-width: var(--app-content-width);
    min-height: 100vh;
    margin: 0 auto;
    overflow-x: hidden;
    background: var(--background,#F8FAFC);
    box-shadow: 0 0 40px rgba(15,23,42,.10);
}

.app-container {
    width: 100%;
    max-width: var(--app-content-width);
    margin: 0 auto;
    padding-right: var(--app-page-padding);
    padding-left: var(--app-page-padding);
}

.app-main {
    width: 100%;
    max-width: var(--app-content-width);
    margin: 0 auto;
    padding: 0 var(--app-page-padding) calc( var(--app-bottom-nav-height) + 36px + env(safe-area-inset-bottom) );
}

.app-main--without-navigation {
    padding-bottom: calc( 28px + env(safe-area-inset-bottom) );
}

.app-page {
    width: 100%;
}

@media(max-width:430px) {

    html,
    body {
        background: var(--background,#F8FAFC);
    }

    .app-shell {
        box-shadow: none;
    }
}

@media(max-width:360px) {

    :root {
        --app-page-padding: 14px;
    }
}