.fl-sapphire {
    --sapphire-bg-base: rgba(30, 30, 30, 0.9);
    --sapphire-text: #f0f0f0;
    --sapphire-shadow: rgba(0, 0, 0, 0.15);
    --sapphire-progress-bg: rgba(255, 255, 255, 0.2);
    --sapphire-progress-fill: rgba(255, 255, 255, 0.9);
    --sapphire-success: rgba(16, 185, 129, 0.95);
    --sapphire-error: rgba(239, 68, 68, 0.95);
    --sapphire-warning: rgba(245, 158, 11, 0.95);
    --sapphire-info: rgba(59, 130, 246, 0.95);
    --sapphire-animation: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@keyframes sapphireIn {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    60% {
        transform: translateY(-3px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
.fl-sapphire {
    background-color: var(--sapphire-bg-base);
    color: var(--sapphire-text);
    padding: 1em 1.5em;
    margin: 0 0 0.75em 0;
    position: relative;
    box-shadow: 0 6px 16px var(--sapphire-shadow);
    transition: all 0.3s ease;
    animation: sapphireIn var(--sapphire-animation);
    font-family: Roboto, var(--fl-font), serif;
    border-radius: 4px 4px 0 0;
    will-change: transform, opacity;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    .fl-message {
        font-size: 0.925em;
        line-height: 1.4;
        color: var(--sapphire-text);
    }
    .fl-progress-bar {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 4px;
        background-color: var(--sapphire-progress-bg);
        overflow: hidden;
        border-radius: 0 0 0.375em 0.375em;
        .fl-progress {
            background-color: var(--sapphire-progress-fill);
            height: 100%;
            width: 100%;
            transform-origin: left center;
            will-change: transform;
        }
    }
    &.fl-success {
        background-color: var(--sapphire-success);
    }
    &.fl-error {
        background-color: var(--sapphire-error);
    }
    &.fl-warning {
        background-color: var(--sapphire-warning);
    }
    &.fl-info {
        background-color: var(--sapphire-info);
    }
    &.fl-rtl {
        direction: rtl;
        .fl-progress .fl-progress {
            transform-origin: right center;
        }
    }
    @media (prefers-reduced-motion: reduce) {
        animation: none;
    }
}
