.math-inline {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    background: var(--math-bg);
    border: 1px solid var(--math-border);
    border-radius: 4px;
    line-height: 1em;  
    transition: all 0.18s ease;
    margin: 0 0;
    box-sizing: content-box;
}

.math-inline svg {
    margin: 0.12em 0.2em; 
    padding: 0.08em 0;
    shape-rendering: geometricPrecision;
}

.math-inline::after {
    content: "";
    display: block;
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    pointer-events: none;
}

.math-inline:hover {
    transform: translateY(-0.5px) scale(1.02);
    box-shadow: 0 2px 6px -2px rgba(0,32,128,0.1);
}

.math-inline:active {
    transform: scale(0.98);
    background: rgba(230, 234, 240, 0.9);
}

.math-inline > svg {
    flex-shrink: 0;
    max-width: 100%;
}

@media (max-width: 640px) {
    .math-inline svg {
        height: 0.78em;
        margin: 0.1em 0.25em;
    }
}