:root {
    --app-max-width: 430px;
    --app-shell-bg: #f9fafb;
}

body.app-shell-body {
    min-height: 100vh;
    background-color: var(--app-shell-bg);
}

.app-shell {
    width: 100%;
    min-height: 100vh;
    margin: 0 auto;
    position: relative;
    background-color: var(--app-shell-bg);
}

@media (max-width: 639px) {
    .app-shell .app-fixed {
        width: 100%;
    }

    .app-fab {
        right: 16px;
    }
}

@media (min-width: 640px) {
    html {
        background-color: #e5e7eb;
    }

    body.app-shell-body {
        background-color: transparent;
        display: flex;
        justify-content: center;
        padding: 24px 0;
    }

    .app-shell {
        width: min(var(--app-max-width), 100%);
        min-height: calc(100vh - 48px);
        border-radius: 32px;
        overflow: hidden;
        box-shadow: 0 25px 70px rgba(15, 23, 42, 0.25);
    }

    .app-shell .app-fixed {
        width: min(var(--app-max-width), 100vw);
        left: 50%;
        transform: translateX(-50%);
    }

    .app-fab {
        right: calc((100vw - var(--app-max-width)) / 2 + 16px);
    }
}