#app{

    width:100%;

    max-width:430px;

    margin:auto;

    min-height:100vh;

    background:#fff;

    position:relative;

    overflow:hidden;

}

#appHeader{

    display:none;

}

#content{

    min-height:100vh;

}

#mainNav{

    display:none;

}

#mainNav {
    position: fixed;

    z-index: 9000;

    left: 50%;
    bottom: 0;

    width: 100%;
    max-width: 430px;

    height: calc(
        70px + env(safe-area-inset-bottom)
    );

    padding-bottom:
        env(safe-area-inset-bottom);

    display: none;
    align-items: center;

    transform: translateX(-50%);

    border-top: 1px solid #edf0f5;

    background: rgba(255,255,255,.97);

    box-shadow:
        0 -8px 30px rgba(15,23,42,.07);
}

#mainNav .nav-btn {
    position: relative;

    height: 70px;
    flex: 1;

    border: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;

    color: #94a3b8;
    background: transparent;

    cursor: pointer;

    -webkit-tap-highlight-color: transparent;
}

#mainNav .nav-btn i {
    font-size: 21px;
}

#mainNav .nav-btn span {
    font-size: 10px;
    font-weight: 500;
}

#mainNav .nav-btn.active {
    color: var(--primary);
}

#mainNav .nav-btn.active::before {
    content: "";

    position: absolute;

    top: 0;

    width: 34px;
    height: 3px;

    border-radius: 0 0 5px 5px;

    background: var(--primary);
}

/* ==================================================
   GLOBAL APP INTERACTION COMPONENTS
================================================== */


/* ==================================================
   TOAST / SNACKBAR
================================================== */

.app-toast {

    position: fixed;

    z-index: 50000;

    left: 50%;

    bottom:
        calc(
            88px +
            env(safe-area-inset-bottom)
        );

    width:
        calc(100% - 32px);

    max-width: 398px;

    min-height: 54px;

    padding:
        11px 14px;

    display: flex;

    align-items: center;

    gap: 11px;


    border-radius: 16px;


    color: #fff;

    background: #1e293b;


    box-shadow:
        0 14px 35px
        rgba(15, 23, 42, .22);


    opacity: 0;

    visibility: hidden;


    transform:
        translate(
            -50%,
            20px
        );


    transition:
        opacity .25s ease,
        transform .25s ease,
        visibility .25s ease;


    pointer-events: none;

}


.app-toast.show {

    opacity: 1;

    visibility: visible;


    transform:
        translate(
            -50%,
            0
        );

}


.app-toast-icon {

    width: 30px;

    height: 30px;


    flex:
        0 0 30px;


    display: flex;

    align-items: center;

    justify-content: center;


    border-radius: 50%;


    background:
        rgba(
            255,
            255,
            255,
            .16
        );


    font-size: 16px;

}


.app-toast-message {

    flex: 1;


    font-size: 12px;

    font-weight: 500;

    line-height: 1.45;

}


/* Toast Types */

.app-toast.success {

    background: #059669;

}


.app-toast.error {

    background: #dc2626;

}


.app-toast.warning {

    background: #d97706;

}


.app-toast.info {

    background: #2563eb;

}



/* ==================================================
   GLOBAL LOADER
================================================== */

.app-loader-overlay {

    position: fixed;

    z-index: 60000;

    inset: 0;


    display: flex;

    align-items: center;

    justify-content: center;


    padding: 20px;


    background:
        rgba(
            15,
            23,
            42,
            .32
        );


    backdrop-filter:
        blur(3px);

    -webkit-backdrop-filter:
        blur(3px);


    opacity: 0;

    visibility: hidden;


    transition:
        opacity .2s ease,
        visibility .2s ease;


    pointer-events: none;

}


.app-loader-overlay.show {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

}


.app-loader-card {

    min-width: 130px;


    padding:
        23px 25px;


    display: flex;

    flex-direction: column;

    align-items: center;


    border-radius: 21px;


    background: #fff;


    box-shadow:
        0 20px 55px
        rgba(
            15,
            23,
            42,
            .2
        );

}


.app-loader-spinner {

    width: 38px;

    height: 38px;


    border:
        3px solid
        #e2e8f0;


    border-top-color:
        var(
            --primary,
            #2563eb
        );


    border-radius: 50%;


    animation:
        appLoaderSpin
        .75s
        linear
        infinite;

}


.app-loader-message {

    margin-top: 13px;


    color: #475569;


    font-size: 11px;

    font-weight: 500;

}


@keyframes appLoaderSpin {

    to {

        transform:
            rotate(360deg);

    }

}



/* ==================================================
   DIALOG OVERLAY
================================================== */

.app-dialog-overlay {

    position: fixed;

    z-index: 55000;

    inset: 0;


    background:
        rgba(
            15,
            23,
            42,
            .5
        );


    backdrop-filter:
        blur(3px);

    -webkit-backdrop-filter:
        blur(3px);


    opacity: 0;

    visibility: hidden;


    transition:
        opacity .25s ease,
        visibility .25s ease;


    pointer-events: none;

}


.app-dialog-overlay.show {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

}



