.app-nav-back {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 2px solid #6C3FFF;
    border-radius: 50%;
    color: #6C3FFF;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(108, 63, 255, 0.12);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 36px;
    z-index: 40;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.app-nav-back svg {
    width: 18px;
    height: 18px;
    display: block;
}

.app-nav-back:hover {
    background: rgba(108, 63, 255, 0.06);
}

.app-nav-back:active {
    transform: scale(0.94);
    background: rgba(108, 63, 255, 0.1);
}

.create-post-header .app-nav-back,
.step-header .app-nav-back {
    width: clamp(28px, 4.2vh, 36px);
    height: clamp(28px, 4.2vh, 36px);
    flex-basis: clamp(28px, 4.2vh, 36px);
}

body[data-app-nav="create"] #createBanner .app-nav-back,
body[data-app-nav="otp"] #createBanner .app-nav-back,
body[data-app-nav="step3"] #step3Card .app-nav-back,
#appNavBackFloat.is-on {
    display: inline-flex;
}

#appNavBackFloat {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 12px);
    left: calc(env(safe-area-inset-left, 0px) + 12px);
    z-index: 100050;
}
