.btn.advanced {
    /* layout */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.45rem 1.05rem;
    margin: 2px 3px;

    border-radius: 10px;
    border-width: 1px;
    border-style: solid;
    border-color: #eeeeee;

    background: transparent;
    box-shadow: none;

    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: #6B7280;
    text-transform: none;

    cursor: pointer;
    transition:
        background 200ms cubic-bezier(0.16, 1, 0.3, 1),
        color 200ms cubic-bezier(0.16, 1, 0.3, 1),
        border-color 200ms cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 200ms cubic-bezier(0.16, 1, 0.3, 1),
        transform 150ms cubic-bezier(0.16, 1, 0.3, 1);
}

.btn.advanced:hover,
.btn.advanced:focus {
    background: #008aff;
    border-color: #eeeeee;
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
    text-decoration: none;
    transform: translateY(-1px);
}

.btn.advanced:active {
    transform: scale(0.97);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.15);
}

.btn.advanced.active,
.btn.advanced[aria-current="true"] {
    background: #008aff;
    border-color: transparent;
    color: #FFFFFF;
    transform: translateY(-1px);
}

.btn.advanced strong {
    font-weight: 500;
}

.btn.advanced:focus-visible {
    outline: 2px solid rgba(59, 130, 246, 0.9);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px rgba(191, 219, 254, 0.9);
}

.btn.advanced i {
    font-size: 90%;
    opacity: 0.85;
}