/* ==================================================
   GLOBAL BOTTOM DIALOG
================================================== */

.app-dialog-sheet {

    position: fixed;

    z-index: 55001;


    left: 50%;

    bottom: 0;


    width: 100%;

    max-width: 430px;


    padding:
        10px
        22px
        calc(
            24px +
            env(
                safe-area-inset-bottom
            )
        );


    border-radius:
        28px
        28px
        0
        0;


    text-align: center;


    background: #fff;


    box-shadow:
        0
        -15px
        50px
        rgba(
            15,
            23,
            42,
            .2
        );


    transform:
        translate(
            -50%,
            110%
        );


    transition:
        transform
        .3s
        cubic-bezier(
            .22,
            1,
            .36,
            1
        );

}


.app-dialog-sheet.show {

    transform:
        translate(
            -50%,
            0
        );

}



/* Sheet Handle */

.app-sheet-handle {

    width: 42px;

    height: 5px;


    margin:
        0
        auto
        22px;


    border-radius: 20px;


    background: #d8dee8;

}



/* Dialog Icon */

.app-dialog-icon {

    width: 60px;

    height: 60px;


    margin:
        0
        auto
        15px;


    display: flex;

    align-items: center;

    justify-content: center;


    border-radius: 50%;


    color:
        var(
            --primary,
            #2563eb
        );


    background: #eff6ff;


    font-size: 26px;

}



/* Dialog Content */

.app-dialog-title {

    margin:
        0
        0
        8px;


    color: #1e293b;


    font-size: 19px;

    font-weight: 700;

}


.app-dialog-message {

    max-width: 320px;


    margin:
        0
        auto
        23px;


    color: #64748b;


    font-size: 12px;

    line-height: 1.65;

}



/* ==================================================
   DIALOG BUTTONS
================================================== */

.app-dialog-actions {

    display: grid;


    grid-template-columns:
        1fr
        1fr;


    gap: 10px;

}


.app-dialog-btn {

    width: 100%;

    height: 49px;


    border: 0;

    border-radius: 14px;


    font-family: inherit;


    font-size: 13px;

    font-weight: 600;


    cursor: pointer;


    -webkit-tap-highlight-color:
        transparent;

}


.app-dialog-btn:active {

    transform:
        scale(.97);

}


.app-dialog-cancel {

    color: #475569;

    background: #f1f5f9;

}


.app-dialog-confirm {

    color: #fff;

    background:
        var(
            --primary,
            #2563eb
        );

}


.app-alert-ok {

    color: #fff;

    background:
        var(
            --primary,
            #2563eb
        );

}



/* ==================================================
   DANGER DIALOG
================================================== */

.app-dialog-sheet.danger
.app-dialog-icon {

    color: #dc2626;

    background: #fee2e2;

}


.app-dialog-sheet.danger
.app-dialog-confirm {

    background: #dc2626;

}



/* ==================================================
   SUCCESS DIALOG
================================================== */

.app-dialog-sheet.success
.app-dialog-icon {

    color: #059669;

    background: #d1fae5;

}


.app-dialog-sheet.success
.app-alert-ok {

    background: #059669;

}



/* ==================================================
   WARNING DIALOG
================================================== */

.app-dialog-sheet.warning
.app-dialog-icon {

    color: #d97706;

    background: #fef3c7;

}



/* ==================================================
   ERROR DIALOG
================================================== */

.app-dialog-sheet.error
.app-dialog-icon {

    color: #dc2626;

    background: #fee2e2;

}


.app-dialog-sheet.error
.app-alert-ok {

    background: #dc2626;

}

body.app-ui-locked {
    overflow: hidden;
    touch-action: none;
}

/* =========================================
   SPA PAGE TRANSITIONS
========================================= */

#content {
    width: 100%;
}

/*
 * Smooth reveal after:
 *
 * 1. HTML loaded
 * 2. CSS loaded
 * 3. JS loaded
 * 4. Page.init() completed
 */

#content.page-loaded {
    animation:
        appPageFadeIn
        0.2s ease-out;
}


@keyframes appPageFadeIn {

    from {
        opacity: 0;
        transform:
            translateY(3px);
    }

    to {
        opacity: 1;
        transform:
            translateY(0);
    }

}

/* =========================================
   PAGE TRANSITION LOADER
========================================= */

.page-transition-loader {
    position: fixed;
    inset: 0;

    z-index: 9998;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #f8f9fd;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transition:
        opacity 0.15s ease,
        visibility 0.15s ease;
}


.page-transition-loader.show {
    opacity: 1;
    visibility: visible;

    pointer-events: auto;
}


.page-transition-spinner {
    width: 36px;
    height: 36px;

    border: 3px solid
        rgba(74, 55, 215, 0.15);

    border-top-color: #4a37d7;

    border-radius: 50%;

    animation:
        pageTransitionSpin
        0.7s linear infinite;
}


@keyframes pageTransitionSpin {

    to {
        transform: rotate(360deg);
    }

}


/* Page reveal */

#content.page-loaded {
    animation:
        appPageFadeIn
        0.2s ease-out;
}


@keyframes appPageFadeIn {

    from {
        opacity: 0;
        transform: translateY(2px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}