.mobile-app-topbar,
.mobile-bottom-nav,
.mobile-more-sheet,
.mobile-nav-backdrop {
    display: none;
}

@media (max-width: 768px) {
    body.has-user {
        padding-bottom: calc(92px + env(safe-area-inset-bottom));
    }

    body.dashboard-surface.has-user .app-shell {
        padding: 0;
    }

    body.has-user .desktop-app-topbar {
        display: none !important;
    }

    body.has-user .mobile-app-topbar {
        position: sticky;
        top: 8px;
        z-index: 18;
        width: 100%;
        min-height: 60px;
        margin: 0 0 10px;
        padding: 8px 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        direction: ltr;
        border: 1px solid rgba(124, 181, 246, .13);
        border-radius: 18px;
        background: linear-gradient(180deg, rgba(10, 23, 41, .96), rgba(6, 15, 28, .97));
        box-shadow: 0 16px 40px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255,255,255,.03);
        backdrop-filter: blur(18px);
    }

    body.has-user .mobile-app-topbar-actions {
        display: flex;
        direction: rtl;
        align-items: center;
        gap: 6px;
    }

    body.has-user .mobile-app-topbar-actions > a {
        width: 36px;
        height: 36px;
        display: grid;
        place-items: center;
        border: 1px solid rgba(129, 180, 239, .11);
        border-radius: 11px;
        background: rgba(255,255,255,.028);
        color: #dbeaff;
        text-decoration: none;
        transition: transform .18s ease, background .18s ease, border-color .18s ease;
    }

    body.has-user .mobile-app-topbar-actions > a:active {
        transform: scale(.92);
        background: rgba(255,255,255,.055);
        border-color: rgba(129, 180, 239, .2);
    }

    body.has-user .mobile-app-topbar-actions .icon-svg {
        width: 16px;
        height: 16px;
    }

    body.has-user .mobile-app-topbar-user {
        min-width: 0;
        direction: rtl;
        display: flex;
        align-items: center;
        gap: 9px;
        color: inherit;
        text-decoration: none;
    }

    body.has-user .mobile-app-topbar-copy {
        min-width: 0;
        display: grid;
        gap: 2px;
        text-align: right;
    }

    body.has-user .mobile-app-topbar-copy strong,
    body.has-user .mobile-app-topbar-copy small {
        max-width: 145px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.has-user .mobile-app-topbar-copy strong {
        color: #f5f8ff;
        font-size: .74rem;
    }

    body.has-user .mobile-app-topbar-copy small {
        color: #7f96b2;
        font-size: .59rem;
    }

    body.has-user .mobile-app-topbar-avatar {
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
        display: grid;
        place-items: center;
        border: 1px solid rgba(129, 180, 239, .14);
        border-radius: 50%;
        background: rgba(255,255,255,.045);
        color: #9dbcf0;
    }

    body.has-user .mobile-app-topbar-avatar .icon-svg {
        width: 16px;
        height: 16px;
    }

    .mobile-bottom-nav {
        position: fixed;
        right: 10px;
        left: 10px;
        bottom: max(8px, env(safe-area-inset-bottom));
        z-index: 90;
        height: 68px;
        padding: 5px;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        align-items: stretch;
        border: 1px solid rgba(124, 181, 246, .14);
        border-radius: 20px;
        background: linear-gradient(180deg, rgba(10, 23, 41, .96), rgba(6, 14, 27, .98));
        box-shadow: 0 22px 60px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.035);
        backdrop-filter: blur(22px);
        overflow: hidden;
    }

    .mobile-bottom-nav > a,
    .mobile-bottom-nav > button {
        position: relative;
        z-index: 2;
        min-width: 0;
        border: 0;
        outline: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        padding: 4px 2px;
        border-radius: 15px;
        background: transparent;
        color: #8097b6;
        text-decoration: none;
        font: inherit;
        cursor: pointer;
        transition: color .2s ease, transform .2s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-bottom-nav > a:active,
    .mobile-bottom-nav > button:active {
        transform: scale(.92);
    }

    .mobile-bottom-nav > a.is-active,
    .mobile-bottom-nav > button.is-active {
        color: #61b8ff;
    }

    .mobile-bottom-nav i,
    .mobile-bottom-nav .icon-svg {
        width: 18px;
        height: 18px;
        display: inline-flex;
    }

    .mobile-bottom-nav span:not(.mobile-nav-indicator) {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: .59rem;
        line-height: 1;
    }

    .mobile-bottom-nav .mobile-bottom-create i {
        width: 24px;
        height: 24px;
        margin-top: -2px;
        padding: 5px;
        border: 1px solid rgba(76, 151, 255, .28);
        border-radius: 10px;
        background: rgba(46, 126, 238, .16);
        box-sizing: content-box;
    }

    .mobile-bottom-nav .mobile-bottom-create .icon-svg {
        width: 24px;
        height: 24px;
    }

    .mobile-nav-indicator {
        position: absolute;
        z-index: 1;
        top: 5px;
        left: 5px;
        width: 0;
        height: calc(100% - 10px);
        border: 1px solid rgba(83, 159, 255, .15);
        border-radius: 15px;
        background: linear-gradient(180deg, rgba(51, 133, 238, .13), rgba(37, 91, 172, .055));
        box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
        opacity: 0;
        transform: translate3d(0,0,0);
        transition: transform .28s cubic-bezier(.2,.75,.25,1), width .28s cubic-bezier(.2,.75,.25,1), opacity .18s ease;
        pointer-events: none;
    }

    .mobile-nav-backdrop {
        position: fixed;
        inset: 0;
        z-index: 98;
        display: block;
        background: rgba(1, 7, 14, .58);
        backdrop-filter: blur(4px);
        opacity: 0;
        visibility: hidden;
        transition: opacity .22s ease, visibility .22s ease;
    }

    .mobile-more-sheet {
        position: fixed;
        right: 10px;
        left: 10px;
        bottom: calc(84px + env(safe-area-inset-bottom));
        z-index: 99;
        display: block;
        padding: 10px 12px 14px;
        border: 1px solid rgba(124, 181, 246, .15);
        border-radius: 24px;
        background: linear-gradient(180deg, rgba(12, 27, 46, .99), rgba(7, 16, 29, .995));
        box-shadow: 0 28px 80px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.035);
        transform: translateY(calc(100% + 110px)) scale(.97);
        transform-origin: center bottom;
        opacity: 0;
        visibility: hidden;
        transition: transform .3s cubic-bezier(.18,.82,.2,1), opacity .22s ease, visibility .3s ease;
    }

    body.mobile-more-open .mobile-nav-backdrop {
        opacity: 1;
        visibility: visible;
    }

    body.mobile-more-open .mobile-more-sheet {
        transform: translateY(0) scale(1);
        opacity: 1;
        visibility: visible;
    }

    .mobile-more-sheet-handle {
        width: 42px;
        height: 4px;
        margin: 1px auto 10px;
        border-radius: 999px;
        background: rgba(155, 185, 222, .25);
    }

    .mobile-more-sheet-head {
        min-height: 38px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 0 2px 8px;
    }

    .mobile-more-sheet-head strong {
        color: #f4f8ff;
        font-size: .86rem;
    }

    .mobile-more-sheet-head button {
        width: 32px;
        height: 32px;
        border: 1px solid rgba(129,180,239,.1);
        border-radius: 10px;
        background: rgba(255,255,255,.03);
        color: #b5c9e4;
        font-size: 1.25rem;
        line-height: 1;
    }

    .mobile-more-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
    }

    .mobile-more-grid a {
        min-width: 0;
        min-height: 76px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 7px;
        padding: 9px 5px;
        border: 1px solid rgba(129,180,239,.08);
        border-radius: 15px;
        background: rgba(255,255,255,.025);
        color: #dce9fb;
        text-decoration: none;
        transition: transform .18s ease, background .18s ease, border-color .18s ease;
    }

    .mobile-more-grid a:active {
        transform: scale(.94);
        background: rgba(255,255,255,.05);
        border-color: rgba(129,180,239,.16);
    }

    .mobile-more-grid a.is-danger {
        color: #ff9eaa;
    }

    .mobile-more-grid i,
    .mobile-more-grid .icon-svg {
        width: 20px;
        height: 20px;
        display: inline-flex;
    }

    .mobile-more-grid span {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: .64rem;
    }

    body.mobile-page-enter .main-content,
    body.mobile-page-enter .dashboard-main-surface {
        animation: mobilePageEnter .32s cubic-bezier(.2,.75,.25,1) both;
    }

    body.mobile-page-leave .main-content,
    body.mobile-page-leave .dashboard-main-surface {
        animation: mobilePageLeave .16s ease both;
        pointer-events: none;
    }


    body.has-user .mobile-app-topbar-actions > a.mobile-app-topbar-tickets {
        position: relative;
        overflow: visible;
    }

    .mobile-app-ticket-badge {
        position: absolute;
        top: -7px;
        right: -7px;
        z-index: 3;
        min-width: 19px;
        height: 19px;
        padding: 0 5px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 2px solid #08182a;
        border-radius: 999px;
        background: linear-gradient(180deg, #ff526a, #e92e49);
        box-shadow: 0 5px 14px rgba(234, 46, 73, .38);
        color: #fff;
        font-family: Arial, sans-serif;
        font-size: 10px;
        font-weight: 800;
        line-height: 1;
    }

    .mobile-app-ticket-badge[hidden] {
        display: none !important;
    }

    body.has-user .mobile-app-topbar-tickets.has-ticket-count {
        border-color: rgba(255, 93, 116, .2);
        background: linear-gradient(180deg, rgba(255, 82, 106, .08), rgba(255, 255, 255, .025));
    }

    .proof-media-modal[hidden] {
        display: none !important;
    }

    .proof-media-modal:not([hidden]) {
        position: fixed !important;
        inset: 0 !important;
        z-index: 5000 !important;
        width: 100vw !important;
        height: 100dvh !important;
        padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .proof-media-modal .proof-media-backdrop {
        position: fixed !important;
        inset: 0 !important;
        background: radial-gradient(circle at 50% 18%, rgba(84, 143, 255, .18), transparent 34%), rgba(1, 6, 14, .9) !important;
        backdrop-filter: blur(16px) saturate(1.08) !important;
    }

    .proof-media-modal .proof-media-dialog {
        position: relative !important;
        inset: auto !important;
        z-index: 1 !important;
        width: min(100%, 560px) !important;
        height: min(82dvh, 720px) !important;
        max-height: calc(100dvh - max(24px, env(safe-area-inset-top)) - max(24px, env(safe-area-inset-bottom))) !important;
        margin: 0 !important;
        padding: 9px !important;
        display: block !important;
        overflow: hidden !important;
        border: 1px solid rgba(151, 193, 242, .16) !important;
        border-radius: 26px !important;
        background: linear-gradient(180deg, rgba(14, 28, 48, .98), rgba(4, 11, 22, .995)) !important;
        box-shadow: 0 30px 90px rgba(0, 0, 0, .58), inset 0 1px 0 rgba(255, 255, 255, .05) !important;
    }

    .proof-media-modal .proof-media-dialog::before {
        content: '';
        position: absolute;
        inset: 0 0 auto;
        height: 110px;
        pointer-events: none;
        background: radial-gradient(circle at 50% -20%, rgba(89, 160, 255, .18), transparent 65%);
        z-index: 0;
    }

    .proof-media-modal .proof-media-toolbar {
        position: absolute !important;
        top: 17px !important;
        left: 17px !important;
        right: auto !important;
        z-index: 6 !important;
        width: auto !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .proof-media-modal .proof-media-close {
        position: relative !important;
        inset: auto !important;
        width: 43px !important;
        min-width: 43px !important;
        height: 43px !important;
        min-height: 43px !important;
        padding: 0 !important;
        display: grid !important;
        place-items: center !important;
        overflow: hidden !important;
        border: 1px solid rgba(255, 255, 255, .14) !important;
        border-radius: 14px !important;
        background: rgba(7, 15, 27, .78) !important;
        box-shadow: 0 10px 28px rgba(0, 0, 0, .3) !important;
        color: transparent !important;
        font-size: 0 !important;
        backdrop-filter: blur(12px) !important;
    }

    .proof-media-modal .proof-media-close::before {
        content: '×';
        color: #fff;
        font-family: Arial, sans-serif;
        font-size: 27px;
        font-weight: 300;
        line-height: 1;
        transform: translateY(-1px);
    }

    .proof-media-modal .proof-media-stage {
        position: relative !important;
        z-index: 1 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 8px !important;
        display: grid !important;
        place-items: center !important;
        overflow: hidden !important;
        border: 1px solid rgba(255, 255, 255, .065) !important;
        border-radius: 20px !important;
        background: radial-gradient(circle at center, rgba(70, 126, 226, .12), transparent 48%), #020914 !important;
        box-sizing: border-box !important;
    }

    .proof-media-modal .proof-media-stage img,
    .proof-media-modal .proof-media-stage video {
        width: auto !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 100% !important;
        margin: auto !important;
        display: block !important;
        object-fit: contain !important;
        border-radius: 14px !important;
        box-shadow: 0 18px 48px rgba(0, 0, 0, .34) !important;
    }

    .proof-media-modal .proof-media-caption {
        display: none !important;
    }

    body.proof-media-open {
        overflow: hidden !important;
        overscroll-behavior: none;
    }

    body.proof-media-open .mobile-bottom-nav,
    body.proof-media-open .mobile-app-topbar {
        pointer-events: none;
    }

    body.mobile-more-open {
        overflow: hidden;
    }

    @keyframes mobilePageEnter {
        from { opacity: 0; transform: translateY(10px) scale(.992); }
        to { opacity: 1; transform: translateY(0) scale(1); }
    }

    @keyframes mobilePageLeave {
        from { opacity: 1; transform: translateY(0) scale(1); }
        to { opacity: .32; transform: translateY(7px) scale(.995); }
    }
}

@media (max-width: 390px) {
    .mobile-bottom-nav {
        right: 7px;
        left: 7px;
    }

    .mobile-more-sheet {
        right: 7px;
        left: 7px;
    }

    .mobile-more-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body.has-user .mobile-app-topbar-copy strong,
    body.has-user .mobile-app-topbar-copy small {
        max-width: 112px;
    }
}

@media (max-width: 768px) {
    .mobile-more-sheet {
        padding: 10px 12px 14px;
        border-radius: 26px;
        background:
            radial-gradient(circle at 12% 0%, rgba(60, 131, 232, .16), transparent 15rem),
            linear-gradient(180deg, rgba(12, 27, 46, .995), rgba(6, 15, 28, .998));
    }

    .mobile-more-sheet-head {
        min-height: 46px;
        padding: 0 2px 9px;
    }

    .mobile-more-sheet-head > div {
        display: grid;
        gap: 2px;
    }

    .mobile-more-sheet-head strong {
        font-size: .9rem;
    }

    .mobile-more-sheet-head span {
        color: #728aa8;
        font-size: .58rem;
    }

    .mobile-more-sheet-head button {
        width: 34px;
        height: 34px;
        border-radius: 11px;
        font-size: 1.15rem;
    }

    .mobile-more-profile {
        min-height: 72px;
        display: flex;
        align-items: center;
        gap: 11px;
        padding: 10px 11px;
        margin-bottom: 11px;
        border: 1px solid rgba(129,180,239,.1);
        border-radius: 17px;
        background: linear-gradient(145deg, rgba(47, 117, 219, .1), rgba(255,255,255,.025));
        color: inherit;
        text-decoration: none;
    }

    .mobile-more-profile-avatar {
        width: 42px;
        height: 42px;
        flex: 0 0 42px;
        display: grid;
        place-items: center;
        border: 1px solid rgba(105, 166, 240, .18);
        border-radius: 50%;
        background: rgba(50, 123, 227, .1);
        color: #93c2ff;
    }

    .mobile-more-profile-avatar .icon-svg {
        width: 18px;
        height: 18px;
    }

    .mobile-more-profile-copy {
        min-width: 0;
        flex: 1 1 auto;
        display: grid;
        gap: 3px;
    }

    .mobile-more-profile-copy strong {
        direction: ltr;
        text-align: right;
        color: #f6f9ff;
        font-size: .78rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-more-profile-copy small {
        color: #7890ad;
        font-size: .58rem;
    }

    .mobile-more-profile-arrow {
        width: 30px;
        height: 30px;
        flex: 0 0 30px;
        display: grid;
        place-items: center;
        border-radius: 10px;
        background: rgba(255,255,255,.03);
        color: #85afe5;
        font-size: .8rem;
    }

    .mobile-more-section-label {
        margin: 0 3px 7px;
        color: #6f86a3;
        font-size: .57rem;
        font-weight: 800;
    }

    .mobile-more-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .mobile-more-grid a {
        min-height: 74px;
        display: grid;
        grid-template-columns: 35px minmax(0, 1fr);
        grid-template-rows: auto auto;
        align-items: center;
        justify-content: stretch;
        gap: 2px 9px;
        padding: 10px;
        border-radius: 16px;
        text-align: right;
    }

    .mobile-more-grid a i {
        grid-row: 1 / 3;
        width: 35px;
        height: 35px;
        display: grid;
        place-items: center;
        border: 1px solid rgba(105, 166, 240, .12);
        border-radius: 11px;
        background: rgba(50, 123, 227, .075);
        color: #8dbbfa;
    }

    .mobile-more-grid a i .icon-svg,
    .mobile-more-grid a > .icon-svg {
        width: 17px;
        height: 17px;
    }

    .mobile-more-grid a > span {
        align-self: end;
        font-size: .66rem;
        color: #e1ecfb;
    }

    .mobile-more-grid a > small {
        align-self: start;
        color: #7188a5;
        font-size: .54rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-more-grid a:active {
        transform: scale(.965);
    }
}

@media (max-width: 390px) {
    .mobile-more-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* v5 navigation refinements */
@media (max-width: 768px) {
    body.has-user .mobile-app-topbar-actions > a.mobile-app-topbar-logout {
        color: #ff9aa6;
        border-color: rgba(255, 91, 108, .2);
        background: rgba(194, 49, 65, .09);
    }

    body.has-user .mobile-app-topbar-actions > a.mobile-app-topbar-logout:active {
        color: #ffb2bb;
        border-color: rgba(255, 91, 108, .3);
        background: rgba(194, 49, 65, .15);
    }

    .mobile-more-account-label {
        margin-top: 12px;
        padding-top: 10px;
        border-top: 1px solid rgba(129, 180, 239, .07);
    }

    .mobile-more-account-grid a {
        background: linear-gradient(145deg, rgba(63, 122, 218, .08), rgba(255,255,255,.022));
        border-color: rgba(105, 166, 240, .1);
    }

    .mobile-more-account-grid a i {
        background: rgba(55, 116, 213, .1);
        border-color: rgba(105, 166, 240, .15);
    }

    .auth-redesign-surface .desktop-app-topbar,
    .auth-redesign-surface .nav-toggle,
    .auth-redesign-surface #navToggle,
    .auth-redesign-surface .nav-backdrop {
        display: none !important;
    }
}

.dashboard-v5-mobile,
.mobile-login-redesign,
.proof-selector-mobile,
.mobile-user-footer {
    display: none;
}

@media (max-width: 768px) {
    .dashboard-original-desktop,
    .proof-selector-desktop,
    .desktop-login-original,
    .desktop-user-footer {
        display: none !important;
    }

    .dashboard-v5-mobile,
    .proof-selector-mobile,
    .mobile-login-redesign,
    .mobile-user-footer {
        display: block;
    }

    body.auth-mobile-redesign .desktop-app-topbar {
        display: none !important;
    }

    body.auth-mobile-redesign .app-shell {
        width: calc(100% - 16px);
        margin: 8px auto 0;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    body.auth-mobile-redesign .main-content {
        padding: 0;
    }

    body.auth-mobile-redesign .flash {
        width: 100%;
        max-width: none;
        margin: 0 0 10px;
        border-radius: 14px;
    }

    body.has-user .mobile-app-topbar-actions > a.mobile-app-topbar-logout {
        border-color: rgba(255, 98, 112, .22);
        background: rgba(198, 51, 66, .11);
        color: #ff8793;
    }

    body.has-user .mobile-app-topbar-actions > a.mobile-app-topbar-logout:active {
        border-color: rgba(255, 98, 112, .35);
        background: rgba(198, 51, 66, .18);
    }

    .site-footer .mobile-user-footer {
        text-align: center;
    }

    .site-footer .mobile-user-footer .site-footer-copy {
        font-size: .68rem;
        line-height: 1.8;
    }

    .mobile-login-redesign {
        width: 100%;
        display: grid;
        gap: 10px;
    }

    .mobile-login-header {
        min-height: 58px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 8px 10px;
        border: 1px solid rgba(124, 181, 246, .13);
        border-radius: 18px;
        background: linear-gradient(180deg, rgba(10, 23, 41, .96), rgba(6, 15, 28, .97));
        box-shadow: 0 16px 40px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.03);
    }

    .mobile-login-brand {
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 9px;
        color: inherit;
        text-decoration: none;
    }

    .mobile-login-brand-mark,
    .mobile-login-home {
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
        display: grid;
        place-items: center;
        border: 1px solid rgba(106,166,241,.18);
        border-radius: 11px;
        background: rgba(54,126,231,.1);
        color: #91beff;
    }

    .mobile-login-brand-mark .icon-svg,
    .mobile-login-home .icon-svg {
        width: 17px;
        height: 17px;
    }

    .mobile-login-brand > span:last-child {
        min-width: 0;
        display: grid;
        gap: 2px;
    }

    .mobile-login-brand strong {
        color: #f4f8ff;
        font-size: .76rem;
    }

    .mobile-login-brand small {
        color: #7f96b2;
        font-size: .55rem;
    }

    .mobile-login-card {
        overflow: hidden;
        border: 1px solid rgba(124,181,246,.13);
        border-radius: 22px;
        background: linear-gradient(150deg, rgba(11,25,44,.98), rgba(5,14,27,.99));
        box-shadow: 0 24px 68px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.03);
    }

    .mobile-login-intro {
        position: relative;
        overflow: hidden;
        padding: 24px 18px 20px;
        text-align: center;
        border-bottom: 1px solid rgba(124,181,246,.08);
        background: radial-gradient(circle at 20% 10%, rgba(71,139,240,.18), transparent 18rem);
    }

    .mobile-login-kicker {
        display: inline-flex;
        align-items: center;
        min-height: 28px;
        padding: 0 10px;
        border: 1px solid rgba(120,180,246,.16);
        border-radius: 999px;
        background: rgba(67,137,230,.09);
        color: #b9d8ff;
        direction: ltr;
        font-size: .6rem;
        font-weight: 800;
    }

    .mobile-login-intro h1 {
        margin: 13px 0 7px;
        color: #fff;
        font-size: 1.7rem;
        line-height: 1.25;
    }

    .mobile-login-intro > p {
        margin: 0;
        color: #94aac5;
        font-size: .7rem;
        line-height: 1.85;
    }

    .mobile-login-features {
        margin-top: 16px;
        display: grid;
        grid-template-columns: repeat(3, minmax(0,1fr));
        gap: 7px;
    }

    .mobile-login-features > span {
        min-height: 64px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        border: 1px solid rgba(124,181,246,.08);
        border-radius: 14px;
        background: rgba(255,255,255,.024);
    }

    .mobile-login-features i,
    .mobile-login-features .icon-svg {
        width: 18px;
        height: 18px;
        display: inline-flex;
        color: #8ebdff;
    }

    .mobile-login-features b {
        color: #dce9fa;
        font-size: .61rem;
    }

    .mobile-login-form-panel {
        padding: 18px;
        background: rgba(3,10,20,.2);
    }

    .mobile-login-form-head {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 16px;
    }

    .mobile-login-form-head > span {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
        display: grid;
        place-items: center;
        border: 1px solid rgba(93,157,242,.2);
        border-radius: 13px;
        background: rgba(52,126,236,.11);
        color: #8fc0ff;
    }

    .mobile-login-form-head .icon-svg {
        width: 18px;
        height: 18px;
    }

    .mobile-login-form-head h2 {
        margin: 0 0 3px;
        color: #f8fbff;
        font-size: .94rem;
    }

    .mobile-login-form-head p {
        margin: 0;
        color: #8097b4;
        font-size: .6rem;
    }

    .mobile-login-form {
        display: grid;
        gap: 13px;
    }

    .mobile-login-form .form-field {
        margin: 0;
    }

    .mobile-login-form label {
        margin-bottom: 6px;
        color: #9eb1c9;
        font-size: .64rem;
    }

    .mobile-login-input {
        position: relative;
    }

    .mobile-login-input > span {
        position: absolute;
        inset-inline-end: 13px;
        top: 50%;
        transform: translateY(-50%);
        width: 17px;
        height: 17px;
        color: #7492b9;
        pointer-events: none;
    }

    .mobile-login-input .icon-svg {
        width: 17px;
        height: 17px;
    }

    .mobile-login-input input {
        width: 100%;
        min-height: 48px;
        padding: 0 42px 0 13px;
        border: 1px solid rgba(129,180,239,.11);
        border-radius: 13px;
        background: rgba(255,255,255,.027);
        color: #f4f8ff;
        font-size: .74rem;
    }

    #usernameMobile {
        direction: ltr;
        text-align: left;
    }

    #usernameMobile::placeholder {
        direction: rtl;
        text-align: right;
    }

    .mobile-login-submit {
        width: 100%;
        min-height: 48px;
        margin-top: 2px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border-radius: 13px;
        font-size: .75rem;
    }

    .mobile-login-submit .icon-svg {
        width: 16px;
        height: 16px;
        transform: rotate(-135deg);
    }

    .proofs-public-page.is-mode-selector {
        gap: 10px;
    }

    .proof-selector-intro-mobile {
        min-height: 116px;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px;
        border: 1px solid rgba(124,181,246,.12);
        border-radius: 19px;
        background: radial-gradient(circle at 10% 10%, rgba(70,139,240,.14), transparent 16rem), linear-gradient(145deg, rgba(12,27,47,.97), rgba(6,15,29,.99));
        box-shadow: 0 18px 48px rgba(0,0,0,.17), inset 0 1px 0 rgba(255,255,255,.025);
    }

    .proof-selector-intro-icon-mobile {
        width: 46px;
        height: 46px;
        flex: 0 0 46px;
        display: grid;
        place-items: center;
        border: 1px solid rgba(104,165,241,.2);
        border-radius: 14px;
        background: rgba(56,128,230,.12);
        color: #91c1ff;
    }

    .proof-selector-intro-icon-mobile .icon-svg {
        width: 21px;
        height: 21px;
    }

    .proof-selector-intro-copy-mobile {
        min-width: 0;
    }

    .proof-selector-intro-copy-mobile > span {
        color: #7fa8dd;
        font-size: .62rem;
        font-weight: 800;
    }

    .proof-selector-intro-copy-mobile h1 {
        margin: 3px 0 4px;
        color: #f8fbff;
        font-size: 1.05rem;
        line-height: 1.4;
    }

    .proof-selector-intro-copy-mobile p {
        margin: 0;
        color: #8fa5bf;
        font-size: .64rem;
        line-height: 1.7;
    }

    .proof-mode-grid-mobile {
        margin-top: 8px;
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .proof-mode-option-mobile {
        --mode-option-accent: #659ff1;
        position: relative;
        min-height: 104px;
        display: grid;
        grid-template-columns: auto minmax(0,1fr) auto auto;
        align-items: center;
        gap: 10px;
        padding: 13px;
        overflow: hidden;
        border: 1px solid color-mix(in srgb, var(--mode-option-accent) 18%, transparent);
        border-radius: 17px;
        background: linear-gradient(145deg, color-mix(in srgb, var(--mode-option-accent) 7%, #0c1c31), rgba(6,15,28,.98));
        color: inherit;
        text-decoration: none;
    }

    .proof-mode-option-mobile.is-bedwars {
        --mode-option-accent: #8e7cf1;
    }

    .proof-mode-option-icon-mobile {
        width: 45px;
        height: 45px;
        display: grid;
        place-items: center;
        border: 1px solid color-mix(in srgb, var(--mode-option-accent) 26%, transparent);
        border-radius: 14px;
        background: color-mix(in srgb, var(--mode-option-accent) 11%, rgba(4,12,23,.8));
        color: color-mix(in srgb, var(--mode-option-accent) 82%, white);
    }

    .proof-mode-option-icon-mobile .icon-svg {
        width: 20px;
        height: 20px;
    }

    .proof-mode-option-copy-mobile {
        min-width: 0;
        display: grid;
        gap: 4px;
    }

    .proof-mode-option-copy-mobile strong {
        color: #f8fbff;
        font-size: .84rem;
    }

    .proof-mode-option-copy-mobile small {
        color: #8299b6;
        font-size: .59rem;
        line-height: 1.6;
    }

    .proof-mode-option-count-mobile {
        min-width: 52px;
        min-height: 45px;
        display: grid;
        place-items: center;
        align-content: center;
        gap: 2px;
        padding: 5px 7px;
        border: 1px solid rgba(129,180,239,.08);
        border-radius: 12px;
        background: rgba(255,255,255,.025);
    }

    .proof-mode-option-count-mobile b {
        color: #eef5ff;
        font-size: .78rem;
    }

    .proof-mode-option-count-mobile small {
        color: #7289a5;
        font-size: .51rem;
    }

    .proof-mode-option-arrow-mobile {
        width: 29px;
        height: 29px;
        display: grid;
        place-items: center;
        border-radius: 9px;
        background: rgba(255,255,255,.03);
        color: #8fb8ee;
        font-size: .75rem;
    }
}

@media (max-width: 420px) {
    .proof-mode-option-mobile {
        grid-template-columns: auto minmax(0,1fr) auto;
    }

    .proof-mode-option-count-mobile {
        display: none;
    }
}

@media (max-width: 768px) {
    .mobile-app-messenger-new {
        position: absolute;
        top: -10px;
        right: -24px;
        z-index: 4;
        min-width: 38px;
        height: 19px;
        padding: 0 6px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 2px solid #08182a;
        border-radius: 999px;
        background: linear-gradient(180deg, #ff526a, #e92e49);
        box-shadow: 0 5px 14px rgba(234, 46, 73, .38);
        color: #fff;
        font-size: 9px;
        font-weight: 900;
        line-height: 1;
        white-space: nowrap;
    }

    body.has-user .mobile-app-topbar-tickets.is-dashboard-new .mobile-app-ticket-badge {
        right: auto;
        left: -7px;
    }
}