.mtm-sf-container {  
    position: fixed;  
    bottom: 0;  
    left: 0;  
    right: 0;  
    background: #fff;  
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);  
    transform: translateY(100%);  
    transition: transform 0.3s ease;  
    z-index: 999;  
}  

.mtm-sf-container.visible {  
    transform: translateY(0);  
}  

.mtm-sf-content {  
    margin: 0 auto;  
    padding: 12px 20px;  
}  

.mtm-sf-grid {  
    display: grid;  
    grid-template-columns: auto 1fr auto auto auto auto;  
    gap: 15px;  
    align-items: center;  
    max-width: var(--container-width, 1200px);  
    margin: 0 auto;  
}  

.mtm-sf-item {  
    display: flex;  
    align-items: center;  
    justify-content: center;  
}  

/* Title */  
.mtm-sf-title-wrap {  
    min-width: 0;  
    padding: 0 15px;  
}  

.mtm-sf-current-title {  
    display: block;  
    white-space: nowrap;  
    overflow: hidden;  
    text-overflow: ellipsis;  
    font-size: 14px;  
    color: #333;  
}  

/* Buttons */  
.mtm-sf-nav,  
.mtm-sf-action {  
    width: 36px;  
    height: 36px;  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    border: none;  
    background: #f5f5f5;  
    border-radius: 4px;  
    cursor: pointer;  
    color: #333;  
    transition: all 0.2s ease;  
    padding: 0;  
}  

.mtm-sf-nav:hover,  
.mtm-sf-action:hover {  
    background: #e0e0e0;  
}  

.mtm-sf-nav svg,  
.mtm-sf-action svg {  
    width: 20px;  
    height: 20px;  
    fill: currentColor;  
}  

/* Tooltip */ 

/* Tooltip */  
[data-tooltip] {  
    position: relative;  
}  

[data-tooltip]:before {  
    content: attr(data-tooltip);  
    position: absolute;  
    bottom: 100%;  
    left: 50%;  
    transform: translateX(-50%);  
    padding: 8px 12px;  
    background: #333;  
    color: #fff;  
    font-size: 13px;  
    line-height: 1.4;  
    white-space: normal;  
    max-width: 250px;  
    width: max-content;  
    border-radius: 4px;  
    opacity: 0;  
    visibility: hidden;  
    transition: all 0.3s ease;  
    z-index: 1000;  
    text-align: left;  
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);  
    font-weight: normal;  
    pointer-events: none;  
}  

[data-tooltip]:after {  
    content: '';  
    position: absolute;  
    bottom: calc(100% - 5px);  
    left: 50%;  
    transform: translateX(-50%);  
    border: 6px solid transparent;  
    border-top-color: #333;  
    opacity: 0;  
    visibility: hidden;  
    transition: all 0.3s ease;  
    pointer-events: none;  
}  

[data-tooltip]:hover:before,  
[data-tooltip]:hover:after {  
    opacity: 1;  
    visibility: visible;  
    bottom: calc(100% + 10px);  
}   

/* Modal */  
.mtm-modal {  
    display: none;  
    position: fixed;  
    top: 0;  
    left: 0;  
    width: 100%;  
    height: 100%;  
    background: rgba(0,0,0,0.5);  
    z-index: 1000;  
}  

.mtm-modal-content {  
    position: relative;  
    background: #fff;  
    margin: 10% auto;  
    padding: 20px;  
    width: 90%;  
    max-width: 700px;  
    border-radius: 4px;  
}  

.mtm-modal-close {  
    position: absolute;  
    right: 15px;  
    top: 10px;  
    font-size: 24px;  
    cursor: pointer;  
}  

/* Responsive */  
@media (max-width: 768px) {  
    .mtm-sf-grid {  
        gap: 10px;  
        grid-template-columns: auto auto auto auto auto;  
    }  
    
    .mtm-sf-title-wrap {  
        display: none;  
    }  
}  

@media (max-width: 480px) {  
    .mtm-sf-content {  
        padding: 10px;  
    }  
    
    .mtm-sf-grid {  
        gap: 8px;  
    }  
}