#storyos-mm-btn, #storyos-mm-mask, #storyos-mm-sheet { display: none; }
        @media (max-width: 960px) {
            #storyos-mm-btn {
                position: fixed !important; top: 14px; right: 14px; z-index: 2147483646 !important;
                width: 42px; height: 42px; display: flex !important; align-items: center; justify-content: center;
                background: #fff; border: 1px solid #e1e4ed; border-radius: 12px;
                box-shadow: 0 2px 10px rgba(5,0,56,.10); cursor: pointer; padding: 0; margin: 0;
                -webkit-tap-highlight-color: transparent; transition: transform .1s;
            }
            #storyos-mm-btn:active { transform: scale(.94); }
            #storyos-mm-btn svg { width: 22px; height: 22px; pointer-events: none; }
            #storyos-mm-btn svg line { stroke: #1a1a2e; stroke-width: 2.2; stroke-linecap: round; }

            #storyos-mm-mask {
                position: fixed !important; inset: 0; z-index: 2147483646 !important;
                background: rgba(20,20,40,.42); opacity: 0; transition: opacity .26s ease;
                -webkit-tap-highlight-color: transparent;
            }
            #storyos-mm-sheet {
                position: fixed !important; left: 0; right: 0; bottom: 0; z-index: 2147483647 !important;
                background: #fff; border-radius: 22px 22px 0 0; padding: 10px 16px calc(18px + env(safe-area-inset-bottom));
                transform: translateY(110%); transition: transform .30s cubic-bezier(.32,.72,0,1);
                max-height: 86vh; overflow-y: auto; box-shadow: 0 -6px 30px rgba(5,0,56,.16);
            }
            body.storyos-mm-open #storyos-mm-mask { display: block !important; opacity: 1; }
            body.storyos-mm-open #storyos-mm-sheet { display: block !important; transform: translateY(0); }
            body.storyos-mm-open #storyos-mm-btn { opacity: 0; pointer-events: none; }

            .storyos-mm-grip { width: 38px; height: 4px; border-radius: 2px; background: #d7dae6; margin: 4px auto 14px; }
            .storyos-mm-user { display: flex; align-items: center; gap: 12px; padding: 0 4px 14px; margin-bottom: 12px; border-bottom: 1px solid #eef0f5; }
            .storyos-mm-ava { width: 42px; height: 42px; border-radius: 50%; background: #e8eaf6; flex-shrink: 0; background-size: cover; background-position: center; }
            .storyos-mm-uname { font-size: 15px; font-weight: 600; color: #1a1a2e; }
            .storyos-mm-uvip { font-size: 12px; color: #9a6a12; background: #fef3da; display: inline-block; padding: 1px 8px; border-radius: 999px; margin-top: 2px; }
            .storyos-mm-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
            .storyos-mm-card { border-radius: 14px; padding: 14px; text-decoration: none; display: block; transition: transform .1s; }
            .storyos-mm-card:active { transform: scale(.96); }
            .storyos-mm-card i { font-size: 22px; display: block; margin-bottom: 10px; }
            .storyos-mm-card span { font-size: 14px; font-weight: 600; }
            .storyos-mm-card.is-soon { opacity: .55; }
            .storyos-mm-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 1px solid #eef0f5; }
            .storyos-mm-foot-left { display: flex; gap: 16px; }
            .storyos-mm-foot a { font-size: 13px; color: #64748b; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
            .storyos-mm-foot a.exit { color: #b4232a; }

            html.dark-mode #storyos-mm-btn { background: #1a1b2e; border-color: #30334f; }
            html.dark-mode #storyos-mm-btn svg line { stroke: #e0e4f8; }
            html.dark-mode #storyos-mm-sheet { background: #14152b; box-shadow: 0 -6px 30px rgba(0,0,0,.5); }
            html.dark-mode .storyos-mm-user, html.dark-mode .storyos-mm-foot { border-color: #2a2b40; }
            html.dark-mode .storyos-mm-uname { color: #f3f4fb; }
            html.dark-mode .storyos-mm-grip { background: #3a3c55; }
        }