@media (max-width: 400px) {
        html.is-datanav,
        html.is-datanav body {
            width: 100% !important;
            height: 100dvh !important;
            min-height: 100dvh !important;
            margin: 0 !important;
            overflow: hidden !important;
        }

        html.is-datanav #main-wrapper {
            display: block !important;
            width: 100vw !important;
            height: 100dvh !important;
            min-height: 100dvh !important;
            overflow: hidden !important;
        }

        html.is-datanav .left-sidebar,
        html.is-datanav .left-sidebar:hover {
            position: fixed !important;
            inset: 0 auto 0 0 !important;
            width: 70px !important;
            min-width: 70px !important;
            max-width: 70px !important;
            height: 100dvh !important;
            transform: none !important;
            overflow: hidden !important;
            z-index: 3001 !important;
        }

        html.is-datanav .brand-logo {
            justify-content: center !important;
            padding: 8px 0 !important;
        }

        html.is-datanav #sidebarnav .sidebar-link {
            justify-content: center !important;
            padding: 9px 8px !important;
            gap: 0 !important;
        }

        html.is-datanav #sidebarnav .hide-menu,
        html.is-datanav #sidebarnav .nav-small-cap .hide-menu {
            display: none !important;
        }

        html.is-datanav .page-wrapper {
            margin-left: 70px !important;
            width: calc(100vw - 70px) !important;
            min-height: 100dvh !important;
        }

        html.is-datanav .topbar {
            left: 70px !important;
            width: calc(100vw - 70px) !important;
        }

        html.is-datanav .global-login:not(.u-hidden) {
            inset: 0 !important;
            width: 100vw !important;
            height: 100dvh !important;
            min-height: 100dvh !important;
            padding: 0 !important;
            align-items: stretch !important;
            justify-content: stretch !important;
            overflow: auto !important;
            scrollbar-width: none !important;
        }

        html.is-datanav .global-login:not(.u-hidden)::-webkit-scrollbar {
            display: none !important;
        }

        html.is-datanav .global-login__inner,
        html.is-datanav .global-login__content {
            width: 100% !important;
            max-width: none !important;
            min-height: 100dvh !important;
            border-radius: 0 !important;
            box-sizing: border-box !important;
        }
    }

html.is-datanav .brand-logo {
        justify-content: center !important;
        padding: 8px 0 !important;
    }

    html.is-datanav .left-sidebar .brand-logo .logo-img.sb-workspace {
        width: 40px !important;
        max-width: 40px !important;
        margin: 0 auto !important;
        padding: 4px !important;
        justify-content: center !important;
        overflow: hidden !important;
    }

    html.is-datanav .sb-workspace-mark {
        width: 32px !important;
        height: 32px !important;
        flex-basis: 32px !important;
    }

    html.is-datanav .brand-logo .logo-img img.dark-logo,
    html.is-datanav .brand-logo .logo-img img.light-logo {
        content: url("/images/logo-icon.svg") !important;
        width: 32px !important;
        height: 32px !important;
        object-fit: contain !important;
        border-radius: 8px !important;
    }

    html.is-datanav .brand-logo .logo-img img.dark-logo {
        display: none !important;
    }

    html.is-datanav .brand-logo .logo-img img.light-logo {
        display: block !important;
    }

    html.is-datanav #headerCollapse,
    html.is-datanav .left-sidebar .sidebartoggler {
        display: none !important;
    }

/* Search fields: keep the same border/surface when the inner input is active.
   Global input:focus rules paint a primary/blue border + ring; kill that here. */
[role="search"]:hover,
[role="search"]:focus,
[role="search"]:focus-visible,
[role="search"]:focus-within,
[role="search"]:active,
.dui-dt-search:hover,
.dui-dt-search:focus,
.dui-dt-search:focus-visible,
.dui-dt-search:focus-within,
.dui-dt-search:active,
#salesn-root .salesn-search:hover,
#salesn-root .salesn-search:focus,
#salesn-root .salesn-search:focus-visible,
#salesn-root .salesn-search:focus-within,
#salesn-root .salesn-search:active,
.ams-generation-search:hover,
.ams-generation-search:focus,
.ams-generation-search:focus-visible,
.ams-generation-search:focus-within,
.ams-generation-search:active {
    border-color: rgba(15, 15, 16, .11) !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: var(--dt-surface, #fff) !important;
}

[role="search"] input,
[role="search"] input:hover,
[role="search"] input:focus,
[role="search"] input:focus-visible,
[role="search"] input:active,
.dui-dt-search input,
.dui-dt-search input:hover,
.dui-dt-search input:focus,
.dui-dt-search input:focus-visible,
.dui-dt-search input:active,
#salesn-root .salesn-search input,
#salesn-root .salesn-search input:hover,
#salesn-root .salesn-search input:focus,
#salesn-root .salesn-search input:focus-visible,
#salesn-root .salesn-search input:active,
.ams-generation-search input,
.ams-generation-search input:hover,
.ams-generation-search input:focus,
.ams-generation-search input:focus-visible,
.ams-generation-search input:active,
#amsGenerationSearch,
#amsGenerationSearch:hover,
#amsGenerationSearch:focus,
#amsGenerationSearch:focus-visible,
#amsGenerationSearch:active {
    border: 0 !important;
    border-color: transparent !important;
    border-radius: 0 !important;
    outline: 0 !important;
    outline-color: transparent !important;
    box-shadow: none !important;
    background: transparent !important;
}

#amsGenerationAfter,
#amsGenerationAfter:hover,
#amsGenerationAfter:focus,
#amsGenerationAfter:focus-visible,
#amsGenerationAfter:active,
#amsGenerationBefore,
#amsGenerationBefore:hover,
#amsGenerationBefore:focus,
#amsGenerationBefore:focus-visible,
#amsGenerationBefore:active {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

.ams-generation-date-filter:focus-within {
    outline: 0 !important;
    box-shadow: none !important;
    border-color: rgba(15, 15, 16, .11) !important;
}

/* Music Studio composer: kill global textarea:focus blue border/ring. */
#amsGenerationPrompt,
#amsGenerationPrompt:hover,
#amsGenerationPrompt:focus,
#amsGenerationPrompt:focus-visible,
#amsGenerationPrompt:active,
#amsGenerationLyrics,
#amsGenerationLyrics:hover,
#amsGenerationLyrics:focus,
#amsGenerationLyrics:focus-visible,
#amsGenerationLyrics:active {
    border: 0 !important;
    border-color: transparent !important;
    outline: 0 !important;
    outline-color: transparent !important;
    box-shadow: none !important;
    background: transparent !important;
}
.ams-prompt-first .ams-generation-prompt-card:focus-within,
.ams-prompt-first .ams-generation-prompt-card:focus-within:hover {
    border-color: var(--ams-composer-pill-border, rgba(15, 15, 16, .11)) !important;
    box-shadow: var(--ams-composer-shadow, 0 10px 36px rgba(15, 15, 16, .07), 0 1px 2px rgba(15, 15, 16, .04)) !important;
}