/*
 * Global desktop shell for mobile-first pages
 * Recommended path: /static/css/global-page-shell.css
 */
:root{
    --app-shell-width:480px;
    --page-side-bg:#edf2f8;
    --page-side-ink:#0c1230;
    --page-side-orange:#ff9900;
}

html,
body{
    width:100% !important;
    min-width:100% !important;
    max-width:none !important;
    min-height:100% !important;
    margin:0 !important;
}

body{
    position:relative;
    overflow-x:hidden !important;
    background:var(--page-side-bg) !important;
}

/* Main mobile page container */
.safe{
    width:100% !important;
    max-width:var(--app-shell-width) !important;
    min-height:100vh;
    margin-left:auto !important;
    margin-right:auto !important;
    float:none !important;
    position:relative;
    z-index:2;
}

/* Fixed bottom navigation must follow the centered app shell */
.footer,
.tabbar,
.bottom-nav,
.bottom-bar{
    width:100% !important;
    max-width:var(--app-shell-width) !important;
    left:50% !important;
    right:auto !important;
    transform:translateX(-50%) !important;
    margin-left:0 !important;
    margin-right:0 !important;
    box-sizing:border-box !important;
}

@media (min-width:768px){
    body{
        background:
            radial-gradient(circle at 12% 14%,rgba(255,153,0,.14),transparent 22%),
            radial-gradient(circle at 88% 76%,rgba(12,18,48,.12),transparent 28%),
            linear-gradient(135deg,#f8fafc 0%,#edf2f8 48%,#e8eef7 100%) !important;
        background-attachment:fixed !important;
    }

    body::before,
    body::after{
        content:"";
        position:fixed;
        top:-12vh;
        width:38vw;
        height:124vh;
        pointer-events:none;
        z-index:0;
        opacity:.95;
    }

    body::before{
        left:-10vw;
        background:
            linear-gradient(145deg,transparent 0 38%,rgba(255,255,255,.82) 38% 56%,transparent 56%),
            radial-gradient(ellipse at 35% 30%,rgba(255,153,0,.18),transparent 48%);
        border-radius:0 48% 52% 0;
        transform:rotate(-5deg);
    }

    body::after{
        right:-10vw;
        background:
            linear-gradient(215deg,transparent 0 42%,rgba(255,255,255,.74) 42% 60%,transparent 60%),
            radial-gradient(ellipse at 65% 70%,rgba(12,18,48,.13),transparent 50%);
        border-radius:48% 0 0 52%;
        transform:rotate(5deg);
    }

    .safe{
        box-shadow:0 0 0 1px rgba(12,18,48,.05),0 24px 70px rgba(12,18,48,.16);
        background:#f5f6f8;
    }
}

@media (max-width:767px){
    body::before,
    body::after{
        display:none !important;
    }

    .safe{
        max-width:none !important;
        box-shadow:none !important;
    }

    .footer,
    .tabbar,
    .bottom-nav,
    .bottom-bar{
        max-width:none !important;
    }
}