.sovi-mobile-header,
.sovi-mobile-header * {
    box-sizing: border-box;
}

.sovi-mobile-header {
    display: none;
}

@media (max-width: 768px) {
    .sovi-mobile-header {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 1000;
        display: block;
        width: 100%;
        isolation: isolate;
        border-bottom: 1px solid rgb(124 58 237 / 8%);
        background: rgb(255 255 255 / 86%);
        box-shadow: 0 8px 28px rgb(43 26 92 / 7%);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        color: #172039;
        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif;
    }

    .sovi-mobile-header-inner {
        display: flex;
        align-items: center;
        width: 100%;
        height: 58px;
        padding: 0 16px;
        gap: 12px;
    }

    .sovi-mobile-header-logo {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        text-decoration: none;
    }

    .sovi-mobile-header-logo img {
        display: block;
        width: auto;
        max-width: 60vw;
        height: 32px;
        object-fit: contain;
        object-position: left center;
    }

    .sovi-mobile-hamburger {
        display: flex;
        width: 44px;
        height: 44px;
        margin-left: auto;
        padding: 10px;
        flex-shrink: 0;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border: 1px solid rgb(124 58 237 / 10%);
        border-radius: 8px;
        background: rgb(255 255 255 / 88%);
        box-shadow: 0 12px 24px rgb(43 26 92 / 10%);
        cursor: pointer;
    }

    .sovi-mobile-hamburger > span {
        display: block;
        width: 100%;
        height: 2px;
        border-radius: 4px;
        background: #111827;
    }

    .sovi-mobile-hamburger > span + span {
        margin-top: 5px;
    }

    .sovi-mobile-nav {
        position: absolute;
        top: 58px;
        right: 0;
        left: 0;
        z-index: 45;
        width: 100%;
        height: auto;
        max-height: calc(100vh - 58px);
        overflow: visible;
    }

    .sovi-mobile-nav[hidden] {
        display: none;
    }

    .mobile-feature-menu,
    .mobile-feature-menu * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif;
    }

    .mobile-feature-menu {
        --mobile-header-height: 58px;
        display: flex;
        width: 100%;
        height: auto;
        min-height: 0;
        max-height: calc(100vh - var(--mobile-header-height));
        padding: 14px 8px max(14px, env(safe-area-inset-bottom));
        flex-direction: column;
        background: #f8f6ff;
    }

    .mobile-menu-card {
        display: flex;
        min-height: 0;
        max-height: 100%;
        flex: 0 1 auto;
        flex-direction: column;
        overflow: hidden;
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 5px 18px rgb(37 24 75 / 14%);
    }

    .mobile-menu-account { flex-shrink: 0; padding: 8px 10px 10px; border-bottom: 1px solid #e4e6ed; background: #fff; }
    .mobile-menu-login-row, .mobile-menu-user-row { min-height: 44px; display: flex; align-items: center; gap: 10px; border: 0; background: transparent; color: #172039; font: inherit; text-align: left; cursor: pointer; }
    .mobile-menu-login-row { width: 100%; }
    .mobile-menu-account-summary { display: flex; align-items: center; gap: 12px; }
    .mobile-menu-user-row { min-width: 0; flex: 1 1 auto; }
    .mobile-menu-login-row strong, .mobile-menu-user-name { min-width: 0; flex: 1; overflow: hidden; font-size: 13px; line-height: 1.25; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
    .mobile-menu-account-avatar { position: relative; width: 34px; height: 34px; display: flex; flex-shrink: 0; align-items: center; justify-content: center; overflow: hidden; border-radius: 50%; background: #8c55f2; color: #fff; font-size: 14px; font-weight: 700; }
    .mobile-menu-account-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    .mobile-menu-account-avatar-empty { background: #f1edfa; color: #6b7280; }
    .mobile-menu-account-avatar-empty svg { width: 21px; height: 21px; }
    .mobile-menu-account-arrow { margin-left: auto; color: #24314e; font-size: 21px; }
    .mobile-menu-sparks-status { min-width: 112px; max-width: 48%; flex: 0 0 auto; text-align: right; }
    .mobile-menu-sparks-summary { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
    .mobile-menu-sparks-label, .mobile-menu-sparks-count { color: #8151ee; font-size: 13px; line-height: 1.2; font-weight: 700; }
    .mobile-menu-sparks-reset { display: block; margin-top: 3px; overflow: hidden; color: #53627f; font-size: 9px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
    .mobile-menu-upgrade { width: 100%; min-height: 34px; margin-top: 8px; padding: 0 12px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 0; border-radius: 9px; background: linear-gradient(100deg, #7c3aed, #9e5af2); color: #fff; font: inherit; cursor: pointer; }
    .mobile-menu-upgrade img, .mobile-menu-vip-status img { width: 24px; height: 24px; object-fit: contain; }
    .mobile-menu-upgrade strong, .mobile-menu-vip-status strong { font-size: 12px; line-height: 1.2; font-weight: 700; }
    .mobile-menu-vip-status { min-height: 36px; max-width: 48%; padding: 0 9px; display: flex; align-items: center; gap: 8px; border: 1px solid #e7dcff; border-radius: 11px; background: linear-gradient(110deg, #faf7ff, #eee7ff); color: #8151ee; }

    .mobile-menu-heading {
        display: flex;
        padding: 10px 10px 9px;
        flex-shrink: 0;
        align-items: flex-start;
        gap: 9px;
    }

    .mobile-menu-spark {
        margin-top: 0;
        color: #8c55f2;
        font-size: 24px;
        line-height: 1;
    }

    .mobile-menu-heading-copy {
        display: flex;
        min-width: 0;
        flex: 1;
        flex-direction: column;
        gap: 2px;
    }

    .mobile-menu-heading-copy strong {
        color: #8151ee;
        font-size: 15px;
        font-weight: 700;
        line-height: 1.2;
    }

    .mobile-menu-heading-copy span {
        color: #53627f;
        font-size: 11px;
        line-height: 1.3;
    }

    .mobile-menu-close {
        display: flex;
        width: 26px;
        height: 26px;
        padding: 0;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        border: 0;
        background: transparent;
        cursor: pointer;
    }

    .mobile-menu-close span {
        width: 7px;
        height: 7px;
        border-top: 1.8px solid #34415c;
        border-left: 1.8px solid #34415c;
        transform: rotate(45deg) translate(2px, 2px);
    }

    .mobile-feature-list {
        min-height: 0;
        padding: 0 10px;
        flex: 1 1 auto;
        overflow-y: auto;
        scrollbar-width: none;
    }

    .mobile-feature-list::-webkit-scrollbar {
        display: none;
    }

    .mobile-feature-item {
        display: flex;
        min-height: 59px;
        padding: 7px 0;
        align-items: center;
        gap: 11px;
        border-bottom: 1px solid #e4e6ed;
        color: #172039;
        text-decoration: none;
    }

    .mobile-feature-item:last-child {
        border-bottom: 0;
    }

    .mobile-feature-item:active {
        opacity: 0.72;
    }

    .mobile-feature-icon {
        display: flex;
        width: 34px;
        height: 34px;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        border-radius: 9px;
        box-shadow: 0 5px 10px rgb(51 48 99 / 16%);
        color: #fff;
    }

    .mobile-feature-icon svg {
        width: 19px;
        height: 19px;
    }

    .mobile-feature-copy {
        display: flex;
        min-width: 0;
        flex: 1;
        flex-direction: column;
        gap: 2px;
    }

    .mobile-feature-copy strong {
        overflow: hidden;
        color: #172039;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.2;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-feature-copy small {
        overflow: hidden;
        color: #53627f;
        font-size: 10px;
        line-height: 1.25;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-feature-arrow {
        padding-left: 4px;
        flex-shrink: 0;
        color: #24314e;
        font-size: 21px;
        font-weight: 400;
        line-height: 1;
    }
}

.mobile-menu-account-actions-overlay { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: flex-end; justify-content: center; background: rgb(15 23 42 / 48%); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif; }
.mobile-menu-account-actions-sheet { width: min(100%, 480px); padding: 18px 16px max(16px, env(safe-area-inset-bottom)); border-radius: 20px 20px 0 0; background: #fff; box-shadow: 0 -10px 32px rgb(37 24 75 / 18%); }
.mobile-menu-account-actions-header { min-height: 38px; display: flex; align-items: center; justify-content: space-between; padding: 0 4px 10px; color: #172039; }
.mobile-menu-account-actions-header strong { font-size: 17px; line-height: 1.3; font-weight: 700; }
.mobile-menu-account-actions-close { width: 34px; height: 34px; border: 0; border-radius: 50%; background: #f3f1f8; color: #65708a; font: inherit; font-size: 24px; cursor: pointer; }
.mobile-menu-account-action, .mobile-menu-account-actions-cancel { width: 100%; min-height: 50px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 12px; background: #f8f6ff; color: #6f3fe5; font: inherit; font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer; }
.mobile-menu-account-action + .mobile-menu-account-action { margin-top: 8px; }
.mobile-menu-logout { background: #fff3f3; color: #d44747; }
.mobile-menu-account-actions-cancel { margin-top: 12px; border: 1px solid #e4e6ed; background: #fff; color: #53627f; }

@media (max-width: 480px) {
    .sovi-mobile-header-inner {
        height: 56px;
    }

    .sovi-mobile-nav {
        top: 56px;
        max-height: calc(100vh - 56px);
    }

    .mobile-feature-menu {
        --mobile-header-height: 56px;
    }
}